Enable "switch mode" for vertical_buttons_custom_state #191

arndth · 2022-01-03T08:42:46Z

I was trying to implement vertical buttons in my environment and it did not work for me. The color were not shown and when got the color it still was not changing the state from 'on' to 'off'.

I changed the default state and the tap on action. In future a flexible color as variable would also be helpful for the community. Here my code: (see also post in Forum)

  vertical_buttons_custom_state:
      template: "vertical_buttons"
      variables:
        state: "on"
        # blue, red, green, yellow, purple, pink
        color: "green"
      show_last_changed: false
      name: "[[[ return variables.state ]]]"
      styles:
        name:
          - text-transform: "capitalize"
      state:
        - operator: "template"
          value: "[[[ return entity.state == variables.state ]]]"
          styles:
            icon:
              - color: "[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]"
            label:
              - color: "[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]"
            name:
              - color: "[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]"
            img_cell:
              - background-color: "[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]"
            card:
              - background-color: "[[[ return `rgba(var(--color-background-${variables.color}), var(--opacity-bg))`; ]]]"
      tap_action:
        action: "call-service"
        service: "input_select.select_option"
        service_data:
          entity_id: "[[[ return entity.entity_id ]]]"
          option: >
            [[[
              if (entity.state == 'on') {
                return 'off';
              } else if (entity.state == 'off') {
                return 'on';
              }
            ]]]

CM000n · 2022-01-03T09:08:16Z

I think you are using the card template wrong.
You have tinkered with our internal template, where the state and color can already be specified as variables in the templates intended for end users.
Please have a look at the PR for this card from @saxel: #66

So the end users template to use for this card would for example be rather:

configuration.yaml

input_select:
  status_person:
    name: 'Status • Person'
    options:
      - home
      - away
      - exercise
      - work
      - sleep

lovelace-minimalist.yaml

- type: 'custom:button-card'
  template: vertical_buttons_custom_state
  variables:
    state: home
    color: purple
  entity: input_select.status_person
  icon: 'mdi:home-variant'

arndth · 2022-01-04T13:31:11Z

Ok, is a different use case. I am using it as a switch on/off and it is foreseen as input select and each button reflects one state.

mp-se · 2022-01-04T14:31:55Z

I also use my vertical buttons for toggle on off scenes. If you add this UI template

---
custom_card_mpse_scene:
  template: "vertical_buttons"
  variables:
    color: blue
  show_last_changed: true
  name: "[[[ return entity.state; ]]]"
  styles:
    name:
      - text-transform: "capitalize"
  state:
    - value: "on"
      styles:
        icon:
          - color: "[[[ return `rgba(var(--color-${variables.color}), 1)`; ]]]"
        label:
          - color: "[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]"
        name:
          - color: "[[[ return `rgba(var(--color-${variables.color}-text), 1)`; ]]]"
        img_cell:
          - background-color: "[[[ return `rgba(var(--color-${variables.color}), 0.2)`; ]]]"
        card:
          - background-color: "[[[ return `rgba(var(--color-background-${variables.color}), var(--opacity-bg))`; ]]]"

I also created an input_boolean and connected that to the button which i use to toggle on/off. I then have automations that triggers on a state change and sets the appropriate scene:

  scene_watch_tv:
    name: Scene - Watch TV
    icon: "mdi:television-classic"

This is the button defintion i have in my UI file

          - type: custom:button-card
            template: custom_card_mpse_scene
            entity: input_boolean.scene_watch_tv
            name: Titta TV
            variables:
              color: green

Hope this helps you to acheive what you want. Let me know if you need more input/help.

CM000n · 2022-01-04T14:44:34Z

Ok, I would turn this into a feature request once, so that the vertical button cards also support some kind of switch mode. Maybe @saxel can have a look into it, if he has time

mp-se · 2022-01-05T16:52:36Z

I believe that it's possible to cover the scenarios in one custom card called card_vertical_button: (change name to be consistent with other cards). And create alias so backwards compatibility is not broken. However I have not found any entities where the vertical_button card can be used since it uses an attribute called value (but that could be a bug)

Scenario 1:
Several vertical buttons are used to toggle between states defined in an input_select entity. The variable defines the "active" state for this button
The typical configuration would then be as follows.

When selected it will change the state of the entity what is defined in the variable.
It's colored when the state of the entity is the same as what is defined.

- type: 'custom:button-card'
  template: card_vertical_button
  entity: input_select.test_vertical_buttons
  variables:
    ulm_card_vertical_button_state: Away

Scenario 2:
One vertical button is used to toggle between on/off defined in an input_boolean entity.
The typical configuration would then be as follows.

When selected it will toggle state of the entity.
It's colored when the state of the entity is on.

- type: 'custom:button-card'
  template: card_vertical_button
  entity: input_boolean.test_vertical_buttons

mp-se · 2022-01-05T16:58:37Z

How do we handle the color option, i guess it would be beneficial to choose what color the card has as ON? Some cards use an css string as input, others use an option to set color. Should we follow the same structure for all variables then we should have this as option for color:

variables:
   ulm_card_vertical_button_color: blue

mp-se · 2022-01-05T20:31:23Z

I've created a first draft of a new vertical button, it works with input_select or input_boolean but that required some scripting so its possible to support other type of entities. However i have issues with fixing the backwards compatibility , but i will have to check that another day... if i dont manage to fix that i will submit a PR based on what I have.

usage:

  - type: 'custom:button-card'
    template: card_vertical_button
    entity: input_select.test_vertical_buttons
    name: Night
    icon: mdi:television-classic
    variables:
      ulm_card_vertical_button_state: Night
      ulm_card_vertical_button_color: green

card:

---
card_vertical_button:
  variables:
    ulm_card_vertical_button_color: "blue"
    ulm_card_vertical_button_state: "on"
  show_label: true
  label: ""
  name: |
    [[[ 
      if( entity.entity_id.startsWith("input_select.") ) 
        return variables.ulm_card_vertical_button_state;
      else if( entity.entity_id.startsWith("input_boolean.") ) 
        return "";
      return entity.state;
    ]]]
  styles:
    icon:
      - color: "rgba(var(--color-theme),0.2)"
    label:
      - justify-self: "center"
      - align-self: "start"
      - font-weight: "bolder"
      - font-size: "12px"
      - filter: "opacity(40%)"
    name:
      - margin-top: "10px"
      - justify-self: "center"
      - font-weight: "bold"
      - font-size: "14px"
    img_cell:
      - background-color: "rgba(var(--color-theme),0.05)"
      - border-radius: "50%"
      - place-self: "center"
      - width: "42px"
      - height: "42px"
    grid:
      - grid-template-areas: "'i' 'n' 'l'"
    card:
      - border-radius: "var(--border-radius)"
      - box-shadow: "var(--box-shadow)"
      - padding: "10px 0px 8px 0px"
  size: "20px"
  state:
    - operator: "template"
      value: |
        [[[ 
          return entity.state == variables.ulm_card_vertical_button_state;
        ]]]
      styles:
        icon:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]"
        label:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        name:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}-text), 1)`; ]]]"
        img_cell:
          - background-color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 0.2)`; ]]]"
        card:
          - background-color: "[[[ return `rgba(var(--color-background-${variables.ulm_card_vertical_button_color}), var(--opacity-bg))`; ]]]"
  tap_action:
      action: "call-service"
      service: |
        [[[ 
          if( entity.entity_id.startsWith("input_select.") ) 
            return "input_select.select_option";
          if( entity.entity_id.startsWith("input_boolean.") ) 
            return "input_boolean.toggle";
          // If we need to support other entities we can add these options here.... 
          return "";
        ]]]
      service_data: |
        [[[
          var obj;
          if( entity.entity_id.startsWith("input_select.") ) 
            obj = { entity_id: entity.entity_id, option: variables.ulm_card_vertical_button_state };
          else 
            obj = { entity_id: entity.entity_id };
          return obj;
        ]]]

saxel · 2022-01-06T05:08:04Z

Ok, I would turn this into a feature request once, so that the vertical button cards also support some kind of switch mode. Maybe @saxel can have a look into it, if he has time

I have been away for new years, and turns out I have caught covid so count me out. I also need to check up on what has happened in the repo during the holidays since a lot of things happened :)

As for the card I think it is a great addition if the same template could support both input_select and input_boolean 👍

CM000n · 2022-01-06T06:44:41Z

Oh my, I wish you a speedy recovery! Take care of yourself.

mp-se · 2022-01-06T08:31:42Z

Get well @saxel!

I need some help on this one. I have managed to create the card but when I try to handle the backwards compatibility i get a javascript error telling me the variables is not defined... i have not been able to figure out what the issues are:

I have checked in an updated template file in my fork here; https://github.com/mp-se/UI

this is the defintion i have tested with:

  - type: 'custom:button-card'
    template: vertical_buttons_custom_state
    entity: input_select.test_vertical_buttons
    name: Night2 (legacy)
    variables:
      state: "Night"
      color: "red"

this is the wrapper i created for backwards compatibility which is simlar to other that exist in the file.

vertical_buttons_custom_state:
  template: "card_vertical_button"
  variables:
    ulm_card_vertical_button_color: |
      [[[ 
        if(typeof variables.color !== "undefined")
          return variables.color;
        return "blue";
      ]]
    ulm_card_vertical_button_state: "[[[ return variables.state ]]]"

When I run this I get "ButtonCardJSTemplateError: TypeError: Cannot read properties of undefined (reading 'state') in 'return variables.state'"

and it looks like the whole variables is undefined when this template is applied.... could it be some kind of bug in button_card?

mp-se · 2022-01-06T18:56:36Z

Fixed in PR #211

CM000n · 2022-01-11T20:42:38Z

Should be added with #211

arndth added the enhancement label Jan 3, 2022

CM000n added the waiting-for-feedback label Jan 3, 2022

CM000n added feature and removed enhancement labels Jan 4, 2022

CM000n changed the title ~~Vertical Buttons + Scenes > Not reacting, not switching off and color is not flexible~~ Enable "switch mode" for vertical_buttons_custom_state Jan 4, 2022

CM000n assigned mp-se Jan 5, 2022

mp-se mentioned this issue Jan 6, 2022

Replacement card for vertical_button + vertical_button_custom_state #211

Merged

CM000n linked a pull request Jan 7, 2022 that will close this issue

Replacement card for vertical_button + vertical_button_custom_state #211

Merged

CM000n added 💡 feature request and removed feature labels Jan 7, 2022

github-actions bot removed the 💡 feature request label Jan 7, 2022

CM000n added the 💡 feature label Jan 7, 2022

CM000n closed this as completed Jan 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable "switch mode" for vertical_buttons_custom_state #191

Enable "switch mode" for vertical_buttons_custom_state #191

arndth commented Jan 3, 2022 •

edited by CM000n

Loading

CM000n commented Jan 3, 2022 •

edited

Loading

arndth commented Jan 4, 2022

mp-se commented Jan 4, 2022

CM000n commented Jan 4, 2022 •

edited

Loading

mp-se commented Jan 5, 2022

mp-se commented Jan 5, 2022 •

edited

Loading

mp-se commented Jan 5, 2022

saxel commented Jan 6, 2022

CM000n commented Jan 6, 2022

mp-se commented Jan 6, 2022

mp-se commented Jan 6, 2022

CM000n commented Jan 11, 2022

Enable "switch mode" for vertical_buttons_custom_state #191

Enable "switch mode" for vertical_buttons_custom_state #191

Comments

arndth commented Jan 3, 2022 • edited by CM000n Loading

CM000n commented Jan 3, 2022 • edited Loading

arndth commented Jan 4, 2022

mp-se commented Jan 4, 2022

CM000n commented Jan 4, 2022 • edited Loading

mp-se commented Jan 5, 2022

mp-se commented Jan 5, 2022 • edited Loading

mp-se commented Jan 5, 2022

saxel commented Jan 6, 2022

CM000n commented Jan 6, 2022

mp-se commented Jan 6, 2022

mp-se commented Jan 6, 2022

CM000n commented Jan 11, 2022

arndth commented Jan 3, 2022 •

edited by CM000n

Loading

CM000n commented Jan 3, 2022 •

edited

Loading

CM000n commented Jan 4, 2022 •

edited

Loading

mp-se commented Jan 5, 2022 •

edited

Loading