Widget sur l'action de la modale utilisant l'information d'un equipement

Bonjour,
Est ce qu’il y a un moyen de faire un widget de l’action qui permet de déclencher la modale d’un clink
En fait, je voudrais que l’icone de cette action puisse être différente en fonction de l’état d’un de mes équipements.
Je cherche un moyen de créer mon propre widget et de l’appliquer a cet équipement, mais je ne vois pas comment aller chercher l’information.

Merci pour vos idées

Un widget n’est qu’un décors particulier d’une commande,
a mon avis il n’est pas évident, peut être que je me trompe, d’agir ainsi …
Je pense que le passage dans un script te laissera plus de liberté.

Bonsoir @pascal.e ,

Regarde du coté du plugin « tools » de @ZygOm4t1k qui peut être peu faire ton affaire.

ok, je vais essayer de regarder, soit coté script, soit le plugin « tools » que je ne connais pas, je posterais si je trouve qqchose, si je ne poste pas, c’est que je cherche toujours :slight_smile:

bonjour
en faite dit autrement
un widget info qui ouvre un modale.
(créé ouverture modale « perso » dans le widget info)

ou exécute sur id clink

ou une action clynk reprenant l’état d’une info
(modification du widget clynk en reprenant l’info « api js » de ton etat)

en param avancé « #id_etat# » de ton etat
et update, exécute sur #id_etat#’
une fois validé
dans le script qu’il modif data-cmd_id=
(pour l’actu sans raffraichir ta page).

tous ça a condition que ton action et etat ne soit pas sur la même page sinon encore une autre modif (j’ai laissé sur un sujet).

@ajja17orange c’est tout a fait ca, un widget info qui ouvre sur un modale
C’est pour palier au manque de widget des commandes « Liste »,
ca me permettrait d’avoir la liste des commandes dans la modale, et d’avoir un widget qui represente qqchose plutot que juste un nom ou une photo statique pour l’ouverture de la modale.

Par contre, est ce que tu pourrais me detailler un peu plus ton idée, je ne suis pas sur de l’avoir comprise.
Merci

oula maintenant on part sur liste !

vu que c’est aussi faisable.
même si en v4 j’ai pas tous trifouiller.
et je vois pas trop l’intérêt de liste là

donc avant de t’embrouiller et moi avec :grinning:

on part sur l’info ?
si oui partir sur

compare cette solution à celle fourni par jeedom (widget info numérique « highchart » click dialog historique)

ou exécute id clink (a tester)

Bon ben j’ai essayé, j’ai pas tout compris comment faire
Par contre, une liste de commande n’est pas éloigné de ce que je souhaite faire,
aujourd’hui jeedom n’a pas de possibilité toute faite de le faire dans la page des widgets, ca viendra je pense.
Aujourd’hui j’ai un virtuel Alarme qui peut prendre 3 valeurs (Off, Totale, Nuit),
Je voudrais juste quand je clique dessus, pour afficher dans une liste (combo box avec image) ou une modale affichange un design la possibilité de switcher sur une de 3 valeurs.

Je ne veux pas afficher sur mon designs les 3 valeurs possible pour un gain de place, d’où la modale ou la combo box.

fait un dessin

sinon je comprend :
une image off
si je clic dessus (modal, pop ip, …)
et un choix list

hors un choix list ne prend pas tant de place si on le trifouille

exemple pousser et non fini
info en dur pour l’instant « oui ou non »

toutes les couleurs changent

<div style="width: 120px;" class="cmd cmd-widget" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#"> 
  <div class="title #hide_name#">
    <div style="text-align: center;" class="cmdName">#name_display#</div>
  </div>
      <div class="select-style">
      <select class="selectCmd">#listValue#</select>
 </div>
     <style>
:root{
--background: black;
--radius:25px;  
--arrows-color: white;    
}       
.cmd[data-cmd_id="#id#"] .select-style {
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--background);
width: 66px;
height: 25px;
}
.cmd[data-cmd_id="#id#"] select { 
/*    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
background-image: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(115, 115, 115)'><polygon points='0,0 100,0 50,50'/></svg>) !important;
      linear-gradient(to bottom, transparent 0%,transparent 100%)!important;
      background-position: calc(100% - 25px)  !important;
*/
  background-image:
linear-gradient(45deg, transparent 50%, var(--arrows-color) 60%),
linear-gradient(135deg, var(--arrows-color) 40%, transparent 50%) !important;
  background-position:
calc(100% - 13px) 7px,
calc(100% - 5px) 7px,
100% 0!important;
  background-size:
8px 8px,
8px 8px!important;
  background-repeat: no-repeat!important;
  -webkit-appearance: none!important;
  -moz-appearance: none!important;
}
 .cmd[data-cmd_id="#id#"] .selectCmd {
   /*  --link-color:white; */
   --link-color:var(--arrows-color);
}    
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
if (_options.display_value == "Oui"  ) {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'green').css('--border-color', 'red')
$(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'white');
} else if (_options.display_value == "Non" ) {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'white').css('--border-color', 'rgb(255,128,0)'); 
$(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'rgb(255,128,0)'); 
} else  {
$(".cmd[data-cmd_id=#id#] .select-style").css('--background', 'black').css('--border-color', 'rgb(255,255,0)'); 
 $(".cmd[data-cmd_id=#id#] select").css('--arrows-color', 'rgb(255,255,0)'); 
}}
jeedom.cmd.update['#id#']({display_value: '#state#'});
$(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function () {
jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
});
</script>
</div>

je viens de relire tu veux une image !
je joue avec list en se moment je regarderai

Oui en fait, j’ai des images a la place du texte dans la combo.

j’ai regardé hier sans adaptation jeedom


mais c’est pas un input list " combo navigateur mobile"
exemple
http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/index.html

select n’offre pas cette possibilité.
de faire apparaître une image en liste.
la selection oui (exemple petite fleche jaune).

J’ai fait des screenshots de ce que je voudrais faire.
Je vois ca:
image
Je clique dessus et du coup, les actions possibles s’affichent (j’ai mis a droite mais ca pourrait etre en bas comme une combo box), il s’agit des options: Inactive, alarme Totale, et alarme mode nuit
image
Lorsque je selectionne une action par exemple Alarme Totale, je reviens juste sur l’affichage:
image

Je viens d’essayer avec le plugin Mode et les widgets, j’ai bien toutes les options en ligne en jouant sur l’option Disposition en tableau sur l’equipement, j’ai fait une ligne et 4 colonne, il faudrait que je puisse faire disparaitre les 3 dernieres colonnes en jouant sur les classes Css par exemple, mais dans l’option Disposition, il n’y a pas moyen de mettre du javascript :frowning:


c’est bien dommage

En fait, ce qui serait cool, c’est que dans la disposition, on est plus de choix que « Defaut » et « Tableau », un truc du genre « Menu »

Pas d’idée?

Bonjour, bon finalement je me suis mis au travail et j’ai publié ma solution dans le post suivant:

Si ca interresse qqun…

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.