GUI für nodeMCU

[inka]

ist sehr schwer zu lesen, wenn's so umbrochen ist, wie es jetzt ist. Wie machst du das? Auch bei deinem blog, da vergeht einem die lust das zu lesen...

[Moppi]

Sind die Zeilen jetzt zu kurz?
Vor einiger Zeit hatte jemand dieses Problem, der Lesbarkeit, mit nicht umgebrochenen Zeilen. Ich meine Rabenauge war es. Irgendwann ist mir das auch mal aufgefallen, dass die Zeilen teils sehr lang sind und es dann nicht so gut zu lesen ist. Deshalb breche ich die Zeilen früher um.

Aber das mit der Lesbarkeit ist mit der Groß-/Kleinschreibung auch nicht besser, wenn die weg gelassen wird und alles überwiegend klein geschrieben wird.

Gruß

[HaWe]

was ist dann daran anders als bei C++ Libs, die ebenfalls Wrapper nutzen für solche komplexe Funktionen wie drehen oder Encoder auslesen etc?

Außerdem ist "GUI" dann auch noch missverständlich - GUI heißt doch nur "Graphical User Interface":

meinst du eine GUI-IDE, mit der man "graphisch programmieren" kann, indem man Widgets auf eine Form zieht (wie bei qt Creator oder Borland Delphi oder C++ Builder)
oder
soll deine GUI eine graphische Schnittstelle für ein fertiges Programm sein, die Messwerte anzeigt (Monitor, Dashboard) und Buttons, mit denen man zusätzlich durch Mausklick Funktionen steuern kann (Remote Control für diverse Aktoren: an, aus, vorwärts, rückwärts, Stopp, Drehen...) ?

Was genau ist bei dir eigentlich "Graphisch"?

[Moppi]

GUI ist GUI. Mehr gibt es dazu nicht zu sagen.

was ist dann daran anders als bei C++ Libs

Beides ist nicht miteinander zu vergleichen. Das hier soll eine hardwarenahe Programmiersprache nicht ersetzen. Man kann es aber am ehesten mit irgendeinem Basic vergleichen.
Bei dieser Oberfläche bzw. dem darunter liegenden Programm, geht es vor allem um Abstraktion, ohne auszuschließen, dass man damit aber auch Code ausführen kann.
Die Interface-Funktion (Interface in dem Fall meint den Teil, wo die Baumstruktur abgebildet wird) ist gesamt in einer Art programmiert, die auch verwendet wird, wenn das Interface benutzt wird.
Über das Interface kann man eigentlich auch dessen Funktion ändern. Das Programm kann sich selbst ändern. So, wie das unter DOS möglich war, wo man mit COM-Dateien bspw. den Code der Datei überschreiben konnte.

Die Abstraktion bekommt man auch mit JavaScript hin, C++ oder anderem. Auch mit Assembler oder Maschinencode ist das möglich. Nur gerade bei Letzterem offenbart sich dann, wo die Nachteile liegen. Auch in der Arduino-IDE ist das möglich. Es ist aber unheimlich umständlich, bei größeren Projekten u.U. unübersichtlich und nicht systemunabhängig. Dies hier funktioniert in jedem Webbrowser auf jedem Computer (ob unter Linux, Windows, Mac oder was anderem), der ECMA Script in Version 5 unterstützt (JavaScript). Als ich das grafische Interface noch nicht hatte, habe ich alles in ellenlangen Scripten, per Texteditor, verfasst, was dann irgendwann auch wieder unübersichtlich wurde. Die zugrundeliegende Struktur ist. u.U. nicht ganz einfach zu verstehen und nach längerer Zeit habe auch ich dann immer wieder mal Sachen vergessen (wie Befehle zusammen arbeiteten z.B.). Auch wenn ich eine fast 50-seitige Dokumentation darüber habe. Deswegen habe ich dann diese nächste Ebene eingeführt, die die Handhabung und das Erstellen von Code, den ich eben sonst in Scripten verfasse, vereinfacht und unanfälliger für Fehler macht. Außerdem habe ich direkten Zugang zum ausgeführten, abstrakteren Code, falls irgend etwas nicht funktioniert. Die Arbeit der Programme ist im Detail, Zeile für Zeile und Variable für Variable zu beobachten (auch wenn es dann nat. langsamer ausgeführt wird). Falls mal was nicht funktioniert, kann ich so Fehler in sehr kurzer Zeit finden. Damit steigt die Produktivität.

Ich weiß noch nicht, ob ich die Möglichkeit für dieses Projekt noch zugänglich mache, aber implementiert ist sie: die Programmausführung kann zu jeder Zeit pausiert werden. Stell Dir vergleichsweise vor, MS-Windows hätte einen Pause-Button, den Du betätigen kannst. Man kann hier die gesamte Anwendung im Browser anhalten / einfrieren und später einfach fortsetzen. Bis jetzt sehe ich noch nicht, dass man das hier brauchen könnte.

MfG

PS: ich kann das auch auf einem BueRay-Disk-Player ausführen, auf der Playstation oder dem Fernsehgerät. Also ich kann den nodeMCU - Webserver auch über diese Geräte erreichen und die Benutzeroberfläche dort verwenden.

Hier habe ich die Benutzeroberfläche, vom nodeMCU, auf dem Fernseher im Wohnzimmer, geladen:

Bild hier  

[HaWe]

sorry, ich verstehe immer noch nicht, was jetzt hier "graphisch" ist...
Es hört sich eher danach an, dass es um eine schriftbasierte Interpreter-Anwendung geht, die in einem Browserfenster läuft.
Worin bzw. wofür (für welche graphischen Funktionen) besteht bei dir das "G" für "Graphic" in "GUI"?

Eine GUI-IDE, in der GUI-Anwendungen programmiert werden können, wäre so etwas (qt creator):
https://github.com/dsyleixa/Raspberr...enshot_qt.jpeg

und eine Programm-GUI, für das fertige laufende Programm, so etwas:
https://github.com/dsyleixa/Raspberr...creenshot.jpeg

Auch Visual Studio z.B. wäre eine GUI-IDE, oder Borland C++ Builder.


PS, dein Bild war hier gerade noch unsichtbar:

Oder meinst du damit, dass deine IDE eine Schrift-Programmierung per Java bietet, die aber grafische Design-Elemente (wie den Papierkorb oder die Ordnersymbole) hat?
Wie genau aber schreibt man damit ein Programm?

[Moppi]

Dann ist es bei Windows genau so und Deiner Definition von GUI-IDE, die eine Schriftprogrammierung per C/C++ bieten, die aber grafische Design-Elemente (wie den Papierkorb oder die Ordnersymbole) haben.

Grafische Benutzerschnittstelle ist grafische Benutzerschnittstelle. Selbst die Texte, die auf dem Bildschirm erscheinen, sind keine Texte, sondern in einem Grafikmodus der Hardware aus Pixeln zusammengesetzt. Deswegen kann man das auch mit Bildern mischen, Fotos oder Grafiken. In einem reinen Textmodus der Grafikhardware wäre dies nicht möglich. Wenngleich man einfach Scripte verwendet, um die Anordnung aller grafischen Elemente zu beschreiben.

Daher kann ich Dir nicht folgen.

[HaWe]

also, wenn ich dich jetzt richtig verstehe, dann kannst du auch grafische Zeiger-Instrumente und und bewegte Grafiken und Mausbuttons zur Steuerung einfügen ins Programm, so wie bei einer Website mit html- oder php oder Javascript?

Und wie wird das ganze programmiert?

- - - Aktualisiert - - -

PS,
wenn die IDE nur zum Aufhübschen grafische Elemente enthält, wie bei der Arduino-IDE oder der Arduino-Web-IDE, und ansonsten lediglich in einem Fenster (MS Windows, XWindows) angezeigt wird, man andererseits aber nur mit Text-Eintippen und nicht mit Grafiken bzw. Widgets und d+d programmieren kann, dann wäre es IMO in der Tat keine GUI-IDE oder ein GUI-Builder, sondern "nur" eine Text-IDE als Fenster-Anwendung.

[HaWe]

nur ein Gestaltungs-Tipp:
ich würde die Ressourcen/Rubriken in eine linke Fenster-Spalte schreiben und den programmierten Programmstapel rechts davon.
Text-Ausgaben des Programms (ähnlich Serial Monitor) und Grafik-Dashboard etc. (ggf wie bei Processing oder per Rundinstrumente oder per Koordinatensysteme oder Turtle-Grafiken) könnten dann in einen 3. Bereich unten drunter angezeigt werden.

[Moppi]

Für den Fall, dass es noch nicht bekannt ist, wie der Aufbau der Oberfläche aussieht, folgendes.

Es ist nicht ganz einfach, mit den Darstellungseigenheiten der unterschiedlichen Webbrowser, ein einheitliches Design hinzubekommen, das in jedem Browser zum gewünschten Ergebnis führt. Aus dem Grund bin ich hier schon dazu übergegangen, Frames einzubauen, die dann automatische Bildlaufleisten bekommen, wenn der Inhalt größer ist, als der Bildausschnitt.

Bild hier  

9: Ganz oben ist eine Statuszeile, mit zwei Reglern, um die Bereiche, horizontal, in der Breite verstellen zu können. Hier werden auch Informationen in Textform angezeigt.

8: Menüzeile. Ich habe Menüs ganz raus genommen. Weil ich denke, dass die wichtigen Funktionen einfach oben in einer Zeile Platz finden. Darüber lässt sich nun im Grunde die ganze Oberfläche bedienen.

7: Ein weitgehend frei zu gestaltender Bereich. Im Grunde ist nicht festgelegt, wo was stehen soll oder wie etwas angeordnet sein soll. Manchmal muss ich mich - zugunsten der Aufwandsreduzierung, bei der Programmierung - für bestimmte Strukturen entscheiden, damit der Programmcode unter der Oberfläche nicht "explodiert". Hier gibt es nur eine Struktur: Rubriken, die übereinander angeordnet sind und sich aufklappen lassen. Darunter dann, in abgestufter Form, weitere Objekte; durch die Baumstruktur sind Abhängigkeiten zu erkennen, ein Zweig wächst von links nach rechts. Wie viele Objekte einander untergeordnet sind, ist nicht festgelegt. Die Hauptobjekte sind ganz links angeordnet, eine Art Verzeichnis. Es lassen sich neue "Ordner" hinzufügen, die dann eine neue Umgebung abbilden. Alles in der Benutzeroberfläche folgt einem Sandbox-Prinzip. Auch die unterschiedlichen Bibliotheken, die JavaScript beinhalten. Jede Sandbox hat ihre Objekte. Code der Sandboxen kann nebeneinander ablaufen und wird durch übergeordnete Variablen und Mechanismen synchronisiert. Es existiert aber nur ein gemeinsames Objekt, für die HTML-Darstellung. Alle Objekte, die der Darstellung dienen, sind hier untergeordnet. Aus jeder Sandbox kann darauf zugegriffen werden. Was hier in diesem Bereich, Nr. 7, zu sehen ist, ist ein Frame im Browser, mit einer HTML-Seite. Alle Knoten-Objekte sind in einer Seite abgebildet und stellen eine Struktur dar, die einem bestimmten Aufbau folgt. Teile des Aufbaus werden ausgeblendet, damit sind manche Zweige nicht sichtbar, aber jeder Zeit vorhanden. Die gesamte Baumstruktur ist also zurzeit eine Einheit.

5: Zu jedem Objekt im Baum gibt es eine Beschreibung oder Erläuterung (irgendeinen erklärenden Text), der wird hier angezeigt.

6: Die Ausgabe für Debugger etc. In etwa das, was in der Arduino-IDE das serielle Terminal ist. Bloß gibt es hier bisher keine Möglichkeit der Eingabe. Es ist ein reiner Ausgabebereich.

1 bis 4: Weitere Anzeigebereiche. Für Ausgaben von unterschiedlichen Werten gedacht, die man irgendwie aus der Hardware geliefert bekommt. Bereich Nr. 1 könnte Werte von Encoder#1 anzeigen; Bereich Nr. 2 Werte vom ADC und die andern beiden Bereiche andere Sachen. Aus diesen vier Bereichen könnten auch sechs werden. Ich bin mir aber nicht sicher, ob das sinnvoll wäre.

Die Bereiche 7 und 6 sind über Regler in der Breite verstellbar, 1 bis 4 passen sich in der Breite an, damit insgesamt alles in das Browserfenster passt.

Die Informationen, die vertikal dargestellt werden können, verringern sich mit der Höhe des Browserfensters. Ebenso verhält es sich mit der Breite (hier können dann aber, wie beschrieben, die Bereiche etwas angepasst werden).
Werden die Bereiche in der Vertikalen kleiner, muss mehr gescrollt werden, deshalb versuche ich, diese möglichst groß zu halten. In der Horizontalen habe ich mehr Spielraum, auch weil Bildschirme heute vom Seitenverhältnis so angelegt sind.

Was noch nicht zu sehen ist, befindet sich zwischen Bereich 7 und 6. Dort ist noch ein Bereich, zurzeit ausgeblendet, wo zusätzliche Elemente untergebracht werden können. Ein Bereich, der frei zu gestalten sein sollte, also keinen festen Inhalt hat. Ich glaube, damit bin ich ziemlich am Ende angelangt, was auf einen Bildschirm passt.

Gruß
Moppi

- - - Aktualisiert - - -

Ich stelle hier mal die Frage, ob der Thread geschlossen werden kann? Ich tue mich mit der Abgrenzung zu abgeschlossenen oder fast abgeschlossenen Projekten etwas schwer.
Vielleicht ein Moderator-Kommentar dazu?

[HaWe]

Ich stelle hier mal die Frage, ob der Thread geschlossen werden kann?

wieso schließen? willst du keine Fragen beantworten und keine Kommentare zulassen? (wenn das tatsächlich so ist, warum stellst du es dann hier im Forum vor?)