Ce Forum passera en lecture seule en janvier 2020
Image
Merci de vous rendre sur https://community.jeedom.com maintenant pour vos prochains postes ;)

[supprimé] bouton couleur selon etat

Réservé à l'utilisation et la création de widgets dans JEEDOM
winhex
Actif
Messages : 3799
Inscription : 23 janv. 2015, 01:41

[supprimé] bouton couleur selon etat

Message par winhex » 21 déc. 2018, 22:16

edit
1 vote avec 1/5
j'abdique, je le met en privé pour les membres actif
Screenshot_20190302-231148_Chrome.jpg
Screenshot_20190302-231148_Chrome.jpg (189.46 Kio) Consulté 890 fois
inutile de lire la suite
widget action default avec pour couleur sur fond blanc la valeur de l'etat selectionné

tester avec info autre et numérique, theme par default et dark

pour le choix couleur bien qu'on puisse les changer manuellement
dans configuration / couleurs / dashboard couleur commande selon les différents choix (chauffage,sécurité,...)

border-radius (l'arrondi de bord) selon activé ou non
bt info.png
bt info.png (49.97 Kio) Consulté 1665 fois

lien market
bouton_couleur.png
bouton_couleur.png (7.75 Kio) Consulté 1521 fois
https://www.jeedom.com/market/index.php ... ame=winhex

PS : faire l'assignation du widget via le paramètre avancé d'une action (icône a côté de tester)
viewtopic.php?f=29&t=41594#p680765

édit son code

Code : Tout sélectionner

<span class="cmd reportModeHidden cmd-widget" style="display: inline !important;margin-right: 2px;" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
    <a id="cmdButton#id#" class="btn btn-sm btn-#id#-off action cmdName tooltips" title="#name#" style="margin-top: 2px;justify-content: center;">#name_display#</a>

<style>

.btn.btn-sm.btn-#id#-off{
    color: white!important;
   background-color: #cmdColor#!important;
  border: solid 1px transparant!important;
  border-radius: 20px;

}
.btn.btn-sm.btn-#id#-on{
color: #cmdColor#!important;
   background-color: white!important;
  border: solid 1px #cmdColor#!important;
  border-radius: 20px;
}

      </style>
    <script>

jeedom.cmd.update['#id#'] = function(_options){
			jeedom.cmd.byId({ 
            id: #id#,
				success:  function(resulat) {    
					valeur#id#=(resulat.configuration.value);              
                    if (_options.display_value == valeur#id#) {
							$('#cmdButton#id#').removeClass("btn-#id#-off").addClass("btn-#id#-on");
					} else  {
							$('#cmdButton#id#').removeClass("btn-#id#-on").addClass("btn-#id#-off");
					}
				}
			});        
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
              $('.cmd[data-cmd_uid=#uid#]:last .action').off('click').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
        if ($('.cmd[data-cmd_uid=#uid#]:last').prev().data('subtype') != undefined && $('.cmd[data-cmd_id=#id#]:last').prev().data('subtype') != 'other'
                && $('.cmd[data-cmd_uid=#uid#]:last').prev().css('display') != 'block') {
            $('.cmd[data-cmd_uid=#uid#]:last').prepend('<br/>');
        }
    </script>
    </span>
Dernière édition par winhex le 24 mars 2019, 22:00, édité 15 fois.

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

Re: [beta] bouton couleur selon etat

Message par Salvialf » 21 déc. 2018, 22:31

Bonsoir @winhex,

Il a l'air parfait ce widget comme ça plus besoin de modifier le code de chaque commande à la main.

Je teste ça dès demain !

Petite question: dans le style du btn-#id#-off au début tu as écrit "transparant" au lieu de "transparent". C'est pas gênant ou c'est une faute de frappe?
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)

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

Re: [beta] bouton couleur selon etat

Message par winhex » 21 déc. 2018, 22:43

faute de frappe corrigé , merci

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

Re: [beta] bouton couleur selon etat

Message par Salvialf » 22 déc. 2018, 18:13

Bon bah je dois être nul j'ai pas été foutu de le faire fonctionner :(

Le widget m'applique le style de la classe btn-#id#-off sur tous les boutons et rien ne se passe au clic ou au changement d'état. (testé sur les commandes action/défaut des radiateurs).

J'ai tenté d'ajouter la classe btn-#id#-on au début du code mais sans succès... Je ne suis pas d'une grande aide !
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)

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

Re: [beta] bouton couleur selon etat

Message par winhex » 22 déc. 2018, 19:57

l'info est elle ok ?
car c'est si la valeur du bouton correspond à l'info

alors btn-#id#-on
sinon btn-#id#-off



un exemple
Screenshot_20181222-195534_Chrome.jpg
Screenshot_20181222-195534_Chrome.jpg (317.67 Kio) Consulté 1618 fois

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

Re: [beta] bouton couleur selon etat

Message par Salvialf » 22 déc. 2018, 20:43

Ok j'ai appliqué le widget directement sur les commandes de l'équipement, je ne suis pas passé par un virtuel. Mes commandes action sont bien liées à l'info "état" mais je ne peux pas spécifier de valeur.

Je resteste demain via un virtuel ça devrait fonctionner. Merci à toi
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)

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

Re: [beta] bouton couleur selon etat

Message par winhex » 22 déc. 2018, 21:40

c'est quoi ton équipement?

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

Re: [beta] bouton couleur selon etat

Message par Salvialf » 22 déc. 2018, 21:43

Qubino fil pilote zmnhjd1
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)

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

Re: [beta] bouton couleur selon etat

Message par winhex » 22 déc. 2018, 21:51

tu peux essayé de trouver une corrélation info et une action

a la suite de jeedom.cmd.execute..
d'une action tu ajoutes
jeedom.cmd.byId({ id: #id#});
tu clics en ayant un autre onglet de ton navigateur
(le mieux c'est qu'il soit dans un objet seul)
tu vas dans le mode dev de ton navigateur
onglet console
tu auras tous les retour de byId
j'utilises (->configuration ->value) qui est la valeur de l'action d'un virtuel

tu peux mettre un autre id d'une autre action ou info à la suite pour ton étude de cas (au lieu de #id# ex 3274)

exemple de retour d'une info
viewtopic.php?f=135&t=41052&p=670073&hi ... Id#p670087
Dernière édition par winhex le 22 déc. 2018, 22:42, édité 3 fois.

sebfar
Timide
Messages : 441
Inscription : 17 sept. 2018, 13:34

Re: [beta] bouton couleur selon etat

Message par sebfar » 22 déc. 2018, 22:09

Bonsoir
Je l'ai mis sur un virtuel. Les boutons s'arrondissent mais ne change pas quand je clique dessus
EDIT : C'est bon j'ai trouvé

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

Re: [beta] bouton couleur selon etat

Message par Salvialf » 23 déc. 2018, 11:49

Salut @winhex,

Le virtuel me convenait bien surtout que c'est pour afficher sur le design. Du coup création de virtuel en spécifiant la valeur de la commande et le résultat est nickel:
EtatBouton.jpg
EtatBouton.jpg (175.61 Kio) Consulté 1570 fois
Bravo et merci !
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)

marcoleroi
Timide
Messages : 68
Inscription : 31 août 2018, 23:27

Re: [widget] bouton couleur selon etat

Message par marcoleroi » 01 janv. 2019, 11:27

Bonjour et Bonne Année a tous ,
J'ai installé le widget état bouton mais quand je clic dessus j'ai la roue cranté qui tourne sans arrêt et je suis bloqué
Pour Salvialf comment vous faite pour le dessin du chauffage qui change d’état en fonction de mode demandé
Cldt

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

Re: [widget] bouton couleur selon etat

Message par Salvialf » 01 janv. 2019, 11:50

marcoleroi a écrit :
01 janv. 2019, 11:27
Bonjour et Bonne Année a tous ,
J'ai installé le widget état bouton mais quand je clic dessus j'ai la roue cranté qui tourne sans arrêt et je suis bloqué
Pour Salvialf comment vous faite pour le dessin du chauffage qui change d’état en fonction de mode demandé
Cldt
Bonjour et bonne année,

Pour le widget état du chauffage, c'est le widget "Qubino - Fil Pilote" disponible sur le market des widgets. Je ne me souviens plus trop mais je crois que j'ai du un peu le modifier pour le rendre compatible V3.2.
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)

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

Re: [widget] bouton couleur selon etat

Message par winhex » 01 janv. 2019, 19:43

marcoleroi a écrit :
01 janv. 2019, 11:27
Bonjour et Bonne Année a tous ,
J'ai installé le widget état bouton mais quand je clic dessus j'ai la roue cranté qui tourne sans arrêt et je suis bloqué
Pour Salvialf comment vous faite pour le dessin du chauffage qui change d’état en fonction de mode demandé
Cldt
merci bonne année à toi aussi.

il existe 2 méthodes pour assigner un widget

il te faut faire l'assignation via le paramètre avancé de ton action (icône a côté de tester) :
Screenshot_20190101-194436_Chrome.jpg
Screenshot_20190101-194436_Chrome.jpg (144.69 Kio) Consulté 1482 fois
une fois cela fais pour une action, tu pourras accédé au code du plug widget
Dernière édition par winhex le 18 févr. 2019, 02:37, édité 1 fois.

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

Re: [beta] bouton couleur selon etat

Message par maxredphenix » 09 janv. 2019, 21:41

Salvialf a écrit :
23 déc. 2018, 11:49
Salut @winhex,

Le virtuel me convenait bien surtout que c'est pour afficher sur le design. Du coup création de virtuel en spécifiant la valeur de la commande et le résultat est nickel:

EtatBouton.jpg

Bravo et merci !
Bonsoir Salvialf,

Très beau rendu !!!

Je suis aussi en train de regarder pour faire un affichage pour la gestion de mes radiateurs Forum et j'aime bien certains points de tes rendus.

Est-ce que tu pourrais partager les infos sur ton virtuel [Edit : ta conf de Qubino.. je l'ai lu après] et les widgets associés ?

PS : a quoi correspond les minutes ? c'est depuis quand la commande / l'action a été envoyée ?

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
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [beta] bouton couleur selon etat

Message par Salvialf » 10 janv. 2019, 09:56

maxredphenix a écrit :
09 janv. 2019, 21:41
Bonsoir Salvialf,

Très beau rendu !!!

Je suis aussi en train de regarder pour faire un affichage pour la gestion de mes radiateurs Forum et j'aime bien certains points de tes rendus.

Est-ce que tu pourrais partager les infos sur ton virtuel [Edit : ta conf de Qubino.. je l'ai lu après] et les widgets associés ?

PS : a quoi correspond les minutes ? c'est depuis quand la commande / l'action a été envoyée ?

Merci :)
Merci @maxredphenix,

Pour répondre à ta question, les minutes correspondent au temps de la pièce à la température indiquée. Le widget "température" a été donné par @winhex sur ce post: viewtopic.php?f=29&t=16181&hilit=partag ... o&start=20
Ce post est vraiment intéressant surtout pour ce que tu veux faire, n'hésites pas à le lire en entier.

Les icônes des boutons d'action et d'état sont toutes dans la base d'icônes jeedom. Je t'ajoutes le code du widget d'état Qubino-fil pilote que j'utilise:

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>
  jeedom.cmd.update['#id#'] = function(_options){
    if (parseInt(_options.display_value) == 99) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-conf"></i>');
    } else if (parseInt(_options.display_value) == 50) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 1px">-1</sup>');
    } else if (parseInt(_options.display_value) == 40) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-conf"></i><sup style="font-size: 0.5em; margin-left: 1px">-2</sup>');
    } else if (parseInt(_options.display_value) == 30) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-eco"></i>');
    } else if (parseInt(_options.display_value) == 20) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-hg"></i>');
    } else if (parseInt(_options.display_value) == 0) {
      $('#iconCmd#id#').empty().append('<i class="icon jeedom-pilote-off"></i>');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
J'espère que ça va t'aider !

@+
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 : 539
Inscription : 18 sept. 2015, 21:36
Localisation : Bourgogne

Re: [widget] bouton couleur selon etat

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

Bonsoir,

Parfait merci pour ton retour. Je vais regarder en détail le widget Qubino du coup pour l'adapter à mon cas.
J'ai vu que tu avais aussi répondu dans mon post dédié au chauffage : merci ;)

Décidément Winhex est partout et son travail est vraiment top !!!
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
Salvialf
Helper
Messages : 1334
Inscription : 24 févr. 2018, 09:37
Contact :

Re: [widget] bouton couleur selon etat

Message par Salvialf » 11 janv. 2019, 21:29

maxredphenix a écrit :
10 janv. 2019, 20:10
Décidément Winhex est partout et son travail est vraiment top !!!
Oui et les explications qu'il fournit sont très instructives !

HS: Je vois dans ta signature que tu as un NUC i5 7éme génération... je lorgnes sur un i5 5ème génération en ce moment, Tu pourrais me donner plus de détail sur le tien stp ? nombre de coeurs CPU pour la virtualisation, hyperthreading, etc ? Tu peux me répondre par MP pour ne pas polluer le post. Merci d'avance
Dernière édition par Salvialf le 17 févr. 2019, 18:38, édité 1 fois.
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)

alexpumasage
Timide
Messages : 7
Inscription : 23 janv. 2019, 18:32

Re: [widget] bouton couleur selon etat

Message par alexpumasage » 23 janv. 2019, 18:37

Bonjour à tous,

je suis en train de préparer une installation pour Jeedom (première expérience).

Je parviens à peu près à faire tout ce que je veux, mais je suis bloqué sur le design que j'ai créé destiné à apparaître sur une tablette.
Sur mon design, dans les zones "chambre 1", "chambre 2", j'aimerais ne pas afficher l'image de radiateur tel que c'est là, mais que mon info virtuelle de température change de couleur en fonction de l'info virtuelle de l'état du radiateur. Le css, html ne me posent pas de problèmes, mais je ne sais pas comment récupérer l'état du radiateur.

Je vous remercie d'avance pour votre aide !
Alex
Pièces jointes
Design.png
Design en cours de développement
Design.png (138.36 Kio) Consulté 1144 fois

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

Re: [widget] bouton couleur selon etat

Message par winhex » 23 janv. 2019, 18:55

on est d'accord que tu veux regroupé 2 info en 1

fait ca (la culture)
viewtopic.php?f=29&t=41964&start=20#p686552

et ensuite selon temp0 ou temp1 faire ou ne pas faire

méthode reprise de :
viewtopic.php?f=50&t=1182&hilit=meteo&s ... 60#p609163
plus loin le code partager

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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