Arduino als Webserver, Frage zu HTML-Code

[anon62503658]

Hallo,
vielleicht kann mir hier jemand helfen der sich etwas mit Webseiten auskennt.

Ich habe eine kleine Webseite gebaut deren Quelltext auf einem PC im lokalen Netzwerk liegt.

Die Webseite ist als Tabelle aufgebaut.
Die Zeile mit der Wassertemperatur sieht im HTML-Code z.B. so aus:

 <tr>
 <td> <font size='4'><div align='left'> Wassertemperatur </td>
 <td> <font size='4'><div align='right'> <font color='red'>12,62</td>
 <td> <font size='4'><div align='left'> &#176C </td>
 </tr>

Darin ist der Wert für die Temperatur (12,62) noch als Text eingetragen.

Jetzt kann man aber in Webseiten externe Quellen verlinken.
z.B.

[url=http://www.smilies.4-user.de][img]http://www.smilies.4-user.de/include/Draussen/smilie-out-108.gif[/img][/url]

für

Ich möchte jetzt dass der reale Wert für die Wassertemperatur vom Arduino gelesen wird.
Der Arduino hängt auch im lokalen Netzwerk und hat eine feste IP-Adresse.
Was muss ich an Stelle des Textes 12,62 in den HTML-Code der Webseite eintragen dass der Browser den realen Wert beim Arduino abfragt und anzeigt.

Beim Webserver auf dem Arduino müsste dann irgendwie ein "GET /xyz" ankommen auf das ich mit client.println(xyz); antworten könnte.

Ich hoffe das Problem verständlich dargestellt zu haben. :o

Viele Grüße
Peter

p.s. Weil mehr als 90% der Webseite statische Elemente sind die viel Formatierungs- und Tabellencode enthalten möchte ich nicht dass der Arduino die gesamte Webseite ausliefert sondern nur die variablen Messwerte.

Ich habe bei meiner Suche alles mögliche gefunden. Wie man Bilder oder andere Webseiten aufrufen kann, aber einfach nur eine Zahl von einer externen adressierbaren Stelle scheint nicht möglich zu sein.

[beeblebrox]

Hallo

dann zerlegst du die Zeile einfach :
Also angenommen deine Temperatur steht in der Variablen
float Tempsensor;

dann machst du aus

client.print("

12,62");

client.print("

");
client.print(TempSensor);
client.print("");

das println würde ich für HTML sein lassen. Das schicht nur noch ein 0x0d,0x0a (oder CR LF) über die
Leitung was für HTML irrelevant ist.

Wenn du die Temperaturausgabe noch irgendwie formatiert haben willst, ich glaube das Default
ist mit 2 Nachkommstellen, musst du halt noch ein wenig "Strings schubsen :-)".

Ulli

[anon62503658]

Hallo Ulli,
danke für deine Antwort.

Aber ich habe mich vermutlich in meinem Eingangspost doch nicht verständlich genug ausgedrückt
Jedenfalls passt deine Antwort leider nicht wirklich zu dem was ich wissen wollte.

Die Webseite liegt als .htm Datei komplett auf einem PC im lokalen Netzwerk.
Der Arduino macht also kein
"client.print("

12,62");"
sondern das kommt aus der .htm Datei auf dem PC.

Ich möchte aber dass der Browser an Stelle des Textes 12,62 eine Anfrage an den Arduino schickt um den echten Wert darzustellen.

Ich habe jetzt mal an Stelle der 12,62 ein " Messwert " in den Quelltext der Seite eingefügt.

Das führt dazu, dass die Zeile im Browser jetzt so aussieht: Wassertemperatur Messwert °C

Messwert ist dabei als Link unterlegt. 192.168.0.61 ist dabei die Adresse des Arduino.
Wenn ich diesen Link anklicke läuft im Webserver des Arduinos "GET /wert1" auf.
"wert1" frage ich im Arduino ab und schicke als Antwort "client.println("12345");"

Ich will jetzt erreichen, dass die Webseite den Arduino automatisch abfragt und nicht erst wenn ich den Link "Messwert" anklicke.
Zudem soll in der Webseite nicht der Linktext "Messwert" angezeigt werden sondern die Antwort vom Arduino die ja "12345" lautet.

Gruß
Peter

[rudirabbit]

In dieser Konstellation wäre der Arduino aber eher ein Webclient. Kein Server

Denke es funktioniert eher so, das der Arduino auf dem Server ein Php anstößt welches die Daten in eine SQl oder in ein File schreibt.
Die Website liest dies dann aus.

Du hast aber hier keinen Webserver, es gibt zwar Software die du installieren kannst um dies lokal zu haben.
So wie du das vorhast, wird es IHMO nicht funktionieren.
Asche auf mein Haupt wenn es doch geht :o

Wenn es eine kleineres Projekt ist, dann lasse die Website auf den Arduino laufen. Der ist dann Server.
Dann wäre es so wie beeblebrox meint.

Und das funktioniert auch, habe sowas selbst am Laufen.

[Doc_Arduino]

Hallo,

kann man nicht auf dem Arduino anweisen das er aller x Sekunden oder x Minuten selbst sendet? Eine Art Polling. Alles in html. Irgendwas gibt dafür jedenfalls. Weis nur nicht genau was das war.

Edit:
das meinte ich, hoffe das ist das gesuchte

// add a meta refresh tag, so the browser pulls again every x seconds:
client.println("<meta http-equiv=\"refresh\" content=\"5\">");

[ElEspanol]

Ihr habt die Problematik bzw. den Kern des Problems nicht verstanden.

Die Lösung ist in reinem html nicht machbar. In php eher. Ich hatte aus denselben Gründen mal vor längerem so was gemacht, aber dann nicht komplett zu Ende gebracht.

Der Arduino ist in diesem Fall sehr wohl Server, er liefert die Werte auf die Anfragen des php Skripts, welches sie an der gewünschten Stelle in das html Gerüst einbaut.

[Doc_Arduino]

Hallo,

weis nicht recht ob verstanden oder nicht, denke schon. Die html Zeile weist den aufrufenden Browser an aller x Sekunden zu refreshen. Das ist doch was er möchte? Ohne zu klicken eine Aktualisierung der Seite. Hatte ich selbst mal mit meinem WLAN Shield probiert vor langer Zeit.

[qualidat]

Es geht auch ganz einfach:

Du legst die Arduino-Software so an, dass sobald ein Ethernet-Connect zustande kommt, dieser die Temperatur als Text aussendet (und ein par Millisekunden später die Verbindung trennt), ganz ohne HTTP- und HTML-Überbau. Aktuelle Browser tolerieren das und geben brav den Text aus ... und fertig.

Es ist allerdings auch nicht sehr schwierig, den Arduino dazu zu bringen, etwas HTML um die Zahl "herumzubauen", z.B. um per Metatag einen automatischen Refresh aller par Sekunden auszulösen.

In deiner Webseite positionierst du am Besten iFrames, deren Source eben auf die IP des Arduino zeigt.

[ElEspanol]

ich kann mich nur wiederholen, das vorgeschlagene sind Alternativen, aber nicht wirklich das, was der TE wollte/meinte.
Fakt ist nun mal, dass der Arduino die Daten "nackt" auf Tcp Anfrage hin liefern kann
Und auch, dass eine reine html Seite diese Daten nicht einbinden und darstellen kann, wenn diese nicht auf dem Arduino liegt.

[anon62503658]

Danke schon mal an alle für die bisherige Hilfen.

Ich glaube @ElEspanol hat mein Vorhaben verstanden.
Mit reinem html geht es vermutlich wirklich nicht. PHP geht auch nicht weil auf dem PC kein Webserver läuft.

Kurz mal im Hintergrund meiner Gedankengänge.
Der Arduino als Webserver ist nicht wirklich der schnellste.
Ich hatte zum Test eine Tabelle mit etwa 10 Tabellenzeilen und 10 Messwerten komplett vom Arduino ausliefern lassen. Der Arduino als Webserver war damit etwa 1s lang beschäftigt. Wenn die Seite fertig ist stehen da etwa 30-40 Messwerte drin. Das würde vermutlich bedeuten dass der Arduino 3-4s damit beschäftigt ist die Seite auszuliefern.

Auf dem Arduino der diese Seite ausliefern soll habe ich alle anzuzeigenden Messwerte zur Verfügung. Dieser Arduino hat aber sonst auch noch einiges zu tun und ich kann es mir nicht erlauben den 3 oder 4 Sekunden in der Webserver-Routine werkeln zu lassen weil dann andere zyklische Funktionen in dieser Zeit blockiert wären.

Über 90% der Zeit geht dafür drauf den statischen Teil der Webseite darzustellen. Also anlegen der Tabelle, Schrift- und Farbinformationen zu senden. Die weitaus wenigsten Daten betreffen die eigentlich darzustellenden Messwerte.

Deshalb war mein Gedanke die Webseite auf einen PC zu legen der eh bei mir immer läuft.
Startet ein Browser im lokalen Netzwerk diese Webseite ist die blitzschnell aufgebaut und der Arduino hat nichts damit zu tun. Die Webseite sollte dann automatisch nur die fehlenden Messwerte direkt vom Arduino laden. Das würde den Arduino wesentlich entlasten.

Ich bin jetzt mal dieser Anleitung gefolgt und habe das Beispiel wie beschrieben zum laufen gebracht.

Dann habe ich den Teil der auf die SC-Karte gehört als .htm Datei auf dem PC abgelegt.
Mit einem doppelklick auf die Datei startet dann der Browser und stellt den statischen Teil der Webseite dar, aber das Nachladen der Info über den Zustand von Pin 3 des Arduinos funktionierte verständlicherweise nicht mehr.

Es gibt im statischen Teil der Webseite die Zeile "request.open("GET", "ajax_switch" + nocache, true);"
Diese Zeile habe ich geändert in "request.open("GET", "http://192.168.0.61/ajax_switch" + nocache, true);"
192.168.0.61 ist der Arduino und dieser wird nun auch angesprochen und liefert auch den Zustand von Pin 3 an die Webseite aus.
Dass die Antwort tatsächlich ausgeliefert wird sehe ich im SerialMonitor des Arduinos.
Aber leider wird die eingehende Antwort vom Arduino auf der Webseite nicht dargestellt. An der Stelle klemmt es jetzt noch.

Kann mir vielleicht jemand sagen wo ich am statischen Teil der Webseite noch drehen muss damit es passt?

Gruß
Peter

[qualidat]

ElEspanol:
Fakt ist nun mal, dass der Arduino die Daten "nackt" auf Tcp Anfrage hin liefern kann
Und auch, dass eine reine html Seite diese Daten nicht einbinden und darstellen kann, wenn diese nicht auf dem Arduino liegt.

Mit dem zweiten Satz irrst du definitiv. Nimm einen iFrame und gib als dessen Source die IP des Arduino an - der ausgelieferte Text wird selbstverständlich dargstellt!

[ElEspanol]

Ajax ist natürlich auch eine Möglichkeit, da muss ich aber ganz passen.

[ElEspanol]

qualidat:
Mit dem zweiten Satz irrst du definitiv. Nimm einen iFrame und gib als dessen Source die IP des Arduino an - der ausgelieferte Text wird selbstverständlich dargstellt!

Klar, das ist mir schon bekannt. Aber wie bindest du den vernünftig in Fliesstext oder Tabellen ein? Und dann mach das mal mit vielen Messwerten, oder Led-Zustände mit verschiedenen Bitmaps darstellen. D.h. auch für jede Abfrage eine Anfrage an den Arduino.

mit php frag uch alles in einem Rutsch ab. Aber php ist ja leider nicht auf seinem Server.

[anon62503658]

qualidat:
Mit dem zweiten Satz irrst du definitiv. Nimm einen iFrame und gib als dessen Source die IP des Arduino an - der ausgelieferte Text wird selbstverständlich dargstellt!

Das klingt jetzt aber interessant!
Geht das mit dem iFrame auch ohne PHP?
Wenn ja, wie kann ich ein iFrame in die Tabelle einbauen dass der Messwert dargestellt wird.
Kannst du mir einen Beispielcode zeigen?

ElEspanol:
...
D.h. auch für jede Abfrage eine Anfrage an den Arduino.
...

Das wäre mir egal weil jede Anfrage nur ein paar millisekunden dauert.
Mit 50 Anfragen á 50 ms kann ich viel besser leben als mit einer Anfrage die 3-4 Sekunden zur Bearbeitung dauert.

Wenn das mit dem iFrame funktioniert wäre mir das lieber als AJAX zu nutzen.

Sorry an alle für meine dummen Fragen, aber ich habe eigentlich keine Ahnung von Webseiten und dem ganzen Geschichten um deren Programmierung.

Gruß
Peter

[ElEspanol]

klar geht das mit html. Google bringt es dir bei.
Du musst nur den Arduino Server so programmieren, dass er dir auf Anfrage die richtigen Werte liefert

[anon62503658]

ElEspanol:
klar geht das mit html. Google bringt es dir bei.
Du musst nur den Arduino Server so programmieren, dass er dir auf Anfrage die richtigen Werte liefert

Na danke

Ich habe kein Problem damit dem Arduino beizubringen wie er auf eine Anfrage die richtigen Werte liefert.

Ich habe bevor ich hier nachgefragt habe aber schon etliche Stunden mit der Suche nach einer Lösung mit Google verbracht. So bin ich auch auf die AJAX-Geschichte gestoßen.
Wenn man aber keine Ahnung von der Webseitenprogrammierung hat, fällt es auch schwer Google mit den passenden Suchbegriffen zu füttern weil man die nicht kennt.

Deshalb wäre mir ein Beispiel oder ein Link zu der iFrame Geschichte (wenn es denn damit machbar sein sollte) sehr hilfreich.

Ich lasse jetzt aber nicht locker und frage Tante Google mal nach iFrame und hoffe Beispiele zu finden die zielführend sind.

Gruß
Peter

[ElEspanol]

peter_de:
Deshalb wäre mir ein Beispiel oder ein Wenn man aber keine Ahnung von der Webseitenprogrammierung hat, fällt es auch schwer Google mit den passenden Suchbegriffen zu füttern weil man die nicht kennt.
Link zu der iFrame Geschichte (wenn es denn damit machbar sein sollte) sehr hilfreich.

Ich lasse jetzt aber nicht locker und frage Tante Google mal nach iFrame und hoffe Beispiele zu finden die zielführend sind.

Google iframe, 1. Fundstelle: Google

[RudiDL5]

Hallo zusammen,

ich mache "Internet-Programmierung" (HTML, Javascript, mySQL, AJAX) seit einigen Jahren und habe selbst schon mehrfach versucht, innerhalb HTML auf lokale Dateien zuzugreifen. Daher habe ich diesen Beitrag mit großem Interesse verfolgt und auch einige weitere Experimente dazu durchgeführt.

Alle mit dem selben Ergebnis:

Ob per <iframe...> , AJAX oder sonst wie - in reinem HTML wirst du NIE einzelne Messwerte in deine lokale HTML-Site EINBETTEN können! Ganz einfach: Weil alle Protokolle in diesem Zusammenhang es NICHT erlauben, auf lokale Dateien des PC zuzugreifen (und diese mit HTML zu verknüpfen). Punkt. DAS wiederum würde nämlich gestatten, jeden PC der Welt auf (relativ) einfache Weise fernzusteuern - und war wohl m.E. nicht im Sinne des Erfinders...

Mögliche Lösungen? Ja klar.

Entweder:
Du bewegst deinen Arduino tatsächlich dazu, eine komplette (evtl. aufs Minimum abgespeckte) HTML-Site zu generieren, die du dann per "IFrame-Refresh" oder ähnlich aktualisierst... Halt so wie es die Kollegen schon vorgeschlagen haben.

Oder:
Es wird nur dann (relativ "einfach"...) funktionieren, wenn du tatsächlich einen lokalen WebServer installierst. Keinen, der nach draußen kommuniziert oder von außen angesprochen werden kann, bzw. der für externe Zugriffe komplett gesperrt ist (Ports, Firewall, etc). Hierzu bietet sich "XAMPP" für Windows an. Dies ist ein vollständiges Apache-Paket mit allen Optionen, die man auch auf "echten" Servern findet. Für einen PHP-Entwickler (wie mich) ist es eigentlich sogar ein "muss", damit man alles zuerst lokal testet und dann erst per FTP nach draußen gibt. Innerhalb des XAMPP kannst du dann "ganz simpel" lokale kleine Dateien (oder Text-Schnippsel vom Arduino) mittels fopen(...) öffnen, aufbereiten und einbetten. Sogar mittels CSS super aufhübschen usw...

Ich kann mir denken dass dir dieser Weg nicht gefallen wird. Aber nach aktuellen Erkenntnissen wird es dir anders herum nie gelingen, innerhalb reinem HTML externe Daten-Schnippsel zu verarbeiten und "einzubetten". Wenn mir jemand doch noch einen ultimativen Trick zeigt, wäre ich ihm sicherlich nicht böse...

Gruß, Rudi

PS:
Das selbe obige Problem bleibt auch bei AJAX: Selbst wenn es dir gelingt die AJAX-Requests zu erzeugen - kannst du ohne laufendes PHP nix verarbeiten. Und PHP setzt wiederum einen Server voraus...

[RudiDL5]

Nachsatz

Bei der höchstwahrscheinlich von dir bevorzugten IFrame-Version wäre es natürlich auch möglich, innerhalb einer HTML-Site mehrere IFrames einzubinden. Jeder IFrame sendet dann einen eigenen Request an den Arduino - mit unterschiedlichen Parametern, die die einzelnen Messwerte abfragen.

Im Haupt-Dokument reduzierst du die IFrames auf das absolute Minimum je Messwert und behälst deine gesamte Struktur annähernd bei. Hiebei müsstest du dann in die betreffenden Tabellen-Zellen die jeweiligen (unterschiedlichen) Iframes einbinden.

<table>
  <tr>
    <td>Wert 1:</td>
    <td><iframe name="wert1" width="100" height="20" src="(Arduino-Abruf-1)"></iframe></td>
  </tr>
  <tr>
    <td>Wert 2:</td>
    <td><iframe name="wert2" width="100" height="20" src="(Arduino-Abruf-2)"></iframe></td>
  </tr>
  <tr>
    <td>Wert 3:</td>
    <td><iframe name="wert3" width="100" height="20" src="(Arduino-Abruf-3)"></iframe></td>
  </tr>
</table>

So in der Art. Mangels passender Arduino-Shields und Möglichkeiten zum Test kann ich allerdings keine genauere Angabe machen, wie die einzelnen Requests hierfür gestaltet werden müssen. Auch weiß ich leider nicht, ob man mehrere Anfragen parallel an den Arduino senden kann.

Aber "(Arduino-Abruf-x)" musst du auf jeden Fall durch den/die entsprechenden Aufruf-Parameter ersetzen.
Rudi

[Doc_Arduino]

Hallo,

klingt interessant, so kompliziert hatte ich mir das wirklich nicht vorgestellt. Aber du wirst wissen wovon die redest.
Ich verfolge das still weiter.