Display Time, Weather and an Instagram Photo on a Raspberry Pi using Balena, Electron, and Vue.js

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

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.