Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[Zaphod]

Hallo,

... für meine Dimmer-Steuerung hätte ich gerne ein widget, welches den Zustand des DImmers anzeigt und bei Betätigung dieser Anzeige ein Fenster öffnet, in dem ich den neuen Dimmerwert aus eine Liste von Dimmerwerten auswählen kann.
Bei vis-jqui-widget bin ich mit dem "Dimmer + jqui Dialog"-Template (tplMfdLightDialog) fündig geworden.

Allerdings:
Dort sind die möglichen Werte hartcodiert (und auch ein paar "Nicklichkeiten" drinnen - z.B. wird der Dimmerwert immer angezeigt)

Ich hab' mich also an die Widget-Programmierung gemacht.
Nicht ganz leicht, VIS zu überzeugen, eine neue Version zu verwenden und zu debuggen ...

... ich hab' also, statt der hartcodierten 5 Werte (_off, 25%, 50%, 75%, 100%) zunächst 6 Werte hartcodiert (_off, 20%, ..., 100%):

                <input type="radio" id="<%= WidId %>_radio0" name="<%= this.data.attr('wid') %>_radio" value="<%= min %>" checked="checked"/>
                <label for="<%= WidId %>_radio0"><%= _('off') %></label>
                <input type="radio" id="<%= WidId %>_radio1" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.2 %>" checked="checked"/>
                <label for="<%= WidId %>_radio1">20</label>
                <input type="radio" id="<%= WidId %>_radio2" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.4 %>" checked="checked"/>
                <label for="<%= WidId %>_radio2">40</label>
                <input type="radio" id="<%= WidId %>_radio3" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.6 %>" checked="checked"/>
                <label for="<%= WidId %>_radio3">60</label>
                <input type="radio" id="<%= WidId %>_radio4" name="<%= this.data.attr('wid') %>_radio" value="<%= min + (max - min) * 0.8 %>" checked="checked"/>
                <label for="<%= WidId %>_radio4">80</label>
                <input type="radio" id="<%= WidId %>_radio5" name="<%= this.data.attr('wid') %>_radio" value="<%= max %>"/>
                <label for="<%= WidId %>_radio5">100</label>

nun das Ganze als Schleife (mit EJS):

let count = 5;
                <input type="radio" id="<%= WidId %>_radio0" name="<%= WidId %>_radio" value="<%= min %>" checked="checked"/>
                <label for="<%= WidId %>_radio0"><%= _('off') %></label>
                <%
                for (let i=1; i <= count; i++) {
                    let percent =  ( (min+(max-min)) / count ) * i;
                    console.log ("percent: " + percent);
                %>
                    <input type="radio" id="<%= WidId %>_radio<% i %>" name="<%= WidId %>_radio" value="<%= percent %>" checked="checked"/>
                    <label for="<%= WidId %>_radio<% i %>"><%= percent %></label>
                <% } %>

Das Ergebnis ist allerdings nicht wie erwartet:


... ich hab's tausendmal debugged - irgendwie generiert mir VIS da ganz merkwürdige <spans> hinein:


???

[Zaphod]

... fragt mich nicht, wo der Unterschied ist. So läuft's

<%
                for (let i=1; i <= count; i++) {
                    let percent =  ( (min+(max-min)) / count ) * i;
                    let id = WidId + '_radio' + i;
                %>
                    <input type="radio" id="<%= id %>" name="<%= WidId %>_radio" value="<%= percent %>" checked="checked"/>
                    <label for="<%= id %>"><%= percent %></label>
                    <% console.log ("percent: " + percent + "; i: " + i + "; id: " + id); %>
                <% } %>

d.h., ich hab' die id zusammengebaut und erst dann im HTML verwendet.