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

[jogibear9988]

@smilie108 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

@jogibear9988 1.9.9 visu selber geht eingeschränkt wieder. Startbild geht aber zb menue und javascripte gehen nicht.
auch nicht mit chrome
mfg tom

mir nicht klar welche scripte wo nicht gehen...

hab ein javascript probiert, hat funktioniert. Im startscreen gehen scripte auch.
Welche scripte genau gehen wo nicht?

[jogibear9988]

Sehe gerade blockly macht wohl probleme:

das hab ich geupdatet, schauen was da geändert wurde

[jogibear9988]

So, nun hab ich gefunden was nicht funktioniert... Shame on me.
Ich habe im screenviewer noch mal ein shadowdom eingefügt, damit das zooming richtig funktioniert.
Dies hat aber die script commands kaputt gemacht. Bin ich gerade am fixen.

[jogibear9988]

schaut mal. sollte soweit wieder laufen

[Smilie108]

@jogibear9988 hi
das meiste geht jetzt wieder einzig bei dem #

const radioEl = instance._getDomElement('radioEl');
    radioEl.video.addEventListener('playing', (e) => {

bekomme ich wieder

Uncaught (in promise) TypeError: radioEl.video is undefined

hat sich da für die sachen auch der zugriff geändert ?

Das ist beim player die abfrage ober paying oder pause ist

[jogibear9988]

Fehlt da nicht:

 await instance._waitForChildrenReady()

Das hatten wir doch drin, oder?

[Smilie108]

@jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis & vis-2):

await instance._waitForChildrenReady()

var updatedrun = '0_userdata.0.Multimedia.Radio_Webui.radisender_top_stopplay';
 IOB.setState(updatedrun, false);
export async function init(instance) {
   
    await instance._waitForChildrenReady();
    var updatedrun = '0_userdata.0.Multimedia.Radio_Webui.radisender_top_stopplay';
    const radioEl = instance._getDomElement('radioEl');
    radioEl.video.addEventListener('playing', (e) => {
        IOB.setState(updatedrun, true);
      //  debugger;
        //IOB.setState()
    });
    radioEl.video.addEventListener('pause', (e) => {
        IOB.setState(updatedrun, false);
     //   debugger;
    });
    
}
das gesammte ;) 
Ja is drinn

[Blockmove]

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

schaut mal. sollte soweit wieder laufen

Meine Visu funktioniert nun wieder unter Firefox.
Was mir auffällt ist, dass nun in Firefox der Hintergrund der eCharts schwarz ist, während er vorher in der Background-Color der Seite dargestellt wurde. Das selbe Verhalten hatte ich aber schon immer bei Safari.
In Chrome, Edge, Fully ist es unverändert.

[Smilie108]

@jogibear9988 hi ja das menue und radio im start geht wieder bis auf
das mit dem playerstatus
im chrome bekomme ich seltsamerweise einen aneren fehler

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'addEventListener')
    at Module.init (5bdefe65-e556-4f40-8f64-9ee9320c7b46:16:19)

[jogibear9988]

So, ich habe nun die wired componente gefixt. Das ist ein zeitverhalten wo man nie genau sagen konnte wann es geht.

Nun sendet diese componente selbst das event, d.h. das .video kann weg, oder du kannst den event direkt im designer benutzen:

d.h. du brauchst auch nicht unbedingt javascript, sondern kannst auch ein simple script nutzen...

[jogibear9988]

Du musst aber immer noch den event selbst in die liste eintragen. (ganz unten im properties selector) :

Wenn ich mal zeit habe erzeuge ich für die wired componenten ein manifest, dann werden properties und events richtig angezeigt.

[Smilie108]

@jogibear9988 vielen herzlichen dank du bist echt top

[jogibear9988]

@blockmove

denke das ist dark mode.
Da kann ich nix machen, ist nur ein iframe

[Blockmove]

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

@blockmove

denke das ist dark mode.
Da kann ich nix machen, ist nur ein iframe

Stimmt, hab's gerade ausprobiert.
Hat mich nur gewundert, weil das in vorhergen Versionen von webui nicht in dunkel dargestellt wurde.
Da war es nur unter IOS der Fall.
Da verhalten sich halt Chrome und Firefox unterschiedlich.

[jogibear9988]

@blockmove said in neue Visualisierung "webui" (alternative zu vis & vis-2):

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis & vis-2):

@blockmove

denke das ist dark mode.
Da kann ich nix machen, ist nur ein iframe

Stimmt, hab's gerade ausprobiert.
Hat mich nur gewundert, weil das in vorhergen Versionen von webui nicht in dunkel dargestellt wurde.
Da war es nur unter IOS der Fall.
Da verhalten sich halt Chrome und Firefox unterschiedlich.

ist vlt davon abhängig ob du echarts direkt in firefox &bchrome geöffnet hattest...

[jogibear9988]

neuer icon view:

braucht noch nen virtuellen scroller.... im moment läd er alle icons
und ne suche

[jogibear9988]

und für die screens gibts nun auch ne miniatur grid ansicht:

[Smilie108]

@jogibear9988 hi
wegen grid view
Bei mir kommen nur die 2 screens vom hauptordner

und in der console

Uncaught SyntaxError: redeclaration of const importMapWidgets
    <anonymous> http://192.168.1.173:8082/webui.0.widgets/importmap.js:1
importmap.js:1:1
Uncaught (in promise) TypeError: name is undefined
    getScreen http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:179
    getWebuiObject http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:173
    _loadScreen http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:115
    async*set stretch http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:36
    ready http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:64
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:731
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:720
    IobrokerWebuiScreensView http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:54
    action http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:127
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:199
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:196
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:160
    reload http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:155
    ContextMenu http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:135
    show http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:314
    nodeCtxMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:148
    contextMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:163
    oncontextmenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:800
6dd27de7-9e0c-4408-b0db-b11d9d156967:179:13
Uncaught (in promise) TypeError: name is undefined
    getScreen http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:179
    getWebuiObject http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:173
    _loadScreen http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:115
    async*set stretch http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:36
    ready http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:64
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:731
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:720
    IobrokerWebuiScreensView http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:54
    action http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:127
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:199
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:196
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:160
    reload http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:155
    ContextMenu http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:135
    show http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:314
    nodeCtxMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:148
    contextMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:163
    oncontextmenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:800
6dd27de7-9e0c-4408-b0db-b11d9d156967:179:13
    _loadScreen http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:115
    AsyncFunctionThrow self-hosted:803
    (Async: async)
    set stretch http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:36
    ready http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:64
    InterpretGeneratorResume self-hosted:1412
    AsyncFunctionNext self-hosted:799
    (Async: async)
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:731
    (Async: VoidFunction)
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:720
    IobrokerWebuiScreensView http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:54
    action http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:127
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:199
    (Async: EventListener.handleEvent)
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:196
    forEach self-hosted:157
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:160
    reload http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:155
    ContextMenu http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:135
    show http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:314
    nodeCtxMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:148
    contextMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:163
    oncontextmenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:800
Uncaught (in promise) TypeError: name is undefined
    getScreen http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:179
    getWebuiObject http://192.168.1.173:8082/webui/dist/frontend/common/IobrokerHandler.js:173
    _loadScreen http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:115
    async*set stretch http://192.168.1.173:8082/webui/dist/frontend/runtime/ScreenViewer.js:36
    ready http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:64
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:731
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:720
    IobrokerWebuiScreensView http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:54
    action http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:127
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:199
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:196
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:160
    reload http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:155
    ContextMenu http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:135
    show http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:314
    nodeCtxMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:148
    contextMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:163
    oncontextmenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:800
6dd27de7-9e0c-4408-b0db-b11d9d156967:179:13
Error reading Screen undefined Not exists IobrokerWebuiAppShell.js:392:12
Uncaught (in promise) TypeError: screenDef is undefined
    ready http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:66
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:731
    BaseCustomWebComponentConstructorAppend http://192.168.1.173:8082/webui/node_modules/@node-projects/base-custom-webcomponent/dist/BaseCustomWebComponent.js:720
    IobrokerWebuiScreensView http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiScreensView.js:54
    action http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:127
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:199
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:196
    renderLevel http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:160
    reload http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:155
    ContextMenu http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:135
    show http://192.168.1.173:8082/webui/node_modules/@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js:314
    nodeCtxMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:148
    contextMenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:163
    oncontextmenu http://192.168.1.173:8082/webui/dist/frontend/config/IobrokerWebuiSolutionExplorer.js:800
3aabbe5e-dcf2-4f28-9652-5f3b5860f65b:66:17

​```

![d962b0c7-da91-4ba2-8edc-e8c121cac490-grafik.png](/assets/uploads/files/1717302048232-d962b0c7-da91-4ba2-8edc-e8c121cac490-grafik.png) 

egal ob firefox oder chrome

Mfg tom

[jogibear9988]

@smilie108

und fixed

[TimK]

Hallo

ich muss mal eine Frage zu den Bindings stellen.
Irgendwo habe ich da etwas nicht verstanden.

<input type="checkbox" bind-prop:checked="=0_userdata.0.Test"> 

das funktioniert bei mir.

Weil ich viele davon brauche, möchte ich daraus ein Control bauen

<div>
    <input type="checkbox" bind-prop:checked="?this.signal"><span>Test</span>
</div>

so habe ich es dann eingebunden:

<webui-button bind-prop: signal="0_userdata.0.Test"></webui-button>

das wird aber leider nicht verbunden.

Ich habe auf den Testseiten ja gesehen, das das bei Euch funktioniert.

Ich habe mein Problem mal auf dem Testserver nachgebaut:
der Screen heist dort: checkbox_Test.
und das Control heist TimCheckbox

liebe Grüße aus Hamburg