{"id":11050,"date":"2016-06-11T10:07:57","date_gmt":"2016-06-11T08:07:57","guid":{"rendered":"http:\/\/newth.net\/eirik\/?p=11050"},"modified":"2020-01-01T12:53:21","modified_gmt":"2020-01-01T12:53:21","slug":"infoskjerm","status":"publish","type":"post","link":"https:\/\/www.newth.net\/eirik\/2016\/06\/11\/infoskjerm\/","title":{"rendered":"Lag en infotavle for familien med Raspberry Pi"},"content":{"rendered":"

De siste \u00e5rene er “infoscreen”-prosjekter blitt popul\u00e6re blant makere\/selvbyggere. Kort fortalt dreier det seg om en hjemmeversjon av slike\u00a0informasjonstavler du finner i det offentlige rom, som f.eks. p\u00e5\u00a0flyplasser og togstasjoner. Infotavler er ikke ment \u00e5 stirres p\u00e5 lenge, men skal isteden levere kjapp og nyttig informasjon for folk p\u00e5 farten.
\nV\u00e5r familie er som s\u00e5 mange andre:\u00a0Hver morgen mellom er det travel aktivitet, mens vi forbereder oss p\u00e5 \u00e5 dra avg\u00e5rde p\u00e5 skole og jobb. Etter \u00e5 ha g\u00e5tt noen runder kom vi til at det som trengtes var oppdaterte v\u00e6rdata, rutetider for kollektivtransport og en oversikt over hva alle i familien skulle gj\u00f8re i l\u00f8pet av dagen.<\/p>\n

Alt dette er informasjon som leveres via nett, og snarveien til en fungerende infotavle m\u00e5tte dermed bli en webside med\u00a0data fra kilder som yr.no, Google Calendar og ruter.no.\u00a0De fleste infoskjerm-prosjekter har skjermen i portrettmodus, bl.a. fordi det gj\u00f8r det lettere \u00e5 presentere webdata p\u00e5 en pen m\u00e5te. Men da jeg hadde et tilleggskrav til denne infotavlen (mer om det i en senere posting), valgte jeg \u00e5 g\u00e5 for landskapsmodus.<\/p>\n

\"IMG_20160611_101015\"

Ettkortsmaskinen Raspberry Pi 3 (Linus viser st\u00f8rrelsen) koster litt over 400 i skrivende stund if\u00f8lge prisjakt.no. I tillegg trenger du mikro-SD-kort, skjerm, tastatur og mus.<\/em><\/p><\/div>\n

Datamaskin og operativsystem<\/strong>
\nJeg har valgt \u00e5 kj\u00f8re\u00a0infoskjermen fra en Raspberry Pi. Pi-maskinene brukes mye\u00a0til slike oppgaver, av gode grunner. Raspberry Pi er bitte liten og billig (Pi 3 med wifi og Bluetooth koster 499), har ingen bevegelige deler (fordel for prosjekter som skal st\u00e5 p\u00e5 hele tiden), bruker sv\u00e6rt lite energi (kj\u00f8res med en 5V mobillader), baserer seg p\u00e5 gratis, \u00e5pen kildekode (som\u00a0Linux) og har et stort milj\u00f8 av entusiastiske brukere. Det er nesten alltid noen der ute som har hatt samme problem som deg, for \u00e5 si det slik.<\/p>\n

Bare s\u00e5 det er sagt: Raspberry Pi 3 er ikke en veldig kraftig datamaskin, og om du pr\u00f8ver \u00e5 bruke den som erstatning for en vanlig PC vil du bli skuffet. Men til prosjekter som dette, som i praksis handler om \u00e5 utf\u00f8re \u00e9n eller to relativt lite krevende oppgaver av gangen, passerer Pi helt perfekt.\u00a0I tillegg til selve Pi-enheten, trenger du et mikro-SD-kort p\u00e5 minst 5GB, en HDMI-kabel og tastatur og mus.<\/p>\n

Pi st\u00f8tter ikke bare Linux (det fins bl.a. en tilpasset\u00a0utgave av Windows 10), men\u00a0her gjorde jeg som flertallet av brukere og installerte\u00a0Rasbian<\/a>\u00a0(nok en gang fordi det \u00f8kte sjansen for at noen andre hadde l\u00f8st eventuelle problemer f\u00f8r). Siste versjon av Raspbian finner du her<\/a>, sammen med instruksjoner for hvordan du installerer<\/a> systemet p\u00e5 mikro-SD.<\/p>\n

Etter at\u00a0Raspbian er installert puttes SD-kortet i Pien, s\u00e5 kobles skjerm, tastatur\/mus og str\u00f8mforsyning til.\u00a0Etter oppstart kobler man seg p\u00e5 wifi-nettverket (eller kablet nettverk – Pi har ogs\u00e5 en ethernetport), og deretter m\u00e5 systemet klargj\u00f8res for bruk. N\u00e5r det grafiske grensesnittet dukker opp (hvit skjerm med et stort bringeb\u00e6r), klikker du p\u00e5 den lille svarte ruten p\u00e5 verkt\u00f8ylinjen \u00f8verst, som \u00e5pner et terminalvindu. I dette terminalvinduet skriver du<\/p>\n

setxkbmap no\nsudo raspi-config<\/pre>\n
Etter hver linje over gj\u00f8r du linjeskift. Den f\u00f8rste kommandoen gir deg norsk tastatur, den neste starter opp et konfigurasjonsvindu der du gj\u00f8r noen viktige tilpasninger av systemet f\u00f8r du kj\u00f8rer. Mer om det her<\/a>.<\/p>\n
\"2016-06-11-180903_1680x1050_scrot
Dette er hva du f\u00e5r n\u00e5r du gj\u00f8r sudo raspi-config i terminalvindu. Valg 1, “Expand user file system”, lar systemet utnytte hele SD-brikken og er strengt\u00a0n\u00f8dvendig. Velg, lagre og reboot etterp\u00e5.<\/em><\/p><\/div>\n
\"2016-06-11-180933_1680x1050_scrot
Under valg 5 p\u00e5 hovedmenyen (“Internationalisation Options”) finner du denne menyen. Change Locale og Change Timezone er viktig her.<\/em><\/p><\/div>\n
\"2016-06-11-181014_1680x1050_scrot
Locale gir deg meny p\u00e5 (ny)norsk, og s\u00f8rger ogs\u00e5 f\u00e5r at andre landsspesifikke settinger gj\u00f8res). Disse to filene m\u00e5 velges.<\/em><\/p><\/div>\n
\"2016-06-11-181102_1680x1050_scrot
Klargj\u00f8ring for SSH (under valg 9 p\u00e5 hovedmenyen) gj\u00f8res mens du allerede er igang med oppsettet.<\/em><\/p><\/div>\n
\"2016-06-11-181115_1680x1050_scrot
Ogs\u00e5 kjekt \u00e5 vite: Under samme meny som SSH finner du (under valg 8) disse lydalternativene. Skjermen min har 3,5 mm inngang, og valg 1 her ga meg lyd.<\/em><\/p><\/div>\n
Du velger norsk grensesnitt under menyvalg 4, “Internationalisation Options”, og s\u00e5 “Locale”. Dette vil gi deg nynorsk meny og s\u00f8rge for at f.eks. ukestart f\u00f8lger norsk standard og ikke amerikansk men dessverre ikke endre tastaturet til norsk. Det viser seg \u00e5 v\u00e6re litt kr\u00f8kkete \u00e5 f\u00e5 Rasbian til \u00e5 “huske” akkurat dette, s\u00e5 v\u00e6r forberedt p\u00e5 \u00e5 bruke den f\u00f8rste kommandoen over noen ganger under oppsett av systemet.<\/p>\n
Jeg vil ellers sterkt anbefale at du velger \u00e5 skru p\u00e5 SSH-tilgang (menyvalg 8, Advanced Options, og s\u00e5 4) med en gang, da det vil gj\u00f8re det lett \u00e5 fjernlogge seg p\u00e5 Pien senere – veldig kjekt n\u00e5r systemet skal administreres.\u00a0Ideen her er jo at selve datamaskinen skal gjemmes bak en skjerm og aksesseres s\u00e5 lite som mulig med fysisk tastatur.<\/p>\n
Deretter skriver du inn kommandoene nedenfor. Det vil ta litt tid \u00e5 kj\u00f8re hver og en av dem, og noen av dem krever at du bekrefter med “Y” eller “J”. Her er det bare \u00e5 f\u00f8lge med.<\/p>\n
sudo rpi-update<\/pre>\n
sudo apt-get update<\/pre>\n
sudo apt-get dist-upgrade<\/pre>\n
sudo apt-get install iceweasel<\/pre>\n
N\u00e5r alt dette er gjort, er systemet klart til bruk. Kj\u00f8r en reboot for \u00e5 v\u00e6re sikker p\u00e5 at alt er installert og kj\u00f8rer som det skal, og finn fram din dedikerte<\/p>\n
\"Til
Til et prosjekt som dette passer en Fujitsu Siemens-skjerm (et like utdatert merke som Packard Bell!) helt utmerket. Takk for bidraget, Rune<\/a>!<\/em><\/p><\/div>\n
Skjerm<\/strong>
\nMan kan i praksis velge en hvilken som helst skjerm med HDMI- eller DVI-inngang (i det siste tilfellet trenger du en HDMI\/DVI-overgang – jeg bruker en slik uten problemer), men med tanke p\u00e5 dette prosjektets ganske begrensede virkefelt bestemte jeg meg for \u00e5 gjenbruke en eldre skjerm jeg fikk av en venn. I de tusen boder st\u00e5r mang en skjerm som har havnet p\u00e5 historiens skraphaug pga for lav oppl\u00f8sning, men som alts\u00e5 er mer enn gode nok til \u00e5 gj\u00f8re nytte i en situasjon som dette. Ikke bare sparer man penger, men milj\u00f8et takker deg ogs\u00e5. \ud83d\ude42<\/p>\n
Skru av dvalefunksjon<\/strong>
\nRaspbian setter skjermen automatisk i dvale etter noen minutter – den m\u00e5 skrus av siden du ikke vil ha mus eller tastatur \u00e5 trykke p\u00e5 for \u00e5 vekke skjermen igjen. Den enkle grafiske menyen har ingen skru-av-dvale-kommando, s\u00e5 her m\u00e5 du igjen \u00e5pne et terminalvindu. Det enkleste er \u00e5 installere et skjermsparerprogram og skru av dvale i det. I terminalvinduet skriver du:<\/p>\n
sudo apt-get install xscreensaver
\n<\/code>
\nDeretter kj\u00f8rer du Xscreensaver fra menyen oppe til venstre p\u00e5 Rasbian-skjermen.\u00a0Litt mindre intuitivt, men ogs\u00e5 mindre plass- og kapasitetskrevende p\u00e5 den lille Raspberryen, er \u00e5 \u00e5pne en konfigurasjonsfil i teksteditoren nano p\u00e5 denne m\u00e5ten i terminalvinduet (du skriver sudo foran nano for \u00e5 f\u00e5 fulle administratorrettigheter, da dette er en systemfil):<\/p>\n
sudo nano \/etc\/lightdm\/lightdm.conf
\n<\/code>
\nBeveg deg nedover i dokumentet til du kommer til et felt med tittelen\u00a0[SeatDefaults]<\/em>. Her finner du linjen som begynner med xserver-command=X<\/em> og f\u00f8yer til f\u00f8lgende:<\/p>\n
xserver-command=X -s 0 dpms
\n<\/code>
\nDu lagrer dokumentet ved \u00e5 taste Ctrl-O og g\u00e5r ut av det ved \u00e5 taste CTRL-X. Reboot maskinen (det gj\u00f8r du fra Rasbian-menyen), og den er klar til bruk.<\/p>\n
Oppsett av nettleser<\/strong>
\nHar du fulgt oppskriften over har du allerede installert Firefox-klonen Iceweasel, som er et mye bedre alternativ enn Chrome-klonen Chromium p\u00e5 Raspberry.\u00a0Fordi landskapsmodus er utgangspunktet for skjermen her (det vil si slik den normalt st\u00e5r) er det ikke n\u00f8dvendig \u00e5 mekke med \u00e5 snu bildet 90 grader. Til gjengjeld m\u00e5 innholdet posisjoneres slik at det utnytter hele skjermbredden, i praksis to spalter. Hvor mye data du vil vise, avhenger helt og holdent av hvilke data du vil vise. I mitt tilfelle ble det som sagt v\u00e6rdata, felleskalender og reisedata.<\/p>\n
Husets tolv\u00e5ring liker yr.nos v\u00e6rradar, s\u00e5 jeg fant ut at den h\u00f8rte hjemme p\u00e5 siden sammen med en liten v\u00e6rvarsel-widget. Jeg gikk for en enkel l\u00f8sning, og laget meg et lokalt v\u00e6rvarsel med Javascript slik det blir beskrevet p\u00e5 denne siden<\/a>. Men yr-folkene har skj\u00f8nt virkeligheten de lever i, og tilbyr v\u00e6rdata i XML og PHP-format, slik at du kan formatere og bruke data p\u00e5 akkurat den m\u00e5ten du vil. Mer om det her<\/a>.<\/p>\n
\u00d8verst i venstre spalte st\u00e5r alts\u00e5 et yr-tredagersvarsel for v\u00e5rt omr\u00e5de. Rett under har jeg lagt v\u00e6rradaren. Og her gikk jeg for en skikkelig langbein-l\u00f8sning, da jeg rett og slett ikke fant noen god datakilde jeg kunne bruke. Det viser seg at v\u00e6rradarbildene for ulike deler av landet som du finner p\u00e5 denne siden rett og slett er det – bilder. S\u00e5 ved \u00e5 h\u00f8yreklikke p\u00e5 bildet og finne URLen, kunne jeg lime det inn og vise det i sin egen ramme. Stort sett fungerer det ganske prikkfritt – kun av og til f\u00e5r jeg en melding om data som er falt ut.<\/p>\n
\u00d8verst i h\u00f8yre spalte har jeg lagt familiens felles Google-kalender. Bruker du en annen online-kalender, finnes det helt sikkert m\u00e5ter \u00e5 eksportere data fra den p\u00e5 ogs\u00e5, men her er alts\u00e5 metoden<\/a> som brukes i tilfellet Google. Litt kronglete, og den fordrer at man er p\u00e5logget kalenderen hele tiden. Siden dette tross alt er et system som skal st\u00e5 lett tilgjengelig (om enn uten tastatur og mus), kan det v\u00e6re en ide \u00e5 lage en egen kalender som kun f\u00e5r hente inn ikke-sensitive kalenderdata fra de voksne.<\/p>\n
Nederst i h\u00f8yre spalte ville jeg ha trafikkdata. Og nok en gang finnes det en enkel og grei m\u00e5te \u00e5 gj\u00f8re dette p\u00e5, i form av ruter.nos widget-generator<\/a>\u00a0(det finnes ogs\u00e5 en API<\/a> for den som er litt mer avansert anlagt). Bor du i Oslo og Akershus er dette alts\u00e5 en utmerket m\u00e5te \u00e5 vise sanntidsdata for en holdeplass n\u00e6r deg p\u00e5. Om ditt lokale reiseselskap, som Skyss i Hordaland eller Kolumbus i Rogaland, har noe tilsvarende vet jeg rett og slett ikke. Mangler det, er det et godt p\u00e5skudd til \u00e5 mase p\u00e5 dem for\u00a0\u00e5 f\u00e5 dem til \u00e5 dele.<\/p>\n
Det var alts\u00e5 selve datafeltene. S\u00e5 var det posisjoneringen. Jeg\u00a0gj\u00f8r dette med\u00a0HTML-kommandoen IFRAME, som gj\u00f8r det mulig \u00e5 plassere “en nettside i en nettside” p\u00e5 et hvilket som helst punkt p\u00e5 skjermen. Med andre ord: den ene infoskjermen best\u00e5r i virkeligheten av fem separate nettsider, som hver fyller sin del av skjermbildet. IFRAME har en rekke variabler, deriblant posisjon m\u00e5lt fra venstre og fra toppen av skjermbildet. Det er disse som avgj\u00f8r hvor dataene havner, alts\u00e5.<\/p>\n
Og det er her min quick and dirty-metode viser sin store svakhet. Fordi jeg bruker widgets har jeg ingen kontroll over fonter, layout og fargekoder. Jeg hadde selvsagt h\u00e5pet at jeg kunne bestemme skrifttype (Helvetica eller lignende egner seg godt til slike skjermer) og et fargeskjema, men den gang ei, alts\u00e5. St\u00f8rrelse var ogs\u00e5 vanskelig \u00e5 styre, ikke minst for Google Calendar, og jeg m\u00e5tte derfor velge den minst tilfredsstillende Langbein-l\u00f8sningen av alle: \u00c5 zoome til datafeltene fyller skjermen.<\/p>\n
Ved \u00e5 \u00f8ke forst\u00f8rrelsen p\u00e5 min 1680 x 1050 pixels skjerm til 150%, fikk jeg skrift i Google Calendar som var leselig p\u00e5 avstand samtidig som\u00a0yrs og ruters widgeter s\u00e5 helt greie ut. Ikke vakkert, men i alle fall er funksjonelt.\u00a0Om du har andre preferanser og en skjerm med annerledes oppl\u00f8sning, vil posisjonene m\u00e5tte endres tilsvarende. Det ble en del mekking med dette.\u00a0Den gode nyheten er at Firefix\u00a0husker settinger som zoom og fullskjerm, vil du alltid f\u00e5 skjermbildet opp slik du forlot det n\u00e5r du starter nettleseren\u00a0p\u00e5 ny igjen.<\/p>\n
Nedenfor ses r\u00e5koden til HTML-siden jeg endte opp med. Linjen\u00a0META HTTP-EQUIV=”refresh” CONTENT=”120″<\/em>\u00a0\u00f8verst i dokumentet er avgj\u00f8rende for at siden skal fungere. Det er den som ber nettleseren om \u00e5 oppdatere innholdet, i dette tilfellet hvert 120. sekund, slik at hver\u00a0IFRAME leverer relevante data.\u00a0Merk ellers at jeg har fjernet potensielt sensitve kommandoer fra Google Calendar-delen. Du skj\u00f8nner sikkert hvilke…<\/p>\n
<head>\n<META HTTP-EQUIV=\"refresh\" CONTENT=\"120\">\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"info.css\">\n<script>\nfunction setFocus() {\n    var iframe = document.getElementById(\"kalender\");\n    iframe.contentWindow.focus();\n}\n<\/script>\n<\/head>\n<body onLoad=\"setFocus()\">\n<script src=\"http:\/\/www.yr.no\/sted\/Norge\/Oslo\/Oslo\/Oslo\/ekstern_boks_tre_dager.js\">\n<\/script>\n<noscript><a href=\"http:\/\/www.yr.no\/sted\/Norge\/Oslo\/Oslo\/Oslo\/\">yr.no: V\u00e6rvarsel for Oslo<\/a>\n<\/noscript>\n<iframe style=\"position:absolute;Left:0;top:200\" id=\"radar\" type=\"text\/html\"\nframeborder=\"0\" height=\"400\" width=\"475px\" src=\"https:\/\/aa004xmu0m4dtdqty.api.met.no\/weatherapi\/radar\/1.5\/?radarsite=southeast_norway;type=reflectivity;content=an$\n> <\/iframe>\n<iframe style=\"position:absolute;Left:490;top:18;border-width:0\" width=\"460\"\nheight=\"320\" frameborder=\"0\" scrolling=\"no\" src=\"https:\/\/calendar.google.com\/calendar\/embed?<privat> ><\/iframe> <br>\n<iframe style=\"position:absolute;Left:490;top:300\" name=\"ruter\" id=\"ruter1\"\nsrc='https:\/\/ruter.no\/iframe-realtime.html#(3010536)Helgesens%20gate%20(Oslo)%7C20,Sk%C3%B8yen%7C20,Galgeberg'\nallowTransparency='true' frameborder='0' scrolling='no' height='324' width='220'><\/iframe>\n<iframe style=\"position:absolute;Left:720;top:330\" name=\"ruter\" id=\"ruter2\"\nsrc='https:\/\/ruter.no\/iframe-realtime.html#(3010600)T%C3%B8yen%20%5BT-bane%5D%20(Oslo)%7C1,Ryen%7C4,Bergkrystallen'\nallowTransparency='true' frameborder='0' scrolling='no' height='324' width='220'>\n<br>\n<\/body><\/html><\/pre>\n
Oppdatering 10. desember 2017:\u00a0<\/strong>Ruter har forandret p\u00e5 tilbudet sitt, slik at oppskriften over ikke vil fungere for denne delen av infotavlen lenger. Den gode nyheten er at selskapet har gjort det lettere \u00e5 lage fine sanntidsskjermer p\u00e5 egen h\u00e5nd. Jeg har blogget om dette her<\/a>.<\/p>\n
S\u00e5 der har du trinnene for \u00e5 f\u00e5 satt opp en skjerm slik at den automatisk viser nyttige data. Resultatet her i heimen blir seende slik ut:<\/p>\n
\"2016-06-11-180737_1680x1050_scrot\"
\nMen selvsagt – SELVSAGT! – er det mye mer du kan gj\u00f8re. For eksempel kan du<\/p>\n