Creating the Smart Home Universal Remote

It’s been a while since I last made a smart home device, not because my home is fully automated or because there wasn’t a need for another device, but because I still live in a rented unit and didn’t want to to spend the time making and setting up custom devices that would need to be torn down in the future.

Well the other day I realized that I could build another home automation device without a long-term stationary placement requirement! Not too long ago I built voice integration into my smart home system using the Amazon Echo (check out the articles here). While this worked well for moments without ambient noise, it failed to work well during parties, while watching movies, or while listening to music on my sound system. Obviously I needed another way to interact with these smart home devices and the current method of pulling out a phone or tablet, unlocking it, then switching between apps just didn’t appeal to me. What I really wanted was a universal remote that could also talk to my smart home devices.

So I started designing and planning out the features that I would want in my smart home controller and it had to be wireless charged (because replacing batteries or being tethered to a wall is archaic). Here’s the requirements I came up with:

Essentially, the goal is to get it all placed inside of an enclosure like this:

universal-button

Here’s a video of the very early prototype’s functionality:

As well as a more in depth Hackster post:

https://www.hackster.io/anthony-ngu/universal-smart-home-remote-wirelessly-powered-896f3c

Generating Icons and Splash Screens with Ionic

One of the issues I’ve always had with mobile development is needing to scale images to support the multiple icon sizes and splash screen sizes. While customized icons and splash screens for each device is a valuable asset for any application, I’ve always viewed it as this tiring and monotonous task that needs to get done for mobile development.

Enter the  ionic resources  command. Now that I’ve been doing more mobile development with the Ionic framework and Cordova, I realized that they’ve got a plethora of tools to make mobile development easier.

In an Ionic project there is a “resources” folder that contains icon.png  and splash.png along with android and ios folders. If you run  ionic resources  from the command line within the Ionic project, it will automatically take the icon.png and splash.png and scale them or crop them to fit the appropriate sizes.

If you just want to regenerate the icons or splash pages only, use these commands:

ionic resources --icon

ionic resources --splash

For more info check out the Ionic Blog post: http://blog.ionic.io/automating-icons-and-splash-screens/

 

Amazon Echo Has Promise for the Future

I got an invite to buy an Amazon Echo a while ago, but didn’t want to purchase one because it didn’t seem particularly useful. It’s only advantage to me was the SDK for speech that might be of use in the future.

After seeing the initial intro video and how scripted the commands had to be, I couldn’t justify the purchase.

If I wanted to get answers to questions I have, I would just pull out my phone and type it out rather than dealing with Speech-To-Text inadequacies when asking a long question. If I wanted to add something to a list, I would write it down on my notes or use my phone for the same reason.

I could play music using a voice command, but to be limited to my Amazon Music Library, Prime Music, or Pandora? No thanks, my audio receiver will do a better job with the audio quality in my home anyways.

On top of that, waiting for a delivery date a couple months later? No thanks.

The Turning Point

That was it, I forgot all about the product until recently. That was when I saw a couple Youtube videos showcasing hacks of the system to configure voice commands for other things! Now this is where it really gains some useful functionality.

Imagine using the mic array and speaker in the Echo to pick up your voice commands and give you audio feedback to commands you create yourself. As a developer, this would have unlimited possibilities in the home! My heart skipped a beat once I saw someone using it for these purposes despite the lack of an official SDK and I immediately started imagining the improvements I could make to my current projects in the home automation space and quickly came up with a couple scenarios that I “need” it for.

There are the typical scenarios like turning on or off appliances and lights in your home, but then there are bigger home automation scenarios where you would communicate with the Echo like you would a personal assistant.

Imagine waking up in the morning and talking to Echo and having it relay specific things you care about like the weather, news, calendar updates, family updates, etc. while also having it turn on the shower so it’s running at your preferred temperature by the time you jump in. Have it make your coffee so that when you get out of the shower, it’s ready. No need to preset things the day before, or stick to a generic schedule. It’s all voice activated.

Now imagine coming home from a day at work and asking it to turn on a specific “mood” for your home, like “summer breeze” that would open your blinds, open your windows, put on some light music, turn on just the right amount of lighting, etc. Have your home work for you!

It looks like Amazon is starting to see the value of this use case with the Echo too, because they recently announced an update that would allow their default voice commands to work with WeMo switches and Hue lights, but those are just basic scenarios.

After all my excitement about being able to create custom commands, I decided to purchase one (despite the couple months I’ll have to wait to finally receive it).

Still a Couple Faults

  • Works well for one room or an open-concept home, but you’ll need separate ones for each room if you want it to work everywhere. (Or maybe an extension of it in other rooms?)
  • From the demos online where people use it, it looks like their speech recognition system isn’t up to par with most of the other speech recognition system, yet.

An Awesome Thumbnail Grid with Expandable Preview

While looking for beautiful ways to display projects, I stumbled on this tutorial: http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview

The code for which is located here: https://github.com/codrops/ThumbnailGridExpandingPreview

It is purely CSS and javascrip and creates a responsive grid layout that analyzes the location of the object you click and scrolls/resizes appropriately. I’ll DEFINITELY be using this in a few projects in the future.

Add Speech Recognition Easily!

Just found out about a cool HTML5 Web API that is built into Google Chrome.

microphonedisabled

Since it is vendor prefixed, this API will only work if a user’s browser supports it (for now Chrome). The cool thing about it though is that in order to use it on your site, all you need to do is write some javascript that checks for “webkitSpeechRecognition” and then creates an instance of it, and then use it. Combine this with your IoT devices and you’ve got voice enabled commands for your interacting with your devices!

This tutorial walks you through the basics of how it gets integrated:
http://updates.html5rocks.com/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API

This is the full sample: https://github.com/GoogleChrome/webplatform-samples