Fehler VIS-2 Widget Inventwo

[skvarel]

@jkvarel .. kannst du dir das Thema mal bitte angucken

[Longbow]

Guten Morgen,

es ist wirklich so, das es mal geht mal geht es nicht. Der Fehler das Problem kann nicht respondiert werden.
Es muss was mit den Browser zu haben, das die was von dem Widget falsch verarbeiten. Habe es mit und ohne VPN probiert, mit und ohne Wlan im netz und von Extern. Über ioborker Pro etc.

Mal ist es so, mal ist es nicht so. Keine Ahnung was und wo wir machen sollen und können.

[Longbow]

@skvarel @jkalver danke Euch

[skvarel]

@longbow sagte in Fehler VIS-2 Widget Inventwo:

@skvarel @jkalver danke Euch

Ich kann da leider nicht viel helfen, außer meinem Bengel auf die Füße zu treten

Wir haben leider auch keine Apple Geräte im Haushalt und können das nicht wirklich nachstellen.

[OliverIO]

@skvarel

du könntest eine alphaversion machen wo du ungefähr den folgenden code einbaust. dieser leitet die ausgaben von console.log/warn/error in ein html element um.

das kann man sogar direkt in vis2 ausprobieren. allerdings klinkt sich der code wahrscheinlich bzu spät ein, so das der fehler bereits passiert ist und daher nicht mehr erfasst wird.
in der alpha version müsste man dafür sorgen, das das so früh als möglich ausgeführt wird.
also am besten in die index.html mit einbauen.
https://github.com/inventwo/ioBroker.vis-2-widgets-inventwo/blob/main/src-widgets/index.html

in vis2 kann man das wie folgt mal probieren:

html widget mit namen mylog anlegen

hier zum importieren mit testcode

Spoiler

[
 {
   "tpl": "tplHtml",
   "data": {
     "bindings": [],
     "name": null,
     "comment": null,
     "class": "mylog",
     "filterkey": null,
     "multi-views": null,
     "locked": null,
     "g_fixed": true,
     "html": "<script>\r\n    console.log(\"log test\");\r\n    console.warn(\"warn test\");\r\n    console.error(\"error test\");\r\n    console.debug(\"debug test\");\r\n</script>",
     "refreshInterval": null,
     "g_common": true
   },
   "style": {
     "bindings": [],
     "left": 28,
     "top": 70,
     "width": "711px",
     "height": "331px"
   },
   "widgetSet": "basic",
   "_id": "i000001"
 }
]

css im css reiter eintragen

Spoiler

   .mylog {
     font-family: monospace;
     white-space: pre-wrap;
     background: #222;
     color: #eee;
     padding: 10px;
     border-radius: 6px;
     max-height: 300px;
     overflow-y: auto;
     margin: 20px;
   }
   .mylog .log    { color: #bada55; }
   .mylog .warn   { color: #ffae42; }
   .mylog .error  { color: #ff5555; }
   .mylog .debug  { color: #66b3ff; }

javascript in skripte reiter eintragen

Spoiler

   (function() {
     const orig = {
       log:   console.log,
       warn:  console.warn,
       error: console.error,
       debug: console.debug,
     };

     function appendLog(type, args) {
       const $log = $('.mylog');
       // Zeile bauen
       const msg = Array.from(args).map(a => {
         // Objekt? Dann JSON serialisieren.
         if (typeof a === 'object' && a !== null) {
           try {
             return JSON.stringify(a);
           } catch { return '[object]'; }
         }
         return String(a);
       }).join(' ');
       $log.append($('<div>').addClass(type).text(`[${type}] ${msg}`));
       $log.scrollTop($log[0].scrollHeight);
     }

     // Funktionen überschreiben
     ['log', 'warn', 'error', 'debug'].forEach(function(type) {
       console[type] = function(...args) {
         appendLog(type, args);
         orig[type].apply(console, args);
       };
     });
   })();

in den runtime mode gehen und reload der seite durchführen

[skvarel]

@oliverio .. wie gesagt, das muss sich @jkvarel angucken.

Ich bin nur der Designer vom vis-icontwo Adapter. Die Widget Adapter macht komplett mein Sohn.

[OliverIO]

@skvarel sagte in Fehler VIS-2 Widget Inventwo:

Die Widget Adapter macht komplett mein Sohn.

ah jetzt, kenne eure rollen und arbeitsteilung nicht.
Dein Bengel hätte auch die liebevolle Bezeichnung für deinen Adapter sein können

[skvarel]

@oliverio sagte in Fehler VIS-2 Widget Inventwo:

Dein Bengel hätte auch die liebevolle Bezeichnung für deinen Adapter sein können

In dem Fall ist mein Bengel tatsächlich mein Sohn

Kurz zum Hintergrund: Er ist reiner Programmierer aber kein Nutzer. Er hat mit dem ioBroker sonst nichts zu tun. Deswegen kommen manche Dinge erst im Nachhinein ans Licht. Hauptsächlich wenn ich mit dem ioBroker arbeite.

Ich habe jetzt meine ganze VIS in VIS2 nachgebaut .... 26 Views mit rund 1.000 Widgets. Da kamen noch zwei/drei Sachen auf, die er beheben muss.

[OliverIO]

@oliverio sagte in Fehler VIS-2 Widget Inventwo:

javascript in skripte reiter eintragen

noch ein gedanke zum code was mir eingefallen ist.
evtl müsste man die meldungen zunächst auch erst noch in einer variable puffern, da die ausgabe in mylog erst erfolgen kann, wenn das html element existiert. alle meldungen zuvor wären dann ebenfalls verloren.

hier nochmal ein optimierter code

Spoiler

   (function() {
     const orig = {
       log:   console.log,
       warn:  console.warn,
       error: console.error,
       debug: console.debug,
     };
     let mylog = []

     function appendLog(type, args) {
       const $log = $('.mylog');
       // Zeile bauen
       const msg = Array.from(args).map(a => {
         // Objekt? Dann JSON serialisieren.
         if (typeof a === 'object' && a !== null) {
           try {
             return JSON.stringify(a);
           } catch { return '[object]'; }
         }
         return String(a);
       }).join(' ');
       mylog.push({type,msg})
       $log.append($('<div>').addClass(type).text(`[${type}] ${msg}`));
       $log.scrollTop($log[0].scrollHeight);
     }
     function output(){
       $log.html("");
       mylog.forEach(line=>{
         $log.append($('<div>').addClass(line.type).text(`[${line.type}] ${line.msg}`));
         $log.scrollTop($log[0].scrollHeight);

       })

     }

     // Funktionen überschreiben
     ['log', 'warn', 'error', 'debug'].forEach(function(type) {
       console[type] = function(...args) {
         appendLog(type, args);
         orig[type].apply(console, args);
       };
     });
   })();

[Longbow]

@oliverio Könnte dein Sohn schon mal schauen? Es geht von 20x nur 1x kann es aber auch nicht nachbauen.

[skvarel]

@longbow sagte in Fehler VIS-2 Widget Inventwo:

@oliverio Könnte dein Sohn schon mal schauen? Es geht von 20x nur 1x kann es aber auch nicht nachbauen.

.. ich denke, du meinst meinen Sohn

@jkvarel ... guckst du bitte hier.

[jkvarel]

Ich habe den Code eingefügt. @Longbow , bitte Version 0.3.4 installieren und den Schritten 1, 2 und 4 von @OliverIO folgen

[jkvarel]

Bitte Version 0.3.5 nutzen. Beim Testen des Codes hatte ich das Universal Widget auskommentiert und vor dem Hochladen vergessen wieder mit reinzunehmen.

[Longbow]

@jkvarel die Version installiert, nur leider wenn ich das wie @Oliver-0 beschrieben hat, bleibt die Seite schwarz, es wir gar nichts angezeigt

hab gerade im Log geschaut, das steht da

Invalid pattern on subscribe: The pattern ""bindings": [], "left": 28, "top": 70, "width": "711px", "height": "331px"" is not a valid ID pattern

web.0
2025-08-10 16:06:17.317	error	Invalid pattern on subscribe: The pattern ""tpl": "tplHtml", "data": { "bindings": [], "name": null, "comment": null, "class": "mylog", "filterkey": null, "multi-views": null, "locked": null, "g_fixed": true, "html": "<script>\r\n console.log(\"log test\")" is not a valid ID pattern

web.0
2025-08-10 16:03:35.816	error	Invalid pattern on subscribe: The pattern ""bindings": [], "left": 28, "top": 70, "width": "711px", "height": "331px"" is not a valid ID pattern

web.0
2025-08-10 16:03:35.815	error	Invalid pattern on subscribe: The pattern ""tpl": "tplHtml", "data": { "bindings": [], "name": null, "comment": null, "class": "mylog", "filterkey": null, "multi-views": null, "locked": null, "g_fixed": true, "html": "<script>\r\n console.log(\"log test\")" is not a valid ID pattern

[OliverIO]

@longbow

ich habe das gerade mal bei mir ausprobiert und es funktioniert.

prüfe nochmal:

1. den skript reiter wieder leeren. der code ist jetzt im widget code enthalten.
2. css mal lassen
3. und zum schluss dann das html widget mit dem namen mylog anlegen wie oben beschrieben.

der start des logs sieht im editor dann so aus

im runtime wird der code leider nicht geladen.

[Longbow]

@oliverio

ich mal das falsch mit dem HTML import wohl..

[OliverIO]

@longbow

was heißt, das steht im html widget?
das ist der code um ein widget zu importieren
das ist nichts was man in das html feld des html widgets einträgt

das sollte so aussehen wenn man das html widget auswählt

und der inhalt des html feldes

[Longbow]

@oliverio Ok das mit dem Import habe ich... aber was ist das HMTL Edit gemeint... das erste bild sieht bei mir auch so aus.

[OliverIO]

@longbow

html edit ist der knopf vom html feld
um den inhalt zu editieren/bearbeiten.

es sollte im edit modus nach dem neuladen des kompletten bildschirmes funktionieren

habe gerade festgestellt, das es im runtime nur funktioniert wenn ein iventwo widget auch angelegt ist, das hatte ich nicht.

und natürlich solltest du prüfen ob du die richtige version geladen hast

0.3.5

[jkvarel]

@longbow Skripte Tab leer lassen. Der Code wird von Adapter hinzugefügt, damit die Logs schon eher weggeschrieben werden. Das CSS aber übernehmen.