Widget Milight perso

Hello,

Je cherche a créer un widget Milight pour n’avoir qu’une seule zone a commander.
mes zones sont reparties dans 3 pièces différentes dont 2 chambres d’ado qui adorent changer les couleurs.
ils ont accès a leur dashboard respectif avec un widget milight d’origine (donc les 4 zones) et ca arrive souvent qu’ils changent la couleur, l’allumage ou l’intensité de la zone du voisin.c’est pas forcement drôle lors du passage au toilette a 3h du mat’ quand on est entrain de dormir.

j’ai récupéré les sources du widget d’origine mais je n’arrive pas a faire la « mise ne page » pour obtenir un widget fonctionnel

voici la source :

<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">
<h2 class="section-title">Ruban Led S.P.</h2>

<input type="range" id="slider-intens" value="0" min="1" max="100" style="margin-bottom: 175px;" onchange="milightSend2('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-v2-other" value="1" min="1" max="100" onchange="milightSend4('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-color2" value="1" min="1" max="255" onchange="milightSend3('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">

<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -267px;position: absolute;top: 15px;" value="S-" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedDown=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -212px;position: absolute;top: 15px;" value="M" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Mode=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -157px;position: absolute;top: 15px;" value="S+" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedUp=1&amp;Type=1');">
<input type="button" id="bouton2White" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -102px;position: absolute;top: 15px;" value="Blanc" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=undefined&amp;On=1&amp;White=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -48px;position: absolute;top: 15px;padding-left:5px;" value="Désyn" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;UnSync=1&amp;Type=1');">

<input type="button" id="milightC1" class="bouton2 milightC" style="margin-top: 115px;width: 50px;margin-left: -267px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',1,1,this, 1, 0, 0, 0, 0);">
<input type="button" id="milightC2" class="bouton2 milightC" style="margin-top: 115px;width: 50px;margin-left: -212px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',2,1,this, 1, 0, 0, 0, 0);">
<input type="button" id="milightC3" class="bouton2 milightC" style="margin-top: 115px;width: 50px;margin-left: -157px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',3,1,this, 1, 0, 0, 0, 0);">
<input type="button" id="milightC4" class="bouton2 milightC" style="margin-top: 115px;width: 50px;margin-left: -102px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',4,1,this, 1, 0, 0, 0, 0);">
<input type="button" id="milightC0" class="bouton2 milightC" style="margin-top: 115px;width: 50px;margin-left: -48px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',0,1,this, 1, 0, 0, 0, 0);">

<h2 class="section-title" style="margin-top: 150px;width: 50px;margin-left: 12px;position: absolute;top: 35px;">1</h2>
<h2 class="section-title" style="margin-top: 150px;width: 50px;margin-left: 68px;position: absolute;top: 35px;">2</h2>
<h2 class="section-title" style="margin-top: 150px;width: 50px;margin-left: 124px;position: absolute;top: 35px;">3</h2>
<h2 class="section-title" style="margin-top: 150px;width: 50px;margin-left: 178px;position: absolute;top: 35px;">4</h2>
<h2 class="section-title" style="margin-top: 150px;width: 50px;margin-left: 222px;position: absolute;top: 35px;">Tous</h2>

<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 50px;margin-left: -267px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',1,0,this, 1, 0, 0, 0, 0);">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 50px;margin-left: -212px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',2,0,this, 1, 0, 0, 0, 0);">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 50px;margin-left: -157px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',3,0,this, 1, 0, 0, 0, 0);">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 50px;margin-left: -102px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',4,0,this, 1, 0, 0, 0, 0);">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 50px;margin-left: -48px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',0,0,this, 1, 0, 0, 0, 0);">
</div>

Si je la copie dans un widget html sans rien toucher, ça marche comme celui d’origine.par contre si je retire les options qui ne m’interressent pas, le widget ne fonctionne plus du tout

des idées pour me faire avancer ?

merci

bonjour,
pour piloter la zone 1 par exemple, je nettoierais le code de cette façon, en enlevant les lignes repérées en rouge.

cdt

re !

merci de ta réponse
c’est la première chose que j’ai faite et voila le résultat

cela ne donne pas ça chez moi, attention de ne pas retirer de caractères essentiels sur les autres lignes
image

Ok j’avais // les lignes que je ne voulais pas mais visiblement ca ne marche pas comme ça :grin:

bon il ne reste plus que la mise en page pour bien tout centrer

merci

oui, un peu de cosmétique en css

c’est une autre histoire ça :grin:

je vais essayé d’étudier ça

pour ma culture perso : pourquoi le double slash n’a pas suffit a bypasser les lignes ?

voici un code avec mise en page css simple

<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">
<h2 class="section-title">Ruban Led S.P.</h2>

<input type="range" id="slider-intens" value="0" min="1" max="100" style="margin-bottom: 175px;" onchange="milightSend2('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-v2-other" value="1" min="1" max="100" onchange="milightSend4('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-color2" value="1" min="1" max="255" onchange="milightSend3('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">

<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -267px;position: absolute;top: 15px;" value="S-" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedDown=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -212px;position: absolute;top: 15px;" value="M" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Mode=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -157px;position: absolute;top: 15px;" value="S+" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedUp=1&amp;Type=1');">
<input type="button" id="bouton2White" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -102px;position: absolute;top: 15px;" value="Blanc" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=undefined&amp;On=1&amp;White=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -48px;position: absolute;top: 15px;padding-left:5px;" value="Désyn" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;UnSync=1&amp;Type=1');">

<input type="button" id="milightC1" class="bouton2 milightC" style="margin-top: 115px;width: 150px;margin-left: -197px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',1,1,this, 1, 0, 0, 0, 0);">

<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 150px;margin-left: -197px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',1,0,this, 1, 0, 0, 0, 0);">
</div>

image

j’ai aussi supprimé le libellé de la zone « 1 » puisque le widget peut avoir un titre explicite :slight_smile:

1 J'aime

j’étais en cours de modif mais tu as étais beaucoup plus rapide que moi :slight_smile:

un grand merci

1 J'aime

c’est nickel ça
je suis entrain de jouer avec le css après avoir supprimé le bouton désync (inutile aux enfants) :slight_smile:
par contre le deuxième curseur (inutile sur mon installation) il n’y a pas de code CSS pour faire remonter le curseur couleur, c’est pas trop gênant mais je ne comprends pas pourquoi

voila le final :

<div class="widget" data-bind="widget: true, css:{fillsize:fillSize}">
<h2 class="section-title">Chambre Lalie</h2>

<input type="range" id="slider-intens" value="0" min="1" max="100" style="margin-bottom: 175px;" onchange="milightSend2('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-color2" value="1" min="1" max="255" onchange="milightSend3('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">

<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -240px;position: absolute;top: 15px;" value="S-" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedDown=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -185px;position: absolute;top: 15px;" value="M" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Mode=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -130px;position: absolute;top: 15px;" value="S+" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;SpeedUp=1&amp;Type=1');">
<input type="button" id="bouton2White" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -75px;position: absolute;top: 15px;" value="Blanc" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=undefined&amp;On=1&amp;White=1&amp;Type=1');">


<input type="button" id="milightC1" class="bouton2 milightC" style="margin-top: 115px;width: 150px;margin-left: -207px;position: absolute;top: 35px;" value="|" onclick="milightSend('192.168.1.167',1,1,this, 1, 0, 0, 0, 0);">



<input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 150px;margin-left: -207px;position: absolute;top: 35px;" value="0" onclick="milightSend('192.168.1.167',1,0,this, 1, 0, 0, 0, 0);">
</div>

image

en fait, si tu fais un clic droit sur le slider pour inspecter l’élément, tu trouveras du css qui est directement rattaché à l’id slider-color2
tu peux modifier les attributs en les précisant dans la balise avec style="margin-top:40px"

<input type="range" id="slider-color2" style="margin-top:40px" value="1" min="1" max="255" onchange="milightSend3('192.168.1.167',undefined, this.value, 1, 0, 0, 0, 0);">

image

1 J'aime

Attention :
il y a encore quelques petits trucs a modifier dans le code sinon l’intensité, la couleur, le blanc et les modes se modifient sur l’ensemble des zones :

<input type="range" id="slider-intens" value="0" min="1" max="100" style="margin-bottom: 175px;" onchange="milightSend2('192.168.1.167',3,, this.value, 1, 0, 0, 0, 0);">
<input type="range" id="slider-color2" style="margin-top:40px;margin-left: -260px" value="1" min="1" max="255" onchange="milightSend3('192.168.1.167',3,, this.value, 1, 0, 0, 0, 0);">

Ajouter la zone concernée après l’IP (ici 3)

<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -240px;position: absolute;top: 15px;" value="S-" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=3&amp;SpeedDown=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -185px;position: absolute;top: 15px;" value="M" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=3&amp;Mode=1&amp;Type=1');">
<input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -130px;position: absolute;top: 15px;" value="S+" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=3&amp;SpeedUp=1&amp;Type=1');">
<input type="button" id="bouton2White" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -75px;position: absolute;top: 15px;" value="Blanc" onclick="newAJAXCommand('api.cgi?SetMiLight=192.168.1.167&amp;Channel=3&amp;On=1&amp;White=1&amp;Type=1');">

Ajouter Channel=3&amp; sur les lignes de code de contrôle de modes et blanc (la aussi zone 3)

1 J'aime

bon j’ai un sale problème de mise en page quand même :

image

ce qui bizarre, c’est quand je sauvegarde le code tout est ok et aprés une sauvegarde de l’ihm tout ce décale

bonjour,

En ajoutant le conteneur de classe widget , une marge de 5px (padding) est ajoutée autour des éléments.

voici le code complet du widget pour une mise en forme correcte :

let zone=1;
let ip="192.168.0.26";
return `
<div class="widget" >
    <h2 class="section-title"></h2>
    <input type="range" id="slider-intens" value="0" min="1" max="100" style="margin-bottom: 175px;" onchange="milightSend2('${ip}',${zone}, this.value, 1, 0, 0, 0, 0);">
    <input type="range" id="slider-color2" style="margin-top:40px;margin-left: -260px" value="1" min="1" max="255" onchange="milightSend3('${ip}',${zone}, this.value, 1, 0, 0, 0, 0);">

    <input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -240px;position: absolute;top: 15px;" value="S-" onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;SpeedDown=1&amp;Type=1');">
    <input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -185px;position: absolute;top: 15px;" value="M" onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;Mode=1&amp;Type=1');">
    <input type="button" id="bouton2" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -130px;position: absolute;top: 15px;" value="S+" onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;SpeedUp=1&amp;Type=1');">
    <input type="button" id="bouton2White" class="bouton2" style="margin-top: 85px;width: 50px;margin-left: -75px;position: absolute;top: 15px;" value="Blanc" onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;On=1&amp;White=1&amp;Type=1');">   

    <input type="button" id="milightC1" class="bouton2 milightC" style="margin-top: 115px;width: 150px;margin-left: -207px;position: absolute;top: 35px;" value="|" onclick="milightSend('${ip}',${zone},1,this, 1, 0, 0, 0, 0);">
    <input type="button" id="bouton2" class="bouton2" style="margin-top: 175px;width: 150px;margin-left: -207px;position: absolute;top: 35px;" value="0" onclick="milightSend('${ip}',${zone},0,this, 1, 0, 0, 0, 0);">
</div>    
`; 
  • j’ai mis l’ip et la zone en variable de manière à simplifier la personnalisation du widget.
    Il suffit donc de modifier la valeur de ip et zone , rien d’autre à modifier dans le code.

  • dans le code , j’ai corrigé les fonctions milightSend2 et milightSend3 où tu avais laissé une virgule en trop.

  • il vaut mieux mettre le titre sur le conteneur plutôt que dans le widget, afin d’éviter le texte trop à l’étroit.
    image image

1 J'aime

Merci fgtoul
Je vais tester ça dès que je rentre chez moi

A toi de jouer pour faire fonctionner ton ibox et tes ampoules avec l’ipx :grimacing:

Comme ça tu pourras tester ton widget :wink:

Tu es visiblement bien à l’aise avec java et le CSS , moi je dois me mettre au python pour un projet pour le taff : j’ai pas développé depuis visual basic :scream:

1 J'aime

J’ai pu tester mon widget ce matin après l’appairage des ampoules avec l’ipx800. Il fonctionne :blush:
Je trouve malgré tout que l’appairage d’une lampe et de l’ipx800 est trop hasardeux. Il faut s’y reprendre à 10 fois :fearful: c’est ça qui me fait préférer une autre marque, même si elle n’est pas nativement supportée par IPX.

2 J'aimes