Von Javascript adapter auf das DOM in der vis zugreifen

[iob69]

Hallo,
ich möchte per Javascript (im Javascript-Adapter) auf das DOM in der Vis zugreifen. Z.B. möchte ich eine Liste Anzeigen, welche ich in der Vis per Drag and Drop sortieren kann. Diese soll aber mit der Steuerung funktionieren und deshalb möchte ich das vom Java-Script-Adapter. Dazu müsste ich per

document.getElementById() 

auf die Liste zugreifen.
Bis jetzt kenne ich nur die Schnittstelle per Datenpunke.
Geht das trotzdem irgendwie? Das wäre super, denn ich hab noch viele andere Ideen, für welche ich das brauchen könnte.

[OliverIO]

@iob69

Ja, das geht.
Wobei ich eher das nehmen würde
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
Eine Klasse kannst du dann dem Widget unter General zuordnen.

Noch besser ist jquery um auf die Elemente zuzugreifen. Jquery ist in vis bereits verfügbar

Zu beachten ist, die Widgets werden von vis dynamisch erzeugt und in den DOM eingefügt.
D.h., dass bei vis start die Elemente zunächst nicht existieren und man warten muss, bis die da sind
Hier im Forum gibt es diverse Funktionen, die das periodisch prüfen und dir dann die Möglichkeit geben dir den Code.

Nachtrag
Habe gerade das folgende von deinem Post noch gelesen und verstanden

ich möchte per Javascript (im Javascript-Adapter) auf das DOM in der Vis zugreifen

Alles was im JavaSkript Adapter läuft, läuft auf dem Server. Der Java Skript Tab in vis läuft im Browser.
Daher kann der Skript Adapter den Inhalt mit diesen Befehlen nicht manipulieren. Nur javaSkript in vis kann auf das DOM zugreifen
Du könntest ja auch mit mehreren Browser auf iobroker zugreifen. Der Server weiß ja nur bedingt, welcher Client gemeint ist.

[iob69]

@oliverio
Das heisst also im klartext nein, schade...
Danke trotzdem.

PS: Deine drei letzten Sätze sind schwer zu verstehen. Denke, du arbeitest mit einem speech to txt programm?

[Codierknecht]

@oliverio sagte in Von Javascript adapter auf das DOM in der vis zugreifen:

Alles was im Jahr war Skript Adapter läuft

Soll heißen: Alles was im Jacascript-Adapter läuft ...

[Codierknecht]

@iob69 sagte in Von Javascript adapter auf das DOM in der vis zugreifen:

Das heisst also im klartext nein, schade...

Im Klartext:
Du kann per JS im Browser (Vis) recht einfach auf DP im ioBroker zugreifen.
Der umgekehrte Weg geht IMHO nicht. Wie auch? Der Server (ioBroker) kennt ja den gerade aktiven Client nicht bzw. kommt da nicht ran. Wie @OliverIO schon schreibt: Du kannst ja gleichzeitig mit verschiedenen Clients per Vis auf den Server zugreifen. Welcher soll's dann sein?

[iob69]

@codierknecht
Was ist denn mit "clients" gemeint?
Sorry für meine dummen Fragen, ich weiss da zu wenig wie das aufgebaut ist. Aber soweit ich weiss, ist ja das ganze vis in einem einzigen Java-Modul. Falls ich mich irre, bitte korrigieren. Aber dann würde es ja keine rolle spielen welches view gerade offen ist?

[Codierknecht]

@iob69 sagte in Von Javascript adapter auf das DOM in der vis zugreifen:

Was ist denn mit "clients" gemeint?

Die Browser auf z.B. Deinen Tablets oder dem PC/Mac.
Die "holen" sich das was anzuzeigen ist vom Server (ioBroker, VIS-Adapter). Das können gleichzeitig nahezu beliebig viele sein.
Was da jetzt z.B. in einem der gerade aktiven Browser aktuell gemacht wird (sortieren). kriegt der Server nicht mit.

[OliverIO]

@iob69 sagte in Von Javascript adapter auf das DOM in der vis zugreifen:

@oliverio
Das heisst also im klartext nein, schade...
Danke trotzdem.

PS: Deine drei letzten Sätze sind schwer zu verstehen. Denke, du arbeitest mit einem speech to txt programm?

Ja, habe die Sätze korrigiert. Die diktierfunktion immiphone hat mit JavaScript Schwierigkeiten

[iob69]

@codierknecht
Das macht ja nicht der Browser, sondern der Java-Script-Adapter und das ist immer der selbe.
Vielleicht hab ich mich da nicht richtig ausgedrückt, ich möchte, dass der Javascript-Adapter auf das HTML-Widget zugreifen kann und das steuern kann.

Das mit verschiedenen clients:
Wenn zwei verschiedene browser auf das selbe view zugreifen und dort sachen manipulieren, z.B. eine Steckdose ein und ausschalten, dann ist das ja auch kein problem, ausser dass dann halt der am einen Browser nicht weiss, wieso die Steckdose jetzt wieder ausgeschaltet hat. Aber damit muss man ja auch leben.

[iob69]

@oliverio
Das war ja auch nur ein PS, also eine Randnotiz. Ich hab die Sätze dann nach einer Weile schon verstanden :-). Mit Iphone hat das Iphone offenbar auch Schwierigkeiten

[OliverIO]

@iob69 sagte in Von Javascript adapter auf das DOM in der vis zugreifen:

@oliverio
Das heisst also im klartext nein, schade...

Eigentlich nein. Nur ein laufendes JavaScript kann nicht auf den Browser zugreifen.
Du kannst allerdings JavaScript in einen datenpunkt schreiben und den in einem html Element anzeigen lassen. Aber das ist meist nicht so sinnvoll.

Evtl schreibst du nochmal was du genau vorhast.
Im groben habe ich verstanden:

• Du hast eine Tabelle
• du möchtest den Inhalt bei Klick nach Spalten sortieren

Da muss man beachten, das man den datentyp berücksichtigen muss, da Zahlen numerisch aber auch nach Text sortiert werden können, aber dann andere Ergebnisse herauskommen. Datum ist auch nochmal ein Sonderfall.

Das könnte man so generalisieren, das man in vis ein Standard JavaScript ist, das regelmäßig nach einer css Klasse sucht, wenn gefunden fügt es dort beim Header hoch/runter Pfeile ein und wenn es die typinformation hat, kann es durch Klick entsprechend richtig sortieren. Die typinformation könnte man ebenfalls durch eine zusätzliche css Klasse am Header machen oder durch ein kleines zusatzjavascript, das diese Information liefert.

Wenn du mehr Informationen lieferst, sowie ein echtes Beispiel könnte ich dir sowas bauen. Erzähl auch mal woher die Tabelle kommt. Wer baut die? Du selber mit JavaScript?

[Codierknecht]

@iob69

Z.B. möchte ich eine Liste Anzeigen, welche ich in der Vis per Drag and Drop sortieren kann

Das Sortieren - also das rumfummeln am DOM - kann nur die JS-Engine im Browser.
Du könntest das in dem einen Browser machen, in einen "Zwischen"-Datenpunkt des ioBroker zurückschreiben und dort per Script auf den geänderten Wert reagieren. Also damit den Original-DP aktualisieren. Jeder andere Browser kriegt dann den neuen Wert im Original-DP mit und zeigt den - z.B. anders sortiert - entsprechend an.

[iob69]

@oliverio
Das klingt alles ein bisschen kompliziert. Mit dem DOM wäre das halt (wohl) viel einfacher.
Aber ok, ich hab eine sortierbare Tabelle wie z.B. in angehängter Beispiel-HTML-Datei:
DragAndDrop.html
Achtung, es sollen nicht spalten sortiert werden sondern nur die Reihenfolge der Zeilen (vom Benutzer) per Drag and drop (bitte kurz Datei öffnen und ausprobieren)
Das problem ist, dass ich die Daten, (im Javascript-Adapter) vom Netz hole. Der Benutzer möchte aber je nachdem die Daten in einer anderen Reihenfolge haben. Nun ist im Beispiel ja alles zusammen, css, html und java. Aber ich bräuchte eine Verbindung vom Vis, wo nur die HTML-Tabelle sein soll, welche über einen Datenpunkt vom Javascript-Adapter aus aufgebaut wird. Das würde ja auch funktionieren, soweit bin ich schon.
Das problem ist allerdings bei der Sortierung, dass ich die im javascript-Adapter nicht mitbekomme.
Die Daten (das Model) solle aber im Javascript-Adapter bleiben, da damit auch statistik gemacht wird usw.
Aber ich glaub, wenn es dann zu kompliziert wird, sortier ich das mit Eingabe der ID und knöpfen auf/ab. Ist halt mühsamer.

[Codierknecht]

@iob69
Du könntest ja nach dem drop den ganzen Salat als JSON an den ioBroker senden (temp. DP) und dort wiederum per Trigger auf den DP das JSON verarbeiten und irgendwohin (anderer DP) speichern.

Was jetzt insgesamt komplizierter ist, überlasse ich Dir

[OliverIO]

@iob69

schau mal hier.
aus der tabelle hab ich ein json gemacht und in meinem widget vis-jsontemplate aus dem gleichnamigen adapter dann umgesetzt

datenpunkt 0_userdata.0.table

Spoiler

[
  {
    "Name": "Erika Mustermann",
    "Alter": 34,
    "Stadt": "Hamburg"
  },
  {
    "Name": "John Doe",
    "Alter": 25,
    "Stadt": "New York"
  },
  {
    "Name": "Alice Schmidt",
    "Alter": 41,
    "Stadt": "Stuttgart"
  },
  {
    "Name": "Max Mustermann",
    "Alter": 29,
    "Stadt": "Berlin"
  }
]

template für das widget

Spoiler

<table id="sortable-table"> 
   <tr>
       <td>Name</td>
       <td>Alter</td>
       <td>Stadt</td>
   </tr>
   <% 
   data.map((item)=>{ 
   %>
   <tr draggable="true">
       <td><%- item.Name %></td>
       <td><%- item.Alter %></td>
       <td><%- item.Stadt %></td>
   </tr>
   <%
   });
   %>

</table>
<script>
   const table = document.getElementById('sortable-table');
   let draggedRow = null;

   // Beim Drag Start wird die Zeile gespeichert
   table.addEventListener('dragstart', (e) => {
     if (e.target.tagName.toLowerCase() === 'tr') {
       draggedRow = e.target;
       setTimeout(() => {
         e.target.style.display = 'none'; // Die Zeile wird unsichtbar, wenn sie gezogen wird
       }, 0);
     }
   });

   // Beim Drag Over (über andere Zeilen ziehen)
   table.addEventListener('dragover', (e) => {
     e.preventDefault(); // Notwendig, um das Drop-Ereignis zu ermöglichen
     const targetRow = e.target.closest('tr');
     if (targetRow && targetRow !== draggedRow) {
       const rect = targetRow.getBoundingClientRect();
       const middle = rect.top + rect.height / 2;
       if (e.clientY > middle) {
         targetRow.parentNode.insertBefore(draggedRow, targetRow.nextSibling);
       } else {
         targetRow.parentNode.insertBefore(draggedRow, targetRow);
       }
     }
   });

   // Nachdem der Drag abgeschlossen ist
   table.addEventListener('dragend', (e) => {
     e.target.style.display = ''; // Zeile wieder sichtbar machen
     draggedRow = null;
   });
 </script>

die dragdrop funktioniert wegen vis nur im runtime mode

943f7e6e-b85a-4262-821b-f5a960f61b0a-20251007-1407-11.5596582.mp4

was man noch machen müsste, wäre die gewählte reihenfolge in einen datenpunkt schreiben, so das es das nächste mal genau in der reihenfolge wieder angezeigt werden kann. da wäre ein eindeutige id noch gut.

hier mal noch das widget zum importieren

Spoiler

[{"tpl":"tplJSONTemplate4","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","json_dpCount":"1","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"json_oid":"0_userdata.0.table","json_template":"<table id=\"sortable-table\"> \n    <tr>\n        <td>Name</td>\n        <td>Alter</td>\n        <td>Stadt</td>\n    </tr>\n    <% \n    data.map((item)=>{ \n    %>\n    <tr draggable=\"true\">\n        <td><%- item.Name %></td>\n        <td><%- item.Alter %></td>\n        <td><%- item.Stadt %></td>\n    </tr>\n    <%\n    });\n    %>\n</table>\n<script>\n    const table = document.getElementById('sortable-table');\n    let draggedRow = null;\n\n    // Beim Drag Start wird die Zeile gespeichert\n    table.addEventListener('dragstart', (e) => {\n      if (e.target.tagName.toLowerCase() === 'tr') {\n        draggedRow = e.target;\n        setTimeout(() => {\n          e.target.style.display = 'none'; // Die Zeile wird unsichtbar, wenn sie gezogen wird\n        }, 0);\n      }\n    });\n\n    // Beim Drag Over (über andere Zeilen ziehen)\n    table.addEventListener('dragover', (e) => {\n      e.preventDefault(); // Notwendig, um das Drop-Ereignis zu ermöglichen\n      const targetRow = e.target.closest('tr');\n      if (targetRow && targetRow !== draggedRow) {\n        const rect = targetRow.getBoundingClientRect();\n        const middle = rect.top + rect.height / 2;\n        if (e.clientY > middle) {\n          targetRow.parentNode.insertBefore(draggedRow, targetRow.nextSibling);\n        } else {\n          targetRow.parentNode.insertBefore(draggedRow, targetRow);\n        }\n      }\n    });\n\n    // Nachdem der Drag abgeschlossen ist\n    table.addEventListener('dragend', (e) => {\n      e.target.style.display = ''; // Zeile wieder sichtbar machen\n      draggedRow = null;\n    });\n  </script>"},"style":{"left":"60px","top":"65px","width":"350px","height":"120px"},"widgetSet":"vis-jsontemplate"}]

[iob69]

@codierknecht
@OliverIO
Danke erst mal. Ich muss das erst mal durchdenken und ausprobieren. Melde mich ev. später wieder ...