The Display Buttons

While we could just as well have tied the MQTT topics to a device for direct control, I wanted to have the PyPortal use its own topic for the buttons. This will allow us to create an automation that it triggered when the button is pressed. So we get to use the Home Assistant UI rather than having to change the code on the PyPortal if we want other things to happen. Using Automations also allows us to do more than just one thing when we press the button.

For this example, we will be using the buttons to control a LIFX light along with a Google Home Mini. We will also go through using the buttons with conditions to activate one script based on what time of day it is.

Creating the Toggle Button Automations

To handle button1 we will be creating an Automation for turning on and one for switching to off. This will give us more control over what each state will do so that it can be more than just a light switch.

  1. Click on the Configuration menu
  2. Scroll to and click Automations
  3. Click the + at the bottom right of the screen to create a new Automation.
    • Note: to edit an existing Automation, click the pencil icon to the right of the Automation you wish to edit.
  4. You may be asked to type out what your automation will do so that the new Home Assistant AI can create the Automation. What we are doing is a bit more complex so you will just click SKIP for this option so we can format the Automation normally.
  5. Enter a name for your Automation like PyPortal Button 1 On or something like that.
  6. Set the Trigger Entity to switch.button1
  7. Enter off into the From field
  8. Enter on into the To field
  9. Scroll down to Actions
  10. Select light.turn_on for the Service
  11. Enter the following into the Service data field:
Download: file
entity_id: light.lamp
brightness_pct: 100
color_temp: 250
  • entity_id tells the action what light to turn on.
  • brightness_pct sets the light level to 100%.
  • color_temp sets the light to a lukewarm white

When finished, click the save icon at the bottom right of the browser.

Now we will create another Automation for PyPortal Button 1 Off so that each state of Button1 is covered. So just like before, create a new Automation.

  1. Enter a name for your Automation like PyPortal Button 1 Off or something like that.
  2. Set the Trigger Entity to switch.button1
  3. Enter on into the From field
  4. Enter off into the To field
  5. Scroll down to Actions
  6. Select light.turn_off for the Service
  7. Enter the following into the Service data field:
Download: file
entity_id: light.lamp
transition: 4
  • entity_id tells the action what light to turn on.
  • transition will make it so the light will fade to off in 4 seconds.

When finished, click the save icon at the bottom right of the browser.

Automation for Button 2 press

This will handle what happens when the state of entity binary_sensor.button2 changes from off to on. Once triggered this Automation will fade the light on slowly and say "Good Morning" if pressed before 9AM.

  1. Create a new Automation just like before, but name this one something like PyPortal Button 2 Press
  2. Set the Trigger Entity to binary_sensor.button2
  3. Enter off into the From field
  4. Enter on into the To field
  5. Scroll down to Actions
  6. Select light.turn_on for the Service
  7. Enter the following into the Service data field:
Download: file
entity_id: light.lamp
brightness_pct: 100
color_temp: 250
transition: 60

To this we are going to add a condition in the Actions section. If this condition is true, than the following Actions will run or the Automation ends if the condition is false. Basically the light will fade from off to on when Button2 is pressed, but the next action will only take place if the time is between 4am and 9am.

  1. Click ADD ACTION to add a new Action
  2. For Action Type, select Condition
  3. For Condition type, select Time
  4. Enter the time you want the condition to start being true in the After field.
  5. Enter the time you want the condition to end in the Before field.
    • Note: this system uses 24 hour time in the format HH:MM:SS
  6. Add another action by clicking ADD ACTION
  7. For Action Type, keep it on Call Service
  8. Select tts.google_translate_say for Service
  9. Enter the following into the Service data field:
Download: file
entity_id: 'media_player.living_room_speaker'
message: Good morning, I hope your day rocks!

So what tts.google_translate_say does is to convert the text from our message into sound and then send it to be played on the Google Home speaker that is selected by entity_id.

When finished, click the save icon at the bottom right of the browser.

Automation for Long Press of Button 2

This will handle what happens when the state of entity binary_sensor.button2 changes from off to on for more than 2 seconds. If this Automation is triggered, it will start a Party Mode.

  1. Create a new Automation just like before, but name this one something like PyPortal Button 2 Long Press
  2. Set the Trigger Entity to binary_sensor.button2
  3. Enter off into the From field
  4. Enter on into the To field
  5. Enter 00:00:04 into the For field
    • Note: this uses the time format HH:MM:SS

Conditions

For this Automation, we will be adding a Condition that will need to be TRUE before the Automation can be triggered. For this example, we only want to access Party Mode if the sun has gone down.

 

  1. Scroll to and click on ADD CONDITION
  2. For Condition type, select Sun
  3. Click Sunset next to the After section

Now our Automation can only be triggered if it is after the Sun has gone down.

Add the Actions

Now we are going to add our actions to start Party Mode. This will include setting the LIFX light to cycle through colors and have the Google Home speaker play music from an internet radio station.

  1. Scroll down to Actions
  2. For Service, select light.lifx_effect_colorloop
  3. Enter the following into the Service data field:
Download: file
brightness: '50'
entity_id: light.lamp
period: '2'
power_on: 'true'

The light.lifx_effect_colorloop is a service that is made just for LIFX bulbs though there is a similar one for HUE lights as well. If you are using a generic light, you can use the service light.on and effect: colorloop for the Service data.

Now we will get our Google Home speaker to play music.

  1. Add another action by clicking ADD ACTION
  2. Select media_player.play_media for Service
  3. Enter the following into the Service data field:
Download: file
media_content_id: 'http://knhc-ice.streamguys1.com/live'
entity_id: media_player.living_room_speaker
media_content_type: music

The media_player.play_media lets you send media files to a connected media device like our Google Home speaker. For this example we are using the internet radio link for Seattle's student run radio station C89.5 as the media source, but you can link this to a music file or any other streaming music link.

When finished, click the save icon at the bottom right of the browser.

This guide was first published on Jan 08, 2020. It was last updated on Jan 08, 2020. This page (The Display Buttons) was last updated on Jan 27, 2020.