ESPertino e la domotica OpenSource: Switch a doppia uscita – Sviluppo pagina web

Nella prima lezione è stata fatta una panoramica sul mondo della domotica mettendo in evidenza i principali problemi e ostacoli, legati principalmente al fatto di non avere uno standard di comunicazione unico, e si è visto inoltre come domotica e IoT stanno convergendo verso un'unica direzione.  Proprio a partire da queste considerazioni è stato pensato e realizzato, attraverso l'utilizzo della scheda di sviluppo ESPertino, un sistema composto da dispositivi intelligenti che, oltre a eseguire funzioni specifiche come ad esempio il pilotaggio di un carico o l'invio di un comando per l'attivazione di una luce, sono in grado di interconnettersi e comunicare tra loro attraverso una rete Ethernet.

IMPLEMENTAZIONE PAGINA WEB

Per fare in modo che l'utente possa interagire con il sistema domotico occorre necessariamente che quest'ultimo metta a disposizione dell'utilizzatore un'interfaccia utente intuitiva, gradevole, che non sia complicata da installare e che magari faccia uso di software o sistemi comuni e già conosciuti dall'utente. Visto e considerato che la scheda ESPertino può essere configurata per funzionare come un WebServer, la soluzione ottimale per la realizzazione della GUI e che soddisfa le caratteristiche sopracitate, è sicuramente quella di utilizzare una pagina HTML con relativo foglio di stile e codice Javascript.

A tal proposito si è scelto di realizzare la GUI utilizzando proprio una pagina web e nella fattispecie il file che la realizza è "webpage.html", il quale merita una trattazione approfondita. Questo file, essendo a tutti gli effetti una pagina HTML, è divisa in tre parti:

  • la prima parte è composta dagli stili CSS
  • la seconda parte è composta dalle funzioni JavaScript
  • la terza parte è il codice HTML

Risulta abbastanza chiaro che ai fini della comprensione del progetto, la parte più importante da descrivere è la seconda in quanto è composta dalle funzioni in JavaScript utili alla comunicazione con il dispositivo, mente invece la prima e la terza parte, oltre ad essere relativamente semplici, servono a dare struttura e gradevolezza alla pagina. Per questi motivi mi limiterò nella descrizione delle sole funzioni JavaScript; per chi volesse approfondire anche le altre parti le può trovare nei file in allegato al presente articolo.

La funzione più importante e che sta alla base di tutte le altre è "sendHttpAsync". Questa funzione, utilizzando l'oggetto "XMLHttpRequest", si occupa fondamentalmente di impacchettare in una richiesta HTTP i parametri (contenuti nella variabile "params") da inviare e quindi di eseguire l'invio.  Oltre ai parametri da inviare la funzione ha bisogno di sapere l'url a cui inviare la richiesta (parametro "url"), la modalità di invio dei parametri se in GET o in POST (parametro "method") e due funzioni da richiamare, la prima quando  l'invio è terminato (parametro "callback") e la seconda quando scade il timeout di attesa (parametro "callbackTimeout"). La presenza di un timeout di attesa risulta particolarmente utile per evitare che la pagina web rimanga bloccata, nel momento in cui per qualche ragione il dispositivo smettesse di rispondere alle richieste:

  function sendHttpAsync(url,callback,callbackTimeout,params,method)
  {
     var http = new XMLHttpRequest();

    objHttpTimeout=setTimeout(callbackTimeout,TIMEOUT_HTTPCONNECTION);
     method=method||"GET";
     if(method=="GET")
         http.open(method,url+"?"+params,true);
     else if(method=="POST")
     {
         http.open(method,url,true);
         //Send the proper header information along with the request
         http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     }
     http.onreadystatechange = function()
     {
         //Call a function when the state changes.
         if(http.readyState == 4 && http.status == 200)
         {
             if(objHttpTimeout!=null)
                 clearTimeout(objHttpTimeout);
             if(callback!=null)
                 callback(http.responseText);
         }
     }
     if(method=="GET")
         http.send(null);
     else if(method=="POST")
         http.send(params);
  }

Come possiamo vedere dal corpo della funzione, la prima cosa che viene eseguita è la creazione del timeout, a cui viene passata la funzione da richiamare e il tempo di timeout (variabile "TIMEOUT_HTTPCONNECTION" impostata a 10.000 ms); una volta impostato il timeout viene avviato l'oggetto "http" (istanza di "XMLHttpRequest") tramite il comando "open". Prima di eseguire questa operazione occorre però distinguere con che metodo dovranno essere inviati i parametri in quanto, se in GET questi dovranno essere accodati all'URL, se in POST invece dovranno essere passati come parametro al momento dell'invio della richiesta e dovrà essere settato opportunamente l'Header HTTP tramite la riga di codice "http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");". Avviato l'oggetto "http" viene settata, tramite "http.onreadystatechange", la funzione di callback che segnala il cambio  dell'attributo "readyState" dell'oggetto "XMLHttpRequest" e quindi viene successivamente richiamato il comando "send" per eseguire l'invio vero e proprio della richiesta HTTP. Per fare in modo che la funzione passata nel parametro "callback" venga chiamata solo quando l'invio è terminato (il cambio  dell'attributo "readyState" può essere causato anche da altri eventi), è stato inserito ulteriore codice che verifica se i valori "http.readyState" e "http.status" hanno o meno i valori 4 e 200 rispettivamente. Per [...]

ATTENZIONE: quello che hai appena letto è solo un estratto, l'Articolo Tecnico completo è composto da ben 2199 parole ed è riservato agli ABBONATI. Con l'Abbonamento avrai anche accesso a tutti gli altri Articoli Tecnici che potrai leggere in formato PDF per un anno. ABBONATI ORA, è semplice e sicuro.

Scarica subito una copia gratis

11 Commenti

  1. Avatar photo Antonio Riccelli 22 Maggio 2018
  2. Avatar photo carboema66 18 Giugno 2018
    • Avatar photo Luca Giuliodori 18 Giugno 2018
  3. Avatar photo carboema66 18 Giugno 2018
  4. Avatar photo Luca Giuliodori 18 Giugno 2018
  5. Avatar photo carboema66 19 Giugno 2018
    • Avatar photo gianmarco.cervini 19 Giugno 2018
      • Avatar photo Luca Giuliodori 20 Giugno 2018
  6. Avatar photo Luca Giuliodori 21 Giugno 2018
  7. Avatar photo Maurizio Di Paolo Emilio 21 Giugno 2018

Scrivi un commento

Seguici anche sul tuo Social Network preferito!

Send this to a friend