Widget Milight perso

Eclairage - Led - PWM - DMX
1

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

2

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.

image
image1333×389 13 KB

cdt

3

re !

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

image
image1920×1040 41.6 KB

4

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

5

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

6

oui, un peu de cosmétique en css

7

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 ?

8

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 »
9

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

un grand merci

1 « J'aime »
10

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

11

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

12

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

2 « J'aime »
13

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 »
15

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

16

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

2 « J'aime »
17

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 »
18

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'aime »
19

Hello,
ce post m’a inspiré j’ai fait une version circulaire de sélecteur de couleur pour Milight

milight
milight438×720 46.4 KB

pour ceux que ça intéresse voici la source :

let zone=1;
let ip="192.168.0.193";
let type=2;
return `
<style>
  .center {
    width: 77px;
    height: 77px;
    top: 125px;
    background-blend-mode: screen;
    border-radius: 50%;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.5);
    background: linear-gradient(180deg, #fff, #d3d1d1)
  }
  .centerButton {
    width: 70px;
    height: 70px;
    background-blend-mode: screen;
    border-radius: 50%;
    background: linear-gradient(180deg, #d6d6d6, #fff, #fafafa);
    line-height: 73px;
    text-align: center;
    color: rgba(234, 234, 234, 0.8);
    text-shadow: 1px 2px 1px #f4f4f4, 0 0 0 #000, 1px 2px 4px #f4f4f4;
  }
  .t { top: 50%;  }
  .c { position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .chart {
    width: 200px;
    height: 200px;
    background: conic-gradient(yellow, #80ff00, lime, #00ff80, aqua, #0080ff, blue, #8000ff, fuchsia, #ff0080, red, #ff8000, yellow);
    box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.5);
    background-blend-mode: screen;
    border-radius: 50%;
  }
  .control {
    height: 215px;
    width: 215px;
    top: 125px;
    background: linear-gradient(180deg, #00000078, transparent, #0000001a);
    border-radius: 50%;
  }

  .bs {
    position: relative;
    top: 220px;
    height: 28px;
    padding: 3px;
    width: min-content;
    margin: auto;
    background: linear-gradient(180deg, #00000078, transparent, #0000001a);
    border-radius: 15px
  }
  .slider {
    -webkit-appearance: none;
    width: 245px;
    height: 28px;
    background: linear-gradient(45deg, black, #fff);
    outline: none;
    border-radius: 13px;
    box-shadow: inset 0 1px 3px 0px black;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: lightgrey;
    cursor: pointer;
    border-radius: 13px;
    opacity: 0.05;
  }
  .slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: grey;
    cursor: pointer;
    border-radius: 50%;
  }
  .bs svg {
    position: relative;
    top: -27px;
    padding: 0px 6px;
  }
  .bt {
    position: absolute;
    top: 22px;
  }
</style>
<div class="widget" style="height:450px;padding-right:15px">
  <h2 class="section-title">Lampe du salon</h2>
  <div class="control c">
    <div id="circle" class="chart c t"></div>
  </div>
  <div id="center" class="center c"
    onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;On=1&amp;White=1&amp;Type=1');">
    <div id="Button" class="centerButton c t">BLANC</div>
  </div>
  <div class="bs">
    <input type="range" id="slider-intens2" class="slider" value="0" min="1" max="100" style
      onchange="milightSend2('${ip}',${zone}, this.value, 1, 0, 0, 0, 0);"><svg xmlns="http://www.w3.org/2000/svg"
      style="float:left;" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="#555" stroke-width="2"
      stroke-linecap="square">
      <circle cx="12" cy="12" r="7" /></svg><svg xmlns="http://www.w3.org/2000/svg" style="float:right;" width="20"
      height="20" fill="none" viewBox="0 0 24 24" stroke="#000" stroke-width="2" stroke-linecap="square">
      <circle cx="12" cy="12" r="5" />
      <path
        d="M12 1v2m0 18v2M4.22 4.22l1.42 1.42m12.72 12.72l1.42 1.42M1 12h2m18 0h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
      </svg>
  </div>
  <div class="bt">
    <input type="button" id="bouton2" class="bouton2"
      style="margin-top: 250px;width: 50px;margin-left: 39px;position: absolute;top: 15px;" value="S-"
      onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;SpeedDown=1&amp;Type=${type}');">
    <input type="button" id="bouton2" class="bouton2"
      style="margin-top: 250px;width: 50px;margin-left: 100px;position: absolute;top: 15px;" value="M"
      onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;Mode=1&amp;Type=${type}');">
    <input type="button" id="bouton2" class="bouton2"
      style="margin-top: 250px;width: 50px;margin-left: 160px;position: absolute;top: 15px;" value="S+"
      onclick="newAJAXCommand('api.cgi?SetMiLight=${ip}&amp;Channel=${zone}&amp;SpeedUp=1&amp;Type=${type}');">
    <input type="button" id="milightC1" class="bouton2 milightC"
      style="margin-top: 275px;width: 150px;margin-left: 50px;position: absolute;top: 35px;" value="|"
      onclick="milightSend('${ip}',${zone},1,this, ${type}, 0, 0, 0, 0);">
    <input type="button" id="bouton2" class="bouton2"
      style="margin-top: 325px;width: 150px;margin-left: 50px;position: absolute;top: 35px;" value="0"
      onclick="milightSend('${ip}',${zone},0,this, ${type}, 0, 0, 0, 0);">
  </div>
</div>
<script>
  document.getElementById('circle').addEventListener('click', printPosition)
  function getPosition(e) { var circle = e.target.getBoundingClientRect(); var x = e.clientX - circle.left; var y = e.clientY - circle.top; return { x, y } }
  function printPosition(e) {
    var position = getPosition(e);
    var angleDeg = Math.ceil((255 / 360) * (180 + Math.atan2(position.y - circle.offsetHeight / 2, position.x - circle.offsetWidth / 2) * 180 / Math.PI));
    milightSend3('${ip}', ${ zone }, angleDeg, ${ type }, 0, 0, 0, 0);
  }
</script> `;
8 « J'aime »
20

Très propre !!
Je vais le modifié pour 2 rubans

2 « J'aime »