Test Widget json template

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.
Screenshot 2026-07-22 185411.png

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:

Screenshot (2967).png

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":""}]

Screenshot 2026-07-22 213953.png

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

Community Forum

NEWS

Test Widget json template

Neue Version 4.4.5

Neue Version 4.4.5

Support us

385

33.0k

83.5k

1.3m