enc28J60 and Arduino (9)

by luca
69 comments

After having published my previous tutorial, some users wrote me asking a way to send bigger images using Arduino and the ethernet shield.

The guys who develop EtherCard library are rewriting the way it handles TCP packets, in the meantime you can get around this problem including in your HTML page references to images hosted by other websites:

I wrote the following example for a user who asked a way to control a relay via Internet with a GUI optimized for smartphones.

Logical view

The example uses 3 elements: Arduino, Ethernet Shield and a relay module from eBay, connected to a PIN of Arduino:

The Ethernet Shield is connected to my home ADSL router, configured to NAT incoming connections to TCP port 80 to the IP address assigned to Arduino:

I can reach Arduino from Internet knowing the public IP my ISP gave to my connection or, better, using a dynamic DNS service (maybe keeping it updated using Arduino, as I explained here).

Web interface

The interface was kept intentionally simple: a label with the actual state and a button to switch relay on/off:

Tip for webmasters: with the following META tag you can adapt your webpage to the smartphone‘s display:

The icons I used come from Soft Scraps icon set by Jojo Mendoza, thanks for having released them free for non commercial use!

You can download two static example pages from Github.

Sketch

The sketch for Arduino draws on my previous examples; I changed the lines that prepare and send the HTML page:

The source code is as usual available on Github.

Demo

[youtube id=”hf5GkqW7xs8″ width=”600″ height=”350″]

Related Posts

69 comments

Daj Wednesday November 21st, 2012 - 04:23 PM

hello,luca great tutorial. do you have tutorial on how to send data to visual basic using enc28j60? im planning to use tcp to send a string to visual basic via winsock but i dont have any reference in arduino code in sending data via tcp. .do you have tutorial for that? or do you have sample code for that. .thank you for your kind consideration Sir Luca.

Reply
luca Wednesday November 21st, 2012 - 06:01 PM

Hello Daj,

it’s a good idea… I’m going to write a tutorial about it: I think it will be in C# (as I know this better than VB) but you should be able to adapt it with few work!

Reply
Daj Thursday November 22nd, 2012 - 01:25 AM

Hello Luca,
im so excited when will you post your next tutorial.Thanks a lot Luca. but im not good in c# so that i choose visual basic 6.0 . Luca,do you have sample codes on sending string data to visual basic via winsock. I used Enc28j60 and ethercard library but i dont know what are the function i will write. Thanks for the Help!! 🙂

Reply
Antonio Tuesday December 4th, 2012 - 10:09 PM

Ciao Luca sto cercando di configurare il NAT della porta 80 sul mio router della linkem HES-319M, ma ogni volta che provo ad entrare, mi risponde il router che è in ascolto su quella porta. Quello che volevo chiederti è se c’è un modo per cambiare la porta nello sketch (che per default è la 80, giusto????)
Ciao e complimenti per tutto il lavoro, Antonio.

Reply
luca Wednesday December 5th, 2012 - 11:00 AM

Ciao Antonio,

lo sketch in realtà ascolta su qualsiasi porta… quindi prova tranquillamente a nattare un’altra porta e dovresti raggiungerlo!
fammi sapere

Reply
Antonio Thursday December 6th, 2012 - 10:16 PM

Ciao Luca 🙂
Forse non mi sono spiegato molto bene…..
La mia necessità è di fare in modo che Arduino si metta in ascolto su una porta diversa dalla 80 in quanto il mio router Linkem, ha la gestione remota impostata di default e non modificabile attiva e impostata sulla porta 80. Quindi quando provo ad accedere dall’esterno, devo necessariamente specificare una porta diversa dalla 80.
Ho cercato molto in rete, ma senza risultato. Ho visto alcuni esempi di sketch in cui era specificato che il server http restasse in ascolto sulla porta 80, quindi deduco che si possa comunque cambiare.
Sapresti indicarmi il o i comandi giusti?
Grazie.

Reply
luca Friday December 7th, 2012 - 04:44 PM

Ciao Antonio,

ora ho capito 😉 basta che nel tuo setup() metti qualcosa tipo:
ether.hisport = 90;

per mettere Arduino in ascolto sulla porta 90… fammi sapere se ti funziona!

Reply
lucadentella.it – enc28J60 e Arduino (10) Friday December 7th, 2012 - 05:10 PM

[…] e Arduino (10) luca 7 dicembre 2012 0 Il breve tutorial di oggi prende spunto da una richiesta di Antonio: poter cambiare la porta su cui è in ascolto il […]

Reply
Antonio Monday December 10th, 2012 - 09:58 PM

Ciao Luca, ho provato ad inserire la riga ether.hisport = 90; nel tuo sketch ma durante la compilazione mi dà errore.
In realtà ho provato anche altri comandi come
Server(port);
EthernetServer(port); ma senza risolvere.

L’unico sketch (trovato su internet), che mi permette di cambiare le porte, usa questo comando e queste librerie:

static uint16_t port = 80;
#include “etherShield.h”
#include “ETHER_28J60.h”

Io volevo usare il tuo sketch perchè si può personalizzare molto meglio cambiando l’immagine .png

Ciao Antonio.

Reply
luca Tuesday December 11th, 2012 - 01:46 PM

Ciao Antonio,

strano, che errore ti da la chiamata ether.hisport? A me funziona correttamente (vedi articolo)

Reply
Antonio Tuesday December 11th, 2012 - 07:25 PM

Ciao Luca, questa è la risposta della compilazione:
_9_WebRelay:7: error: expected constructor, destructor, or type conversion before ‘.’ token

La riga ether.hisport = 31; la scrivo subito dopo
static byte myip[] = {192,168,1,15};

Reply
luca Tuesday December 11th, 2012 - 08:10 PM

ciao

prova a metterla all’interno del setup()

Reply
luigi Thursday January 3rd, 2013 - 10:36 PM

Ciao Luca e complimenti per l’articolo ed il sito. Ho realizzato una presa comandata via web come nel tuo articolo con il relè, il problema e che vorrei inserire un bottone per accenderla fisicamente se non voglio usare il web. E’ fattibile?

Grazie

Reply
luca Friday January 4th, 2013 - 10:48 AM

Ciao Luigi,

assolutamente sì, è molto semplice: all’interno del loop() controlli lo stato di un pulsante connesso ad Arduino (http://arduino.cc/en/tutorial/button) e se il pulsante è premuto, cambi lo stato del relè nello stesso modo in cui lo cambi quando ricevi via internet il comando.

Reply
enc28J60 e Arduino (9) | Arduino - Ethernet | Scoop.it Sunday January 6th, 2013 - 10:44 AM

[…] Dopo la pubblicazione del precedente tutorial, alcuni utenti mi hanno scritto per chiedermi se fosse possibile aumentare la dimensione delle immagini che Arduino può gestire.  […]

Reply
antonio Wednesday January 16th, 2013 - 10:09 PM

Ciao Luca,
ho letto con molto interesse i tuoi articoli,e mi interessa sapere il tuo parere sulla possibilita’ di tenere le immagini su una sdcard per poi richiamarle quando servono usando un apposito shield. Il mio dubbio e’ su come richiamarle con i comandi html.

Reply
luca Wednesday January 16th, 2013 - 10:16 PM

Ciao Antonio,

facendo così ricadi nel problema del buffer limitato in trasmissione… tu dovresti leggere con arduino i bytes dell’immagine dalla SD e poi inviarli al browser; se però l’immagine supera la dimensione del buffer (700 bytes circa) non puoi inviarla in un solo pacchetto e – al momento – la libreria Ethercard non supporta l’invio in più “frammenti”.

Reply
antonio Friday January 18th, 2013 - 07:42 PM

Grazie per la pronta risposta, continuerò le mie ricerche. Ciao

Reply
Fabio Pulzi Saturday April 6th, 2013 - 02:23 AM

Hello Luca, great tutorial that you have here, for sure the best that I found on the web related with enc28j60.

Now I have a question, Do you know if it`s possible to get a variable sent to arduino via GET ?, like you did with leds, but there you had just compared if it was on or off, I would like to really get the parameter value, maybe an integer

Thanks in advance,
Fabio

Reply
luca Monday April 8th, 2013 - 08:05 PM

Hi Fabio!

Of course you can: extract the “part” of the response that represents your value and convert it to integer value using atoi().

Reply
Marco mussi Thursday April 11th, 2013 - 09:43 AM

Ciao , sto cercando di realizzare tramite arduino l’accendino e di una presa in remoto tramite wifi po’ potresti consigliare su come fare ?
Grazie
Marco mussi

Reply
luca Friday April 12th, 2013 - 09:26 PM

Ciao Marco,

puoi sfruttare uno shield wifi, oppure se vuoi “riciclare” il mio codice e utilizzare uno shield ethernet, puoi associarvi un router wifi in modalità client come spiegato qui.

Reply
Lorenzo Sunday July 21st, 2013 - 11:36 PM

Ciao Luca,
vorrei applicare questo codice per aprire una porta con una elettroserratura. Tutto funziona correttamente devo però interrompere manualmente l’impulso che apre la porta.
Come posso trasformare la funzione on in un impulso di 1 secondo?
Grazie mille pel l’entusiasmo con cui condividi la tua conoscenza

Reply
luca Wednesday August 14th, 2013 - 02:03 PM

Ciao Lorenzo

la cosa più semplice è modificare lo sketch così:

if(strstr((char *)Ethernet::buffer + pos, "GET /?ON") != 0) {
relayStatus = true;
delay(1000);
relayStatus = false;
}

Reply
Aakerberg Thursday August 1st, 2013 - 12:54 PM

Hi Luca, thanks for the great tutorials. Do you know why this webrelay code doesn’t work in the Iphone safari browser.?

Reply
luca Wednesday August 14th, 2013 - 02:00 PM

Hi Aakerberg,

unfortunately I don’t own an iPhone to test… which is the behaviour? Safari doesn’t display the webpage or – if you click – it does nothing?

Reply
Marcelo Tuesday November 19th, 2013 - 08:02 PM

How to use this example with a W5100 ethernet shield??

byte Ethernet::buffer[700];
Ethenet has not been declared

Reply
luca Tuesday November 19th, 2013 - 08:16 PM

Sorry Marcelo but my examples do not work with W5100 shields… you need to check the official Arduino documentation for those.
bye

Reply
Lanfranco Schillaci Tuesday April 8th, 2014 - 11:50 AM

Ciao vorrei collegare 1 relè alla ethernet shield mi puoi aiutare con uno schema?

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

Ciao Lanfranco! In questo articolo sto utilizzando una relay board già pronta ma collegare un relay a 5V ad Arduino è veramente semplice, ecco ad esempio un documento preso da Playground.

Reply
Pierpaolo Friday May 2nd, 2014 - 04:33 PM

Ciao Luca, volendo gestire 4 relè con questo sitema utilizzando la stessaimmagine una sotto l’altra, è possibile?

Grazie

Reply
luca Monday June 16th, 2014 - 08:25 AM

Ciao! è possibile, guarda gli altri miei tutorial su come gestire più outputs.

Reply
Zaharia Saturday June 14th, 2014 - 09:28 AM

Hy there, can you tell me please, how can i use this for more outputs ? I dont have module relay. I want to use digitaloutputs. Thank you!

Reply
luca Monday June 16th, 2014 - 08:26 AM

Hi, give a look to this tutorial.
bye

Reply
gennaro Thursday August 14th, 2014 - 12:51 PM

ciao luca ti posso chiedere un aiuto per il mio progetto

Reply
luca Friday August 15th, 2014 - 02:01 PM

ciao gennaro, scrivimi pure anche in privato

Reply
Fabio Saturday August 23rd, 2014 - 10:22 AM

Ciao Luca,complimenti per il sito.
Ho provato a smanettare con lo sketch di questo tutorial,ma quando a connettermi da smartphone (android e ios) ottengo la risposta pagina non disponibile,da pc invece funziona correttamente quindi la configurazionedel router è da escludere che non sia corretta.
mi sapresti dare una dritta?
Per curiosità ho provato a caricare lo sketch dei due led e quello funziona correttamente.
Grazie per la tua attenzione.

Reply
luca Monday August 25th, 2014 - 07:57 AM

Ciao Fabio, davvero strano: l’unica differenza è che questo sketch usa immagini su internet invece che “embedded”. Se nel browser dello smartphone inserisci direttamente l’url dell’immagine (es. http://www.lucadentella.it/files/bt_ON.png) le vedi?

Reply
Danilo Monday August 25th, 2014 - 08:37 PM

Ciao luca ho lo stesso problema di fabio come posso fare??
grazie

Reply
luca Tuesday August 26th, 2014 - 07:34 AM

ciao Danilo, domanda stupida: il cellulare è collegato alla rete wifi giusto?

Reply
Danilo Wednesday August 27th, 2014 - 01:22 PM

Ciao luca ho provato con un modem diverso e funziona il problema e del router tp link TL-WR841N

Reply
Andrea Friday November 7th, 2014 - 07:29 PM

Ciao Luca, una domanda.
Tramite il pc, collegato tramite cavo ethernet alla rete, riesco a visualizzare la pagina web per accendere e spegnere la lampada. Ma se mi connetto non con il cavo ma con il wi fi alla stessa rete la pagina non si apre. Come mai? Cosa manca?
Grazie e arrivederci.

Reply
luca Friday November 7th, 2014 - 08:01 PM

ciao Andrea, davvero strano: quando sei in wifi il PING verso l’IP di Arduino ti funziona? Potrebbe essere attiva qualche configurazione particolare del tuo router/access point che blocca le comunicazioni tra rete cablata e rete wifi

Reply
Andrea Sunday November 9th, 2014 - 02:01 PM

grazie per la risposta; purtroppo neanche il ping funziona e non ho particolari blocchi sul router per quanto riguarda le connessioni wi fi. Vedo però che controllando gli accessi dei dispositivi collegati con ethernet. manca l’ip del dispositivo. Per tua conoscenza il mio router è un netgear wndr4500, grazie.

Reply
Roy Wednesday December 24th, 2014 - 03:51 AM

Hello Luca,
Thanks for your great tutorial.There is a question,as the hardware (that’s ENC28J60) continue to sent request to the web ,the light will be controlled as soon as the web reply.But now,is there a possibility that you can control the light directly in the way sending data/request to the hardware?I will appreciate your reply.Thank you!

Reply
luca Monday December 29th, 2014 - 10:51 AM

Hi Roy! In this example Arduino publishes the webpage, it is NOT polling any website so as soon as you click on the image your browser sends a request to the hardware and it (the sketch running on it) reacts turning the light on/off.

Reply
silvano Friday February 27th, 2015 - 12:48 PM

ciao luca, complimenti per le spiegazioni.
Il mio router Netgear DG834DG non riconosce indirizzi MAC strani, mettendone uno piu’ credibile tutto ok e ora funziona anche il DHCP.
Si può cambiare il nome della periferica? Ora l’ ENC28J60 viene riconosciuto nella lista periferiche come UNKNOWN.
Non riuscivo a cambiare porta di ingresso ad esempio 2222 ma funzionava solo su 80. Ora ho capito che bisogna mettere arduino in ascolto con: ether.hisport = 2222;
ciao, grazie!

Reply
luca Friday February 27th, 2015 - 08:35 PM

Ciao Silvano! purtroppo non si può cambiare il nome (che viene passato durante la richiesta DHCP) a meno di mettere mano direttamente alla libreria e riscrivere questa funzione.

Reply
niq_ro Tuesday March 17th, 2015 - 07:18 AM

Hi Luca,
Your tutorials are very good.
I try this sketch but I have a little problem: after few hours ENJ28J60 sleeps… I tried to use the RESET function and disconnect and reconnect the power of ENJ28J60, but does not work.. must use push RESET button from Arduino board..
you have any idea how to fix it?

Reply
niq_ro Wednesday March 18th, 2015 - 02:11 PM

I found a (posibble) solution, using the watchdog like at https://hackaday.io/project/3731-open-z3zzvw3/log/12362-the-brain-of-the-thingy

Reply
Gianni Monday September 7th, 2015 - 07:43 AM

Salve Luca,
complimenti per il tuo lavoro che metti a disposizione.
Mi aiuteresti a capire cosa significa: a href=”/?$S”
Ti ringrazio molto

Reply
luca Monday September 7th, 2015 - 07:57 AM

Ciao Gianni, il $S viene sostituito dal valore della variabile linkLabel, quindi il link diventa /?ON o /?OFF a seconda del valore attuale del relay. Se vedi qualche riga sopra, tale link viene interpretato dallo sketch: if(strstr((char *)Ethernet::buffer + pos, "GET /?ON") != 0)

Reply
Gianni Monday September 7th, 2015 - 04:20 PM

Grazie sei chiaro! Quello che non riesco a capire dove è stato dichiarato la variabile $S? Se io avessi voluto chiamarla $pippo?
Forse mi perdo in un bicchiere d’acqua…ma volevo capire.
Ti ringrazio

Reply
adeeb Sunday October 18th, 2015 - 10:08 AM

Hello.
Thank you very much for your interesting tutorials for Enc28j60 ethernet module.
Following this tutorial, I got stuck at the NAT part. Every time I enter my public IP address I get the login page of my orange livebox. Can you help me out please.
Thanks.

Reply
luca Sunday October 18th, 2015 - 12:30 PM

Hi! Probably you must use a different port: port 80 could be “reserved” to the orange livebox webconsole and you cannot “NAT” it to an internal device.

Reply
adeeb Monday October 19th, 2015 - 03:38 PM

Ok I read the next tutorial “enc28J60 and Arduino (10)” and changed the port from 80 to 90 and other numbers also. But everytime I am getting the login page of the livebox.
I also tried on another modem, Orange ZTE, where I setup port forwarding. Still got the login page.
Maybe I am doing something wrong when configuring. Can you send me your email address so that I can send you screenshots please.
Thanks.

Reply
adeeb Thursday October 22nd, 2015 - 03:07 PM

Ok I read the next tutorial “enc28J60 and Arduino (10)” and changed the port from 80 to 90 and other numbers also. But everytime I am getting the login page of the livebox.
I also tried on another modem, Orange ZTE, where I setup port forwarding. Still got the login page.
Maybe I am doing something wrong when configuring. Can you send me your email address so that I can send you screenshots please.
Thanks.

Reply
luca Saturday October 24th, 2015 - 01:49 PM

hi, I sent you and email…

Reply
adeeb Sunday October 25th, 2015 - 11:12 AM

Thanks a lot.
Your assistance has been very helpful.

Reply
mucis Monday December 28th, 2015 - 01:19 PM

Mr.Luca, if you have a 4 channel relay sketch

Reply
mucis Monday December 28th, 2015 - 03:05 PM

I have arduino uno r3, ENC28J60 ethernet, Relay module 4 channels
of these sketch https://github.com/lucadentella/enc28j60_tutorial/tree/master/_9_WebRelay
that can be used for ENC28J60 ethernet, Relay module 4 channels, please help me……Mr.

Reply
luca Thursday December 31st, 2015 - 09:59 AM

Hi! With this tutorial you can control 2 relays, it’s easy to add some more –> http://www.lucadentella.it/2015/05/12/mobilerelays-enc28j60-e-arduino-21/

Reply
Mucis Sunday January 3rd, 2016 - 04:20 AM

Thank you very much,
This tutorial is very useful for me

Reply
Alberto Thursday March 3rd, 2016 - 03:32 PM

Ciao Luca e complimenti per il tuo ottimo lavoro.
Sono abbastanza alle prime armi con la libreria ENC28J60 e ho grosse difficoltà a capire il metodo generale di utilizzo e il significato di alcuni comandi, non so se esiste una documentazione che spieghi esattamente la sintassi.
Ad esempio non mi sono chiari:
1) byte Ethernet::buffer[500];
(non so nemmeno i due punti che significato hanno.. 🙁
2) bfill che nasce come bfill = ether.tcpOffset() … che cosa significa e come è che poi si utilizza nella forma bfill.qualcosa …

Scusa magari sono cose troppo banali ma faccio fatica a ricondurle alle normali tecniche di programmazione su Arduino imparate fino ad ora…

Reply
luca Saturday March 5th, 2016 - 02:17 PM

Ciao Alberto! byte Ethernet::buffer[500]; crea una variabile (array) di 500 bytes mentre bfill è un “oggetto” di tipo BufferFiller… entrambi sono leggermente più complessi della programmazione classica su Arduino perché prevedono conoscenze di programmazione ad oggetti (C++).

Reply
Nenad Monday April 11th, 2016 - 07:52 PM

Ciao Luca,

per caso Antonio ha risolto il problema con port=80?

error: invalid conversion from ‘uint16_t {aka unsigned int}’ to ‘const uint8_t* {aka const unsigned char*}’ [-fpermissive]

Grazie .

Reply
Nenad Monday April 11th, 2016 - 08:19 PM

Ciao Luca,

ho risolto tutto, scusa e grazie 1000.

Reply
Giuseppe Sunday May 15th, 2016 - 09:49 AM

Grandi Silvano e Luca , ho risolto … arduino non si collegava con un access point tplink via cavo … ed era l’indirizzo di mac che andava cambiato.

Reply
lucadentella.it – ESP32 (20) – Webserver Saturday July 8th, 2017 - 01:33 PM

[…] dei progetti più popolari tra quelli inclusi nel mio tutorial sul chip enc28j60 è sicuramente WebRelay. Tale progetto consente di attivare una uscita di Arduino tramite una semplice pagina web, […]

Reply

Leave a Reply to Pierpaolo Cancel Reply

4 × 1 =