Amazon Alexa, Smartthings, and Phillips Hue

Slowly, but surely, my home automation system is getting set up.  Although I shudder at the final costs, buying components a little at a time makes it more manageable.  So far I’ve got three rooms at least partially automated.

Smartthings Hub

The key to everything is the Smartthings Hub.  I chose it because it feels like this is going to be the standard, plus it plays pretty nicely with a lot of 3rd party equipment.  Our smart phones, which we always have on our person, serve as presence indicators, so if no one is home the Hub will turn off all connected lights.  Eventually I plan on connecting it to our security system.

Living Roomhome-how-it-works-home-monitoring-1b50cecc

The Setup: We have three standing lamps with Phillips Hue white and colored ambiance bulbs.  One of the lamps also has a task light with a Phillips Hue white bulbs.  Our LG TV, Samsung Amp, Roku and Xbox are all managed with a Harmony Elite remote.  For voice control we use an Amazon Dot with Alexa which I sometimes connect to an older Bose bluetooth speaker (more on this, below).  The Hue hub is also integrated with a Smartthings Hub

How it Works: With Alexa we can turn the lights on and off, dim them and turn the TV on and off.  We use the Harmony remote to change channels, although I’ve played around with doing it with Alexa, using the remote is more intuitive.  I love using Alexa to play my Audible books or music while knitting.  It is easy to pause or stop the book or music, or skips a song, while my hands are busy.  Through the Smartthings Hub I have rules set up to turn on the living rooms lights about 30 minutes before sunset if we are home.  I especially like being able to ask the score of a game I’m not watching (Alexa, what is the score of the Seahawks game?).

We also have Alexa hooked up to Todoist, so adding something to the shopping list is easy.  “Alexa, add toilet paper to the shopping list”. 

Problems:  The biggest issue we’ve encountered is with Alexa’s inability to answer simple questions such as what channel tv shows are on, what is the proper temperature for cooked chicken.  I realize that there are skills I can enable for these.  In fact, I have them enabled.  Trying to remember the correct syntax for each different skill is a pain, though.  If Google Home comes down in price to match the Dot I will probably get one just for questions, unless Alexa steps up.

On a side note, I chose not to use Google Home because of price point ($149 vs. $50) and I don’t trust Google not to discontinue it.  They don’t have a great track record with following through.  They cancelled Google Reader, which I was a whole-hearted user of, Google Voice hasn’t been updated in years and I suspect they will discontinue it, and have you heard of Google Glass lately?

 I also have some IFTTT routines set up, but they don’t work really well.  One especially I’m struggling with: the ability to send my shopping list to me via email.  It so far hasn’t worked, but I’ll keep trying.

Future:

My Office

The Setup: Phillips Hue White lights in the overhead light fixture, a Smartthings outlet attached to a behind-desk light strip, and a Smartthings motion detector.  

How it Works: The motion detector turns on the lights and keeps them on as long as there is movement in the room.  It won’t do this if I am away or the Hub is set for Sleep mode.  I’m still tweaking this a bit.  I have the motion detector set so it can “see” me at my desk, but it is a little low and my dog triggers it as well.  I’m not too worried about it, however, as the lights will go off after 15 minutes of no movement.  The motion detector also report temperature, which I display on my home control panel (more below).

Problems: None so far, other than the dog/motion detector thing.  

Future: Adding an Echo Dot and/or Google Home if the price point drops to $50.

Bedroom

The Setup: Our bedroom has a little room off of it with the sink for the bathroom, so both I put Phillips Hue White lights in the overhead light fixtures in both rooms.  Our home wiring doesn’t have a neutral wire, which means we can’t install smart switches, which I would prefer.  Instead I use a Phillips Hue dimmer switch to control the lights together and a switch cover for the manual switches.  I’ve just added an Echo Dot as well.

How it Works: We control the lights with either Alexa or the dimmer switch.  The Dot is new, but I plan to use it for an alarm clock, to play music, and to listen to NPR in the morning while we are getting ready.

Problems: We are still playing around with the lights. It isn’t ideal because my husband often goes to be later than I do and can’t turn on the bathroom light without turning on the bedroom light as well.  He forgets that he can use Alexa from the living room to turn on the bathroom light before he comes to bed.  Additionally, the switch is very cranky, often not working on the first try.    

Future: Once the security system is integrated we will be able to control it through the Dot in the bedroom.

Home Security System

Our home security system is monitored and uses a GoControl panel with z-wave sensors on our doors and windows, and a glass breakage detector.  Since the monitoring service isn’t really great (they call us instead of calling the police), at some point I’d like to cancel the monitoring and integrate everything with our Smartthings Hub, using the GoControl panel as a secondary controller.  There are some issues with this: see here and here.  

We also have two Arlo cameras outside, which Smartthings can integrate with already.  

Thermostat

At some point we will switch out our thermostat for an Ecobee3.  It would be cool to be able to sense in a door or window is open and not turn on the air conditioning.  We actually only open 3-4 windows in our house plus the back door (which we leave open in the summer), so I’m thinking of putting additional sensors just on those if I can’t get the home security system to play nicely with Smartthings.  The plus will be the ability to control the house temp when we are out of town and better control during our daily life.

Future

We are currently limited due to the lack of a neutral wire.  We have fluorescent lighting in the kitchen and “man cave”, as well as a downstairs office area with conventional lights that eventually will get switched out.  For the downstairs office I will probably just cover the existing switches as I did in the bedroom, and use a Smartthings switch.  As my husband has a tendency to leave the lights on all the time, a combination of motion detector and presence indicators will ensure the lights aren’t on if nobody is at home or downstairs.  

I’d also like to use moisture detectors in the laundry room, the closet with the water heater and under the refrigerator.  My husband’s uncle came home to several inches of water in his house after the refrigerator icemaker leaked for a week while on vacation.  

I’d also like to add a Ring doorbell to the front door and an Arlo security camera to the backdoor.

My ultimate wish?  Sonos speakers in the living room, my office, the downstairs office, bedroom, man cave, and outside.  Sonos and Amazon are working to make their system work better with Alexa, which will be sweet!

 

Fun with JQuery Selectors

Lately I’ve been getting into some advanced selector options with JQuery. Selectors are what the action takes place upon. For example, $(‘h2’) will select all of the <H2> tags while $(‘p[class=”summary”]) will choose all of the <p class=”summary”> blocks.

While these are easy, today I had a real challenge. I had markup similar to this:

1
2
3
4
5
6
7
8
9
10
11
12
<h2 id="stats">
  <span aria-hidden="true" data-icon=""></span>
  Stats
</h2>
<h2><span aria-hidden="true" data-icon=""></span>
   One
</h2>
<h2>Two</h2>
<h2>Three</h2>
<h2 id="four">Four</h2>
<h2 id="five">Five</h2>
<h2 id="six">Six</h2>

Three things needed to happen:

  • An icon needed to appear corresponding to a “data-icon” attribute, if present
  • <H2> tags without an id and without a specified icon needed a question mark
  • <H2> tags with an id, but without a specified icon needed an exclamation point

I’m using a custom icon font family generated at IcoMoon and the following CSS for the actual icons:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.svg#icomoon') format('svg'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

[data-icon]:before {
	font-family: 'icomoon';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.icon-alone {
  display: inline-block; /* Fix for clickability issue in WebKit */
  font-size: 36px;
  text-decoration:none;
  color:#60F;
}
.screen-reader-text { /* Reusable, toolbox kind of class */
  position: absolute;
  top: -9999px;
  left: -9999px;
}

Thanks to CSS-Tricks for their code and an explanation of icons and screen readers.

The Stats and One headers are our plain vanilla markup handled purely by CSS. They both have specific data-icon attributes on their associated spans.

First, let’s add the question mark icon to those headers which don’t have an id:

1
2
3
$('h2:not([id]):not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

<$(‘h2:not([id]):not(:has(span))’)> is the selector in in plain English it reads thus:
Get header tag of <H2>
that doesn’t have an id :not([id])
and doesn’t have a child span <:not(:has(span))>.

To each element that the selector finds we want to attach as the first item under the element a new span <( $(this).prepend(‘‘);>

We now our question mark icons. Next, we need our exclamation point icons for those headers that have an id, but lack a specified data-icon:

1
2
3
$('h2[id]:not(:has(span))').each(function(){
  $(this).prepend('<span aria-hidden="true" data-icon=""></span>');	
});

The selector is <$(‘h2[id]:not(:has(span))’)> and in plain English is reads:
Get each h2 header tag that has any id attribute set <$(‘h2[id]>
excluding ones that do have a child span <:not(:has(span))>.

icons

View Demo.

Redesigning an Admin Interface to a Database Part 1

Many of my clients need database applications for their website, and some time ago I built a module system that I could use as a base for more customized functionality.  The modules work together to create an admin area – a password protected part of the site where the administrator can add, edit and delete items from the database.

For example, Washington Farmers Markets Association uses a database to gather member information which then displays on a Google Map on the public side of their website.

wsfma

 

Other clients use custom database applications to:

  • collect registration information for potential students
  • collect job applicant information and track interviews
  • create a custom catalog of employee uniforms for franchise-based organizations

The Problem

My code was around 5 years old and really needed updating from the group up and the interface – the look and feel of the admin site pages – was down-right ugly.  I needed to start all over.

The Template

I decided to use a template system from ThemeForest called Developr to give my new interface a fresh, modern look.  It includes styling and jquery code for everything I could ever want; forms, columns, modal and popup notifications – you name it, it is included.  The learning curve was pretty easy once I stepped into it.

theme

You can test drive this template here.  Use anything for the username and password.

In my next post I’ll talk about authentication and getting the basic framework set up.

Give Your Pages an Obvious Name

Time for a rant about websites that use cute or unusual page naming conventions.  You know the ones – instead of “Contact” or “Contact Us” they say “Start a Conversation”,  “How Can We Help” or some other verbiage which makes me stop and think.

This is a bad thing.  Unless I have a very good reason, I won’t stop and think.  Instead of trying to decipher what you mean I’ve already moved on to your competitor who has a clearly labelled Support page instead of your cutesy “Let’s Figure This Out”.

These are the page I expect to easily find on a website:

  • Contact
  • Support
  • About

At the very minimum, if you have these pages, don’t conceal them with silly names.  Don’t make me work.  Make me a client.

 

Sneak Peak: New Admin Interface

I have an admin interface that I use for my database projects which has sorely needed updating.  Here is a sneak peak at what editing and adding a new entry will look like:

ooo

 

I’m using the Developr template which gives the page its look and has styling for toggles and many kinds of buttons.

The biggest feature I’ve added to the new interface so far is the ability to add multiple image to a listing!  Now you can have as many images as you want!

Coming features include:

  • Add new categories/subcategories from the edit screen.
  • Add tags from the edit screen.
  • Get latitude/longitude by clicking on a map.

All of this data is used to create customized Google Maps on the client-side.  Some examples include:

Washington Farmers Market Association

White Pass Byway

 

Get More Business Tech Tips