A while back I acquired a Raspberry PI from the recruiter that got me my current job. I wasn't sure what to do with it for a while but I eventually ran across a wall-board someone had made, I believe it was this one https://imgur.com/gallery/z94Vr. I thought it was a fabulous idea so I set out to build my own. However I made a few modifications.
- I made mine landscape instead of portrait
- I used JavaScript
- I rolled my own UI code
- I used Node-Red (which ships with the PI) to make the buttons work
Parts
As I said, the Raspberry PI was given to me. I found a used monitor on ebay that I paid around $40 for. I bought the buttons on Amazon and the frame I built myself from spare wood I had.
Code
I believe the original used Python to manage the buttons and some light HTML and JavaScript for the display. Python is a solid choice but I'm a frontend developer so I wanted to see if I could work with JavaScript. It turns out you can. The Raspberry PI ships with a tool called Node-Red which allows you to capture the events from the hardware and call your own code. I setup Socket.io in my UI so that I could send events from Node-Red to change views when the buttons were pushed.
When the UI receives the Socket.io event from the button push it changes to the corresponding view. The UI is based on my Web Starter Kit which includes both a frontend (written in React) and a backend (powered by Loopback). Loopback uses express so I've added some code to server.js to handle the Socket.io events.
if (require.main === module) {
app.io = require('socket.io')(app.start());
app.io.on('connection', function onConnection(socket) {
socket.on('bus', function onBus() {
socket.broadcast.emit('redirect-bus');
});
socket.on('end', function onEnd() {
socket.disconnect();
});
socket.on('weather', function onWeather() {
socket.broadcast.emit('redirect-weather');
});
});
}
Finally the frontend handles the events from the server to do the actual navigation changes
export function pushNavigation() {
const socket = client(`http://${window.location.host}`);
socket.on('redirect-bus', function redirectBus() {
window.location.href = '/bus';
});
socket.on('redirect-weather', function redirectWeather() {
window.location.href = '/';
});
}
Weather
For a long time I used the Open Weather API to provide the data for the weather view. One of the items I display is the location I'm in, Winchester VA. A month or so ago however Open Weather started to return various other cities around Winchester even though I provided the zip code to the API. When it started displaying a city in PA I decided it was time to move on because not only was the city text wrong, the weather was wrong as well. I've since moved over to Wunderground and so far everything seems to be working well. I also kind of like their forecast a little better and they also provide icons with the API return that you can use if you like. The background color changes depending on the current temperature. It ranges from blue to orange depending on how cold or hot it is respectively. Today you can see its pretty chilly so we have a nice blue background color. The two big numbers on the left are the current temperatures, the top one is in Fahrenheit and the bottom is in Celsius. I did this for two reasons. First, it helps the kids learn about Celsius and Fahrenheit and two, I work with some people in the UK and I would like to tell them what the temperature is here in a format they can relate too.
Bus
The bus timer is pretty simple. There is a json file that contains a schedule of events, the events being holidays and pickup times:
{
"holidays": [
{"begin": [2018, 1, 15], "end": [2018, 1, 15]}
],
"pickups": [
"07:06:00",
"07:22:00"
]
}
The timer runs on the weather page (where it sits most of the time) and when it gets 10 minutes before the next timer it automatically switches over to the bus page and begins a 10 minute count down. When the count down reaches 0 a bell sound rings and the kids know its time to get out to the bus stop. There is also timer code on the bus page so it automatically switches back to the weather 30 seconds after the bell goes off (maybe its a minute I can't remember now). On holidays and weekends, the page still switches to the bus timer, but it gives a “No school today” message, then switches back to the weather.
Calendar
I've added two extra buttons because I have an idea for two more items I would like to add. The first is a calendar. My problem is I have not found one that meets my requirements. It all begins from the fact that decades ago, long before yahoo mail, gmail, hotmail, etc… you used to get an email address from your Internet provider. I switched providers several times and my email address kept changing. I got tired of this and registered my own domain and started running my own mail server. Eventually gmail came along, and shortly after that Google Apps. Google Apps brought with it the power of gmail but you could bring along your own domain. When it first came out you could get it for free. They provided up to 50 accounts with it. They eventually started weaning that down to 25, 10, 5, then eventually you had to start paying for it. However all the early adopter like myself were grandfather-ed in. So I have two domains on google apps that still have up to 50 accounts for free. The problem is, Google Apps is not quite the same as gmail. The Google calendar is one of those areas. With the calendar in Google Apps, you can only give people read only permission to the calendar if they are not one of the accounts in your domain. With the regular Google calendar, you get a family calendar that your family can share. I've just recently created a gmail account because I wanted to purchase YouTube Red and you're supposed to be able to share that with your family…but there is no family concept on Google Apps so I had to register a gmail account. Now that I have that I think I may use the Google calendar for button 3. What we have been using is the iCloud calendar which works wonderfully for our current use case. The problem with the iCloud calendar is that it has no API so trying to create something for my PI wall proved to be difficult.
Room Temperatures
My idea for the fourth button will be an iot project. I would like to put temperature sensors in every room of the house and display the aggregates on button four of the PI-wall. I've built one sensor. My current problem with the sensor is taking it from the breadboard and figuring out some sort of housing for it. I think I could build something for a 3D printer, but I don't have a 3D printer…yet. I've even contemplated just putting them in each room, breadboard, wires and all and just calling it electronic art :) I think I have enough parts to make 2 more but I need like around 10 or 11 if I really want one in every room. I think I'll create a new post for this project to give those that may be interested more in depth information. Here is what I have so far:
Tags: #raspberry pi #javascript
Categories: #technology