nicht angemeldet svenpaush
Rolf B
svenpaush
svenpaush
Auge
Matthias Scharwies
Rolf B
svenpaush
Rolf B
Der Martin
Rolf B
svenpaush
Rolf B
Der Martin
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.
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.
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.
<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.<div class="topnav"> im header ist unnötig. Falls Du das bei Selfhtml gesehen hast - wo? Das müssten wir dann überarbeiten.<div class="content"> möchte dann ein <main> Element sein.<display> Element gibt es nicht. Du könntest hier <section> verwenden. Entsprechendes gilt für <log>.<br> hinter einer textarea ist für deinen Anwendungsfall unnötig. Das Einschließen einer textarea in <p></p> ebenfalls.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.
Sortier das erstmal aus, und dann schauen wir nochmal für die weiteren Sachen drauf.
Rolf
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.
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.
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
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.
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
- für die Virtuellen Tasten (Links unter der Überschrift)
- für das Display (Rechts unter der Überschrift)
- 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
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
- für die Virtuellen Tasten (Links unter der Überschrift)
- für das Display (Rechts unter der Überschrift)
- 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
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.
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
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.
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
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
Also das, was weder in der gymnasialen Oberstufe noch im Ingenieurstudium vorkommt. ↩︎
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
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.
Hallo Sven,
No hablo español. - "Ich spreche kein Spanisch"
Nein, das wollte ich zu keiner Zeit ausdrücken. Wie kommst Du darauf?
Rolf
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