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>I'd like to have the custom webpage display a to-do list, or a shopping list. I'd like to be able to update that list remotely using an iPhone app, and then have it sync with the webpage and display the list to us. Can anybody suggest how best to do this? Are there are services with iPhone apps and the ability to embed code in a webpage for a live list which could do this?</p><p>Thanks in advance!</p>
<p><a href="https://www.gqueues.com/help/publishing" rel="nofollow">https://www.gqueues.com/help/publishing</a></p><p><a href="https://www.gqueues.com/" rel="nofollow">https://www.gqueues.com/</a></p><p>Is this what you mean?</p><p>Tasks that can be embeded in webpage and has an iPhone app</p>
<p>Hello I was just wondering how you guys got the calendar vertical instead of horizontal?</p>
<p>What do you mean?</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>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>I'm wondering if there are specific parts that we should be careful while assembling due to electricity. I know its a broad question but I haven't worked with bare electronics before and I don't want to find any of this out the hard way. So if anyone would be kind enough to mention the steps where I should be especially careful, and the reasononing why, that would be appreciated. </p>
<p>You should always be careful working with electricity, but nothing in this project SHOULD require any extra caution electricity-wise. </p>
<p>thanks everyone who contributed to this &quot;instructable&quot;, as i pretty much gathered everything i needed from it to make what you see. I still need to put it in a nice frame, and then flush mount it in the wall. I am not a programmer, but i can follow directions..or rather i can do a mean cut &amp; paste. As you can see though, i have a little bit of real estate left on my screen which i was just going to fill in with some sort of local traffic map.....but then i got to thinking it would be cool to use as some sort of &quot;teaching&quot; space for my 7yr old. Something to do in the morning when we are eating breakfast before school. Example: quiz will begin in 30 seconds - Question 1. What is the capital of Illinois? You have 10 seconds...9...8...7...6...5...4...3...2...1...Then displays the answer. If someone would be awesome enough to provide the html for that, i would be most grateful...mind you i don't expect all the states and what not, if you just show and example of how its done with one state, i'm sure (i hope) i could then complete the code with the remaining states...would be cool if the questions could be &quot;randomized&quot; .......and then possibly modify it going forward when we move on to something else...i.e. periodic table, oceans, continents, etc....i will of course attempt this on my own and post whatever i find if anyone is interested. Much appreciated!</p>
<p>How would you control the quiz?</p>
<p>well...ideally it would &quot;start&quot; in the morning when we are having breakfast, say 6:30am - then the questions would just randomly cycle thru questions until about 7:30 when we take the kids to school - no real control I guess, just a start / finish time - then during &quot;off quiz&quot; hours it would just have some local news headlines, or maybe I'll put a local traffic map , etc...</p><p>i'm still searching for the perfect code to manipulate for my desired application: \</p>
<p>I sent you a message Friday with something I had put together for you. Pretty basic, but its a start. If you're interested, We can improve it as you see fit. You can check your inbox for the full message, but here is the link:</p><p><a href="https://jsfiddle.net/JagerSOE/oa58L4jb/" rel="nofollow">https://jsfiddle.net/JagerSOE/oa58L4jb/</a></p><p>If interested, send me a message. You're idea would work, we could set it up to start at a certain time and run for an hour, having anything else running in &quot;off quiz hours&quot; if you would like. Unless a better means is available.</p><p>------------------------</p><p>Edit: Updated the link above</p>
<p>Quick question for anyone willing to help. I am 99% complete; this is my FIRST experience with both RPi and &quot;coding,&quot; however, as you can see from the image I cannot get the google calendar embed to display events! I think it's something on the Google end, because I have also unchecked the boxes for tabs and print icon, yet those items remain once embedded. Does anyone have any suggestions? Very fun, if challenging (for me) Instructable!</p>
<p>I was having the same issues for weeks and I just fixed this. The code he provides in the instructable completely delete it!. Go to google and paste your HTML code where you just deleted the code from! </p>
<p>Thank you so much; it works!</p>
<p>You're welcome. Hopefully he sees this and updates where he places the *REPLACE* in the html file!</p>
<p>Can you elaborate on this? I am having a similar problem, the calendars are being displayed; however, the title, timezone, etc. are also being displayed and I do not want that.</p>
<p>As far as certain things being shown that you do now want to. I would think it would be during the setup part of the Google calendar, where you can edit whats included and what is not. Also, my only problem was that I could not see any of the events not extra stuff being displayed. </p>
<p>I checked and confirmed the google calendar step was correct. When I check the page from my computer it displays correctly but not on the pi's display...maybe it has something to do with iceweasel? </p>
<p>Something is up with iceweasel. I can't get it to display the calendar, either.</p>
<p>Once I signed into google on iceweasel and made the calendar shared, it immediately started working correctly. </p><p>Before I did this, the formatting was messed up. It would show all the calendar events as the same color, calendars were missing, and there were additional lines in the page that would not appear when I accessed the page from my computer. Hope this helps.</p>
<p>Careful with that... if you share your google calendar and make it public, it's visible via Google searches. That would mean that someone could potentially figure out when you aren't at home and have fun with your nice stuff. </p>
<p>Noted, thanks for the help. I turned off the sharing. </p>
Do I need to use a breadboard to make the buttons work or is there a way to connect them straight to the Pi?
<p>It might seem silly but how did you set up your webpages? Which service do you use for that?</p><p>Because I know only wix.com and others like this with a lot of advertising.</p><p>So anybody that can help me out?</p>
​Hi Grtz,<br>Following the instructions gets you to download Apache 2 which hosts the website on your RPi. This requires no hosting or domain purchase. They are private sites only accessible by you from your RPi and your home network via your IP address. As for the black background I just put in in the html on the second line.<br>Hope this helps.
Thanks a lot<br>One more question: do I have to install Apache in pc or on my RPi
On your RPi, <br>In the terminal type:<br>sudo apt-get install Apache 2 <br><br>Type the IP into the browser on your computer to view the site on your local network.
<p>Finally done, made it as easy to read and monochromatic as possible :)</p>
<p>can it be done with a computer instead of a raspberry?</p>
<p>Yep. Take a look at this:</p><p><a href="http://www.instructables.com/id/Touchscreen-Wall-Mounted-Family-Sync-Home-Control-/" rel="nofollow">http://www.instructables.com/id/Touchscreen-Wall-Mounted-Family-Sync-Home-Control-/</a></p>
<p>Having an issue with the buttons. When I start it up and the webpage loads the buttons do not do anything. However, if I use a mouse and click anywhere on the calendar the buttons work perfectly. Any help?</p>
<p>I figured it out. I had removed the id when I replaced the sample calendar with my own google calendar. adding id=kallender to the end of my calendar corrected the problem.</p>
<p>Anyone can tell me hoe to connect the buttons? Igot them working, but I wonder how to connect the cables. Can I connect the ground of all 3 buttons to the same ground pin?<br>And does anyone know where to can these black (jumper like) connectors where I can connect mij cables to the GPIO pins to?<br>Thank you in advance! When it's finished I'll post some pics =)</p>
<p>having an issue with the buttons. i have everything installed and the gpio pins setup correctly i think - but when i go to test i get this - anyone have an idea on how to resolve this?</p><p>i get this:</p><p>pi@raspberrypi:~ $ sudo python switch.py</p><p>Traceback (most recent call last):</p><p> File &quot;switch.py&quot;, line 14, in &lt;module&gt;</p><p> uinput.KEY_F5,</p><p> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 161, in __init__self.__uinput_fd = _libsuinput.suinput_open()</p><p> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 64, in _error_handler</p><p> raise OSError(code, os.strerror(code))</p><p>OSError: [Errno 2] No such file or directory</p>
<p>Try replacing 'sudo python switch.py' with 'sudo python ./switch.py' or using the entire pathname depending on where the python file is.</p>
<p>Hi, i am having the same problem with my switch.py script. i have tried both commands. See below</p><blockquote><em>pi@raspberrypi:~/Documents $ <strong>sudo python switch.py</strong><br>Traceback (most recent call last):<br> File &quot;switch.py&quot;, line 14, in &lt;module&gt;<br> uinput.KEY_F5,<br> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 161, in __init__<br> self.__uinput_fd = _libsuinput.suinput_open()<br> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 64, in _error_handler<br> raise OSError(code, os.strerror(code))<br>OSError: [Errno 2] No such file or directory</em></blockquote><blockquote>and<em><br>pi@raspberrypi:~/Documents $ <strong>sudo python ./switch.py</strong><br>Traceback (most recent call last):<br> File &quot;./switch.py&quot;, line 14, in &lt;module&gt;<br> uinput.KEY_F5,<br> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 161, in __init__<br> self.__uinput_fd = _libsuinput.suinput_open()<br> File &quot;/usr/local/lib/python2.7/dist-packages/uinput/__init__.py&quot;, line 64, in _error_handler<br> raise OSError(code, os.strerror(code))<br>OSError: [Errno 2] No such file or directory</em></blockquote><p>but get the same with both.</p><p>Any help would be greatly appreciated</p>
<p>got this working, thanks. im using the extended switch file but long press still isnt working for the reload. oh well still works!</p>
<p>Hi, I;m trying to attach the buttons to the GPIO pins and I have 19/20/21 in but my monitor won't turn on when I connect the fourth button to any of the other pins. I have tried all of them. I am using a ASI monitor instead of a laptop screen and controller board. Any suggestions?</p>
<p>I am having an issue with the buttons not working until after I have clicked on the Google calendar. Any ideas on how to fix this?</p>
<p>Thanks so much for this awesome project! I added a few things to this. I included an auto refresh line line index.html file and made it so the screen doesn't turn off. </p><p>Now the piCal page refreshes ever 30 minutes by itself and the display never goes to sleep!</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>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>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>
<p>I'm working on mine and trying to power it using a similar method. I found a spot that provides 5 VDC all the time whether the monitor is powered on or not, so I could easily solder a power cord to that, I'm just if it will provide enough amps for the Pi3. I read somewhere that the Pi3 really only peaks out at about 800ma, but I'm not sure how much this circuit is built to handle. It's basically the power connector from the main board of the monitor (that powers the led's) to the video controller board. Anyway, I suppose I could just try it, and I'm sure it will work, just not sure if the Pi3 is going to draw too many amps at any given time. </p><p>It really won't ever have anything plugged into the USB ports, but I think I want to put ports on the side in case I ever need to connect a keyboard and mouse to it. Otherwise, that would be all it would power.</p><p>Oh and this is from an LCD monitor, not a laptop monitor.</p>
<p>Where could I buy that usb cable you have connected to your controller board? And did you solder it onto the board? </p>
I bought a super short cord on eBay for $4.25. Here's the link for the one I got. (I'm not affiliated with them in any way.)<br> <br> <a href="http://www.ebay.com/itm/301482963024?_trksid=p2057872.m2749.l2649&ssPageName=STRK%3AMEBIDX%3AIT" rel="nofollow">http://www.ebay.com/itm/301482963024?_trksid=p2057872.m2749.l2649&amp;ssPageName=STRK%3AMEBIDX%3AIT </a><br> <br> Yes, I found a spot on the monitor driver board that had +5VDC regardless of whether the monitor was on or not, so I cut a cheap USB cord and soldered +5VDC and ground onto the controller board. That way I only had to run one power cord to my piCal instead of two.
<p>Where could I buy that usb cable you have connected to your controller board? And did you solder it onto the board? </p>
<p>Where could I buy that usb cable you have connected to your controller board? And did you solder it onto the board? </p>

About This Instructable




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