Smartmirror

The Idea:

Voor mijn project in mijn eerste jaar NMCT(New Media and Communication Technology) mocht ik mijn eigen projectkeuze maken. Die keuze was, na wat nadenken, toch redelijk snel gemaakt. Ik keek immers toevallig in de spiegel en dacht wat als ik mijn spiegel nu eens dat tikeltje slimmer zou kunnen maken. En zo kwam ik dus op het idee van de smartmirror. Ik kon beginnen nadenken over de belangrijkste materialen, die ik nodig zou hebben en kwam tot volgend lijstje: een monitor, een Raspberry Pi 3, een spiegel, hout en vooral veel tijd.

The mirror:

Een gewone spiegel zou natuurlijk totaal niet werken in dit geval. Ik had immers een spiegel nodig die transparant is. Of om het wat duidelijker te stellen, ik had een spiegel nodig die, als hij voor de monitor wordt geplaatst en het scherm van de monitor zwart blijft op een echte spiegel lijkt en die als de monitor oplicht gewoon op glas lijkt.

Wat ik dus nodig had, was een acrylaat doorkijkspiegel. Het was toch wel even zoeken voordat ik in België een dergelijke doorkijkspiegel vond tegen een betaalbare prijs en op maat gesneden.

Step 1: Benodigdheden

Materialen:

- LED backlight monitor Medion (23,8") 60,5cm

- Plexiglas doorkijkspiegel -3mm 540x320mm

(Voor de aankoop van deze spiegel raad ik de website Plexiglasstunter.nl aan.)

- Raspberry Pi 3

- HDMI-kabel

- 2 x timmerhout 115x20cm 18mm

(Voor het gemak laat je best het hout in de winkel al op maat snijden. Zie Part4: De kader)

- 2 x Breadboard

- Jumperkabels

- Raspberry Pi uitbreidingskaart

- 40 pin Gpio kabel

- 3 x 220Ω weerstand

- Een ledje (kleur mag je zelf kiezen)

- Temperatuursensor Ds18B20

- Drukknop of microfoon

- Toetsenbord en muis kan in sommige gevallen wel handig zijn.

- Micro Usb kabel voor Raspberry Pi voeding

- Dubbelzijdige plakband

- Afdicht isolatie

- 12 vijzen

Voor prijzen en totaalkosten zie BOM file:

Step 2: De Monitor

Monitor:

Na het zoeken van de juiste spiegel, moest ik natuurlijk ook de monitor vinden die bij mijn project paste. Voordat je een monitor koopt, moet je er wel op letten dat de monitor aan bepaalde voorwaarden voldoet. Zo mogen de aansluitingen voor de voeding en hdmi niet aan de achterkant zitten maar dienen ze zich aan de onderkant te bevinden. De aan/uit knop moet zich rechts onderaan bevinden zodat deze makkelijk te bereiken is als de monitor in het kader zit. Ik zocht ook een monitor die niet te klein is of te groot was, dus 23,8" was perfect in dit geval.

Vooraleer het hout en de spiegel op maat te laten snijden, moest eerst de breedte en de lengte van de monitor opgemeten worden, in mijn geval was dit dus 54,2 x 32,4 cm. Dus om de spiegel te laten zagen, heb ik dit afgerond naar 54 x 32 cm omdat de spiegel zeker niet te groot mocht zijn zodat hij in mijn kader zou passen. Voor het hout heb ik gewoon 54,2 x 32,4 cm genomen.

Step 3: Het Kader

Kader:

Voor het kader hebben we natuurlijk hout nodig! Ik kocht 2 houten planken van 115 cm lang en 20 cm breed, ik gebruikte 1 plank voor het houten frame en 1 plank om de voorkant te maken. De planken zijn 1,8 cm dik dus daar moet je zeker rekening mee houden! Hierboven zien jullie een schema met de instructies voor het zagen van de planken en voor het monteren van het kader.

Nadat je het kader hebt afgewerkt kun je er het spiegelglas insteken. Daarvoor gebruiken we dubbelzijdige plakband, want als je de spiegel erin plakt met lijm krijg je hem er niet meer uit en kan je hem niet meer hergebruiken. Dus je plakt aan alle 4 de zijden aan de binnenkant de dubbelzijdige plakband. Nu kan je rustig je spiegel in het kader schuiven en vastplakken, niet vergeten zeker eens goed aan te drukken.

Om de monitor te beschermen tegen krassen door tegen het spiegelglas te schuiven, heb ik afdichtisolatie langs alle 4 de zijden van het spiegelglas geplakt, dit is een soort van mouse die je scherm zal beschermen tegen krassen.

Ik heb ook nog aan de linkerzijde een gat geboord zodat ik de monitor kan aan en uit zetten zonder hem eruit te halen.

Nu moeten we ook nog iets maken om de monitor vast te zetten in het kader. Met de rest van het hout zaag je een plank die breed genoeg is om tussen je kader te passen. Ik heb ook nog afdichtisolatie op die plank gekleefd om de achterkant ook wat te beschermen. Dan heb ik de plank tegen de monitor gezet, goed aangedrukt en dan langs de 2 zijkanten van de monitor elk 2 vijzen ingeschroefd om de plank vast te zetten.

Nu zit je monitor vast en je spiegel op zijn plaats.

Step 4: Electronica

Voor de electronica heb ik gekozen voor een temperatuursensor omdat ik zo de huistemperatuur kan tonen. Ik had eerst ervoor gekozen om een geluidsensor te gebruiken om te navigeren door mijn spiegel maar ben op het einde door verschillende problemen in de hardware en de code toch nog veranderd naar een push button. Dit geeft me dan ook als voordeel dat alles kan werken op 3V3. Ik gebruik ook een ledje als een visuele manier om te tonen dat de spiegel aanstaat langs de zijkant.

Hierboven vindt u de aansluit schema's voor de verbindingen. Om alles op een makkelijke manier te verbinden gebruik ik een breadboard en een Raspberry Pi uitbreidingskaart om mijn Gpio pinnen op mijn breadboard te krijgen. Ik heb voor mijn drukknop een 2de breadboard gebruikt zodat ik deze aan de zijkant van mijn kader kan bevestigen bij het gat waar je de monitor kan aanzetten. Hier boven is een voorbeeld te zien van de werkelijke realisatie. Maar we moeten dit natuurlijk nog inbouwen in onze spiegel. Hiervoor heb ik gewoon ducktape, snelspanners gebruikt omdat dit gemakkelijk is om het er echteraf ook weer uit te halen en te hergebruiken. Ik heb ook een stekkerdoos genomen en eringewerkt zodat ik maar 1 voedingskabel in het stopcontact hoef te steken in plaats van 2 kabels. hierboven zie je het resultaat.

Step 5: Instellen Van De Raspberry Pi

- Zet eerst de nieuwste versie van Rasbian op je raspberry pi.

https://www.raspberrypi.org/downloads/raspbian/

- Navigeer dan naar sudo raspi-config, dan kies je voor interfacing options, daar kies je voor 1-wire, druk op finish en doe daarna sudo reboot.

- Stel nu zeker de wifi in op je raspberry pi, als je op de grafische schil zit, kan je gewoon rechtsbovenaan wifi toevoegen. Als je via command line je wifi wilt toevoegen klik dan op de onderstaande link.

https://www.raspberrypi.org/documentation/configur...

- Nu moeten we het scherm draaien naar portrait in plaats van landscape door het scherm 90 graden te draaien. Ga naar sudo nano /boot/config.txt, en voeg deze regel toe: display_rotate = 3 doe dan ctrl+x druk op y en dan enter.

- Voor de webserver heb je weinig of geen installatie nodig, dit komt nog eens terug in het hoofdstuk code.

- We moeten ook nog een KIOSK mode instellen zodat als de pi opstart chromium meteen opstart in fullscreen mode. Pas dit bestand aan: sudo nano /etc/xdg/lxsession/LXDE-pi/autostart en voeg er volgende regels aan toe:

@xscreensaver -no-splash

@xset s off

@xset -dpms

@xset s noblank

@lxterminal

@chromium --kiosk http://localhost/8080

dit zorgt er ook voor dat je scherm na een tijdje niet zwart wordt door de screensaver. Nu sla je deze file op, doe ctrl-x druk dan op y en dan enter en herstart de pi: sudo reboot

Nu gaan we over naar de interface!

Step 6: Maken Van De Interface

Dus ik heb tot nu toe al de juiste spiegel, de juiste monitor, een kader gebouwd, de electronica geinstalleerd en de raspberry pi geconfigureerd. Nu is het tijd voor de interface.

Voor het maken van de interface gebruik ik een webserver Flask.

Benodigdheden:

Toen ik aan dit project begon, wist ik dat je niet met de spiegel in interactie zou kunnen gaan. Want dat zouden vlekken en plekken worden op het spiegelglas. Daarom kun je kiezen tussen een knop of een microfoon om de interface te bedienen. De spiegel wordt een passieve vorm van informatie.

Maar het belangrijkste is dat de spiegel natuurlijk ook gebruikt kan worden als spiegel. Ik heb er dan ook voor gekozen om met verschillende pagina's te werken voor de interface zodat de basisfunctie van de spiegel namelijk naar jezelf kijken behouden blijft.

Ik heb wat onderzoek gedaan en heb de belangrijkste items, die ik op mijn spiegel wou weergeven, opgezocht:

- het weer

- een klok

- het nieuws van de dag

- agenda

- de datum.

Basis setup:

De interface is geen volledige applicatie maar is gewoon een fullscreen website die bestaat uit html, css en javascript. Dit heeft ook als voordeel dat ik de code gewoon kon testen op mijn laptop om later dan te uploaden naar de pi. Ik heb ook gebruik gemaakt van kleine scriptjes:

-datum.js

om de datum op te halen in de vorm van dag + dag in cijfer + maand + jaartal

-locatie.js

om de stad op te halen waar je je bevindt via google maps.

Ik heb ook gebruikt gemaakt van bootstrap code, deze code is gebruikt voor het maken van een carousel.

Design:

Voor het design ben ik begonnen met wireframes te tekenen, ik zocht naar een eenvoudig design dat er netjes uitziet. Voor de spiegel was het belangrijk om te werken met een zwarte achtergrond met woorden, tekens, cijfers, zinnen in het wit zodat je deze duidelijk kan zien. Ik heb gebruik gemaakt van de font Roboto omdat dit een propere en strakke font is. Ik heb enkel soms wat kleuren gebruikt om dingen van elkaar te kunnen onderscheiden.

API's:

Om data te verkrijgen voor mijn weerbericht en voor mijn nieuws feed heb ik gebruik gemaakt van API's om deze data op te vragen.

-Wunderground API

Voor het weerbericht heb ik gebruik gemaakt van de Wunderground API dit is een excelente api om het weer bericht op te vragen, de api laat je toe het actuele weer op te vragen door middel van je locatie. Je kan dit 10 keer per minuut opvragen, wil je meer dan moet je een abbonement kopen. Hier is een link naar de website: https://www.wunderground.com/

-News API

Om het nieuws op te halen, heb ik gebruik gemaakt van de website: https://newsapi.org/ deze website biedt verschillende api's aan van verschillende nieuwsbronnen. Ik heb voor The New York Times gekozen omdat er geen vlaamse nieuws api's zijn. Deze api is volledig gratis en geeft 10 nieuwsartikels weer in je response.

Om deze API's in mijn website te krijgen, had ik natuurlijk javascript nodig om de API te verwerken en door te sturen naar mijn html file.

Coderen:

Mijn eerste opdracht bij het programmeren was om in flask mijn routes te schrijven zodat mijn webserver zou werken daarna heb ik een base template aangemaakt zodat ik niet elke keer de helft opnieuw moest schrijven. In mijn basetemplate zaten dan de tijd, datum, locatie, weer, kamertemperatuur en mijn boodschappen, wat er in het midden van de spiegel moest verschijnen, heb ik in aparte templates gestoken die dan gebruik maken van de basetemplate. Ik had natuurlijk ook al plaats voorzien in mijn code om de temperatuur van mijn sensor te displayen.

Op de eerste pagina had ik gewoon het midden leeg gelaten zodat deze pagina kan gebruikt worden als echte spiegel. Daarna heb ik een pagina aangemaakt voor het nieuwsbericht, Dit heb ik in een bootstrap carousel gestoken zodat alles automatisch verschuift. Daarna heb ik gewoon een tabel gemaakt voor mijn agendapunten, de agenda is niet automatisch maar gewoon een voorbeeld, je bent natuurlijk vrij om aanpassingen aan te brengen en het wel automatisch te maken. Ten slotte heb ik voor mijn fotoboek een bootstrap carousel gebruikt zodat de foto's automatisch verschuiven.

Problemen:

Mijn eerste probleem was dat sommige delen van de interface niet automatisch vernieuwden. Daar moest ik dus een oplossing voor vinden. Daarom heb ik mijn volledige HTML pagina laten refreshen na een bepaalde tijd.

Step 7: Genormaliseerde Database

Voor dit project heb ik ook geprobeerd een genormaliseerde database te maken. Dit kan je natuurlijk ook toevoegen aan je project. Hierboven zie je het schema dat je eventueel kan aanpassen naar eigen behoefte.

We moeten nog eerst My sql op de Raspberry pi zetten:

sudo apt-get install mysql-server

sudo apt-get install mysql-client

sudo apt-get install python3-mysql.connector

Als dat klaar is, typ je:

mysql -uroot -p

Wachtwoord = root

Als je wil, kan je nu je wachtwoord wijzigen:

SET PASSWORD FOR 'root@localhost' = PASSWORD('NewPass')

Nu moet je 2 nieuwe gebruikers aanmaken:

CREATE USER 'finley'@'localhost' IDENTIFIED BY 'wachtwoord';
GRANT ALL PRIVILEGES ON *.* TO 'finley'@'localhost' WITH GRANT OPTION;

CREATE USER 'finley'@'%' IDENTIFIED BY 'wachtwoord';
GRANT ALL PRIVILEGES ON *.* TO 'finley'@'%' WITH GRANT OPTION;

Daarna maak je een database aan:

CREATE DATABASE ENMDatabase;

om weg te gaan uit mysql doe:

quit

Daarna kan je met programma's als Pycharm connecteren via een ethernetkabel en connectie maken met je database. Zo kan je dan tabellen aanmaken en er data instoppen.

Dan moet je in de map van je project de file dbconn.py(zie part9: de code) aanpassen en je gegevens invullen om met je database connectie te leggen. Opgelet: dbconn.py is niet afgewerkt en werkt niet. Als de database werkt kan je er je welkomsboodschappen in opslaan of je temperatuursensor waardes in opslaan, je kan er ook de links naar de afbeeldingen in steken.

Momenteel werkt de database niet, maar de spiegel werkt momenteel ook zonder.

Step 8: Electronica Code

Temperatuursensor:

Voor mijn temperatuursensor gebruik ik de 1-wire bus die op de raspberry pi zit. Als je meer wil weten over de 1-wire bus: https://en.wikipedia.org/wiki/1-Wire. Het 1-wire protocol zit al automatisch op de Gpio 4 pin dus deze moet je niet meegeven in de code maar bij de code hierboven moet je bij sensor file jouw id code meegeven.

Zo vind je de id code:

ga naar cd /sys/bus/w1/devices/w1_bus_master1/

doe dan ls

in deze map vindt je de 1-wire slaves terug. Bij mij is dit 28-80000026eed3.

Geef dan bij sesnor file dit mee sys/bus/w1/devices/jouwidcode/w1_slave.

Om de temperatuur in mijn webserver te krijgen, importeer ik mijn python file in mijn flaskserver en roep ik de functie read_temp() op deze bevat mijn sensorwaarde. Ik geef dan de temperatuur waardes mee zodat ik die kan oproepen in mijn html template.

Drukknop:

Voor mijn drukknop heb ik een stukje code geschreven zodat elke keer als ik druk mijn webserver naar de volgende pagina overgaat, omdat ik 4 webpagina's heb, heb ik een limiet gezet op 4 keer drukken en dan keert hij terug naar de homepagina en kun je weer opnieuw beginnen.

Step 9: Download Code

https://github.com/joachimbauters/project1__Smartm...

Klik op de bovenstaande link om de code terug te vinden. Je moet met de Wi-Fi verbonden zijn.

Je moet eerst Git installeren. Dit is een programma dat er voor zorgt dat je de code rechtstreeks van Github kan downloaden. Je kan dit doen door de terminal te openen en de volgende commando's te typen:

$ sudo yum install git-all

Als dat eenmaal gedaan is kan je de code van Github downloaden:

$ git clone [e-mail]:joachimbauters/project1__Smartmirror.git

Navigeer dan naar de code:

$ cd project1__Smartmirror

Haal het bestand drukknop.py eruit en plaats het op /home/pi map

$ mv /home/pi/project1__Smartmirror/drukknop.py /home/pi/

Vraag daarna je eigen Api codes aan en vervang de api code's in de map static/js/ en dan in news.js en in weer.js hierboven is een voorbeeld te zien van hoe de api link eruit ziet en welk gedeelte je moet vervangen!

Step 10: Afwerken En Testen

Nu we alle onderdelen hebben, moeten we natuurlijk nog alles automatisch laten opstarten. Hievoor zullen we onze scripts toevoegen aan het opstart proces. Ik heb hieronder een pdf gezet van hoe je ervoor zorgt dat je je Flask server laten opstarten met 1 command die we dan later bij het opstarten automatisch kunnen laten uitvoeren.

Ik demonstreer het hier even stap voor stap. Maak een nieuw file aan:

sudo nano /etc/init.d/project1__Smartmirror.py

Typ dit script in het nieuwe file:

case "$1" in
start)

echo "Starting project1__Smartmirror"

# applicatie latten runnen

# hieronder de mappenstructuur opgeven naar je app

python /home/pi/uwFileWaarAllesInStaat/project1_Smartmirror.py

;;

stop)

echo "Stopping project1__Smartmirror"

# kill applicatie

killall project1_Smartmirror.py

;;

*)

echo "Usage: /etc/init.d/project1_Smartmirror {start|stop}"

exit 1

;;

esac

exit 0

Na het opslaan, zorg je ervoor dat het script kan runnen bij de opstart door het volgende
te runnen:

sudo chmod 755 /etc/init.d/project1_Smartmirror

sudo update-rc.d project1_Smartmirror defaults

Hierna kan je dus gewoon je flask server opstarten met 1 command en stoppen met 1 command:

sudo /etc/init.d/project1_Smartmirror start

sudo /etc/init.d/project1_Smartmirror stop

Nu moeten we nog alles laten opstarten bij het opstarten van de pi:

Ga naar:

sudo nano /etc/rc.local

Scroll helemaal naar onderaan en typ voor exit0 dit erbij:

sleep10&

python drukknop.py&

sudo /etc/init.d/project1_Smartmirror start&

Vergeet zeker op het einde de & niet!

Als alles nu goed verlopen is zal bij het opnieuw opstarten van je Raspberry Pi je pi chromium meteen opstarten en in kiosk mode gaan.(zie stap5: instellen van de Raspberry Pi) en meteen naar je homepagina van je flaskserver gaan!

Step 11: Stappenplan, Hoe Werk Je Ermee?

hoe bedien je de spiegel?

Heel eenvoudig:

1. Steek de witte stekker van de stekkerdoos in het stopcontact.

2. Laat de Raspberry pi op zijn gemak opstarten tot hij automatisch op de homepagina van de flaskserver terecht komt.

3. Op de linkerzijkant zit er een rode knop, elke keer als je daar op drukt verschuif je 1 van de 4 pagina's

4. Bij het drukken heb geduld tot dat de webpagina volledig geladen is, het kan soms even duren.

5.Als je bij de 4 de pagina terechtkomt en je drukt nogmaals om terug naar het begin te gaan, zal je merken dat er niets gebeurt en dat het lichtje(Rode led) uitgaat. Dat betekent dat je nog eens moet drukken om opnieuw te beginnen.