enc28J60 and Arduino (8)

by luca
14 comments

When I published my previous article about how to control a led using a webpage, I was asked for an example with more than one led. Today I’m going to show you how to control two leds with a more stylish webpage thanks to some images…

THE IMAGES

First, you need to understand what happens when, in a webpage, there are references to external resources (images, javascript…:

[checklist]

  • user’s browser contacts the web server and asks for HTML page;
  • browser parses the page and finds external resources;
  • browser asks for each resource to the web server.

[/checklist]

When the web server answers, it tells the browser (in response header) the type of the file it’s sending using the MIME standard. Here’s an example (sniffed using Fiddler) about a PNG image:

Arduino’s sketch should be able to:

[checklist]

  • read browser‘s request (saved in Ethernet::buffer);
  • identify the resource the browser is requesting (HTML page, images…);
  • create an header with the correct Content-Type;
  • send header and resource to the browser.

[/checklist]

BINARY RESOURCES

Images are binary files: in our simple example we should be able to store them in our sketch, in the form of byte arrays. I found a very useful utility that helps with this conversion: bin2h.

Conversion’s result is a text file:

To save microcontroller’s RAM memory, we store the images in the program memory using the directive PROGMEM:

Because of the limited amount of RAM memory in ATMega328 microcontroller and the operating mode of EtherCard library, you can’t use resources bigger than about 500 bytes!

In the next page, you can find Arduino’s sketch

Related Posts

14 comments

lucadentella.it – enc28J60 e Arduino (9) Saturday November 10th, 2012 - 12:10 PM

[…] la pubblicazione del precedente tutorial, alcuni utenti mi hanno scritto per chiedermi se fosse possibile aumentare la dimensione delle […]

Reply
andy Monday February 4th, 2013 - 04:01 PM

Thank you for your tutorials very informative.
would it be the case to add more leds by putting more lines on with led2, led3 and so on.

regards

andy

Reply
AndreaGeekTrufini Monday November 18th, 2013 - 01:39 PM

Ciao Luca,
ho caricato lo sketch su Arduino, ma quando dal browser inserisco l’IP per visualizzare la pagina mi dice “impossibile collegarsi a 192.168.1.2”
Sapresti dirmi come posso risolvere il problema???
grazie 🙂

Reply
luca Tuesday November 19th, 2013 - 12:36 AM

ciao Andrea

la tua rete locale ha indirizzi 192.168.1.x? Il tuo PC che indirizzo IP ha? Altrimenti va adattato lo sketch in modo che Arduino abbia un IP sulla tua rete…

Reply
Giovanni Friday February 7th, 2014 - 11:17 PM

Ciao Luca,
prima di tutto voglio farti i complimenti, in internet si trovano pochissime info (in ialiano) su ENC28J60 e arduino, ho seguito questo tutorial e ha funzionato tutto. Vorrei gestire la mia centralina per caldaie a biomassa (arduino) tramite browser, ma non riesco a capire come. Vorrei gestire tramite un form la temperatura di soglia, l’intervallo di tempo per l’azionamento della cloclea… e visualizzare la temperatura in tempo reale. Mi potresti aiutare indicandomi una guida anche in inglese? Grazie

Reply
luca Wednesday February 12th, 2014 - 05:13 PM

Ciao Giovanni,

temo che una guida già pronta non ci sia, il mio consiglio é: inizia a progettare la pagina HTML “statica” e poi renderla dinamica lato Arduino… come te la cavi in HTML? Tieni anche conto che Arduino ha parecchie limitazioni, se vuoi qualcosa di evoluto potresti pensare di usare Arduino Yun.

Reply
Amardeep Singh Monday March 31st, 2014 - 12:33 PM

hello sir..
this tutuorial was verry useful but how can we add more then two led’s…i need to add 4 in my project…please help sir…

Reply
Amardeep Tuesday April 1st, 2014 - 09:21 PM

hello sir…
first of all i would like to thank u for this awesome tutorial..it really helped me a lot…
i want to send temperature readings from my lm35 to the same web page…and also from my pir sensor…so how can i add the code for the same in the above web page??
thanksss..

Reply
Amritpal Singh Saturday April 12th, 2014 - 03:29 PM

Hello Luca,
Greetings for the day!

with reference to the above led code, i have integrated the code for lm 35 temperature sensor and pir sensor in the same web page. the problem i am facing is that the page is not refreshed even if reading of temp sensor or pir sensor changes. I included the line “” but due to this the led whose status was changed last keeps on getting continuously on and off after every after 5 seconds.How can i get through with dis problem..??
Looking forward to a positive response

Regards

Reply
luca Sunday April 13th, 2014 - 07:30 PM

Hi! please share your code…

Reply
Rodrigo Sunday April 27th, 2014 - 06:46 PM

Hello,

I’m writing a program to control 3 fan in manual and automatic mode, the problem I have is that sometimes I add one dummy line and the software crashes.

The software is based in your tutorials.

Could you contact me in my personal email, I could send you more details and code.

thank you.

Reply
Willy Wednesday September 7th, 2016 - 07:57 PM

Sempre grazie per diffondere conoscenza …. ottengo questi errori dante la compilazione !!! Mi potete aiutare ?
Complimenti e Saluti Willy
Arduino:1.6.5 (Windows 8.1), Scheda:”Arduino/Genuino Uno”

WebLeds.ino:6: error: variable ‘led_off’ must be const in order to be put into read-only section by means of ‘__attribute__((progmem))’
WebLeds.ino:26: error: variable ‘led_on’ must be const in order to be put into read-only section by means of ‘__attribute__((progmem))’
variable ‘led_off’ must be const in order to be put into read-only section by means of ‘__attribute__((progmem))’

Questo report potrebbe essere più ricco
di informazioni con
“Mostra un output dettagliato durante la compilazione”
abilitato in “File > Impostazioni”

Reply
marco Monday March 6th, 2017 - 07:31 PM

Thanks for sharing your codes. It has helped me a lot. But in this jercicio I get this error:

6: error: ‘prog_char’ does not name a type

PROGMEM prog_char led_off[]= {

^

26: error: ‘prog_char’ does not name a type

PROGMEM prog_char led_on[]= {

^

ino: In function ‘void loop()’:

82: error: ‘led_off’ was not declared in this scope

send_png_image(led_off, sizeof(led_off));

^

84: error: ‘led_on’ was not declared in this scope

send_png_image(led_on, sizeof(led_on));

^

exit status 1
‘prog_char’ does not name a type

..help please

Reply
luca Tuesday March 7th, 2017 - 12:52 PM

Hi! it seems that “prog_char” has been deprecated… replace it with “const char” and everything should work fine!

Reply

Leave a Comment

14 + two =