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.

AngularJS: Triggering a Javscript function after rendering an Element Directive

I recently tried to find an elegant solution to a conundrum with AngularJS, but could only find one working solution.

My problem:

I was trying to trigger a Javascript function that needed to be run after all of the elements on a page were loaded. (In my case, after an AngularJS element directive had run and loaded a grid view dynamically). I realized that since I was trying to alter a DOM element after a DOM change that was caused by a directive, I could not use ng-view and $viewContentLoaded, a normal JQuery $(document).ready call, or an onChange event of the div (since that only applies to input types).

The solution:

on the html page side I simply added the “element-watch” tag to the div which already had my element directive.

Diving into AngularJS

I’ve heard the name “AngularJS” get dropped here and there for a long time now, so I figured that it was time I delved into it a little to see what the fuss is all about.

Why AngularJS?

  1. They do a good job of making it easy to develop a website in the typical MVC (model, view, controller) fashion.
  2. Re-usability / no-repetitiveness of code with directives for elements, attributes, and class names and ng-repeat
  3. Easy to use filters on objects/data.

Here are some of what I learned from my quick dive into the world of AngularJS:

  • Within a controller, it is always better to create a reference to “this”
  • No need to pull in all the separate javascript files anymore. Bootstrap, JQuery, etc. is all included.
  • create an angular module for every “app”, website, or object based on functionality.
  • add controllers to the app for all reusable functionality / better modeling.
  • using the “ng-{keyword}” tag in your html objects gives you a massive amount of flexibility in showing, hiding, repeating, HTML elements based on JSON data, and 2-way data binding.
  • === is a comparison similar to ==
  • ng-class=”{className:variable === 3}” setting of a class based on a variable
  • INCREDIBLY EASY to use JSON data
  • forms have validity BUILT IN and allow you to toggle things based on the value
  • CSS formatting for input types:
  • Include html templates/files in other pages with:
  • Has services built in:
    • $http for fetching JSON data
    • $log for login messages to the javscript console
    • $filter for filtering an array
    • Example:

Would I use it regularly?

I believe that I have found my replacement for jquery and a good model for javascript development for the web. I definitely will be using it for most (if not all) of my websites.

Resources:

 

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