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.
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.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.
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.
The weather panel consists of two get calls to the
/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.
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.
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
variable. Every second
now gets set to the current time. If
end <= now the interval is cleared,
reset, and the component emits a
timerEnded event so the parent component (
Home.vue) can open the Timer Modal and
start the alert sound.
A very simple modal component that only has the template and styles, everything else is handled by
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.