[Présentation] Benj29 et blog Jeedom-Facile

Bonjour @benj29

Juste un petit mot pour te dire que comme beaucoup l’ont déjà fait je trouve le contenu, que tu as produit et que je lisais dans ton blog, d’une qualité remarquable dans le niveau de pédagogie et de détail apporté. La façon et le contenu sont très inspirant et j’avais comme beaucoup commencé à mettre en oeuvre, doucement, beaucoup de tes tutos.

Ceci étant, une fois tout cela dit, je n’avais pas pour autant donné de retour vers toi qu’il soit pécuniaire (il me semble que tu avais une brique PayPal) ou même de ressenti comme je viens de le faire.
On se dit toujours qu’on va le faire, on va le faire demain … et le temps passe.

Ayant moi-même un blog plutôt nourri ces derniers temps sur un autre sujet(Généalogie), je suis convaincu qu’on écrit en partie pour soi mais aussi pour les autres et avec envie d’être lu.
J’ai comme toi fais le choix de ne pas y mettre de publicité et donc mon hébergement doit me couter une 50aine d’Euros par an. (Je dois surement avoir beaucoup moins de visites que tu n’en a, la généalogie attire moins que la techno).
C’est une dépense qui passe dans mes loisirs et si ca me prends trop de temps et que je n’ai pas envie d’écrire … je ne le fais pas. Je comprend donc parfaitement ta position, tu ne le fais pas pour gagner de l’argent mais cela ne doit pas te couter (en argent comme en contrainte).

Je ne cherche pas à te convaincre, juste à partager le fait que ton contenu est extrêmement apprécié, que nous serions bien sur tous très heureux de le voir revenir sous une forme ou une autre.
Mais quelque soit la décision que tu prendras, ce sera la tienne et elle sera donc forcément légitime :wink:.
PS je savais que j’aurais du aller plus vite sur la lecture de la détection de présence :grin:

2 « J'aime »

Salut a toi @benj29,

Je en suis un parmi certainement pecoup d’autre que profitons de ton Blog, et ton chois de rester libre sans pub me plais vraiment.
POURQUOI TU NOUS DONNE PAS LA POSSIBILITÉ DE PARTICPÉ AU FRAIS?
Je serais parmis les premiers que le feront.
Très Amicalement et haut les coeur :herb:

1 « J'aime »

Salut,
je suis tout a fais d’accord avec toi de l’interet de blog de notre ami @benj29 mon français moyen m’empêche de devlopper plus hélas mais tu l’a fais très bien
Merci et amitié a toi :herb:

Merci d’avoir partagé ton design.
il est super.

voir que c’est utilisé. ça motive à écrire un nouvel article. :blush:

Bonsoir à tous,

Merci de vos messages, j’ai dit que j’étudiais le sujet.
Merci de vos remarques en tout cas, j’apprécie.
Le sujet n’est pas tant financier, mais il l’est aussi au-delà. Je vois le « pillage » (le mot est dur) mais il est présent et quotidien.
Produire des articles de qualité plutôt de quantité est aussi un choix (c’est un peu comme un entrainement pour du triathlon pour les habitués).

Bref, je regarde chez O2switch entre autre.

@nak, le don était ouvert sur le blog, je ne comprends pas ta remarque. Je dois dire que j’ai eu des dons étonnants (des fois ! > 20€) mais des dons de 1€ où je me suis demandé l’intérêt… lol.

C’est aussi une volonté d’atteindre un objectif de production et de partage et clairement je manque de temps.

Bref, pour revenir au sujet :

Me reste à produire le dernier tableau.
Voir avec @olivvv59 si alternative pour le colspan à défaut je passerai sur des titres à gauche avec icone comme l’ancien design.

L’opacité + le fond darksobre améliore l’esthétique je trouve.

PS : j’ai tout ce qu’il faut pour restaurer le blog.
PS 2 : concernant webarchive, je suis gêné de voir l’aspiration dans le principe. Je me pose même la question de la légalité d’un tel système tant le plagiat et la propriété intellectuelle attachée peut être détournée.
PS 3 : si je ne continuais pas cela, je publierai tout le contenu sur le forum.

1 « J'aime »

Salut @benj29 mon idée est que tu publie la somme total annuelle et le devisé par 12 ce que va donner le cout mensuel les sponsors seront nous les utilisateurs (apelle ca si tu le souhaite comité des sponsors privés) et ca n’a rien avoir avec les donne a 1 euro .
moi meme et je suis convaincu d’autres amis tu libérons de charge financier de site, puisque tu passe des heurs a mettre des articles ce que represent la largement ta cote par . il est évident que les memebres de comité des sponsors ne peuvent etre que des person privé et en aucun cas ne peuvent intervenir dans ta politique rédactionnel, maintenant si il ya pillage de tes article ca prouve que ton bloge est riche et utile, si les pilleurs ne montion pas la paternité de ton blog les lecteurs ne sont pas dupe. voila mon idée je la semet a toi et aux amis que suive tes écrits. excuse mon français moyen et reçois toutes mes salutation et respect :herb:

Hello
Même reponse que tous.
Ton blog est / a été une belle source d’inspiration.
J’ai démarré ma migration eedomus vers jeedom avec ton blog il y a un an.
+1 pour le hosting chez toi si tu as un acces FTTH. Si tu as un NAS Type syno, ca se fait facilement et graphiquement sans avoir à mettre les mains dans le camboui.

Mais bon a priori ton problème etant ailleurs.

Bonne réflexion

Bonjour à tous,

Première passe complétée après 1 mois et 1 semaine.
1 design pour tout résumer. Point.

Reste à développer toute la partie popup et interactive.

Il est intéressant de noter qu’il y a des écarts entre la vue « PC » et la vue « tablette » avec Webview avec JPI de @dJuL notamment au niveau des tableaux HTML.

En vrac quelques éléments :

  • la météo utilise le weatherwidget.io remis dans un tableau par le plugin html ; les boutons permettent d’avoir un TTS sur les conditions actuelles et à venir ; le second permettra d’afficher un popup des prévisions à 5 jours.

  • les infos environnementales sont des moyennes / min et max et se colorisent en fonction d’une plage. Idem pour les alertes givre, météo, les précipitations etc. L’index UV est un widget code qui me change la couleur le niveau des UV et l’icone.

  • les ouvrants changent de couleur en fonction de l’état mais aussi de la présence dans la maison. Par exemple le volet passe en orange s’il est fermé et que nous sommes là. A contrario, si nous sommes absents et qu’il est ouvert, il est rouge (capter la chaleur). Je joue sur les options du widget multi action avec les icones et le code php de @noodom. Pour palier au problème que ce code php ré-appuie sur l’icone, j’ai mis une simple zone avec une macro ; simple et efficace. Et surtout cela me permet d’interdire l’appui sur le bouton si l’alarme est mise et que nous ne sommes pas là. C’est là que je contrôle les accès des véhicules et les automatismes associés (si je gare la voiture, la moto ou madame dans le garage ou autre).

  • Pour le contrôle extérieur, les boutons core sont très bien et beaux donc autant les utiliser. Même recette pour les températures. Je récupère l’état de la filtration par le plugin piscine de @scadinot. La seule différence et que je mets en forme les horaires en incluant le mode de la piscine. Iopool mettant en place une API à l’été, je pourrai compléter cette partie.

  • Pour le contrôle intérieur, j’en ai profité pour gérer au mieux mon ampli multizone. Quelques prises critiques dans la maison et un pilotage harmony + tablette par JPI et l’appel des APK pour lancer tunein, spotify etc ou quelques modes de la TV pour le petit loup.

  • Le résumé global me permet d’un coup d’oeil d’avoir l’heure et la date (merci @Salvialf) et le mode de la maison : chauffage, clim, arrêt etc et les usages : travail, vacances, weekend, absent etc. C’est aussi ici que je pourrais tout basculer : dérogation eau chaude, changement de mode de chauffage ou passage manuel en mode vacances (seul mode que je change à la main notamment pour sa sortie, la fin des vacances triste !). Idem pour la gestion des personnes et des doubles de clés autorisés.

  • Le tableau de suivi du confort et des usages me permet d’avoir un état sur les températures (colorisés en fonction du mode clim ou chauffage ; on regarde en > ou en < en fonction du mode), pareil pour l’humidité et les usages : si un split tourne, si la VMC d’un étage tourne, si une porte est ouverte etc. Les boutons en haut me permettront d’accéder aux prises et autres pilotages (notamment pour voir les agendas, températures historisées etc). Idem pour les indicateurs d’alerte : fumée, fuite d’eau. Merci aqara.

  • Partie sécurité et alarme. J’ai l’état, je peux basculer en alarme partielle, totale ou de nuit. Quelques indicateurs clés me permettent de savoir la configuration en cours : volet se fermant si alarme mise, caméra en cours de détection de mouvement, choix de l’alarme en basculement auto, présence dans la maison etc. De même 3 boutons dans le futur pour accéder aux caméras, la configuration et au digicode pour débloquer l’alarme.

  • Pour la partie localisation. J’ai l’état des indicateurs : GPS, wifi, clé, forçage d’absence etc. A terme, le bouton me permettra d’ouvrir un popup pour savoir où est la personne. Petit widget graphique de l’état de l’alarme de la moto et la batterie.

  • Bon le courrier, facile. Courrier, colis, récupéré ou non. Idem ça se colorise.

  • Supervision, l’excellent petit LED pour avoir l’état du système. J’avais pensé à en mettre qu’une seule OU de l’ensemble mais après réflexion je vais ajouter des zones pour ouvrir des popups et me faciliter la gestion : vue unitaire de chaque élément, de chaque plugin, de chaque batterie de capteurs ou même faire les mises à jour de jpi par exemple.

  • Last one le tableau de suivi des consommations. Le statut me donne si délestage, production PV, fuite d’eau, la consigne retenue pour l’eau chaude (en fonction du nombre de personnes), si les clims tirent (>100W), idem pour la piscine. L’instantanée est travaillé avec les couleurs relatives au niveau de puissance appelée ou la consommation (heure, min etc). J’ai une image du facteur de puissance (W et VA). Pour le PV, j’ai préféré avoir la production en cours et le % de ce que j’ai utilisé sur la journée (le reste étant renvoyé sur le réseau). Pour l’eau, la consommation à la min et à l’heure sont des images fidèles de nos usages. La température de l’eau chaude et la conso instantanée des 2 autres usages importants de la maison piscine et climatisation globale. Vient ensuite des indicateurs quotidiens en général la consommation et le coût associé. A la différence de l’eau chaude où je préfère avoir la durée de chauffe et la consommation d’eau de la journée.
    Le petit widget chevron me donne une image de la dernière semaine complète par rapport à la surprécédente. Bien plus fidèle que la veille avant-veille (notamment le vendredi/samedi ou le dimanche/lundi). Merci @superbricolo et @Thibaut_T pour les ajouts dans Suivi Conso, c’est aussi grâce à votre travail qu’on en arrive là. La dernière colonne reste le suivi mensuel de ces usages.

Bon pour tout finir :
̶-̶ ̶i̶l̶ ̶m̶e̶ ̶f̶a̶u̶t̶ ̶m̶e̶t̶t̶r̶e̶ ̶l̶e̶s̶ ̶s̶e̶u̶i̶l̶s̶ ̶p̶o̶u̶r̶ ̶a̶v̶o̶i̶r̶ ̶l̶a̶ ̶c̶o̶u̶l̶e̶u̶r̶ ̶d̶e̶ ̶s̶u̶i̶v̶i̶ ̶d̶a̶n̶s̶ ̶l̶e̶ ̶t̶a̶b̶l̶e̶a̶u̶ ̶d̶e̶s̶ ̶c̶o̶n̶s̶o̶m̶m̶a̶t̶i̶o̶n̶s̶ ̶;̶

  • corriger ce souci de colspan qui me foire les tableaux @olivvv59 une idée ?
  • attaquer les popups pour avoir les accès.

Mais voilà, 50% du taf déjà fait !

Merci @dJuL pour l’astuce du fond darksobre tellement sympa.

5 « J'aime »

Ca ne se voit pas sur le post, mais je bave devant mon écran…
Félicitations à toi, pour tout le travail et les explications !!

1 « J'aime »

Mdr ! Merci :slight_smile:

Je confirme c’est propre et clair!!!
Ça donnerait presque envie de passer au mono page avec pop up :crazy_face:
Bravo et merci pour les explications

Très beau design, pas de fioritures, clair et lisible, c’est ce que je préfère.

Concernant les pop up que tu dois faire et que tu évoques souvent, quelle méthode comptes tu utiliser ?
J’ai testé la méthode ici [TUTO] Popup dans un design - #14 par Thom mais je trouve que pour les graphiques cela alourdit considérablement mon système (rpi 3b+)

Quelques widgets partagés, extrait de nombreux codes trouvés sur le forum et modifié à mon utilisation.
Attention, il vous faut le plugin icones de @ZygOm4t1k.

Le bouton action icone :

<!--
  Widget name : multi_icon_switch_mmi
  Author : geqr
  Website : www.ma-maison-intelligente.fr
  Tutorial : http://ma-maison-intelligente.fr/2020/04/widget-multi-icone-pour-votre-design-jeedom/
  Last Update : 20200426 - update to remove root properties when parameters are passed
 -->

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

 <div id='button-#id#'
      class="cursor cmd tooltips cmd-widget container-fluid"
      onClick="jeedom.cmd.execute({id: '#id#'});"
      data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">

   <div class="button">
     <i id="icon-#id#" class="fa fa-lock"></i>
   </div>
 </div>

 <style type="text/css">

   --root: {
     --button_width: 60px;
     --border_size: 3px;
     --button_color: grey;
     --icon_size:30px;
   }

   .button i.fa, .button i.fas, .button i.fab {
     line-height:calc(var(--button_width) - var(--border_size) - var(--border_size));
     color: var(--button_color);
   }

   .button {
     box-sizing: border-box;
     border: var(--border_size) solid var(--button_color);
     border-radius: var(--button_width);
     color: var(--button_color);
     width: var(--button_width);
     height: var(--button_width);
     display: block;
     text-align: center;
     cursor: pointer;
     font-size: var(--icon_size);
     margin: 0;
     font-weight:400;
   }
 </style>

 <script type="text/javascript">

   $(function() {
     var buttonSize = is_numeric('#taille#') ? parseFloat('#taille#'):60;
     var borderSize = is_numeric('#taille_bordure#') ? parseFloat('#taille_bordure#'):3;
     var iconSize = is_numeric('#taille_icone#') ? parseFloat('#taille_icone#'):30;
     var color = ('#couleur#' !='#'+'couleur#') ? "#couleur#":"white";

     $("#button-#id# .button").css("border", borderSize+"px solid "+color);
     $("#button-#id# .button").css("border-radius", buttonSize+"px");
     $("#button-#id# .button").css("color", color);
     $("#button-#id# .button").css("width", buttonSize+"px");
     $("#button-#id# .button").css("height", buttonSize+"px");
     $("#button-#id# .button").css("font-size", iconSize+"px");

     var lineheight = buttonSize - borderSize - borderSize;
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("line-height",lineheight+"px");
     $("#button-#id# .button i.fa, #button-#id# .button i.fas, #button-#id# .button i.fab").css("color",color);

     var type = ('#type#' !='#'+'type#') ? "#type#":"fa";
     var icon = ('#icone#'!='#'+'icone#') ? "#icone#" : "fa-lock";
     $("#icon-#id#").removeClass().addClass(type+" "+icon);
   });

   // Touch start
   $("#button-#id#").on("mousedown", function() {
     return $(this).css({
       "transform": "scale(.9)"
     });
   });

   // Touch end
   $("#button-#id#").on("mouseup", function() {
     return $(this).css({
       "transform": "scale(1)"
     });
   });

 </script>

L’info LED minimalist (prenant le moins de place possible), je ne mets pas le code de celui normal que vous trouverez sur le lien.

<div style="margin:0px; padding:0px; width:40px; height: 28px;" class="cmd #history# container-fluid tooltips cmd-widget netatmodisplay" data-type="info" data-version="#version#" data-eqLogic_id="#eqLogic_id#" data-subtype="other" data-cmd_id="#id#"   data-cmd_uid="#uid#">

<!--
https://github.com/Desaydrone/jeedom_v4_widget/blob/master/dashboard/tarlak_dot_binary_state.html
Maj: 28 04 2020 14:13:13
Tarlak :
Version  0.1 :
Avec l'aide de Domotech pour l'amélioration css, grand merci a lui : http://youtube.com/domotech
** Paramètres option du widget
blink : si valeur à 1 alors la pastille rouge ne clignotera plus
-->

  <div class="led#id#">

  </div>

<style>
  :root {
    --couleuractualisee#id#: #838383;
    --rouge: #da3037;
    --vert: #30b455;
    --gris: #838383;
    --noir: #000000;
    --blanc: #ffffff;
    --offset: -8px;
    --element-size: 8px;

  }

  @keyframes glowing {
    0% {
      box-shadow: 0 0 -10px var(--blanc);
    }

    40% {
      box-shadow: 0 0 20px var(--blanc);
    }

    60% {
      box-shadow: 0 0 20px var(--blanc);
    }

    100% {
      box-shadow: 0 0 -10px var(--blanc);
    }
  }

  @-webkit-keyframes blinker {
    from {
      opacity: 1.0;
    }

    to {
      opacity: 0.0;
    }
  }

  .led#id# {
    position: relative;
    margin: 1em;
    width: var(--element-size);
    height: var(--element-size);
    border-radius: 50%;
    color: #fff;
    background: var(--couleuractualisee#id#);
    line-height: var(--element-size);
    border: 3px solid var(--couleuractualisee#id#);
    text-align: center;
  }

  .led#id#:after {
    content: '';
    position: absolute;
    top: var(--offset);
    bottom: var(--offset);
    left: var(--offset);
    right: var(--offset);
    border-radius: 50%;
    border: 2px solid var(--couleuractualisee#id#);
  }

</style>
<script>
  jeedom.cmd.update['#id#'] = function(_options) {
    var cmd = $('.cmd[data-cmd_id=#id#]');
    var blink#id# = ('#blink#'   !='#'+'blink#') ?   parseInt("#blink#")  :0;

    // Récupération des valeurs
    var valeur = _options.display_value;

    if (valeur == 0) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--rouge');
      if (blink#id#==0)
      {
        cmd.find('.led#id#').css('animation', 'blinker 0.8s linear infinite');
      }
    } else if (valeur == 1) {
      document.documentElement.style.setProperty('--couleuractualisee#id#', 'var(--vert');
      cmd.find('.led#id#').css('animation', 'none');
    }
    $('.cmd[data-cmd_id=#id#]').attr('title', 'Valeur du ' + _options.valueDate + ', collectée le ' + _options.collectDate);
  }
  jeedom.cmd.update['#id#']({
    display_value: '#state#',
    valueDate: '#valueDate#',
    collectDate: '#collectDate#',
    alertLevel: '#alertLevel#'
  });
</script>
</div>

Le widget du givre :

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 20px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
           
          if (state == 0 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-snowflake-off" style="color:#acacac;font-size:35px;"></i>');
			}
		  else if (state == 1 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-snowflake-alert" style="color:#da3037;font-size:35px;"></i>');
			}
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Le widget numeric qui change de couleur pour savoir si un ouvrant ou une prise est activée. Tout bête…

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
	</div>	
  <style>
    .cmdNameColor#id# {
      font-size: 12px;
    }
    .valueColor#id# {
      font-size: 12px;
    }
    .uniteColor#id# {
      font-size: 12px;
    }
</style>
	
	<script>
		jeedom.cmd.update['#id#'] = function(_options) {
			var cmd = $('.cmd[data-cmd_id=#id#]')
			
			//Définition des paramètres et couleurs par défaut et définition des limites par défaut
            //Sinon à passer en paramètres !
                   
			var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#5078aa";
			var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#acacac";
					
            var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
            
		    var valeur = parseFloat(_options.display_value).toFixed(1);
          	
            //Si nul alors couleur 1 sinon on notifie par une couleur différente else case
			if (valeur == 0) {
                AppliedColor = color1;          
            } else {
                AppliedColor = color2;            
            } 
          
			cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
            
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			cmd.find('.state').empty().append(_options.display_value);
          	cmd.find('.value').empty().append(Math.trunc(valeur));
			if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
					cmd.find('.content-xs').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
					cmd.find('.content-xs').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
					cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
	</script>
</div>

Le plus utilisé, le widget qui permet de changer la couleur d’une info en fonction de sa valeur et les options passées.

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
	</div>	
  <style>
    .cmdNameColor#id# {
      font-size: 24px;
    }
    .valueColor#id# {
      font-size: 12px;
    }
    .uniteColor#id# {
      font-size: 12px;
    }
</style>
	
	<script>
		jeedom.cmd.update['#id#'] = function(_options) {
			var cmd = $('.cmd[data-cmd_id=#id#]')
			
			//Définition des paramètres
			var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#FFFFFF";
			var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#FFFFFF";
			var color3 = ('#color1#' != '#' + 'color1#') ? "#color3#" : "#FFFFFF";
			var color4 = ('#color1#' != '#' + 'color1#') ? "#color4#" : "#FFFFFF";
			var color5 = ('#color1#' != '#' + 'color1#') ? "#color5#" : "#FFFFFF";
			
            var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
            
			var limit1 = is_numeric('#limit1#') ? parseFloat('#limit1#'):50;
            var limit2 = is_numeric('#limit2#') ? parseFloat('#limit2#'):100;
            var limit3 = is_numeric('#limit3#') ? parseFloat('#limit3#'):150;
            var limit4 = is_numeric('#limit4#') ? parseFloat('#limit4#'):200;
            var limit5 = is_numeric('#limit5#') ? parseFloat('#limit5#'):500;
            
            var valeur = Math.round(parseFloat(_options.display_value));

			if (valeur < limit1) {
                AppliedColor = color1;          
            } else if ((valeur >= limit1) && (valeur < limit2)) {
                AppliedColor = color2;            
            } else if ((valeur >= limit2) && (valeur < limit3)) {
                AppliedColor = color3;            
            } else if ((valeur >= limit3) && (valeur < limit4)) {
                AppliedColor = color4;            
            } else if ((valeur >= limit4) && (valeur < limit5)) {
                AppliedColor = color5;            
            }
          	else {
              	AppliedColor = color5; 
            }

			cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
            
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			//cmd.find('.state').empty().append(_options.display_value);
          	cmd.find('.value').empty().append(valeur);
			if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
					cmd.find('.content-xs').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
					cmd.find('.content-xs').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
					cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
	</script>
</div>

La boite aux lettres, dans le même principe, vous ferez la lettre et le colis…

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          // 0 rien ; 1 = facteur passé ; 2 = courrier récupéré
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          if (state == 0 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox" style="color:#acacac;font-size:65px;"></i>');
			}
		  else if (state == 1 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-up" style="color:#30b455;font-size:65px;"></i>');
			}
          else if (state == 2 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-mailbox-open-up" style="color:#ff8c00;font-size:65px;"></i>');
			}
		  cmd.find('.state').empty().append(' '+state);
          cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Le widget d’alarme de la moto icone + le niveau de batterie.Il faut passer les options et jouer du code de @noodom pour changer l’option alarme par le widget.

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
            
		  var alarme = is_numeric('#alarme#') ? parseFloat('#alarme#'):0;
          
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
    
          // alarme = 0 (alarme = 0, online = 1)
          if (alarme == 0) {
            	if (state >= 40) {
                  		// vert car alarme désactivée, vert car en ligne, vert batterie car ok
            	   	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-open-variant" style="color:#30b455;font-size:20px;"></i><div style="font-size:10px;color:#30b455;">#state#<span style="font-size:10px;color:#30b455;">%</span></div>');
				}
            	else {
                  		// orange car alarme requiert attention, rouge var batterie déchargé
                  	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-open-variant" style="color:#ff8c00;font-size:20px;"></i><div style="font-size:10px;color:#da3037;">#state#<span style="font-size:10px;color:#da3037;">%</span></div>');
                }
          }
          // alarme = 1 (alarme = 1, online = 1)
		  else if (alarme == 1) {
            		
		  		if (state >= 40) {
                  		// rouge car alarme activée, vert car batterie OK
            	   	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-check" style="color:#da3037;font-size:20px;"></i><div style="font-size:10px;color:#30b455;">#state#<span style="font-size:10px;color:#30b455;">%</span></div>');
				}
            	else {
                  		// rouge car alarme activée, rouge car batterie déchargée
                  	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-alert" style="color:#da3037;font-size:20px;"></i><div style="font-size:10px;color:#da3037;">#state#<span style="font-size:10px;color:#da3037;">%</span></div>');
                }
          }
          // alarme = 2 (alarme = 1, online = 0)
          else if (alarme == 2) {
		  		if (state >= 40) {
                  		// rouge car alarme activée, vert car batterie ok
            	   	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-question" style="color:#da3037;font-size:20px;"></i><div style="font-size:10px;color:#30b455;">#state#%<span style="font-size:10px;color:#30b455;">%</span></div>');
				}
            	else {
                  	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-question" style="color:#da3037;font-size:20px;"></i><div style="font-size:10px;color:#da3037;">#state#<span style="font-size:10px;color:#da3037;">%</span></div>');
                }
          }
          // alarme = 3 (alarme = 0, online = 0)
          else if (alarme == 3) {
		  		if (state >= 40) {
                  		// vert car alarme désactivée, vert car 
            	   	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-question" style="color:#30b455;font-size:20px;"></i><div style="font-size:10px;color:#30b455;">#state#<span style="font-size:10px;color:#30b455;">%</span></div>');
				}
            	else {
                  	   cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-lock-question" style="color:#30b455;font-size:20px;"></i><div style="font-size:10px;color:#da3037;">#state#<span style="font-size:10px;color:#da3037;">%</span></div>');
                }
          }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pour savoir si je chauffe ou refroidi ou rien, je modifie une variable statut (voir article de JF sur le confort) qui me permet de récupérer l’état d’un split. Arrêté, froid ou chaud.

`<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          // 0 arrêt qu'importe le mode ; 1 = chauffage ; 2 = clim !
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          if (state == 0 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-close" style="color:#acacac;font-size:16px;"></i>');
			}
		  if (state == 2 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi thermometer-chevron-down" style="color:#5078aa;font-size:18px;"></i>');
			}
          if (state == 1 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-thermometer-plus" style="color:#da3037;font-size:18px;"></i>');
			}
		  cmd.find('.state').empty().append(' '+state);
          cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>`

Pour la consigne de l’eau chaude en cours avec l’état du chauffe eau (je change l’icone) ; il faut là encore faire l’astuce du php et l’option chauffe.

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          
          // si production on inverse le code couleur et chevron
          var chauffe = is_numeric('#chauffe#') ? parseFloat('#chauffe#'):0;
      
          if (chauffe == 0) {
            
          if (state == 50) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-fire" style="color:#ff8c00;font-size:20px;"></i><span style="font-size:12px;color:#ff8c00;vertical-align:middle;text-align:center;"> #state#</span><span style="font-size:12px;color:#ff8c00;vertical-align:middle;text-align:center;"> °C</span>');
		  }
          else if (state == 60) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-fire" style="color:#da3037;font-size:20px;"></i><span style="font-size:12px;color:#da3037;vertical-align:middle;text-align:center;"> #state#</span><span style="font-size:12px;color:#da3037;vertical-align:middle;text-align:center;"> °C</span>');
          }
          }  
          					
          else if (chauffe == 1) {
            
          if (state == 50) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-fire-alert" style="color:#ff8c00;font-size:20px;"></i><span style="font-size:12px;color:#ff8c00;vertical-align:middle;text-align:center;"> #state#</span><span style="font-size:12px;color:#ff8c00;vertical-align:middle;text-align:center;"> °C</span>');
		  }
          else if (state == 60) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-fire-alert" style="color:#da3037;font-size:20px;"></i><span style="font-size:12px;color:#da3037;vertical-align:middle;text-align:center;"> #state#</span><span style="font-size:12px;color:#da3037;vertical-align:middle;text-align:center;"> °C</span>'); 
          }
          						}
            
          
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pour la tendance hebdo, je passe le % calculé par le plugin suivi conso d’une semaine sur l’autre et j’affiche en fonction un chevron bas, haut, simple ou double et la couleur. Je gère le 0 aussi… et je gère le sens car dans le cas de la production c’est l’inverse de la consommation (option production).

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          
          // si production on inverse le code couleur et chevron
          var production = is_numeric('#production#') ? parseFloat('#production#'):0;
      
          if (production == 0) {
            
          if (state == 0) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-right" style="color:#acacac;font-size:15px;"></i><span style="font-size:11px;color:#acacac;"> #state#<span style="font-size:11px;color:#acacac;">%</span></span>');
		  }
          else if (state <= -10) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-double-down" style="color:#30b455;font-size:15px;"></i><span style="font-size:11px;color:#30b455;"> #state#<span style="font-size:11px;color:#30b455;">%</span></span>');
          }
          else if ((state > -10) && (state < 0)) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa fa-chevron-down" style="color:#30b455;font-size:15px;"></i><span style="font-size:11px;color:#30b455;"> #state#<span style="font-size:11px;color:#30b455;">%</span></span>');
		  }
		  else if (state >= 10) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-double-up" style="color:#da3037;font-size:15px;"></i><span style="font-size:11px;color:#da3037;"> #state#<span style="font-size:11px;color:#da3037;">%</span></span>');
          }
          else if ((state < 10) && (state > 0)) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa fa-chevron-up" style="color:#da3037;font-size:15px;"></i><span style="font-size:11px;color:#da3037;"> #state#<span style="font-size:11px;color:#da3037;">%</span></span>');
          }  
          					}
          else if (production == 1) {
            
          if (state == 0) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-right" style="color:#acacac;font-size:15px;"></i><span style="font-size:11px;color:#acacac;"> #state#<span style="font-size:11px;color:#acacac;">%</span></span>');
		  }
          else if (state <= -10) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-double-down" style="color:#da3037;font-size:15px;"></i><span style="font-size:11px;color:#da3037;"> #state#<span style="font-size:11px;color:#da3037;">%</span></span>');
          }
          else if ((state > -10) && (state < 0)) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa fa-chevron-down" style="color:#da3037;font-size:15px;"></i><span style="font-size:11px;color:#da3037;"> #state#<span style="font-size:11px;color:#da3037;">%</span></span>');
		  }
		  else if (state >= 10) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa font-awesome-angle-double-up" style="color:#30b455;font-size:15px;"></i><span style="font-size:11px;color:#30b455;"> #state#<span style="font-size:11px;color:#30b455;">%</span></span>');
          }
          else if ((state < 10) && (state > 0)) {
				cmd.find('.iconCmd').empty().append('<i class="icon fa fa-chevron-up" style="color:#30b455;font-size:15px;"></i><span style="font-size:11px;color:#30b455;"> #state#<span style="font-size:11px;color:#30b455;">%</span></span>');
          }  
          							}
            
          
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Pour l’UV, je récupère la valeur par Darksky ou autre et même principe que plus haut : icone + valeur.

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 25px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          
          if (state == 0) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny-off" style="color:#acacac;font-size:25px;"></i><span style="font-size:20px;color:#acacac;">#state#</span><span style="font-size:10px;color:#acacac;">/10</span>');
		  }
          else if (state > 0 && state <= 3) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunset" style="color:#30b455;font-size:25px;"></i><span style="font-size:20px;color:#30b455;">#state#</span><span style="font-size:10px;color:#30b455;">/10</span>');
		  }
		  else if (state > 3 && state <= 5) {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunset" style="color:#FFF600;font-size:25px;"></i><span style="font-size:20px;color:#FFF600;">#state#</span><span style="font-size:10px;color:#FFF600;">/10</span>');
		  }
		  else if (state > 5 && state <= 7) {
			 	cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny" style="color:#FFB82B;font-size:25px;"></i><span style="font-size:20px;color:#FFB82B;">#state#</span><span style="font-size:10px;color:#FFB82B;">/10</span>');
		  }
          else if (state > 7 && state <= 12) {
		 		cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-weather-sunny-alert" style="color:#CC0000;font-size:25px;"></i><span style="font-size:20px;color:#CC0000;">#state#</span><span style="font-size:10px;color:#CC0000;">/10</span>');
		  }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Bon la VMC… même principe simple.

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span>
    </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          // 0 arrêt - 1 soufflant orange
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          
          if (state == 0 ) {
			cmd.find('.iconCmd').empty().append('<i class="Mdi mdi-close" style="color:#acacac;font-size:16px;"></i>');
			}
		  if (state == 1 ) {
            // fixe : Mti mdi-refresh-circle
			cmd.find('.iconCmd').empty().append('<i class="Mti mdi-refresh-circle" style="color:#ff8c00;font-size:18px;"></i>');
			}
          cmd.find('.state').empty().append(' '+state);
          cmd.find('.unite').empty().append(' #unite#');	
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

L’affichage des températures en fonction du mode chaud/froid/rien.
Soit on regarde à < -1/-2.5(chaud) ; >1/2.5 (froid); ±1/-+2.5 (rien).
Idem, je passe par les options. Je regarde par rapport à la consigne de la pièce pour être fiable car on se fiche d’avoir 16 dans une pièce où je suis en éco. La photo n’est pas top car il a fait super chaud ici et donc toutes mes températures sont au dessus des consignes !

<div class="cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-template="line" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
	<div class="content-xs">
		<span class="cmdNameColor#id# cmdName #hide_name#">#name_display# </span><span class="valueColor#id# value">#state#</span><span class="uniteColor#id# unite"> #unite#</span>
	</div>	
  <style>
    .cmdNameColor#id# {
      font-size: 12px;
    }
    .valueColor#id# {
      font-size: 12px;
    }
    .uniteColor#id# {
      font-size: 12px;
    }
</style>
	
	<script>
		jeedom.cmd.update['#id#'] = function(_options) {
			var cmd = $('.cmd[data-cmd_id=#id#]')
			
			//Définition des paramètres et couleurs par défaut et définition des limites par défaut
            //Sinon à passer en paramètres !
            
            var saison = is_numeric('#saison#') ? parseFloat('#saison#'):0;
            
			var color1 = ('#color1#' != '#' + 'color1#') ? "#color1#" : "#5078aa";
			var color2 = ('#color1#' != '#' + 'color1#') ? "#color2#" : "#acacac";
			var color3 = ('#color1#' != '#' + 'color1#') ? "#color3#" : "#ff8c00";
			
            var AppliedColor = ('#AppliedColor#' != '#' + 'AppliedColor#') ? "#AppliedColor#" : "#FFFFFF";
            
			var limit = is_numeric('#limit#') ? parseFloat('#limit#'):15;
            var range1 = is_numeric('#range1#') ? parseFloat('#range1#'):1;
            var range2 = is_numeric('#range2#') ? parseFloat('#range2#'):2;
            var valeur = Math.round(parseFloat(_options.display_value));
          	
          

          	//Fonctionne sur un range +/-1 ; +/-2 ; à défaut hors range
          	//Chauffage = 0 on regarde si inférieur uniquement
          
            if (saison == 0) {
                var limit1 = limit-range1;
            	var limit2 = limit-range2;
               	if (valeur >= limit1) {
            	   	AppliedColor = color1;          
         	   	} 
               	else if ((valeur >= limit2) && (valeur < limit1)) {
                   	AppliedColor = color2;            
               	} 
               	else {
                   	AppliedColor = color3;            
               	} 
        	}
          	//Arrêt = 1 on regarde si inférieur et supérieur
          	else if (saison == 1) {
                var limit1i = limit-range1;
            	var limit2i = limit-range2;
				var limit1s = limit+range1;
            	var limit2s = limit+range2;
			   	if ((limit1i <= valeur) && (valeur <= limit1s)) {
                	AppliedColor = color1;          
            	} else if ((limit2i <= valeur) && (valeur <= limit2s)) {
                	AppliedColor = color2;            
            	} else {
                	AppliedColor = color3;            
            	}       
      		}
            //Clim = 2 on regarde si supérieur uniquement
            else if (saison == 2) {
                var limit1 = limit+range1;
            	var limit2 = limit+range2;
               	if (valeur <= limit1) {
            	   	AppliedColor = color1;          
         	   	} 
               	else if ((valeur > limit1) && (valeur <= limit2)) {
                   	AppliedColor = color2;            
               	} 
               	else {
                   	AppliedColor = color3;            
               	} 
        	}
            //Debug au cas où on fixe une couleur bien lisible !
            else {
                   	AppliedColor = "#2B140E";            
                 }      
          
            
			cmd.find('.cmdNameColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.valueColor#id#').attr('style', 'color: ' + AppliedColor + ';');
			cmd.find('.uniteColor#id#').attr('style', 'color: ' + AppliedColor + ';');
            
			cmd.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
			//cmd.find('.state').empty().append(_options.display_value);
          	cmd.find('.value').empty().append(valeur);
			if(_options.alertLevel){
				if(_options.alertLevel == 'warning'){
					cmd.find('.content-xs').addClass('label label-warning')
					cmd.attr('data-alertlevel','warning');
				}else if(_options.alertLevel == 'danger'){
					cmd.find('.content-xs').addClass('label label-danger')
					cmd.attr('data-alertlevel','danger');
				}else{
					cmd.find('.content-xs').removeClass('label label-warning label-danger')
					cmd.attr('data-alertlevel','none');
				}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'})
	</script>
</div>

L’info alerte météo :

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 20px;"></strong></span><span class="unite"></span>
  </center>
	<script>
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
           
          if (state == "vert") {
				cmd.find('.iconCmd').empty().append('<i class="Mti mti-check_circle" style="color:#30b455;font-size:35px;"></i>');
		  }
          else if (state == "jaune") {
				cmd.find('.iconCmd').empty().append('<i class="Mti mti-radio_button_checked" style="color:#FFF600;font-size:35px;"></i>');
		  }
		  else if (state == "orange") {
				cmd.find('.iconCmd').empty().append('<i class="Mti mti-radio_button_checked" style="color:#FFB82B;font-size:35px;"></i>');
		  }
		  else if (state == "rouge") {
			 	cmd.find('.iconCmd').empty().append('<i class="Mti mti-radio_button_checked" style="color:#CC0000;font-size:35px;"></i>');
		  }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Les modes / usages de la maison :

<div class="tooltips cmd cmd-widget #history#" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#" style="display: block;">
	<center>
      <span class="iconCmd"></span><span><strong class="state" style="font-size: 20px;"></strong></span><span class="unite"></span>
  </center>
	<script>
      	// mode + nom au retour de ligne
		jeedom.cmd.update['#id#'] = function(_options){
          var state = _options.display_value;
          var cmd = $('.cmd[data-cmd_id=#id#]');
          cmd.attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate);
          
          if (state == "Absent") {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-home-remove-outline" style="color:#da3037;font-size:27px;"></i><p style="color:#da3037;font-size:12px;">Absent</p>');
		  }
          else if (state == "Travail") {
				cmd.find('.iconCmd').empty().append('<i class="icon maison-man337" style="color:#ff8c00;font-size:25px;"></i><p style="color:#ff8c00;font-size:12px;">Travail</p>');
		  }
		  else if (state == "JF Weekend") {
				cmd.find('.iconCmd').empty().append('<i class="icon Mdi mdi-home-account" style="color:#5078aa;font-size:28px;"></i><p style="color:#5078aa;font-size:12px;">JF Weekend</p>');
		  }
		  else if (state == "Vacances") {
			 	cmd.find('.iconCmd').empty().append('<i class="icon maison-family24" style="color:#30b455;font-size:27px;"></i><p style="color:#30b455;font-size:12px;">Vacances</p>');
		  }
          else if (state == "Chauffage") {
			 	cmd.find('.iconCmd').empty().append('<i class="icon Mdi mti-local_fire_department" style="color:#ff8c00;font-size:25px;"></i><p style="color:#ff8c00;font-size:12px;">Chauffage</p>');
		  }
          else if (state == "Arrêt Total") {
			 	cmd.find('.iconCmd').empty().append('<i class="icon Mti mti-power_settings_new" style="color:#acacac;font-size:25px;"></i><p style="color:#acacac;font-size:12px;">Arrêt Total</p>');
		  }
          else if (state == "Climatisation") {
			 	cmd.find('.iconCmd').empty().append('<i class="icon Mti mti-ac_unit" style="color:#5078aa;font-size:25px;"></i><p style="color:#5078aa;font-size:12px;">Climatisation</p>');
		  }
		  //cmd.find('.state').empty().append(' '+state);
          //cmd.find('.unite').empty().append(' #unite#');
          
			if(_options.alertLevel){
			$('.cmd[data-cmd_id=#id#]').removeClass('label label-warning label-danger')
			if(_options.alertLevel == 'warning'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-warning');
			}else if(_options.alertLevel == 'danger'){
				$('.cmd[data-cmd_id=#id#]').addClass('label label-danger');
			}
			}
		}
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>
</div>

Le reste c’est soit du core, line ou de l’adaptation d’un des codes.

2 « J'aime »

Oui, celui-ci.
Je me garde la possibilité d’avoir un méga design plus grand ou le changement de design à la volée.
Après, je n’ai pas une PI, donc à voir…
(un core i5 10e génération / 32 Go en global) avec une VM dédiée.

Au max sur la VM jeedom :

1 « J'aime »

Quelques ajustements pour l’eau chaude car au final il est plus lisible de savoir si l’eau chauffe, la consigne du jour et la température actuelle du ballon. Merci à @mika-nt28 pour ce plugin.

3 « J'aime »

Bravo @benj29, beau boulot ! :slight_smile:

Existe-il un moyen pour que tu proposes ce “thème” complet sur le market ?
Pour pouvoir l’acheter et l’installer sur nos Jeedom ?

Je le trouve assez abouti…

Ça permettrait de contribuer à tes efforts.

Bravo !
Est-ce que tu dors ? :sleeping:

EDIT : Tu l’as peut-être écrit dans le post, mais est-ce que pour ce design tu as refait des virtuels dédiés au design et donc en double potentiellement de ceux du dashboard ?

Ce n’est pas possible… ce genre de choses.
Sauf erreur. Et sincèrement, c’est tout est relié à des virtuels ou des variables (le comptage d’eau, la consigne d’eau chaude, l’état d’un split de climatisation etc).

Oui, ça va je dors ! La vie appartient à ceux qui se lèvent tôt ;).
Un peu de course à pied ce matin, petit déjeuner famille et au boulot.

Pour répondre à ta question, j’ai nettoyé et je continue à nettoyer au fur et à mesure les virtuels créés pour l’ancien jeedom3 et les designs associés et j’intègre tout dans une catégorie objet « panel » qui me permet une gestion plus efficace.

Par ailleurs, cela m’oblige à modifier les ID de domowidget sur les téléphones familiaux.

1 « J'aime »