[TUTO] DESIGN : Créer un bouton qui change d'apparence au clic

[Wedge34]

Est ce que c'est possible de mettre le tuto a jour avec des images... parce que franchement je suis perdu....

[winhex]

tous se que tu vois c'est de vieux script

soit avec le mode création simplifié (pas testé)
soit un déjà créé et à jour (regarde switch on/off) j'ai lu de bon retour
soit tu prends un widget du core jeedom avec icône que tu changes avec des images (dans config personnalisation)

[iPapy]

Bonjour à tous,

Alors moi j'ai exactement le même problème de dédoublement sur le Dashboard, je m'explique:
Je voudrais pouvoir rendre cliquable sur le dashboard l'action on/off sur une des 4 prises de ma multiprise Broadlink, donc je part sur un virtuel, comme sur le screenshot 1 en appliquant le Widget de la prise "Dio" jusque là pas de problème la prise apparait OFF ou ON suivant l'état mais elle n'est pas cliquable.

Ensuite si je rend visible les boutons ON et OFF en prenant le bouton core par défaut, j'ai bien mon virtuel qui s'affiche avec 2 boutons dessous ( ON & OFF ) et quand je clique sur l'un ou l'autre le statut de mon Widget change bien.

Capture.JPG (83.78 Kio) Consulté 2329 fois

-

Capture1.JPG (11.48 Kio) Consulté 2329 fois

-

Capture2.JPG (11.57 Kio) Consulté 2329 fois

[bucley]

Bonjour à tous

J'aimerai afficher un état qui est piloté par deux entrées X-24 (IPX), dont deux etats

Le but est d'avoir deux switchs sur ma porte de garage, un lorsque c'est fermé et l'autre quand c'est ouvert

On reste sur le même principe que ce tuto mais non plus avec deux commandes, mais deux infos

Merci d'avance

[iPapy]

Là ou ca se complique c'est quand je veux rendre le Widget cliquable, je désactive l'affichage de l'état et j'applique sur action ON et OFF le widget "prise_cmd" et là je me retrouve avec un affichage double comme sur le screenshot suivant:

Capture5.JPG (12.96 Kio) Consulté 2327 fois

*

Capture4.JPG (12.91 Kio) Consulté 2327 fois

-

Capture3.JPG (67.59 Kio) Consulté 2327 fois

Voici le code de mon Widget:



<div style="width:100px;min-height:20px;" class="cmd #history# tooltips cmd-widget cursor" data-type="info" data-subtype="numeric" data-cmd_id="#id#">
<center>
<span class='cmdName' style="font-weight: bold;font-size : 10px;"></span>
<span style="font-size: 2em;font-weight: bold;margin-top: 2px;" class="action" id="iconCmd#id#"></span>
</center>
<script>
if ('#state#' == '1' || '#state#' == 1) {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/images/dio_on.png" />');
if ('#name#'.toLowerCase().indexOf('on')>=0 ) {
$('.cmd[data-cmd_id=#id#]').hide();
}
} else {
$('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/images/dio_off.png" />');
if ('#name#'.toLowerCase().indexOf('off')>=0 ) {
$('.cmd[data-cmd_id=#id#]').hide();
}
}
$('.cmd[data-cmd_id=#id#] .action').off();
$('.cmd[data-cmd_id=#id#] .action').on('click', function() {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>

Merci d'avance pour votre aide car cela fait plusieurs jours que je cherche et malgré la lecture de ce post je n'arrive à rien.

[winhex]

oublie cette façon c'est vieux

tu as sur le market le switch on/off ou autres
tu le prends et tu t'en inspire

si tu vois #state# qui a ete remplacé par
_options.display_value

que tu ne vois pas
jeedom.cmd.update['#id#'] = function(_options){
ainsi qu'à la fin du script
jeedom.cmd.update
oublie c'est vieux (v1 ou v2)

[iPapy]

Bonsoir Winhex,

Ok je vais regarder cela de plus près demain. Merci pour ton aide

[winhex]

sinon ceux du core le permet
via icône (c'est dans la doc)
et si tu vas en personnalisation avancé de tes actions
tu copies
tu créés un widgets en changeant la ligne icone par celle de tes images

tu as aussi la fonction assistant création widget , qui je crois le permet

[HollyFredD]

Salut à tous,
j'ai un widget cliquable qui marche nickel, pas de souci pour moi ... cependant, j'ai une question pour faire evoluer ce widget et y intégrer un paramètre supplémentaire : offline/online

Aujourd'hui mes virtuels font comme quasi tout le monde : Etat + On/off
J'aimerais cependant considérer aussi le status online ou offline de mes équipements. L'idée étant d'afficher une image différente si l'équipement est débranché (ce qui, nous serons d'accord, est un poil différent de juste "éteint")

Sauriez-vous m'aiguiller sur cette piste ?

Mon widget aujourd'hui (exemple sur un design) :


Le Virtuel :


Le code du widget :

Code : Tout sélectionner

<div style="width:70px;height:70px;" class="cmd tooltips cmd-widget cursor" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
	<div class="row">
        <span style="vertical-align:middle;" class="action center-block 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('<img src="plugins/widget/core/images/ON-70px.png">');
                }
            } 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('<img src="plugins/widget/core/images/OFF-70px.png">');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>

[LaurentBrun31]

Bonjour, j ai le même problème de doublement d icônes avec le widget et les icônes du core... pourtant l’es renvoi sur Etat sont corrects il me semble... j ai tout essayé je comprend pas

[LaurentBrun31]

Bonjour voici les captures d'écran de mon problème de double icône.. .si quelqu'un peut m'aider à trouver d'ou vient le problème SVP ...

Capture d’écran 2019-01-27 à 12.04.01.png (8.32 Kio) Consulté 2128 fois

Capture d’écran 2019-01-27 à 12.03.52.png (81.45 Kio) Consulté 2128 fois

[winhex]

changé les noms d'action
allumer
et éteindre
par On
et Off

[LaurentBrun31]

Merci beaucoup j’aurai jamais pensé à ça... le diable se cache dans les details

[Jef73]

J'ai exactement le même problème que beaucoup : le dédoublement des icônes dès que j'applique un widget sur mes ampoules. Pourtant, les mêmes widgets fonctionnent bien pour les états des portes et fenêtres par exemple.
J'ai recopié EXACTEMENT la config et le code du widget cité en seconde page par "romanais", mais ça ne change rien.

Par contre, si j'applique le code qu'il a mis directement sur les commandes de mes virtuels par l'icône des petits engrenages de chaque commande et en activant la personnalisation, ça fonctionne (c'est la manip qu'il a cité d'ailleurs).

Pourquoi est-ce que ça ne fonctionne pas avec un widget général et qu'il faut aller sur chaque commande puis lui coller le code ? Est-ce que quelqu'un sait SVP ? Est-ce un bug spécifique à l'éclairage (puisque ça fonctionne bien pour les portes et fenêtres) ?

[Jef73]

Post spécifique pour expliquer en détail ce que j'ai fait pour que ça marche (ça peut servir à d'autres je pense) :

Pour personnaliser l'affichage d'un virtuel d'ampoule, les widgets personnalisés ne semblent pas fonctionner : quoi qu'on fasse, il y a un dédoublement de l'image car les deux s'affichent, au lieu que celle de l'état qui n'est pas en cours s'efface.

Contournement :
- Installer le widget "lightIMG", sinon copier des images PNG dans l'arborescence accessible à Jeedom et modifier les 2 lignes du code en correspondance.
- Aller dans la configuration du virtuel, onglet "Commandes",
- sur chacune des deux commandes de changement d'état du virtuel (On et Off), cocher la case affichage (mais pas sur la ligne d'info d'état),
- cliquer sur la petite icône avec les engrenages,
- dans l'onglet "Affichage", remettre l'affichage par défaut (par exemple "Light"),
- dans l'onglet "Code", cocher la case "Activer la personnalisation du widget",
- sur chacune des vues souhaitées (en principe Dashboard et Design), coller le code suivant :

Code : Tout sélectionner

<div style="width:90px;min-height:80px;" class="cmd tooltips cmd-widget cursor" data-type="info" data-subtype="numeric" data-cmd_id="#id#" data-cmd_uid="#uid#">
    <center>
        <span style="font-size: 3em;font-weight: bold;margin-top: 5px;" class="action iconCmd#uid#"></span>
    </center>
    <script>
        $('.iconCmd#uid#').empty();
        if ('#state#' == '1' || '#state#' == '99' || '#state#' == 'on') {
            $('.iconCmd#uid#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.lightIMG/on.png" />');
            if (jeedom.cmd.normalizeName('#name#') == 'on') {
                $('.cmd[data-cmd_uid=#uid#]').hide();
            }
        } else {
            $('.iconCmd#uid#').append('<img src="plugins/widget/core/template/dashboard/cmd.action.other.lightIMG/off.png" />');
            if (jeedom.cmd.normalizeName('#name#') == 'off') {
                $('.cmd[data-cmd_uid=#uid#]').hide();
            }
        }
        $('.cmd[data-cmd_uid=#uid#] .action').off();
        $('.cmd[data-cmd_uid=#uid#] .action').on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>

Edit : et bien en fait ça n'a pas fonctionné longtemps, une petite tentative d'ajout d'autre équipement dans le même virtuel et boom, je me retrouve à nouveau avec un doublement des ampoules
Et là, rien à faire, j'ai beau remettre le virtuel comme quand il fonctionnait, recopier le code du script, revalider, etc. ça ne veut plus fonctionner ! Seule solution, supprimer complètement le virtuel et le recréer entièrement à nouveau
C'est quand même pénible cette histoire



Du coup j'ai tenté un autre code et ça a l'air de mieux tenir le choc : j'ai tout simplement recopié le code d'origine de la petite icône intégrée à Jeedom et je n'ai modifié que les deux lignes avec les URL vers ladite icône, que j'ai remplacé par le chemin vers mes images PNG.
Voici donc le code que ça donne :

Code : Tout sélectionner

<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#" data-version="#version#">
    <center>
        <div style="font-weight: bold;font-size : 12px;#hideCmdName#">#valueName#</div>
        <span style="font-size: 2.5em;font-weight: bold;margin-top: 5px;" class="iconCmd"></span>
    </center>
    <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('<img src="plugins/widget/core/template/dashboard/cmd.action.other.lightIMG/on.png" />');
                }
            } 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('<img src="plugins/widget/core/template/dashboard/cmd.action.other.lightIMG/off.png" />');
                }
            }
        }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
        $('.cmd[data-cmd_uid=#uid#] .iconCmd').off().on('click', function () {
            jeedom.cmd.execute({id: '#id#'});
        });
    </script>
</div>