La Web APP

La WebApp è una Applicazione Web residente sul server in cui mylegalplants.it è in hosting in grado di visualizzare i valori di Temperatura, Umidità e Luminosità (comunque le caratteristiche fisiche ambientali rilevate dai sensori applicati ad Arduino), e/o attivare/disattivare i dispositivi attuatori di controllo del Riscaldamento, dell’Irrigazione e della Illuminazione della pianta.

 

Questi indicatori assumeranno in tempo reale i valori dei sensori e sarà possibile al click dell’utente modificare questi valori per il benessere della pianta.

La visualizzazione dei valori dei sensori avviene tramite Gauge realizzate con JavaScript, mentre lo stato degli attuatori viene visualizzato tramite immagini dei pulsanti modificati inline con CSS.

La WebApp realizzata in PHP legge e salva periodicamente i valori dei sensori e degli attuatori dal DataBase MySQL sul quale sono salvati.

 

Codice WEBAPP

Passo passo, cerchiamo di capire come abbiamo creato la pagina web più nel dettaglio.

La pagina sarà formata da 3 indicatori (g1,g2,g3) , ognuno dei quali riporterà i valori simultanei dei tre sensori .

Come prima cosa qui sotto viene scelto il tipo di indicatore ;
il valore minimo e massimo per ogni indicatore;
le relative scritte da inserirvi sotto.



document.addEventListener("DOMContentLoaded", function(event) {

var g1 = new JustGage({

id: "g1",

value: 0,

min: 0,

max: 50,

relativeGaugeSize: true,

title: "Temperatura",

label: "T pianta in °C"

});

Questo viene fatto per Umidità , con un range da 0 a 100, perchè questo è un paramentro utile in percentuale ;
per Luminosità ,con un range da 0 a 40000 Lux, per avere una buona precisione alla variazione minima di luce presente all’interno del box. .

Successivamente, ogni 1000 millisecondi (delay (1000);) viene chiamata una funzione javascript ( leggi_valori_attuali();
L’aggiornamento continuo dei valori dei sensori viene effettuato tramite una XMLHttpRequest JavaScript al Db tramite il file lettura_valori.php che restituisce i valori dei tre sensori.



setInterval(function() {

leggi_valori_attuali();

g1.refresh(temperatura);

g2.refresh(umidita);

g3.refresh(luminosita);

},

delay (1000);

});


La funzione (scritta in rosso) preleva lo stato attuale dei singoli sensori tramite il file “lettura_valori.php” e salva nelle rispettive variabili l’ ultimo valore acquisito dal sensore sotto forma di stringa . Inoltre , in base a se gli attuatori sono in funzione o meno , seleziona l’ immagine da attribuire al bottone (rosso=on; grigio=off;).



function leggi_valori_attuali() {

var data = 0;

var data_array;

//http request

var requestIN = new XMLHttpRequest();

requestIN.open( "GET", "lettura_valori.php", true);

requestIN.send(null);

//setta la var temperatura alla ricezione risposta dalla request

requestIN.onreadystatechange = function () {

if (requestIN.readyState == 4 && requestIN.status == 200) {

data = requestIN.responseText; //preleva il numero stampato da leggi_temperatura.php

data_array = data.split("-");

//setto le vars per i Gauges

temperatura = parseInt(data_array[0]);

umidita = parseInt(data_array[1]);

luminosita = parseInt(data_array[2]);

//setto lo stato dei pulsanti html in base allo stato attuatori attuale (sul DB)

if(parseInt(data_array[3])==1) document.getElementById("img_T").src = "img/rosso_on.png";

else document.getElementById("img_T").src = "img/grigio_off.png";

if(parseInt(data_array[4])==1) document.getElementById("img_H").src = "img/rosso_on.png";

else document.getElementById("img_H").src = "img/grigio_off.png";

if(parseInt(data_array[5])==1) document.getElementById("img_L").src = "img/rosso_on.png";

else document.getElementById("img_L").src = "img/grigio_off.png";

//document.getElementById("debug").innerHTML = data_array[1]; // per debug

}

//se la risposta fallisce

else if (requestIN.readyState == 4 && requestIN.status == 500) {

alert ("server error");

return ("fail");

}

//else

else if (requestIN.readyState == 4 && requestIN.status != 200 && requestIN.status != 500 ) {

alert ("Something went wrong! 3");

return ("fail");

}

return 0;

}

}

Fatto ciò abbiamo i valori di T,H e L nelle variabili temperatura umiditàe luminosità.

Tramite le tre istruzioni che seguono andiamo a inserire negli indicatori le tre letture.



g1.refresh(temperatura);

g2.refresh(umidita);

g3.refresh(luminosita);

Poi viene la parte di programma che cura la grafica e il comando del bottone.

L’immagine del bottone viene scelta da internet ed è salvata nel computer come “img/grigio_off.png”.

I tre bottoni suddividono orizzontalmente la pagina e ognuno ha il proprio titolo:Riscaldatore,Irrigazione,Illuminazione.

Tramite l’ istruzione sottostante allo schiacciare del bottone (onclick= “”) viene chiamata la rispettiva funzione presente tra le virgolette .
Sia per Temperatura


a href="#"onclick="T()"> 

Irrigazione


a href="#"onclick="H()"> 

Luminosità


a href="#"onclick="L()"> 

La funzione sottostante esiste ovviamente per tutti e tre i bottoni e serve per andare ad accendere o spegnere l’ attuatore voluto al click del bottone.

Inoltre accende (rosso) o spegne(grigio) il bottone nella schermata della pagina web.



function L() {

//http request

var requestOUT = new XMLHttpRequest();

requestOUT.open( "GET", "attiva_L.php", true);

requestOUT.send(null);

requestOUT.onreadystatechange = function () {

if (requestOUT.readyState == 4 && requestOUT.status == 200) {

data_L = requestOUT.responseText;

if(parseInt(data_L)==1) document.getElementById("img_L").src = "img/rosso_on.png";

else document.getElementById("img_L").src = "img/grigio_off.png";

}

else if (requestOUT.readyState == 4 && requestOUT.status == 500) {

alert ("server error");

return ("fail");

}

else if (requestOUT.readyState == 4 && requestOUT.status != 200 && requestOUT.status != 500 ) {

alert ("Something went wrong! 3");

return ("fail");

}

return 0;

}

}

Quindi in conclusione:

-Creo tre indicatori , tre bottoni e su ognuno la propria descrizione;

-Ogni 1000 millisecondi vado a prelevare i valori dai tre sensori e li inserisco negli indicatori;

-Al click del bottone da parte dell’utente vado ad accendere o spegnere il rispettivo attuatore.

PROGRAMMA COMPLETO :

<!doctype html>

 

 

MyLegalPlants – IoT project

 

 

 

MyLegalPlants


Riscaldatore

Irrigazione

Illuminazione