[SALVIALF] Widget Consigne_Thermostat (Action/Curseur)

Tags: #<Tag:0x00007f283665a788>

Bonjour @ tous,

Pendant que j’ai 5 minutes j’en profite pour partager le widget thermostat qui m’a été demandé à corps et à cris :yum: (n’est-ce pas @iPapy :grimacing:) !

20200329_211303

L’icône en forme de thermomètre sur la gauche est de couleur bleue et vide en dessous de 10°C, verte et moitié pleine entre 10°C & 16°C, jaune et pleine entre 16°C & 22°C et pleine et orange au-dessus de 22°C.

Pour installer le widget:

  • il faut se rendre dans le menu Outils/widgets puis cliquer sur le bouton code: WidgetCode

  • Cliquer sur Nouveau et créer un nouveau widget du nom de votre choix avec les caractéristiques suivantes: Version: Dashboard | Type: Action | Sous-type: Curseur

  • Coller le code suivant et sauvegarder:

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<!-- ########## Consigne Thermostat ##########
 ********* Paramètres Optionnels ********* 
 step = valeur du pas de chgt de valeur (0.5 par défaut) 
 ########## by @SALVIALF ;) ############# -->

  <div class="title #hide_name#">
    <div class="cmdName">#name_display#</div>
  </div>
  <span id="thermo_icon"></span>
  <p id="displayConsigne" class="text-right">
    <span id="valeur#id#"></span>°C
   </p>
   <div id="boutons">
    <a class="btn-sm bt_plus"><i class="fas fa-2x fa-plus-square"></i></a>
     <br />
    <a class="btn-sm bt_minus"><i class="fas fa-2x fa-minus-square"></i></a>
   </div>
<style>
@font-face {
    font-family: "liquid";
  	src:	url("data/fonts/LiquidNormal.ttf") format("truetype");
}
 #thermo_icon { font-size:4em;}
 #displayConsigne { display:inline-block; width:85px; font-family:"liquid";}
 #valeur#id# { font-size:3.5em; }
 #boutons { display:inline-block; }
</style>  
  <script>
	var sbjs_Timer#id#;
                    
    /***** + *****/
	$('.cmd[data-cmd_id=#id#] .bt_plus').on('click', function () {
      var cmd = $('.cmd[data-cmd_uid=#uid#]')
      	var step = (isNaN(parseFloat('#step#'))) ?  0.5 : parseFloat('#step#');
      	cmd.find('#valeur#id#').text(parseFloat(parseFloat($('#valeur#id#').text()) + step ).toFixed(1) );
                   
		clearTimeout(sbjs_Timer#id#);
		sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);              
	});      
                         
	/***** - *****/
    $('.cmd[data-cmd_id=#id#] .bt_minus').on('click', function () {
      var cmd = $('.cmd[data-cmd_uid=#uid#]')
      	var step = (isNaN(parseFloat('#step#'))) ?  0.5 : parseFloat('#step#');
		cmd.find('#valeur#id#').text(parseFloat(parseFloat($('#valeur#id#').text()) - step ).toFixed(1) );
      
		clearTimeout(sbjs_Timer#id#);
		sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
	});

    /***** Envoi de la nouvelle consigne *****/
	function sbjs_Save#id#() {
		jeedom.cmd.execute({ id: '#id#', value: { slider: parseFloat( $('#valeur#id#').text() ) }
        });
	}
    
    /***** MAJ Automatique *****/
    jeedom.cmd.update['#id#'] = function(_options){
      var cmd = $('.cmd[data-cmd_uid=#uid#]')
      cmd.find('#valeur#id#').text(parseFloat(_options.display_value).toFixed(1));
      
      if (_options.display_value < 10) {
          cmd.find('#thermo_icon').html('<i class="icon_blue jeedom-thermo-froid"></i>');}
      	else if (_options.display_value <= 16) {
          cmd.find('#thermo_icon').html('<i class="icon_green jeedom-thermo-moyen"></i>');}
      	else if (_options.display_value <= 22) {
          cmd.find('#thermo_icon').html('<i class="icon_yellow jeedom-thermo-chaud"></i>');}
        else {
          cmd.find('#thermo_icon').html('<i class="icon_orange jeedom-thermo-chaud"></i>');}
    }
    jeedom.cmd.update['#id#']({display_value:'#state#'});
  </script>
</div>
  • Ce widget utilise une police d’écriture personnalisée, il est donc nécessaire d’installer le fichier correspondant.
    Le fichier LiquidNormal.ttf.txt (6,7 Ko) est à copier dans le dossier data/fonts/ à l’aide du plugin jeeXplorer.

:warning: Important : Enlever l’extension .txt pour récupérer un fichier nommé LiquidNormal.ttf :warning:

Paramètres optionnels:

  • step: permet de choisir le « pas » du changement de valeur (0.5 par défaut).

Utilisation du widget :

  • Le widget doit être appliqué sur une commande Action/Curseur elle-même liée à une commande Info/Numérique.
  • Pour appliquer le widget sur la commande, il faut se rendre dans les paramètre de la commande Action/Curseur, onglet Affichage et choisir le widget dan le menu déroulant:
    SelectWidgetCode


Partagé un peu dans la précipitation donc n’hésitez pas à faire part de vos retours ou remarques sachant que je n’avais pas forcément prévu de le partager à l’origine donc il sera peut-être amené à évoluer à l’avenir.

Edit: Honte sur moi j’ai complètement oublié de préciser que je m’étais inspiré du widget Thermostat_numerique de @zibastian.
Avant que le demande soit faite je précise aussi que je regarde pour la version mobile :slight_smile:

11 J'aimes

Bonjour Salvialf j’ai bien suivie le tutoriel mais je ne voie pas le widget quand affiche mes widget tau un idée

Salut,

J’ai ajouté la procédure de sélection du widget à la fin du 1er post :wink:

Bonjour Salvialf, merci beaucoup pour tout le temps et le partage de tes widgets. Je rencontre un petit souci avec celui ci, la jauge de température ne change pas de couleur, elle reste noire et pleine. Et serait il possible de modifier la taille du widget ? Merci

Hello Salvialf,

J’ai enfin trouvé 5 minutes :wink: pour tester ce beau widget mais j’ai 1 petite remarque :slight_smile:

  • Est il possible de remonter le °C plus haut ?

Capture

Merci d’avance pour ta réponse.

Quoi tu ne l’essayes que maintenant !!! Je suis outré !! :confounded:

Alors je me rappelle bien m’être pris la tête avec ce °C au final j’ai fait au plus simple !

Tu le veux à quel niveau et de quelle taille ? (à ne pas mal interpréter surtout !!)

Désolé j’ai été très pris, tu sais ce que c’est non :wink:

:rofl:

Si c’est possible Salvialf j’aimerai l’avoir en haut au lieu d’en bas pour la taille ça me va :slight_smile:

En tout cas beau travail :+1: :+1: :+1:

J’ai un problème avec le thermostat de mon four …

Capture d’écran du 2020-04-03 17-00-01

Les frères Dupont|d les 2 là ! :smile:

Effectivement pas pensé aux fours, il faut modifier le width ici:

 #displayConsigne { display:inline-block; width:85px; font-family:"liquid";}

il faut que tu ajoute une option Nb de digits …

Bah oui on dirait bien que je vais devoir remettre le nez dedans… Merci @olive :grimacing: :wink:

:rofl:

Oui oui Salvialf :wink: D’ailleurs pour les couleurs des températures du thermomètre au lieu de les avoir en dur dans le code c’est pas possible de les avoirs en commandes option comme tu nous a habitué sur d’autre widget ?

Bah en en fait il était perso à l’origine ce widget c’est pour ça qu’il n’y a pas de paramètres optionnels.

Je vais essayer de prendre 5 minutes pour en ajouter mais faut encore rédiger les explications après :tired_face:

Même combat sur le thermostat du congélateur

Capture d’écran du 2020-04-03 17-48-55

Les dupondts ne font pas a moitié les test :wink:

Salut,

Tu as un congélateur connecté? :thinking:

A mon avis il a collé une sonde dedans ! D’ailleurs je tremble sur l’annonce de la position de la prochaine sonde :scream: :scream: :scream:

Ah bah non il controle la temperature !! quel ***

LOL ok mais une sonde ça ne fait pas thermostat…

Oui oui je fais plein de trucs en même temps… J’écris le temps que les volets bougent là :smiley:

oui un son-off et une sonde

Be il ne s’auto-régule pas tout seul ton congélo.? Tu as mis le Sonoff sur l’alim.?