Kategori: Magic Mirror

Det börjar kännas som en årlig tradition… SD-kortet i spegeln la av igen och är nu utbytt mot ett nytt. Det gav mig ett bra tillfälle att uppdatera till senaste versionen av Raspian Jessie, nu med PIXEL som skrivbordsmiljö. Där ingår Chromium! Dags att uppdatera instruktionerna igen…

Installera Raspbian enligt instruktionerna på http://www.raspberrypi.org/. Efter grundinstallationen loggar du in, kör raspi-config och ställer in att den ska starta till Desktop, inloggad som Pi. Passa även på att ställa in rätt inställningar för tidszon, tangentbord mm.

För att allt runt spegeln ska fungera behövs det lite anpassningar och kompletteringar:

1. Installera resterande programvara

sudo apt-get update && apt-get upgrade -y
sudo apt-get install apache2 apache2-doc
sudo apt-get install php5 php-pear php5-xcache
sudo apt-get install unclutter

2. Vrid på skärmen. En spegel har man oftast på högkant, därför måste vi vrida bilden 90 grader. Editera /boot/config.txt och lägg till

gpu_mem=128
display_rotate=1

Avkommentera även raden med hdmi_force_hotplug=1.

3. Editera /home/pi/.config/lxsession/LXDE-pi/autostart och se till att den innehåller

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
# @xscreensaver -no-splash
# @point-rpi
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --noerrdialogs --incognito --kiosk http://mirror01

Som du ser har jag döpt min paj till mirror01, har du ett fiffigare namn skriver du in det.

Nu ska det bara vara att starta om så ska den visa upp startsidan (om det finns någon) i fullskärm, roterad 90 grader.

Själva webben kan du ladda hem här: MagicMirror. Du behöver modifiera filen js/config.js med egna uppgifter för väder och kalender, du hittar mer information om vad som ska in i tidigare inlägg. Eller så hoppar du över alltihop och skaffar ett konto på DAKboard!

Ett år har gått och det är dags för uppdaterade instruktioner, se inlägget Jessie är förlåten.

Häromdagen la mitt SD-kort av i spegeln och den vägrade att starta som den skulle. Sådant händer men då är det bara att installera om, heller hur? Fel. Senaste versionen av Raspbian, Jessie, har ingen Chromium och därför måste man byta webbläsare. Här kommer lite uppdaterade instruktioner för hur jag gjorde.

Installera Raspbian enligt instruktionerna på http://www.raspberrypi.org/. Efter grundinstallationen loggar du in, kör raspi-config och ställer in att den ska starta till Desktop, inloggad som Pi. Passa även på att ställa in rätt inställningar för tidszon, tangentbord mm.

För att allt runt spegeln ska fungera behövs det lite anpassningar och kompletteringar:

1. Installera resterande programvara

sudo apt-get update && apt-get upgrade -y
sudo apt-get install apache2 apache2-doc apache2-utils
sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache
sudo apt-get install epiphany-browser
sudo apt-get install xautomation

2. Vrid på skärmen. En spegel har man oftast på högkant, därför måste vi vrida bilden 90 grader. Editera /boot/config.txt och lägg till

gpu_mem=128
display_rotate=1

Avkommentera även raden med hdmi_force_hotplug=1.

3. Editera /home/pi/.config/lxsession/LXDE-pi/autostart och se till att den innehåller

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
# @xscreensaver -no-splash
@xset s off
@xset -dpms
@xset s noblank
@epiphany-browser http://mirror01
@xte 'sleep 60' 'key F11' -x:0

Epiphany har inget äkta kiosk-läge men med hjälp av xte (ingår i xautomation) skickar jag F11 till den efter en minut vilket sätter den i fullskärm vilket är nästan samma sak. Som du ser har jag döpt min paj till mirror01, har du ett fiffigare namn skriver du in det.

Vädertjänsten, openweathermap.org, har också börjat ställa krav på att man har ett konto för att man ska få hämta väder. Det är fortfarande gratis (om man inte vill hämta ofta) men man behöver en API-nyckel. Den lägger man in i config.js enligt:

// Weather
var weatherParams = {
    'q':'Forshaga,Sweden',
    'units':'metric',
    'lang':lang,
    'cnt':'6',
    'APPID':'DinAPI-Nyckel'
};

Nu ska det bara vara att starta om så ska den visa upp startsidan (om det finns någon) i fullskärm, roterad 90 grader.

Igår var vi till Deje trä och köpte lite eklister, idag blev det montering. Det var ju det där med att såga rakt, gera i rätt vinkel och hålla fingrarna borta från spikpistolen också… Nåja, den kom upp på väggen i alla fall:

I fredags hämtade jag glasskivan från glasmästaren och idag har jag gjort mina första stapplande steg i den ädla konsten att applicera film på glas. Jag har aldrig varit någon större fan av solskyddsfilm på bilar så det här var premiären med såpvatten, trasor och kreditkort. Blev sådär men jag har gott om film och det är enkelt att göra om.

Nu börjar man få en känsla för hur det kommer se ut och fungera.

 

Idag fanns det en stund över för att fortsätta på spegelprojektet. Överst på dagordningen stod att bli av med så mycket plast som möjligt för att kunna bygga en så slimmad spegel som möjligt. Då den utvalda skärmen redan hade varit i golvet ett par gånger handlade det mest om att ta bort silvertejpen och bända lite:

Jag hade hoppats på att hitta någon användbar likströmskälla i skärmen och använda en LM2596 för att få 5V till min Pi (precis som i LED-rampen till akvariet). Inte bara hittade jag en strömkälla, det fanns dessutom en 5V-matning färdig att använda. Bingo! Det gjorde det lätt att snyggt och prydligt få dit prylarna:

HDMI-DVI-Kabeln kommer från min favoritleverantör av Raspberry Pi och andra leksaker, m.nu. Strömmatningen är på hela tiden och skärmen tänds när den får signal från datorn så allt går igång snyggt och prydligt så fort man sätter i sladden, perfekt! Nu är det dags att skaffa glasskivan och pyssla med lite träslöjd.

 

Jag börjar känna mig klar med programmeringen av de funktioner jag vill ha på spegeln. Förutom det jag redan har nämnt använder jag även jQuery och Moment.js för att underlätta lite för mig. När man lägger ihop det hela får man något som lätt komprimerat (och censurerat, någon fyller år på kalenderraden som saknas) ser ut ungefär så här. Nyheten byts ut var 15:e sekund och de andra delarna uppdateras med lämpliga tidsintervaller.

Om du vill jobba vidare med det jag fått ihop kan hela rasket laddas ner här: MagicMirror

Dags att börja bygga hårdvaran!

Jag hämtar väderdata, både aktuella värden och prognos, från OpenWeatherMap. Det är en öppen tjänst med ett bra API som kan leverera JSON direkt. Kombinerat med Erik Flowers Weather Icons kan man skapa sig en riktigt prydlig väderhörna på sin spegel.

Lokala nyheter var däremot lite svårare att hitta färdiga i JSON så där fick det bli ett till litet PHP-hack för att läsa in ett RSS-flöde i XML och skicka det vidare som JSON.

$xml = file_get_contents($_GET['url']);
$xml = str_replace(array("\n", "\r", "\t"), '', $xml);
$xml = trim(str_replace('"', "'", $xml));
$simpleXml = simplexml_load_string($xml);
header('Content-Type: application/json');
echo json_encode($simpleXml);

Samma konvertering används för att få ett citat varje dag till själens fromma.

En av de saker jag vill ha med på spegeln är en kalender med kommande saker som vi i familjen behöver komma ihåg. Eftersom vi alla använder Android och har ett gemensamt GMail-konto förutom våra egna som finns på alla telefoner (det är det vi använder när vi köper appar och annat i mobilen så att alla kan använda dem) föll valet på Google Calendar. Då jag inte vill göra kalendern publik och det inte är så lätt att logga in manuellt på en spegel utan tangentbord måste jag använda ett Google Service Account.

Logga in på Google Developers Console med kontot vars kalender du vill använda och skapa ett nytt projekt. Aktivera Google Calendar API och skapa ett OAuth Client ID av typen Service Account. Notera kontots epostadress och ladda hem P12-certifikatet. Logga sedan in på din Google Calendar och dela ut kalendern under Inställningar till servicekontots epostadress. Det räcker med att ge behörighet att se alla händelser, spegeln ska ju inte skapa nya.

Efter att ha tittat på alternativen kom jag fram till att PHP nog var det bästa valet för mig för att ta hem kalenderdatat med. Ta hem Googles PHP-klient och lägg src/Google-katalogen någonstans i din webbroot, jag valde /gcal/Google. I /gcal placerade jag sedan PHP-koden för att läsa kalenderdata och returnera det i JSON-format som index.php tillsammans med P12-certifikatet. Normalt sett ska man förstås inte placera ett cert där webbservern kommer åt det men det här är ingen publik webbserver så jag gör det enkelt för mig. Det finns en massa data att hämta men jag nöjer mig med datum, start- och sluttid (vilket heldagsevent inte har, krånglar till det en del) och summering.

<?php
session_start();
require_once 'Google/Config.php';
require_once 'Google/Auth/AssertionCredentials.php';
require_once 'Google/Auth/OAuth2.php';
require_once 'Google/Client.php';
require_once 'Google/Service.php';
require_once 'Google/Model.php';
require_once 'Google/Collection.php';
require_once 'Google/Service/Resource.php';
require_once 'Google/Service/Calendar.php';	 

$start = date(DateTime::ATOM, mktime(0,0,0,date('m'), date('d'), date('Y')));
$maxResults = '10';
if(isset($_GET['maxResults'])) { $maxResults = $_GET['maxResults']; }
if(!isset($_GET['Email_address'])) { $aResult['error'] = 'No Service Account Email address'; }
if(!isset($_GET['key_file_location'])) { $aResult['error'] = 'No key file location'; }
if(!isset($_GET['targetCalendar'])) { $aResult['error'] = 'No target calendar'; }

if(!isset($aResult['error']) ) {
	$Email_address = $_GET['Email_address'];
	$key_file_location = $_GET['key_file_location'];
	$targetCalendar = $_GET['targetCalendar'];

	$client = new Google_Client();
	$client->setApplicationName("Client_Library_Examples");
	$key = file_get_contents($key_file_location);
	$scopes ="https://www.googleapis.com/auth/calendar";
	$cred = new Google_Auth_AssertionCredentials(
		$Email_address,
		array($scopes),
		$key
	);
	$client->setAssertionCredentials($cred);
	if($client->getAuth()->isAccessTokenExpired()) {
		$client->getAuth()->refreshTokenWithAssertion($cred);
	}
	$service = new Google_Service_Calendar($client);	

	$optParams = array(
		'singleEvents' => True,
		'orderBy' => "startTime",
		'maxResults' => $maxResults,
		'timeMin' => $start
	);
	$events	= $service->events->listEvents($targetCalendar, $optParams);

	$aResult = array();
	$i = 0;
	foreach ($events->getItems() as $event) {
		if (($event->getStart()->getDate())!= NULL) {
			$eventDate = $event->getStart()->date;
			$eventTimeStart = '';
			$eventTimeEnd = '';
		} else {
			$eventDate = (new DateTime($event->getStart()->getDateTime()))->format('Y-m-d');
			$eventTimeStart = (new DateTime($event->getStart()->getDateTime()))->format('H:i');
			$eventTimeEnd = (new DateTime($event->getEnd()->getDateTime()))->format('H:i');
		}
		$aResult[$i] = array(
			'summary' => $event->getSummary(),
			'eventDate' => $eventDate,
			'eventTimeStart' => $eventTimeStart,
			'eventTimeEnd' => $eventTimeEnd
		);
		$i++;
	}
}
header('Content-Type: application/json');
echo json_encode($aResult);
?>

PHP-filen kan man sedan anropa från JavaScript ungefär så här:

<html>
<head>
	<title>Google Calendar</title>
	<script src="js/jquery.js"></script>
	<meta name="google" value="notranslate" />
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
	<div class="calendar"></div>
	<script>
		var calendarParams = {
			'maxResults':'10',
			'Email_address':'Epostadress till servicekontot',
			'key_file_location':'Filnamnet på P12-certifikatet',
			'targetCalendar':'Epostadress till kalendern man vill läsa'
		};
		var calendarTable = $('<table />');
		jQuery.getJSON('http://mirror01/gcal/index.php', calendarParams, function(json, textStatus) {
			for (var i in json) {
				var eventData = json[i];
				if (eventData.eventTimeStart != "") {
					var eventTime = ' (' + eventData.eventTimeStart + " - " + eventData.eventTimeEnd + ')';
				} else {
					var eventTime = "";
				}
				var row = $('<tr />');
				row.append($('<td/>').html(eventData.eventDate));
				row.append($('<td/>').html(eventData.summary+eventTime));
				calendarTable.append(row);
			}
			$('.calendar').html(calendarTable);
		});
	</script>
</body>
</html>

 

Det har hänt lite med Raspbian som ändrar uppsättningen, nya instruktioner finns här: Jessie ställer till det

Uppsättningen av en Raspberry Pi för den magiska spegeln är ganska enkel. Installera Raspbian enligt instruktionerna på http://www.raspberrypi.org/. Efter grundinstallationen loggar du in, kör raspi-config och ställer in att den ska starta till Desktop. Passa även på att ställa in rätt inställningar för tidszon, tangentbord mm.

För att allt runt spegeln ska fungera behövs det lite anpassningar och kompletteringar:

1. Installera resterande programvara

sudo apt-get update && apt-get upgrade -y
sudo apt-get install apache2 apache2-doc apache2-utils
sudo apt-get install libapache2-mod-php5 php5 php-pear php5-xcache
sudo apt-get install chromium x11-xserver-utils unclutter

2. Vrid på skärmen. En spegel har man oftast på högkant, därför måste vi vrida bilden 90 grader. Editera /boot/config.txt och lägg till

gpu_mem=128
display_rotate=1

Avkommentera även raden med hdmi_force_hotplug=1.

3. Editera /etc/xdg/lxsession/LXDE-pi/autostart och se till att den innehåller

@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
# @xscreensaver -no-splash
@xset s off
@xset -dpms
@xset s noblank
@chromium --kiosk --incognito http://mirror01

Som du ser har jag döpt min paj till mirror01, har du ett fiffigare namn skriver du in det.

Nu ska det bara vara att starta om så ska den visa upp startsidan (om det finns någon) i fullskärm, roterad 90 grader.

 

Idag kom spegelfilmen (tänk typ solskyddsfilm till bil) som ska sitta på en glasskiva framför bildskärmen. Jag köpte den från MDP Supplies som har både bra priser och snabba leveranser, rekommenderas! Pillet med koden går vidare, än så länge är det en klocka, väderprognos, dagens citat och nyheterna från SVT. Jag ska bara få till visningen av en GMail-kalender också så är den delen klar.