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
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.
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:
<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!
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.
ReplyDeleteHi, 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
DeleteRamblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download Now
Delete>>>>> Download Full
Ramblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download LINK
>>>>> Download Now
Ramblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download Full
>>>>> Download LINK Uq
Keep up the good writing.
ReplyDeletewincracker.com
AirParrot Crack
Thank you so much for sharing.
ReplyDeleteairparrot crack
auslogics boostspeed premium crack
snaptube crack
aurora hdr crack
windows 11 crack
tuxera ntfs crack
ReplyDeleteSuch a Nice post. Thanks for Awesome tips Keep it up
airparrot-crack
Ramblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download Now
ReplyDelete>>>>> Download Full
Ramblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download LINK
>>>>> Download Now
Ramblings Of A Microsoft Consultant: Raspberry Pi Kitchen Wall Display Screen >>>>> Download Full
>>>>> Download LINK