Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Le groupe des Helpers est present pour vous aidez, n'hésitez pas à poser des questions ;)

Toute la communauté vous remercie

Widget radiateurs

Réservé à l'utilisation et la création de widgets dans JEEDOM
Avatar de l’utilisateur
maxredphenix
Actif
Messages : 533
Inscription : 18 sept. 2015, 21:36
Localisation : Bourgogne

Widget radiateurs

Message par maxredphenix » 05 janv. 2019, 23:59

Bonjour à tous,

Je voudrais savoir si pour vous il est possible de concevoir un widget pour la gestion des mes radiateurs par fils pilotes identique à celui-ci :
Widget.png
Widget.png (5.09 Kio) Consulté 1149 fois
Soit une simple icone de chauffage.
à droite la sonde de température et la consigne en cours + des commande + et - pour "naviguer" dans les 6 ordres FP
En dessous les 6 actions de FP avec l'icone en vert (ou autre) pour indiquer l'ordre sélectionné (car la consigne au dessous correspond à la température affectée à un FP suivant le réglage du radiateur).
Et la date de la prochaine consigne (car géré par le plugin agenda)

A partir d'un virtuel dont la base serait ceci :
radiateur.JPG
radiateur.JPG (171.61 Kio) Consulté 1149 fois
Cela bien bien longtemps que je n'ai pas fait de CSS donc avant de me lancer dans ce projet je voudrais être certains que cela soit réalisable...

Merci :)
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par maxredphenix » 08 janv. 2019, 22:05

J'ai trouvé un générateur de tableau Boostrap, mais je ne sais pas si on peut inclure un virtuel complet dans un widget...
widget.JPG
widget.JPG (109.94 Kio) Consulté 1111 fois
Le code généré:

Code : Tout sélectionner

<div class="container">
    <div class="row icone_temp">
        <div class="col-sm-2"></div>
        <div class="col-sm-8"></div>
        <div class="col-sm-2"></div>
        <div class="col-sm-2"></div>
        <div class="col-md-8"></div>
        <div class="col-md-2"></div>
    </div>
    <div class="row fp_mode">
        <div class="col-sm-8 col-md-12"></div>
    </div>
    <div class="row consigne">
        <div class="col-xs-12"></div>
    </div>
    <div class="row"></div>
</div>
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 09 janv. 2019, 00:02

bonjour
si tu veux tous ca dans un widget

regarde le widget thermostat et humidité xiaomi dans le market
ainsi que le sujet design avec le widget meteo
2 méthodes différentes pour reprendre une autre info
Screenshot_20190108-235714_Chrome.jpg
Screenshot_20190108-235714_Chrome.jpg (54.25 Kio) Consulté 1099 fois
une action en #variable# widget doit existé pour en faire un raccourci sur un autre widget
a la fin d'un widget action
On trouve
jeedom.execute(#id#)
suivi de slider pour curseur...
changé #id# par un numéro d'équipement
tu verras ça marche

--
Après ta demande fût réalisé dans une ancienne version (pour adaptation en v3) il y a eu même un plug

viewtopic.php?f=29&t=21295
--
pour moi le plus simple
je vois 3 lignes dans ton images
faire de la 1er ligne un widget
un curseur et une info extérieure

et les 2 autres lignes des widget "classiques"

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

Re: Widget radiateurs

Message par maxredphenix » 09 janv. 2019, 07:42

Bonjoyr Winhex,

Merci pour ton retour.

En effet l'ancien post de SupraDolph était très bien (j'avais participé à la doc) et il y avait 5 widgets pour le thermostat. Depuis il a fait un plugin qui est vraiment sympa mais pour toujours les commandes du plugin thermostat. Comme je n'utilise que les 6 commandes je dois faire autrement malheureusement :(

Ok je vais regarder du coup pour le faire en 3 widget via tes recommandations et je suppose avec la partie disposition/ tableau de mettre en forme dans le design.

Est ce que pour toi un curseur peut faire le passage auto entre les 6 ordres ? De off à conf

Encore merci :)
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 09 janv. 2019, 16:14

pas de tableau nécessaire
retour à la ligne suffira

(2eme ligne)
tu as une info / consigne
plusieurs action défaut avec des valeurs 0, 19, ..
si tu clic sur l'action l'info sera la valeur
ensuite utilise mon widget
viewtopic.php?f=29&t=41594
qui met en avant par sa valeur = info que tu peaufines pour ton besoin

a cela tu ajjoutes une action curseur en plus sur la même info (le curseur sera ta 1er ligne)

tous se petit monde s'articuler sans aucun besoin particulier

par contre le curseur auquel tu vas ajouté par la suite la valeur courante, il devra s'actualiser tous seul donc la tu devras faire des tests avant peaufinage (afin de t'eviter de perdre du temps)
savoir si tu pars sur la méthode météo ou sonde xiaoumi cité plus haut

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

Re: Widget radiateurs

Message par maxredphenix » 09 janv. 2019, 22:14

Merci pour tes infos.
J'ai commencé à appliquer tes consignes (PS : très beau ton widget, je lui ai déjà trouvé plein d'utilité !!!)

Pour le moment cela ressemble à :
widget-radiateur.JPG
widget-radiateur.JPG (14.52 Kio) Consulté 1041 fois
Et le virtuel :
widget-radiateur_virtuel.JPG
widget-radiateur_virtuel.JPG (175.54 Kio) Consulté 1045 fois
Cela commence à prendre forme :)
Bon j'avais un problème sur la partie "consigne" donc pour le moment j'ai repris une variable.
Idem : l'icone qui est sélectionnée en bas correspond à ECO alors que je suis en mode confort...

Il me reste à rajouter :
1) Le curseur pour le + et - qui navigue dans les 6 ordres
2) Trouver d'autres icônes car il n'existe pas de flocon ni de demi-soleil dans ceux inclus dans Jeedom (PS : tu sais comment en rajouter de nouveau ?)
3) Comment à mettre cela plus en forme ;)
4) Du coup j'aime bien l'icone de Salvialf dans le post de ton Widget à la place du symbole Thermomètre en haut à doit de mon widget.
Je pense qu'il faut donc que je modifie celle d'état pour avoir justement le symbole de chauffe en plus gros. C'est un peu redondant par contre donc j'hésite à plutôt mettre les moyennes en lieu et place du texte de consigne.
EtatBouton.jpg
EtatBouton.jpg (29.21 Kio) Consulté 1045 fois
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 10 janv. 2019, 00:55

pour ton soucis
valeur = etat
confort != de toutes tes valeurs

2 l'icône mode radiateur est dans la base d'icône jeedom
pour les icones il y a un plug bêta ou via icomoon

Avatar de l’utilisateur
Salvialf
Helper
Messages : 1228
Inscription : 24 févr. 2018, 09:37
Contact :

Re: Widget radiateurs

Message par Salvialf » 10 janv. 2019, 10:08

maxredphenix a écrit :
09 janv. 2019, 22:14

2) Trouver d'autres icônes car il n'existe pas de flocon ni de demi-soleil dans ceux inclus dans Jeedom (PS : tu sais comment en rajouter de nouveau ?)
3) Comment à mettre cela plus en forme ;)
4) Du coup j'aime bien l'icone de Salvialf dans le post de ton Widget à la place du symbole Thermomètre en haut à doit de mon widget.
Je pense qu'il faut donc que je modifie celle d'état pour avoir justement le symbole de chauffe en plus gros. C'est un peu redondant par contre donc j'hésite à plutôt mettre les moyennes en lieu et place du texte de consigne.
EtatBouton.jpg
Salut,

comme le précise @winhex, les icônes des différents états du radiateur sont dispos directement dans Jeedom:
iconesradjeedom.jpg
iconesradjeedom.jpg (182.48 Kio) Consulté 1016 fois
Tu as aussi le flocon de neige "nature-snowflake" dans la partie "nature" et l'icône "fa-glass" tout en bas peut faire office de soleil vide ?!
VM Jeedom 3.2.16 sous Proxmox 5.4 sur NUC5i5RYH (Debian 9.9)
Helper Officiel Jeedom
Widgets développés
Téléchargement d'icônes domotique (Topic Forum)

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

Re: Widget radiateurs

Message par maxredphenix » 10 janv. 2019, 20:11

Salvialf a écrit :
10 janv. 2019, 10:08
Salut,

comme le précise @winhex, les icônes des différents états du radiateur sont dispos directement dans Jeedom:
iconesradjeedom.jpg

Tu as aussi le flocon de neige "nature-snowflake" dans la partie "nature" et l'icône "fa-glass" tout en bas peut faire office de soleil vide ?!
Parfait merci.
je pensais pas que c'était ces icônes là qui rendaient aussi bien en gros...
Je vais tenter le nature-snowflake :)
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par maxredphenix » 10 janv. 2019, 20:39

winhex a écrit :
10 janv. 2019, 00:55
pour ton soucis
valeur = etat
confort != de toutes tes valeurs

2 l'icône mode radiateur est dans la base d'icône jeedom
pour les icones il y a un plug bêta ou via icomoon
Bon je pense que je suis vraiment mauvais dans les vituels et widgets... :?

Pour l'état afin de ressembler au visuel de Salvialf j'ai refait un widget avec ceci et vais chercher des icones pour la partie confort ;) :

Code : Tout sélectionner

<div style="width:90px;height:100%;vertical-align: top;" class="cmd #history# tooltips" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="#collectDate#">
    <center>
        <span style="font-size: 3em;" id="iconCmd#id#"></span>
    </center>
</div>
<script>
    if ('#state#' == 'CONF') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i>');
    } else if ('#state#' == 'CONF-1') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 5px">-1</sup>');
    } else if ('#state#' == 'CONF-2') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 5px">-2</sup>');
    } else if ('#state#' == 'ECO') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-eco"></i>');
    } else if ('#state#' == 'HG') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-hg"></i>');
    } else if ('#state#' == 'OFF') {
        $('#iconCmd#id#').append('<i class="icon jeedom-pilote-off"></i>');
    }
</script>
Et pour le virtuel pour le moment ça ressemble à ceci, mais j'ai du mal à appliquer/comprendre ce que tu préconises :
valeur = etat
confort != de toutes tes valeurs
virtuelv2.JPG
virtuelv2.JPG (213.29 Kio) Consulté 988 fois
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par maxredphenix » 10 janv. 2019, 20:53

Winhex, sans être trop exigent avec toi.

Comment je peux adapter le widget d'info avec les 6FP en me basant sur les IMG ci-dessous.
Le lien vers les images c'est bon, mais c'est plus pour brider la taille à x pixel sans dégrader l'image
6FP.JPG
6FP.JPG (26.13 Kio) Consulté 983 fois
EDIT : Trouvé un widget sur le market avec les mêmes icones !!!
6 ordres.JPG
6 ordres.JPG (29.84 Kio) Consulté 969 fois
Pièces jointes
Chauf128.zip
(90.84 Kio) Téléchargé 26 fois
Dernière édition par maxredphenix le 10 janv. 2019, 22:29, édité 3 fois.
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par maxredphenix » 10 janv. 2019, 22:11

J'ai trouvé un widget en cherchant celui de météo qui est assez sympa pour le côté + et - (merci à Zibastian pour le widget d'origine)
Qu'en penses-tu pour le rendu qui pourrait être obtenu, c'est réalisable pour mon besoin ?
Plusmoins.JPG
Plusmoins.JPG (34.57 Kio) Consulté 976 fois
Le code qui en ressort et qu'il faudrait que j'adapte du coup :

Code : Tout sélectionner

<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" style="min-width:180px;min-height:60px;font-size: 10;" >
  <center>
    <div class="btn-group">
      <div style="width: 100%; text-align:center;">
        <div style="float: left; margin-top: 8px; width: 35px; height: 80px; font-size: 2em; text-align: center; line-height: 30px;">
          <a style="cursor: pointer;" class="btn-sm bt_plus" ><i class="fa fa-2x fa-plus-square"></i></a>
          <br />
          <a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-2x fa-minus-square"></i></a>
        </div>
      </div>
    </div>	
  </center>  
  <script>
	var sbjs_Timer#id#;
    
    /***** Init *****/
    $('#valeur#id#').text( parseFloat(#state#).toFixed(1) );
    setTimeout(sbjs_updateIcon#id#, 50);
                          
    /***** Commande + *****/
	$('.cmd[data-cmd_id=#id#] .bt_plus').on('click', function () {
      	$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) + 0.5 ).toFixed(1) );
      	setTimeout(sbjs_updateIcon#id#, 50);

		clearTimeout(sbjs_Timer#id#);
		sbjs_Timer#id# = setTimeout(sbjs_Save#id#, 1500);
	});      
                         
	/***** Commande - *****/
    $('.cmd[data-cmd_id=#id#] .bt_minus').on('click', function () {
		$('#valeur#id#').text( parseFloat(parseFloat($('#valeur#id#').text()) - 0.5 ).toFixed(1) );
      	setTimeout(sbjs_updateIcon#id#, 50);
 
		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() ) }
        });
	}
  </script>
</div>
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 10 janv. 2019, 23:11

1 j'essaierai la faisabilité de ta demande se week end
remplace par des icones et changes les valeurs
num.png
num.png (64.86 Kio) Consulté 953 fois
si tu as besoin d'actionné
soit via l'info en paramêtre avancé
conf info.png
conf info.png (70.45 Kio) Consulté 953 fois
ou via chaque action

ta variable tu peux toujours l'utilisé et caché cette info
mais quand tu définis ta variable
fait un event sur l'info (un event n'actionnera pas)
ou si tu veux actionné "engendre une action" soit via curseur soit via action

2 tu t'attaches a des détails
ex : https://codepen.io/alldrops/pen/WQBgOg
tu vois le petit nest
c'est se lien
https://upload.wikimedia.org/wikipedia/ ... go.svg.png
et si tu le cherches dans le code css :width: 50px; height: 22px;
donc un détail "quand on sait faire ça"
dans le code cela donne

Code : Tout sélectionner

             $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_open.png" height=120 width=105 />');

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

Re: Widget radiateurs

Message par maxredphenix » 11 janv. 2019, 20:47

Bonsoir,

Parfait merci merci tes retours.

Et je tiens à te remercier pour tout le temps que tu me consacres
2 tu t'attaches a des détails
ex : https://codepen.io/alldrops/pen/WQBgOg
tu vois le petit nest
c'est se lien
https://upload.wikimedia.org/wikipedia/ ... go.svg.png
et si tu le cherches dans le code css :width: 50px; height: 22px;
donc un détail "quand on sait faire ça"
dans le code cela donne
Oui, je comprends mieux.

Par contre ton lien me fait comprendre qu'au final un simple petit logo comme la petite flamme verte (pour Eco je pense) serait plus sympa et moins lourd.
nest.JPG
nest.JPG (25.57 Kio) Consulté 649 fois
Du coup j'ai modifié mon virtuel suivant tes préco.
Tout fonctionne hormis l'info "Etat" qui indique toujours zéro...
virtuel3.JPG
virtuel3.JPG (220.24 Kio) Consulté 649 fois
confvirt.JPG
confvirt.JPG (49.76 Kio) Consulté 649 fois
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 11 janv. 2019, 21:15

ton état est numérique
et les valeurs de tes boutons sont textuelles

la valeur du bouton tu l'as retrouve aussi ici
paramètre d'une action et onglet information
20190111_212030.jpg
20190111_212030.jpg (322.18 Kio) Consulté 637 fois
change état en mode défaut

un thermostat ensuite un radiateur et maintenant une feuille tu aimes le rendu.

moi je préfère son contenant :

comment faire pour avoir un curseur et une info qui s'actualise (j'ai via test réussi "méthode sonde xiaomi + celle du plug") mais il me faut encore poussé le test (80% ok) et ensuite mise en place

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

Re: Widget radiateurs

Message par maxredphenix » 11 janv. 2019, 22:16

winhex a écrit :
11 janv. 2019, 21:15
ton état est numérique
et les valeurs de tes boutons sont textuelles
change état en mode défaut
C'est bon c'est changé, je n'avais pas fait attention à ce point.
Par contre cela ne change pas la valeur et ça c'est bizarre. J'ai refait un test dans un autre virtuel et ça fonctionne bien. Bref

Merci pour l'info sur la visualisation de détail, je n'étais jamais rentrer dans cette partie.
winhex a écrit :
11 janv. 2019, 21:15
un thermostat ensuite un radiateur et maintenant une feuille tu aimes le rendu.

moi je préfère son contenant :
Oui désolé, c'est que je cherche à avoir un rendu qui corresponde bien à ce que madame veut...
Commande Simple et visuelle
J'ai eu un peu de mal à la convertir à la domotique donc je fais le nécessaire pour qu'elle continue à s'intéresser et l'utiliser.
comment faire pour avoir un curseur et une info qui s'actualise (j'ai via test réussi "méthode sonde xiaomi + celle du plug") mais il me faut encore poussé le test (80% ok) et ensuite mise en place
Super merci :)
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 12 janv. 2019, 00:14

quand on créé ou test
parfois une actualisation de la page ne suffit pas
pour cela il faut vider le cache (ctrl-f5) du navigateur

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

Re: Widget radiateurs

Message par winhex » 12 janv. 2019, 12:11

manque modif image (par tranche) et figé décimal 80% de fait
Screenshot_20190112-120856_Chrome.jpg
Screenshot_20190112-120856_Chrome.jpg (40.16 Kio) Consulté 607 fois

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

Re: Widget radiateurs

Message par maxredphenix » 12 janv. 2019, 13:59

winhex a écrit :
12 janv. 2019, 12:11
manque modif image (par tranche) et figé décimal 80% de fait
Screenshot_20190112-120856_Chrome.jpg
Oh génial c'est déjà super bien !!!
DIY Intel NUC i5 7Gen(via Proxmox) - Jeedom 3.2.

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

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

Re: Widget radiateurs

Message par winhex » 12 janv. 2019, 21:15

fini en debut d'aprem j'ai gardé en observation
lors de test l'actu se faisait bien en changeant la valeur à la main, maintenant en reprenant une sonde il faut changé la consigne (via bouton, fléche) pour que la valeur courante se mette à jour.

ya d'autre possibilité mais j'abdique pour l'instant

les fleches deviennent rouge le temps de l'actualisation de l'info
voila avec des images que j'ai réutilisé (pour se rendre compte)
1.png
1.png (44.98 Kio) Consulté 586 fois
la configuration
truc en plus dans curseur l'equipement pour la sonde en valeur
0.png
0.png (71.92 Kio) Consulté 586 fois
le code du curseur

Code : Tout sélectionner

<div class="cmd" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="min-height:50px;">
	<center>
	<table WIDTH="70%">
		<tr>
			<td ROWSPAN=2>
			<h3 class="nest__icon"></h3>
			</td>
            
			<td style="width: 110px;font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#<br>
			<input style="color:white;vertical-align:middle;font-size: 2.5em; font-weight: bold;background-color: transparent;border-color : transparent" type="text" class="value form-control" value="#state# #unite#" disabled style=""/>
			</td>

			<td VALIGN=bottom>
			<a style="cursor: pointer;" class="btn-sm bt_plus" data-toggle="button" aria-pressed="false" autocomplete="off" ><i class="fa fa-2x fa-arrow-up"></i></a>
			</td>
            
		</tr>         
		<tr>
			<td style="font-weight: bold;font-size : 12px;">Valeur Courante<br>
			<input style="color:white;font-size: 2.5em; font-weight: bold;background-color: transparent;border-color : transparent" type="text" class="valeur form-control" value="#unite#" disabled style=""/>
			</td>
            
			<td>
			<a style="cursor: pointer;" class="btn-sm bt_minus" ><i class="fa fa-2x fa-arrow-down"></i></a>
			</td>
            
		</tr>
	</table>
	</center>
            
<style>
  .nest__icon {
  content: "";
//  position: absolute;
 // left: 60%;
//  bottom: -8px;
  width:60px;
  height: 55px;
//  margin-left: 24px;
  background: url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/nest-leaf.png) no-repeat center center;
  background-size: cover;
}
</style>

<script>
    // mis en forme tableau
    // http://hypermedia.univ-paris8.fr/jean/internet/ex_table.html
                                     
$('.cmd[data-cmd_uid=#uid#] .bt_plus').on('click', function () {
	$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) + 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .bt_minus').on('click', function () {  
	$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "red");
	jeedom.cmd.update['#id#']({display_value:parseFloat($('.cmd[data-cmd_uid=#uid#] .value').val()) - 0.5});
	$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
});

$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
	if (typeof timerHandle !== 'undefined') {
		clearTimeout(timerHandle);
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	} else {
		timerHandle = setTimeout(function() {
			jeedom.cmd.execute({id:'#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val().replace("#unite#", "").replace(" ", "")}});
			$('.cmd[data-cmd_id=#id#] .bt_plus').css("color", "");
			$('.cmd[data-cmd_id=#id#] .bt_minus').css("color", "");  
		}, 1000)
	}    
});

jeedom.cmd.update['#id#'] = function(_options){
	jeedom.cmd.byId({ // Récupération de l'id
		id: #id#,
		success:  function(resulat) {    
			valeur#id#=(resulat.configuration.value); 
			valeur#id#=valeur#id#.replace(/#/g,''); // retré de #
			jeedom.cmd.execute({ // Récupération de la valeur  
				id: valeur#id#,
				success:  function(valeur_courante) {   
					$('.cmd[data-cmd_uid=#uid#] .valeur').val(valeur_courante.toFixed(1)+' #unite#');
				}
			});   
		}
	});  
	if (_options.display_value == '0') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/off.png');
	} else if (_options.display_value >= '1' && _options.display_value <= '18') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/nest-leaf.png)');
	} else if (_options.display_value >= '18.5' && _options.display_value <= '19.5') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/moon.png)');
	} else if (_options.display_value >= '20' && _options.display_value <= '21') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/sun-7568.png)');
	} else if (_options.display_value >= '21.5') {
		$(".nest__icon").css('background-image', 'url(plugins/widget/core/template/dashboard/cmd.info.numeric.nest1/duck.png)');
	}  
	var valeur = parseFloat(_options.display_value).toFixed(1);   
	$('.cmd[data-cmd_id=#id#] .value').val(valeur+' #unite#');
}

jeedom.cmd.update['#id#']({display_value:'#state#'});

</script>
  </div>

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Fabe et 3 invités