Monatsrückblick Juli / August 2026 ist online!

[OliverIO]

Die Dokumentation wurde mit dem use case simple gauge erweitert

https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/usecase-simplegauge.md

der im Rahmend des threads
https://forum.iobroker.net/topic/84481/ich-frag-jetzt-einfach-mal-suche-slider-oder-gauge/12?_=1778106594527
entstanden ist

[OliverIO]

Die Dokumentation wurde um einen use case github issues und PRs erweitert.
Damit kann man sich unter vis1/2 seine (oder auche von anderen repos) PRs und Issues anzeigen lassen. Ein kostenloser api key von github wird empfohlen, da ansonsten die Anzahl der requests recht gering ist.

https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/usecase-githubissues.md

[OliverIO]

Neue Version 4.4.4

• Aufgrund einer Inkonsistenz zwischen den vis1- und vis2-Widgets
  werden nun sowohl widgetid als auch widgetID an das Template übergeben.

[sigi234]

@OliverIO

Hallo, irgendwo mache ich einen Fehler?

Formatierung ist nicht wie im Beispiel.

[OliverIO]

@sigi234

hast du das template direkt in das feld kopiert?
am besten den editor öffnen und dort reinkopieren.
leider schluckt vis-2 dort alle neue zeile zeichen.

[sigi234]

@OliverIO sagte:

hast du das template direkt in das feld kopiert?

Nein

am besten den editor öffnen und dort reinkopieren.

Auf das Bleistifftsymbol und dann dort rein kopiert

Edit:

web.0
2026-07-22 17:41:12.001	error	Invalid pattern on subscribe: The pattern "css: "unknown", icon: "↔", label: "Unknown"" is not a valid ID pattern

web.0
2026-07-22 17:41:12.001	error	Invalid pattern on subscribe: The pattern "css: "incoming", icon: "↙", label: "Incoming"" is not a valid ID pattern

web.0
2026-07-22 17:41:12.000	error	Invalid pattern on subscribe: The pattern "css: "outgoing", icon: "↗", label: "Outgoing"" is not a valid ID pattern

web.0
2026-07-22 17:39:52.563	info	==> Connected system.user.admin from 192.168.178.20

web.0
2026-07-22 17:39:50.061	info	<== Disconnect system.user.admin from 192.168.178.20

[OliverIO]

@sigi234

so habe das template aktualisiert
https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/usecase-fritzbox-call-list.md

da hat es mir bei einer suchen und ersetzen aktion das template zerhauen.
daher sind die ganzen css anweisungen ins leere gelaufen

[Eduard77]

@OliverIO
guten Abend.
Irgendwie habe ich noch Probleme mit dem Widget.
Du hast die Code schon mal überflogen (https://forum.iobroker.net/topic/85005/google-kalender-ics-für-material-design-mini-kalender/36?_=1784739347983)

Ich habe folgendes Problem bei beiden Widget.
Wenn mein Wand Tablet Display aktiviert, zagt er meistens diese Meldung im Widget.

Habe ich das Widget falsch konfiguriert?

[sigi234]

@Eduard77
Das kann ich bestätigen, das Widget verliert anscheinend die Einstellungen.

[OliverIO]

@sigi234
Ich bräuchte testdaten.
Am besten Inhalt von m1
Habe das Script nicht im Einsatz
Ist sicher das der Datenpunkt sich nicht leert?

Die Einstellung Datenpunkt [1] braucht man nicht.

Man könntenamnanfang auch mal nochbein

<% console.log(data) %>

Eintragen. Dann werden die Daten bei jeder Aktualisierung im Browser log ausgegeben.

[sigi234]

@OliverIO sagte:

Am besten Inhalt von m1

[{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"23.07.2026 - 23.07.2026","ereignis":" Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/present.png","zeit":"25.07.2026 - 25.07.2026","ereignis":"xxxxx Geburtstag: 1945","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/info_black.png","zeit":"25.07.2026 14:30 - 17:30","ereignis":"Pretty Woman - Das Musical","ort":"Großer Saal"},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"30.07.2026 - 30.07.2026","ereignis":" Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/present.png","zeit":"30.07.2026 - 30.07.2026","ereignis":"xxxxxxxx: 1965","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/present.png","zeit":"01.08.2026 - 01.08.2026","ereignis":"xxxxxxxxxx: 1964","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"03.08.2026 - 03.08.2026","ereignis":" Abfuhrtermin Restmüll (GRAU): Abfuhrtermin Restmüll","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"03.08.2026 - 03.08.2026","ereignis":" Abfuhrtermin Biotonne (GRUEN): Abfuhrtermin Biotonne","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"06.08.2026 - 06.08.2026","ereignis":" Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"13.08.2026 - 13.08.2026","ereignis":" Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"17.08.2026 - 17.08.2026","ereignis":" Abfuhrtermin Restmüll (GRAU): Abfuhrtermin Restmüll","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"17.08.2026 - 17.08.2026","ereignis":" Abfuhrtermin Biotonne (GRUEN): Abfuhrtermin Biotonne","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"18.08.2026 - 18.08.2026","ereignis":" Abfuhrtermin gelber Sack: Abfuhrtermin Wertstofftonne / gelber Sack","ort":""},{"img":"http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png","zeit":"20.08.2026 - 20.08.2026","ereignis":" Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier","ort":""}]

avascript.0
2026-07-22 20:56:02.059	info	script.js.Test.Kalender: registered 1 subscription, 1 schedule, 0 messages, 0 logs and 0 file subscriptions

javascript.0
2026-07-22 20:56:02.047	info	script.js.Test.Kalender: start JavaScript (Javascript/js)

javascript.0
2026-07-22 20:56:02.040	info	script.js.Test.Kalender: Stopping script

Edit :
Vis neu gestartet leer:

[Eduard77]

@OliverIO

DP ist nicht leer.

[{"img":"http://192.168.178.5:8082/vis-2.0/VIS2-Samsung/Bilder/Mama.png","zeit":"22.07.2026 - 22.07.2026","ereignis":"Physio 16:20","ort":""},{"img":"http://192.168.178.5:8082/vis-2.0/VIS2-Samsung/Bilder/Papa.png","zeit":"24.07.2026 08:00 - 17:00","ereignis":"Citroen Inspektion Termin","ort":""},{"img":"http://192.168.178.5:8082/vis-2.0/VIS2-Samsung/Bilder/Papa.png","zeit":"25.07.2026 - 25.07.2026","ereignis":"xxxxxx und xxx Hochzeitstag","ort":""},{"img":"http://192.168.178.5:8082/vis-2.0/VIS2-Samsung/Bilder/Papa.png","zeit":"28.07.2026 - 28.07.2026","ereignis":"Geburtstag. xxxx","ort":""},{"img":"http://192.168.178.5:8082/vis-2.0/VIS2-Samsung/Bilder/Mama.png","zeit":"29.07.2026 - 29.07.2026","ereignis":"Physio 16:20","ort":""}]

[OliverIO]

@sigi234 @eduard77

ok fehler ist gefunden.
durch automatisierte dependabots sind aktualisierungen rein gekommen,
die mit vis2 nicht mehr kompatibel sind.
das konnte ich beheben (zumindest lokal)

sobald die version auf npm verfügbar ist, gebe ich das bekannt.

dadurch gab es keine aktualisierungen im runtime mode von vis2.
allerdings hat das 2. template ein problem. da passt der code nicht zu den daten

in einem item kommen folgende daten

{
    "img": "http://192.168.178.20:8082/vis-2.0/main2/graue_tonne.png",
    "zeit": "23.07.2026 - 23.07.2026",
    "ereignis": " Abfuhrtermin Altpapier (ROT): Abfuhrtermin Altpapier",
    "ort": ""
}

im template
wird aber nach diesen daten gefragt

        var rawName = item.name || '';
        var title = rawName;
        var details = '';
 

im weiteren verlauf wird dann titel und details noch speziell behandelt.
wenn item.name in den daten nicht existieren, dann wird es nichts.

Ist das eine neuere Version des templates? In den bisherigen konnte ich "Keine Einträge vorhanden" nicht finden.

[OliverIO]

Neue Version 4.4.5

• paket versionen für das vis-2 widget mussten zurück gesetzt werden, da dadurch das widget nicht mehr richtig funktioniert haben.

Wer schnell testen will und der Adapter im beta repo noch nicht auftaucht
kann über den expertenmodus/katzenknopf laden

[sigi234]

@OliverIO sagte:

Ist das eine neuere Version des templates?

<% console.log(data) %>
<style>
  .mini-calendar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: Arial, sans-serif;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
  }
 
  .mini-calendar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    color: #ffffff;
  }
 
  .mini-calendar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
 
  .mini-calendar-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }
 
  .mini-calendar-time {
    font-size: 0.8em;
    opacity: 0.85;
    font-weight: bold;
    color: #dddddd;
  }
 
  .mini-calendar-event {
    font-size: 0.95em;
    font-weight: 600;
  }
 
  .mini-calendar-ort {
    font-size: 0.8em;
    opacity: 0.7;
    font-style: italic;
  }
</style>
 
<div class="mini-calendar-container">
  <% 
    var items = [];
    var rawData = (typeof data !== 'undefined' && data) ? data : ((typeof dp1 !== 'undefined' && dp1) ? dp1 : ((typeof val !== 'undefined' && val) ? val : null));
 
    try {
      if (typeof rawData === 'string') {
        items = JSON.parse(rawData);
      } else if (Array.isArray(rawData)) {
        items = rawData;
      }
    } catch(e) {
      items = [];
    }
 
    if (Array.isArray(items) && items.length > 0) {
      for (var i = 0; i < items.length; i++) { 
        var item = items[i];
        if (!item) continue;
 
        var imgUrl = item.img || '';
        var zeit = item.zeit || '';
        var ereignis = item.ereignis || '';
        var ort = item.ort || '';
  %>
    <div class="mini-calendar-item">
      <% if (imgUrl) { %>
        <img class="mini-calendar-img" src="<%= imgUrl %>" alt="User">
      <% } %>
 
      <div class="mini-calendar-content">
        <div class="mini-calendar-time"><%= zeit %></div>
        <div class="mini-calendar-event"><%= ereignis %></div>
        <% if (ort) { %>
          <div class="mini-calendar-ort">📍 <%= ort %></div>
        <% } %>
      </div>
    </div>
  <% 
      } 
    } else { 
  %>
    <div style="color: white; opacity: 0.7; padding: 5px; font-size: 0.9em;">Keine Einträge vorhanden</div>
  <% } %>
</div>

[Eduard77]

@OliverIO
ich habe die neue Version installiert und werde es testen.
Vielen Dank.

[OliverIO]

Die Dokumentation wurde um eine Beschreibung in Deutsch und Englisch erweitert, wie man Templates mit KI entwickeln kann.

Es enthält eine Prompt-Vorlage, inklusive Beispielprompt, welche aktuell alle Empfehlungen enthält, so das die KI, das Template entwerfen kann.

Anmerkungen, Erfahrungen, Beispiel UseCases sind hier gerne gesehen.

https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/README.md#developing-templates-with-ai

[OliverIO]

Neue Version 4.5.0

• Widget-Rendering korrigiert. Das vis-2 widget erhält nun initial auch wieder die datenpunkt daten.
• Such- und Vollbildfunktion zum Template Editor für das vis-2-Widget hinzugefügt
• KI-Dokumentation für Regex-Ausdrücke verbessert
• Für das vis-2 widget wurde das Theme für den Template editor für den Dark Mode optimiert.

[bahnuhr]

@OliverIO
benutze das widget schon sehr lange um eine json Auswahl als Objekt zu nehmen. Das ausgewählte Element wird dann in einen anderen DP geschrieben.
Du hattest mir damals folgendes geschrieben:

<% 
    var selectid="mydropdown2"; 
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";
%>
<script>
debugger;
    var selectid="<%- selectid %>";
    var dp_write="<%- dp_write %>";
    
    function writeDP(el) {
        if (el.selectedOptions[0].text) vis.setValue(dp_write,el.selectedOptions[0].text);
    }

</script>
<style>
#mydropdown2 {
    color:rgb(255,255,255);
    width: 250px;
    background:black;
    font-size:24px;
}
</style>
</style><select id="<%- selectid %>" name="<%- selectid %>" size="1" onchange="javascript:writeDP(this)" >
<% debugger; %>
<% for (var i = 0; i<data.length;i++) { %>
  <option <%- ((dp[dp_write]==data[i]) ? "selected":"") %>><%- data[i] %></option>
<% } %>
</select>

Dies hatte ich dann als json Vorlage in edit eingetragen.

Nun wollte ich dies so ändern, dass beim Aufruf der view das widget einen bestimmten Wert (z.B. der Wert 10 vom json) einträgt und sichtbar darstellt.
Alle Versuche mit chatgpt haben nicht geklappt. Es wird mir immer der 1.Wert des json angezeigt.

Hast du dafür eine Idee ?

[OliverIO]

@bahnuhr

ich habe deinen post mal bei mir in chatgpt hineingeworfen.
Das Ergebnis habe ich jetzt aktuell nicht getestet. Probier mal

Ausserdem habe ich mittlerweile eine KI Promptvorlage entwickelt, die man für solche sachen verwenden kann
https://github.com/oweitman/ioBroker.vis-jsontemplate/blob/main/documentation/KI-DE.md
Hier der chatgpt output

---

Ja. Der entscheidende Punkt ist: Du musst beim Erzeugen der <option>-Elemente das gewünschte Element mit selected markieren. Ein späteres JavaScript-Setzen funktioniert im JSON-Template oft nicht zuverlässig, weil das Widget beim Rendern den HTML-Inhalt vollständig neu erzeugt.

Hier eine direkt einsetzbare Variante, die beim ersten Aufruf den JSON-Eintrag mit dem Index 10 auswählt und dessen Wert in den Datenpunkt schreibt:

<%
    var selectid = "mydropdown2";
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";

    /*
     * Gewünschter Eintrag im JSON-Array.
     *
     * Achtung:
     * Arrays beginnen bei Index 0.
     *
     * Index 10 bedeutet somit das 11. Element.
     * Für das 10. Element wäre der Index 9.
     */
    var defaultIndex = 10;

    var currentValue = dp && dp[dp_write] !== undefined
        ? String(dp[dp_write])
        : "";

    var defaultValue = "";

    if (Array.isArray(data) && data.length > defaultIndex) {
        defaultValue = String(data[defaultIndex]);
    }

    /*
     * Wenn im Ziel-Datenpunkt bereits ein gültiger Wert steht,
     * wird dieser angezeigt.
     *
     * Andernfalls wird der gewünschte Standardwert verwendet.
     */
    var selectedValue = currentValue;

    if (
        !selectedValue ||
        !Array.isArray(data) ||
        data.map(String).indexOf(selectedValue) === -1
    ) {
        selectedValue = defaultValue;
    }
%>

<script>
    var jsontemplateSelectId_<%- widgetid %> = "<%- selectid %>";
    var jsontemplateWriteDp_<%- widgetid %> = "<%- dp_write %>";
    var jsontemplateInitialValue_<%- widgetid %> = "<%- selectedValue %>";

    function jsontemplateWriteSelection_<%- widgetid %>(element) {
        if (!element || element.selectedIndex < 0) {
            return;
        }

        var selectedOption = element.options[element.selectedIndex];

        if (!selectedOption) {
            return;
        }

        vis.setValue(
            jsontemplateWriteDp_<%- widgetid %>,
            selectedOption.value
        );
    }

    setTimeout(function () {
        var element = document.getElementById(
            jsontemplateSelectId_<%- widgetid %>
        );

        if (!element) {
            return;
        }

        element.value = jsontemplateInitialValue_<%- widgetid %>;

        /*
         * Nur schreiben, wenn der DP noch nicht den angezeigten Wert enthält.
         */
        var currentDpValue = "<%- currentValue %>";

        if (
            element.value &&
            String(currentDpValue) !== String(element.value)
        ) {
            vis.setValue(
                jsontemplateWriteDp_<%- widgetid %>,
                element.value
            );
        }
    }, 0);
</script>

<style>
    #<%- widgetid %> #<%- selectid %> {
        color: rgb(255, 255, 255);
        width: 250px;
        background: black;
        font-size: 24px;
    }
</style>

<select
    id="<%- selectid %>"
    name="<%- selectid %>"
    size="1"
    onchange="jsontemplateWriteSelection_<%- widgetid %>(this)"
>
    <% if (Array.isArray(data)) { %>
        <% for (var i = 0; i < data.length; i++) { %>
            <%
                var optionValue = String(data[i]);
                var isSelected = optionValue === selectedValue;
            %>

            <option
                value="<%- optionValue %>"
                <%- isSelected ? "selected" : "" %>
            ><%- optionValue %></option>
        <% } %>
    <% } %>
</select>

Wichtig: Index oder Wert?

Bei:

var defaultIndex = 10;

wird wegen der nullbasierten Array-Indizierung das 11. Element gewählt:

data[0]  = erstes Element
data[9]  = zehntes Element
data[10] = elftes Element

Soll tatsächlich das zehnte Element vorausgewählt werden, muss es heißen:

var defaultIndex = 9;

Einen bestimmten Wert auswählen

Falls mit „Wert 10“ nicht der Index, sondern tatsächlich der JSON-Wert 10 gemeint ist, ist diese Variante besser:

<%
    var selectid = "mydropdown2";
    var dp_write = "javascript.0.Sonstige.Google.Kontakte.Photo.ausgewählt";
    var defaultValue = "10";

    var currentValue = dp && dp[dp_write] !== undefined
        ? String(dp[dp_write])
        : "";

    var availableValues = Array.isArray(data)
        ? data.map(String)
        : [];

    var selectedValue = availableValues.indexOf(currentValue) !== -1
        ? currentValue
        : defaultValue;
%>

Der restliche Code kann gleich bleiben.

Warum bisher immer der erste Eintrag erschien

Im alten Template wurde selected nur gesetzt, wenn diese Bedingung wahr war:

dp[dp_write] == data[i]

War der Datenpunkt leer, noch nicht geladen oder enthielt keinen Wert aus dem JSON-Array, bekam keine Option das Attribut selected. HTML zeigt dann automatisch das erste Element an.

Die obige Lösung bestimmt den ausgewählten Wert deshalb bereits im EJS-Teil und erzeugt beispielsweise:

<option value="10" selected>10</option>

Das ist beim ersten sichtbaren Rendern zuverlässiger als eine ausschließlich nachgelagerte JavaScript-Auswahl. Die Lösung berücksichtigt außerdem die dokumentierten Besonderheiten des Widgets: data enthält die JSON-Daten, zusätzliche Datenpunkte stehen in dp, CSS ist über widgetid begrenzt, und die Initialisierung nutzt setTimeout() statt setInterval().