Test Widget json template

[OliverIO]

Information für alle die das JSONTemplate-Widget aus dem rssfeed-Adapter nutzen

Um die Verwirrung nun am Ende geradezurücken, habe ich nun das vis1 und vis2 widget in einem neuen Adapter zusammengeführt.

vis-jsontemplate

Sobald dieser Adpter ausreichend getestet wurde, wird der Adapter vis-2-widgets-ovarius, sowie das jsontemplate widget im adapter rssfeed entfernt.

Dieses Widget nutzt zwar die gleiche Technologie wie rssfeeds Widgets, gehörte aber Thematisch da nie rein. Nach langer Zeit habe ich es nun über einen neuen Adapter bereitgestellt.

• https://github.com/oweitman/ioBroker.ovarious https://github.com/oweitman/ioBroker.rssfeed
  für vis-1
  (da der adapter für das beta repository nicht angenommen wurde, ist mein plan einen eigenen adapter zu erstellen, allerdings dann, wenn es möglich ist vis-1 und vis-2 widgets in einem adapter zu veröffentlichen. da aktuell dort das buildsystem für react umgestellt wird, warte ich noch auf ein funktionierendes beispiel für einen react/JS/vite adapter. Solange muss das widget noch im adapter rssfeed verwendet werden.)
• https://github.com/oweitman/ioBroker.vis-2-widgets-ovarious
  für vis-2
  (bereits in stable vorhanden)

das JSONTemplate widget wird mit einem der nächsten Releases des rssfeed-Adapters als deprecated markiert und dann wiederum nach einiger Zeit daraus entfernt.
Bitte wechselt demnächst zum anderen Adapter.
Anwendung
Über dieses widget, kann ein beliebiger Datenpunkt mit JSON-Daten nach eigenem belieben dargestellt werden.
Die Darstellung erfolgt über ein Template-Format, welches man sich als kombinierte Form von Html-code + Javascript + spezielle Tags, die die Anzeige der JSON-Attribute steuern.

Ziel in diesem Thread ist, die Anwendung anhand von Beispielen aufzuzeigen, sowie Methoden
wie Leute, die nicht so sehr mit JSON, javascript oder HTML sind einen Weg aufzuzeigen, wie sie ihre
Daten trotzdem so dargestellt bekommen wie man das will.
Für einfache Tabellendarstellungen empfehle ich weiterhin das JSON table widget. Allerdings müssen die JSON-Daten bereits in einer bestimmten Form vorliegen, so dass das widget die Tabelle daraus ableiten kann.
Dieses widget ist flexibler, allerdings muss man auch mehr vorgeben (template)

Templatesystem
Als Templatesystem wird ejs verwendet
https://ejs.co/ und https://github.com/mde/ejs
Dieses verwendet spezielle Tags um Attribute oder auch Anweisungen gemischt mit HTML-code zu verbinden.

Das Templatesystem arbeitet mit bestimmten Tags.
Die verwendeten Tags bedeuten das folgenden
<%= Der Inhalt des enthaltenen Ausdrucks/Variable wird escaped ausgegenen.
<%- Der Inhalt des enthaltenen Ausdrucks/Variable wird unescaped ausgegenen.
<% Tag ohne Ausgabe, wird für javascriptanweisungen verwendet
%> ist generell ein schließender Tag um eines der vorherigen abzuschließen
Alles was außerhalb dieser Tags ist, wird genau so dann angezeigt bzw. wenn es HTML ist als HTML interpretiert ausgegeben. (siehe bspw das p-tag,div-tag,small-tag

An das Template werden die JSON-Daten mit dem prefix data übergeben.

Beispielobjekt

{
	"einarray": ["eins", "zwei"],
	"einobjekt": {
		"attribut1": 1,
		"attribut2": 2
	},
	"einezahl": 123,
	"eintext": "einszweidrei"
}

Attribute
Innerhalb des Templates sind alle Attribute über das prefix data erreichbar.

Am obigen Beispiel wären die beiden folgenden Attribute wie folgt ausgebbar

<%- data.einezahl %>
<%- data.eintext %>

Innerhalb von Datenobjekten kann es wiederum verschachtelt Objekte und auch Arrays geben.
Objekte sind an geschweiften Klammern {} zu erkennen und Arrays [] an eckigen Klammern erkennbar

Arrays
Arrays können über einen Index angesprochen werden. Der Index beginnt immer mit 0. allerdings gibt es auch unechte Arrays, bei denen der Index nicht mit 0 beginnt oder gar aus Text besteht. Hier gelten die Regeln für Objekte
am obigen Beispiel wäre dies

<%- data.einarray[0] %>
<%- data.einarray[1] %>

versucht man direkt ein Array ohne index auszugeben, gibt das template alle Elemente mit Komma getrennt aus

<%- data.einarray %>

Arrays können ebenfalls auf einer Auflistung von Objekten bestehen. Das hier vorliegende Beispiel enthält nur ein einfaches Array. Ein Beispiel zu Array mit Objekten erfolgt zu einem späteren Zeitpunkt.

Um ein Array von Anfang bis Ende abzuklappern benötigt man eine Schleife

<% for (var i = 0; i<data.einarray.length;i++) { %>
<%- data.einearray[i] %>
<% } %>

Zeile 1: Start der Schleife und initialisierung der Zählervariable mit 0, dann wird bei jedem Druchgang geprüft, ob Schleife zuende ist, hier wird geprüft, ob die Zählervariable kleiner der Anzahl der Elemente im Array (hier 2), dann wird die Zählervariable nach jedem Durchgang mit i++ um eins erhöht, dann Start eines Blocks mit einer geschweiften Klammer, alles was innerhalb der geschweiften Klammer ist, wird in einem Schleifendurchgang ausgeführt.
Zeile 2: Ausgabe des Elements
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer

Objekte
Objekte konnen einzelne Attribute, Arrays oder wiederum wieder Objekte enthalten. Dadurch können JSON-Daten in beliebieger Tiefe verschachtelt sein.

Attribute eines Objektes können über eine Punktnotation oder Klammernotation angesprochen werden.
Die Punktnotation funktioniert nur, wenn das Attribut bestimmten Namenskonventionen entspricht (Erstes Zeichen muss Buchstabe sein, Rest Zahlen oder Buchstaben oder Unterstrich).
Die Klammernotation funktioniert auch bei Attributen, die nicht der Namenskonvention entspricht.

Punktnotation

<%- data.einobjekt.attribut1 %>

Klammernotation

<%- data.einobjekt["attribut1"] %>

Auch hier kann in einem Attribut nicht nur einer der einfachen Datentypen (text,zahl,bool,etc) gespeichert sein sondern auch wieder ein Array und wieder ein Objekt

Schleife über die Attribute eines Objekts

<% for (var prop in data.einobjekt) { %>
  <%- "data.einobjekt." + prop + " = " + data.einobjekt[prop] %>
<% } %>

Zeile 1: Schleife über alle Attribute eines Objektes, hier data.einobjekt und eine geschweifte Klammer für den Start eines Blocks. Alles was innerhalb dieses Blocks steht wird bei jedem Durchlauf ausgeführt und ausgegeben
Zeile 2: Ausgabe eines Textes (innerhalb der Anführungszeichen, sowie den Inhalt des Attributs
Beispiel einer Ausgabenzeile:
data.einobjekt.attribut1 = 1
Zeile 3: Schließen der Schleife mit einer geschweiften Klammer

Fortgeschrittene Anwendung
In den obigen Beispielen wurde nur die reine Ausgabe behandelt. Das Template kann nun auch mit HTML-Tags angereichert werden, um ein bestimmtes Layout zu erreichen. Hier ein Beispiel:

<h3>Datenausgabe</h3>
<style>
.meinecssklasseproperty {
color:green;
}
.meinecssklassedata {
color:red;
}
</style>
<% for (var prop in data.einobjekt) { %>
  <span class="meinecssklasseproperty"><%- "data.einobjekt." + prop + " = " %></span><span class="meinecssklassedata"><%- data.einobjekt[prop] %></div>
<% } %>

So das wars für den Anfang. Fröhliches Testen und ausprobieren.
ich freue mich auf Rückmeldungen.

[OliverIO]

Durch die Aktualisierung des Adapters gibt es nun die Möglichkeit innerhalb des Template, neben dem JSON-Datenobjekt auch noch die Werte weiterer Datenpunkte zur Verfügung zu stellen.
Nähere Bescheibung dazu in der widget-Hilfe

[OliverIO]

Der Adapter in dem sich das JSON Template widget für vis-2 befindet wurde aktualisiert

Neue Version 1.0

• das feature async/await wurde ergänzt, d.h. auch hier können nun Funktionen mit async/await definiert und verwendet werden.

Das widget für vis-1 befindet sich noch im Adapter rssfeed.

[OliverIO]

Nachfolgeadapter und Neue Version

Um die Verwirrung nun am Ende geradezurücken, habe ich nun das vis1 und vis2 widget in einem neuen Adapter zusammengeführt.

vis-jsontemplate

Sobald dieser Adpter ausreichend getestet wurde, wird der Adapter vis-2-widgets-ovarius, sowie das jsontemplate widget im adapter rssfeed entfernt.
Da das der erste Adapter ist, der eine voneinander unabhängige Version eines widgets von vis1 und vis2 beinhaltet ist er auch ein kleines Experiment.

Daher würde ich mich freuen, wenn das ein paar Leute testen würden. Der Adapter kann auch parallel zu rssfeed und vis-2-widgets-ovarious installiert werden.

Funktional hat sich ersteinmal nichts geändert. Der Adapter ist aktuell nur auf github verfügbar:
https://github.com/oweitman/ioBroker.vis-jsontemplate
Die Verfügbarkeit im beta channel dauert ja immer ein weilchen.

[mcm1957]

@oliverio said in Test Widget json template:

Die Verfügbarkeit im beta channel dauert ja immer ein weilchen.

Eine Veröffentlichung auf npm ist davon aber unabhängig und in vielen (nicht allen) Fällen durchaus sinnvoll. npm Pakete können trivial im UI durch Angabe der url paketname@latest oder paketname@version installiert werden.

[OliverIO]

@mcm1957 wenn das ein gewünschter weg ist, erwähne ich ihn gerne extra nochmal

[mcm1957]

@oliverio
Es ist ein durchaus zulässiger Weg.
Für eine heiße Testphase (Updates ohne neue Releases) ist eine Installation github sicher sinnvoll.
Für eine eher kühlere Phase wo es schon Releases gibt sind npm installation m.E. gut geeigent da dort versioniert wird.

Beides hat Vor- und Nachteile und ist zum Testen voll OK.

[trojanhector]

@oliverio Servus,
ich versuche vis-jsontemplate zu installieren. Den Adapter habe ich über die Adapter/npm heruntergeladen. Er wird mir in der Version 4.0.2 angezeigt. Eine Instanz sehe ich nicht. Ich verstehe, dass das hiermit zusammenhängt:
"This adapter does not have a configuration dialog in the admin area."

Ein iobroker upload wie in der Doku schlägt fehl. Da fehlt wohl das 'vis-' vor jsontemplate.

Du hast geschrieben, das der neue Adpater neben rssfeed und ovarious paralell installiert werden kann, aber ich sehe im Editor kein Widget.

Muss ich noch was einstellen?
Meine Config:
admin: 7.7.2
vis-2: 2.13.4
node.js: 22.19.0
js-controller:7.0.7

[OliverIO]

@trojanhector

habe gerade auf dem testserver den mal deinstalliert und neu installiert.
ja der adapter hat kein konfigdialog. eine instanz wird automatisch angelegt

so sieht das dann in vis-2 aus

was du mal machen kannst ist nochmal den upload knopf zu drücken
das geht über expertenansicht bei den adaptern

wenn immer noch nicht, dann bitte auf der konsole

iob upload all

wenn es wieder nicht funktioniert, schau in der browser konsole mal bitte nach ob da fehler erscheinen. hatten wir das bei dir nicht schonmal, das vis2 adapter probleme hatten die daten hochzuladen

[trojanhector]

@oliverio Weder der Upload Knopf noch iob upload all haben was gebracht.

Das erhalte ich, wenn ich den Editor leer starte.

Edit:

Davor konnte ich noch das sehen:

[OliverIO]

@trojanhector
leider betrifft keiner der fehler das widget.
kannst du bitte im networktab schauen, da müst was von customwidgets stehen, uU auch mehrfach. aber eins davon betrifft das vis-jsontemplate

den vis-2 adapter auch mal explizit stoppen/neu starten, das macht auch noch was im hintergrund.
den browser auch mal mit geleertem cache neu laden lassen.
du scheinst firefox zu haben, da mit CRTL+F5

[trojanhector]

@oliverio Ich habe alles gemacht. Ich kann kein custom-widget für json-template finden. Nur rss und ovarious.

[OliverIO]

@trojanhector

ohne fehlermeldung kann ich nix machen.
wie gesagt hier lädt alles. von der grundstruktur ist er wie vis-2-widgets-ovarious, nur das da jetzt vis1 und vis2 gemeinsam in einem adapter ist.

wen customWidgets nicht erscheint und auch keine Fehlermeldung dazu, dann lädt vis2 das nicht. an der Stelle kann ich selbst noch nicht eingreifen.

Allerdings denke ich eher das es an deinem Gesamtsystem liegt.
Hattest du nicht schon mit vis-2-rssfeed probleme?
https://forum.iobroker.net/topic/31294/test-support-für-adapter-rssfeed-und-vis-2-widgets-rssfeed/662?_=1757604046972

[OliverIO]

@trojanhector

ich habe nochmal tiefer geforscht, auch wegen eines anderen problems noch. beides hat wahrscheinlich nichts mit deinem problem zu tun, da aus irgendeinem grund bei dir das widget von vis-2 nicht geladen wird.
aktuell versuchte jemand in einem thread ebenfalls das zu laden, da hat es funktioniert, aber wegen dem anderen problem hat es dann das widget nicht richtig angezeigt.

das ist (hoffentlich) in version 4.1.0 behoben.
probiere da mal zu aktualisieren, evtl haben wir glück.
aber wie schon angemerkt denke ich, das an deinem system grundsätzlich noch irgend etwas krumm ist.

[OliverIO]

Neue Version 4.1.0

• das widgetset musste in vis-2 umbenannt werden. mit dem bisherigen name konnte das widget in der runtime nicht angezeigt werden (im edit mode allerdings schon)
  wer den adapter bereits verwendet muss das bisherige widget löschen und neu setzen, da durch das umbenennen des sets für vis das ein neues widget ist.
  ggfs notiert ihr euch vor dem update alle einstellungen, da auf diese nach dem update nicht mehr zugegriffen werden kann

[trojanhector]

@oliverio Moin,
Erstmal, heute morgen geht es. Ich sehe die Widgets im Editor. Allerdings in Version 4.0.2 Habe auch github und npm durchsucht. Da steht auch noch nix von 4.1.0
Aber jetzt schaue ich erstmal, wie es mit dem neuen Teil weitergeht.

[trojanhector]

@oliverio Im Editor geht es jetzt, aber im Browser (Firefox) bekomme ich ein 'Unbekannter WidgetTyp'

Ich habe die vis-2 neu gestartet und den Browsercache komplett gelerrt und danach den Browser neu gestartet.

[OliverIO]

@oliverio sagte in Test Widget json template:

das widgetset musste in vis-2 umbenannt werden. mit dem bisherigen name konnte das widget in der runtime nicht angezeigt werden (im edit mode allerdings schon)

Es dauert immer eine Weile bevor ein neues Release im Beta Channel auftaucht. Ich glaube das wird nur 2 mal am Tag aktualisiert.

[trojanhector]

@oliverio Servus,
irgendwie klappt das mit dem Download der 4.1.0 Version noch nicht. Steht da noch eine Prüfung oder Bestätigung aus?

[OliverIO]

@trojanhector

hm, ja das ist ein Ding.
Irgendwie hab ich den release Befehl hier nicht ausgelöst.
Also lag an mir.

Daher kommt nun Version 4.1.2
Sorry

---

Version ist da
Wer es noch schneller haben will,
kann über den Expertenmodus/Octocat-Knopf/NPM
direkt von npm installieren