Mise en forme widget

drs · Avril 29, 2020, 7:38

Bonjour

Je cherche à positionner des images les unes à cotés des autres. Cela peut paraitre simple, mais je ne vois pas comment faire. J’ai, de plus, deux impératifs: utiliser un widget core (car je cherche à supprimer le plus possible des widgets CODE, et ne pas faire de tableau.

Alors voilà, j’ai un virtuel comme ceci:

Ce qui donne, sur le dashboard:

dash

Les icones sont les unes au-dessus des autres, et je voudrais les positionner sur une ligne (sans utiliser de tableau, car cette partie va être intégrée à un autre virtuel). A ce jour, voici mes widgets:

Le widget pour le ventilateur:

Le widget pour le 0:

Le widget pour le 1:

J’ai vu qu’il y avait la commande display:inline-block pour aligner les images, mais je ne sais pas comment l’intégrer correctement dans le chemin donné pour les images.

Merci d’avance de votre aide

(oui, je sais concernant les 0 et 1, les images ON et OFF sont les mêmes, mais cela est voulu)

drs · Avril 30, 2020, 6:59

Bonjour

Après recherches approfondies, des dizaines de tests, je pense toucher du doigt la solution, mais je n’y parviens pas…
Je dois avoir un problème de syntaxe, mais je ne trouve pas…
@Salvialf si tu passes par là…

Merci

Salvialf · Avril 30, 2020, 7:37

Salut @drs,

En agrandissant la tuile les icônes passent bien côté à côte non ? …mais elles sont trop espacées c’est ça ?

Le truc c’est que la div qui englobe tout ça a toujours une largeur minimale de 70px…

Plusieurs points:

Perso je configurerais plutôt le widget de cette manière car il s’agit d’images et non d’icônes:

image1400×551 35.7 KB

Effectivement avec 2 commandes il y a déjà un écart important entre les images donc avec 3 ce doit être pire :

C’est dû à cette largeur minimale imposée de 70px, du coup il est possible de forcer une largeur plus faible en personnalisation CSS avancée en récupérant l’id eqLogic (en cliquant sur le bouton Informations dans la configuration d’une des commandes par exemple) :

/*largeur minimale divs tuile*/
.cmd-widget[data-eqlogic_id="25"] {
  min-width:40px!important;
}

Est-ce que ça t’aide à parvenir au visuel que tu souhaites obtenir ?

drs · Avril 30, 2020, 8:57

Salut

Ce n’est pas que ça m’aide, c’est que j’obtiens exactement le résultat que je voulais

poele

Un ENORME merci (je savais que tu y arriverais)!!

Tant que j’y suis, j’ai un autre souci sur un autre widget, tu crois que je peux le mettre ici ou bien je crée un autre sujet?

Salvialf · Avril 30, 2020, 9:05

Vu le titre du sujet mets ici va…

Tiens ils me rappellent quelque chose ces boutons d’info du poêle

drs · Avril 30, 2020, 9:31

Oui, les boutons, c’est toi aussi il me semble, tu es mon mentor ici, tu le sais bien

Alors, mon deuxieme problème. J’ai un widget pour gérer mes lampes, et plutôt que de faire un curseur pour la luminosité, j’ai utilisé une liste avec 4 paliers:

ikea-dash ikea-dash2

J’ai deux soucis avec ce widget (il me semble crée par winhex à l’origine):

la liste doit changer de couleur selon la valeur, mais elle ne change que si on rafraîchit la page (pas uniquement le widget). Je pense qu’il doit s’agir d’un souci avec mon widget pour la V4.
le visu n’est pas le même pour le dashboard et le design. Sur le design, les listes sont plus longues que sur le dashboard, c’est pourtant le même widget:

Le code du widget est le suivant:

<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width: 45px;height: 20px;">
<!--    <span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</span> -->
    <select id="test" class="selectCmd#id#" style="position: relative;top:0px;font-weight: bold;color:#cmdColor#;background-color:white;border-radius: 0px;width: 45px;height: 20px;" value="#listValue#"></select>
    <script>
      var x = document.querySelectorAll(".selectCmd#id#");
     if('#state#' == 0 ){
 //      var x = document.querySelectorAll(".selectCmd#id#");
         x[0].setAttribute('style', 'background-color: black !important; position: relative;top:0px;font-weight: bold;color:white;border-radius: 0px;width: 45px;height: 22px;');
            };
     if('#state#' >= 1 && '#state#' <= 25 ){
         x[0].setAttribute('style', 'background-color: blue !important; position: relative;top:0px;font-weight: bold;color:white;border-radius: 0px;width: 45px;height: 22px;');
            };
if('#state#' >= 26 && '#state#' <= 50 ){
         x[0].setAttribute('style', 'background-color: green !important; position: relative;top:0px;font-weight: bold;color:white;border-radius: 0px;width: 45px;height: 22px;');
            };
if('#state#' >= 51 && '#state#' <= 75 ){
         x[0].setAttribute('style', 'background-color: orange !important; position: relative;top:0px;font-weight: bold;color:white;border-radius: 0px;width: 45px;height: 22px;');
            };
if('#state#' >= 76 && '#state#' <= 100 ){
         x[0].setAttribute('style', 'background-color: red !important; position: relative;top:0px;font-weight: bold;color:white;border-radius: 0px;width: 45px;height: 22px;');
            };
      $(".cmd[data-cmd_uid=#uid#] .selectCmd#id#").on('change' ,function () {
        jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
    });
</script>
</div>

Pour info, mon virtuel est disposé en forme de tableau:

Et la case LUMI, qui nous interresse, contient:

padding:2px;font-size: 8px;width: 50px;vertical-align: middle;height: 20px;

Voilà, voilà, j’espère que tu pourras y faire quelque chose…merci d’avance

drs · Avril 30, 2020, 10:08

En complément, j’ai tenté de reproduire ce que tu m’as donné sur un autre virtuel (l’écard entre les images), mais cela ne semble pas fonctionner. La différence, c’est que le premier était avec un widget action, et que le nouveau que je veux faire est un widget info. Il y a une différence?

/*largeur minimale divs tuile - PIHOLE*/
.cmd-widget[data-eqlogic_id="46"] {
  min-width:10px!important;
}

Est ce que le problème se situe au niveau du .cmd-widget ?

Salvialf · Avril 30, 2020, 1:38

Là c’est une autre paire de manche… surtout que j’ai peu joué avec les listes jusqu’ici !

J’y regarderai à l’avenir promis.

La boucle est bouclée, @ajja17orange(alias winhex) a été mon mentor sur l’ancien forum

drs · Avril 30, 2020, 2:22

OK merci. Et pour le second widget pour l’écartement des images, tu as une idée?

Salvialf · Avril 30, 2020, 2:55

A priori non c’est pareil.

tu n’aurais pas une marge transparente sur ton image ?

drs · Avril 30, 2020, 3:15

Bah non j’ai justement vérifié ça, je m’étais déjà fait avoir. J’ai même recrée le virtuel…
Dans ma personnalisation, j’ai ça:

/*largeur minimale divs tuile - POELE FAN*/
.cmd-widget[data-eqlogic_id="15"] {
  min-width:20px!important;
}
/*largeur minimale divs tuile - PIHOLE*/
.cmd-widget[data-eqlogic_id="46"] {
  min-width:10px!important;
}

.eqLogic-widget .tableCmdcss div.cmd-widget {
  min-width: unset;
}			
/* dashboard - Objects Left */
.div_object legend {
    text-align: left !important;
}
/* dashboard - title size */
.eqLogic-widget > .widget-name a {
    font-size: 10px !important;
  font-family: Verdana !important;
}

Et en plus, l’image est de…toi

CheckV CheckX

Pascal_Mauclere · Mai 1, 2020, 8:44

Bonsoir drs,
Ton widget lampe est sympa, peux-tu partager le petit inter à droite de salon et cuisine?
Merci

drs · Mai 2, 2020, 7:46

Bonjour

C’est juste un widget core avec des images:

Pascal_Mauclere · Mai 2, 2020, 10:41

Merci drs, je regarde.

Pascal_Mauclere · Mai 2, 2020, 10:57

j’abuse mais tu partagerais pas tes 2 images?
Merci d’avance

Salvialf · Mai 2, 2020, 11:01

Salut,

Il les a déjà partagé, tu peux les récupérer depuis son post en glisser/déposer ou ici si c’est plus facile :

Pascal_Mauclere · Mai 2, 2020, 11:26

Merci, désolé. Je le saurais maintenant.
Super boulot

drs · Mai 3, 2020, 7:16

@Salvialf
Bonjour du dimanche matin

Je viens de retester la perso avancée sur l’écard des icones et je confirme ce que je disais: cela fonctionne bien sur un virtuel de type action, mais pas sur un virtuel de type info, du moins chez moi (v4.0.52 sur Buster). Mais, bien évidemment, malgré mes recherches, je ne trouve pas pourquoi!

Edit: je complète avec un test supplémentaire. Je viens de créer un virtuel de type info/numérique et la perso fonctionne sur le widget (info/numerique/multistate).
Par contre pas moyen de le faire fonctionner sur un widget info/binaire

Salvialf · Mai 3, 2020, 8:41

@drs le chasseur de bugs !! Merci pour l’analyse

Effectivement après vérification l’id eqLogic ne remonte pas sur les commandes info/binaire :

Pour ces commandes on peut se baser sur leur id pour modifier la largeur mini:

/*largeur minimale info/binaire id_commande=33*/
.cmd-widget[data-cmd_id="33"] {
  min-width:30px!important;
}

Is this ok for you ?

drs · Mai 3, 2020, 11:10

Non, ça n’a pas l’air de fonctionner. Le ID correspond toujours au eqLogic_id?