Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[S'inspirer] Postez votre Dashboard

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
NeoTokyos
Timide
Messages : 160
Inscription : 14 déc. 2015, 15:22
Localisation : Loiret

Re: [S'inspirer] Postez votre Dashboard

Message par NeoTokyos » 21 mars 2017, 23:39

Belle installation quand même design plutôt réussi !
Tu devrais inverser la couleur de ta charge JEEDOM brix car inverse ;)

romanais
Actif
Messages : 1999
Inscription : 21 août 2014, 21:36
Localisation : Drôme

Re: [S'inspirer] Postez votre Dashboard

Message par romanais » 22 mars 2017, 10:17

Très très beau !
Merci à toute l'équipe pour le taf

Mon matériel

Avatar de l’utilisateur
batna44
Timide
Messages : 443
Inscription : 12 févr. 2016, 22:40
Localisation : LA

Re: [S'inspirer] Postez votre Dashboard

Message par batna44 » 22 mars 2017, 12:51

ah oui effectivement ca donne envie... belle installation
Raspberry Pi3/Razberry+Rfxcom/3 Fibaro Sensor/10 Détecteurs Zipato 3en1/5 Fibaro Smoke Sensor/Karotz/2 Wallplug+1 Smart Switch+1 Prise Foxx+1 répéteur Foxx/1 Quibino ZMNHJD1 Fil Pilote/6 Volets SOMFY RTS/Camera Ext FOSCAM/3 Xiaoyi/Orvibo

Avatar de l’utilisateur
tom74
Actif
Messages : 1798
Inscription : 16 juil. 2014, 09:16
Localisation : Annecy (74)

Re: [S'inspirer] Postez votre Dashboard

Message par tom74 » 22 mars 2017, 13:12

Joli dashboard,
Comment fais-tu pour le nom des objets centrés comme celà?

bl83
Timide
Messages : 53
Inscription : 04 avr. 2016, 13:29

Re: [S'inspirer] Postez votre Dashboard

Message par bl83 » 22 mars 2017, 21:57

Bonsoir,

Merci,
Pour centrer le nom des objets, modifier la taille police et couleur de fond j'avais trouvé sur le forum et mis de coté dans mes docs.

Menu a droite : "personnalisation avancée" dans la fenêtre "Javascript"

Code : Tout sélectionner

$(document).ready (function(){      // centrer le nom des pièces sur Dashboard (police et couleur de fond)
     setTimeout(function(){
       $('legend').css({'text-align':'center'});
       $('legend').css({'font-size':'2em'});
       $('legend').css({'background-color':'rgba(255, 255, 255, 0.5)'});
     }, 500);
});
Cdlt
UC Jeedom : Brix Gigabyte J1900. /SSD 120 Go/RAM 8Go Jeedom V3.2.8
UC Jeedom : Beebox AsRock Jeedom V3.2.8
NAS : Synology DS3615xs
La suite ici
Mon Dasboard ici

Avatar de l’utilisateur
tom74
Actif
Messages : 1798
Inscription : 16 juil. 2014, 09:16
Localisation : Annecy (74)

Re: [S'inspirer] Postez votre Dashboard

Message par tom74 » 23 mars 2017, 06:59

Cool, merci

dj_janker
Timide
Messages : 461
Inscription : 03 févr. 2015, 09:27

Re: [S'inspirer] Postez votre Dashboard

Message par dj_janker » 24 mars 2017, 17:58

bl83 a écrit :Bonsoir,

Ça avance petit à petit, dashboard en cours.

cdlt

Image
Salut, vous partage les images [.png] de ton widget difusseur?
Ce est cool ;)

bl83
Timide
Messages : 53
Inscription : 04 avr. 2016, 13:29

Re: [S'inspirer] Postez votre Dashboard

Message par bl83 » 24 mars 2017, 18:39

Bonsoir,

Bien sur pour le partage, tout est disponible sur mon dashboard.
Voici les photos et le code du widget.

diffuseur_off.png Image
diffuseur_on.png Image

Widget :
nom : diffuseur_B
type : action
sous-type : defaut

Code : Tout sélectionner

<!--
commande on off pour diffuseurs huile essentielles
le test est fait sur les deux premiers caractères (mettre en minuscules sinon rajouter un traitement de la commande par lowercase) on peut utiliser par on_diffuseur
le test est fait par rapport a "on" si positif icone diffuseur allumé sinon icone diffuseur eteint
-->
<div style="width:70px; height:70px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#">
  <center>
    <!-- on peut ici changer le contour : epaisseur couleur courbure des angles -->
    <div  style="margin-top:5px; height:62px; width:62px; border:4px ridge orange; border-radius:10px; " class="action" id="iconCmd#id#"></div>
  </center>
  <script>
    (function() {
    var commande = "#name_display#";
    commande = commande.substr(0,2);  
    if (commande == "on") { 
      $('#iconCmd#id#').html('<img style="height:50px; width:50px" title="Allumer & Diffuser huiles essentielles" src="plugins/widget/core/template/dashboard/cmd.action.other.diffuseur_B/diffuseur_on.png">');
    } else { 
    $('#iconCmd#id#').html('<img style="height:50px; width:50px" title="Eteindre & Arreter Diffuseur" src="plugins/widget/core/template/dashboard/cmd.action.other.diffuseur_B/diffuseur_off.png">');
    }
    $('.cmd[data-cmd_id=#id#] .action').on('click', function () { jeedom.cmd.execute({id: '#id#'});});
    })();  
    </script>
</div>
Les infos bulles sont en français "Allumer & Diffuser huiles essentielles" et "Eteindre & Arreter Diffuseur" modifiables directement dans le code

Cdlt
UC Jeedom : Brix Gigabyte J1900. /SSD 120 Go/RAM 8Go Jeedom V3.2.8
UC Jeedom : Beebox AsRock Jeedom V3.2.8
NAS : Synology DS3615xs
La suite ici
Mon Dasboard ici

dj_janker
Timide
Messages : 461
Inscription : 03 févr. 2015, 09:27

Re: [S'inspirer] Postez votre Dashboard

Message par dj_janker » 24 mars 2017, 18:44

@bl83 un grand merci!!! ;) ;)

Dapolux
Timide
Messages : 229
Inscription : 12 déc. 2016, 13:48
Localisation : Lille

Re: [S'inspirer] Postez votre Dashboard

Message par Dapolux » 16 mai 2017, 09:06

bl83 a écrit :
21 mars 2017, 21:47
Bonsoir,

Ça avance petit à petit, dashboard en cours.

cdlt

Image
Bonjour,

Pour les tuiles de tes pièces (hall, salon...), tu as créé un widget spécifique par pièce?

Bonne journée.
Jeedom DIY@RPI3
Aeon Stick Zwave : 15 FGR222, 2 FGS222, 6 FGD212, Oeil de Fibaro, 1 Wallplug
RFXCOM : 3 Prises, Téléco, 4 Sondes temp. / Moteur Somfy
Multimédia: Nas Synology / 2 KODI@RPI / Max2Play@RPI3
Xiaomi: 3 RGB Yeelight

bl83
Timide
Messages : 53
Inscription : 04 avr. 2016, 13:29

Re: [S'inspirer] Postez votre Dashboard

Message par bl83 » 22 mai 2017, 09:35

Bonjour,
Désolé pour le retard de la réponse, longue absence :(
Chaque pièce est un virtuel. Pour l'agencement à l'intérieur je me suis créé 2 widgets paramétrables, un pour faire les encadrements avec titres et bordures et un autre pour faire des "vides".
Si besoin je peux développer.
Cordialement
UC Jeedom : Brix Gigabyte J1900. /SSD 120 Go/RAM 8Go Jeedom V3.2.8
UC Jeedom : Beebox AsRock Jeedom V3.2.8
NAS : Synology DS3615xs
La suite ici
Mon Dasboard ici

Avatar de l’utilisateur
-seb-
Timide
Messages : 121
Inscription : 22 déc. 2016, 13:11

Re: [S'inspirer] Postez votre Dashboard

Message par -seb- » 11 juil. 2017, 12:35

Salut à tous,

Installation toujours en évolution, je poste mon dashbord à aujourd'hui :

Image
Jeedom sur RPI3
Z-Wave + Gateway Xiaomi + JPI
Présentation | Dashboard | Design | Matériel

Arnault
Timide
Messages : 281
Inscription : 16 sept. 2015, 14:58

Re: [S'inspirer] Postez votre Dashboard

Message par Arnault » 11 juil. 2017, 14:11

-seb- a écrit :
11 juil. 2017, 12:35
Salut à tous,

Installation toujours en évolution, je poste mon dashbord à aujourd'hui :

Image
Très sympa ton Dashboard. Tu pourrais partager les icônes de tes poubelles ?
Merci
JEEDOM en version stable via VMware ESXi
NUC Core i5, SSD 500 Go, 32 Go Ram
Z-Stick Z-wave Plus (Gen5) et RFPlayer
En pleine découverte de Jeedom :)

Avatar de l’utilisateur
-seb-
Timide
Messages : 121
Inscription : 22 déc. 2016, 13:11

Re: [S'inspirer] Postez votre Dashboard

Message par -seb- » 11 juil. 2017, 15:08

Arnault a écrit :
11 juil. 2017, 14:11
Très sympa ton Dashboard. Tu pourrais partager les icônes de tes poubelles ?
Merci

Merci ;)

Pour les icones, tu les as sur le market :

Image
Jeedom sur RPI3
Z-Wave + Gateway Xiaomi + JPI
Présentation | Dashboard | Design | Matériel

jimbo7384
Timide
Messages : 148
Inscription : 19 févr. 2018, 22:04

Re: [S'inspirer] Postez votre Dashboard

Message par jimbo7384 » 25 févr. 2018, 22:57

bl83 a écrit :
21 mars 2017, 21:47
Bonsoir,

Ça avance petit à petit, dashboard en cours.

cdlt

Image
dashboard de malade ! on sens le passionné compétent qui plus est !
et sacré install info à la maison dedieu ce syno doit tourner vraiment bien.
C'est marrant il annonce un i3 @ 2 coeurs je ne savais pas que ça existait je pensais qu'il était tous 4 coeurs.

Merci pour le partage !

Ikari
Timide
Messages : 101
Inscription : 29 mars 2016, 08:21

Re: [S'inspirer] Postez votre Dashboard

Message par Ikari » 26 févr. 2018, 10:34

bl83 a écrit :
22 mai 2017, 09:35
Bonjour,
Désolé pour le retard de la réponse, longue absence :(
Chaque pièce est un virtuel. Pour l'agencement à l'intérieur je me suis créé 2 widgets paramétrables, un pour faire les encadrements avec titres et bordures et un autre pour faire des "vides".
Si besoin je peux développer.
Cordialement
Bonjour bl83,
très chouette ton dashboard ! Bravo !
Oui je serais interessé pour que tu développes un peu un virtuel parceque je ne comprends pas trop cette histoire de widget "vide".
Merci

bl83
Timide
Messages : 53
Inscription : 04 avr. 2016, 13:29

Re: [S'inspirer] Postez votre Dashboard

Message par bl83 » 01 mars 2018, 10:44

Bonjour,

Je me suis créé 2 widgets (attention le code mérite peut être d'être revu, ce n'est pas mon métier :) )
Je ne me suis pas repenché dessus depuis la sortie de la version 3 peut être moins utile maintenant.

le premier inséré dans la tuile permet de déplacer des éléments
nom du widget : Blanc_B
Type : Info
Sous-type : Autre

Code : Tout sélectionner

<!-- 
Il s'agit d'un bloc vierge dimensionnable en passant les paramètres "widthBlock" et "heightBlock" (unité px) pour la largeur et le hauteur du block 
et le paramètre "test" = on affiche un cadre pour aider à la mise en page ( le laisser vide ou off une fois fini). 
-->
<div class=" cmd tooltips cmd-widget cursor" id = "cmd-widget#id#" data-type="action" data-subtype="other" data-cmd_id="#id#">
 
<script>(function() {
  var widthB, heightB;
  
  if (!isNaN(parseFloat("#widthBlock#"))) {
    widthB = "#widthBlock#";
    } else {
      widthB = 5;
      }
  if (!isNaN(parseFloat("#heightBlock#"))) {
    heightB = "#heightBlock#";
    } else {
      heightB = 5;
      } 
  if("#test#" == 'on') { $("#cmd-widget#id#.cmd-widget").css({'border': 'solid 1px white'});}
  $("#cmd-widget#id#.cmd-widget").css({'height':heightB+'px','width':widthB +'px'});
  
})(); </script>
</div>
Le second permet de faire un cadre sans fond avec ou sans entête, avec bordure de couleur et épaisseur différente et de le positionner à volonté
nom du widget : cadreSansFondText_B
Type : Info
Sous-type : Autre

Code : Tout sélectionner

<!-- 
Il s'agit d'un cadre dimensionnable avec texte positionnable en passant les parametres 
widthCadre
heightCadre 					(unité px) pour la largeur et le hauteur du cadre
couleurCadre
typeCadre 						(none,solid,dotted,dashed,double,groove,ridge, outset, inset)
epaisseurCadre 					(unité px)
positionVerticaleCadre			top ou bottom
positionHorizontaleCadre		left ou right
valeurPositionVerticaleCadre	peut etre negatif par rapport au container
valeurPositionHorizontaleCadre 	peut etre negatif par rapport au container 
widthWidget 					(unité px) largeur de la place occupée par le bloc widget (marge a l'interieur du cadre avant prochain widget, tient compte de l'epaisseur)
heightWidget					(unité px) hauteur de la place occupée par le bloc widget
texte							texte a afficher	
couleurTexte					couleur texte
attributPoliceTexte				attribut texte  normal ou bold
taillePoliceTexte				taille police (unité em)
positionVerticaleTexte			top ou bottom
valeurPositionVerticaleTexte	peut etre negatif
positionHorizontaleTexte		left ou right
valeurPositionHorizontaleTexte 	peut etre negatif  
test							on off   fait apparaitre ou pas le contenair
-->
<div class=" cmd tooltips cmd-widget cursor" id = "cmd-widget#id#" data-type="action" data-subtype="other" data-cmd_id="#id#">
  <center>
  <div style = "position:absolute" class = "cadre" id = "cadre#id#" </div>
  <span style="position:absolute" class="zoneTexte" id="zoneTexte#id#"></span>   
  </center>
  <script>(function() {
    var widthC, heightC, couleurC , typeC, epaisseurC, cadre;
    var posCadreV, posCadreH, valPCV, valPCH;
    var heightW, widthW ;
    var texte, couleurT, tailleT, attributT; 
    var posTextV, posTextH,valPTV, valPTH;
    
    texte = "#texte#";   
    couleurC = "#couleurCadre#";
    typeC = "#typeCadre#";
    couleurT = "#couleurTexte#";
   	attributT = "#attributPoliceTexte#";
    posTextV = "#positionVerticaleTexte#";
    posTextH = "#positionHorizontaleTexte#";
    posCadreV = "#positionVerticaleCadre#";
    posCadreH = "#positionHorizontaleCadre#";
  
  //partie zone texte
    if (!isNaN(parseInt("#valeurPositionHorizontaleTexte#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      valPTH = parseInt("#valeurPositionHorizontaleTexte#");
    } else {
      valPTH = 5;
      } 
    if (!isNaN(parseInt("#valeurPositionVerticaleTexte#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      valPTV = parseInt("#valeurPositionVerticaleTexte#");
      } else {
        valPTV = 5;
        }     
    if (posTextV == 'bottom') {		
      $("#zoneTexte#id#.zoneTexte").css({'bottom' :valPTV});   //position par raport au bas
    } else {
      $("#zoneTexte#id#.zoneTexte").css({'top' :valPTV});   //position par raport au haut (defaut)
      }  
    if (posTextH == 'right') {		
      $("#zoneTexte#id#.zoneTexte").css({'right' :valPTH});   //position par raport a droite
    } else {
      $("#zoneTexte#id#.zoneTexte").css({'left' :valPTH});   //position par raport a gauche (defaut)
      } 
    if (attributT != 'normal' && attributT != 'bold') {		// police normal par defaut
      attributT = 'normal'}
    if (!isNaN(parseFloat("#taillePoliceTexte#"))) {		    	// taille police 1em par defaut
      tailleT = "#taillePoliceTexte#";
      } else {
        tailleT = 1;
        }
    $("#zoneTexte#id#.zoneTexte").css({'font-weight':attributT});
    $("#zoneTexte#id#.zoneTexte").css({'font-size':tailleT + 'em'});
  	$("#zoneTexte#id#.zoneTexte").css({'color':couleurT});
    $("#zoneTexte#id#.zoneTexte").html(texte)
 // partie cadre
    if (!isNaN(parseInt("#valeurPositionHorizontaleCadre#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      valPCH = parseInt("#valeurPositionHorizontaleCadre#");
    } else {
      valPCH = 5;
      } 
    if (!isNaN(parseInt("#valeurPositionVerticaleCadre#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      valPCV = parseInt("#valeurPositionVerticaleCadre#");
      } else {
        valPCV = 5;
        }     
    if (posCadreV == 'bottom') {		
      $("#cadre#id#.cadre").css({'bottom' :valPCV});   //position par raport au bas
    } else {
      $("#cadre#id#.cadre").css({'top' :valPCV});   //position par raport au haut (defaut)
      }  
    if (posCadreH == 'right') {		
      $("#cadre#id#.cadre").css({'right' :valPCH});   //position par raport a droite
    } else {
      $("#cadre#id#.cadre").css({'left' :valPCH});   //position par raport a gauche (defaut)
      } 
    if (!isNaN(parseInt("#widthCadre#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      widthC = "#widthCadre#";
      } else {
        widthC = 5;
        }
    if (!isNaN(parseInt("#heightCadre#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      heightC = "#heightCadre#";
      } else {
        heightC = 5;
        } 
 	if (!isNaN(parseInt("#epaisseurCadre#"))) {    //verification que la valeur est un nombre sinon valeur 1 par défaut
      epaisseurC = "#epaisseurCadre#";
      } else {
        epaisseurC = 1;
        }  
    cadre = typeC + ' ' + epaisseurC + 'px' + ' ' + couleurC ; 
    $("#cadre#id#.cadre").css({'height':heightC+'px','width':widthC +'px'});
    $("#cadre#id#.cadre").css({'border-radius':'15px'}); 
    $("#cadre#id#.cadre").css({'border':cadre}); 
 // partie occupation div container 
  if("#test#" == 'on') { $("#cmd-widget#id#.cmd-widget").css({'border': 'solid 1px white'});}
  
  
  if (!isNaN(parseInt("#heightWidget#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      heightW = "#heightWidget#";
      } else {
        heightW = 5;
        }
    if (!isNaN(parseInt("#widthWidget#"))) {		//verification que la valeur est un nombre sinon valeur 5 par défaut
      widthW = "#widthWidget#";
      } else {
        heightC = 5;
        }   
    //widthW = parseInt(widthW) + parseInt(epaisseurC) ;
    $("#cmd-widget#id#.cmd-widget").css({'height':heightW + 'px', width: widthW + 'px'}); // occupation "reelle" du widget

  })(); 
  </script>
</div>
Lorsque de la création d'un équipement (virtuel) j'ajoute des commandes utilisant l'un ou l'autre de ces widgets.

Exemple :
lors de la création je rends les contours visibles pour la mise en place (test = on dans chaque widget)
Image
au final après avoir estompé les contours
Image

Ci dessous les commandes dans le virtuel
Image

et un exemple de commande (cadre_lumiere_plafond)
Trace le cadre orange et le texte "Plafond".
Image

Si besoin de plus d'info n'hésites pas, je ne suis pas sur d'être assez clair.
Cordialement
UC Jeedom : Brix Gigabyte J1900. /SSD 120 Go/RAM 8Go Jeedom V3.2.8
UC Jeedom : Beebox AsRock Jeedom V3.2.8
NAS : Synology DS3615xs
La suite ici
Mon Dasboard ici

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

Re: [S'inspirer] Postez votre Dashboard

Message par Xistof » 01 mars 2018, 17:09

très sympa ton dashboard. Concernant la partie garage tu affiches une durée. Elle correspond au temps écoulé depuis le dernier changement d'état ? si oui comment la calculer, merci :)

bl83
Timide
Messages : 53
Inscription : 04 avr. 2016, 13:29

Re: [S'inspirer] Postez votre Dashboard

Message par bl83 » 01 mars 2018, 21:18

Bonsoir,
@Xistof
Cela est intégré dans mon widget je te joins le code complet un peu commenté.
type : info
sous type : Binaire

Code : Tout sélectionner

 <!-- Liste des paramètres a passer par l'équipement:
	- equipImg	: type d'equipement respecter la casse (liste equipement implémentés) :
    	        fenetre
		porte_fenetre
                porte_interieure
		porte_entree
		porte_garage
	- heightImage : hauteur de l'image affichée en pixel (defaut = 100)
   	- widthImage : 	largeur de l'image affichée en pixel (defaut = 100)
 -->
<div style="width:95px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
	<center>
      <span class='cmdName' style="font-weight: bold;font-size : 18px;#hideCmdName#;" title="#name#">#name_display#</span>
      <span class="timeCmd#uid#" style="font-size:0.9em;display: block;background-color:transparent !important;padding : 3px;border-radius: 4px;"></span>    
   	  <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
    </center>
    
	<script>
      var equipImg = "#equipImg#";
      var imgHeight;
      var imgWidth;
      // --------------------------
      jeedom.cmd.displayDuration('#valueDate#', $('.timeCmd#uid#')); // durée écoulée depuis dernier changement
      // --------------------------
      if (!isNaN(parseFloat("#heightImage#"))) {    // récupération des informations hauteur et largeur si passées en paramètres et sous forme de nombres
        imgHeight = "#heightImage#";				//sinon application des valeurs par défaut.
      } else {
        if(equipImg == ""){						// si parametre equipement absent par defaut on aura 'porte fenetre
          equipImg = "porte_fenetre";
          imgHeight = "100";
          } else {
            imgHeight = "100";
            }
        }
      if (!isNaN(parseFloat("#widthImage#"))) {
        imgWidth = "#widthImage#";
        } else {
          imgWidth = "100";
          }
      // --------------------------
      if ('#state#' == '1' || '#state#' == 1) {		// equipement fermé (peut etre inversé si info inversée au niveau commande equipement)
        $('#iconCmd#id#').append('<img style="height:' + imgHeight + 'px;width:' + imgWidth + 'px;"  src="plugins/widget/core/template/mobile/cmd.info.binary.Ouvertures_B/' + equipImg + '.png" />');
        }
      if ('#state#' == '0' || '#state#' == 0) {		// equipement ouvert
        $('#iconCmd#id#').append('<img style="height:' + imgHeight + 'px;width:' + imgWidth + 'px;"  src="plugins/widget/core/template/mobile/cmd.info.binary.Ouvertures_B/' + equipImg + '_ouverte.png" />');
        }
    </script>
</div>
Cordialement
UC Jeedom : Brix Gigabyte J1900. /SSD 120 Go/RAM 8Go Jeedom V3.2.8
UC Jeedom : Beebox AsRock Jeedom V3.2.8
NAS : Synology DS3615xs
La suite ici
Mon Dasboard ici

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

Re: [S'inspirer] Postez votre Dashboard

Message par Xistof » 02 mars 2018, 08:25

merci pour ta réponse, je vais essayer de mettre ça en place :)

Répondre

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

Qui est en ligne ?

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