Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[S'inspirer] Postez votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: [S'inspirer] Postez votre Plan / Design

Message par Djal94 » 07 févr. 2018, 09:13

Jeeviens a écrit :
07 févr. 2018, 01:10
@Djal94 : Tu veux les images c'est ca ? C'est fait : )
Super merci
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

karayoo
Timide
Messages : 123
Inscription : 25 janv. 2015, 23:00

Re: [S'inspirer] Postez votre Plan / Design

Message par karayoo » 07 févr. 2018, 17:03

Les amis, j'ai beau essayer plein de trucs j'y arrive pas ...
Comment fait on pour changer la police d'un widget svp, par ex le "tile" pour les temp ?
merci
Jeedom Maître : RPI2 + Razberry + Dongle 3G
4xFGMS-001 - 7xFGDS-002 - 3xFGS-222 - 4xFGK-101 - 2xWallPlug
2xQubino Volets + 6xFGRM-222 + Sirène ZM1601 + Multiprise et Prise GreenWave

Jeedom Slave : RPI2 + RFXCOM + 1wire sur GPIO + TeleInfo sur GPIO

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 07 févr. 2018, 18:24

Je pense qu'il faut avoir de bonnes notions de html/css... et aussi fréquemment vider le cache du navigateur.
Je suis en plein dedans et je galère bien !
Dans le cas d'une police différente, il faut "l'installer" et la déclarer.

Tu l'ajoute dans un dossier de Jeedom, comme par exemple /var/www/html/fonts
Ensuite tu déclares la police dans ton widget :

Code : Tout sélectionner

<style>
  @font-face {
	font-family: "Comic";
	src: url('fonts/ComicSansMSRegular.ttf');
}
</style>
Puis pour l'utiliser, dans une balise p.ex. :

Code : Tout sélectionner

font-family:Comic;
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

Re: [S'inspirer] Postez votre Plan / Design

Message par Sartog » 08 févr. 2018, 09:14

karayoo a écrit :
07 févr. 2018, 17:03
Les amis, j'ai beau essayer plein de trucs j'y arrive pas ...
Comment fait on pour changer la police d'un widget svp, par ex le "tile" pour les temp ?
merci
J'aurais tendance à dire en dupliquant le widget et en le modifiant à ta guise puis l'appliquer sur les commandes souhaitées.
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

Xistof
Timide
Messages : 118
Inscription : 13 janv. 2018, 19:59

Re: [S'inspirer] Postez votre Plan / Design

Message par Xistof » 08 févr. 2018, 09:57

bonjour,

je me permets de relancer une question : dans le dashboard lorsque j'affiche une commande (température par exemple), j'ai accès à l'historique, même en modifiant l'apparence du widget. En mode design ce n'est plus le cas : si je modifie l'apparence du widget, je n'ai plus d'historique lorsque je clic sur la commande (j'ai bien le pointeur qui se transforme, qui m'affiche la date des infos collectées, mais aucune interaction).
Pour avoir l'historique je suis obligé de laisser l'affichage par défaut ce qui ne me convient pas, je dois louper un truc tout bête mais je ne trouve pas, merci de votre aide

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

Re: [S'inspirer] Postez votre Plan / Design

Message par Jeeviens » 14 févr. 2018, 01:49

Coucou !

J'ai un peu avancé sur mon second design, celui qui m'est plus particulièrement destiné. En fait c'est un peu ma console de debuging lorsque je fait mes tests, mes scenarios, tout ça... (L'image est à 80%)

screenshot.jpg
screenshot.jpg (175.95 Kio) Consulté 1080 fois

Quelques explications ? Allez...

Bon, le plan, au milieu n'a pas trop change. Il indique les lampes/prises allumées en jaune. Et les portes ouvertes en rouge. En bleu, TV, Routeur (second réseau) et point d'accès wifi. Au dessus du plan, 2 boutons pour passer du mode auto en manuel. A coté, un voyant qui indique que toutes les ouvertures sont fermées. C'est redondant, mais ça me plait graphiquement : )

Le coté debug, c'est à droite du plan et en dessous - du même plan - qu'on le trouve. J'ai des prises Fibaro zwave qui me créent des soucis (*) ; parfois, lorsqu'elles sont allumées ou éteintes, le retour d’état ne se fait pas. En revanche, la puissance consommée est bien renvoyée. Donc les petites leds sur le plans se basent sur l’état renvoyé, mais les voyants sur la droite du plan se basent eux sur la puissance. Ça me permet de voir quand ça cloche. Pour les trois voyants en dessous du plan, ils sont gérés par un scenario qui détecte si justement il y a une différence entre l’état renvoyé et la puissance mesurée par prise : s'il y a une différence entre ce qui est mesuré et ce qui est affiché, ils s'allument en rouge.

Le switch 'correction' tout à droite active (ou non) un scenario qui lui corrige automatiquement l'affichage des leds sur le plan si jamais une erreur est détectée. En parallèle, enfin en même temps, il essaie de d’éteindre/rallumer les prises posant problème. Si le problème de difference persiste, ET si le switch du dessous est positionné sur 'alertes', le scenario m'envoie un mail.

Pour finir, les quatre hublots ronds du bas indiquent la luminosité dans les pièces nommées. La led rouge du dessous des hublots s'allume si un mouvement est détecté.

(*) Le problème survient surtout quand je suis obligé de débrancher/rebrancher la smart : elle a tendance a planter/freezer depuis quelques jours, et au redémarrage, les états ne sont pas forcement corrects... J'ai ouvert un ticket pour obtenir de l'aide quand à ces plantages mystérieux : wait and see (ca me chagrine parcequ'evidemment, mon alarme est en partie gérée par la smart...)

Voila voila... je m'amuse : )

Anonyme
Actif
Messages : 10082
Inscription : 09 août 2014, 12:15

Re: [S'inspirer] Postez votre Plan / Design

Message par Anonyme » 14 févr. 2018, 02:03

Contenu supprimé à la demande de son auteur

Jeeviens
Timide
Messages : 153
Inscription : 15 août 2017, 01:04

Re: [S'inspirer] Postez votre Plan / Design

Message par Jeeviens » 14 févr. 2018, 04:05

@magicgg91 : Merci beaucoup ... : )

Avatar de l’utilisateur
Barto_95
Timide
Messages : 17
Inscription : 29 mai 2016, 15:26

Re: [S'inspirer] Postez votre Plan / Design

Message par Barto_95 » 14 févr. 2018, 10:28

effectivement jolie design :)

Avatar de l’utilisateur
Bonson
Timide
Messages : 389
Inscription : 23 janv. 2016, 22:40

Re: [S'inspirer] Postez votre Plan / Design

Message par Bonson » 14 févr. 2018, 11:12

Superbe. Manque plus que les labels avec un effet "dymo" et on a le total Tchernobyl Style !

fcna
Actif
Messages : 825
Inscription : 15 mars 2015, 16:14
Localisation : Toulouse

Re: [S'inspirer] Postez votre Plan / Design

Message par fcna » 15 févr. 2018, 15:08

Bonjour à tous,

je cherche de l'aide HTML, Jquery car je sèche complètement ...

Mon besoin simple : sur un actionneur, avoir deux bouton (on/off) qui change de couleur en fonction du status. Soit si c'est on, le bouton on est rouge, et le off gris, et inversement ...

La solution qui bloque

pour cela, j'utilise du jquery pour remplacer la css.

Le code de mon widget

Code : Tout sélectionner

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">

  <a class="toto#uid# btn btn-sm  action "iconCmd#uid#" cmdName tooltips" title="#name#" >#name_display#</a>
  
  <script>
        $('.iconCmd#uid#').empty();
        if ('#state#' == '1') {
            $('.toto#uid#').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.toto#uid#').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=#uid#] .action').off();
        $('.cmd[data-cmd_uid=#uid#] .action').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</span>
dans mon code, si state = 1, je mets du rouge sur la span toto#uid#.

mais ca ne marche pas car le deux changent de couleur !!! alors que #uid# devrait les différencier ...

le code généré de la page html:

Code : Tout sélectionner

<div class="verticalAlign">
		<center>
			<span class="cmd reportModeHidden cmd-widget" style="margin: 0px 2px 0px 0px; display: inline !important; top: 0px; left: 0px; width: 37px; height: 19px; padding: 0px; position: relative; transform-origin: 0px 0px 0px; transform: none; z-index: auto;" data-type="action" data-subtype="other" data-cmd_id="3992" data-cmd_uid="cmd3992__1250916262__" data-version="dashboard"><a class="totocmd3992__1250916262__ btn btn-sm  action " iconcmdcmd3992__1250916262__"="" cmdname="" tooltips"="" title="On" style="background-color: rgb(255, 0, 0); border-color: transparent; margin-top: 2px;">On</a><script>
        $('.iconCmdcmd3992__1250916262__').empty();
        if ('1' == '1') {
            $('.totocmd3992__1250916262__').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.totocmd3992__1250916262__').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=cmd3992__1250916262__] .action').off();
        $('.cmd[data-cmd_uid=cmd3992__1250916262__] .action').on('click', function () {
            jeedom.cmd.execute({id: '3992'});
        });
    </script></span>
  
 <span class="cmd reportModeHidden cmd-widget" style="margin: 0px 2px 0px 0px; display: inline !important; top: 0px; left: 0px; width: 39px; height: 19px; padding: 0px; position: relative; transform-origin: 0px 0px 0px; transform: none; z-index: auto;" data-type="action" data-subtype="other" data-cmd_id="3993" data-cmd_uid="cmd3993__2065202294__" data-version="dashboard"><a class="totocmd3993__2065202294__ btn btn-sm  action " iconcmdcmd3993__2065202294__"="" cmdname="" tooltips"="" title="Off" style="background-color: rgb(255, 0, 0); border-color: transparent; margin-top: 2px;">Off</a><script>
        $('.iconCmdcmd3993__2065202294__').empty();
        if ('1' == '1') {
            $('.totocmd3993__2065202294__').css({"background-color": "red", "border-color": "transparent", "margin-top":"2px"});

        } else {
            $('.totocmd3993__2065202294__').css({"background-color": "blue", "border-color": "transparent", "margin-top":"2px"});

        }
        $('.cmd[data-cmd_uid=cmd3993__2065202294__] .action').off();
        $('.cmd[data-cmd_uid=cmd3993__2065202294__] .action').on('click', function () {
            jeedom.cmd.execute({id: '3993'});
        });
    </script></span>
  
 <div style="width:90px;min-height:62px;" class="cmd  tooltips cmd-widget" data-type="info" data-subtype="binary" data-cmd_id="3994" data-cmd_uid="cmd3994__405028668__" data-version="dashboard" title="Valeur du 2018-02-15 15:04:26, collectée le 2018-02-15 15:04:28">
  <center>
    <div style="font-weight: bold;font-size : 12px;">VMC</div>
     <span style="font-size: 2.5em;font-weight: bold;position:relative;top:-6px" class="iconCmd"><i class="fa fa-check"></i></span>
  </center>
  <script>
    jeedom.cmd.update['3994'] =function(_options){
      $('.cmd[data-cmd_id=3994]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
      if (_options.display_value == '1') {
       $('.cmd[data-cmd_id=3994] .iconCmd').empty().append('<i class="fa fa-check"></i>');
     }else {
      $('.cmd[data-cmd_id=3994] .iconCmd').empty().append('<i class="fa fa-times"></i>');
    }
  }
  jeedom.cmd.update['3994']({display_value:'0',valueDate:'2018-02-15 14:59:44',collectDate:'2018-02-15 15:00:58',alertLevel:'none'});
</script>
</div>
		</center>
	</div>
Mini +
Fibaro FGMS-001
Qubino Fil Pilote 6 / Module Vlts roulants
Aeon Labs mono G2 60A
Fibaro Wall Plug / Smoke Sensor

ImperiHome Standard System /Pushing Box/Energie/ Philips Hue / Agenda / Clock / Géolocalisation / Themes / ...

Sartog
Actif
Messages : 502
Inscription : 27 août 2015, 14:54

Re: [S'inspirer] Postez votre Plan / Design

Message par Sartog » 15 févr. 2018, 16:13

Peux-tu essayer de mettre le #id# plutôt que #uid# ?

+ virer les guillemets entourant iconCmd#uid# dans ta balise <a> parce qu'à la génération du html ton concmdcmd3992__1250916262__ se retrouve hors balise.

Code : Tout sélectionner

totocmd3992__1250916262__ btn btn-sm  action " iconcmdcmd3992__1250916262__"=""
Dernière édition par Sartog le 15 févr. 2018, 16:23, édité 1 fois.
Box : smart, mini+, pi 2 et 3, ipbx800 v4
Protocole : Z-Wave (Fibaro & Qubino), Ikea, Bluetooth
Méteo : Netatmo
Audio : Sonos (Play 1 et 5)

winhex
Actif
Messages : 3791
Inscription : 23 janv. 2015, 01:41

Re: [S'inspirer] Postez votre Plan / Design

Message par winhex » 15 févr. 2018, 16:19

le name si tu veux
si on et 1
couleur rouge
sinon bleu
si off et 0
couleur rouge
sinon bleu

regarde la vidéo drive
viewtopic.php?f=29&t=21295&start=100#p432379

Lindo
Timide
Messages : 16
Inscription : 30 déc. 2016, 12:01

Re: [S'inspirer] Postez votre Plan / Design

Message par Lindo » 17 févr. 2018, 13:39

Bonjour,

Voici le mien grâce à F$B33 :D :
Capture.PNG
Capture.PNG (1021.52 Kio) Consulté 843 fois
J'ai juste un soucis pour mettre la légende de mon graphie en blanc, là en gris on ne voit quasiment rien. Vous savez où je peux changer ça ? Idem pour un de mes gadgets Xiaomi qui à l'affiche à sa température/ humidité inversé par rapport aux autres.

Comment résoudre ces petits soucis ??

Merci

Avatar de l’utilisateur
maxredphenix
Actif
Messages : 539
Inscription : 18 sept. 2015, 21:36
Localisation : Bourgogne

Re: [S'inspirer] Postez votre Plan / Design

Message par maxredphenix » 17 févr. 2018, 14:50

Et pourquoi tu mets pas une zone dans cette partie avec plus de blanc ?
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

IPX800 v4 + 2 modules X-4FP
Détecteur fuite d'eau + fumée fibaro
Divers modules Zwave

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 17 févr. 2018, 17:51

Pour virer les barres blanches, il faut mettre :

Code : Tout sélectionner

.highcharts-plot-band
{opacity:0.0;}
Dans la partie Desktop/CSS de la 'Personnalisation avancée' (les engrenages en haut à droite).
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 17 févr. 2018, 17:57

Tiens, j'en profiter pour poster quelques screens de mon design... F$B33 aussi ! Je les ai déjà mises sur le fil de F$B33, mais bon... c'est plus la place ici.
Accueil.JPG
Accueil.JPG (197.94 Kio) Consulté 809 fois
Temps.JPG
Temps.JPG (190.05 Kio) Consulté 809 fois
Ambiance.JPG
Ambiance.JPG (187.11 Kio) Consulté 809 fois
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 17 févr. 2018, 17:58

MultiRoom.JPG
MultiRoom.JPG (140.83 Kio) Consulté 808 fois
Monitoring.JPG
Monitoring.JPG (201.52 Kio) Consulté 808 fois
Il y encore un peu d'amélioration mais je tiens le style qui me convient.
Les autres écrans sont toujours à faire !
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

benj29
Actif
Messages : 3982
Inscription : 26 mars 2017, 09:57
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par benj29 » 17 févr. 2018, 18:00

Comment faites-vous pour faire les icônes ?

Il m'en manque, j'aurai voulu une icone pour faire le 1er étage (façon celle de Jeedom d'origine) et une pour le RDC, une pour la piscine aussi, l'éclair etc.

Merci ! (sobre et efficace en tout cas).

Que désigne ta TV avec le 0.57 en haut ?

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2713
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 17 févr. 2018, 18:07

La TV, c'est la charge serveur de Jeedom... j'ai pas trouvé mieux dans les icônes préexistantes.

Pour les icônes 'images', je prends une 'vierge' (un rond avec un fond semi-transparent) qui a été fournie sur le fil de F$B33 (par @Thyers, si je me rappelle bien), je télécharge sur https://www.flaticon.com/ l'image qui me convient en 256x256 / png, puis je la réduis et la colle dans le rond à l'aide de GIMP. Un export en .png et jop...

Voilà des packages tout faits si tu veux, dont le rond vierge (heuuu, juste en-dessous, même s'il ne se voit pas).
ROND.png
ROND.png (5.55 Kio) Consulté 1202 fois
Jeu1.7z
(763.12 Kio) Téléchargé 114 fois
Jeu2.7z
(782.63 Kio) Téléchargé 98 fois
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 8 invités