Virtuel ON/OFF et plusieurs boutons sur Design

[rjcb]

Bonjour,

Bonnes Vacances

Je galère avec un virtuel alors que ce n’est pas le premier mais je bute toujours la dessus:
Avoir un seul bouton pour l’ouverture et l’état

J’ai une commande pour ouvrir un portillon et le retour d’état est fait par un capteur fixé sur la porte.

Dans le virtuel: (j’ai mis volontairement fermé pour avoir le OFF mais ce bouton ne sert a rien car l’ouverture c’est une impulsion de 15s)

Coté design:

J’ai la meme chose avec un portail qui fonctionne:

Je dois rater un détail mais je ne trouve pas
Merci

[vegeta0911]

Il faut que état defaut = 0
Après bouton ouverture avec état = 1.
Puis après 15 s = état a 0 (fermer)

[xav31190]

C’est parce que sur un état t’as pas les meme chose de configuré

donc il t’en fait 2

[RGLD]

salut

il te manque les valeur dans ta premiere copie ecran (0 et 1) dans tes commande off on
off = 0
on = 1

[rjcb]

Merci pour vos retours:
Les commandes On et Off et l’info binaire etat sont toutes comme ceci:

J’ai également modifié ceci mais toujours le meme pb:

Merci

[Bison]

Salut,

Essai juste de renommer tes commandes en « ouvrir » / « fermer »

Widget sur Action ON OFF ne s'affiche pas

En fait il suffit que çà contienne le mot clé on ou off et çà marche peu importe si c’est au début au milieu ou à la fin du nom. Voici la liste des mots clés avec pour chacun des mots si c’est un alias de on ou off 'on': 'on', 'off': 'off', 'monter': 'on', 'descendre': 'off', 'ouvrir': 'on', 'ouvrirStop': 'on', 'ouvert': 'on', 'fermer': 'off', 'activer': 'on', 'active': 'on', 'inactive': 'off', 'desactiver': 'off', 'désactiver': 'off', 'l…

[rjcb]

tjs pas

[Bison]

Tu as mis quoi dans l’affichage widget pour tes 2 commandes ouvrir/fermer ?

[rjcb]

les 2 sont comme ceci:

[Bison]

Même paramétrage ici que pour tes 2 commandes de Portail ?
Ou c’est un autre widget ?

[rjcb]

exactement pareil pour le portail ext:

[rjcb]

Je fais quelques tests.

Si je duplique celui qui fonctionne (portail ext) meme pb sur l’affichage: Pourtant dupliquer on a bien une conf iso excepté le nom du virtuel ?

[Bison]

Et tu peux mettre une copie de ton widget Homekit du coup ?

Tu peux tenter avec un widget vore comme une prise ?

[rjcb]

Yes.
Du coup avec le widget prise:

et le code pour le widget homekit qui vient du forum

la version cde action:

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!--
    Création : @PhpVarious
    Date : 04/02/2023
    https://community.jeedom.com/t/creation-widget-avec-css/98824
  -->
  <div class="tuile#id# align-items-center#id#">
    <span class="iconCmd bg-icone#id# rounded-circle#id# execute"></span>
    <div class="margin-left#id#">
      <div class="d-flex#id# align-items-center#id#">
        <div class="margin-bottom#id# h3-#id#" id="titre#id#"></div>
      </div>
      <p class="font-color#id# margin-bottom#id# state#id#"></p>
    </div>
  </div>
  <template>
    <div>widthTuile : Largueur de la tuile [Défaut : 170]</div>
    <div>radiusTuile : Arrondi de la tuile [Défaut : 15]</div>
    <div>titleTuile : Titre du widget [Défaut : le nom de la commande état]</div>
    <div>texteIfOn : Texte affiché si Etat = 1 [Défaut : Allumé | accepte une valeur vide]</div>
    <div>texteIfOff : Texte affiché si Etat = 0 [Défaut : Éteint| accepte une valeur vide]</div>
    <div>radiusIcone : Arrondi de l'icone [Défaut : 50 (rond)]</div>
    <div>darkBackground : couleur de fond en thème Dark [Défaut : rgb(47, 47, 47)]</div>
    <div>lightBackground : couleur de fond en thème Light [Défaut : rgb(199 199 199)]</div>
    <div>darkBackgroundIcone : couleur de fond de l'icone en thème Dark [Défaut : rgb(69, 70, 72)]</div>
    <div>lightBackgroundIcone : couleur de fond de l'icone en thème Light [Défaut : rgb(100, 100, 100)]</div>
    <div>icone : icone à afficher dans le widget [ ex : icon jeedomapp-prise ]</div>
    <div>si ce paramètre n'est pas précisé, le widget affichera l'icône affecté a la commande.</div>
    <div>et si il n'y a pas d'icône affecté a la commande, le widget affichera un icone prédéfini en fonction du generic type.</div>
    
  </template>
  <script>
    var debug#id# = ('#debug#' != '#' + 'debug#' && '#debug#' == 1) ? true : false;
    var cmd#id# = $('.cmd[data-cmd_id=#id#]')
    var width#id# = is_numeric('#widthTuile#') ? parseFloat('#widthTuile#'):170;
    var title#id# = ('#titleTuile#' != '#' + 'titleTuile#') ? "#titleTuile#" : "#valueName#";
    var radiusIcone#id# = is_numeric('#radiusIcone#') ? parseFloat('#radiusIcone#'):50;
    var radiusTuile#id# = is_numeric('#radiusTuile#') ? parseFloat('#radiusTuile#'):15;
    var darkBackground#id# = ('#darkBackground#' != '#' + 'darkBackground#') ? '#darkBackground#' : 'rgb(47, 47, 47)';
    var lightBackground#id# = ('#lightBackground#' != '#' + 'lightBackground#') ? '#lightBackground#' : 'rgb(199 199 199)';
    var darkBackgroundIcone#id# = ('#darkBackgroundIcone#' != '#' + 'darkBackgroundIcone#') ? "#darkBackgroundIcone#" : 'rgb(69, 70, 72)';
    var lightBackgroundIcone#id# = ('#lightBackgroundIcone#' != '#' + 'lightBackgroundIcone#') ? "#lightBackgroundIcone#" : 'rgb(100, 100, 100)';
    var theme#id# = jeedom.widgets.getThemeImg("Light","Dark")
    var icone#id# = ('#icone#' != '#' + 'icone#') ? '<i class="#icone#"></i>' : '#name_display#';
    var texteIfOn#id# = 'Allumé'
    var texteIfOff#id# = 'Éteint'
    
    if (debug#id#) console.log('┌─────────────────── Chargement Widget (cmd:#id#) en debug')
    if (debug#id#) console.log('| generictype : #generic_type#');
    if(icone#id#.indexOf('<i ') === -1) {
      if (debug#id#) console.log('| icone absent');
      if (debug#id#) console.log('| name : #name#');
      if (jeedom.cmd.normalizeName('#name#') == 'off') {
        if (debug#id#) console.log('| normalizeName : NOT on');
        if ('#generic_type#'.indexOf('ENERGY') !== -1) icone#id# = '<i class="icon jeedomapp-prise icon_yellow"></i>'
        else if ('#generic_type#'.indexOf('HEATING') !== -1) icone#id# = '<i class="icon techno-heating3 icon_yellow"></i>'
        else if ('#generic_type#'.indexOf('MEDIA') !== -1) icone#id# = '<i class="fas fa-tv icon_yellow"></i>'
        else if ('#generic_type#'.indexOf('LOCK') !== -1) {
          icone#id# = '<i class="fas fa-lock-open icon_yellow"></i>'
          texteIfOn#id# = 'Ouvert'
          texteIfOff#id# = 'Fermé'
        }
        else icone#id# = '<i class="fas fa-lightbulb icon_yellow"></i>'
      } else if (jeedom.cmd.normalizeName('#name#') == 'on'){
        if (debug#id#) console.log('| normalizeName : on');
        if ('#generic_type#'.indexOf('ENERGY') !== -1) icone#id# = '<i class="icon jeedomapp-prise"></i>'
        else if ('#generic_type#'.indexOf('HEATING') !== -1) icone#id# = '<i class="icon techno-heating3"></i>'
        else if ('#generic_type#'.indexOf('MEDIA') !== -1) icone#id# = '<i class="fas fa-tv"></i>'
        else if ('#generic_type#'.indexOf('LOCK') !== -1) {
          icone#id# = '<i class="fas fa-lock"></i>'
          texteIfOn#id# = 'Ouvert'
          texteIfOff#id# = 'Fermé'
        }
        else icone#id# = '<i class="fas fa-lightbulb"></i>'
      }
      else
      {
        if (debug#id#) console.log('| Not normalizeName');
        if ('#generic_type#'.indexOf('ENERGY') !== -1) icone#id# = '<i class="icon jeedomapp-prise icon_orange"></i>'
        else if ('#generic_type#'.indexOf('HEATING') !== -1) icone#id# = '<i class="icon techno-heating3 icon_orange"></i>'
        else if ('#generic_type#'.indexOf('MEDIA') !== -1) icone#id# = '<i class="fas fa-tv icon_orange"></i>'
        else if ('#generic_type#'.indexOf('LOCK') !== -1) {
          icone#id# = '<i class="fas fa-lock icon_orange"></i>'
          texteIfOn#id# = 'Ouvert'
          texteIfOff#id# = 'Fermé'
        }
        else icone#id# = '<i class="fas fa-lightbulb icon_orange"></i>'
      }
    }
    
    if (debug#id#) console.log('| icone : ' + icone#id#);
    texteIfOn#id# = ('#texteIfOn#' != '#' + 'texteIfOn#') ? "#texteIfOn#" : texteIfOn#id#;
    texteIfOff#id# = ('#texteIfOff#' != '#' + 'texteIfOff#') ? "#texteIfOff#" : texteIfOff#id#;
    radiusIcone#id# = radiusIcone#id# > 50 ? 50 : radiusIcone#id#;
    if (jeedom.cmd.normalizeName('#name#') == 'on') cmd#id#.find('.state#id#').empty().append(texteIfOff#id#)
    if (jeedom.cmd.normalizeName('#name#') == 'off') cmd#id#.find('.state#id#').empty().append(texteIfOn#id#)
    cmd#id#.find('.iconCmd').empty().append(icone#id#)
    document.documentElement.style.setProperty('--width#id#', width#id#+'px');
    document.documentElement.style.setProperty('--border-radius-icone#id#', radiusIcone#id#+'%');
    if (jeedom.widgets.getThemeImg("Light","Dark") == "Light") {
      document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
      document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
    }
    else {
      document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
      document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
    }
    document.documentElement.style.setProperty('--border-radius-tuile#id#', radiusTuile#id#+'px');
    cmd#id#.find('#titre#id#').empty().append(title#id#)
    if (debug#id#) console.log('└───────────────────────────')
    
    //jeedom.cmd.addUpdateFunction('#id#',function(_options) {
    jeedom.cmd.update['#id#'] = function(_options){
      //cmd#id#.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (debug#id#) console.log('widget (id:#id#) jeedom.cmd.update [' + jeedom.cmd.normalizeName('#name#') + '] : _options.display_value = ' + _options.display_value)
      if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
        if (jeedom.cmd.normalizeName('#name#') == 'on') cmd#id#.hide()
        else cmd#id#.show()
      } else {
        if (jeedom.cmd.normalizeName('#name#') == 'off') cmd#id#.hide()
        else cmd#id#.show()
      }
    }
    //);
    //jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#'}])
    //    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate: '#valueDate#', collectDate: '#collectDate#'});
    jeedom.cmd.update['#id#']({display_value:'#state#'});
    $('.cmd[data-cmd_uid=#uid#] .execute').off().on('click', function() {
      jeedom.cmd.execute({id: '#id#'})
    })
    
    $('body').on('changeThemeEvent', function (event, theme) {
      let cmd = $('.cmd[data-cmd_id=#id#]')
      if (theme == "Light") {
        if (debug#id#) console.log('widget (id:#id#) : Passage en Light')
        document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
        document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
      }
      else {
        if (debug#id#) console.log('widget (id:#id#) : Passage en Dark')
        document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
        document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
      }
    })
  </script>
  <style>
    :root {
      --width#id#: 170px;
      --bg-icone#id#: var(--btn-default-color);
      --border-radius-icone#id# : 50%;
      --border-radius-tuile#id# : 15px;
      --bg-tuile#id#: var(--form-bg-color);
    }
    .tuile#id# {
      background-color: var(--bg-tuile#id#);
      padding: 10px;
      border-radius: var(--border-radius-tuile#id#);
      margin-bottom: 0;
      display: flex;
      width: var(--width#id#);
      min-width: 50px;
    }
    .rounded-circle#id# {
      border-radius: var(--border-radius-icone#id#);
      width: 50px;
      height: 50px;
      cursor: pointer !important;
      text-align: center;
    }
    .bg-icone#id# {
      background-color: var(--bg-icone#id#);
      
    }
    .tuile#id# i:first-child {
      line-height: 50px;
      font-size: 24px;
      color: var(--sc-lightTxt-color);
    }
    .margin-left#id# {
      margin-left: 10px;
    }
    .align-items-center#id# {
      align-items: center;
    }
    .d-flex#id# {
      display: flex;
    }
    .margin-bottom#id# {
      margin-bottom: 0;
      text-align: left;
    }
    .h3-#id# {
      font-size: 18px;
      margin-top: 0;
      line-height: 18px;
      color: var(--link-color);
    }
    .font-color#id# {
      color: var(--txt-color);
    }
  </style>
</div>

La version info en binaire:

<div class="cmd cmd-widget reportModeHidden #history#" data-type="info" data-subtype="binary" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
  <!--
    Création : @PhpVarious
    Date : 22/03/2023
    https://community.jeedom.com/t/comment-remonter-etat-dun-toggle-dans-un-virtuel/104185
  -->
  <div class="tuile#id# align-items-center#id#">
    <span class="iconCmd bg-icone#id# rounded-circle#id# execute"></span>
    <div class="margin-left#id#">
      <div class="d-flex#id# align-items-center#id#">
        <div class="margin-bottom#id# h3-#id#" id="titre#id#"></div>
      </div>
      <p class="font-color#id# margin-bottom#id# state#id#"></p>
    </div>
  </div>
  <template>
    <div>widthTuile : Largueur de la tuile [Défaut : 170]</div>
    <div>radiusTuile : Arrondi de la tuile [Défaut : 15]</div>
    <div>titleTuile : Titre du widget [Défaut : le nom de la commande état]</div>
    <div>texteIfOn : Texte affiché si Etat = 1 [Défaut : Allumé | accepte une valeur vide]</div>
    <div>texteIfOff : Texte affiché si Etat = 0 [Défaut : Éteint| accepte une valeur vide]</div>
    <div>radiusIcone : Arrondi de l'icone [Défaut : 50 (rond)]</div>
    <div>darkBackground : couleur de fond en thème Dark [Défaut : rgb(47, 47, 47)]</div>
    <div>lightBackground : couleur de fond en thème Light [Défaut : rgb(199 199 199)]</div>
    <div>darkBackgroundIcone : couleur de fond de l'icone en thème Dark [Défaut : rgb(69, 70, 72)]</div>
    <div>lightBackgroundIcone : couleur de fond de l'icone en thème Light [Défaut : rgb(100, 100, 100)]</div>
    <div>colorIconeIfOn : couleur de l'icone si Etat = 1</div>
    <div>colorIconeIfOff : couleur de l'icone si Etat = 0</div>
    <div>-------------------------------------------------</div>
    <div>iconeIfOn : icone à afficher dans le widget si Etat = 1 [ ex : icon jeedomapp-prise ]</div>
    <div>iconeIfOff : icone à afficher dans le widget si Etat = 0 [ ex : icon jeedomapp-prise ]</div>
    <div>si ces paramètres ne sont pas précisés, le widget affichera l'icône affecté a la commande.</div>
    <div>et si il n'y a pas d'icône affecté a la commande, le widget affichera un icone prédéfini en fonction du generic type.</div>
  </template>
  <script>
    var debug#id# = ('#debug#' != '#' + 'debug#' && '#debug#' == 1) ? true : false;
    var cmd#id# = $('.cmd[data-cmd_id=#id#]')
    var width#id# = is_numeric('#widthTuile#') ? parseFloat('#widthTuile#'):170;
    var title#id# = ('#titleTuile#' != '#' + 'titleTuile#') ? "#titleTuile#" : "#name#";
    var radiusIcone#id# = is_numeric('#radiusIcone#') ? parseFloat('#radiusIcone#'):50;
    var radiusTuile#id# = is_numeric('#radiusTuile#') ? parseFloat('#radiusTuile#'):15;
    var darkBackground#id# = ('#darkBackground#' != '#' + 'darkBackground#') ? '#darkBackground#' : 'rgb(47, 47, 47)';
    var lightBackground#id# = ('#lightBackground#' != '#' + 'lightBackground#') ? '#lightBackground#' : 'rgb(199 199 199)';
    var darkBackgroundIcone#id# = ('#darkBackgroundIcone#' != '#' + 'darkBackgroundIcone#') ? "#darkBackgroundIcone#" : 'rgb(69, 70, 72)';
    var lightBackgroundIcone#id# = ('#lightBackgroundIcone#' != '#' + 'lightBackgroundIcone#') ? "#lightBackgroundIcone#" : 'rgb(100, 100, 100)';
    var theme#id# = jeedom.widgets.getThemeImg("Light","Dark")
    var icone#id# = ('#icone#' != '#' + 'icone#') ? '<i class="#icone#"></i>' : '#name_display#';
    var iconeIfOn#id# = ('#iconeIfOn#' != '#' + 'iconeIfOn#') ? '<i class="#iconeIfOn#"></i>' : '#name_display#';
    var iconeIfOff#id# = ('#iconeIfOff#' != '#' + 'iconeIfOff#') ? '<i class="#iconeIfOff#"></i>' : '#name_display#';
    if ('#colorIconeIfOn#' != '#' + 'colorIconeIfOn#') document.documentElement.style.setProperty('--colorIconeIfOn#id#', '#colorIconeIfOn#');
    if ('#colorIconeIfOff#' != '#' + 'colorIconeIfOff#') document.documentElement.style.setProperty('--colorIconeIfOff#id#', '#colorIconeIfOff#');
    var texteIfOn#id# = 'Allumé'
    var texteIfOff#id# = 'Éteint'
    var themeJeedom#id# = "light"
    
    if (document.body.hasAttribute('data-theme')) {
      if (document.body.getAttribute('data-theme').endsWith('Dark')) themeJeedom#id# = "dark";
    }
    else if (isset(jeedom.theme.currentTheme)) {
      console.log('jeedom.theme.currentTheme')
      if (jeedom.theme.currentTheme.endsWith('Dark')) themeJeedom#id# = "dark";
    }
    
    if (debug#id#) console.log('┌─────────────────── Chargement Widget (cmd:#id#) en debug')
    if (debug#id#) console.log('| generictype : #generic_type#');
    if(iconeIfOn#id#.indexOf('<i ') === -1) {
      if (debug#id#) console.log('| icone [on] absent');
      if ('#generic_type#'.indexOf('ENERGY_STATE') !== -1) iconeIfOn#id# = '<i class="icon jeedomapp-prise"></i>'
      else if ('#generic_type#'.indexOf('THERMOSTAT_STATE') !== -1) iconeIfOn#id# = '<i class="icon jeedom-pilote-conf"></i>'
      else if ('#generic_type#'.indexOf('MEDIA_STATE') !== -1) iconeIfOn#id# = '<i class="fas fa-tv"></i>'
      else if ('#generic_type#'.indexOf('LOCK_STATE') !== -1) {
        iconeIfOn#id# = '<i class="fas fa-lock"></i>'
        texteIfOn#id# = 'Ouvert'
        texteIfOff#id# = 'Fermé'
      }
      else if ('#generic_type#'.indexOf('OPENING') !== -1) {
        iconeIfOn#id# = '<i class="icon jeedom-porte-ferme"></i>'
        texteIfOn#id# = 'Ouverte'
        texteIfOff#id# = 'Fermée'
      }
      else iconeIfOn#id# = '<i class="icon jeedom-lumiere-on"></i>'
    }
    if(iconeIfOff#id#.indexOf('<i ') === -1) {
      if (debug#id#) console.log('| icone [off] absent');
      if ('#generic_type#'.indexOf('ENERGY_STATE') !== -1) iconeIfOff#id# = '<i class="icon jeedomapp-prise"></i>'
      else if ('#generic_type#'.indexOf('THERMOSTAT_STATE') !== -1) iconeIfOff#id# = '<i class="icon jeedom-pilote-off"></i>'
      else if ('#generic_type#'.indexOf('MEDIA_STATE') !== -1) iconeIfOff#id# = '<i class="fas fa-tv"></i>'
      else if ('#generic_type#'.indexOf('LOCK_STATE') !== -1) {
        iconeIfOff#id# = '<i class="fas fa-lock-open"></i>'
        texteIfOn#id# = 'Ouvert'
        texteIfOff#id# = 'Fermé'
      }
      else if ('#generic_type#'.indexOf('OPENING') !== -1) {
        iconeIfOff#id# = '<i class="icon jeedom-porte-ouverte"></i>'
        texteIfOn#id# = 'Ouverte'
        texteIfOff#id# = 'Fermée'
      }
      else iconeIfOff#id# = '<i class="icon jeedom-lumiere-off "></i>'
    }
    
    if (debug#id#) console.log('| icone [on] : ' + iconeIfOn#id#);
    if (debug#id#) console.log('| icone [off] : ' + iconeIfOff#id#);
    texteIfOn#id# = ('#texteIfOn#' != '#' + 'texteIfOn#') ? "#texteIfOn#" : texteIfOn#id#;
    texteIfOff#id# = ('#texteIfOff#' != '#' + 'texteIfOff#') ? "#texteIfOff#" : texteIfOff#id#;
    radiusIcone#id# = radiusIcone#id# > 50 ? 50 : radiusIcone#id#;
    document.documentElement.style.setProperty('--width#id#', width#id#+'px');
    document.documentElement.style.setProperty('--border-radius-icone#id#', radiusIcone#id#+'%');
    if (jeedom.widgets.getThemeImg("Light","Dark") == "Light") {
      document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
      document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
    }
    else {
      document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
      document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
    }
    document.documentElement.style.setProperty('--border-radius-tuile#id#', radiusTuile#id#+'px');
    cmd#id#.find('#titre#id#').empty().append(title#id#)
    if (debug#id#) console.log('└───────────────────────────')
    
    jeedom.cmd.update['#id#'] = function(_options){
      cmd#id#.attr('title','Date de valeur : '+_options.valueDate+'<br/>Date de collecte : '+_options.collectDate)
      if (debug#id#) console.log('widget (id:#id#) jeedom.cmd.update [#name#] : _options.display_value = ' + _options.display_value)
      if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
        cmd#id#.find('.state#id#').empty().append(texteIfOn#id#)
        cmd#id#.find('.iconCmd').removeClass('color-off#id#').addClass('color-on#id#')
        cmd#id#.find('.iconCmd').empty().append(iconeIfOn#id#)
      } else {
        cmd#id#.find('.state#id#').empty().append(texteIfOff#id#)
         cmd#id#.find('.iconCmd').removeClass('color-on#id#').addClass('color-off#id#')
        cmd#id#.find('.iconCmd').empty().append(iconeIfOff#id#)
      }
      
      if (themeJeedom#id# == 'light') changeTheme#id#()
        else changeTheme#id#('Dark')
    }
    
    jeedom.cmd.update['#id#']({display_value:'#state#',valueDate: '#valueDate#', collectDate: '#collectDate#'});
    
    $('body').on('changeThemeEvent', function (event, theme) {
      if (debug#id#) console.log('body on changeThemeEvent : ' + theme)
      if (theme.endsWith('Dark')) changeTheme#id#('Dark')
      else changeTheme#id#()
    })
    
    /* Changement Thème */
    function changeTheme#id#(theme='Light'){
      if (theme == 'Light')
      {
        if (debug#id#) console.log('widget (id:#id#) : Passage en Light')
        document.documentElement.style.setProperty('--bg-tuile#id#', lightBackground#id#);
        document.documentElement.style.setProperty('--bg-icone#id#', lightBackgroundIcone#id#);
      }
      else
      {
        if (debug#id#) console.log('widget (id:#id#) : Passage en Dark')
        document.documentElement.style.setProperty('--bg-tuile#id#', darkBackground#id#);
        document.documentElement.style.setProperty('--bg-icone#id#', darkBackgroundIcone#id#);
      }
    }
  </script>
  <style>
    :root {
      --width#id#: 170px;
      --bg-icone#id#: var(--btn-default-color);
      --border-radius-icone#id# : 50%;
      --border-radius-tuile#id# : 15px;
      --bg-tuile#id#: var(--form-bg-color);
      --colorIconeIfOn#id# : var(--lb-yellow-color);
      --colorIconeIfOff#id# : var(--sc-lightTxt-color);
    }
    .tuile#id# {
      background-color: var(--bg-tuile#id#);
      padding: 10px;
      border-radius: var(--border-radius-tuile#id#);
      margin-bottom: 0;
      display: flex;
      width: var(--width#id#);
      min-width: 150px;
    }
    .rounded-circle#id# {
      border-radius: var(--border-radius-icone#id#);
      width: 50px;
      height: 50px;
      text-align: center;
    }
    .bg-icone#id# {
      background-color: var(--bg-icone#id#);
      
    }
    .tuile#id# i:first-child {
      line-height: 50px;
      font-size: 24px;
      /* color: var(--sc-lightTxt-color);*/
    }
    .margin-left#id# {
      margin-left: 10px;
    }
    .align-items-center#id# {
      align-items: center;
    }
    .d-flex#id# {
      display: flex;
    }
    .margin-bottom#id# {
      margin-bottom: 0;
      text-align: left;
    }
    .h3-#id# {
      font-size: 18px;
      margin-top: 0;
      line-height: 18px;
      color: var(--link-color);
    }
    .font-color#id# {
      color: var(--txt-color);
    }
    .color-on#id# i {
      color: var(--colorIconeIfOn#id#);
    }
    .color-off#id# i {
      color: var(--colorIconeIfOff#id#);
    }
  </style>
</div>

[rjcb]

Je ne comprends pas.

J’ai fais ceci et cela fonctionne maintenant. Je n’ai pas trouvé la raison