[S'inspirer] Postez votre Plan / Design

[Almy]

L’effet transparence marche, merci

Autre chose, j’ai changer la police mais je ne sais pas comment faire pour mettre en gras.
Est ce possible ?

[Phil56]

Bonjour,

j'ai utilisé ça :

https://github.com/loktar00/JQuery-Snowfall

exemple dans un bloc texte/html

Code : Tout sélectionner

<script src='/un_chemin_dans_jeedom/snowfall.jquery.min.js'></script>
<script>
$(document).snowfall({image :"/un_chemin_dans_jeedom/flake.png", minSize: 10, maxSize:32});
</script>

ken@vo
Phil

[Djal94]

Bonjour,

j'ai utilisé ça :

https://github.com/loktar00/JQuery-Snowfall

exemple dans un bloc texte/html

Code : Tout sélectionner

<script src='/un_chemin_dans_jeedom/snowfall.jquery.min.js'></script>
<script>
$(document).snowfall({image :"/un_chemin_dans_jeedom/flake.png", minSize: 10, maxSize:32});
</script>

ken@vo
Phil

Bon, j'arrive pas, il se passe rien dans ma fenêtre... suffit de récupérer le .js et le .png, et pointer dessus dans le html c'est tout non?

[Phil56]

@Djal94 oui je n'ai rien fait d'autre, attention tout de même à rendre www-data propriétaire de ces deux fichiers.
Tu as une erreur dans la console javascript de ton navigateur ?

[Djal94]

Je Check ça et je te dis, merci


Envoyé de mon iPhone en utilisant Tapatalk

[morlong]

Cool ca fonctionne nickel.
Merci Phil56

[Djal94]

Cool ca fonctionne nickel.
Merci Phil56

Tu peux faire une capture de ce que tu as mis dans "texte/html" stp?

Merci

[morlong]

Voilà:
<script src='/montheme/snowfall.jquery.min.js'></script>
<script>
$(document).snowfall({image :"/montheme/flake.png", minSize: 10, maxSize:32});
</script>

sur l'ordi c'est impec mais sur la tablette mural elle en chie un peu...mdr

j'ai copier le fichier snowfall.jquery.min.js du lien (dossier dist) que j'ai coller dans un fichier texte renommé "snowfall.jquery.min.js" puis coller dans mon dossier "montheme" via le plugin outil de developpement.
Et pareil avec l'image du flocon en png.

[Djal94]

Voilà:
<script src='/montheme/snowfall.jquery.min.js'></script>
<script>
$(document).snowfall({image :"/montheme/flake.png", minSize: 10, maxSize:32});
</script>

sur l'ordi c'est impec mais sur la tablette mural elle en chie un peu...mdr

j'ai copier le fichier snowfall.jquery.min.js du lien (dossier dist) que j'ai coller dans un fichier texte renommé "snowfall.jquery.min.js" puis coller dans mon dossier "montheme" via le plugin outil de developpement.
Et pareil avec l'image du flocon en png.

Bon bah j'ai fait pareil mais rien.... j'ai copié directement le .js et le .png dans le dossier, ya un interet à le copier dans un .txt?

[Sartog]

@Djal94, peux-tu faire une capture de l'emplacement des fichiers + de ton code html, s'il te plait ?

As-tu essayé avec différents navigateurs et sur différents matériels ?

[Djal94]

Snow2.JPG (35.02 Kio) Consulté 2345 fois

Snow1.JPG (19.03 Kio) Consulté 2345 fois

Essayé sour Chrome/Firefox d'un coté (boulot), et Safari/Firefox de l'autre (Maison)

[Sartog]

@Djal94, je suis désolé mais chez moi ça fonctionne.

Le seul problème viendrait peut être des droits sur les fichiers qui serait manquant.
As-tu créé le dossier depuis le plugin "Outils de développement" et transférer les fichiers via drag and drop ?

Capture1.JPG (19.08 Kio) Consulté 2337 fois

Capture2.JPG (17.67 Kio) Consulté 2337 fois

Capture3.JPG (109.19 Kio) Consulté 2337 fois

[Djal94]

@Djal94, je suis désolé mais chez moi ça fonctionne.

Le seul problème viendrait peut être des droits sur les fichiers qui serait manquant.
As-tu créé le dossier depuis le plugin "Outils de développement" et transférer les fichiers via drag and drop ?

Oui j'ai fait comme ca.

[Sartog]

Nous avons donc procédé exactement de la même manière.
Par conte, je n’arrive pas à expliquer pourquoi ça ne fonctionne pas chez toi.

Sans grande conviction, essais de mettre les 3 fichier dans un dossier séparé de tous les autres js « mon thème/snowfall2 » au cas où (en prenant soin d’adpter Ton code html :p)

[Didier3L]

Bonjour
je n'arrive pas à déplacer mes éléments à l'aide de la souris en mode édition.
la seule solution est la modification de position X et Y

[Didier3L]

Bonjour
je n'arrive pas à déplacer mes éléments à l'aide de la souris en mode édition.
la seule solution est la modification de position X et Y

A faire avec Chrome, ça fonctionne mal ou pas du tout avec Firefox.

[Bello65]

Bonjour @Sartog, ton fond d'écran, c'est une image figée construire type photoshop ?
Merci

[Sartog]

Bonjour @Sartog, ton fond d'écran, c'est une image figée construire type photoshop ?
Merci

Bonsoir Bello65,

Merci pour ton intérêt.

C'est du css qui donne aux cadres un effet incrusté (le fond est unis).
Ci-dessous en mode édition avec surbrillance pour s'en rendre compte.
Je peux partager le css, il faut juste me dire si tu veux l'intégralité du css ou juste la partie pour faire les cadres

Capture.JPG (133.88 Kio) Consulté 2267 fois

[Bello65]

Ben je veux bien l'intégralité, ensuite je verrai si je peux l'utiliser, le modifier. J'ai un bouquin sur le css, je vais voir si je m'en sors. mais ce ne sera pas gagné merci en tout cas (tu peux me fournir les cades aussi si c'est possible) et comme cela, je vais apprendre Je trouve cela très sobre, très vraiment nickel pour une future tablette écran sur le mur pour gérer simplement, visuellement le tout.

[Sartog]

@Bello65,

Merci pour ton intérêt, ça fait plaisir à lire
Comme tu le souligne, je cherchais quelque chose de sobre qui passe bien sur une tablette murale (la chuwi HI12).
Il y a encore des travaux de mise en page (la preuve avec la nouvelle capture ci-dessous où les info en haut à droite ont été modifiées légèrement et la 2nde capture où l'agencement est à revoir), mais il paraît que je suis un peu trop perfectionniste (pour rester poli car ma femme à un autre terme pour désigner cela ).

Je te mets en PJ le fichier css.
Ce dernier est composé de plusieurs parties pour le design global.
Si tu cherche particulièrement les cadres présent sur mon design (effet inset), il te faut aller à la section cadre (ligne 185).
Tu as aussi un "cadre2" (ligne 236), ce dernier va donner un effet outset.

Pour faire appel à ce code, j'ai plusieurs zone de text / html :

• Pour les cadres, c'est ce code

  Code : Tout sélectionner

  <div class="cadre-body">
    <div align=center class="cadre-titre">Salon</div>
    <div class="cadre-main"></div>
  </div>

• Pour le menu en haut à gauche, c'est ce code (c'est ce code qui charge le fichier css)

  Code : Tout sélectionner

  <link href="desktop/theme/style.css" rel="stylesheet" type="text/css">
  
  <div class="div-menu-icones">
  	<a class="div-menu-icones-item" href="/index.php?v=d&p=plan&plan_id=1"><img src="desktop/theme/icons/icon_home_light.png" height=50px width=50px></a>
  	<a class="div-menu-icones-item" href="/index.php?v=d&p=plan&plan_id=3"><img src="desktop/theme/icons/icon_camera_light.png" height=50px width=50px></a>
  	<div class="div-menu-icones-item selected"><img src="desktop/theme/icons/icon_volet_light.png" height=50px width=50px></div>
  	<a class="div-menu-icones-item" href="/index.php?v=d&p=plan&plan_id=7"><img src="desktop/theme/icons/icon_temperature_light.png" height=50px width=50px></a>
  	<a class="div-menu-icones-item" href="/index.php?v=d&p=plan&plan_id=8"><img src="desktop/theme/icons/icon_meteo_light.png" height=50px width=50px></a>
  	<a class="div-menu-icones-item" href="/index.php?v=d&p=plan&plan_id=9"><img src="desktop/theme/icons/icon_config_light.png" height=50px width=50px></a>
  </div>

• Pour la zone de synthèse, en haut à droite c'est ce code

  Code : Tout sélectionner

  <div class="div-menu-synthese">
  	<div class="div-menu-synthese-item resume"></div>
  	<div class="div-menu-synthese-item puissance"></div>
  	<div class="div-menu-synthese-item connexion_web"></div>
  	<div class="div-menu-synthese-item clone_centreMsg"></div>
  	<div class="div-menu-synthese-item info_alarme"></div>
  	<div class="div-menu-synthese-item presence"><a href="#"></a></div>
    	<iframe src="desktop/theme/horloge/horloge.html" class="div-menu-synthese-item iframe-clock" allowTransparency="true" scrolling="no"></iframe>
  </div>

Si tu as besoin d'info, n'hésite pas car ce sera avec plaisir.

Capture.JPG (109.63 Kio) Consulté 2220 fois

Capture1.JPG (92.87 Kio) Consulté 2220 fois