Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[andibr]

Hallo zusammen
Ich wünsche allen ein erfolgreiches 2022 und mögen eure Projekte gelingen.

Ich habe mir über die Festtage ein paar Shelly verbaut (3EM und 1PM) und möchte die Messwerte nun in einer einfachen, unsichtbaren Tabelle auf der VIS darstellen.

Bis jetzt habe ich trotz der Suche noch nicht das gefunden was ich suche. Ich habe jetzt mit dem Widgets "Number" einfach die Daten und Beschreibungen zusammen gestellt, aber damit ist es ja beinahe nicht möglich das ganze optisch ansprechend zu platzieren. Gibt es da eine einfache Möglichkeit alle Widgets im Hintergrund und Unsichtbar in eine Tabelle zu verknüpfen? Oder geht das nur über JSON und Javascript?

Vielen Dank für Tips

[darkblu]

@andibr ,
genau so etwas suche ich auch.
Eine stink normale Tabelle, wie z.b. in Word.
Man wählt x Spalten und y Zeilen und kann bei Bedarf
die Linien und Zellen noch editieren.
Eine html Tabelle hab ich auch schon probiert, gefiel mir aber nicht.

[Segway]

@andibr
Weiss grad nicht ob sowas out of the box geht. Aber kann sowas helfen ?

Link zu anderem Thema

[Homoran]

@andibr sagte in Werte darstellen in Tabellenform:

Ich habe jetzt mit dem Widgets "Number" einfach die Daten und Beschreibungen zusammen gestellt, aber damit ist es ja beinahe nicht möglich das ganze optisch ansprechend zu platzieren.

wieso nicht?

Diese Seite ist exakt so mit gefühlt 100 Widgets konstruiert.
Dafür gibt es doch die Ausrichthilfen oben in der Werkzeugleiste

[andibr]

@homoran
Ja, dann muss ich das nochmals probieren.
Wie man auf meinen png sicher sehen kann, ist das ganze ja nicht wirklich angeordnet. Vieleicht habe ich einfach zu wenig Geduld oder nicht eine genügend ruhige Hand um die Felder wirklich richtig plazieren zu können.

Aber danke für den Hinweis, dass ich mich da nicht auf einem völligen "Irrweg" befinde, und andere etwas machen/haben will was "daneben" ist.

Gruss Andi

[OliverIO]

@andibr sagte in Werte darstellen in Tabellenform:

Hallo zusammen
Ich wünsche allen ein erfolgreiches 2022 und mögen eure Projekte gelingen.

Ich habe mir über die Festtage ein paar Shelly verbaut (3EM und 1PM) und möchte die Messwerte nun in einer einfachen, unsichtbaren Tabelle auf der VIS darstellen.

Bis jetzt habe ich trotz der Suche noch nicht das gefunden was ich suche. Ich habe jetzt mit dem Widgets "Number" einfach die Daten und Beschreibungen zusammen gestellt, aber damit ist es ja beinahe nicht möglich das ganze optisch ansprechend zu platzieren. Gibt es da eine einfache Möglichkeit alle Widgets im Hintergrund und Unsichtbar in eine Tabelle zu verknüpfen? Oder geht das nur über JSON und Javascript?

Vielen Dank für Tips

Wenn es nicht so viele Datenpunkte sind und man ein wenig HTML kann, dann könnte man ein HTMLWidget nehmen und direkt dort die Datenpunkte eintragen und mit css formatieren
Vom Schema her würde das dann so aussehen.
Allerdings darf es nicht mehr wie 50 Datenpunkte pro Projekt geben und die Performance ist auf langsameren Geräten evtl auch nicht so optimal.

<table>
<tr>
  <th>Überschrift 1</th>
  <th>Überschrift 2</th>
  <th>Überschrift 3</th>
</tr>
<tr>
  <td>{javascript.0.datenpunkt1}</td>
  <td>{javascript.0.datenpunkt2}</td>
  <td>{javascript.0.datenpunkt3}</td>
</tr>
<tr>
  <td>{javascript.0.datenpunkt4}</td>
  <td>{javascript.0.datenpunkt5}</td>
  <td>{javascript.0.datenpunkt6}</td>
</tr>
</table>

Eine andere Alternative wäre:
https://forum.iobroker.net/topic/31521/test-widget-json-template?_=1641158662846

Hier können auch einzelne Datenpunkte abonniert werden und dann beliebig html css und javascript kombiniert werden.

[andibr]

@oliverio

Da ich mich mit keiner der Programiersprachen wirklich zu recht komme, habe ich es jetzt mit den Platzierungskoordinaten nochmals gemacht. Jetzt sieht es doch schon recht ansprechend aus, aber mir raucht jetzt der Kopf vor lauter Zahlen.

Die anderen Varianten muss ich mir mal in Ruhe anschauen, da blicke ich noch nicht so durch.

Vielen Dank für die Tips
Andi

[OliverIO]

@andibr sagte in [gelöst] Werte darstellen in Tabellenform:

@oliverio

Da ich mich mit keiner der Programiersprachen wirklich zu recht komme, habe ich es jetzt mit den Platzierungskoordinaten nochmals gemacht. Jetzt sieht es doch schon recht ansprechend aus, aber mir raucht jetzt der Kopf vor lauter Zahlen.

Die anderen Varianten muss ich mir mal in Ruhe anschauen, da blicke ich noch nicht so durch.

Vielen Dank für die Tips
Andi

Vis hat aber Knöpfe um mehrere Widgets gleichzeitig auszurichten.
Auch kannst du die Attribute für mehrere Widgets gleichzeitig setzen.
Dazu einfach mehrere markieren entweder mit der Maus alle umkreisen oder oben links im Widget Auswahl Dialog mehrere Widgets ankreuzen.
Dann beispielhaft die Breite und Höhe gleich setzen einfach durch Eingabe der Zahl im entsprechenden Feld auf der rechten Seite.

[andibr]

Vis hat aber Knöpfe um mehrere Widgets gleichzeitig auszurichten.
Auch kannst du die Attribute für mehrere Widgets gleichzeitig setzen.
Dazu einfach mehrere markieren entweder mit der Maus alle umkreisen oder oben links im Widget Auswahl Dialog mehrere Widgets ankreuzen.
Dann beispielhaft die Breite und Höhe gleich setzen einfach durch Eingabe der Zahl im entsprechenden Feld auf der rechten Seite.

Genau so habe ich es gemacht, und danach die Werte für "top" von hand auf der 2 "Spalte" angepasst.

[OliverIO]

@andibr
Ja genau so wird es gemacht.

[Homoran]

@andibr sagte in [gelöst] Werte darstellen in Tabellenform:

Vieleicht habe ich einfach zu wenig Geduld oder nicht eine genügend ruhige Hand um die Felder wirklich richtig plazieren zu können.

du musst die Felder nicht mit der Hand schieben.
Alle interssanten Felder markieren, dann oben z.B. auf das Icon linksbündig ausrichten klicken und anschließend auf das Icon vertikal gleicher Abstand und fertig

ggf. musst du vorher noch eine gemeinsame einheitliche Höhe der Felder über die Widgeteigenschaften einstellen, damit die vertikalen Abstände stimmen