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

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

De l'installation à l'utilisation venez discuter de JEEDOM au quotidien
Wedge34
Timide
Messages : 43
Inscription : 06 janv. 2018, 15:34
Localisation : Montpellier

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

Message par Wedge34 » 21 mai 2018, 17:34

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

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

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

Message par winhex » 21 mai 2018, 21:11

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)

Avatar de l’utilisateur
iPapy
Timide
Messages : 174
Inscription : 12 mars 2017, 16:58
Localisation : Bobigny

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

Message par iPapy » 27 oct. 2018, 11:40

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
Capture.JPG (83.78 Kio) Consulté 400 fois
-
Capture1.JPG
Capture1.JPG (11.48 Kio) Consulté 400 fois
-
Capture2.JPG
Capture2.JPG (11.57 Kio) Consulté 400 fois
Dernière édition par iPapy le 20 nov. 2018, 19:16, édité 4 fois.

bucley
Timide
Messages : 13
Inscription : 01 avr. 2018, 19:28

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

Message par bucley » 11 nov. 2018, 00:20

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

Avatar de l’utilisateur
iPapy
Timide
Messages : 174
Inscription : 12 mars 2017, 16:58
Localisation : Bobigny

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

Message par iPapy » 20 nov. 2018, 19:18

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
Capture5.JPG (12.96 Kio) Consulté 398 fois
*
Capture4.JPG
Capture4.JPG (12.91 Kio) Consulté 398 fois
-
Capture3.JPG
Capture3.JPG (67.59 Kio) Consulté 398 fois
Voici le code de mon Widget:

Image

<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
Actif
Messages : 3420
Inscription : 23 janv. 2015, 01:41

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

Message par winhex » 20 nov. 2018, 19:45

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)

Avatar de l’utilisateur
iPapy
Timide
Messages : 174
Inscription : 12 mars 2017, 16:58
Localisation : Bobigny

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

Message par iPapy » 20 nov. 2018, 20:00

Bonsoir Winhex,

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

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

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

Message par winhex » 20 nov. 2018, 20:12

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

Avatar de l’utilisateur
HollyFredD
Timide
Messages : 88
Inscription : 14 janv. 2018, 12:54

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

Message par HollyFredD » 24 déc. 2018, 18:40

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

Le Virtuel :
Image

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
Timide
Messages : 14
Inscription : 10 janv. 2019, 15:47

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

Message par LaurentBrun31 » 27 janv. 2019, 00:15

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
Timide
Messages : 14
Inscription : 10 janv. 2019, 15:47

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

Message par LaurentBrun31 » 27 janv. 2019, 12:05

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
Capture d’écran 2019-01-27 à 12.04.01.png (8.32 Kio) Consulté 199 fois
Capture d’écran 2019-01-27 à 12.03.52.png
Capture d’écran 2019-01-27 à 12.03.52.png (81.45 Kio) Consulté 199 fois

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

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

Message par winhex » 27 janv. 2019, 12:20

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

LaurentBrun31
Timide
Messages : 14
Inscription : 10 janv. 2019, 15:47

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

Message par LaurentBrun31 » 27 janv. 2019, 23:23

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

Jef73
Timide
Messages : 208
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 07 févr. 2019, 08:58

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
Timide
Messages : 208
Inscription : 27 déc. 2017, 10:41
Localisation : Nantes

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

Message par Jef73 » 07 févr. 2019, 09:11

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 :evil:
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 :o
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>

Répondre

Revenir vers « Utilisation »

Qui est en ligne ?

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