Webserver_descrizione_breve

SISTEMA MONITORAGGIO

Questa pagina include l'introduzione e una descrizione breve relativa al sistema di monitoraggio di temperatura e umidita'

Sezioni documentazione

Introduzione
Descrizione breve

Introduzione

Nella cartella "html" sono contenuti tutti gli script, backend e frontend, del sistema di monitoraggio.

Nelle cartella "credentials" e' presente il file "credentials.ini" letto da db_connection.php con le credenziali per accedere al database

Descrizione breve

Questa sezione parlera' brevemente di cosa fanno i file presenti nella cartella "html", per i dettagli di funzionamento andare nella sezione Descrizione

PHP

Credits: https://en.wikipedia.org/wiki/File:PHP-logo.svg

Lato backend viene utilizzato il linguaggio PHP:

Script PHP richiamati da altri script

Questi script non restituiscono niente di visualizzabile, definiscono variabili/funzioni usati da altri script

db_connection.php permette di connettersi al database db100_100 di MySQL (viene usato da tutti gli script che inseriscono/selezionano dati dal database)
ottenere la lista dei colori selezionabili dall'utente per verificare che il colore spedito dalla frontend sia valido (definisce array con i colori, get_colorslist.php)
ottenere la lista delle planimetrie in img/maps (definisce la funzione per ottenere l'array, getmaps.php)
rgb_hexconvertion.php permette di convertire i valori dei colori esadecimali in rgb e viceversa e di ottenere colori piu' chiari o scuri di un colore (valore esadecimali)

Sono presenti nel percorso /static/php/

Torna su

Script PHP per accedere a dati

Questi sono script che formalmente rispondono a richieste GET

Permettono di:

ottenere le proprieta' spazio libero, spazio totale e spazio occupato e li restituisce in formato JSON (diskinfo.php)
ottenere il colore selezionato dall'utente (get_selectedcolor.php)
ottenere la lista dei colori selezionabili dall'utente in formato JSON per poterli visualizzare nella pagina impostazioni (getcolors.php)
ottenere la lista delle rilevazioni in formato JSON (getdata.php)

Ottiene tutte le rilevazioni, sarebbe meglio utilizzare un parametro per ottenere l'id_node
ottenere la lista delle ultime rilevazioni per nodo (getlatestdata.php)
ottenere gli ultimi valori di RSSI per nodo (getrssi.php)
ottenere la lista delle planimetrie in JSON per visualizzarle nella frontend (showmaps.php)

Sono presenti nel percorso /static/php/

Torna su

Script PHP che ricevono dati

Questi sono script che formalmente dovrebbero rispondere a richieste POST

Tutti gli script usano richieste GET per semplicita', ma bisognerebbe usare POST

Permettono di:

ricevere il colore selezionato dalla frontend per inserirlo nella tabella t_options (sendcolor.php)
ricevere la planimetria selezionata dalla frontend, inserisce l'opzione nella tabella t_options (sendmap.php)
ricevere il range dei timestamp (timestamp minimo e timestamp massimo) delle rilevazioni da visualizzare nella frontend, inserisce le opzioni nella tabella t_options (sendopt.php)
ricevere la rilevazione dal node MCU per inserirlo nella tabella t_sensors (sensors.php)

Sono presenti nel percorso /static/php/

Torna su

Script PHP per CSS dinamico

Questi sono script importati da index.html come se fossero file CSS

Permettono di:

restituire il CSS per la pagina delle informazioni con il colore selezionato dall'utente (infos/cm_style.php)
restituire il CSS per la pagina delle informazioni per l'effetto "typewriter" (infos/style.php)

Permetterebbe facilmente la possibilita' di modificare la tip da bianco ad un altro colore, ma attualmente e' possibile modificarlo solo modificando il file
restituire il CSS per modificare il colore (selezionato dall'utente) dei pulsanti nella pagina delle impostazioni (settings/_cm_button.php, usato da settings/cm_style.php)
restituire il CSS per modificare il colore (selezionato dall'utente) del datepicker nella pagina delle impostazioni (settings/_cm_datepicker.php, usato da settings/cm_style.php)
restituire il CSS per modificare il colore (selezionato dall'utente) dello switch nella pagina delle impostazioni (settings/_cm_switch.php, usato da settings/cm_style.php)
restituire il CSS per modificare il colore (selezionato dall'utente) del timepicker nella pagina delle impostazioni (settings/_cm_timepicker.php, usato da settings/cm_style.php)
restituire il CSS per modificare il colore (selezionato dall'utente) di tutti gli elementi nella pagina delle impostazioni (settings/cm_style.php)

Il css modificato e' materialize

Sono presenti nel percorso /static/css/

Torna su

Script PHP per planimetria SVG dinamica

planselector.php restituisce l'elemento SVG con la planimetria selezionata dall'utente, dopo aver verificato il suo mime type e la sua reale esistenza

Risiede nel percorso /static/img/

Javascript

Credits: https://glue-labs.com/articoli/come-scrivere-codice-javascript-usare-una-styleguide-google

Javascript, in particolare il framework Vue, si occupa del lato Frontend.

Vue

Credits: https://vuejs.org/

Vue e' un framework Javascript per creare interfacce utente.

Alternative altrettanto valide sarebbero Angular e React

Si potrebbe dire che permette di avere istruzioni di linguaggi di programmazione all'interno del semplice HTML, quindi e' possibile usare variabili, cicli for, condizioni if-elif-else...

In questo modo e' possibile rendere la pagina piu' dinamica e grazie al suo DOM virtuale la pagina e' "reattiva", gli eventi hanno effetto in tempo reale

Vue e' stato usato nel sistema piu' facile possibile: e' stato "allegato" all'html come tutti gli altri script javascript.

Per progetti complessi sarebbe opportuno utilizzare componenti Vue (file .vue per componente con i propri CSS, javascript e html), renderebbero l'applicazione "scalable" e i componenti sarebbero facilmente riutilizzabili in altri progetti ma aumenterebbero la complessita' di passare dalla fase di sviluppo alla produzione: sarebbe necessaria una fase di build per convertire i file vue (file non riconosciuti dai browser) in javascript successivamente allegabile all'HTML. Per fare le build occorrerebbe utilizzare un "module bundler" come Webpack e configurarlo a dovere.

Oltre a Vue questo progetto utilizza Vue Router per gestire la navigazione tra le pagine, rendendo l'applicazione una SPA (Single Page Application). La navigazione nell'applicazione appare fluida lato utente perche' tutte le pagine vengono caricate contemporaneamente una volta sola.

Torna su

Utilities

L'HTML importa diversi script javascript per aggiungere funzionalita':

floorplan/svg.min.js : utility per fare operazioni su elementi svg

Credits: https://svgjs.com/docs/2.7/
materialize/materialize.min.js per gli elementi di materialize (usato per il datepicker e il timepicker nelle impostazioni)
mdbootstrap/bootstrap.min.js, mdbootstrap/jquery-3.3.1.min.js, mdbootstrap/mdb.min.js e mdbootstrap/popper.min.js: javascript per mdbootstrap
options/axios.min.js: permette di fare richieste asincrone (GET, POST...)
timestamp/t2ts.js: permette di fare conversione tempo da formato "hh:mm tt" a timestamp
touch/hammer.min.js: gestisce eventi touch, come lo swipe

Torna su

Pagine frontend

main/graph.js: Crea oggetto con pagina grafici
main/home.js: Crea oggetto con pagina principale
main/infos.js: Crea oggetto con pagina informazioni
main/options.js: Crea oggetto con pagina impostazioni
Javascript in index.html: usa le variabili con le pagine per configurare le route delle pagine

Torna su

CSS

Credits: https://en.wikipedia.org/wiki/Cascading_Style_Sheets

Il CSS si occupa di rendere gradevole l'interfaccia utente

Torna su

Frameworks

Credits: https://github.com/mdbootstrap

Molti degli elementi usano come stile lo stile di mdbootstrap:

/static/css/all.css: file font-awesome per il font (posizionato in /static/font/roboto)
/static/css/bootstrap.min.css: stili bootstrap
/static/css/mdb.min.css: stili specifici di mdbootstrap

mdbootstrap e' un framework che si basa su bootstrap sul quale aggiunge lo stile material design ("md")

mdbootstrap e' disponibile sia in versione gratuito sia in versione a pagamento: purtroppo la versione gratuita non include timepicker e datepicker e lo stile dello switch gratuito non e' bello come lo switch disponibile in altre alternative

Credits: https://extensions.typo3.org/extension/t3content_materializecss/

Per il timepicker, datepicker e switch viene usato materialize: /static/css/materialize.min.css

Torna su

Specifici per il progetto

Una parte del CSS e' stata scritta apposta per questo progetto in /static/css/main/style.css:

Rende la pagina alta almeno di una pagina e larga tutta la pagina
Rende le pagine assolute per rendere piu' gradevole l'effetto di traslazione delle pagine
Mantiene responsive planimetria e titolo riducendo la loro dimensione per i dispositivi mobile
Crea l'effetto di traslazione quando si passa tra una pagina ad un'altra
Crea la griglia con i quadrati colorati per permettere la selezione da parte dell'utente del colore da utilizzare nell'interfaccia
Definisce lo stile dei pulsanti per tornare indietro

Torna su