a light bulb moment

Why not turn a one-key keyboard into a Philips Hue switch?

I came up with the idea for vhue (vue + hue) because I wanted to use a big switch as a remote control for my Phillips Hue lights.

I have always wanted to build a desktop application with Electron, and after taking a couple of Vue Mastery courses, I decided to build this app with Electron.js and Vue.

Completed

2019

Client

Personal Project

Role

Web Developer / UI/UX Designer
made with
vue
vuex
electron
stylus
axios
webpack
sketch

reading a lot of api docs

Committing every day

I used the electron-vue boilerplate since it did a lot of the heavy lifting such as providing hot reloading, a file that generates my Vuex store on the fly.

API calls made simple with axios

Initially, I planned to use the node-hue-api package, but it lacked some essential API calls so I decided to create my own methods using axios. Honestly, the axios approach ended up being the right call (get it?) since I designed my API calls in a specific way and had complete exposure to the response data.

Vue + Vuex

Coming from React and understanding the notion of reactivity made writing Vue fairly simple. While easy to learn, I did hit some bumps in the road when writing Vue components but most of those issues were resolved when I read the Vue API docs. One particular issue I had was in the light component, a card that gives a simple overview of a particular Hue light. I initially had a watcher updating the light but after reading the docs, I realized the watcher method was redundant and there was a bug in my file that made an API call after setting up the Hue bridge.

Vuex made it easy to store essential data like the user’s Hue API token and with the use of electron vuex, which is just an electron store wrapper, the Vuex store persisted even after quitting the app. In addition, I stored all the response data from the Hue API calls in order for the Vue components to update via store getters.

Electron

I used the Electron API to create a method to reset the Vuex store and add a global shortcut. With the global shortcut, a user can toggle a group of lights, even when the app is not focused; this global shortcut was the key to making my big switch act as a dimmer switch for my lights.

always a bright side

Thank you USPS

An app comes about because you want to do something in a particular way and with vhue, I created a rather elaborate solution to turn on my Phillips Hue lights. While there are more features that I can add, some which I plan to add, I can say that vhue 1.0 was a great way to cement the fundamentals of Vue and Vuex.

Also, this came about not only because I wanted to use my big switch as a switch but because USPS delivered my Philips Hue switch to the wrong house.