Partage Widget ouvert à contribution

[nak]

Bonjour,

Un modeste petit partage d’un widget de bouton.

<i--widget.action.other.Neumorphic vert.html
                                   par NAK
                                   07/07/2020-->

<div style="margin-top:5px;" 
     class="cmd cmd-widget reportModeHidden" 
     data-type="action" 
     data-subtype="other" 
     data-template="default" 
     data-cmd_id="#id#" 
     data-cmd_uid="#uid#" 
     data-version="#version#" 
     data-eqLogic_id="#eqLogic_id#">
  
    <div class="content-xs">
    
        <a class="action" 
       
           style="border-radius: 2px;
			
                background: linear-gradient(145deg, #9fc87e, #bdee96);
                box-shadow:  2px 2px 3px #96bd77, 
                             -2px -2px 3px #ccffa1;

              
                  margin:5px;line-height:25px; padding : 5px 10px 5px 10px; 
              
              text-align:center;">#name_display#</a>
  </div>
  
    <script>
    $('.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/>');
    }
    if("#name#" != '#name_display#'){
      $('.cmd[data-cmd_uid=#uid#]:last .action').attr('title',"#name#")
    }
 
    </script>
</div>

En espérant que cela vous fait plaisir.
Cordialement

[supradolph]

Mais pourquoi afficher on et off et pas uniquement celui qui t’intéresse en fonction du statut (comme light) ?
Et tant qu’à faire avoir la même largeur de bouton sur les deux.

[nak]

Bonjour,
c’est avec plaisire que je recois tes modifs de code et les intégreraient, je suis un debutant et ouvert a tous les consiles et bout de code en tout cas c’est ouvert.
Cordialemnt et merci encore de ton intérêt.

[nak]

@supradolph

Mais pourquoi afficher on et off et pas uniquement celui qui t’intéresse en fonction du statut (comme light) ?

Honnetement je ne comprend pas ce que tu veux dire par cette phrase, en fontion des statuts comme light

je te joint la photo du virtuel que j’ai utiliser ici que veux tu entendre par light

c’est un partage ouvert.
Concernant la taille du bouton il varie automatiquement celon le nombre de caractère, tu peux mettre allumer ou éteint et si par hasard tu souhaite l’utiliser pour monter et descendre le rideau roulant de tes fenêtre tu pourra mètre monter le rideau ou descendre le rideau.
cela répond à ton autre question « pourquoi les boutons n’ont pas la même taille.
Maintenant si tu as une proposition, il ne faut surtout pas hésité à partager pour que les copains en profite, vu que tu as dans ton profile tu marque que tu métrise 6 langages informatique.
Finalement je ne te cache pas qu’une multiplication des réactions comme la tienne ne pourra que dégouter des débutant comme c’est mon cas à partager leur productions (la beauté est dans les yeux qui regarde et non pas dans la chose regardé) comme disait le philosophe de mon petit patelin.
TRES CORDIALEMENT

[supradolph]

Mon message n’est aucunement pour te décourager. Au contraire il était plus pour pointer du doigt les petites améliorations à apporter. Et oui je maîtrise différents langages parce que je suis un ancien développeur et que ce genre de trucs me plaisaient. Je pourrais te macher le travail en te donnant le code. Alors oui je vais sûrement faire en 30min ce que tu prendra peut être 4h la première fois à faire. Mais tu n’en tirera pas la même satisfaction. Et puis dans l’état c’est ton travail et il fonctionne tu as déjà de quoi en être fiers. Tu peux t’en contenter ou regarder comment est codé le widget light (la lumière qui n’a qu’un seul bouton en fonction du statut allumée ou éteinte).
Pour la largeur il suffit d’appliquer une largeur (width) fixe.

[nak]

Bonjour,
merci de ta réponse peut tu me donner le liens de la widget light stp
Cordialement
NB: J’adore ton plug in thermoAlternateView et l’utilise

[supradolph]

Bonjour,

Si tu es en Jeedom V4 le code se trouve dans Outils > Widgets > Code > Dashboard > cmd.action.other.light

Ce qu’il faut retenir de ce bout de code c’est que l’icône affiché (on ou off) dépend de l’état de la lumière. Pour ne pas avoir de doublon, le bouton on est masqué si l’état est on et inversement.

[nak]

Bonjour
le problem est qui je n’ai pas le code de ce widget et serai ravis si tu pourras me l’envoyer
Cordialement

[supradolph]

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center>
        <span class='cmdName' style="font-weight: bold;font-size : 12px;display: none;">#valueName#</span>
        <span style="font-size: 3em;font-weight: bold;margin-top: 5px;" class="action iconCmd#uid#"></span>
    </center>
    <script>
        if ('#displayName#' == 1 || '#displayName#' == '1') {
            $('.cmd[data-cmd_uid=#uid#] .cmdName').show();
        }
        $('.iconCmd#uid#').empty();
        if ('#state#' == '1' || '#state#' == 1 || '#state#' == '99' || '#state#' == 99 || '#state#' == 'on') {
            $('.iconCmd#uid#').append('<i class="icon jeedom-lumiere-on"></i>');
            if (jeedom.cmd.normalizeName('#name#') == 'on') {
                $('.cmd[data-cmd_uid=#uid#]').hide();
            }
        } else {
            $('.iconCmd#uid#').append('<i class="icon jeedom-lumiere-off"></i>');
            if (jeedom.cmd.normalizeName('#name#') == 'off') {
                $('.cmd[data-cmd_uid=#uid#]').hide();
            }
        }
        $('.cmd[data-cmd_uid=#uid#] .action').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>

[nak]

Merci de ta rapidité de réponse

ai je commis une ereure dans mon vertuel?
cordialement

[supradolph]

Pas besoin de saisir « Valeur de l’information » ni d’afficher l’« Etat »

[nak]

Bonjour et un bonne Année 2021
J’ai suivi ton Virtuel, avec la widget lumière mais quand je clique sur la lumière allumé sa ne s’atteint pas et vis versa.

ca viens de quoi a ton avis?
tres Cordialement

[supradolph]

J’ai fait un test et ça ne fonctionne qu’en actualisant la page et pas en changeant de consigne… Peut-être un reste d’un essai en V3 qui avait été migré. Je regarde ça dès que j’ai 5min pour corriger le code. Désolé pour la fausse piste.

EDIT : Voilà le code

<div style="width:90px;min-height:40px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other"
    data-cmd_id="#id#" data-cmd_uid="#uid#">
  
  
  <div class="title ">
    <div class="cmdName"style="#hideCmdName#;">#valueName#</div>
  </div>
  <div class="content-sm ">
    <span class="iconCmd"></span>
  </div>

    <script>
        jeedom.cmd.update['#id#'] = function (_options) {
            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[data-cmd_id=#id#]').hide();
                } else {
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon_yellow icon jeedom-lumiere-on"></i>');
                }
            } else {
                if (jeedom.cmd.normalizeName('#name#') == 'off') {
                    $('.cmd[data-cmd_id=#id#]').hide();
                } else {
                    $('.cmd[data-cmd_id=#id#]').show();
                    $('.cmd[data-cmd_id=#id#] .iconCmd').empty().append('<i class="icon jeedom-lumiere-off"></i>');
                }
            }
        }
        jeedom.cmd.update['#id#']({
            display_value: '#state#'
        });
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({
                id: '#id#'
            });
        });
    </script>
</div>

[nak]

Bonjour, merci de ta vitesse de reponse ca marche a merville, je vais essayer a le metrre en application sur un de model de mes bouton.
Cordialement