Szenen im NodeRED-Modus?

Hallo zusammen,

Es ist schon einige Monate her, dass ich nicht mehr an Gladys arbeiten konnte.
Ich widme mich ein paar Tage lang wieder dem Projekt (ich nutze ein paar freie Tage).
Und was mir sofort ins Auge springt, ist die Komplexität der Szenenfunktionalität.
Tatsächlich ist das Blocksystem wirklich schwerfällig und schwer lesbar.

Das Beste wäre ein System wie bei Node RED (das ich überhaupt nicht beherrschen), es ist sehr visuell und sehr intuitiv…
Die Idee wäre, die derzeitigen Blöcke (Trigger, Aktionen, Bedingungen, Tests…) beizubehalten, aber sie als kleine Blöcke auf der Canvas anzuzeigen.
Vielleicht könnte man React Flow verwenden, da Gladys, soweit ich der Dokumentation entnehmen kann, auf Preact basiert.
Allerdings weiß ich nicht, wie viel Arbeit das erfordern würde…

Aber ich bin von diesem Ansatz überzeugt, der wirklich benutzerfreundlich ist.

Beispiel mit einem Knopf, der einen Ventilator über eine smarte Steckdose steuert.
1 Klick auf den Knopf: Schaltet die smarte Steckdose ein
2 Klicks auf den Knopf: Schaltet die smarte Steckdose aus
Langer Klick auf den Knopf: Schaltet die Steckdose ein und schaltet sie nach 2 Stunden wieder aus.

Es ist möglich, drei verschiedene Szenen zu erstellen, aber man landet mit einer Menge von Szenen…

Eine Szene erstellen, die alles verwaltet, was mir viel besser gefällt.

Aber man landet mit etwas recht Komplexem wie:


Wenn man ein Canvas-System verwenden könnte, könnte man viel einfacher und lesbarer sein mit etwas wie:

Was sind eure Meinungen?
Sowohl Entwickler als auch Nutzer.

Danke euch und ein schönes Wochenende :slight_smile:

Das ist ein sehr gutes Feedback, auch wenn es eine große Aufgabe darstellt :wink:

Ich stimme zu, dass es einige Reibungspunkte in der aktuellen Szenen-Erstellungs-Oberfläche gibt. Andererseits bin ich mir nicht sicher, ob ein kompletter Neuanfang der richtige Ansatz ist, es ist schließlich jahrelange Arbeit :grinning_face_with_smiling_eyes:

Meiner Meinung nach ist es bereits ein hervorragender erster Schritt, diese Reibungspunkte schrittweise zu beheben.

Auf meiner Seite ist eine vollständige Neuschreibung der Szenen nicht in der Roadmap vorgesehen :slightly_smiling_face:

Ich verstehe, dass das viel Arbeit bedeutet, aber ich denke wirklich, dass das ein echter Vorteil gegenüber anderen Anwendungen wäre und es ist so benutzerfreundlich :slight_smile:

Und wenn das langfristig das ist, was passieren könnte, dann geht jede zusätzliche Entwicklung des aktuellen Systems am Ende verloren.

Claude rät, es in 3 Schritten zu machen:

  1. Nur zur Anzeige basierend auf den aktuellen Szenen zusätzlich zum aktuellen System

  2. Im Editiermodus kompatibel mit dem aktuellen System

  3. Ersetzen des aktuellen Systems

Aber natürlich ist das leicht gesagt für ihn XD

Die Hoffnung lässt leben :slight_smile:

Einer der besonders schweren Punkte bei den Szenen ist die Verschachtelung der « Wenn … Dann … Sonst ». Neben dem langen Schreiben ist es schwierig zu lesen, da es sehr schwierig ist, einen globalen Überblick zu bekommen.

Ich musste 5 oder 6 Bedingungen verketten, um die möglichen Werte eines Fehlercodes in der PALLAZZETTI-API in « Klartext » zu übersetzen. Ich habe überlegt, mir ein NodeRED zu machen, um einen « Change »-Knoten verwenden zu können.

Ich bin ganz deiner Meinung!

In deinem Fall brauchst du wahrscheinlich keine verschachtelten Bedingungen: Du kannst einfach 6 Bedingungen linear hintereinander anordnen. So vermeidest du eine zu breite Struktur und eine zu „komprimierte“ Lesbarkeit.

Ich denke, es gibt einige UI-Verbesserungen, die vorgenommen werden sollten, um den Block „Wenn… Dann… Sonst“ weniger massiv zu gestalten. Zum Beispiel, die Möglichkeit, mit einem Klick in den Vollbildmodus zu wechseln, so wie es Notion macht :slightly_smiling_face:

Ich mache das genauso, ich reihe einfach IFs hintereinander (nicht verschachtelt), aber dann hat man Szenen, die endlos weitergehen.

Ich habe das CSS so angepasst, dass es fast den ganzen Bildschirm einnimmt, das verbessert es ein bisschen, aber nicht viel.

Nach mehreren Tagen des Austauschs mit Claude bin ich zu folgendem Schluss gekommen:

Ausgehend vom aktuellen System

Das ergibt:

PS: Die grünen und roten Links der Unterblöcke sind jetzt grau.

Ausgehend vom neuen System:

Das ergibt im aktuellen System:

Das scheint gut zu funktionieren, aber man müsste wirklich alle möglichen Aktionen testen.

Ein kleines Demo-Video:

Ehrlich gesagt, finde ich, dass es wirklich nicht schlecht aussieht, auch wenn noch einige Dinge zu beachten sind.

Container-Test: Package gladys · GitHub

Der Code: Comparing GladysAssistant:master...Hizoka76:feat/canvas_style · GladysAssistant/Gladys · GitHub
Achtung, es werden viele neue Blocktypen verwaltet, die derzeit in Gladys nicht existieren

Das ist wirklich toll, dieser Wechsel zwischen der « linearen Schritt-für-Schritt-Ansicht » wie heute und der « visuellen Block-Ansicht »!

Das spricht mich tatsächlich mehr an :eyes:

Schönes Bild mit Claude

Wenn jemand testen möchte: Package gladys · GitHub

Ich habe meine gladys-Datenbank genutzt, um mir die Szenen anzusehen, und die sind wirklich sauber, nicht perfekt. Ich habe ein paar Korrekturen angefordert und einen Container zurückgeschoben.

Ich werde in den kommenden Tagen testen, ob alles gut funktioniert.

Sehr nett, das ist hyper sauber :heart_eyes:

Und eine ausgezeichnete Idee, zwischen den beiden Modi umzuschalten!

Ich frage mich, wie das auf dem Handy die grafische Ansicht darstellt?

Das hatte ich nicht auf dem Handy getestet.

Das Design ist korrekt:

Aber die Platzierung der Blöcke muss einen verrückt machen XD

Wenn du einen Block verschieben willst, öffnet sich das Eigenschaftenfenster und verdeckt die Ansicht.
Das sollte man beim Loslassen der Maustaste und nicht beim Klicken machen.

Wenn du eine Verbindung zeichnen willst, siehst du nicht, wo du sie platzierst, weil dein Finger sie verdeckt.

Gut gemacht, es gibt einige interessante Dinge. Der Übergang zwischen den beiden ist wirklich gut gemacht.

Ich nutze es seit 2 Tagen in meiner Produktion.

Die wenigen Probleme wurden behoben.

Es hat mir geholfen, die Anzahl der Szenen zu begrenzen und die Klarheit zu verbessern.

et ich habe ein kleines System zur Verknüpfung mit der Dokumentation hinzugefügt :slight_smile:

Toll gemacht @Hizo, super Arbeit :clap:

Sobald du denkst, dass es bereit für den Produktionsstart in Gladys ist, musst du einen PR auf dem Haupt-Repository erstellen :slightly_smiling_face:

Einige Punkte, die du vor dem Öffnen des PRs überprüfen solltest:

  • Der Code wurde mit Prettier formatiert
  • Der ESLint-Linting läuft korrekt
  • Der Code ist gut getestet, mit 100 % Coverage auf dem hinzugefügten Code
  • Die Übersetzungen FR, EN und DE sind vollständig und sauber
  • Der Code ist sauber und es gibt keine großen Abnormitäten, die von der KI generiert wurden

Ich freue mich darauf, das in Gladys zu sehen!

Ich habe die Möglichkeit hinzugefügt, während der Änderungen Strg + Z und Strg + Y zu verwenden :slight_smile:

Und es gibt jetzt auch die Möglichkeit, Kommentare hinzuzufügen.

Die Höhe ist auf einige Zeilen begrenzt.

@pierre-gilles
Es werden weitere Nutzerfeedback benötigt, um sicherzustellen, dass alles in Ordnung ist.
Und wenn wir es eines Tages in Gladys integrieren wollen, müssen wir uns das gemeinsam ansehen.
Und du musst deine Meinung zu den Begriffen, dem Design usw. äußern.
Unter Berücksichtigung, dass meine Testversion Blöcke berücksichtigt, die in Gladys derzeit nicht existieren.
Ich habe einen Branch, der für den aktuellen Gladys normalerweise in Ordnung sein sollte.

Ich habe gerade eine neue Version erstellt, ich habe nichts geändert, nur mit der v4.82 von Gladys gemergt

Der Link ist immer noch: gladys versions · hizoka76 · GitHub

Ich hatte bis heute keine Probleme mit dem System (keine Erfahrung mit der v4.82)

Ich habe gerade auf die v5 aktualisiert, die wirklich sehr schön ist.

Aber ich bleibe bei der Meinung, dass der Node-RED-Modus wirklich praktisch ist :slight_smile:

Warum nicht einen erweiterten Modus für diejenigen, die ihn wollen?