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 :)

Toute la communauté vous remercie

Aide pour changement de couleur

Réservé à l'utilisation et la création de widgets dans JEEDOM
Merangle
Timide
Messages : 58
Inscription : 07 févr. 2016, 19:01

Aide pour changement de couleur

Message par Merangle » 13 août 2018, 07:25

Bonjour à tous

Grand débutant en widget et sans connaissance en html/css/.... il faut bien un début à tout.
En s'inspirant du widget dashboard.info.string.tile_mode développé par maggic91, je cherche à modifier un widget du plugi Mode pour que l'état soit affiché en rouge ou vert en fonction du mode sélectionné.

Pour l'instant j'arrive à afficher
Absence.PNG
Absence.PNG (3.81 Kio) Consulté 68 fois
Avec le code suivant

Code : Tout sélectionner

<div class="Doc-#id# cmd tooltips cmd-widget #history#" title="#collectDate#" data-type="Info" data-subtype="Autre" data-cmd_id="#id#"> 
<span class="label label-absence" style="font-weight:bold;font-size:15px;color:red"> #state# </span>
    
    <style>

    </style>

<script>
if ("#state#" == 'Présence') {
$('.cmd[data-cmd_id=#id#] span.label').removeClass('label-absence').append('<i class="icon maison-house112"></i>');
}
if ("#state#" == 'Absence') {
$('.cmd[data-cmd_id=#id#] span.label').addClass('label-absence').append('<i class="icon jeedom-mouvement"></i>');
}
    </script>
</div>
Je veux faire en sorte que le mode soit affiché en vert quand on clique sur Présence.

de ce que je comprends il faut soit jouer sur la classe (mais comment ajouter une deuxième classe), soit sur le style.... mais comment ....

Un petit coup de main serait le bienvenu.

Merci d'avance pour votre aide.

lguezennec
Timide
Messages : 50
Inscription : 04 juil. 2014, 21:23

Re: Aide pour changement de couleur

Message par lguezennec » 13 août 2018, 08:18

Bonjour,

Ci-dessous une exemple ; tout est dans les lignes contenant une référence à "colorTuile"

Code : Tout sélectionner

<div style="width:90px;" class="cmd #history# tooltips cmd-widget colorTuile-#uid#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  <center>
    <span style="font-size: 3.5em;font-weight: bold;" class="iconCmd"></span><br/>
    <span style="font-size: 12px;" class="timeCmd#uid# timeCmd" ></span>
  </center>
  <script>
    jeedom.cmd.update['#id#'] = function(_options){
     jeedom.cmd.displayDuration(_options.valueDate,  $('.cmd[data-cmd_id=#id#] .timeCmd'));
     $('.cmd[data-cmd_id=#id#]').attr('title','Valeur du '+_options.valueDate+', collectée le '+_options.collectDate)
     if (_options.display_value == '1') {
       	$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ferme"></i>');
       	$('.colorTuile-#uid#').closest('.eqLogic-widget').css('background-color','#745cb0');
     }else {
      	$('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-fenetre-ouverte"></i>');
       	$('.colorTuile-#uid#').closest('.eqLogic-widget').css('background-color','ORANGERED');
    }
  }
  jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
</script>
</div>

Merangle
Timide
Messages : 58
Inscription : 07 févr. 2016, 19:01

Re: Aide pour changement de couleur

Message par Merangle » 13 août 2018, 11:58

@ lguezennec

Merci .... J'ai réussi avec ton aide

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

Re: Aide pour changement de couleur

Message par winhex » 16 août 2018, 13:28

@lguezennec
merci pour le
jeedom.cmd.displayDuration(_options.valueDate ..
à la place du #valueDate#
j'y avais jamais pensé

Répondre

Revenir vers « [Plugin officiel] Widgets »

Qui est en ligne ?

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