Posted by This is a Raspberry Pi project to display the time and weather next to the most recent image from an Instagram feed. I bought the Element 14 7″ Pi Touchscreen LCD Display and a Raspberry Pi 3+ at Micro Center when we were on our honeymoon in New York last October with the intent of using it to experiment with writing JavaScript applications on a Raspberry Pi. The code can be found on GitHub.
Vue.js is my current favorite JavaScript framework that I have been using in many of my recent projects. I found it to have a fairly low learning curve and it just seems fairly intuitive to me.
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
The project uses Balena (formerly Resin.io) to deploy the Electron app to the Raspberry Pi. I like that Balena packages the Electron app into a container and deploys it to the Raspberry Pi with a simple git push command.
The project is based off of resin-electron-vue which is a boilerplate for developing kiosks, digital signage or other human-machine interaction projects.
Weather information comes from the DarkSky API. Dark Sky has disabled cross-origin resource sharing (CORS) on their servers, so to get the API to work in the development environment, I use CORS Anywhere which enables cross-origin requests to anywhere.
The application uses the vue-instagram Vue component to display the most recent image from and Instagram feed.
Storing a DarkSky API Key for Development and Production
Development
Create a .env file in the root directory of your project.
Add an environment variable containing your DarkSky API key on a new line in the form of DARKSKY=YOUR_API_KEY_HERE
Add an environment variable containing your Instagram token on a new line in the form of INSTAGRAM=YOUR_TOKEN_HERE
Production
For a Balena (formerly Resin.io) device, create a DARKSKY device variable and an INSTAGRAM device variable in the dashboard.
Build Setup
# install dependencies yarn install # serve with hot reload at localhost:9080 yarn run dev # build electron application for production yarn run build # lint all JS/Vue component files in `src/` yarn run lint
Feature Wish List
- Serve up display in a web page remotely
Some Things Learned From Working On This Project
- Balena on the Raspberry Pi
https://www.balena.io/docs/learn/getting-started/raspberrypi3/nodejs/
- Rotating the Raspberry Pi display in a Balena application
In the device configuration tab of the Balena dashboard, create a RESIN_HOST_CONFIG_lcd_rotate custom environment variable and give it a value of 2 to rotate the Raspberry Pi display 180 degrees.
- CSS Flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- Working with the DarkSky API and using cors-anywhere to access the API in a development environment
https://darksky.net/dev
https://cors-anywhere.herokuapp.com/
- Skycons and the vue-skycon NPM module
https://darkskyapp.github.io/skycons/
https://github.com/timleland/vue-skycon
This project was generated with electron-vue@3a1e893 using vue-cli.
Integrated with resin based on resin-electronjs
Documentation about the original structure can be found here.
The weather icons used in this project come from Weather Icons