loading

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.
<p>from where can I get old laptop screens </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>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>
How you hang it to wall?<br><br>Which material is the frame?
<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>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>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>
Yours look awesome. A guide would be even more awesome?
<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>
<p>Can you upload all index?</p>
Can't really upload my whole index.html as it has the Google info linked to my personal calendar. :)<br> <br> However, I have updated how my piCal looks / works. I found the previous weather radar to occasionally cause resource issues because it was trying to do animation. To eliminate that, I have a script that I created (/usr/userscripts/radargrab) downloading the NOAA radar for my area every five minutes, and then changing the size of the picture to match what I want on my screen. I then updated my index.html to just grab that image.<br> <br> Here's my index.html, less the calendar info:<br> &lt;html&gt;<br> &lt;head&gt;<br> &lt;meta http-equiv=&quot;refresh&quot; content=&quot;900&quot;&gt;<br> &lt;script&gt;<br> <br> function setFocus() {<br> &nbsp;&nbsp;&nbsp; var iframe = document.getElementById(&quot;calender&quot;);<br> &nbsp;&nbsp;&nbsp; iframe.contentWindow.focus();<br> }<br> <br> <br> &lt;/script&gt;<br> &lt;/head&gt;<br> <br> &lt;body onLoad=&quot;setFocus()&quot;&gt;<br> &lt;br&gt;<br> &lt;iframe INSERT YOUR CALENDAR CODE HERE id=&quot;calender&quot;&gt;&lt;/iframe&gt;<br> &lt;br&gt;<br> &lt;iframe style=&quot;align:left&quot;id=&quot;forecast_embed&quot; type=&quot;text/html&quot; frameborder=&quot;0&quot; height=&quot;245px&quot; width=&quot;750px&quot; src=&quot;http://forecast.io/embed/#lat=35.2670&amp;lon=-81.1016&amp;name=Lowell,NC&amp;color=#00aaff&amp;font=Georgia&amp;units=us&quot;&gt; &lt;/iframe&gt;<br> &lt;br&gt;<br> &lt;img src=&quot;radar.jpg&quot; alt=&quot;Local Radar&quot;&gt;<br> &lt;/body&gt;<br> &lt;/html&gt;<br> <br> Here's the script I have running every five minutes:<br> #!/bin/bash<br> <br> cd /var/www/html<br> rm -f radar.jpg clt.gif<br> wget -q http://images.intellicast.com/WxImages/Radar/clt.gif<br> convert clt.gif -resize 745x450! radar.jpg<br> <br> I then added this to root's crontab:<br> */5 * * * * /usr/userscripts/radargrab<br> <br> I like how it works, and my piCal seems to have gotten some attention. My girlfriend has officially asked me to make her a piCal for her use. &quot;Sure, find me a working laptop screen&quot; was the reply she received. :)
Perfect! Thanks men, i want to integrate a clock but i have some problem.<br><br>When i edit the index and insert clock code, i go to my web and the calenfar open but then it dissapears and then only shows clock....
<p><a href="http://time.is/widgets/California_City" rel="nofollow">http://time.is/widgets/California_City</a></p><p>You can type in the city name in the upper right corner (search icon) translate the page so you will see it in English.</p><p>This works perfectly for me</p>
<p>Thanks men!</p>
Here's what my new index.html looks like when combined with the script I wrote and the cron job.
<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>I just bought a cable from a dollar store, cut the end off, traced the wires to make sure which were the wires I needed and soldered accordingly. </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>Can you post your entire HTML file? I really like the look of that..</p><p>Also, what size monitor is your setup?</p><p>Thanks!</p>
Actually, there's not much to post that's different aside from the weather radar. It's just the code for the Google Calendar, the repurposed code for the weather stats that ouza posted in his index.html example, and the snippet of code above for the weather radar.<br> <br> As for the screen, it's an HB156WX that I pulled out of a very dead Toshiba laptop that my girlfriend had. (Note to self: Girlfriend Hulk-smashed a misbehaving laptop. Might want to avoid getting her too angry.) :)
<p>Thanks for the reply.. So is the screen you are using a 15.6&quot; with a 1280*800 resolution? </p><p>I'm just trying to get a feel of what can fit and how it would look on what size screen.</p><p>Thanks</p>
<p>I think I've got it in 1366x768 resolution, but I can look it up once I fire it up again. I have everything to get it mounted and hope to assemble everything together. <br><br>Don't get me wrong - it looks good on the foot stool and all, but I'd prefer it on the wall. ;)</p>
<p>Where did you get the html embed for the weather radar? I have been looking around but don't see anything for that part of it.</p>
<p>I forget exactly how I found it, but this is the code from my page:</p><p>img src=&quot;http://www.adiabatic.weather.net/cgi-bin/razradar.cgi?zipcode=28098&amp;width=750&amp;height=450&quot; width=&quot;750&quot; height=&quot;450&quot; alt=&quot;Local Radar&quot;</p><p>Place appropriate brackets around it when you use it. If I included those, it wouldn't let me paste the code in. :)</p>
<p>Hey, did you run into any problems viewing your events from google? Currently, my webpage will not view any events added to it. On my webpage all I see is a blank calendar. :(</p>

About This Instructable

231,867views

1,985favorites

License:

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