Welkom bij de Tweaking4All gemeenschapsforums!
Voor je gaat deelnemen, bekijk de Forum Regels!
Specifieke onderwerpen: Start het onderwerp met de naam van het programma of systeem.
Bijvoorbeeld “MacOS X – Jouw vraag“, of bijvoorbeeld “MS Word – Jouw Tip of Truc“.
Merk op: Omschakelen naar een andere taal zal niet werken als je een post aan het lezen bent aangezien er waarschijnlijk geen vertaling beschikbaar is.
Ik wil graag 8 temperatuur sensoren inlezen vanuit een webserver. De webserver heeft een SD kaart waar de HTML opstaat inclusief een plaatje. (dit gaat allemaal goed)
Maar nu de hamvraag , ik wil dat de gebruiker middels een update button de 8 actuele waarden onder het plaatje ziet verschijnen.
Ik loop steeds vast omdat ik niet begrijp waar ik het AJAX deel in de Arduino webserver moet plaatsen...
if (client.available()) { // client data available to read
char c = client.read(); // read 1 byte (character) from client
// buffer first part of HTTP request in HTTP_req array (string)
// leave last element in array as 0 to null terminate string (REQ_BUF_SZ - 1)
if (req_index < (REQ_BUF_SZ - 1)) {
HTTP_req[req_index] = c; // save HTTP request character
req_index++;
}
// print HTTP request character to serial monitor
Serial.print(c);
// last line of client request is blank and ends with n
// respond to client only after last line received
if (c == 'n' && currentLineIsBlank) {
if (StrContains(HTTP_req, "GET / ")
|| StrContains(HTTP_req, "GET /index.htm")) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();
webFile = SD.open("index.htm"); // open web page file
}
else if (StrContains(HTTP_req, "GET /Plaatje.png")) {
webFile = SD.open("Plaatje.png");
if (webFile) {
client.println("HTTP/1.1 200 OK");
client.println();
}
}
if (webFile) {
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
// open requested web page file
webFile.close();
}
// reset buffer index and all buffer elements to 0
req_index = 0;
StrClear(HTTP_req, REQ_BUF_SZ);
break;
}
// every line of text received from the client ends with rn
if (c == 'n') {
// last character on line of received text
// starting new line with next character read
currentLineIsBlank = true;
}
else if (c != 'r') {
// a text character was received from client
currentLineIsBlank = false;
}
} // end if (client.available())
} // end while (client.connected())
delay(1); // give the web browser time to receive the data
client.stop(); // close the connection
} // end if (client)
Heeft iemand een suggestie?
Ik heb de code nog niet goed doorgekeken en mijn AJAX ervaringen zijn ook wat beperkt.
Wat ik wel weet:
1. M.b.v. jQuery kun je een "webpage" inladen mbv AJAX en de data injecteren in de openstaande pagina.
2. Jouw Arduino hoeft daarvoor alleen maar een simple stukje HTML te bieden waarin de temperaturen staan.
Na het inladen van het HTML stukje, gebruik je dan jQuery om de data onder de afbeelding te plakken.
Je hebt dus (en volgens mij doe je dat deels al) 2 items nodig: de pagina zelf (index.htm?), en de code voor de ruwe temperatuur lezing.
Ik weet niet of je dit op weg helpt ... ? 
Hallo Hans bedankt voor de reactie. Mijn grootste vraag is eigenlijk hoe ik het activeren van het Ajax deel moet inpassen in de HTML code en in het bijzonder hoe dit door de arduino sketch van af de SD kaar moet worden ingelezen. Als ik het in gewoon nederlands omschrijf heb ik dit nodig.
Zolang client aangesloten ( client .connected)
als client beschikbaar is (client.available)
als er iets is metreq_index
als laatste tekst van client is leeg en heeft een n teken
als er GET / index.htm in de STR Contains staat
dan gebeuren er onbegrijpelijke dingen....
Connection close
........
Dan wordt de variabele webFile gevuld met SD.open("index.htm")
of het plaatje Plaatje.png wordt op een soortgelijke wijze geopend en weggeschreven om een HTML opmaak in de webserver te genereren.
Dit deel snap ik lang niet allemaal maar het werkt...... totdat ik het stukje AJAX
// Ajax request
if (StrContains(HTTP_req, "ajax_switch")) {
// read switch state and send appropriate paragraph text
GetSwitchState(client);
}
else
//(StrContains(HTTP_req, "GET /Plaatje.png"))
{
webFile = SD.open("Plaatje.png");
if (webFile) {client.println("HTTP/1.1 200 OK");client.println();
}
Insluit dan wordt er geen HTML meer aangemaakt en heb ik een lege pagina op de webserver....
Uiteraard is de functie GetSwitchState ook in de sketch opgenomen.
void GetSwitchState(EthernetClient cl)
{
if (digitalRead(3)) {
cl.println("Switch state: ON");
}
else {
cl.println("Switch state: OFF");
}
}
// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str = 0;
}
}
Dus eigenlijk is de hamvraag hoe combineer ik het ophalen van de verschillende delen op de SD kaart tot een geheel om een HTML pagina te genereren. Met inbegrip van het Ajax deel
Get index.html,Get plaatje.png en het HTTP request if (StrContains(HTTP_req, "ajax_switch"))
Hopelijk kan jij of iemand anders behulpzaam zijn, graag met een kleine uitleg hoe zoiets nu eigenlijk werkt.....
Groet en alvast bedankt André
Hoi André,
Van wat ik me herinner ...
In het hoofd HTML bestand (b.v. index.html) maak je een <DIV> met een uniek ID, b.v.
<DIV ID="ajax_hier">Hier komt de Ajax content</DIV>
Vervolgens maak je op de Arduino de content die daar in gaat zitten, stel dat we data.html noemen, b.v.
<P>Test content</P>
Met jQuery kun je dan de link <jouwserver>/data.html ophalen en in de DIV injecteren.
Het injecteren kan bij het laden van het index.html document, door een knop druk (onClick) of b.v. met een JavaScript timer die iedere zoveel seconden/minuten de data opnieuw inleest.
Een voorbeeld en beschrijving kun je o.a. bij StackOverflow vinden, of voor JSON data kun je een voorbeeld hier vinden.
Hopelijk helpt je dit een beetje op weg ...