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̶ ̶;̶
Mais voilà, 50% du taf déjà fait !
Merci @dJuL pour l’astuce du fond darksobre tellement sympa.
Ca ne se voit pas sur le post, mais je bave devant mon écran…
Félicitations à toi, pour tout le travail et les explications !!
Mdr ! Merci 
Je confirme c’est propre et clair!!!
Ça donnerait presque envie de passer au mono page avec pop up 
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.
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 :
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.
Bravo @benj29, beau boulot !
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 ? 
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.
En y réfléchissant, je pense que je vais m’appuyer sur deux approches :
Tu as des caméras pour que la RAM soit autant chargée ?
Je ne connaissais pas ce plugin qui pourtant semble dater !
J’ai fait un premier test et pour l’instant je n’arrive qu’à avoir un snapshot de ma caméra et non pas le flux mais ça me paraît intéressant pour afficher la caméra de ma porte d’entrée quand quelqu’un sonne.
Entre 5 et 9 caméras au total. Et je n’ai pas que ça…
Essuie les plâtres, je m’y mettrai dans quelques jours… j’ai d’autres priorités avant ! Un weekend 
J’ai déjà abandonné… lol
Plugin très peu documenté et sur mes premiers essais ça rame beaucoup sur ma tablette…
Mon premier test était d’ouvrir une modale mais impossible d’avoir le flux rtsp, juste un snapshot, donc pas idéal pour voir ce qu’il se passe derrière la porte, mais ça fonctionnait correctement.
Du coup j’ai créé une page de design avec ma caméra et dans la modale j’appelle ce design pour avoir le flux en direct mais la c’est le drame, sur mon pc ça marche mais la tablette a beaucoup de mal à ouvrir la fenêtre, c’est inutilisable.
Du coup je suis resté sur mon idée de page design caméras et lorsqu’on sonne chez moi, mon scénario de notification affiche cette page de design pendant 30 secondes puis je fais un retour sur ma page design d’accueil, le résultat est pas mal.
