Stap 2: De HTML-code
Het grootste deel van de HTML-code hieronder, wordt gebruikt voor de generatie van de "buttons": "ON" en "OFF". Merk op dat voor elke knop (er zijn zes in totaal, twee voor elke GPIO), een specifieke "id" wordt gegenereerd. Bijvoorbeeld, als de knop "ON", die is gekoppeld aan de GPIO 11 wordt ingedrukt, de gegenereerde ID is "111", dat wil zeggen de eerste twee cijfers zijn voor de identificatie van de GPIO (in dit geval "11") en derde cijfer is voor opnemen de staat, in dit geval "1" of "ON". Als de knop is "OFF", zou de Id 110. In dit geval, de digitale uitgang pin 11, met de blauwe LED is aangesloten.
Zodra de "id" een functie op pagina gegenereerd zorgt voor het verzenden van het naar het IP-adres voor de ESP8266. Merk op dat het adres dat wordt weergegeven in het ESP 8266 set-up moet worden opgenomen in de regel == > $ krijg ("http://10.0.1.14:80 /"; {pin: p});
De eerste paar keer dat ik testte het programma, ik had veel problemen en de belangrijkste was dat ik merkte dat het alleen mogelijk was om 5 opdrachten verzenden de LEDs. Dat komt omdat elke informatie wordt verzonden, de ESP8255 beschouwd als een open verbinding (CONNECT 0, 1, 2, 3 of 4) en de limiet is 5.
Ik ook waargenomen dat wanneer in een "vernieuwen" op de pagina, de "aantal verbindingen", keerde terug naar nul. De oplossing was om toe te voegen een nieuwe HTML-code, die gedwongen het automatisch vernieuwen van de pagina (code type "META"). Ik koos om te doen een vernieuwen om de 15 seconden en dus niet krijgen te vervelend voor de gebruiker. Het werkte zonder problemen: