Button triggering different view

Configuration
1

Hi everyone!
Let me start by apologizing if I am posting in the wrong forum. I’m fairly new and this is my first post ever.
I’m new to Home Assistant but have been working in automation for quite a while. I’ve installed HA about a week ago and am currently working on automating my entire house.

One of the things I can’t seem to figure out and am not sure if it’s possible is the following:
I have created 2 different remote control cards, made with the custom:button-card and some other HACS additions. One is the full remote with 24 buttons, and one is a mini remote with just the basics.

What i would like to accomplish is the full remote card replacing the mini remote card by pressing a button on the mini remote. So on my “Remote” tab, the default should be a mini remote. But when i press the “full remote” button, i’d like another card to pop up.

Anyone who can kick me in the right direction?

2

This will do it:

Create an input boolean that stores the mini / full state. Set the ta action of one of the buttons on both cards to toggle the state of this input boolean.

Use the state switch card to display which card you want depending on the input boolean state.

3

Thanks Tom, like i said, i’m fairly new to home assistant and haven’t used the state switch yet… Reading through the docs it indeed does exactly what I need it to do, and besides that… it makes me want to reprogram all the cards i have previously made…

1 Like
4

No problem that’s what the forum is for, to help you find the solutions you need.

Welcome.

5

Follow up question:
I’ve followed the github instructions and got it working on a small demo card.
When i press the button on the remote, an entities card shows up with 3 lights. Pressing the button again shows 3 different lights. Glad i got that bit figured out…
Question is, when i check the state of the input_boolean, it is set to either “on” or “off”.
In the instructions example on github they are using states like “home” and “away”

How can i change the state of the input boolean to “full” and “mini” instead of “on” and “off”?

6

You can’t. The state of an input boolean is always on or off. Some domains like the binary sensor that also has the states on or off can be made to display these states differently in the front end by applying a device class. But the input boolean does not have device classes.

You could use an input text instead.

7

Ah, thanks… I guess one of the biggest challenges in properly programming HA is not only the skill of programming but also knowing the different options…
I’m completely stuckj though… I have made a small card that seems to work, basically copied it from the github tutorial, added my own values, and it worked… On my existing remote card however i’m using a different card type, and i cannot for the love of God figure out how to make this a state switching card…

Here’s the code for the mini remote:

entities:
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_power_button
        name: Power
        tap_action:
          service: script.livingroom_tv_power_button
        template: menu_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
      - type: 'custom:button-card'
        name: Full Remote
        icon: 'mdi:menu'
        template: menu_button
        tap_action:
          action: toggle
        entity: input_boolean.switch_remote
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_up_button
        tap_action:
          service: script.livingroom_tv_up_button
        template: icon_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_left_button
        tap_action:
          service: script.livingroom_tv_volume_down_button
        template: icon_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_ok_button
        tap_action:
          service: script.livingroom_tv_settings_button
        template: icon_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_right_button
        tap_action:
          service: script.livingroom_tv_channel_down_button
        template: icon_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_down_button
        tap_action:
          service: script.livingroom_tv_down_button
        template: icon_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_back_button
        name: Back
        tap_action:
          service: script.livingroom_tv_back_button
        template: menu_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_exit_button
        name: Exit
        tap_action:
          service: script.livingroom_tv_exit_button
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
show_header_toggle: false
title: Mini Remote
type: entities

I’ve used templates for the 2 different button types in the raw code of the view.

Here’s the code for the Full Remote:

entities:
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_power_button
        name: Power
        tap_action:
          service: script.livingroom_tv_power_button
        template: menu_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
      - type: 'custom:button-card'
        name: Mini Remote
        icon: 'mdi:menu'
        template: menu_button
        tap_action:
          action: toggle
        entity: input_boolean.switch_remote
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_netflix_button
        name: Netflix
        styles:
          icon:
            - color: red
        tap_action:
          service: script.livingroom_tv_netflix_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_mute_button
        name: Mute
        tap_action:
          service: script.livingroom_tv_mute_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_prime_video_button
        name: Prime Video
        styles:
          icon:
            - color: blue
        tap_action:
          service: script.livingroom_tv_prime_video_button
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_volume_up_button
        name: Vol Up
        tap_action:
          service: script.livingroom_tv_volume_up_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_mute_button
        name: Mute
        tap_action:
          service: script.livingroom_tv_mute_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_channel_up_button
        name: Ch Up
        tap_action:
          service: script.livingroom_tv_channel_up_button
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_volume_down_button
        name: Vol Down
        tap_action:
          service: script.livingroom_tv_volume_down_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_settings_button
        name: Settings
        tap_action:
          service: script.livingroom_tv_settings_button
        template: menu_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_channel_down_button
        name: Ch Down
        tap_action:
          service: script.livingroom_tv_channel_down_button
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_up_button
        tap_action:
          service: script.livingroom_tv_up_button
        template: icon_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_left_button
        tap_action:
          service: script.livingroom_tv_volume_down_button
        template: icon_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_ok_button
        tap_action:
          service: script.livingroom_tv_settings_button
        template: icon_button
        type: 'custom:button-card'
      - entity: script.livingroom_tv_right_button
        tap_action:
          service: script.livingroom_tv_channel_down_button
        template: icon_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_down_button
        tap_action:
          service: script.livingroom_tv_down_button
        template: icon_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
    type: 'custom:hui-element'
  - card_type: horizontal-stack
    cards:
      - entity: script.livingroom_tv_back_button
        name: Back
        tap_action:
          service: script.livingroom_tv_back_button
        template: menu_button
        type: 'custom:button-card'
      - type: 'custom:gap-card'
      - entity: script.livingroom_tv_exit_button
        name: Exit
        tap_action:
          service: script.livingroom_tv_exit_button
        template: menu_button
        type: 'custom:button-card'
    type: 'custom:hui-element'
    show_header_toggle: false
title: TV Remote
type: entities

And the code for the button templates:

button_card_templates:
  icon_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: false
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service
  menu_button:
    aspect_ratio: 4/3
    color_type: icon
    hold_action:
      action: none
    layout: vertical
    show_label: false
    show_name: true
    show_state: false
    styles:
      card:
        - border-radius: 10px
        - border: solid 1px var(--primary-color)
        - box-shadow: none
        - padding: 6px 6px
        - margin: 0px 0px
        - '--paper-card-background-color': 'rgba(0, 0, 0, 0)'
      icon:
        - width: 28px
      name:
        - justify-self: middle
        - align-self: end
        - font-size: 14px
        - padding: 0px 0px
        - color: var(--secondary-text-color)
    tap_action:
      action: call-service

So the plan is to display the small remote by default, and switch to the full remote by pressing the top right button.
I would like it if you could give me a hint or some more detailed explanation on how to proceed and what i seem to be doing wrong instead of giving me the code, as I am in a learning process. Figuring it out with a little help will help me get better instead of plainly just copying code which will not educate me at all…

8

Should be as simple as this:

type: custom:state-switch
entity: input_boolean.switch_remote
states:
  "on":
    <full menu card definition here>
  "off":
    <mini menu card definition here>

The quotes around the on and off states are required as otherwise they would be interpreted as boolean values ( 1, 0 ).