neue Visualisierung "webui" (alternative zu vis & vis-2)

Martin 5

Hallo,

vorweg wünsche ich allen einen guten Rutsch ins neue Jahr.

Ich habe ein Control angelegt um eine Zeile in einer "Tabelle" mit Messwerten zu erzeugen. Da verschiedene Einheiten vorhanden sind und alles trotzdem übereinander stehen soll würde ich dem Control gern mitteilen wie breit das Feld für die Einheit werden soll.

<div class="flex">
    <span class="text">[[?this.name]]</span>
    <span class="wert" bind-content:html="?wert">???</span>
    <span class="einheit">[[?this.einheit]]</span>
</div>

Dazu die Style Daten.

div.flex {
    display: flex;
}

span.text {
    width: 100%;
    text-decoration: none;
    color: black;
}

span.wert {
    text-align: right;
    margin-left: auto;
}

span.einheit{
    text-align: left;
    margin-left: 5px;
    width: 50px;
}

Die "50px" (auch als 3em oder so) würde ich dem Control gern über ein Property mitteilen. Also so etwas wie

width: ?propertyname;
oder
width: [[?this.propertyname]];

im Style.

Das soll etwa so aussehen:

Die Messwerte sollen dann nach Bedarf erweitert werden, ich weiß aber noch nicht wie lang die größte Einheit wird.

Kann man das irgendwie machen?

Grüße Martin

Martin 5

Hallo,

allen ein gesundes und erfolgreiches Neues Jahr.

Mal eine Nacht drüber schlafen und man kommt selber drauf. :-)

<span class="einheit" bind-css:width="??propertyname">[[?this.einheit]]</span>

Grüße Martin

Kamikaze

Auch von mir ein gutes neues Jahr und das es so erfolgreich wie 2025 wird.
Es ist wieder soweit, ich stehe auf dem Schlauch.
Ziemlich einfaches Szenario, aber ich bekomme es nicht hin.
Ich möchte mit chart.js meine eigenen Grafiken bereitstellen.
Über einen Datenpunkt im iobroker lege ich die Parameter für die Grafik fest.
In einem früheren Post hat jogibear davon gesprochen, dass man auch seine Lösung verwenden kann. Auf dem testserver finde ich hierzu nicht passendes.
Also meine Frage:
Wie und wo muss ich genau die Chart.js Komponenten einbinden, damit ich diese in einem Control verwenden kann und dann auf den Screens platzieren kann.
Es gibt ja scheinbar zwei Möglichkeiten, einmal über das Internet und CDN und einmal über webcomponents.
Idealerweise hätte ich gern für beide Lösungen ein konkretes Beispiel.

Kamikaze

Möglicherweise hängt das ja mit der Verrsion 1.39 zusammen.
Ich erhalte bei einer vollständig neuen Installation mit einem Screen der nur ein span element enthät in der Konsole folgende Fehlermeldung:

importmap.js:1   Failed to load resource: the server responded with a status of 404 (Not Found)
importmap.js:1   Failed to load resource: the server responded with a status of 404 (Not Found)
IobrokerHandler.js:113 ioBroker handler ready.
:8082/webui.0.widgets/importWidgetFilesRuntime.js:1   Failed to load resource: the server responded with a status of 404 (Not Found)
es-module-shims.js:1087  Uncaught (in promise) TypeError: 404 Not Found http://192.168.110.10:8082/webui.0.widgets/importWidgetFilesRuntime.js
    at doFetch (es-module-shims.js:1087:21)
    at async defaultSourceHook (es-module-shims.js:1101:15)
    at async fetchModule (es-module-shims.js:1127:10)
    at async es-module-shims.js:1206:58
    at async loadAll (es-module-shims.js:722:5)
    at async topLevelLoad (es-module-shims.js:853:5)

Kamikaze

Also das ursprüngliche Problem mit Chart.js konnte ich selber lösen.
Bleiben nur noch die obigen Fehlermeldungen.

jogibear9988

Schau den Screen "aaa" an. Ich hab eine Beispiel Komponente mit chartjs gebaut. Ich hab das als NPM Module installiert.
Per CDN denke ich geht auch, probier ich jetzt aber nicht.
Ich finde CDN doof, will ja in der Hausautomation nicht abhängig von einem CDN sein.

Smilie108

@jogibear9988
Update hat fehler weis aber nicht ob das nur bei mir ist :
iobroker npm error A complete log of this run can be found in: /home/iobroker/.npm/_logs/2026-04-13T17_29_34_888Z-debug-0.log
host.iobroker-kramsach-live
2026-04-13 19:29:39.374 info iobroker npm error code 1npm error path /opt/iobroker/node_modules/iobroker.webuinpm error command failednpm error command sh -c npm run bundleMonaco && npm run bundleToastify
host.iobroker-kramsach-live
2026-04-13 19:29:39.247 info iobroker const result = binding.readdir( ^Error: ENOENT: no such file or directory, scandir '/opt/iobroker/node_modules/iobroker.webui/node_modules/monaco-editor/esm' at Object.readdirSync (node:fs:1590:26) at walkDir (file:///opt/iobroker/node_modules/iobroker.webui/_patchAndMinifyMonaco.js:11:26) at file:///opt/iobroker/node_modules/iobroker.webui/_patchAndMinifyMonaco.js:30:1 at ModuleJob.run (node:internal/modules/esm/module_job:343:25) at async onImport.tracePromise.proto (node:internal/modules/esm/loader:665:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:117:5) { errno: -2, code: 'ENOENT', syscall: 'scandir', path: '/opt/iobroker/node_modules/iobroker.webui/node_modules/monaco-editor/esm'}Node.js v22.22.2

Smilie108

jogibear9988

Sollte wieder laufen....

Sorry.

Smilie108

@jogibear9988 Mhm noch ne rage unter firefox bekomme ich beim öffnen des editors immer die meldung Error occured, check console
Fehler bei der Rechteabfrage:

Konsole :

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf https://192.168.2.30:3010/api/session. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler bei der Rechteabfrage: TypeError: NetworkError when attempting to fetch resource. IobrokerWebuiAppShell.js:397:12
error http://192.168.2.30:8082/webui/dist/frontend/config/IobrokerWebuiAppShell.js:397
checkPermissions http://192.168.2.30:8082/webui/ line 99 > injectedScript:27
<anonym> http://192.168.2.30:8082/webui/ line 99 > injectedScript:38
init http://192.168.2.30:8082/webui/dist/frontend/common/IobrokerHandler.js:99
<anonym> http://192.168.2.30:8082/webui/dist/frontend/config/IobrokerWebuiAppShell.js:5

kannst du damit was anfangen ?

Mfg und danke das teil geht echt gut ;)

jogibear9988

Nö, kommt bei mir nicht? Welche FF Version?
Kommt das vlt von einem FF Addon?

Smilie108

FF ist 149.0.2 (64-Bit) ok vileicht auch irgend eine konstelation die nicht nachfolziebar ist kommt auch nur beim Start vom webui danach nicht mehr. eventuell habe ich auch irgendwo eine var verwendet auf die er keinen zugriff mehr hat. muss das teil sowiso mal neu installieren mit der ganzen testerei kann da schon was zurück bleiben ;)

Danke für die info

Smilie108

mhm @jogibear9988 ab Version 1.39.0 hat sich glaub ich ein fehler eingeschlichen. Seit dieser version vunktioniert das menue von mir nicht mehr das per clickscript auf die class (.sidebar) geht wegen dem schließen der sidebar wenn ein menuepunkt angeklickt wurde.
hab sogar alles nochmal neu installiert gehabt bis ich drauf gekommen bin ;)

jogibear9988

kannst mir das als beispiel ins demo repo machen? (muss es aber leider bei mir lokal testen, kann auf die VM des demorepos nicht mehr zugreifen und bekomme dort die neuste version nicht installiert)

jogibear9988

meinst du das menü:

geht bei mir....

Smilie108

@jogibear9988 habes dir unter smilie108 menue test abgelegt bei 1.29.0 gehts auch bin auf die zurück. Menue öffnen passt aber wenn ich dann einen menuepunkt anklicke läde er auch das bild macht aber das menue nicht mehr zu

jogibear9988

Sollte mit dem release in ein paar min gefixt sein, sorry....
Haben ein neues feature eingebaut, das man einen Dialog anzeigen kann und eine negative Antwort im dialog, alle script befehle danach abbricht.... das hab ich in webui noch nicht umgebaut gehabt....
Kommt in webui demnächst auch. Ging zwar auch vorher schon mit dialogResult uund condition... aber sollte dann einfacher sein

Smilie108

@jogibear9988 ok grad geupdatet auf 1.42.1 da gehts nicht wenn ich wieder auf 1.39.0 gehe gehts oder muss ich irgendwass ändern ?
hab dann auch folgendes im log web.0
2026-04-28 03:41:35.660 error [getState] ERROR: Error: The id is empty! Please provide a valid id.
web.0
2026-04-28 03:41:35.660 error [getState] ERROR: Error: The id is empty! Please provide a valid id.
web.0
2026-04-28 03:41:35.657 error [getState] ERROR: Error: The id is empty! Please provide a valid id.
web.0
2026-04-28 03:41:35.027 info ==> Connected system.user.admin from ::ffff:192.168.2.186
web.0
2026-04-28 03:41:34.796 info <== Disconnect system.user.admin from ::ffff:192.168.2.186 energiefluss-erweitert.0
web.0
2026-04-28 03:41:34.793 info <== Disconnect system.user.admin from ::ffff:192.168.2.186
webui.0
2026-04-28 03:41:29.736 info runCommand: uiConnected, parameter:

jogibear9988

sorry, es gab noch ein fehler und das release lief nicht durch, nun sollte es gehen

Smilie108

@jogibear9988 Ja jetzt gehts ;) Vielen dank einstweilen

Community Forum

NEWS

neue Visualisierung "webui" (alternative zu vis & vis-2)

Support us

496

32.8k

82.9k

1.3m