Friday, 25 August 2017

Raspberry Pi Kitchen Wall Display Screen

Ok, so not really System Center related but I had to share this little project! My wife works as cabin crew for a UK airline so has crazy shift patterns which are hard to keep track of, I wanted to make a display screen for the kitchen wall which contained our shared calendars plus some other useful stuff, hopefully this will serve as inspiration for other kitchen wall display screen geeks!

The screen currently shows the following:

  • DakBoard linked to multiple Google calendars
  • The Guardian scrolling RSS news feed.
  • FlightRadar24 - Used to track the aircraft my wife is flying on (to show the kids.. honest!)
  • MetOffice local weather.
  • Travel reports in a 50 mile radius.
**2018 Update**
  • 4 cryptocurrency price charts
  • Strava activity widget



What I also wanted to be able to do was somehow temporarily display a recipe while cooking in the kitchen without manually connecting to the Pi and opening a webpage. I looked into running an AirPlay server on the Pi (http://www.instructables.com/id/AirPlay-Mirroring-without-Apple-TV-using-RPi/) so we could mirror one of our iOS devices. This didn't work as expected due to Apple restrictions. But I did get a bit further when using AirParrot from the PC, I was able to successfully stream audio and video to the Pi, but mirroring the PC's display only worked for about 4 seconds before bombing out. I've given up on this for now.





The bulk of the work to get the Raspberry Pi and calendar display set up is covered on either of these two posts:
http://dakboard.com/blog/diy-wall-display/
https://www.raspberrypi.org/magpi/dakboard-wall-display/

My customisation is achieved using the configuration below:

DakBoard

I used this guide to get everything set up and ready for wall mounting, but disabled all other features of DakBoard except for the calendar feature. I then added multiple Google calendars with different colours.
To link your DakBoard to the custom page below you'll need to use the Private URL shown on the DakBoard site under Account Settings.



Webpage

Additional things you'll need:
  • Somewhere to host a webpage (PHP enabled)
  • An IMAP email account specifically for the purpose of this board.

To take things further and get all the other funky stuff on the screen I needed to create a custom webpage to embed all of the other sources of information using HTML iframes. The main page is constructed using iframes and consists of my DakBoard calendar, a locally hosted PHP webpage (side.php) for the right hand section, weather.html for the weather, and bottom.html for the news feed section.



I'm not a web developer by any means and I'm sure what I've thrown together here will get some serious frowns from the web-dev community, but it's locally hosted so I'm not worrying too much!

index.html

<body style="margin:0px;">
<div class="box">
<iframe src="URL to DakBoard Screen" frameborder="0" scrolling="no" height="88%" width="55%" align="left"></iframe></div>
<div class="box">
<iframe src="URL to side.php" frameborder="0" scrolling="no" height="100%" width="45%" align="right"></iframe>
<div class="box"><br>
<iframe src="URL to bottom.html" frameborder="0" scrolling="no" height="12%" width="55%" align="center"></iframe>
</body>

The iframes are sized using height and width percentages so it will still fit nicely if I eventually get a larger monitor of the same aspect ratio.

side.php

Now, this is where the fun starts. I've configured this page to refresh every 10 minutes to ensure the aircraft tracking, weather and traffic is up to date. Each of these sources are pulled in using more HTML iframes.

The page needs to be PHP because at the point of the page refreshing it uses PHP to check an IMAP mailbox for the most recent email and extract the contents of the subject line. The subject line is used to determine what aircraft registration number FlightRadar24 should be tracking. So I just send an email with the subject line of G-TAWB for example, and the next time the page refreshes it will begin tracking it.

The subject line from the latest email is used as a variable ($reg) and tagged on the end of the FlightRader24 URL like this : https://www.flightradar24.com/simple?reg=<?php echo $reg; ?>

The page HTML looks like this:


<head><META http-equiv="refresh" content="600;URL="URL to side.php"></head>
<body style="margin:0px;">
<?php
/* connect to server */
$hostname = '{IP/Hostname of Mailserver/pop3/novalidate-cert}INBOX';
$username = 'Email Username';
$password = 'Email Password';



/* try to connect */
$mbox = imap_open($hostname,$username,$password) or die('Cannot connect to Tiriyo: ' . imap_last_error());

// get information about the current mailbox (INBOX in this case)
$mboxCheck = imap_check($mbox);

// get the total amount of messages
$totalMessages = $mboxCheck->Nmsgs;

// select how many messages you want to see
$showMessages = 1;

// get those messages    
$result = array_reverse(imap_fetch_overview($mbox,($totalMessages-$showMessages+1).":".$totalMessages));

// iterate trough those messages
foreach ($result as $mail) {

    //print_r($mail); 

    // if you want the mail body as well, do it like that. Note: the '1.1' is the section, if a email is a multi-part message in MIME format, you'll get plain text with 1.1
    //$mailBody = imap_fetchbody($mbox, $mail->msgno, '1.1');

    // but if the email is not a multi-part message, you get the plain text in '1'
   // if(trim($mailBody)=="") {
        $var = imap_fetchbody($mbox, $mail->msgno, '2');
//get email subject
$reg = "{$mail->subject}\n";

    //}

    // just an example output to view it
//echo $reg;
}

imap_close($mbox);
?>
<div class="box">
<iframe src="https://www.flightradar24.com/simple?reg=<?php echo $reg; ?>" frameborder="0" scrolling="no" height="65%" width="100%"></iframe>
</div>

<div class="box">
<iframe src="URL to Weather.html" frameborder="0" scrolling="no" height="35%" width="30%" align="left"></iframe>
</div>

<div> <iframe src="http://www.trafficnews.co/widget/?w=100%&l=Postcode&val=YourPostcode&r=50" height="35%" width="70%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" align="right"></iframe></div>
<div class="box">





weather.html

I've used the MetOffice weather widget to make this because the weather provided with DakBoard wasn't good enough in my opinion.
You can embed the weather however you want, but here's the html for my page.


<head></head>
<body style="margin:0px;" bgcolor="#000000">
<div class="box">
<script type="text/javascript"> moWWidgetParams="moAllowUserLocation:false~moBackgroundColour:black~moColourScheme:black~moDays:6~moDomain:www.metoffice.gov.uk~moFSSI:310069~moListStyle:vertical~moMapDisplay:none~moShowFeelsLike:true~moShowUV:true~moShowWind:true~moSpecificHeight:350~moSpecificWidth:250~moSpeedUnits:M~moStartupLanguage:en~moTemperatureUnits:C~moTextColour:white~moGridParams:weather,temperature,wind,warnings~"; </script><script type="text/javascript" src="http://www.metoffice.gov.uk/public/pws/components/yoursite/loader.js"> </script>

</body>

**2018 Updates**

Crypto-widgets

Because I've been wasting my hard earned cash on cryptocurrencies, I wanted a way to monitor the prices while I was cooking breakfast - so I used widgets from this website.

I was able to insert a few graphs onto the board using a separate HTML page containing HTLM tables with each graph in, otherwise they wouldn't sit evenly.

Strava Widget

I've been using Map My Ride for logging my cycling workouts for ages and have resisted making the switch to Strava because I saw no reason to. But, then I stumbled across the Strava activity widget which I thought would be cool to display on the screen. It was very easy to set up, here is a guide.

The only problem I had was that the background colour is white and there's no way of changing this within the embed code. I ended up using some CSS to invert the colours.

Put this in <head>

<head><link rel="stylesheet" href="./style.css"></head>

Then this in body tag:
<body style="margin:0px;" bgcolor="#000000" class="invert">

Create a style.css file with:
.invert {
filter: invert(100%);
-webkit-filter: invert(100%);
}


Finished Product

Overall I'm pretty impressed with the outcome and it's definitely a source of amusement when we have visitors! 


2 comments:

  1. Hi, looks great, I'm interested in doing something similar. I have the dakboard working ok on the PI. But the index page and iframes, where would I physically locate the index page, and how would I call it once it's located.

    ReplyDelete
    Replies
    1. Hi, sorry about the delay in responding. You'll need a webserver either on your internal network or on the internet to host all of the webpages. I've hosted my pages on a Synology NAS on my network which is powered on all of the time. It should be easy enough to find some free internet webhosting somewhere to achieve the same thing. Hope that helps. Tom

      Delete

Promote Passive SCCM Site Server to Active

If you've followed my previous post about implementing SCCM site server high availability in a lab, this is a quick guide to demonst...