Der neue Monatsrückblick für Mai und Juni 2026 ist online!

[OliverIO]

@icebear

Gib mir mal deinen aktuellen Stand des templates und welche Version vis-2 und jsontemplate nutzt du?

[icebear]

@OliverIO sagte:

Gib mir mal deinen aktuellen Stand des templates und welche Version vis-2 und jsontemplate nutzt du?

Ich hab bei mir die Versionen:

• VIS-2 v2.14.3

• vis-mapwidgets v0.1.1

• vis-jsontemplate v4.4.3

Ich häng dir auchnochmal das json von heute Mittag dran:

{
  "2026-07-11T11:31:55.044Z": {
    "map": {
      "marker": [
        {
          "latlng": [
            50.7258209,
            6.5616916
          ],
          "options": {
            "icon": "honda",
            "title": "Default"
          },
          "tooltip": "Hover me",
          "iobOptions": {
            "fitBounds": true
          }
        }
      ],
      "icons": {
        "honda": {
          "iconUrl": "/vis-2.0/SmartHome/tanken/honda_sv1.png",
          "iconSize": [
            45,
            30
          ],
          "iconAnchor": [
            15,
            30
          ],
          "popupAnchor": [
            0,
            -26
          ],
          "shadowSize": [
            36,
            36
          ],
          "shadowAnchor": [
            15,
            30
          ]
        }
      },
      "polyline": [
        {
          "latlng": [
            [
              50.725799,
              6.5616099
            ],
            [
              50.7251238,
              6.5605654
            ],
            [
              50.7246166,
              6.5609528
            ],
            [
              50.7240711,
              6.561601
            ],
            [
              50.723522,
              6.5622009
            ],
            [
              50.7230547,
              6.5628025
            ],
            [
              50.7225897,
              6.5633924
            ],
            [
              50.7219501,
              6.5644493
            ],
            [
              50.7211811,
              6.5647788
            ],
            [
              50.7207659,
              6.5650656
            ],
            [
              50.7203349,
              6.5656474
            ],
            [
              50.7198957,
              6.5659433
            ],
            [
              50.7190173,
              6.5662387
            ],
            [
              50.718582,
              6.5665369
            ],
            [
              50.7181532,
              6.5668324
            ],
            [
              50.717732,
              6.5671206
            ],
            [
              50.7173251,
              6.5676627
            ],
            [
              50.7165625,
              6.567859
            ],
            [
              50.7159213,
              6.5680011
            ],
            [
              50.7159217,
              6.5690802
            ],
            [
              50.7162137,
              6.5703503
            ],
            [
              50.7163688,
              6.5710893
            ],
            [
              50.7165208,
              6.5718595
            ],
            [
              50.7166787,
              6.5726256
            ],
            [
              50.7168475,
              6.5733845
            ],
            [
              50.7170238,
              6.5741235
            ],
            [
              50.7171892,
              6.5748408
            ],
            [
              50.7173636,
              6.5755007
            ],
            [
              50.7176644,
              6.5766643
            ],
            [
              50.7177859,
              6.5775401
            ],
            [
              50.7179652,
              6.5783119
            ],
            [
              50.7184016,
              6.5794199
            ],
            [
              50.7187902,
              6.5799019
            ],
            [
              50.7190182,
              6.5810498
            ],
            [
              50.7195261,
              6.5816723
            ],
            [
              50.7198009,
              6.5823029
            ],
            [
              50.7200899,
              6.5829285
            ],
            [
              50.7203958,
              6.5841725
            ],
            [
              50.7210481,
              6.5847941
            ],
            [
              50.7213975,
              6.5854123
            ],
            [
              50.7217527,
              6.5860382
            ],
            [
              50.7221206,
              6.5866526
            ],
            [
              50.7228596,
              6.5878512
            ],
            [
              50.7232216,
              6.5884268
            ],
            [
              50.7235814,
              6.5895314
            ],
            [
              50.7242882,
              6.590077
            ],
            [
              50.7246376,
              6.5906174
            ],
            [
              50.724991,
              6.5911495
            ],
            [
              50.7253374,
              6.5922095
            ],
            [
              50.7260145,
              6.5932597
            ],
            [
              50.7266419,
              6.5937876
            ],
            [
              50.7271892,
              6.5947667
            ],
            [
              50.7276852,
              6.5963161
            ],
            [
              50.7281664,
              6.5968287
            ],
            [
              50.728378,
              6.5977711
            ],
            [
              50.728757,
              6.5981952
            ],
            [
              50.7289921,
              6.5989111
            ],
            [
              50.7297176,
              6.598413
            ],
            [
              50.7303885,
              6.5972797
            ],
            [
              50.7310067,
              6.5969014
            ],
            [
              50.7315278,
              6.5962554
            ],
            [
              50.7319837,
              6.5956623
            ],
            [
              50.7325074,
              6.5950903
            ],
            [
              50.7329774,
              6.5943489
            ],
            [
              50.7334461,
              6.5942692
            ],
            [
              50.7336491,
              6.5949733
            ],
            [
              50.7332343,
              6.5945766
            ],
            [
              50.7330614,
              6.5939065
            ],
            [
              50.7323787,
              6.5947169
            ],
            [
              50.7317675,
              6.5951215
            ],
            [
              50.7311164,
              6.595912
            ],
            [
              50.7307921,
              6.5967118
            ],
            [
              50.7301439,
              6.5970905
            ],
            [
              50.7295434,
              6.597821
            ],
            [
              50.7290658,
              6.59839
            ],
            [
              50.7286366,
              6.5986282
            ],
            [
              50.7282548,
              6.5978259
            ],
            [
              50.7277666,
              6.5968633
            ],
            [
              50.7274929,
              6.5957611
            ],
            [
              50.7268985,
              6.5946084
            ],
            [
              50.7262481,
              6.5940331
            ],
            [
              50.7259021,
              6.5929041
            ],
            [
              50.7251837,
              6.591794
            ],
            [
              50.724445,
              6.5912374
            ],
            [
              50.7240686,
              6.590676
            ],
            [
              50.7237026,
              6.5901055
            ],
            [
              50.7235015,
              6.5892436
            ],
            [
              50.7227379,
              6.588662
            ],
            [
              50.7223558,
              6.58807
            ],
            [
              50.7219749,
              6.5874671
            ],
            [
              50.721601,
              6.5865422
            ],
            [
              50.7210562,
              6.5859094
            ],
            [
              50.7207213,
              6.5852672
            ],
            [
              50.7202175,
              6.584299
            ],
            [
              50.7199076,
              6.5829942
            ],
            [
              50.7196087,
              6.582337
            ],
            [
              50.7191027,
              6.5817123
            ],
            [
              50.7187135,
              6.5801152
            ],
            [
              50.7182688,
              6.5792968
            ],
            [
              50.7182556,
              6.5784151
            ],
            [
              50.7178702,
              6.5780466
            ],
            [
              50.7175446,
              6.5771647
            ],
            [
              50.7171914,
              6.576015
            ],
            [
              50.7168716,
              6.5746561
            ],
            [
              50.7167147,
              6.5732628
            ],
            [
              50.7164239,
              6.5725964
            ],
            [
              50.7162866,
              6.5712233
            ],
            [
              50.7160372,
              6.5705925
            ],
            [
              50.7158421,
              6.5694239
            ],
            [
              50.7157773,
              6.5684483
            ],
            [
              50.7163356,
              6.5681035
            ],
            [
              50.7170592,
              6.5679911
            ],
            [
              50.717881,
              6.5673416
            ],
            [
              50.7193092,
              6.5667069
            ],
            [
              50.7197753,
              6.5663782
            ],
            [
              50.7202366,
              6.5657502
            ],
            [
              50.7206875,
              6.5657502
            ],
            [
              50.7211247,
              6.5654476
            ],
            [
              50.7218717,
              6.5648738
            ],
            [
              50.7224139,
              6.5642734
            ],
            [
              50.7228701,
              6.5636795
            ],
            [
              50.7234011,
              6.5631349
            ],
            [
              50.7239938,
              6.5623962
            ],
            [
              50.7245283,
              6.5617643
            ],
            [
              50.7250234,
              6.56116
            ],
            [
              50.7254054,
              6.5607061
            ],
            [
              50.7259625,
              6.5610327
            ],
            [
              50.7258509,
              6.5617928
            ]
          ],
          "options": {
            "color": "#3d3d5c",
            "weight": 3
          },
          "iobOptions": {
            "fitBounds": true
          }
        }
      ]
    }
  }
}

Ich habs grad auchnochmal ausprobiert, wenn ich die View wechsel, und wieder zurück gehe in der 'Runtime' dann zeigt die Karte manchmal ein Zoom auf das Haus mit dem Marker und beim nächstenmal die Karte in Zoom-Stufe 12 ohne Marker, Route oder sonstwas.
Manchmal kann ich im jsontemplate ein Datum auswählen und manchmal nicht.

[OliverIO]

@icebear

Kannst du mir da mal testendaten bereitstellen. Gerne auch per persönlichem Chat

[icebear]

@OliverIO sagte:

Kannst du mir da mal testendaten bereitstellen. Gerne auch per persönlichem Chat

Wenn du mir sagst was du mit "Testdaten" meinst?

[OliverIO]

@icebear
Deinen Datenpunkt mit Inhalt mit dem du diesen Effekt festgestellt hast

[icebear]

@OliverIO sagte:

Deinen Datenpunkt mit Inhalt mit dem du diesen Effekt festgestellt hast

Du meinst den DP wo das json liegt, welches ich dann in dem Dropdown auswählen kann (mit Datum und Uhrzeit)?

Das hab ich schon 3 posts drüber eingefügt.

Ich hab auch grad nochmal probiert, wenn ich das json im DP im Admin aufmache, und bei der Polyline die erste Koordinate an der letzten Stelle verändere z.B 50,78654 zu 50,78653 und unten auf Wert setzten klicke, dann zurück in die VIS im Editor gehe bekomme ich die Route angezeigt, wenn ich dann auf Runtime umschalte ist die Route weg, ich kann zwar noch auf das Datum klicken aber es passiert nix.

[OliverIO]

@icebear

Ah ok danke.
Hab ich auf dem Handy übersehen.
Schaue gegen später mal rein

[OliverIO]

@icebear

also das problem aus der obigen fehlermeldung konnte ich verbessern,
das liegt daran, das vis immer mehrfach den datenpunkt aktualisiert. einmal ohne daten und einmal mit daten. der fehler kommt davon, wenn der datenpunkt keine daten enthält.
ist aber ein vis typisches verhalten.

leider hast du mir dein template mitgeschickt, daher habe ich auf basis meiner version dass auf dunkel umgestellt. alle eigenschaften der auswahlbox sind in den css-anweisungen im template enthalten

Spoiler

<%

let localmapdatapoint="local_map";
let selected="";
let options = Object.keys(data).map(el=>{
   return {
       value: el,
       label:new Date(el).toLocaleString(undefined, {
           dateStyle: "short"
       })
   }
})
console.log(data); 
console.log(options);
window.jsontemplate=[]
window.jsontemplate[widgetid]={};
window.jsontemplate[widgetid].data=data;
window.jsontemplate[widgetid].localmapdatapoint=localmapdatapoint;
%>
<style>
.mui-select-wrapper {
   position: relative;
   display: inline-flex;
   flex-direction: column;
   min-width: 220px;
   margin: 16px 0;
   font-family: Roboto, Arial, sans-serif;
}

.mui-select-label {
   position: absolute;
   top: -8px;
   left: 12px;
   background: #1e1e1e;
   padding: 0 4px;
   font-size: 12px;
   color: rgba(255, 255, 255, 0.7);
   z-index: 1;
}

.mui-select {
   height: 56px;
   padding: 16px 40px 16px 14px;
   border: 1px solid rgba(255, 255, 255, 0.23);
   border-radius: 4px;
   background-color: #1e1e1e;
   font-size: 16px;
   color: rgba(255, 255, 255, 0.87);
   outline: none;
   appearance: none;
   cursor: pointer;
}

.mui-select-wrapper::after {
   content: "";
   position: absolute;
   right: 16px;
   top: 34px;
   width: 0;
   height: 0;
   pointer-events: none;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 6px solid rgba(255, 255, 255, 0.7);
}

.mui-select:hover {
   border-color: rgba(255, 255, 255, 0.87);
}

.mui-select:focus {
   border: 2px solid #90caf9;
   padding: 15px 39px 15px 13px;
}

.mui-select:focus+.mui-select-label,
.mui-select-wrapper:focus-within .mui-select-label {
   color: #90caf9;
}

.mui-select:disabled {
   color: rgba(255, 255, 255, 0.38);
   border-color: rgba(255, 255, 255, 0.12);
   background-color: #2b2b2b;
   cursor: default;
}

/* Für die Optionen im Dropdown */
.mui-select option {
   background-color: #1e1e1e;
   color: rgba(255, 255, 255, 0.87);
}
</style>
<div class="mui-select-wrapper">

   <select
       id="select_<%= widgetid  %>"
       class="mui-select"
       data-widgetid="<%= widgetid  %>"
   >
       <% options.forEach(function(option) { %>
           <option
               value="<%= option.value %>"
               <%= option.value === selected ? 'selected' : '' %>
           >
               <%= option.label %>
           </option>
       <% }); %>
   </select>
</div>
<script>
(() => {
   const select = document.getElementById("select_<%= widgetid %>");
   const widgetid = select.dataset.widgetid;
   const data = window.jsontemplate[widgetid];
   const key = Object.keys(data.data)[0];
   console.log("key",key);
   key && onSelectionChanged(widgetid,key);
   select.addEventListener("change", (event) => {
       const value = event.target.value;
       const widgetid = event.target.dataset.widgetid;

       onSelectionChanged(widgetid,value);
   });

   function onSelectionChanged(widgetid,value) {
       console.log("change",value);
       vis.setValue(window.jsontemplate[widgetid].localmapdatapoint,JSON.stringify(window.jsontemplate[widgetid].data[value].map))
   }
})();
</script>

das verhalten das bei einem reiter wechsel hin und zurück die marker weg sind konnte ich nicht nachvollziehen. in der runtime hat das immer gut funktioniert.
die versionen von dir sind identisch zu meinen.
da bei mir der effekt nicht auftritt, ist es schwer nachzuvollziehen. tritt das nur im vis edit mode auf oder auch im runtime? dann bitte nach der aktualisierung auch nochmal auf die fehler schauen. ggfs muss ich auch mal noch die debug ausgaben des map widgets nachschärfen, so das man im browser log besser nachvollziehen kann, was passiert oder auch was nicht passiert.

im edit modus hat es auch etwas mit dem vis verhalten zu tun. da habe ich 2 dinge festgestellt, die ich unabhängig von deinem problem mal noch mal tiefer untersuchen muss. das ist leider debug technisch etwas aufwändiger.
eigentlich abonniert vis/vis2 im edit mode alle datenpunkte. da scheint sich etwas geändert zu haben, auch bekomme ich im browser log (nicht immer) den hinweis:
only admin allowed
wo ich vermute das es damit zu tun hat.
auch bekommt im edit modus nicht immer die daten aus dem datenpunkt an. da aber die dynamische aktualisierung unter vis im edit mode deaktiviert ist, kommen da keine weiteren aktualisierungen, wie es im runtime mode der fall ist. das ist/war eigentlich auch ok. auch hier will ich mal schauen ob ich das noch verbessern kann. hat aber evtl auswirkungen auf das erstellen und debuggen von den templates

[OliverIO]

Neue Version 0.2.0

Es wurde ein Location Timeline widget hinzugefügt.

Das widget kann bis zu 5 Tracking Datenpunkte aufnehmen
Der Datenpunkt muss in der Form 50.11552,8.68417 beschrieben werden
Der Datenpunkt muss historisiert sein um einen Verlauf zu erhalten.
Das widget kann umfangreich in der Darstellung konfiguriert werden

• Timeline seitlich oder drunter oder Automatisch nach Breite des widgts
• Auto/Hell/Dunkel Theme
• Farben für die verschiedenen Personen
  Anhand des zeitlichen Verlaufs errechnet das widget dann Aufenthaltsorte.
  Die Grenzwerte können konfiguriert werden
• Ein Aufenthalt wird registriert wenn man sich mehr wie x Minuten im Umkreis von y Metern befindet

Die Aufenthaltsorte können optional anhand der Aufenthaltsorte reverse Geocoded werden. Als Dienst wird hier der kostenlose Dienst nominatim (steht mit openstreetmaps in Verbindung) genutzt.
Um die Nutzungslimits zu erhöhen sollte man eine gültige EMail eintragen.
Das widget beachtet die bekannten Nutzungslimits und führt das Geocoding über eine Warteschlange (sofern der Browser und das widget läuft) ggfs verzögert durch. Allerdings dürften die Nutzungslimits für den Alltagsgebrauch ausreichend sein.
https://operations.osmfoundation.org/policies/nominatim
maximale Obergrenze von einer Abfrage pro Sekunde
Bitte mit Massenabfragen oder zu kleinteiligen Umkreisen je Minuten vorsichtig sein. Die vorgegeben Standardwerte sollten ausreichend sein. Ansonsten könnte eure IP für weitere Abfragen gesperrt werden.

Alle Abfragen werden zum einen lokal im Browser und in einem datenpunkt gespeichert um Mehrfachabfragen zu verhindern und auch beim Einsatz verschiedener Browser das weitgehend zu reduzieren.

Alle Abfragen erfolgen direkt aus dem browser heraus.
Falls das probleme macht werde ich die Funktionalität im adapter auf den iobroker schieben. Aber wir schauen mal wie das funktioniert.

Falls das reverse GeoCoding keinen Punkt findet, wird unbekannter Ort angezeigt. Das kann man dann über das Favoriten Icon bearbeiten und selbst einen sinnigen Namen eingeben (zu Hause, Arbeit, etc.)

Wer das widget testen möchte aber noch keine Trackingdaten hat, kann das folgende Skript in den iobroker javascript-Adapter kopieren (Datenpunkt zuvor anlegen, history adapter installieren und die Historisierung für den Datenpunkt aktivieren) und ausführen.
https://github.com/oweitman/ioBroker.vis-mapwidgets/blob/main/example/LocationTimeline/create-example-track.js
Um einen aktuellen Track zu erhalten kann man das Startdatum ebenfalls im Skript konfigurieren. Dann werden die timestamps entsprechend berechnet.

Das Ergebnis sieht dann so aus:

Konfigurationsmöglichkeiten

Das widget habe ich in vis1 getestet
(allerdings nur mit dem einen Beispiels track)
Läuft in vis-2 ebenfalls. Das Problem mit den Layout einstellungen hat sich wohl nach vis-2 neustart behoben.

Zu Problemen oder Vorschläge bitte hier berichten
Das widget ist aktuell beta.
Es können sich auch noch generelle Dinge ändern.

[OliverIO]

Nach Neustart von vis-2, hat sich das ursprünglich erwähnte Problem mit Layout erledigt.
widget funktioniert auch in vis-2

[icebear]

@oliverio

Ich wollte das Location Timeline widget grad mal ausprobieren, aber ich kann links in den Widget-Einstellungen den Punkt 'Allgemein' nicht aktivieren.

Mapwidgert.mp4

vis-2 Adapter hab ich neu gestartet.

[OliverIO]

@icebear

ja, da gibt es nix zum einstellen.
alle einstellungen sind in den anderen optionen
common wird von vis-2 immer automatisch mit eingebracht.
hab mir schon überlegt da einen support link hinzuzufügen

[OliverIO]

Neue Version 0.2.1

• keine funktionale Änderung an de widgets
• den widgets wurde nun unter common ein support link hinzugefügt.

[icebear]

@oliverio

Das Problem was ich jetzt auch mit dem Location Timeline widget habe, ist das ich da auch schon wieder ein Script brauche welches mir die Koordinaten in den DP im richtigen Format schreibt.
Ich dachte z.B. das das Format für die Koordinaten so gewählt ist, das man es z.B. aus dem cloud-Adapter direkt übernehmen kann ohne noch zusätzlich irgendwas zu machen.
Jetzt hab ich aber festgestellt, das im cloud-Adapter das Format genau umgekehrt und mit ; getrennt geschrieben wird.

Siehe:

Ich weiß ja nicht wo du deine Koordinaten herbekommst, vielleicht gibt es ja auch noch was anderes an "Boardmitteln" was ich benutzen kann.

Traccar z.B. schreibt die Koordinaten getrennt in zwei DP einen für lat und einen für long. Da müsste ich auch mit einem Script die Daten aufbereiten, was ja prinzipiell kein Problem wäre.

[OliverIO]

@icebear

die Koordinaten sind in der WGS84 notation
zuerst latitude, dann longitude

diese notation und Systematik wird von vielen diensten
verwendet. bspw auch google oder OpenStreetMap oder auch home assistant

Beispiel
https://www.google.com/maps/search/?api=1&query=50.1109,8.6821

traccar schreibt das ebenfalls in dieser reihenfolge in den datenpunkt
position_url

den cloud adapter nutze ich nicht

was ich noch einbauen könnte, wäre eine Erkennung auf json objekt, wo dann bspw folgende Struktur enthalten sein könnte

{
  "longitude": 50.1109 ,
  "latitude": 8.6821
}

oder

{
  "lon": 50.1109 ,
  "lat": 8.6821
}

gegen getrennte datenpunkte habe ich mich wegen eines evtl. drifts entschieden. beide Koordinaten gehören zusammen. wenn die beiden getrennt gemessen und geschrieben werden kann es zu einem drift kommen, insbesondere bei größeren Geschwindigkeiten.

Funktioniert es ansonsten bei dir?

[icebear]

@oliverio

Oh, sorry da hab ich mich beim flüchtigen hinschauen verguckt. Tatsächlich Traccar hat das richtig im DP stehen:

Dann könnte ich doch direkt den DP historisieren und bräuchte den anderen garnicht, oder?

[OliverIO]

@icebear

Ja sieht gut aus.
Richtige Reihenfolge mit Komma getrennt

dann könnte man das widget mal im lifebetrieb testen.
das habe ich noch nicht, da ich noch keinen tracker habe.
war nur interessant sowas mal umzusetzen

[icebear]

@OliverIO sagte:

dann könnte man das widget mal im lifebetrieb testen.

Ich werde das dann morgen mal testen und berichten.

Du könntest dir aber vielleicht schonmal Gedanken machen ob man da noch einbauen kann, das man ein symbol anstatt des "blöden" Geomarkers verwenden kann, z.B. das mdi:car-connected

Aber das ist noch wunschdenken, erstmal testen ob's grundsätzlich so funktioniert.

Und dann noch eine Frage, wo muß ich mich denn bei Nominatim mit der e-mail anmelden, ich find das nich?

[OliverIO]

Neue Version 0.2.2

Keine Funktionale Änderung.

• das timeline location widget hat ein eigenes icon erhalten

[icebear]

@oliverio

So, erster kleiner Test funktioniert super!

Auch die Erkennung von Nominatim hat funktioniert wie du siehst.

Es wäre gut wenn man die Home-Adresse als Zone (oder wie man das auch immer nennen will) eingeben könnte(ich habs kapiert, auf den Stern und als Favorite anlegen), weil wie du siehst fängt er um 07:53 mit Unterwegs an, 41min 8,1 km. Da war ich aber noch zuhause und hatte nur am Tracker kurz auf Standort senden geklickt. Erst später bin ich losgefahren, er hat aber alles als unterwegs gewertet obwohl ich den Umkreis von Home noch garnicht verlassen hatte. Also sprich die 75m rund um mein Home.

Genauso als ich dann wieder zuhause war um 08:49, da wäre jetzt gut wenn da "Home" stehen würde. Sonst wertet er das jetzt die ganze Zeit als unterwegs.

Edit: Nachdem jetzt meine Frau (Person2) losgefahren ist. und ich das ganze von zu Hause beobachtet hab ist mir noch folgendes aufgefallen.

1. Während sich der Tracker bewegt, flackert das Widget (also der untere Timelineteil) und es kommt immer wieder 'History wird geladen' in der timeline. Wenn dann der Tracker für eine Zeit am gleichen Ort ist, ist alles O.K.

2. Ich bekomme im Protokoll die folgenden Einträge:

web.0
2026-08-04 09:58:44.751	warn	State "vis-mapwidgets.0.timeline.geocodingCache" has no existing object, this might lead to an error in future versions

web.0
2026-08-04 09:58:44.596	warn	State "vis-mapwidgets.0.timeline.geocodingCache" has no existing object, this might lead to an error in future versions

web.0
2026-08-04 09:58:43.586	warn	State "vis-mapwidgets.0.timeline.geocodingCache" has no existing object, this might lead to an error in future versions

web.0
2026-08-04 09:58:43.584	warn	State "vis-mapwidgets.0.timeline.geocodingCache" has no existing object, this might lead to an error in future versions