data op de juiste plaats in html krijgen
19 berichten
• Pagina 1 van 2 • 1, 2
data op de juiste plaats in html krijgen
beste,
ik ben bezig om met een mega een webserver te maken voor het weer geven van datum/tijd en her resultaat van 10 temp. sensoren.
nou krijg ik het wel voor elkaar om alles op de .htm pagina te krijgen maar ik krijg het niet voor elkaar om alles op de juiste plaats te krijgen. hij zet nu alles boven aan de pagina naast elkaar neer (zit nog maar 1 temp sensor in)
dit is de code die ik in de arduino heb staan:
dit is de html code:
alvast heel erg bedankt.
gr martijn
ik ben bezig om met een mega een webserver te maken voor het weer geven van datum/tijd en her resultaat van 10 temp. sensoren.
nou krijg ik het wel voor elkaar om alles op de .htm pagina te krijgen maar ik krijg het niet voor elkaar om alles op de juiste plaats te krijgen. hij zet nu alles boven aan de pagina naast elkaar neer (zit nog maar 1 temp sensor in)
dit is de code die ik in de arduino heb staan:
- Code: Alles selecteren
#include <RTClib.h>
#include <Wire.h>
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
int sensorPin = 0;
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 178, 120);
EthernetServer server(80);
RTC_DS1307 rtc;
File webFile;
File webFile2;
void setup()
{
#ifdef AVR
Wire.begin();
#else
Wire1.begin();
#endif
rtc.begin();
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
Ethernet.begin(mac, ip);
server.begin();
Serial.begin(9600);
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return;
}
Serial.println("SUCCESS - SD card initialized.");
// if (!SD.exists("zolder.png")) {
// Serial.println("ERROR - Can't find zolder.png file!");
// return;
// }
// Serial.println("SUCCESS - Found zolder.png file.");
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return;
}
Serial.println("SUCCESS - Found index.htm file.");
}
void loop()
{
int reading = analogRead(sensorPin);
float voltage = reading * 5.0;
voltage /= 1024.0;
float temperatureC = (voltage - 0.5) * 100 ;
Serial.print(temperatureC);
delay(2000);
DateTime now = rtc.now();
EthernetClient client = server.available();
if (client) {
boolean currentLineIsBlank = true;
while (client.connected()) {
if (client.available()) {
char c = client.read();
if (c == '\n' && currentLineIsBlank) {
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println("Refresh: 5");
client.println();
client.println("<!DOCTYPE HTML>");
client.println("<tijd>");
client.print(now.hour(), DEC);
client.print(':');
client.print(now.minute(), DEC);
client.print(':');
client.print(now.second(), DEC);
client.print(' ');
client.print(now.day(), DEC);
client.print('/');
client.print(now.month(), DEC);
client.print('/');
client.print(now.year(), DEC);
client.print('\n');
client.print(temperatureC);
//webFile2 = SD.open("zolder.png");
webFile = SD.open("index.htm");
if (webFile) {
while(webFile.available()) {
//client.write(webFile2.read());
client.write(webFile.read());
}
webFile.close();
//webFile2.close();
}
break;
}
if (c == '\n') {
currentLineIsBlank = true;
}
else if (c != '\r') {
currentLineIsBlank = false;
}
}
}
delay(2000);
client.stop();
}
}
dit is de html code:
- Code: Alles selecteren
<html>
<style>
h1 {
color: red;
font-size: 50px;
text-align: center;
}
h2 {
color: green;
font-size: 20px;
text-align: center;
}
body {
background: url('zolder.png');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
</style>
<head>
<title>Webserver</title>
</head>
<body>
<h1>Webserver</h1>
<h2><tijd></h2>
</body>
</html>
alvast heel erg bedankt.
gr martijn
Advertisement
Re: data op de juiste plaats in html krijgen
De groter dan en kleiner dan tekens zijn voor HTML. Er bestaat geen HTML definitie die <tijd> heet.
In de sketch zelf zou ik het stukje "HTTP/1.1 200 OK" en de volgende regels origineel houden. Ander raakt de browser in de war.
Vervolgens wil je de variabelen vanuit je sketch in de webpagina zetten. Daar zijn een paar technieken voor. Ik gebruik een '$' met een cijfer.
html code
Mijn '$' is dus eigenlijk een escape character.
In de sketch lees ik tijdens het overzetten van het bestand de tekens, en als dat een '$' is dan kijk ik welk cijfer er na komt en dat vul ik dan op die plaats in. Met overzetten bedoel ik lezen van SD kaart en schrijven naar het Ethernet shield.
Je kunt ook het bovenste deel en het onderste deel van een webpagina op de SD kaart zetten. In de sketch zet je dan eerst het bovenste deel over, daarna maak je zelf de HTML code voor het middelste deel en vervolgens zet het onderste deel van webpagina over.
In de sketch zelf zou ik het stukje "HTTP/1.1 200 OK" en de volgende regels origineel houden. Ander raakt de browser in de war.
Vervolgens wil je de variabelen vanuit je sketch in de webpagina zetten. Daar zijn een paar technieken voor. Ik gebruik een '$' met een cijfer.
html code
<h2>Tijd</h2>
De tijd is $1 <br>
Mijn '$' is dus eigenlijk een escape character.
In de sketch lees ik tijdens het overzetten van het bestand de tekens, en als dat een '$' is dan kijk ik welk cijfer er na komt en dat vul ik dan op die plaats in. Met overzetten bedoel ik lezen van SD kaart en schrijven naar het Ethernet shield.
Je kunt ook het bovenste deel en het onderste deel van een webpagina op de SD kaart zetten. In de sketch zet je dan eerst het bovenste deel over, daarna maak je zelf de HTML code voor het middelste deel en vervolgens zet het onderste deel van webpagina over.
Re: data op de juiste plaats in html krijgen
ik heb een andere code van internet afgeplukt waardoor ik ook mijn tekening op de site krijg.
met deze html code
zo als je ziet heb ik de tijd aangepast maar ik heb eerlijk gezegt geen idee hoe ik het in de arduino sketch moet verwerken.
ik ga nog even verder zoeken maar als je een voorbeeldje hebt voor me zou ik heel erg geholpen zijn.
gr matijn
- Code: Alles selecteren
#include <RTClib.h>
#include <Wire.h>
#include <SPI.h>
#include <Ethernet.h>
#include <SD.h>
RTC_DS1307 rtc;
// size of buffer used to capture HTTP requests
#define REQ_BUF_SZ 20
// MAC address from Ethernet shield sticker under board
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 178, 120); // IP address, may need to change depending on network
EthernetServer server(80); // create a server at port 80
File webFile;
char HTTP_req[REQ_BUF_SZ] = {0}; // buffered HTTP request stored as null terminated string
char req_index = 0; // index into HTTP_req buffer
void setup()
{
#ifdef AVR
Wire.begin();
#else
Wire1.begin();
#endif
rtc.begin();
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
// disable Ethernet chip
pinMode(10, OUTPUT);
digitalWrite(10, HIGH);
Serial.begin(9600); // for debugging
// initialize SD card
Serial.println("Initializing SD card...");
if (!SD.begin(4)) {
Serial.println("ERROR - SD card initialization failed!");
return; // init failed
}
Serial.println("SUCCESS - SD card initialized.");
// check for index.htm file
if (!SD.exists("index.htm")) {
Serial.println("ERROR - Can't find index.htm file!");
return; // can't find index file
}
Serial.println("SUCCESS - Found index.htm file.");
Ethernet.begin(mac, ip); // initialize Ethernet device
server.begin(); // start to listen for clients
}
void loop()
{
DateTime now = rtc.now();
Serial.print(now.hour(), DEC);
Serial.print(':');
Serial.print(now.minute(), DEC);
Serial.print(':');
Serial.print(now.second(), DEC);
Serial.print(' ');
Serial.print(now.day(), DEC);
Serial.print('/');
Serial.print(now.month(), DEC);
Serial.print('/');
Serial.print(now.year(), DEC);
Serial.println();
EthernetClient client = server.available(); // try to get client
if (client) { // got client?
boolean currentLineIsBlank = true;
while (client.connected()) {
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) {
// open requested web page file
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("refresh: 10");
client.println();
client.println("<!DOCTYPE HTML>");
webFile = SD.open("index.htm"); // open web page file
client.print(now.hour(), DEC);
client.print(':');
client.print(now.minute(), DEC);
client.print(':');
client.print(now.second(), DEC);
client.print(' ');
client.print(now.day(), DEC);
client.print('/');
client.print(now.month(), DEC);
client.print('/');
client.print(now.year(), DEC);
client.println();
}
// else if (StrContains(HTTP_req, "GET /page2.htm")) {
// client.println("HTTP/1.1 200 OK");
// client.println("Content-Type: text/html");
// client.println("Connnection: close");
// client.println();
// webFile = SD.open("page2.htm"); // open web page file
//}
else if (StrContains(HTTP_req, "GET /zolder.png")) {
webFile = SD.open("zolder.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
}
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 \r\n
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)
}
// sets every element of str to 0 (clears array)
void StrClear(char *str, char length)
{
for (int i = 0; i < length; i++) {
str[i] = 0;
}
}
// searches for the string sfind in the string str
// returns 1 if string found
// returns 0 if string not found
char StrContains(char *str, char *sfind)
{
char found = 0;
char index = 0;
char len;
len = strlen(str);
if (strlen(sfind) > len) {
return 0;
}
while (index < len) {
if (str[index] == sfind[found]) {
found++;
if (strlen(sfind) == found) {
return 1;
}
}
else {
found = 0;
}
index++;
}
return 0;
}
met deze html code
- Code: Alles selecteren
<html>
<style>
body {
background-color: #A4A4A4
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
h2 {
color: green;
font-size: 20px;
text-align: center;
}
.afbeelding_container {
position: relative;
float: center;
}
.afbeelding_container .tekst_containerAa {
position: absolute;
top: 30px;
left: 50px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRa {
position: absolute;
top: 0px;
left: 62px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAz {
position: absolute;
top: 147px;
left: 328px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRz {
position: absolute;
top: 132px;
left: 340px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAk {
position: absolute;
top: 200px;
left: 328px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRk {
position: absolute;
top: 185px;
left: 340px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAv {
position: absolute;
top: 375px;
left: 50px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRv {
position: absolute;
top: 415px;
left: 62px;
color: #0000FF;
}
.afbeelding_container .tekst_containerKw {
position: absolute;
top: 265px;
left: 310px;
color: #FF0000;
}
.afbeelding_container .tekst_containerWw {
position: absolute;
top: 290px;
left: 310px;
color: #0000FF;
}
</style>
<head>
<title>Webserver</title>
</head>
<body>
<h1>Webserver</h1>
<h2>Tijd</h2>
De tijd is $1 <br>
<div class="afbeelding_container">
<img src="zolder.png" />
<div class="tekst_containerAa">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRa">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAz">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRz">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAk">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRk">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAv">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRv">
<p>Retour temp:</p>
</div>
<div class="tekst_containerKw">
<p>Koud water temp:</p>
</div>
<div class="tekst_containerWw">
<p>Warm water temp:</p>
</div>
</div>
</body>
</html>
zo als je ziet heb ik de tijd aangepast maar ik heb eerlijk gezegt geen idee hoe ik het in de arduino sketch moet verwerken.
ik ga nog even verder zoeken maar als je een voorbeeldje hebt voor me zou ik heel erg geholpen zijn.
gr matijn
Re: data op de juiste plaats in html krijgen
Zou het niet eenvoudiger zijn om het bovenste deel en het onderste deel van de html pagina op SD kaart te zetten, en het middelste deel zelf maken in de sketch ?
Op dit moment kan ik helaas geen voorbeeld vinden met een 'escape character' of 'token'.
Kun je misschien eerst een correcte HTML pagina ontwerpen waar de tijd in staat ?
Zomaar willekeurig iets van internet plukken, dat gaat niet werken.
De code van SurferTim heb ik wel vertrouwen in: http://playground.arduino.cc/Code/WebServerST
Op dit moment kan ik helaas geen voorbeeld vinden met een 'escape character' of 'token'.
Kun je misschien eerst een correcte HTML pagina ontwerpen waar de tijd in staat ?
Zomaar willekeurig iets van internet plukken, dat gaat niet werken.
De code van SurferTim heb ik wel vertrouwen in: http://playground.arduino.cc/Code/WebServerST
Re: data op de juiste plaats in html krijgen
als ik dat toch is voor me kaar kreeg. om de tijd er juist in te krijgen dan was ik al een heel end verder.
ik heb de tijd er wel in maar niet op de plek waar hij moet.
en de pagina opdelen zou ik al hellemaal niet weten hoe dat moet.
maar ik ga me best doen.
gr martijn
ik heb de tijd er wel in maar niet op de plek waar hij moet.
en de pagina opdelen zou ik al hellemaal niet weten hoe dat moet.
maar ik ga me best doen.
gr martijn
Re: data op de juiste plaats in html krijgen
Ik zie nergens een correcte HTML pagina. Kun je die eerst maken ? Dan zet je 00:00 of 88:88 zo voor de tijd. Dan kunnen we daarna kijken hoe we die gaan opbouwen. Ik zie op internet van alles met scripts en AJAX, maar dat is lijkt me niet nodig.
Je hebt een Arduino Mega, en ik hoop ook een nieuwere versie de Arduino IDE ? Bijvoorbeeld Arduino.cc IDE 1.6.12. Dan is flash geheugen geen probleem, en zou je de hele HTML pagina in flash kunnen plaatsen. Een pagina op SD kaart is wel veel leuker omdat je dan een complete website met plaatjes en *.js en *.css files op de SD kaart kunt zetten. Heb je de WebserverST al geprobeerd ?
Je hebt een Arduino Mega, en ik hoop ook een nieuwere versie de Arduino IDE ? Bijvoorbeeld Arduino.cc IDE 1.6.12. Dan is flash geheugen geen probleem, en zou je de hele HTML pagina in flash kunnen plaatsen. Een pagina op SD kaart is wel veel leuker omdat je dan een complete website met plaatjes en *.js en *.css files op de SD kaart kunt zetten. Heb je de WebserverST al geprobeerd ?
Re: data op de juiste plaats in html krijgen
kan je mij vertellen wat hier niet goed aan is?
dan kan ik dat veranderen.
dan kan ik dat veranderen.
- Code: Alles selecteren
<html>
<style>
body {
background-color: #A4A4A4
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
h2 {
color: green;
font-size: 20px;
text-align: center;
}
.afbeelding_container {
position: relative;
float: center;
}
.afbeelding_container .tekst_containerAa {
position: absolute;
top: 30px;
left: 50px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRa {
position: absolute;
top: 0px;
left: 62px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAz {
position: absolute;
top: 147px;
left: 328px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRz {
position: absolute;
top: 132px;
left: 340px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAk {
position: absolute;
top: 200px;
left: 328px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRk {
position: absolute;
top: 185px;
left: 340px;
color: #0000FF;
}
.afbeelding_container .tekst_containerAv {
position: absolute;
top: 375px;
left: 50px;
color: #FF0000;
}
.afbeelding_container .tekst_containerRv {
position: absolute;
top: 415px;
left: 62px;
color: #0000FF;
}
.afbeelding_container .tekst_containerKw {
position: absolute;
top: 265px;
left: 310px;
color: #FF0000;
}
.afbeelding_container .tekst_containerWw {
position: absolute;
top: 290px;
left: 310px;
color: #0000FF;
}
</style>
<head>
<title>Webserver</title>
</head>
<body>
<h1>Webserver</h1>
<table ALIGN="center">
<td>
<h2>
00:00:00
</h2>
</td>
</table>
<div class="afbeelding_container">
<img src="zolder.png" />
<div class="tekst_containerAa">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRa">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAz">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRz">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAk">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRk">
<p>Retour temp:</p>
</div>
<div class="tekst_containerAv">
<p>Aanvoer temp:</p>
</div>
<div class="tekst_containerRv">
<p>Retour temp:</p>
</div>
<div class="tekst_containerKw">
<p>Koud water temp:</p>
</div>
<div class="tekst_containerWw">
<p>Warm water temp:</p>
</div>
</div>
</body>
</html>
Re: data op de juiste plaats in html krijgen
Dat gaat de goede kant op.
Kun je er een DOCTYPE boven zetten ? Dat hoort in het html bestand.
Ook de refresh in het html bestand.
En een <tr> en </tr> bij de tabel.
En ik heb graag de <style> binnen de <header>
Een ALIGN="center", dat weet ik niet of dat volgens HTML5 is, maar dat maakt niet uit.
Dus in de sketch de DOCTYPE en refresh er uit halen.
HTML5 heeft trouwens veel mogelijkheden om gegevens realtime te wijzigen zonder een refresh. Dan is het meestal handiger om daar een javascript bibliotheek voor te gebruiken. Maar al die verschillende dingen is voor mij een flinke wirwar, dus dat heb ik zelf nog niet in mijn Arduino website.
Ik voel er toch wel het meest voor om een 'escape character' of 'token' te gebruiken.
Dan kun je bijvoorbeeld dat gebruiken voor een temperatuur, maar ook voor een hele tabel.
Dus dan wil ik de 00:00:00 vervangen door '$A'.
Info: http://www.html-5-tutorial.com/doctype.htm
html code
Je code is niet helemaal geschikt om die 'token' te onderscheppen. Er is onderscheid nodig tussen een *.html file en de andere files. Kun je dat toevoegen ? Dus een vlag (boolean variabele) die aangeeft dat het een html bestand is, of de code twee maal, en dan voor een html bestand apart afhandelen.
Daarna dit stukje openbreken:
om de '$' te onderscheppen.
Kun je er een DOCTYPE boven zetten ? Dat hoort in het html bestand.
Ook de refresh in het html bestand.
En een <tr> en </tr> bij de tabel.
En ik heb graag de <style> binnen de <header>
Een ALIGN="center", dat weet ik niet of dat volgens HTML5 is, maar dat maakt niet uit.
Dus in de sketch de DOCTYPE en refresh er uit halen.
HTML5 heeft trouwens veel mogelijkheden om gegevens realtime te wijzigen zonder een refresh. Dan is het meestal handiger om daar een javascript bibliotheek voor te gebruiken. Maar al die verschillende dingen is voor mij een flinke wirwar, dus dat heb ik zelf nog niet in mijn Arduino website.
Ik voel er toch wel het meest voor om een 'escape character' of 'token' te gebruiken.
Dan kun je bijvoorbeeld dat gebruiken voor een temperatuur, maar ook voor een hele tabel.
Dus dan wil ik de 00:00:00 vervangen door '$A'.
Info: http://www.html-5-tutorial.com/doctype.htm
html code
<!DOCTYPE html>
<html>
<head>
<title>Webserver</title>
<meta http-equiv="refresh" content="15">
<style>
body {
background-color: #A4A4A4
...
</style>
</head>
<body>
<h1>Webserver</h1>
<table ALIGN="center">
<tr>
<td>
<h2>
$A
</h2>
</td>
</tr>
</table>
...
</body>
</html>
Je code is niet helemaal geschikt om die 'token' te onderscheppen. Er is onderscheid nodig tussen een *.html file en de andere files. Kun je dat toevoegen ? Dus een vlag (boolean variabele) die aangeeft dat het een html bestand is, of de code twee maal, en dan voor een html bestand apart afhandelen.
Daarna dit stukje openbreken:
- Code: Alles selecteren
while(webFile.available()) {
client.write(webFile.read()); // send web page to client
}
om de '$' te onderscheppen.
- Code: Alles selecteren
while(webFile.available()) {
byte data = webFile.read(); // read next byte
if( data == '$')
{
byte token = webFile.read(); // read token after the '$'
switch( token)
{
case 'A':
// Write the time to the client
client.print(now.hour(), DEC);
client.print(':');
client.print(now.minute(), DEC);
client.print(':');
client.print(now.second(), DEC);
client.print(' ');
client.print(now.day(), DEC);
client.print('/');
client.print(now.month(), DEC);
client.print('/');
client.print(now.year(), DEC);
client.println("<br>");
break;
default:
// token not recognized, print data as if nothing happened.
client.write( data);
client.write( token);
break;
}
} else {
client.write( data); // send byte client
}
}
Re: data op de juiste plaats in html krijgen
hij doet het GEWELDIG!!!!!!!!!!!!
alleen laad hij mijn zolder.png niet meer maar ik ben al een heeeeeeeeeeeel end verder dank je wel super!!!!!!!!!
alleen laad hij mijn zolder.png niet meer maar ik ben al een heeeeeeeeeeeel end verder dank je wel super!!!!!!!!!
Re: data op de juiste plaats in html krijgen
Met Ctrl+T kun je de tekst layout opnieuw laten doen, dan zie je de structuur van de sketch beter.
Bij een html bestand kun je dit doen:
Maar daar niet de DOCTYPE en niet de refresh, die horen in het html bestand zelf. Zou je die nog uit de sketch willen halen ?
Als je nog eens naar de WebserverST kijkt, dan zie je dat "Content-Type: image/png" nodig hebt voor zolder.png.
http://playground.arduino.cc/Code/WebServerST
Verder is het toch echt nodig om een html bestand anders af te handelen vanwege die token. Een png bestand kan in de binaire code ook een '$' hebben, maar die moet niet vertaald wordt. Dus alleen een html bestand door het filter om te kijken naar '$', en de andere bestanden gewoon klakkeloos overzetten zoals het eerst was.
Je kunt het natuurlijk uitbreiden met '$B', '$C' en die ook aan de switch-case toevoegen.
Je zou dat in een functie kunnen plaatsen, anders wordt het zo'n groot blok code midden in de afhandeling van een GET request.
Met een Arduino Mega heb je echt heel veel flash geheugen. Daar kunnen gemakkelijk een paar files in, en waarschijnlijk zelfs de binaire code van zolder.png. Zo iets moet ik bij mijn Arduino Mega project nog doen, ik wil namelijk een pagina met informatie laten zien als er geen SD kaartje in zit. Op dit moment geef ik code 404 terug als er geen SD kaartje in zit.
Je zou ook een NTP (de tijd) kunnen doen, dan heb je geen RTC nodig.
Als er niets te doen is, dan draai ik een achtergrond taak. Die zit in de Arduino IDE in een apart tabblad, om het overzichtelijk te houden. Vanuit die achtergrond taak doe ik allerlei dingen. Bijvoorbeeld de status weergeven op een NeoPixel led, en gegevens doorsturen naar ThingSpeak of Adafruit IO voor een leuke grafiek.
Bij een html bestand kun je dit doen:
- Code: Alles selecteren
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connnection: close");
client.println();
Maar daar niet de DOCTYPE en niet de refresh, die horen in het html bestand zelf. Zou je die nog uit de sketch willen halen ?
Als je nog eens naar de WebserverST kijkt, dan zie je dat "Content-Type: image/png" nodig hebt voor zolder.png.
http://playground.arduino.cc/Code/WebServerST
Verder is het toch echt nodig om een html bestand anders af te handelen vanwege die token. Een png bestand kan in de binaire code ook een '$' hebben, maar die moet niet vertaald wordt. Dus alleen een html bestand door het filter om te kijken naar '$', en de andere bestanden gewoon klakkeloos overzetten zoals het eerst was.
Je kunt het natuurlijk uitbreiden met '$B', '$C' en die ook aan de switch-case toevoegen.
Je zou dat in een functie kunnen plaatsen, anders wordt het zo'n groot blok code midden in de afhandeling van een GET request.
Met een Arduino Mega heb je echt heel veel flash geheugen. Daar kunnen gemakkelijk een paar files in, en waarschijnlijk zelfs de binaire code van zolder.png. Zo iets moet ik bij mijn Arduino Mega project nog doen, ik wil namelijk een pagina met informatie laten zien als er geen SD kaartje in zit. Op dit moment geef ik code 404 terug als er geen SD kaartje in zit.
Je zou ook een NTP (de tijd) kunnen doen, dan heb je geen RTC nodig.
Als er niets te doen is, dan draai ik een achtergrond taak. Die zit in de Arduino IDE in een apart tabblad, om het overzichtelijk te houden. Vanuit die achtergrond taak doe ik allerlei dingen. Bijvoorbeeld de status weergeven op een NeoPixel led, en gegevens doorsturen naar ThingSpeak of Adafruit IO voor een leuke grafiek.
19 berichten
• Pagina 1 van 2 • 1, 2
Wie is er online?
Gebruikers in dit forum: Geen geregistreerde gebruikers en 40 gasten