Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

(RESOLU)Couleur mode actif

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

(RESOLU)Couleur mode actif

Message par MarcF » 21 janv. 2019, 18:42

Bonjour

J'utilise le plugin mode pour de nombreuses actions aussi j'aimerai visualiser d'un seul coup d'oeil par une couleur, les actions en MARCHE et celles en ARRET
J'ai bien réussi à mettre un fond à la commande mais je souhaiterai voir :

MARCHE avec un fond vert
ARRET avec un fond rouge
etc

je précise que je suis assez nul en code donc merci de m'expliquer dans le détail :)
Screen Shot 01-21-19 at 06.34 PM.JPG
Screen Shot 01-21-19 at 06.34 PM.JPG (16.68 Kio) Consulté 5001 fois
Dernière édition par MarcF le 13 mars 2019, 08:58, édité 1 fois.
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

MaisonClaireNimes
Timide
Messages : 57
Inscription : 29 nov. 2018, 11:24

Re: Couleur mode actif

Message par MaisonClaireNimes » 23 janv. 2019, 10:55

Bonjour,

Je suis intéressé moi aussi par une réponse à ce questionnement.

Cordialement

Avatar de l’utilisateur
jpp38
Timide
Messages : 60
Inscription : 21 sept. 2015, 15:25
Localisation : (38) Nord Isère

Re: Couleur mode actif

Message par jpp38 » 24 janv. 2019, 08:09

Bonjour

Je suis également intéressé par cette demande.
Salutations

Jean-Paul

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Couleur mode actif

Message par MarcF » 11 févr. 2019, 14:56

Bonjour
un petit up, ça doit pourtant etre possible mais je ne trouve pas
En plus, sur la version mobile la zone n'est pas en surbrillance vert

Si je pouvais faire sur les 2 modes :
un fond vert pour Marche et Rouge pour Arret se serait TOP
Merci de votre aide, en plus je vois que ça interresse du monde
Pièces jointes
Screen Shot 02-11-19 at 02.52 PM.JPG
Screen Shot 02-11-19 at 02.52 PM.JPG (8 Kio) Consulté 4921 fois
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Couleur mode actif

Message par MarcF » 27 févr. 2019, 14:36

Bonjour
Personne n'a une piste
j'ai fouillé dans config avancée / commande Mode / Code
sur l'info MODE ou MARCHE, a priori les codes sont identiques
la seule chose que j'ai réussi a modifier c'est la couleur du fond et du texte mais mais ce que je souhaite faire
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

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

Re: Couleur mode actif

Message par Salvialf » 27 févr. 2019, 15:18

Salut,

Il y a le widget ColorTuile qui fait ça. Par @skyline je crois
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)

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Couleur mode actif

Message par MarcF » 27 févr. 2019, 17:50

Salvialf a écrit :
27 févr. 2019, 15:18
Salut,

Il y a le widget ColorTuile qui fait ça. Par @skyline je crois
Le widget info.numeric.Sky-colorTuile ne semble pas compatible avec la V3
Il a disparu du market c'est bien dommage
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

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

Re: Couleur mode actif

Message par Salvialf » 27 févr. 2019, 17:57

Ah je ne savais pas... sinon y'a plusieurs posts sur le forum sur lesquels @winhex explique comment faire. Recherche: "mémoriser état bouton" ou "couleur bouton selon état". De mémoire ça doit pouvoir 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)

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

Re: Couleur mode actif

Message par winhex » 27 févr. 2019, 19:01

nada
il n'y a pas de #state#, value ou _options.display_value pour faire une comparaison via l'action
je regarderai par defi

edit
on passant par l'info ça marche

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
	</center>
	<script>

		jeedom.cmd.update['#id#'] = function(_options){

      var val = _options.display_value;
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').css('background-color', 'green');
$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])').css('background-color', '#cmdColor#');

			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
//			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
            $('.cmd[data-cmd_id=#id#]').hide();

		};
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>

</div>

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

Re: Couleur mode actif

Message par winhex » 28 févr. 2019, 17:47

je pense que vous n'avez pas vu
Pièces jointes
Screenshot_20190228-174518_Chrome.jpg
Screenshot_20190228-174518_Chrome.jpg (14.38 Kio) Consulté 4818 fois

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Couleur mode actif

Message par MarcF » 28 févr. 2019, 18:10

Bonjour
Désolé mais je n'ai pas de connaissance en code...css et autre
J'utilise le plugin MODE et je souhaite modifier la couleur de fond de l'info ETAT

Fond vert si MARCHE
fond rouge si ARRET

j'ai essayé en partant du modèle PRESENCE mais je ne trouve pas

Pouvez vous détailler
Je n'ai pas spécialement besoin des icônes mais si elles y sont tant mieux
Merci
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

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

Re: Couleur mode actif

Message par winhex » 28 févr. 2019, 18:35

tu vas dans la configuration avancé
bouton du haut

paramètre de [mode]
icône de droite

onglet code
activé la personnalisation et
coller le code
Screenshot_20190228-183242_Chrome.jpg
Screenshot_20190228-183242_Chrome.jpg (191.59 Kio) Consulté 4806 fois
Screenshot_20190228-183308_Chrome.jpg
Screenshot_20190228-183308_Chrome.jpg (312.79 Kio) Consulté 4806 fois

MarcF
Timide
Messages : 346
Inscription : 17 nov. 2016, 19:51
Localisation : seine et marne

Re: Couleur mode actif

Message par MarcF » 28 févr. 2019, 19:49

OK super

En plus de ton code, j'ai réussi a modifier le widget : tile_mode

Merci grâce au forum je m'améliore tout doucement
Jeedom smart zwave+ passée en stretch
Modules FGD-212 + FGB-002 + Bypass + QUBINO ZMNHAD1 & ZMNHJD1 fil pilote + ZMNHEA1 + Sonde temp
plugins app mobile, mail, groupe, agenda, geoloc, info jour, mode, heliotrope, vigilance meteo, thermostat

Naboleo
Actif
Messages : 746
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 24 mars 2019, 16:20

un petit up car c'est le genre de truc que je cherche.
Je dois raté un truc (avec le code ci-dessus)
Si je l'applique à un bouton du mode, tous les autres passent à la couleur "inactive" (bleu) mais le bouton modifié est invisible au lieu de rouge...
Si je l'applique à tous, je ne vois plus rien ....

Je suis preneur d'une piste. Merci
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

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

Re: (RESOLU)Couleur mode actif

Message par winhex » 24 mars 2019, 17:07

c'est un widget info et non pour une action (bouton)

Naboleo
Actif
Messages : 746
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 24 mars 2019, 17:24

:roll: Mince j'ai pas fait gaffe à ça. Merci
Je vais essayer d'adapter mais html et css c'est pas mon truc
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

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

Re: (RESOLU)Couleur mode actif

Message par winhex » 24 mars 2019, 19:47

c'est pas le html ou css le plus chaud c'est le script jquery ou javascript

c'est en jouant, reproduisant, adaptant qu'on acquiert de quoi se débrouiller

vu que le plug mode n'as pas de retour d'info pour faire un changement de couleur sur l'action c'est l'info qui met la couleur aux actions du widget

dans le script après actualisation de l'etat
var val = _options.display_value;

met en variable val = le retour d'info (nom de ton boutons activé )

$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').css('background-color', 'green');

remonte à la source du widget (fonction jquery closest) et dans tous le widget recherche un bouton avec pour titre val et mes y la couleur verte

$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])').css('background-color', '#cmdColor#');

idem ne contenant pas pour nom val en titre alors là couleurs de default

$('.cmd[data-cmd_id=#id#]').hide();

cache l'info

donc même si c'est les boutons action qui change d'apparence c'est un widget info qui fait le travail

t'inquiète même si pour moi ça me paraît simple à expliquer c'était pas le cas pour le faire.

Naboleo
Actif
Messages : 746
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 25 mars 2019, 08:15

Bon ça fonctionne si on l'applique au bon endroit ^^ mais je dois adapter par contre :
- J'ai plusieurs modes avec le même "nom" d'action (ex 'off'), donc le "find" sur le nom ne trouvera pas forcement le bon bouton à coloriser
- J'ai des boutons "déportés" ...

Le "truc" que je vois c'est de définir l'id de référence dans une variable personnalisée des boutons et d'utiliser le find sur ce nouveau champ

Merci en tout cas !

EDIT : en fait c'est plus simple... ça marche directement à condition d'avoir aussi l'info déportée :lol:
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

Naboleo
Actif
Messages : 746
Inscription : 20 janv. 2017, 09:57

Re: (RESOLU)Couleur mode actif

Message par Naboleo » 03 avr. 2019, 17:58

@winhex : comment tu fais pour retrouver la bonne "structure" contenu dans le find et obtenir de quoi y ajouter une image ?
L'idée c'est d'avoir des images nommées 'val'-couleur.png et 'val'-nb.png
Le find affecte celle en couleur, le notfind celle en noir et blanc tout comme le changement de background aux boutons

Idéalement toutes dans un répertoire qui corresponds au nom du "mode" (à défaut avec une variable ça fonctionnera), comme ça quand on a plusieurs modes, on est tranquille

J'ai trouvé ça mais j'ai besoin de récuperer le texte du bouton (pour remplacer val) et de l'effacer

Code : Tout sélectionner

		$btnact=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]');
          $btnact.append("<img src='plugins/widget/core/images/"+val+"-couleur.png' heigh=25px width=25px>");
		$btninact=$('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])');
Pi4/4Go +SSD 32Go (Wifi et bluetooth actifs) + Clé USB Z-Wave Everspring + rfxcom (RTS) + Google Home
7 Danfoss LC-13
2 velux module DIO
7 volets RTS
3 Sonoff
IFTTT
Capteur porte, de présence, et prise intelligente...

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

Re: (RESOLU)Couleur mode actif

Message par winhex » 03 avr. 2019, 21:11

j'ai pas tous compris voir aussi que je n'utilise pas mode, c'était un simple défit. je l'ai réinstallé
ta plein de manière pour le faire

d'abord un simple image fonctionne t il ?
Screenshot_20190403-202726_Chrome.jpg
Screenshot_20190403-202726_Chrome.jpg (12.68 Kio) Consulté 4514 fois

Code : Tout sélectionner

<div style="min-width:90px;min-height:60px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<center>
		<div style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</div>
		<span style="font-size: 2em;font-weight: bold;margin-top: 5px;" class="state"></span><br/>
		<span style="color: #666666;font-weight: bold;">#unite#</span>
	</center>
	<script>

		jeedom.cmd.update['#id#'] = function(_options){

      var val = _options.display_value;
 $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName[title="'+val+'"]').empty().html('<span><img src="plugins/widget/core/template/dashboard/cmd.info.numeric.thermometreIMG2/TempRouge.png" width=20 height=30/></span>');
// $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])').css('background-color', '#cmdColor#');
 $('.cmd[data-cmd_id=#id#]').closest('.eqLogic-widget').find('a.btn.btn-sm.btn-default.action.cmdName:not([title="'+val+'"])').empty().append('<img src="plugins/widget/core/template/dashboard/cmd.info.numeric.thermometreIMG2/TempBleu.png" height=30/>');
			$('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
			$('.cmd[data-cmd_id=#id#] .state').empty().append(_options.display_value);
 //           $('.cmd[data-cmd_id=#id#]').hide();

		};
		jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
	</script>

</div>
le 1er c'est une construction html (style, class,,..)
si tu souhaites sinon le not que pour l'image

ensuite (je te laisse faire)
exemple
mode / action1 / action2
tous mettre en noir et blanc
ligne contenant [title="'+val+'"]
remplace par
[title=action1] et image1 nb
idem action 2

image couleur
dans un
if (option_display == action1)
[title=action1] image couleur1
if (option_display == action2)
[title=action2] image couleur2

il ny aura pas de find not

Répondre

Revenir vers « [Plugin Officiel] Mode »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 0 invité