Project: LED-strip met RPi

In deze toepassing vervang je de klassieke IR-module, die bij de meeste RGB LED-strips hoort, door een raspberry pi.
De RPi wordt via een tussenschakeling verbonden met de LED-strip. De klassieke afstandsbediening ga je vervangen door een app en door een website die je eveneens op de RPi host.
Zodra de RPi met het internet verbonden is, kan je de LED’s wereldwijd bedienen.

1. Maak in de map LesCordova een nieuw project aan:
   

   $ cordova create PIstrip be.uwnaam.pi_strip "Pi Strip"
   $ cd PIstrip
   $ cordova platform add browser android

2. Installeer de plug-in waarmee je een schudbeweging kan detecteren.
   

   $ cordova plugin add cordova-plugin-shake

PubNub

Voor de communicatie tussen de app en de RPi gebruik je PubNub. PubNub is een realtime Data Stream Network (DSN) en een realtime infrastructure-as-a-service (IaaS) voor web-, mobiele en IoT-toepassingen. Met een gratis account kan je per maand tot 100 devices connecteren en tot 1M berichten zenden/ontvangen.

1. Maak een (gratis) account aan op PubNub
2. Maak een nieuwe app aan, bijvoorbeeld PI-strip.
3. Open de app PI-strip en klik op CREATE NEW KEYSET. Geef de keyset een naam, bijvoorbeeld PIstrip.
   (De publish key en subscribe key heb je straks in je eigen app nodig.)
   
4. Open PIstrip. (Klik op FREE.)
5. Enable STORAGE & PLAYBACK en bewaar de wijzigingen.
   
6. Klik links onderaan het menu op DEBUG CONSOLE.
7. Vul PIstrip in onder Default Channel en klik op ADD CLIENT.
   De naam van het kanaal (PIstrip) heb je straks ook in je eigen app nodig.
   

In de console kan je alle berichten volgen. Je kan hier ook een nieuw bericht verzenden. Voor deze toepassing zenden we een object met als key het woord color en als value de HEX-kleurwaarde zonder hekje. Om de LED-strip groen te laten oplichten zend je: {"color":"00FF00"}.

De hardware

Wil je deze opstelling thuis bouwen, volg dan bijbehorende tutorial.
In de les hoef je enkel de app te maken. Deze kan je dan uittesten op de LED-strip die in het labo aanwezig is.

Inhoud van de website

1. Wis de volledige inhoud van de www-folder en vervang deze door de bestanden uit dit zip-bestand.
2. Bestudeer de bestanden.

index.html

1. Bovenaan de pagina staat een fixed navbar.
2. De fixed action button div#vibrate zal straks een willekeurige kleur genereren.
3. De tweede fixed action button div#lightOff dooft de LED-strip.
   (Deze button wordt via CSS onderaan links in het scherm geplaatst.)
4. In div#colorBlock komen straks enkele voorgedefinieerde kleuren te staan. Deze links worden vanuit de JavaScript-code gegenereerd.
5. De web color picker is via de class .jscolor verbonden met button#colorWheel.
   Zodra je een kleur selecteert en buiten het kleurpalet klikt, komt het onChange-event in actie. De achtergrondkleur van de button wijzigt en de tekst wordt vervangen door de gekozen HEX-waarde.
   Let op: het jscolor-script kan je niet via jQuery coderen. Alles gebeurt volledig in "pure" JavaScript!

js/app.js

Deze pagina is volledig klaar. Hier hoef je niets meer aan te wijzigen.

1. Lijn 29
   De array colors bevat een reeks voorgedefinieerde kleuren. Elke string binnen de array bestaat uit twee delen. Voor de spatie staat de HEX-kleur die je publiceert op PubNub en na de spatie een rgba-kleur die de rand van de buttons accentueert.
2. Lijn 37
   Doorloop alle elementen uit de array en splits de string op een spatie. De variabele c is terug een array en deze bevat twee elementen.
   Voor de eerste string uit de vierde rij wordt dit: c[0] = 2A0000 en c[1] = 255,0,0,.3.
   Genereer vervolgens voor elke kleur een span-tag en verwerk hierin de twee kleuren. Bijvoorbeeld:
   <span class="..." data-rgb="2A0000" style="border-bottom-color: rgba(255,0,0,.3)">...</span>
   De span-tags worden één voor één aan div#colorBlock toegevoegd. Merk op dat je aan de span-tag enkel de border-bottom-color meegeeft. De twee overige eigenschappen ( border-bottom-width en border-bottom-style) zijn voor alle buttons hetzelfde. Deze vind je terug in de CSS-code op de indexpagina.
3. Lijn 4
   Telkens je op #vibrate klikt, wordt een willekeurige kleur gegenereerd en vervolgens via PubNub gepubliceerd.
4. Lijn 9
   Zodra je een kleur in de web color picker selecteert, wordt de HEX-waarde opgevraagd en gepubliceerd.
5. Lijn 14
   Klik je op één van de voorgedefinieerde kleuren, lees dan de waarde van data-rgb uit en publiceer deze.
6. Lijn 19
   Je kan de LED-stript doven door de waarde voor zwart (000000) te publiceren.

js/shake.js

Met de plug-in cordova-plugin-shake kan je een schudbeweging detecteren. De gevoeligheid staat ingesteld op 40. Elke gedetecteerde beweging roept de functie shuffle() op en publiceert deze waarde op PubNub.

Voorlopig genereert shuffle() enkel een rode kleur.

1. Vervang de code van shuffle() door:

Genereer een random HEX-waarde voor rgb. De laagts HEX-waarde is 000000, de hoogte HEX-waarde is FFFFFF. Om al te felle kleuren te vermijden, ga je niet het volledig spectrum gebruiken, maar ga je de maximale waarde beperken tot 6F6F6F.

Helemaal bovenaan de pagina vind je twee arrays (digit1 en digit2). Binnen de for-lus ga je drie maal een willekeurige waarde uit beide arrays plukken en deze aan de string rgb plakken.

Hiervoor gebruik je enkele wiskundige functies van JavaScript. Math.random() genereert een getal tussen 0 en 0.999.... Vermenigvuldig dit getal nu met de lengte van de array. Voor digit2 geeft dit een getal tussen 0 en 15,999.... Vervolgens ga je dit getal met Math.floor naar beneden afronden. Je houdt nu nog enkel een geheel getal (0, 1, ... of 15) over. Stel dat je op getal 11 uit komt, dan is digit2[11] gelijk aan B.

js/pubnub.js

De init-functie bevat de volledige configuratie van PubNub.

1. PubNub initialisatie:
   Vervang op lijn 3 en 4 myPublishKey en mySubscribeKey door de API-keys die bij het project horen.
2. Lijn 14: Listeners toevoegen:
   Voor onze toepassing hebben we enkel de message nodig. Het verzonden object staat in m.message. Haal vervolgens de kleur op (m.message.color) en geef de waarde door naar de functie _changeColorWheel(rgb).
3. Lijn 23:
   Luister naar wijzigingen op het kanaal 'PIstrip'
4. Lijn 27: Geschiedenis opvragen:
   Enkel bij het starten van de app wordt deze functie (lijn 31) eenmalig uitgevoerd. Uit de response halen we de laatst gekozen kleur op en sturen deze naar _changeColorWheel(rgb). Dit is vooral handig als meerdere personen dezelfde app gebruiken. Zo blijven alle apps volledig synchroon met elkaar.

Verder bevat het script nog twee functies.

1. Lijn 39: Kleur publiceren:
   De functie publish(rgb) wordt bij elke kleurwijziging opgeroepen. De functie publiceert een zeer eenvoudig object op het kanaal PIstrip. Stel dat je bijvoorbeeld blauw selecteert, dan wordt het gepubliceerd object {"color":"0000FF"}. Tip: je kan alle wijzingen opvolgen in de PubNub console.
2. Lijn 48:
   Deze functie wijzigt de laatst gekozen kleur en de tekst in button#colorWheel. Merk op dat we via try-catch werken. Het kleurenpalet van jscolor bevat niet alle 16M kleurcombinaties die je met RGB kan vormen. Stel dat je een random kleur genereert die niet in het palet voorkomt, dan krijg je op lijn 52 een fout. Catch zal de fout dan opvangen. Werk je niet met catch, dan "hangt" de toepassing en zal je de app volledig moeten herstarten.