Enkelt och intuitivt webbgränssnitt för din Raspberry Pi (5 / 6 steg)

Steg 5: Att göra gränssnittet

Vi kan nu styra våra Raspberry Pi med enkla PHP skript men det finns ingen interaktion med användaren och därmed kan vi välja inte den LED-slå på/av. Låt oss göra gränssnittet!
Den består av bilder jag har hittat på Google bilder (Sök på "on/off knappen"). En var grön och den andra en röd, jag la bara numret använder Gimp. Varje bild/knapp motsvarar dess LED, så om du klickar på en av dessa, motsvarande lampan slås på/av och bilden kommer att ändras till dess grön/röd version. Sidans skelett kommer att göras med HTML, server interaktioner och sidans generation med PHP och på sista JavaScript att hantera interaktion med användaren och sidans animation. Om du inte vet, JavaScript är en client side språk och till skillnad från PHP, körs det inte en gång, men kontinuerligt av din webbläsare. Det är därför du kan ändra sidans utseende utan omlastning det eller åtkomst till en annan. Om du undrar varför jag talade om CSS innan, det är bara för att vi behöver det för några stil och sidlayout som den svarta bakgrunden. Jag gjorde inte en full CSS-fil eftersom det inte var nödvändigt här.
Måste först en "index.php" fil (förlängningen är .php och inte .html orsaken vi kommer att använda PHP-kod, den hjälper servern att veta om det finns PHP att köra innan du skickar sidan genererad). Denna sida är huvudsidan som innehåller 8 knapparna. Dessa knappar skapas först med en "exec ("gpio läsa". $i, $output);" i en for-loop. Vi måste identifiera när användaren klickar på en av dessa knappar. Det är där JavaScript är användbart, jag satte den i en separat fil som heter "script.js" men det finns fortfarande i index.php. Skriptet är bara lägga till en händelseavlyssnare till alla åtta knappar och varje gång en av dessa trycks, använder en funktion som ber om gpio.php, får svaret så returnera den. Slutligen, i funktion av detta, JavaScript ändras knappen till röd (för OFF) eller grön (för på). Nu, den sista sidan: gpio.php. Den innehåller PHP koden för att aktivera/inaktivera lysdioderna i vad JavaScript-funktionen skickas-funktion. Användaren inte normalt be för denna exakta sida men det finns en gyllene regel när du skapar webbplatser och du bör alltid komma ihåg detta: "Aldrig lita på den användare". Med andra ord, tro aldrig användaren kommer alltid att göra vad du tror att han kommer att göra. Alltså, jag la några värdepapper på början av PHP-kod som gör att användaren gav ett korrekt värde och inte ett brev som exempel. Jag gjorde ett litet diagram för att summera alla denna text.

Du kan hämta hela projektet direkt på denna hemsida nedan.