- fchao-Sinus-Wechselrichter AliExpress         
Ergebnis 41 bis 50 von 68

Thema: GUI für nodeMCU

Baum-Darstellung

Vorheriger Beitrag Vorheriger Beitrag   Nächster Beitrag Nächster Beitrag
  1. #17
    Erfahrener Benutzer Robotik Einstein
    Registriert seit
    18.03.2018
    Beiträge
    2.650
    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?
    Geändert von Moppi (26.10.2020 um 14:50 Uhr)

Ä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, 10:13
  2. Ultraschallsensor am nodeMCU
    Von Moppi im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 41
    Letzter Beitrag: 15.10.2018, 17:31
  3. nodeMCU an Arduino
    Von Moppi im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 16
    Letzter Beitrag: 14.10.2018, 09:30
  4. NodeMCU als WLAN Lautsprecher
    Von littlekenny im Forum NodeMCU-Board und ESP8266, ESP32-Serie
    Antworten: 5
    Letzter Beitrag: 30.03.2018, 20: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, 14:01

Berechtigungen

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

fchao-Sinus-Wechselrichter AliExpress