[SALVIALF] Widget IconAction (action/defaut)

Bonjour,

J’ai repris le code d’une roue chromatique « farbtastic » justement :wink: en widget il y a quelques temps :
https://community.jeedom.com/t/farbtastic-is-not-a-function/4022/17?u=salvialf

Les fichiers complémentaires sont en lien sur le post juste au-dessus

Ah ben génial, je n’avais pas eu le temps de faire en widget, ça m’arrange bien ça !! Merci

Super !

Mais …

Effectivement my bad c’est dans la partie réservée aux devs désolé.

Je fais en sorte de remettre au propre et de partager plus tard dans la soirée :slight_smile:

Cool Merci Merci !

Il s’agissait donc d’un widget V3 qui nécessitait une petite mise à jour pour être fonctionnel en V4.

Je te remets le lien des fichiers partagé à l’époque par @rombautsdidier:

Le répertoire entier cmd.action.color.circle est à mettre dans le dossier data/customTemplates/dashboard/ à l’aide du plugin Jeexplorer.

Ensuite tu crées un widget code avec ce code:

<div class="colorCircle cmd cmd-widget" data-type="action" data-subtype="color" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
    <div class="action_colorpicker"></div>
  <style>
.colorCircle {
  width: 146px;
  height: 146px;
}
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 146px;
  height: 146px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 36px;
  left: 36px;
  width: 75px;
  height: 75px;
}
.farbtastic .wheel {
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/wheel.png) no-repeat;
  width: 146px;
  height: 146px;
}
.farbtastic .overlay {
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(data/customTemplates/dashboard/cmd.action.color.circle/marker.png) no-repeat;
    }
  </style>
    <script>
      jeedom.cmd.update['#id#'] = function(_options){
        $.include(['data/customTemplates/dashboard/cmd.action.color.circle/farbtastic.js'], function() {
            $('.cmd[data-cmd_id=#id#] .action_colorpicker').off();
            if ($('.cmd[data-cmd_id=#id#] .action_colorpicker').length > 0) {
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').farbtastic();
            	$.farbtastic($('.cmd[data-cmd_id=#id#] .action_colorpicker')).setColor((_options.display_value != '') ? _options.display_value.substring(0,7) : '#000000');
                $('.cmd[data-cmd_id=#id#] .action_colorpicker').on('mouseup', function() {
                    jeedom.cmd.execute({id: '#id#', value: {color: $.farbtastic($(this)).color}});
                });
            }
        });
      }
        jeedom.cmd.update['#id#']({display_value:'#state#'});
    </script>
</div>

Et voilà tu pourras sélectionner ce widget sur une commande Action/Couleur.

Merci !!!
J’attend mes modules Fibaro FGRGBW-422 et Qubino Micromodule variateur RGBW
et je teste.
Aurais tu un Virtuel de test ?

@Salvialf
Bonjour
Voici une copie du résultat du widget sur lampe Xiaomi Yeelight
image

J’aurais voulu plutôt ceci
image

J’imagine qu’il faut adapter le code HTML/CSS mais c’est hors de mes modestes compétences…
Peux tu me conseiller ? Merci

Ah oui y’a un problème là c’est pas normal cet affichage… Dans un virtuel c’est pareil ?

Je viens juste de passer en V4 je ne l’ai pas encore réinstallé ce widget… J’essayerai d’y jeter un œil ce weekend

1 « J'aime »

Merci
J’essaie avec un virtuel ce week-end
Bonne soirée

Bonjour

Meme problème avec un virtuel
Tu es mon seul espoir !!

Merci

1 « J'aime »

Salut,

Je viens d’ajouter ce widget en V4 et il se positionne parfaitement:
colorCircle

Je me demande si y’a pas eu un petit loupé dans le copier/coller du code chez toi ?! Tu peux aussi vérifier si tu as une erreur en mode dev du navigateur (F12 sous Chrome).

Edit: je t’ai préparé un package dashboard.zip.txt (21,7 Ko). Il faut enlever le .txt à la fin pour récupérer un *.zip et le dossier dashboard est à mettre dans data/customTemplates

Merci Merci !!! Cela fonctionne nickel !
image

Bonjour,
Je suis nouveau sur Jeedom. J’ai pour l’instant des ampoules yeelight.
J’ai réussi à les mettre sous jeedom (mis sur un raspberry) mais je trouve ça assez moche. J’ai vu qu’on pouvait mettre des widgets pour rendre ça plus joli.
Je suis tombé sur ce widget, iconaction.
D’après ce que j’ai compris avec un seul bouton, on peut faire on off et en plus l’image change derrière.
J’ai suivi la procédure. Voici les screenshot.
Avant j’avais un bouton ON, un bouton OFF. Maintenant je n’en ai plus qu’un seul et il ne fait que éteindre la lumière et l’image de la lampe ne change pas.
Je vous mets des screenshot pour mieux vous expliquer.
Je m’arrache les cheveux depuis un bon moment, j’espère que vous pourrez m’aider !

Voilà ce que ça donne sur le dashboard. J’ai qu’une seule image. Elle affiche ON, quand je clic dessus la lumière s’éteint, ça reste afficher on et ensuite plus rien ne se passe si je clique à nouveau dessus.
Si je rallume la lumière avec le curseur luminosité, l’image de la lumière me permet de l’éteindre à nouveau.
Merci de votre aide

Salut,

Vu le carré gris en rrière plan c’est la version V3 du widget sur une V4. Il faut supprimer tout ce qui concerne la V3 et le plugin widget et installer les fichiers V4:

ensuite rapatrier les commandes on et off dans un virtuel afin de les lier à une commande info/binaire.

Donc je dois forcément passer par le plugin virtuel pour réussir avec ce bouton qui allume ou éteint la lumière en fonction de son état ?

J’ai l’impression au vue des commandes mais j’ai survolé sur le tel alors je peux faire erreur.

Pour avoir une icône d’action qui change en fonction de l’état il faut que les commandes action se nomment on et off et qu’elles soient liées à une commande info binaire

J’ai bien deux commandes qui se nomment on et off mais je ne sais pas si elles sont liées à une commande info binaire… Comment fait on?
D’avance merci !

Il y a un exemple un peu plus haut (et des dizaines sur le forum :wink: )… En espérant que ça t’aide