- 3D-Druck Einstieg und Tipps         
Seite 3 von 6 ErsteErste 12345 ... LetzteLetzte
Ergebnis 21 bis 30 von 57

Thema: GUI für nodeMCU

  1. #21
    Erfahrener Benutzer Robotik Einstein Avatar von Moppi
    Registriert seit
    18.03.2018
    Beiträge
    2.285
    Blog-Einträge
    21
    Anzeige

    Praxistest und DIY Projekte
    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:

    Geändert von Moppi (21.10.2020 um 12:56 Uhr)

  2. #22
    HaWe
    Gast
    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?
    Geändert von HaWe (21.10.2020 um 14:57 Uhr) Grund: PS

  3. #23
    Erfahrener Benutzer Robotik Einstein Avatar von Moppi
    Registriert seit
    18.03.2018
    Beiträge
    2.285
    Blog-Einträge
    21
    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.

  4. #24
    HaWe
    Gast
    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.

  5. #25
    Erfahrener Benutzer Robotik Einstein Avatar von Moppi
    Registriert seit
    18.03.2018
    Beiträge
    2.285
    Blog-Einträge
    21
    Alles, was der Webbrowser darstellen kann, kann man damit auch darstellen. Selbst Canvas-Elemente:
    Das canvas Element stellt Scripten eine bitmap-basierte Leinwand zur Verfügung, die dann es ermöglicht, einfach und schnell Grafiken und Diagramme zu zeichnen, Bilder anzuordnen, Animationen zu erstellen und vieles mehr.
    Quelle: SELFHTML

    In HTML kannst Du auch Elemente pixelgenau positionieren. Das wende ich an, um Fenster darzustellen, die innerhalb des Browser-Fensters auch verschiebbar sind. Man kann Fotos reinladen etc. pp. Buttons durch Grafiken ersetzen, so ziemlich jedes Eingabeelement in HTML mit Hintergrundgrafiken schmücken oder mit Farbverläufen versehen.

    Ohne Texteingaben wirst Du kaum etwas programmieren können, so oder so. Eingaben muss man immer irgendwo tätigen, sinnvoll ist das als Text.

    "... mit Grafiken bzw. Widgets und d+d ..."
    Hast Du mal nachgedacht, was man damit tun könnte und ob bestimmte Benutzerschnittstellen auch Sinn ergeben?

    HTML5 hat dafür ein Drag & Drop - API bekommen ... zum Beispiel...
    Bloß schau mal, wann HTML5 offiziell fertig war. Ich habe mit dem Programm Jahre vorher angefangen, weswegen es auch nicht auf diese Mechanismen ausgelegt ist. Zwar sind Icons bei mir vorgesehen gewesen, die man auch hin und her schieben kann und damit theor. auch Drag and Drop umsetzen kann, aber es war nicht notwendig. Was willst Du mit einem Widget denn machen? Wie sollte das sinnvoll eingebettet werden? Welche Funktionen willst Du darüber tätigen?



    MfG

  6. #26
    HaWe
    Gast
    Also wenn du sogar Grafiken einbinden kannst: super! Dann ist es tatsächlich ein vollwertiger GUI-Builder!

    Klar habe ich mal drüber nachgedacht, was man grafisch machen kann:
    z.B. ein Robot-Auto,
    steuerbar über einige Mausbuttons oder einen virtuellen Joystick (Richtung, Geschwinidigkeit, stopp)
    Anzeige der Geschwindigkeit, Kurs, und der Encoderwerte als Zahlen in Labels
    Anzeige der Position im Raum als Grafik, wo im Raum der Robot gerade herumfährt, samt kurzer Spur, wo er vorher war.
    Evt. sogar Hindernisse im Raum, die der Robot gefunden hat (SLAM).

    Oder eine Wetterstation mit Temperatur, Luftdruck, Sonnenscheindauer, Niederschlagsmenge, Windgeschwindigkeit/-Richtung
    Und dann Anzeige aller Werte sowohl mit Zeigern in Rundinstrumenten als auch den Verlauf als Graph in Koordinatensystemen

    Ich verstehe allerdings leider immer noch nicht, wie man mit welchen Sprachelementen samt Syntax überhaupt programmiert, denn es ist ja wohl keine Arduino-API-Syntax, die man eintippt, oder?
    Geändert von HaWe (22.10.2020 um 10:21 Uhr)

  7. #27
    Erfahrener Benutzer Robotik Einstein Avatar von Moppi
    Registriert seit
    18.03.2018
    Beiträge
    2.285
    Blog-Einträge
    21
    Vorschläge sind super, werden bei mir immer verarbeitet, sobald mein Gehirn damit Kontakt hatte. Allerdings eben immer die Frage, wann und wie?

    Zitat Zitat von Moppi Beitrag anzeigen
    ... Weg von der grafischen Oberfläche, die "alles"
    möglich macht, hin zu dem, was ich zurzeit benötige.
    Da stehe ich zurzeit noch.

    Da ich jetzt etwas weiter bin, wie das Zusammenspiel mit den µC funktionieren kann, werde ich mein Augenmerk vor allem zunächst darauf legen, Werte von Sensoren usw. in angemessener und brauchbarer Weise auslesen zu können. Ich wollte mögliche lokale Displays, die vorwiegend zu Entwicklungszwecken eingesetzt werden, um solche Werte auszugeben, sparen. Das wird nicht einfach. Wenn ich nur daran denke, Werte die mit dem Rad-Encoder zu tun haben, in Echtzeit darstellbar zu machen. Wenn ich mir anschaue, wie schnell so ein Motor bei meinem Car II drehen kann und dann bedenke, dass diese Geschwindigkeit, in 1/100stel Schritten, kontrolliert wird. Aber ich arbeite an einer Lösung. Am Ende geht es mir darum - zu Entwicklungszwecken - Zusammenhänge besser zu verstehen und dazu möglichst tief in die Hardware reinschauen zu können. Ich muss da an Werte kommen, die sich sinnvoll betrachten lassen. Wäre schon toll, wenn man Abläufe Schritt für Schritt beobachten kann.

    mit welchen Sprachelementen samt Syntax:

    An der Oberfläche mit einer Script-Syntax, die so sicher wie nur möglich zu handhaben und zu verstehen ist. Deswegen ist jede Befehlszeile gleich aufgebaut. Es folgt immer ein Befehl und dann Parameter. Verschachtelte Blöcke oder kompliziertere Ausdrücke werden vermieden. Das hat nichts mit Java, JavaScript oder sonst irgendwas zu tun, nichts mit C, nicht mit C++, nichts mit Arduino-IDE-C++. Die einzelnen Anweisungszeilen durchlaufen einen Parser, der die entsprechenden Unterprogramme dann mit den entsprechenden Eingabeparametern versorgt und aufruft. Im Browser wird, auf unterster Ebene, alles per JavaScript ausgeführt.

  8. #28
    HaWe
    Gast
    wie sähe denn so etwas in deiner Programmiersprache aus,
    für einen Robot mit Differentialantrieb (Tribot mit 2 angetriebenen Rädern plus Stützrad):

    100cm mit 100% pwm geradeaus (<<< ziemlich einfach, wenn man Radumfang kennt)
    stopp
    45° auf der Stelle mit 30% pwm nach links drehen (<<< mittel)
    stopp
    50 cm mit 60% pwm zurück (<<< einfach )
    stopp
    vorwärts mit 60%pwm in einem Rechts-Bogen von 90° und Bogen-Radius von 50cm (<<< das ist jetzt schon recht anspruchsvoll)

    Anzeige von aktueller Position (x,y in Bezug zu Startpos), Richtung und Geschwindigkeit per Odometrie in 4 Labels auf der Website. (<<< vermutlich nicht extrem schwierig)
    Geändert von HaWe (22.10.2020 um 11:18 Uhr)

  9. #29
    Erfahrener Benutzer Robotik Einstein Avatar von Moppi
    Registriert seit
    18.03.2018
    Beiträge
    2.285
    Blog-Einträge
    21
    Dieses Prinzip mit der Abarbeitung habe ich begonnen nach Arduino zu exportieren. Bloß, aufgrund des Speichermangels, sind dort die Befehle anders. Es gibt auch keine komplexeren Codeblöcke, so, wie für die Browseranwendung. Wie das dann aussehen könnte, wäre als Code so:

    die reinen Code-Blöcke, als Hexdarstellung:

    [01 20 00 01 08 04 00 01 02 01 02 01 02 02 1 02 00 01 08 04 00]

    Mit Erklärung:

    Micro Code Stapelverarbeitung

    Test für LED an I/O-Pin 4:

    Variable#0 laden [1,2,0,HIGH]
    Ausgang setzen [8,4,0]

    Test über indirekte Variable:

    Variable#1 laden [1,2,1,2]
    Variable#2 laden [1,2,2,HIGH]
    Variable#0 über Variable#1 laden [2,0,1]
    Ausgang setzen, Inhalt in Variable#0 [8,4,0]

    Die Codes werden übersetzt und dann in der Benutzeroberfläche, als Befehle, in lesbarem Text ausgegeben.
    Die Eingabe werde ich etwa so gestalten, dass man die Befehle aus einer Liste auswählen kann.
    Es gibt - je nach Funktionsumfang - für jeden µC extra Befehlscodes. Derselbe Befehlscode hat dann auf jedem µC eine andere Bedeutung. Nicht allerdings die Grundfunktionen, wie Inkrementieren, Variablen Werte zuweisen etc.
    Da das noch in Entwicklung ist, kann ich Dir noch keinen fertigen Programmablauf zeigen, eben nur das Prinzip und den Aufbau.
    Man muss auch immer bedenken, dass die Grundfunktion im µC selbst steckt. Wenn es dort keine Funktion gibt (in Arduino-IDE programmiert), die zum Beispiel eine Kurve fahren kann, wird es dafür auch keinen Befehlscode für die Mini-Stapel geben. Vielleicht ein wenig an die Stapelverarbeitung von IBM-DOS oder MS-DOS denken. Dort ruft man fertige Programme auf und übergibt ihnen Parameter. So soll das Prinzip hier auch sein. Es muss die endgültige Programmierung nicht festgelegt werden. Die Firmware muss nur die Funktionen haben. Später wird der Stapelcode eingespeist und die Funktionen sinnvoll miteinander verknüpft.
    Geändert von Moppi (22.10.2020 um 12:10 Uhr) Grund: Ausdruck

  10. #30
    HaWe
    Gast
    danke, das ist jetzt zwar noch sehr theoretisch, aber schon etwas klarer. Bin gespannt, wie dann tatsächlich die Programmierung auf der Web-IDE erfolgt.

Seite 3 von 6 ErsteErste 12345 ... LetzteLetzte

Ähnliche Themen

  1. NodeMCU 1.0 e-ink und si7021
    Von Neuton23 im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 3
    Letzter Beitrag: 29.12.2018, 11:13
  2. Ultraschallsensor am nodeMCU
    Von Moppi im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 41
    Letzter Beitrag: 15.10.2018, 18:31
  3. nodeMCU an Arduino
    Von Moppi im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 16
    Letzter Beitrag: 14.10.2018, 10:30
  4. NodeMCU als WLAN Lautsprecher
    Von littlekenny im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 5
    Letzter Beitrag: 30.03.2018, 21:09
  5. nodeMCU zu nodeMCU: keine Kommunikations-Verbindung mehr nach wenigen Minuten
    Von HaWe im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 0
    Letzter Beitrag: 02.10.2017, 15:01

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •