De senaste veckorna lämnade jag över kontrollen av stämningsbelysningen i min studio till tittarna under direktsändningen av Technophilia Podcast – det kan ni se resultatet av i det inspelade avsnittet här. Idag tänkte jag förklara exakt hur jag åstadkom det med lite JavaScript, bearbetning och en Arduino. Metoden jag kommer att beskriva kräver inte en Ethernet-sköld för din Arduino, och jag kommer att tillhandahålla fullständiga kodexempel som du också kan använda.
De senaste veckorna lämnade jag över kontrollen av stämningsbelysningen i min studio till tittarna under direktsändningen av Technophilia Podcast – det kan ni se resultatet av i det inspelade avsnittet här. Idag tänkte jag förklara exakt hur jag åstadkom det med lite JavaScript, Bearbetning, och en Arduino. Metoden jag kommer att beskriva kräver inte en Ethernet-sköld för din Arduino, och jag kommer att tillhandahålla fullständiga kodexempel som du också kan använda.
Krav:
Arduino Lights för att styra lämplig krets på Arduino; se min handledning för omgivande bakgrundsbelysning från förra veckan för ett kretsschema och uppdelning av komponenter. Bearbetningsprogramvara på din PC eller Mac Webbplatsvärd Grundläggande kodningskunskaper med JavaScript och PHP, även om jag tillhandahåller hela koden som du kan anpassa.
Arduino-inställning
Först ut, hänvisa tillbaka till förra veckans handledning för Arduino-sidan; koden vi kommer att använda är identisk, eftersom jag använder samma RGB LED-remsa styrkrets, så jag kommer inte att upprepa det här. För att sammanfatta, kommer Arduino att läsa RGB-värden från USB-serieanslutningen till datorn.
Bearbetar app
Bearbetningsappen vi kommer att använda är väldigt enkel (PASTEBIN); den använder en grundläggande loadStrings() funktion för att läsa en textfil lagrad på en fjärrwebbadress – i det här fallet har jag använt http://jamesbruce.me/lights/LED.txt. Skapa en exempeltextfil på ditt webbhotell för att testa detta och justera därefter. Textfilen ska bara vara 3 rader med värden för R, G och B.
Du måste också ändra serieporten till vad din USB är ansluten till. Som tidigare är det första som appen kommer att göra att mata ut en lista över serieportar till konsolen – kontrollera detta för att se rätt att använda, och kör sedan igen. Din Arduino LED-remsa bör lysa upp med de slumpmässiga värden du har lagt till i textfilen.
Arduino webbkontroll
På webbkontrollsidan valde jag en enkel färgväljare jQuery-plugin som heter Spectrum; det finns andra där ute, men jag kände att det här var hur enkelt som helst och fungerar även med touch på en mobil, medan andra jag provade inte skulle göra det. Placera spectrum.js och spectrum.css filer i samma katalog som allt annat (Jag skapade en /lights underkatalog på min server för att hålla saker ren).
Vi kommer att använda PHP för att både visa webbkontrollen och hantera LED.txt filskrivning om variabler anges i POST-begäran. När användaren besöker den här sidan och väljer en färg skickar den en AJAX-förfrågan med färgvariablerna tillbaka till sig själv. Detta håller det hela i en fil. Hela PHP/HTML kan hittas i denna pastebin (spara det som index.php i en underkatalog tillsammans med de andra filerna)men låt mig ge en kort beskrivning av den inblandade koden.
- PHP: Upptäck om det finns en postvariabel som heter ‘färger’. Om så är fallet, öppna LED.txt-filen för skrivning och skriv över med postvariablerna.
HTML: Importera jQuery, Spectrum.jsoch Spectrum.css JavaScript: getRGB-funktionen returnerar en matris av kommaseparerade RGB-värden givet en mängd olika CSS-färgformat, som t.ex. #aaaaa.
JavaScript: skapa Spectrum-kontrollen och bifoga ett AJAX-anrop till den färgvalda ändrade händelsen. AJAX anropar denna hanterarfil med de RGB-värden som ges av kontrollen.
Slutligen, se till att din LED.txt filen är skrivbar av servern. A 655 eller 777 tillstånd bör göra det. Starta filen och ge den en chans; Bearbetningsappen måste vara igång och uppdaterar filen varje sekund. Om färgväljaren inte ens visas på sidan, kontrollera JavaScript-konsolen för fel.
Fallgropar och vidare arbete
Som jag nämnde använde den här metoden inte en Ethernet-sköld med avsikt, så alla med grundläggande webbhotell kunde få det konfigurerat mycket snabbt och billigt. Detta betyder dock att vi måste använda Processing-appen för att fungera som en gateway för att hämta data; utan att datorn kör fungerar det helt enkelt inte. Med tillägget av en Ethernet- eller WiFi-sköld kunde vi flytta Arduino var som helst utan att vara kopplad till en PC, och antingen hämta kommandon på distans eller skjuta dem direkt till Arduino med lite portvidarebefordran. Jag tar upp detta en annan dag. Det finns också ett problem med samtidighet – hur vi har det konfigurerat är att filen helt enkelt kommer att skrivas över varje gång någon väljer en ny färg, och fördröjningen mellan färgbytena bestäms i bearbetningskoden. Om du vill ha många användare som ständigt justerar färgen kan ett kösystem med en databas vara mer lämpligt; att använda en platt fil för att lagra värdena kan resultera i att vissa ändringar ignoreras om uppdateringarna sker oftare än vi uppdaterar filen. Sedan har du naturligtvis ingen möjlighet att veta om det ens fungerade just då om du inte tittade på vår livesändning. Helst skulle det finnas en webbkamera konfigurerad och inbäddad på kontrollsidan. Som en teknisk demo tycker jag dock att detta är ganska häftigt; Jag hoppas att du kan se potentialen för att fjärrstyra i princip vad som helst över internet via en Arduino. Justin föreslog att vi skulle lämna över kontrollen över min ugn; Jag tackade nej. Har du några intressanta projekt som du tror att detta kan hjälpa till med?
Om författaren
James Bruce (720 publicerade artiklar)
James har en BSc i artificiell intelligens och är CompTIA A+ och Network+ certifierad. När han inte är upptagen som Hardware Review Editor, gillar han LEGO, VR och brädspel. Innan han började på MakeUseOf var han ljustekniker, engelskalärare och datacenteringenjör.
Mer från James Bruce
Prenumerera på vårt nyhetsbrev
Gå med i vårt nyhetsbrev för tekniska tips, recensioner, free e-böcker och exklusiva erbjudanden!
Klicka här för att prenumerera
