Home Dashboard

January 15, 2017

To play with Kiosk ideas for the Institute I purchased a RaspberryPi 3 and a 7" touch screen. While the screen is a little small for a Kiosk, its the perfect size for a desk dashboard! Taking some inspiration from Spatie's Dashboard, I built my own using Laravel and VueJS.

App

Right now there are only 5 components, since that's about all that will fit on the RaspberryPi screen. 1. Home 1. Weather 1. Clock 1. Pomodoro Timer 1. Timer Modal

Home

Home.vue is the main component that all of the other components are loaded into. It is also responsible for the background and playing a sound when the timer is complete.

Background

For the background I wanted it to be similar to the backgrounds I see on my Chromecast. I originally implemented calls to the Pixabay API, however I found that a lot of the photos were distracting. I ended up downloading all of the photos from Alex Meub's Chromecast archive and serving them in random order from the /api/images endpoint. The Home.vue component makes a call to that endpoint when created, and every thirty minutes a new one is selected.

Weather

The weather panel consists of two get calls to the /api/weather and /api/forecast endpoints. Both require a latitude and longitude to be passed as query params. The Weather.vue component defaults these values to my area, if the values cannot be retrieved from the Navigator.geolocation API. From the backend the two endpoints then call on the Open Weather Map API to get the weather data. I transform the data received from the api into an array that only has the data needed for the frontend, so the components stay nice and simple. I have two tests to verify the structure remains consistent.

Clock

I used almost the exact same implementation as Spatie's Dashboard. I just removed their Grid component and changed the template to be a Bootstrap panel.

Timer

To keep focused I like to try to implement the Pomodoro technique, but I've tried a lot of timers and discovered the quintessential developer problem of they just didn't work the way I wanted the too. So I built my own very simple version. Simply put, it works by adding the amount of time (i.e 25 minutes) is added to the current time and is saved to the end variable. Every second now gets set to the current time. If end <= now the interval is cleared, now and end are reset, and the component emits a timerEnded event so the parent component (Home.vue) can open the Timer Modal and start the alert sound.

Timer Modal

A very simple modal component that only has the template and styles, everything else is handled by Home.vue.

Raspberry Pi

Running the dashboard I have a RaspberryPi 3 with a connected RaspberryPi 7" touch screen. The Pi is running Raspbian Jessie with Pixel. On startup I open the terminal and run

chromium-browser --kiosk home.andreamswick.com

Which opens the website in full-screen mode. I know I could do this automatically by altering the startup script, but at this point it's not a necessity.

Personal Laravel VueJS Bootstrap raspberrypi