I de sidste par uger har jeg overdraget kontrollen over stemningsbelysningen i mit studie til seerne under live-udsendelsen af Technophilia Podcast - du kan se resultaterne heraf i den indspillede episode her. I dag tænkte jeg, jeg vil forklare præcis, hvordan jeg opnåede det ved at bruge lidt JavaScript, Processing og en Arduino . Metoden, jeg vil skitsere, kræver ikke et Ethernet-skjold til din Arduino, og jeg vil give fuld kode prøver, som du også kan bruge.
Krav:
- Arduino
- Lyser for at styre det relevante kredsløb på Arduino; se min omgivende baggrundsbelysningstutorial Byg din egen dynamiske omgivende belysning til et mediecenter Byg din egen dynamiske omgivende belysning til et mediecenter Hvis du ser mange film på din pc eller mediecenter, er du sikker på at du har konfronteret lysdilemmaet ; slukker du helt for alle lys? Holder du dem på fuld blast? Eller ... Læs mere fra sidste uge for et kredsløbsdiagram og sammenbrud af komponenter.
- Behandler software på din pc eller Mac
- Website hosting De forskellige former for Website Hosting Forklaret [Teknologi forklaret] De forskellige former for Website Hosting Forklaret [Teknologi forklaret] Læs mere
- Grundlæggende kodningsfærdigheder med JavaScript og PHP, selvom jeg giver den fulde kode, som du kan tilpasse.
Arduino Setup
Først og fremmest henvises til sidste ugervejledning til Arduino-siden af ting. Byg din egen dynamiske omgivende belysning til et mediecenter. Byg din egen dynamiske omgivende belysning til et mediecenter. Hvis du ser mange film på din pc eller mediecenter, så jeg Jeg er sikker på at du har konfronteret lysproblemet; slukker du helt for alle lys? Holder du dem på fuld blast? Eller ... Læs mere; Koden vi bruger er identisk, da jeg bruger det samme RGB LED-styrekredsløbskreds, så jeg gentager ikke det her. For at opsummere, vil Arduino læse RGB-værdier fra USB-seriel forbindelse til computeren. 
Behandler App
Den behandlingsapp vi bruger er meget enkel (PASTEBIN); det bruger en grundlæggende loadStrings () funktion til at læse en tekstfil gemt på en fjernwebadresse - i dette tilfælde har jeg brugt http://jamesbruce.me/lights/LED.txt . Opret et eksempel på tekstfil på din webhost for at teste dette og justere i overensstemmelse hermed. Tekstfilen skal bare være 3 linjer værdier for R, G og B. 
Du skal også ændre seriel port til, hvad din USB er tilsluttet. Som det første er det første, som appen skal gøre, at sende en liste over serielle porte til konsollen - tjek dette for den rigtige, der skal bruges, og genkør derefter. Din Arduino LED-strimmel skal lyse op med de tilfældige værdier, du tilføjede til tekstfilen.
Arduino Web Control
På webkontrolsiden valgte jeg en simpel farvevælger jQuery-plugin kaldet Spectrum; der er andre derude, men jeg følte, at det var så simpelt som nødvendigt og også arbejder med touch på en mobil, mens andre jeg forsøgte ikke ville. Placer spectrum.js og spectrum.css- filer i samme mappe som alt andet (jeg lavede en underkatalog på undermenuen på min server for at holde tingene rene). 
Vi bruger PHP til at vise webkontrol og håndtere LED.txt-filskrivning, hvis variabler er angivet i POST-anmodningen. Når brugeren besøger denne side og vælger en farve, sender den en AJAX-anmodning med farvevariablerne tilbage til sig selv. Dette holder hele sagen indeholdt i en fil. Den fulde PHP / HTML kan findes på denne pastebin (gem den som index.php i en undermappe sammen med de andre filer), men lad mig give en kort oversigt over den pågældende kode.
- PHP : Opdag, om der er en postvariabel kaldet 'farver'. I så fald skal du åbne LED.txt-filen for at skrive og overskrive med postvariablerne.
- HTML : Import jQuery, Spectrum.js og Spectrum.css
- JavaScript : getRGB-funktion returnerer et udvalg af kommaseparerede RGB-værdier, der er givet forskellige CSS-farveformater, f.eks. #aaaaa.
- JavaScript : Opret spektrumkontrollen, og vedhæft et AJAX-opkald til den valgte farveændring. AJAX kalder denne håndteringsfil med de RGB-værdier, som kontrollen giver.
Endelig sørg for, at din LED.txt- fil skrives af serveren. En tilladelse fra 655 eller 777 skal gøre det. Start filen og giv den en tur Behandlingsapp'en skal køre og genopfriske filen hvert sekund. Hvis farvevælgeren ikke engang vises på siden, skal du kontrollere JavaScript-konsollen for fejl.
Faldgruber og videre arbejde
Som jeg nævnte, anvendte denne metode ikke et Ethernet-skjold med det formål, så alle med grundlæggende webhosting kunne få det oprettet meget hurtigt og billigt. Dette betyder imidlertid, at vi skal bruge Processing-appen til at fungere som en gateway til hentning af dataene; uden at pc'en kører, vil det simpelthen ikke fungere. Med tilføjelsen af et Ethernet- eller WiFi-skjold kunne vi flytte Arduino hvor som helst uden at blive bundet til en pc, og enten hent kommandoer fjernt eller skub dem direkte til Arduino med en lille port videresendelse. Jeg vil tage op på en anden dag. Der er også et problem med samtidighed - den måde, hvorpå vi har oprettet det er, at filen simpelthen bliver overskrevet hver gang en person vælger en ny farve, og forsinkelsen mellem farveændringer er besluttet i Processing code. Hvis du vil have mange brugere konstant justere farven, kan et køsystem med en database være mere passende; ved at bruge en flad fil til at gemme værdierne kan det resultere i, at nogle ændringer ignoreres, hvis opdateringerne forekommer hyppigere end vi opdaterer filen. Så har du selvfølgelig ingen mulighed for at vide, om det endda fungerede lige så medmindre du så vores live-udsendelse. Ideelt set ville der være et webcam oprettet og indlejret på kontrol siden. Som en teknisk demo synes jeg dog, det er ret fantastisk; Jeg håber, at du kan se potentialet for fjernbetjening stort set noget over internettet via en Arduino. Justin foreslog, at vi overlade kontrollen over min ovn ; Jeg afviste. Har du nogle interessante projekter, som du mener kan hjælpe med?