MobileRelays – enc28J60 and Arduino (21)

by luca
42 comments

Today’s project, as always based on the enc28j60 ethernet controller, allows to toggle relays (or, generally, digital PINs) using a responsive web page, that is a page that automatically adapts its layout to devices with different screen sizes (for example your smartphone and your PC).

Video presentation

This time I recorded the video in english, italian subtitles are available…

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

Web site

The web site, stored on an SD card and served by Arduino (like in my previous example, SDWebServer), was developed using the following libraries:

[checklist]

[/checklist]

and it’s made by a single page, with two switches to activate/deactivate two outputs (in a following paragraph you’ll learn how to change the number of switches and PINs):

mobilerelays-1

The page and its external resources (javascript and CSS files) are available on Github and must be saved in the root folder of the SD card.

Sketch

The sketch – this too available in my repository – is very similar to the one of the SDWebServer project.

Witin the loop(), the sketch receives the requests coming from the browser:

char* request = (char *)Ethernet::buffer + pos;

A request can be for a static resource (HTML page, javascript file…): if so the sketch looks for it in the root folder of the SD card and, if found, sends it back to the browser.

If instead the request is for the switch.ino page, the sketch parses the subsequent parameters in the request:

else if(strncmp("GET /switch.ino?", request, 16) == 0) {  
  int relayId = request[16] - '0';
  int relayStatus = request[18] - '0';

and changes the PIN status accordingly:

if(relayStatus == 0) digitalWrite(relayId, LOW);
else digitalWrite(relayId, HIGH);

A request has indeed the following syntax: switch.ino?relayId|relayStatus. If, for example, I want to activate the relay connected to PIN 4, I have to send to the Arduino the request switch.ino?4|1

In the end, the sketch sends back a confirmation (OK) message to the browser:

BufferFiller bfill = ether.tcpOffset();
bfill.emit_p(PSTR("HTTP/1.0 200 OK\r\nContent-Type: text/html\r\n
  Pragma: no-cache\r\n\r\n" "OK"));

AJAX

All the requests for changing a PIN are sent to the Arduino with AJAX calls thanks to the jQuery library. When you click a button, an event is triggered that creates and sends the request:

mr-2

The javascript code in the HTML page looks for all the select controls (the “buttons”) and adds to them an event handler:

$(document).ready(function() {
 
  // search for all the select elements and associate the event handler
  $("select").each(function(index) {
    // event handler, call the page to change the relay status
    $(this).change(function() {
      var selectElement = $(this);
      var relayNumber = selectElement.attr("name");
      var relayStatus = selectElement.val();
      var parameters = relayNumber + "|" + relayStatus;
 
      $.get("switch.ino?" + parameters, function() { console.log("Call OK :)"); })
      .fail(function() console.log("Call KO :("); );
    });
  });
});

Hei, I need more relays!

I tried to make it simple to change the project to have a different number of relays or to change the corresponding Arduino PINs…

In the HTML page (index.htm), each button is created with the following code:

<div class="ui-field-contain">
  <label for="2">Relay 1:</label>
  <select name="2" id="2" data-role="flipswitch">
     <option value="0">OFF</option>
     <option value="1">ON</option>
  </select>
</div>

The value 2, used both in the label and in the select tags, represents the Arduino PIN that is controlled by this button, while the value of the label tag (in the example Relay 1:) is the text that is displayed next to the button.

It’s therefore easy to change the value for changing the PIN this button controls and/or to add new blocks of code to draw new buttons.

Just remember to also change the sketch, in the setup() method where the PINs are configured:

  // configure the relay PINs
  pinMode(2, OUTPUT);
  pinMode(3, OUTPUT)

Related Posts

42 comments

jmv Thursday May 14th, 2015 - 12:42 AM

great project and tutorial luca.
will be very useful !

Reply
Nevio Monday June 8th, 2015 - 10:15 PM

Grazie mille per i tuoi tutorial!
Sarebbe possibile avere lo stesso risultato utilizzando la yun?
grazie
Nevio

Reply
luca Tuesday June 9th, 2015 - 07:39 AM

Ciao! Sicuramente sì, anzi lo Yun consente molto di più… a breve un progetto che usa lo Yun per attivare dei relay… e molto altro 😉

Reply
Nevio Thursday June 11th, 2015 - 10:22 PM

Ottimo 🙂

Stò cercando delle fonti per realizzare un controllo pan-tilt di una webcam ed il comando di un piccolo motore DC tramite una pagina web che risieda sulla yun.
Quello che fatico a trovare riguarda la gestione di dati di dalla yun verso la pagina web,che siano gli stati degli ingressi oppure la lettura della corrente assorbita dal motore.

Grazie mille per il tempo che dedichi ai tuoi tutorial

Nevio

Reply
Ferdinando Sunday July 12th, 2015 - 08:18 AM

Eccezionale…
Luca, hai anche lo schema dei collegamenti ?

Grazie e ancora complimenti

Reply
luca Wednesday July 15th, 2015 - 07:17 PM

Ciao Ferdinando, i collegamenti dipendono dai moduli che hai, cmq si tratta di collegare il bus SPI ad Arduino con i due CS dei moduli verso due diversi pin di arduino. Forse si vede bene nel precedente articolo, dove ho usato il medesimo setup.

Reply
Denis Saturday August 1st, 2015 - 01:21 PM

Ciao Luca, grazie per queste guide…
Ho un problema a scaricare la libreria JQUERY, non la scarica compressa, se la comprimo non la accetta arduino, dove sbaglio? Invece la JQUERY MOBILE si scarica compressa e la carica normalmente arduino… Altra cosa, qualche esempio per vedere su una pagina web lo stato dei pin di arduino ed eventualmente una linea analogica? Volevo controllare un antifurto da remoto.
Grazie ancora e complimenti

Reply
Jose Wednesday August 26th, 2015 - 08:39 PM

Hi, great project. I’ve try test with arduino nano and if I power up the sd module, don’t work, I can’t inizialize ethernet module (ENC28J60). I don’t know why don’t work. Could you tell me about.

Reply
luca Wednesday September 2nd, 2015 - 10:12 PM

Hi Jose, do the two modules work if you connect them one at a time?

Reply
Enrico Thursday September 10th, 2015 - 12:55 PM

Ciao Luca, un GRANDISSIMO GRAZIE per i tuoi tutorial sul modulo enc28J60. Sto progettando una scheda per monitorare temperature ed azionare dei relè per aumentare la produzione dei miei prodotti a catalogo. Uso l’Atmega 1284P e quindi non ho nessun problema di memoria flash e ram. Vorrei conoscere meglio il modulo perché le schede saranno ovviamente in stand-alone e il modulo è disponibile anche in montaggio su foro. Il primo quesito riguarda la capacità massima del buffer e se ce la possibilità di aumentarla, magari agendo sulla libreria Ethercard… Grazie e ancora complimenti.

Reply
luca Saturday September 12th, 2015 - 09:28 AM

Ciao Enrico, la dimensione del buffer viene definita nello sketch (byte Ethernet::buffer[600];) quindi puoi modificarne le dimensioni. Il tuo chip ha 16k di RAM quindi puoi provare ad aumentarlo un po’

Reply
Enrico Sunday September 13th, 2015 - 08:03 AM

Ancora GRAZIE per le tue risposte precise ed esaustive… Volevo capire qual’è il limite del buffer! È possibile portarlo a 8000/9000?

Reply
luca Sunday September 13th, 2015 - 12:03 PM

ciao, teoricamente non ci sono limiti ma non ho mai provato valori così grandi… non ti resta che provare 😉

Reply
Enrico Tuesday September 15th, 2015 - 02:30 PM

OK… Gentilissimo, farò sapere a tutti voi l’esito del mio progetto! Buona lavoro a Te e a chi ti segue!

Reply
daniele Wednesday October 21st, 2015 - 09:38 AM

ottimo progetto, ma se io uso l’ethernet shield funziona lo stesso?

Reply
luca Wednesday October 21st, 2015 - 10:59 AM

Ciao Daniele; no, non funziona… questo sketch è pensato per utilizzare le librerie per enc28j60 e quindi va pesantemente modificato per l’ethernet shield ufficiale.

Reply
T.Long Sunday October 25th, 2015 - 03:11 PM

Hi Luca. How to make a ping from arduino to router to check connection, i using ethercard library and ENC28J60

Reply
luca Tuesday November 3rd, 2015 - 10:50 AM

Hi, use the clientIcmpRequest method… I’m going to write a small tutorial about it.

Reply
Antonio Friday November 13th, 2015 - 12:04 AM

Ciao Luca, interessante questo tuo articolo.
Volevo chiederti, l’utilizzo del sistema a mezzo smartphone, può essere fatto da qualsiasi luogo?

Reply
luca Friday November 13th, 2015 - 08:25 AM

Ciao Antonio, assolutamente sì se Arduino è raggiungibile via Internet (ad esempio configurando il “NAT” sul router ADSL)

Reply
Antonio Friday November 13th, 2015 - 03:52 PM

Configurare il NAT? Cioé? Io mi sono sempre collegato via Wi-Fi non ho mai collegato il cavo moden-notebook …

Reply
luca Monday November 23rd, 2015 - 10:17 AM

ciao Antonio, devi fare una configurazione sul tuo router in modo che “giri” le connessioni in ingresso sulla porta 80 verso l’IP di Arduino…

Reply
Gia Tuesday December 8th, 2015 - 11:21 PM

Ciao Luca e grazie di aver condiviso il tuo sapere…Ho un problema con l’ultimo articolo. Provo ad inserire la porta di ascolto con:
ether.hisport = 91;
ovviamente nel setup ma, il risultato che ottengo una volta richiamata la pagina index è il listato dell’index :-(( ? Consigli ?

Reply
luca Thursday December 10th, 2015 - 02:42 PM

Ciao! Quindi il browser riceve la pagina ma non la “interpreta” come HTML?

Reply
Alex Thursday December 10th, 2015 - 02:35 PM

E’ possibile avere demo per una chat (lato server – lato client)? dove il server possa inviare messaggi ai client ciclicamente? ho usato la libreria uipethernet, ma dopo qualche minuto si impalla e devo resettare!

Reply
luca Thursday December 10th, 2015 - 02:44 PM

Ciao Alex, normalmente il browser non può ricevere dati da un server senza che sia lui a stabilire la connessione, infatti tutti i siti Ajax funzionano in modo che ogni tot secondi sia il browser in background a fare delle chiamate al server…

Reply
Alex Thursday December 10th, 2015 - 02:58 PM

Scusa, non intendevo http ma solo socket quindi tcp, nessun browser

Reply
Stefano Thursday January 28th, 2016 - 06:41 PM

Ciao Luca, complimenti per questo tutorial, ti scrivo perchè nonostante abbia letto i vari post, ho capito come fare dei semplici ON OFF, da rete domestica ma non da remoto.
Grazie

Reply
luca Friday January 29th, 2016 - 08:34 AM

Ciao Stefano, devi fare in modo che il tuo router “giri” le connessioni provenienti da Internet verso Arduino… in gergo tecnico si chiama “NAT”, ogni modello di router ha la sua configurazione, prova a vedere se ci sono tutorial per il tuo.

Reply
Stefano Friday January 29th, 2016 - 07:18 PM

Grazie per la risposta, si scopre sempre qualcosa di nuovo, da discussioni nel forum di arduino ho letto che serve un server esterno

Reply
luca Saturday January 30th, 2016 - 09:46 AM

no, non è assolutamente necessario! basta configurare correttamente il router.

Reply
Stefano Saturday January 30th, 2016 - 12:51 PM

ieri sera ho recuperato le info sul router ma sembra che usi un servizio esterno, devo studiarmi meglio la cosa, provo a contattare i produttori del router

Reply
Piero Wednesday May 25th, 2016 - 10:11 PM

Ciao Luca , si riesce a vedere lo stato dei relè in tempo reale ogni qualvolta ci si connette con più PC? attualmente lepagine si aprono sempre con lo stato OFF anche se lo stato è ON.. Grazie

Reply
Michele Monday June 27th, 2016 - 04:00 PM

Ciao Luca. Complimenti per gli esempi e la chiarezza d’esposizione. Ora volevo chiederti se questo esempio lo posso applicare al FISHINO UNO che ha integrato modulo SD e WiFi. Mi aiuteresti per cortesia?

Reply
luca Monday July 25th, 2016 - 09:49 AM

ciao Michele, purtroppo no, Fishino usa un chip diverso

Reply
Willy Wednesday July 27th, 2016 - 07:18 PM

Scusa Luca vorrei usare quessto sketch con un arduino nano e il suo modulo enc28j60, purtroppo nel compilare mi da errori a tutto spiano !!! vorrei solo capire se non può funzionare, con il nano e il suo modulo ethernet…. garzie in anticipo saluti Willy

Reply
luca Tuesday August 2nd, 2016 - 07:48 AM

ciao! sì, funziona con il Nano, che errori ottieni in fase di compilazione?

Reply
Willy Monday September 5th, 2016 - 08:30 PM

Ti ringrazio per quello che fai e pubblichi…. ero convinto di poter usare il progetto per comandare un paio di relè con un nano e la relativa scheda di rete enc28j60, purtroppo mi sono reso conto che bisogna utilizzare, un SD per pubblicare il sito WEB … e non credo di essere in grado di modificare il tutto per le mie esigenze !! ti sarei grato se potessi indicarmi se esiste o si puoò trovare una progetto come sopracitato anche con un seplice pulsante sul display … comunque complimenti e grazie pwe quello che fai Saluti Willy

Reply
Emanuele Saturday August 20th, 2016 - 05:19 PM

Ciao Luca, è possibile adattarlo alla board fishino? Mi potresti aiutare?
Grazie

Reply
luca Tuesday August 23rd, 2016 - 01:14 PM

Ciao Emanuele, purtroppo non facilmente e non ho alcuna scheda fishino su cui provare

Reply
Emanuele Wednesday August 24th, 2016 - 10:22 AM

Al limite mi potresti dare qualche dritta su come fare?

Reply
Felix Wong Tuesday May 16th, 2017 - 03:33 AM

Hi Luke;
its a very good project. You show us to add more relay(or pin). Can you show us to add pin 6, which is analog write pin with 50 % turn on?
Thanks ahead

Felix

Reply

Leave a Reply to Nevio Cancel Reply

3 × 1 =