Before the “digital age” many families used wall calendars to show a monthly view of upcoming events. This modern version of the wall mounted calendar includes the same basic functions:

  • A monthly agenda
  • Sync of family members activities
  • Easy browse between months

Beyond those basic functions this gadget will also handle:

  • A whether forecast
  • Upcoming events in the surrounding area
  • Live information about the public transport
  • And even more...

What you need:

(Inspired by the instructable by Piney http://www.instructables.com/id/Raspberry-Pi-Wall-...)

Step 1: The Hardware

This is the hardware setup.

  1. Find a LCD laptop screen . Order a controller board on Ebay. Search for LCD Controller Driver Board and the serial number of your laptop screen.
    Read more: http://www.instructables.com/id/Old-laptop-screen-..
  2. Craft a piece of wood. Height should be more than 30mm, so the electronics can fit inside. The width and height depends on the size of your laptop screen, have a margin for an extra 10 mm on all sides. Carve out and make room for the electronics on the back. Drill holes for the buttons and wires.
  3. Fasten the laptop screen. I used the orginal mounting frame from the laptop.
  4. Cut out foamcore with equal thickness as the screen. and glue it on the wooden slab.
  5. Cover all sides with cork. Cut with a “snap-off blade knife” and glue with “glue spray”.
  6. Mount the Push Buttons. Use a large drill, and drill carefully by hand.
  7. Connect the electronics. Connect three of the Push Buttons to GPIO-pins 19/20/21 and to ground. https://ms-iot.github.io/content/images/PinMappin... Find out the pin for On/Off button for the controller board, and connect it with the fourth Push Button. (You will find it by trying to connect ground to each pin, suddenly the LCD will light up). Finaly, connect the HDMI cable between Raspberry and controller board, and connect the screen to the controller board.


Step 2: The Software

The setup is somehow turning the Raspberry Pi into a kiosk. The OS will auto start a website in full screen mode,
and the Push Buttons is used to control the information at the website. The setup is:

  1. Install Raspbain on Raspberry Pi
  2. Sign up for a Google Calender. (https://calendar.google.com). Add your upcomming event. Ask for access to your family members calendar, or create a speceific "family calender" and give the rest of the familiy acess to it. Make your calendar more dynamic by adding external calenders. Facebook events, public holidays, and week number has been practical for me. More inspiration here: http://lifehacker.com/the-coolest-things-you-can-a...
  3. Set up a webpage and a webserver
  4. Install a web browser and customize the calendar design
  5. Set up the push buttons

Continue reading for details about 3-5 .

Step 3: Create a webpage and webserver

The webpage is the canvas the Raspberry Pi will display. The canvas can be filled with any information. I will show you how i to embed a google callender. The embeed code is generate by googles own aplication. This youtube shows how to get it to work: https://www.youtube.com/watch?v=2tnYwbs-yDk

Google Calendar have built in keyboard shortcuts. Press N and the next month will appear, press P and the previously month is shown. This will only work when the < iframe > is in focus. I have created a JavaScript that ensure that focus is correct.

An example file of html code is attached (change name from index.html.txt to index.html). For privacy, I have replace some of the code with “*___REPLACED___*”. Instead, use the embeed code generated by google.

Either put the index.html file on your own webhost, or turn your Raspberry Pi into a webserver and host it local. If you already have a webhost continue to the next step. Install a webserver by following this guide: https://www.raspberrypi.org/documentation/remote-a... Now save your modifed index.html to /var/www/html/index.html, like this:

sudo cp index.html /var/www/html/index.html

Step 4: Install a web browser and customize the calendar design

There a many web browser out there. But I have only find one that can handle these three requirements; 1) can handle the modern version of google calendar, 2) has a full screen mode, 3) can run a local CSS. The local CSS is used to change the appearances of the google calendar. The redesign can’t be done at the webpage, because the CSS are embedded from another server (the google-server).

Install Iceweasel (Firefox for Linux)

Install this extension for Iceweasel:

Open the “Stylish” extension tab in Iceweasel and customize the CSS to make the google callander look better. Se attached file i for an example.

Now, lets make Iceweasel to autostart and open your webpage at login. Type this in the Linux terminal:

cd /home/pi//.config/autostart
nano cal.desktop 

Write the following to the file. Change "localhost" to adress where your canvas-webpage are stored. Save and exit.

[Desktop Entry]
Exec=iceweasel localhost

Step 5: Set up the Push Buttons

The Push Buttons is used to browse forward and backwards in the calendar month view. By default this is done by pressing “p” and “n” at a keyboard. Therefore the buttons will emulate those two keyboards commands.

First, create a python script to make the push buttons work: http://razzpisampler.oreilly.com/ch07.html

Download and install python-uinput, a python API to create virtual keyboards: http://tjjr.fi/sw/python-uinput/ Raspbian comes with both Python 2 and Python 3. Make sure you install uinput with the version you are using.

Put the uinput-API and the button script together. The final python scipt is attached.

Auto-start the python script on startup: http://www.instructables.com/id/Raspberry-Pi-Laun... Our launcher.sh will look like bellow. Replace “/home/pi/py_switch” to the path where you have stored the python script.

cd /
cd /home/pi/py_switch
sudo modprobe uinput
sudo python switch.py
cd /

That's all!


The number of possible commands can be extended with some if-else-statements in the python code. I have attached an upgraded switch.py-file in this step. The new is script has the following commands.

  • Press button 1 -> Key press “P” -> Browse previously month
  • Press button 2 -> Key press “N” -> Browse next month
  • Press button 3 -> Key press either "M" or "A" -> alternate between month-view or agenda-view
  • Long-press button 3. -> Key press "F5" -> Reload the webpage
  • Simultaneous press button 1, 2, 3 -> executes the shell command “sudo reboot” -> Restart of raspberry pi.
<p>Does anybody sells a finished product like this?</p>
<p>This is great, thanks for the instructions! You may want to check out DAKboard (http://dakboard.com). It has calendar integrations and adds photos, news and weather as well! </p>
<p>What a fun project!!!! Thanks goes to all who added to this!!!</p><p>I added Alexa to the project for a little something extra (first button).</p><p>Also added key hooks and some family fun stickers to the open space.</p>
<p>is it touchscreen? or how does it change the month?</p>
<p>please mail me instructions how you did it on ktr.chandan@gmail.com. thanks</p>
<p>Certainly worth looking into, especially now there is a touch screen for Pi!</p>
<p>I made one for my wife's birthday since she's the organized one in our family. Built a custom frame and hung it on a wall painted with chalkboard paint (I'll be running a recessed power outlet up behind it soon to hide the cord). I am really happy with how it turned out.</p><p>From top to bottom: </p><p>- Static Image (I was still working out spacing, so this image is a little squished, but we'll address that later)<br>- Date/Time display<br>- Google Calendar (I blurred that junk out to keep you creepers from creepin')<br>- Weather forecast app from forecast.io<br>- Instagram feed from Snapwidget.com<br>- News reader that features World, Local, and Sports news<br>- Random quote generator (I store about 150 quotes locally on the Raspberry Pi's SD card. It's a massive overkill 16 GB, so I've got plenty of space to add more later. Also, I've got plans to add some buttons, voice command, and music player in the future, so I decided to start out with a ton of storage space into which I can grow.)</p>
<p>I'm very impressed with what you have done here. I am not nearly as technical as you all but I have a couple of questions: 1) Can this be set-up with Apple Calendar? 2) is there something out there that I can buy that will do what you all are doing?</p>
<p>This looks great! I'm well on my way to completing this project - I've removed the LCD bezel and it's ready to be put into a frame like yours. How did you attach the display to the frame? I can't really tell from the picture.</p><p>Also, is the front of the frame one single piece which has been routed, or is it four seperate pieces with miter cuts?</p><p>Thanks!<br></p>
You've pretty much got it... I made the frame first, used my router to cut in on the back of the interior lip of the frame, giving the frame just enough of a track to sit down into. I didn't use miter cuts, I actually just squared it off, making sure the box supported the frame across the square cuts. Since I was painting it, the cuts on the frame didn't matter all that much, so I didn't bother with the miter saw. The screen is held in place at the corners. This is probably the place where I could have spent more time/money getting it right, but I found that the screen almost wanted to stay in the track on its own. I used picture hangers tacked across all four corners and that is plenty secure.
<p>Thanks! I'm giving this a go this week. I had a chop saw set to 45deg for the mitre cuts, but it was about a degree acute, so they didn't match up. I've just bought a mitre box, so will be trying it by hand this time around.</p><p>I'll post pics if successful! :)</p>
How you hang it to wall?<br><br>Which material is the frame?
It's just pine boards I bought at the local hardware shop. It's premium boards, but since I painted it, anything would have worked with enough sanding. If I were going to build it again with just stain, I might use something that looked nicer, but paint covers a multitude of ugly spots on pine
<p>Anyone have the necessary code (redacted of course) for this particular build? It's got quite a few elements I like. In the process of making my own and trying to work out the best way to include elements such as these.</p>
<p>@Shamgar_BN Do you mind sharing your code? </p>
<p>Looks fantastic. I was able to mimic most of it, changing things where I wanted to. What did you use for your date/time? I've been trying to find some decent widget or javascript but I can't find anything good enough.</p>
<p><a href="http://time.is/widgets/California_City" rel="nofollow">http://time.is/widgets/California_City</a></p>
<p>Can you upload all index?</p>
<p>This one looks really smooth. I'm stuck on mine because of the webpage being too ugly.</p>
<p>I really like this is there any way you could post your code?</p>
<p>Hi,</p><p>Do any of those that have made this project know if it would run on a Pi Zero? <br></p><p>Cheers</p>
<p>I'm very impressed with what you all have done here. I am not nearly as technical as you all but I have a couple of questions: 1) Can this be set-up with Apple Calendar? 2) is there something out there that I can buy that will do what you all are doing?</p>
<p>So far I'm having great success with this project. In the evenings I have it switch to displaying family photos!</p><p>One question: How did you all get Iceweasel to start up in fullscreen/kiosk mode?</p>
<p>Currently in the process of &quot;making&quot; this. I saw my wife struggling to clean the old whiteboard to update things for the new school year and coming week and figure there had to be a better way. So glad I found this page! With spare Pi's and screens laying around the only thing this will cost me is time.</p><p>It's not done yet but its a start. I still have to fix some sizing issues and I really need to add the following elements to right side real estate of the screen:</p><p>Clock</p><p>Weekly Dinner Plan (needs to be easily updated)</p><p>Random Family Photos</p><p>Quotes (easily updated and customizable)</p><p>I think one of the trickier aspects of all of this is making the theme / style of things all match. Love the simplicity of the weather and trying to maintain that with things is time consuming.</p><p>Hope to share more once things continue to progress.</p>
<p>Because I was stupid, I somehow deleted my original posting of my attempt to make this incredibly useful project...</p><p>I used a 17.3&quot; 1600 x 900 dell replacement LCD, found a controller on ebay and dropped a rpi3 on this... a single 2a 12vdc power supply powers everything. I installed a dc jack on the edge of my frame for the power supply to plug into and wired the jack to the LCD controller and to a 12vdc to 5vdc converter for pi power.<br><br>I didn't care for any of the framing or mounting that I saw here so I chose to go a little bit different route. I ordered a frame from American Frame with a rabbit depth of 1 11/16&quot;... more than enough to mount the electronics. Cut an aluminum plate to fit the width of the frame and about 5&quot; tall to fit the electronics. Some mother board standoffs mount all of the boards to the plate and the plate fits perfectly behind the screen and a foam board... all held in with the spring clamps that came with the frame.<br><br>Buttons were another thing I chose to do differently. An Adafruit 4 button membrane switch worked perfectly in here and I just reassigned the pins in the python script to allow me to plug it in a single spot on the GPIO..<br><br>I also added a cron job in to turn the HDMI on/off on a schedule..<br><br>The web page I put up has my google calendar, bootstrap.js to change the picture at the top, forecast.io for the weather and WeatherNG for the live radar. </p><p><br>I'm adding a touch screen to this tomorrow... </p>
<p>Thanks for the idea of the membrain switch. Totally boss. Going that way. </p>
Yours look awesome. A guide would be even more awesome?
<p>used with an lcd screen, upstages via iPad or phone, set to show Callander and weather. Customers made frame. </p>
<p>from where can I get old laptop screens </p>
<p>Super fun! I used an old picture frame and hung it directly over a power plug. </p><p>I used Raspberry Squid buttons on top. </p>
<p>Did your laptop monitor have a ground wire/screw? What did you do with it? What did you attach it to? TIA.</p>
<p>Finally done, made it as easy to read and monochromatic as possible :)</p>
<p>Quick question - what did you do with the ground cable from the monitor? The driver board doesn't look like it has anything that I should connect it to. Advice?</p>
<p>can i ask what code you used for the news feed? looking for something similar</p>
Hi, sorry about that!<br><br><br><br><br>id=&quot;forecast_embed&quot; type=&quot;text/html&quot; frameborder=&quot;0&quot; height=&quot;245&quot; width=&quot;800&quot; src=&quot;http://forecast.io/embed/#lat=-31.4313&amp;lon=152.9081&amp;name=Port Macquarie&amp;color=#ffffff&amp;text-color=#ffffff&amp;font=Ariel&amp;units=ca&quot;&gt; <br><br><br><br><br>Add all of this inside iframe
<p>Hi tbar05,</p><p>I used an RSS feed from ABC News and RSS Dog.com to format it.</p><p><strong>Here is my code:</strong> </p><p>&lt;iframe frameborder=&quot;0&quot; width=&quot;800&quot; height=&quot;350&quot; src=&quot;http://www.rssdog.com/index.htm?url=http%3A%2F%2Fwww.abc.net.au%2Fnews%2Ffeed%2F45910%2Frss.xml&amp;mode=html&amp;showonly=&amp;maxitems=0&amp;showdescs=1&amp;desctrim=0&amp;descmax=0&amp;tabwidth=100%25&amp;showdate=1&amp;linktarget=_blank&amp;bordercol=transparent&amp;headbgcol=transparent&amp;headtxtcol=%23ffffff&amp;titlebgcol=transparent&amp;titletxtcol=%23ffffff&amp;itembgcol=transparent&amp;itemtxtcol=%23ffffff&amp;ctl=0&quot;&gt;&lt;/iframe&gt;</p>
<p>&lt;iframe frameborder=&quot;0&quot; width=&quot;800&quot; height=&quot;350&quot; src=&quot;http://www.rssdog.com/index.htm?url=http%3A%2F%2Fwww.abc.net.au%2Fnews%2Ffeed%2F45910%2Frss.xml&amp;mode=html&amp;showonly=&amp;maxitems=0&amp;showdescs=1&amp;desctrim=0&amp;descmax=0&amp;tabwidth=100%25&amp;showdate=1&amp;linktarget=_blank&amp;bordercol=transparent&amp;headbgcol=transparent&amp;headtxtcol=%23ffffff&amp;titlebgcol=transparent&amp;titletxtcol=%23ffffff&amp;itembgcol=transparent&amp;itemtxtcol=%23ffffff&amp;ctl=0&quot;&gt;&lt;/iframe&gt;</p>
<p>hi KeiranR1, can you tell me how you changed the colour of the weather display. I am using a black background too but am unable to change my weather display colour.</p><p>thanks in advance</p>
Here is the code I used for my weather, Prometheus3995... :)<br><br>
<p>Hi Kieran, there is no code here just an image of your weather. Can you help me out please. </p><p>I would like to change the colour of all the text.</p><p>thanks</p>
<p>How did you handle power? Your photo doesn't include power cables. I assume you ran the power to a nearby outlets - had to use two of them, right? Trying to think of better options. Not sure what a old laptop screen nets you besides recycling cred if you have to use two power outlets. Why not just use an LCD monitor? Thanks for your thoughts.</p>
<p>a 12vdc power adapter to power the LCD screen. Add a 12vdc to 5vdc converter like this (https://www.amazon.com/Nextrox-Converter-Power-Supply-Module/dp/B00A71CMDU/ref=sr_1_1?ie=UTF8&amp;qid=1468294450&amp;sr=8-1&amp;keywords=12vdc+to+5vdc+converter) to get the 5vdc to power the pi... add a jack to the edge of the frame for the 12vdc adapter and you only have 1 power cable to plug in somewhere.</p>
<p>I'm making this to have a use for an old Pi B board that I just can't bring myself to throw away. I picked up a driver board, traced down 5 VDC and ground, and connected it to the pi for power there. Overall things are working really well on the bench (okay - the footstool :)), so now it's woodworking time. <br><br>My question is - has anyone made the python code for the buttons work any more efficiently? It's taking up around 50% CPU, and I'd really like to cut that down. I already had to switch from Iceweasel to Epiphany for performance reason, which was working fine with me. That such a simple piece of code is strangling the CPU is concerning, but despite having passed a Coursera class in python programming - I know when to admit I'm in over my head and tweaking python is a weakness of mine. </p>
<p>How you connect raspberry to controller for power?</p>
I just traced out some of the connectors on the driver display board, cut up a USB cable, and soldered them in. After that, it was just a matter of plugging the pi into it.
<p>FYI, your high cpu usage is caused by a bug in iceweasel.. If there are any animations on a screen it will eat up processor. I've been playing with a few options just because I don't want my pi running at 50% all the time. I'll post something once I get it, but it'll most likely just be a different forecast embed. </p>
<p>I deleted all unnessacry files and just started from ''scratch'' My Pi B+ couldn't run Iceweasal because of it being too big.</p>
<p>Yeah, same here. Had to go with Epiphany on my B board above. </p><p>It has occasional issues loading things, but a refresh fixes them. </p>
<p>Thanks for the heads up on this. Sucks to hear it because I've been working on a hybrid page that uses JavaScript to switch between the weather radar and a Google traffic map periodically. Any suggestions for performance improvements that could be made would be appreciated.</p>

About This Instructable




More by ozua:Raspberry Pi: Wall Mounted Calendar and Notification Center 
Add instructable to: