einfache Grafische weboberfläche auf einem W5100 Ethernet Shield Arduino Mega

International Deutsch
1

Hallo zusammen

ich bin mal wieder an meiner Solarsteuerung. Nun habe ich Ihr einen Mega mit Ethernetsheeld spendiert.
Das Ganze funktioniert auch. Ich habe den Webserver-Sketch umgestrickt und es werden schon die ersten Messwerte im Browser dargestellt.
Schön währe es wenn ich eine einfache grafische Oberfläche mit verschiedenen Symbolen ,Rechtecke Kreise u.s.w., die den Aufbau meiner Anlage schematisch darstellen sollten, programieren könnte.
Das Ganze sollte mittels eines Browsers ,zuerst in meinem Netzwerk und später eventuell im Internet zu sehen sein.
Ich bin auf folgende Seite gestoßen : HTML/Tutorials – SELFHTML-Wiki Diese ist sehr vertändlich für einen Anfänger.
Allerdings lassen sich die meisten Befehle nicht direkt in den Ethernetsketch einbinden.
Warscheinlich lauten die für das W5100 etwas anders.
Kennt jemand eventuell ein Tuturial speziell für die html-Befehle mit dem Arduino.
Schon seit ein paar Tagen google ich schon bin aber nicht wirklich viel schlauer.

Vielen Dank Rudi

2

Kennt jemand eventuell ein Tuturial speziell für die html-Befehle mit dem Arduino.

HTML ist HTML.
Das hat nichts mit Arduino zu tun.
HTML wird vom Browser verarbeitet und das Resultat angezeigt.

Und SelfHTML ist schon eine gute und aktuelle Quelle.

3

Hi combi

Danke für die schnelle Antwort.
Gerade bin ich kräftig an experimentieren.
Sachen wie den Seiten Titel zu benennen mittels client.print("Solaranlage Rudi Hamma"); gelingen schon

Doch wenn ich ein Befehl wie zum Beispiel: client.print("p { font-size: 1.5em; }");
eingebe dann erscheint dieser Befehl als Klartext und wird nicht als Befehl ausgeführt.
Woran ligt das denn?

4 
client.print("<p style="font-size:10pt;">Text</p>");

Aber tu dir das alles auf dem AVR nicht an! Das geht schieft. Dafür sind die Teile einfach nicht ausgelegt. Besser wäre es, wenn du die Messwerte sammelst und zB mit dem Raspberry Pi aufwertest.

5

hi,

p { font-size: 1.5em; }

ist kein befehl, sondern eine css-formatierung. die kannst Du in keiner werseite einfach so eingeben.
schau mal bei selfhtml, wie es funktioniert, dann schreibe es einfach in eine html-datei, die auf Deinem desktop liegt und mach nen doppelklick drauf. Dein browser zeigt Dir dann das ergebnis an.
wenn das funktioniert, arbeite mit dem arduino. aber davon bist Du noch ein stückchen weg...

hier ist mal das "font-size"-beispiel von selfHTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>font-size</title>
    <style>


      h2 { font-size: 48px; }
      p  { font-size: 1.2em; }
      a  { font-size: 0.7cm; }


    </style>
  </head>
  <body>
    <h1>Schriftgrößen mit font-size</h1>
    <h2>Erlaubte Werte</h2>
    <p>Es ist empfehlenswert, die Unterschiede zwischen
      <a href="http://wiki.selfhtml.org/...">absoluten</a>
      und <a href="http://wiki.selfhtml.org/...">relativen</a>
      Längenmaßen zu kennen.
    </p>
  </body>
</html>

code kopieren, in eine neue textdatei einfügen. speichern.

unter windows: im explorer auf extras > ordneroptione > reiter ansicht. dort "erweiterungen bei bekannten dateitypen" : häkchen weg.

dann siehst Du bei Deiner textdatei die erweiterung ".txt" das auf html ändern.

mit einem doppelklick darauf geht die datei in Deinem browser auf.

das

p  { font-size: 1.2em; }

geht nur, weil es im head - bereich innerhalb von style - tags steht.

probieren und lernen.

gruß stefan

6

client.print("

Text

");
Das geht schief...

Besser:

client.print("<p style='font-size:10pt;'>Text</p>");

Noch besser:
CSS lagert man in *.css Datei aus

Und noch viel besser:

Aber tu dir das alles auf dem AVR nicht an!

Dem stimme ich zu!

7

Es scheint aber doch ein Unterschied zu sein ob ich die Seite in einem Pc erstelle oder ob ich das Ganze ein Ethernet-Sheeld machen lasse.
So funktionieren "" nicht da die IDE meckert und danach z.B. eine ) haben will.

Einen Raspi will ich eigentlich nicht einsetzen.
Es sollen nur 5-6 Messwerte , 3-4 Zustände und noch eventuell einige Textmeldungen sein.
Das müsste doch mit einem Mega zu machen sein oder.

8

Wenn du in einem String Literal Zeichen wie ' oder " haben willst musst du das mit einem \ ausmaskieren!

Oder C++11 aktivieren und sogenannte "raw string literals" verwenden

9

hi,

dafür brauchst Du nicht mal einen mega, da reicht ein uno locker. eine bedingung: der uno hängt in Deinem netzwerk mit internet-zugang. dann nimmt Dir die jQuery-bibliothek viel ab, und die liegt im internet.

falls nicht im internet, bringst Du auf einem mega auch schon viel zustande.

zu dem " ' problem.

einem browser ist es egal, ob Du " oder ' verwendest. einem uno nicht. bau die webseite also mit ', die " brauchst Du erst später dann im arduino für andere dinge, dort bleibt ' für html und " für die arduino-eigenen funktionen.

gruß stefan

10

Eine einfache Lösung für die Formatierung:

void setup()
{
  Serial.begin(9600);

  static const char html[] PROGMEM =
R"(<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>font - size</title>
<style>

h2{ font - size: 48px; }
p{ font - size: 1.2em; }
a{ font - size: 0.7cm; }
</style>
</head>
<body>
<h1>Schrift mit font - size</h1>
<h2>blah</h2>
</body>
</html>)";

  printString(Serial, html);
}

void loop()
{

}

void printString(Stream& stream, const char* str)
{
  while(char c = pgm_read_byte(str))
  {
    stream.write(c);
    str++;
  }
}

Raw Strings schreibt man so: R"( ... )"
Damit kann man den HTML Code praktisch direkt in die IDE kopieren :slight_smile:

Dazu diese Datei öffnen:
x:\Arduino\hardware\arduino\avr\platform.txt
Und bei compiler.cpp.flags hinten -std=gnu++11 anhängen

Arbeitet aber irgendwie nicht richtig mit dem F() Makro zusammen. Also habe ich die PROGMEM Behandlung per Hand gemacht. Was anderes macht die Arduino Software intern auch nicht wirklich
Dadurch belegt der String kein RAM. Vor allem auf dem UNO sehr wichtig!

Eine andere doofe Sache ist dass die Arduino IDE irgendwie Hyperlinks versaut und es keine Möglichkeit gibt das zu unterbinden. In Visual Studio kann man das abstellen :frowning:

11

Es scheint aber doch ein Unterschied zu sein ob ich die Seite in einem Pc erstelle oder ob ich das Ganze ein Ethernet-Sheeld machen lasse.
So funktionieren "" nicht da die IDE meckert und danach z.B. eine ) haben will.

Nein!

Ob du Arduino C/C++ oder ein PC C/C++ verwendest, das Problem hast du auf beiden Systemen identisch.

12

Also wenn man die korrekte Syntax nimmt, geht auf dem Mega unheimlich viel in HTML.

Auch Bilder und Grafiken kann man ja problemlos von extern einbinden. Auch komplizierte css gehen, weil auch diese kann man von extern einbinden. Notfalls kann ich sogar iframes reinpacken, die mir Daten von extern auswerten und innerhalb der vom Mega präsentierten Webseite darstellen.
Anklickbare Knöpfe und Symbole zur einfacheren "visuellen" Erkennung geht auf die gleiche Art und Weise.
Einschränkung: Ich brauche ein PC oder NAS im Internen Netz 24/7 on, oder Zugang zum Internet und etwas Webspace.

13

Hallo

danke für die zahlreiche Hilfe.
An Serenifly der Tip mit Ausmaskieren das funktioniert prima.