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
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
For a Balena (formerly Resin.io) device, create a DARKSKY device variable and an INSTAGRAM device variable in the dashboard.
# 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
- 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
- Working with the DarkSky API and using cors-anywhere to access the API in a development environment
- Skycons and the vue-skycon NPM module
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