Neopixel wemos web server html appartiene ad una serie di articoli in cui stai realizzando un progetto che controlla dei neopixel mediante una connessione server ed una pagina html.
poiché l’HTTP è un argomento complesso ma importante al fine di consentirti le dovute modifiche alla pagina se vuoi, ad esempio, aggiungere de nuovi giochi di luce o personalizzare il layout.
La pagina in Neopixel wemos web server html
la pagina html che carichi sulla WeMos può essere un unica stringa contenente tutti i tag html o puoi dividere, come nei miei esempi, la pagina in tre parti che gestisci in modo più snello:
la prima sezione, in blu, è quella che chiami HEADER e contiene tutti i tag a partire dall’apertura della pagina e definizione del modello di documento fino alla chiusura del TAG HEADER.
Il secondo blocco, in verde, è il corpo vero e proprio della pagina HTML che cambia o può cambiare a tuo piacimento secondo quello che desideri visualizzare sul client.
il blocco footer, l’ultimo, in rosso, chiude la pagina inserendo un piè pagina e chiudendo sia il tag body sia quello html.
Il codice della pagina in Neopixel wemos web server html
Ecco il codice della pagina indentato in modo da renderlo visibile.
Se lo dividi nei tre blocchi ed elimini i ritorno a capo ottieni le stesse linee inserite in configurazione negli sketch del Neopixel wemos web server html.
<!DOCTYPE html> <html> <head>
<style>
header { background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%);
color: #fff; padding:10px;
text-align: center;
vertical-align: middle;
}
body { padding:15px;
color: #48584f;
font-family: Helvetica,Arial,sans-serif;
font-variant: small-caps;
font-size:1em;
text-align: center;
}
footer { background: linear-gradient(to left, #1e5799 0%,#7db9e8 100%);
color: #fff;
padding:10px;
text-align: right;
vertical-align: bottom;
}
h2 { padding:10px;
text-align: center;
vertical-align: middle;
font-size:2em;
}
ul { list-style-type: none;
margin: 10;
padding: 0;
width: 100%;
background-color: #fff;
}
li a { display: block;
box-shadow: 5px 5px 3px #1e5799;
background-color: #fff;
border: 0px solid #000;
color: #48584f;
margin: 10px;
padding: 8px 16px;
text-decoration: none;
}
li a:hover { background-color: #7db9e8; color: #fff; }
</style>
</head>
<body>
<header>:: NeoPixel Web Server ::</header>
<ul class=\"one\" style="width:100%">
<li><a href=/Rainbow1>Effetto A</a></li>
<li><a href=/Rainbow2>Effetto B</a></li>
<li><a href=/Rainbow3>Effetto C</a></li>
<li><a href=/Rainbow4>Effetto D</a></li>
</ul>
<footer>powerd by mauroalfieri.it</br>CC licence</footer>
</body>
</html>
entrando nel dettaglio delle linee che leggi trovi le linee 02-46: destinate a definire gli stili css che la pagina utilizza per visualizzare le barre sfumate, gli effetti sui bottoni, i font ecc..
linea 49: imposta il titolo della pagina usando il tag <header>
linee 51-56: costruisci un elenco con cui realizzi i 4 bottoni corrispondenti a 4 link che saranno interpretati dallo sketch per eseguire il gioco di luce corrispondente alla pressione di uno di essi. Se desideri aggiungere un 5° effetto dovrai aggiungere un nuovo elemento <li>, con al suo interno un nuovo link ( href ) ed una descrizione tipo “Effetto E”. poi dovrai configurare l’url in ricezione nello sketch neopixel wemos web server html in modo che sappia quale gioco di luce eseguire;
linea 58: pubblica il footer della pagina con il testo scritto all’interno del tag <footer>
Il video
Il video che segue ti mostra il funzionamento del progetto Neopixel wemos web server html:
Il blog mauroalfieri.it ed i suoi contenuti sono distribuiti con Licenza