svenpaush: Dynamische Seite für ESP Chip

problematische Seite

Hallo, ich habe ein Whirlpool das eine Steuerung mit 5 Tasten und ein Display hat. Nun habe ich ein Programm geschrieben das sich zwischen die Kommunikation hängt. Das Programm zeigt mir als Text den Zustand des Display an und ich kann den Pool über die PC Tastatur steuern. Das Programm habe ich nun auf einen ESP Chip portiert und möchte dafür eine Webseite bauen.

Da ich bis auf eine einfache statische Hallo Welt Webseite noch nie etwas gemacht habe stehe ich gerade vor einem Berg unbekannter.

Nachdem ich hier auf Selfhtml ein paar Stunden gelesen habe dreht sich gerade alles bei mir im Kopf und weiß gar nicht mehr wo ich zuerst anfangen soll.

Ich stelle mir die Seite wie folgt vor. Sie soll einen Titel haben und 3 weitere Bereiche.

  1. für die Virtuellen Tasten (Links unter der Überschrift)
  2. für das Display (Rechts unter der Überschrift)
  3. Ein kleines log Fenster. (unterhalb der Tastatur und Display)

Mein noch nicht sehr hübscher Versuch ist der Link Problematische Seite.

Für die Einteilung der Bereiche habe ich mich an display: grid versucht.

Ich versuche nun die ganze Zeit die Tastatur und den Display Bereich nebeneinander zu bekommen. Bekomme es aber gerade nicht hin.

Die Tasten wären dann Buttons. Diese stehen gerade noch untereinander. Muss ich die dann über eine Tabelle formatieren oder gibt es bessere Möglichkeiten?

Bei dem Display hätte ich gern ein Tipp was es für Möglichkeiten gibt. Ich dachte evtl. auch an Button die ich dann über ein Farbwechsel grau oder rot darstelle. Also rot ist aktiv grau ist aus. Wie gesagt da habt ihr bestimmt noch bessere Ideen.

Für den Log Bereich habe ich textarea genutzt. Per Java Script arbeitet die Seite per websocket. Das mit den Logmeldungen klappt schon einmal und wenn ich einen Button drücke erhält der ESP auch den Tastendruck. Also grundsätzlich funktioniert das ganze. Aber bei dem Layout breche mir gerade einen ab.

So sieht das Original Display aus.

Display

  1. problematische Seite

    Hallo Sven,

    Du hast zunächst mal etwas Unordnung in deinem HTML und CSS. Aber keine Sorge, ich schimpfe nicht nur, nachher kommt auch was zu deinem Anliegen. Aber die Kritikpunkte solltest Du trotzdem abarbeiten.

    • Validiere dein HTML beim W3C - https://validator.w3.org/. Dann fallen Dir viele der Fehler, die ich im Folgenden aufliste, selbst auf.
    • Ein <header> um das <title> Element ist unzulässig, er führt dazu, dass der Browser glaubt, dass schon der <body> Bereich angefangen hätte. Daraufhin hängt der Browser alles, was in den head gehört, in den body. Nicht gut. Schau Dir in den Entwicklerwerkzeugen die Elemente-Hierarchie an, total kaputt.
    • title, meta viewport und link icon hast Du doppelt.
    • ein <top> Element gibt es nicht. Das möchte ein <header> sein. Bitte erfinde keine eigenen HTML Elemente, das ist was für Fortgeschrittene und hat eine Menge weiterer Voraussetzungen. Ob Du überhaupt ein header-Element brauchst, ist allerdings fraglich. Das h1 kann das, was Du da tust, auch ganz allein.
    • Ein <div class="topnav"> im header ist unnötig. Falls Du das bei Selfhtml gesehen hast - wo? Das müssten wir dann überarbeiten.
    • Dein <div class="content"> möchte dann ein <main> Element sein.
    • Ein <display> Element gibt es nicht. Du könntest hier <section> verwenden. Entsprechendes gilt für <log>.
    • Das <br> hinter einer textarea ist für deinen Anwendungsfall unnötig. Das Einschließen einer textarea in <p></p> ebenfalls.
    • Die textarea ist für's Logging nicht das richtige Element. Das ist ein Eingabeelement, kein Ausgabeelement. Du kannst entweder ein einfaches div nehmen und dessen innerHTML für jede Logausgabe um "<br>" + message erweitern, oder Du machst eine Liste (<ul>) und fügst neue li-Elemente an. Nicht über's innerHTML, sondern über document.createElement("li") und einen appendChild an die Liste. (Beispiel im Wiki)
    • Musst Du überhaupt in die Webseite loggen? Reicht nicht der output von console.log()? Wenn Du den Controller auf dem Smartphone laufen lässt und dort ein Problem hast, das Du auf dem Desktop nicht nachstellen kannst (wo Du die Entwicklerkonsole hast), kannst Du - zumindest bei Chrome auf Android - das Smartphone auch mit dem Desktop verbinden und remote debuggen.
    • -webkit-touch-callout:none für Buttons - ist das nötig? Das ist eine Eigenschaft, die ausschließlich für den iSafari relevant ist. Zeigt der iSafari bei Buttons einen Callout an (was auch immer das ist, ich bin Androide...)?
    • Die Klasse button brauchst Du nicht. Im CSS kannst Du Elemente über ihren Tagnamen ansprechen - wie Du es bei body oder top machst. Wenn Du nur die Buttons im Tastaturbereich ansprechen willst, dann gibt diesem Bereich eine Klasse (z.B. class="keypad") und sprich die Buttons darin über den Selektor .keypad button an. Sowas hast Du in deinem CSS noch nicht drin, die Leerstelle zwischen .keypad und button ist ein sogenannter Kombinator und bedeutet: Nachfahrenelement. Es meint also buttons, die direkt oder mit Zwischenstufen in einem Elternelement mit Klasse keypad liegen. (Hier im Wiki)

    Jetzt mal ein bisschen mehr zu deinen Anliegen.

    • Um die Buttons nebeneinander zu bekommen, würde es im einfachsten Fall genügen, sie nicht einzeln in <p> Elemente zu setzen. Buttons sind Inline-Elemente, d.h. sie landen automatisch nebeneinander. <p> ist dagegen ein Blockelement, und Blockelemente werden untereinandergesetzt (solange Du nicht mit Grid was anderes festlegst).
    • Dein Einsatz von grid funktioniert so nicht. Ein Grid besteht aus Grid-Container (bei Dir der Body) und Grid-Items. Die Grid-Items müssen direkte Kind-Elemente des Containers sein, das ist bei Dir nicht der Fall. Man kann solche Dinge zwar mit Subgrid (nur im Firefox) oder display:contents (gut unterstützt) lösen, aber solange das nicht nötig ist... Du kannst Grid auch mehrfach einsetzen: Eins im body für's Seitenlayout, und je eins in den Cards für deren inneres Layout. Dein Buttonfeld könntest Du z.B. in ein Grid mit 2 Zeilen und 3 Spalten setzen.
    • Du kannst Grid-Items entweder über Zeilen- und Spaltenangaben positionieren, oder Du kannst benannte Gridbereiche verwenden. Das findest Du bei uns im Wiki, z.B. hier.

    Sortier das erstmal aus, und dann schauen wir nochmal für die weiteren Sachen drauf.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      Hallo Rolf, vielen Dank für die klaren ausführlichen Worte. Ich hatte ja gesagt, null Ahnung und sehr viel falsch verstanden und noch mehr falsch gemacht. Ein Teil hatte ich aus einem anderen Projekt das war dann mein Grundgerüst dann hier gelesen und erweitert.

      Ich werde deine vielen Punkte einmal nacheinander durchgehen. Schauen wir wo ich dann lande.

      1. problematische Seite

        Hallo Rolf, ich bin nun Punkt für Punkt durchgegangen. Das Loging, da hast du Recht ist mit console.log besser. Für den Mobilen Einsatz sprengt das den Rahmen und das es mit den Entwickler tools am PC gut zu lesen ist hatte ich nicht bedacht.

        Der Html Code erzeugt im Validator jetzt 0 Fehler :).

        Dann bleibt nur ein Punkt übrig. Die Darstellung des Displays. Hast du da auch ein Tipp für mich?

        Meine Idee war es mit eine Tabelle zu lösen und die Zellen anzusprechen.

        1. problematische Seite

          Hallo

          Dann bleibt nur ein Punkt übrig. Die Darstellung des Displays. Hast du da auch ein Tipp für mich?

          Meine Idee war es mit eine Tabelle zu lösen und die Zellen anzusprechen.

          Da gibt es -zig Möglichkeiten. Willst du das im Eröffnungsposting gezeigte Display möglichst exakt nachbilden oder willst du „nur“ die dort verfügbaren Informationen im Browser anzeigen?

          Im ersten Fall kannst du das mit einer SVG-Grafik erreichen. SVG ist ein XML-Dialekt, dessen Elemente du, wie in HTML auch, per JavaScript manipulieren und mit CSS stylen kannst. Ansonsten, also in einer von der Originaldarstellung unabhängigen Informationsanzeige per HTML, kannst du mit einer Tabelle oder mit einer Beschreibungsliste (dl mit dt und dd) arbeiten.

          Tschö, Auge

          --
          200 ist das neue 35.
          1. problematische Seite

            Hallo Auge, SVG ist auch nicht schlecht. Ich habe mich erst einmal für die Text Darstellung entschieden damit ich den ESP zum Einsatz bringe. Im Web Zeichensatz gibt es ja unzählige Zeichen. Da habe ich gleich eine Sonne, Mond etc. gefunden.

            Mit SVG werde ich es später einmal versuchen.

        2. problematische Seite

          Servus!

          Hallo Rolf, ich bin nun Punkt für Punkt durchgegangen. Das Loging, da hast du Recht ist mit console.log besser. Für den Mobilen Einsatz sprengt das den Rahmen und das es mit den Entwickler tools am PC gut zu lesen ist hatte ich nicht bedacht.

          Der Html Code erzeugt im Validator jetzt 0 Fehler :).

          Dann bleibt nur ein Punkt übrig. Die Darstellung des Displays. Hast du da auch ein Tipp für mich?

          Meine Idee war es mit eine Tabelle zu lösen und die Zellen anzusprechen.

          Nein, eine Tabelle ist nicht zur Seitenstrukturierung gedacht.

          Nimm Grid Layout

          1. für die Virtuellen Tasten (Links unter der Überschrift)
          2. für das Display (Rechts unter der Überschrift)
          3. Ein kleines log Fenster. (unterhalb der Tastatur und Display)

          HTML:

          <body>
          <h1>Überschrift>
          <div>
            <div id="menu">
              <button> ...</button>
              ...
            </div>
            <aside>
              <output>
              </output>
            </aside>
          </div>
          <p>    
            <output>
            </output>
          </p>
          

          Herzliche Grüße

          Matthias Scharwies

          --
          Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
          1. problematische Seite

            Servus!

            Servus!

            Hallo Rolf, ich bin nun Punkt für Punkt durchgegangen. Das Loging, da hast du Recht ist mit console.log besser. Für den Mobilen Einsatz sprengt das den Rahmen und das es mit den Entwickler tools am PC gut zu lesen ist hatte ich nicht bedacht.

            Der Html Code erzeugt im Validator jetzt 0 Fehler :).

            Dann bleibt nur ein Punkt übrig. Die Darstellung des Displays. Hast du da auch ein Tipp für mich?

            Meine Idee war es mit eine Tabelle zu lösen und die Zellen anzusprechen.

            Nein, eine Tabelle ist nicht zur Seitenstrukturierung gedacht.

            Nimm Grid Layout

            1. für die Virtuellen Tasten (Links unter der Überschrift)
            2. für das Display (Rechts unter der Überschrift)
            3. Ein kleines log Fenster. (unterhalb der Tastatur und Display)

            HTML:

            <body>
            <h1>Überschrift>
            <div>
              <div id="menu">
                <button> ...</button>
                ...
              </div>
              <aside>
                <output>
                </output>
              </aside>
            </div>
            <p>    
              <output>
              </output>
            </p>
            

            Herzliche Grüße

            Matthias Scharwies

            Sorry, wurde unterbrochen. Jetzt das

            CSS:

            body > div {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 1em;
            }
            

            Dann sind Überschrift und output 100% breit und die beiden menu- und display- Blöcke nebeneinander.

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. problematische Seite

              Hi, danke. Ich habe es ausprobiert und es macht tatsächlich das was ich an Anfang wollte. Aber dadurch das sich die Darstellung nun doch etwas geändert hat und ich anfangs nicht bedacht habe das es natürlich auch auf dem Smartphone gut aussehen soll.…. Nun steht erst einmal alles untereinander.

        3. problematische Seite

          Hallo Sven,

          die Temperatur-Buttons in ein <p> einzuschließen ist eigenwillig - das ist ja kein Paragraph in einem Text. Manchmal ist ein div nur ein div. Oder ein <br>.

          Die Abstände der Buttons voneinander solltest Du durch Margins an den Buttons lösen. Wenn Du in den Entwicklertools die Mobil-Emulation einschaltest (dieses Icon mit kleinem und großem Bildschirm, in Chrome links oben, in Firefox rechts oben) und den Bildschirm schmal ziehst, brechen deine Buttonzeilen um und die Buttons sind aneinander geklatscht. Es ist mir natürlich unbekannt, ob Responsivität für eine "nur für Dich" Anwendung für Dich relevant ist

          Für's Display, ja, hm. Kommt drauf an, was genau Du anzeigen willst. Mal doch mal ein Konzept. Auge fragte ja auch schon.

          Nur als Gedanke - wär's nicht besser, Temperaturanzeige und -steuerung irgendwie so darzustellen:

          [🔻] - 41° - [🔺]

          Hast Du außer der Solltemperatur auch die Ist-Temperatur verfügbar? In dem Fall sollte das Ist auch da stehen, und die Steuerbuttons beim Soll.

          Jets und Light kannst Du als Toggle-Button realisieren. Unser Wiki hat da was

          Rolf

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            Hallo Rolf,

            vielen Dank für die vielen Tipps. Ich habe jetzt erst einmal ein Stand erreicht mit dem ich zufrieden bin.

            Die Lichter und Jets lassen sich nicht so einfach durch toggle Schalter ersetzen da beides in meheren Stufen geschaltet wird.

            Das Display ist 5 Stellig und kann verschiedene Texte wie auch die soll und ist Temperatur darstellen.

            Ich habe mich vorerst für eine 1:1 Darstellung entschieden.

            Mein vorläufigen Stand habe ich auf der problematische Seite aktualisiert.

            Danke für den Hinweis mit Margin. So klatscht es nicht mehr zusammen.

            In der jetzigen Größe sieht es aber auf dem Bildschirm und auf dem Smartphone ok aus.

            1. problematische Seite

              Hallo svenpaush,

              zwei Hinweise noch

              • die Temperaturbuttons in ein <p> zu legen ist nicht gut. Das ist kein Text. Leg ein div drum - dann auch um die anderen 3 - oder lass das <p> ganz weg und mach nach dem zweiten Button ein <br>.

              • Delta und Nabla sind keine Pfeile. Verwende die Dreiecke aus dem Unicodeblock Geometrische Formen oder Pfeile aus diesem Block oder einem der davon verlinkten Zusatzblöcke. Oder setz ein kleines selbstgemaltes SVG-Bildchen hinein, mit einem entsprechen gezogenen Path.

              Rolf

              --
              sumpsi - posui - obstruxi
              1. problematische Seite

                Hallo Rolf,

                • Delta und Nabla sind keine Pfeile.

                Nabla?? Hab ich noch nie gehört. Kommt mir spanisch vor. No nabla español.

                Google war zunächst auch keine Hilfe, hat mir nur eine ganze Menge Treffer für irgendeine Kosmetiklinie angeboten. Erst als ich Wikipedia direkt befragt habe, bin ich auf einen grünen Zweig gekommen.

                Verstanden habe ich aber nicht, was der Quatsch soll. Will ich vielleicht auch gar nicht.
                Höhere Mathematik[1] hat mich noch nie wirklich gereizt.

                Live long and pros healthy,
                 Martin

                --
                Bei Erwärmung steigt das Thermometer, bei Erkältung singt es.

                1. Also das, was weder in der gymnasialen Oberstufe noch im Ingenieurstudium vorkommt. ↩︎

                1. problematische Seite

                  Hallo Martin,

                  meinst Du etwa, ich? Nabla, Tensoren, Quaternionen - wat weiß ich denn? Isch bin nur Mathematisch-Technischer Assistent und 45% Dipl.-Inf., für Nablas und Blablas gips den Prof und die Wikipedia.

                  Ich habe mit den Developertools die Codepoints der von Sven verwendeten Zeichen abgefragt und nach "unicode 916" "unicode 8711" gegoogelt. Drauf gekommen bin ich, weil die Buttons wegen der unterschiedlichen Zeichenhöhe von Δ und ∇ unterschiedlich hoch waren.

                  Rolf

                  --
                  sumpsi - posui - obstruxi
                  1. problematische Seite

                    Hallo, ok Rolf für dich tausche ich auch die Pfeile :). Da will ich einmal Kreativ sein. Aber du hast Recht. Die unterschiedliche Größe ist mir nicht aufgefallen. Die Wikiseite ist auch nicht schlecht. Ich war auf einer anderen komischen Seite und musste bei 150% Vergrößerung Ewig scrollen.

                    Die Zeichen habe ich dann mit &del und &delta Codiert. Deshalb dachte ich wohl auch das die irgendwie zusammengehören.

                    Und das mit dem br ist viel schöner.

                    So nun möchte ich meine Spanisch-Kenntnisse aber zum besten geben.

                    Ich vermute du wolltest No hablo español. - "Ich spreche kein Spanisch" schreiben.

                    No nabla español. - Würde "sprich kein Spanisch" bedeuten.

                    1. problematische Seite

                      Hallo Sven,

                      No hablo español. - "Ich spreche kein Spanisch"

                      Nein, das wollte ich zu keiner Zeit ausdrücken. Wie kommst Du darauf?

                      Rolf

                      --
                      sumpsi - posui - obstruxi
                    2. problematische Seite

                      Hallo Sven,

                      Ich vermute du wolltest No hablo español. - "Ich spreche kein Spanisch" schreiben.

                      nein, das wollte Rolf nicht. Und ich auch nicht.
                      Du solltest vielleicht deinen Ironie-Detektor nachjustieren.

                      No nabla español. - Würde "sprich kein Spanisch" bedeuten.

                      Das glaube ich einfach mal. Ich verstehe Spanisch so weit, dass ich ungefähr nachvollziehen kann, worum es geht - wenn ich es langsam und konzentriert lesen anstatt hören darf.

                      Live long and pros healthy,
                       Martin

                      --
                      Bei Erwärmung steigt das Thermometer, bei Erkältung singt es.