Template Widget Example: Talking to Alexa - What's my Item Name?

Talking to Alexa

As many know, the WAF is a big requirement in Home Automation. Additionally, guests need to feel that they can interact with the Smart Home. In our setup, we use Alexa and the Hue Emulation binding to control many of our lights and garage opener. It can be a challenge at times to remember exactly what a given Item.Name is to speak the correct command.

I started down this path because my parents were going to be helping watch the kids for a few days. I wanted to give them a cheat sheet of commands that they could reference if needed. As I thought about what might be a good presentation, it became obvious that what I really wanted was a listing that could be displayed in a HABPanel Widget. Although, I really like HABPanel, and have several Dashboards, I had not begun writing any custom widgets to date. I quickly realized that with a little smarts I could create a dynamic listing of command examples for the Items which I Tagged for display.

Below is a code snipit which will display that list. All that is needed is to TAG your items with a display group. In my example I created a Group “gAlexa”, and then added that Group Tag to the groups and items I wanted to display.

There are no Clickable actions in this version, but this could be extended to allow direct clicking of a line Item, switching it ON/OFF, or clicking anywhere to close the Help Dashboard and return to the previous Dashboard. Obviously, extendable, Enjoy!

image

Items

Group                           gAlexa               "Alexa Items"
Group:Switch:OR(ON, OFF)        gFamily_Room_Lights  "Family Room Lights"     (gAlexa)      ["Switchable"]

Switch Lt_Office                "Office Light"           (gLights,gAlert,gAlexa)                                         ["Switchable"]
Switch  ButtonGarageDoor        "Garage Door"            (gAlexa)                                                        ["Switchable"]

Widget Template

<div>
  <div class="text-left" style="font-size:3vw">
    <p>Talking to Alexa</p>
  </div>

  <div class="text-left" style="color:yellow">
    <p>Using voice commands in our Smart Home is as Easy as saying "Alexa turn on the Family Room Lights."
      Go ahead and try any of the following. The only crazy one is that you have to say
      <i>"Alexa, Turn on the Garage Door"</i> to activate the Opener.</p>
  </div>

  <div class="text-left" style="color:red; font-size: 2vw; font-weight: bold;">
    <p>Alexa turn ON/OFF the...</p>
  </div>
  
  <div ng-repeat="item in itemsInGroup('gAlexa') | orderBy:['label']">... {{item.label}}.</div>

</div>

3 Likes

That is really useful. Just as a side note, you can define a routine in the Alexa app so you can open the garage door by saying “Alexa, open the garage door”.

1 Like

You might also want to add icons to show which lights are on/off like I did here:

1 Like