Toggle Button Control Row Plugin

Jamie_Pryer · January 8, 2021, 1:06pm

actually, this is maybe better?

entities:
  - label: Jamie Office
    type: section
  - entity: switch.gaming_desk
    icon: 'mdi:desktop-classic'
    name: Gaming Desk
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.gaming_desk.state != "on",if(switch.gaming_desk.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.jamie_work_desk
    icon: 'mdi:laptop'
    name: Work Desk
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.jamie_work_desk.state != "on",if(switch.jamie_work_desk.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Hallway
    type: section
  - entity: switch.hallway_lamp
    icon: 'mdi:lamp'
    name: Hallway Lamp
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.hallway_lamp.state != "on",if(switch.hallway_lamp.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.samsung_plug1
    icon: 'mdi:power-socket-uk'
    name: Upstairs Hallway Plug
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.samsung_plug1.state != "on",if(switch.samsung_plug1.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Bar
    type: section
  - entity: switch.drinks_cabinet
    icon: 'mdi:glass-cocktail'
    name: Drinks Cabinet
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.drinks_cabinet.state != "on",if(switch.drinks_cabinet.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.bar_room_lamp
    icon: 'mdi:floor-lamp'
    name: Bar Lamp
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.bar_room_lamp.state != "on",if(switch.bar_room_lamp.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.wallplugajaxbar
    icon: 'mdi:power-socket-uk'
    name: Bar Wall Plug
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.wallplugajaxbar.state != "on",if(switch.wallplugajaxbar.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Beast
    type: section
  - entity: switch.the_beast
    icon: 'mdi:volleyball'
    name: The Beast Switch
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.the_beast.state != "on",if(switch.the_beast.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.spectrum_studio_plug
    icon: 'mdi:alpha-s-circle'
    name: Spectrum Plug
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.spectrum_studio_plug.state != "on",if(switch.spectrum_studio_plug.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.wallplugajaxkitchen
    icon: 'mdi:silverware-fork-knife'
    name: Kitchen Plug
    type: 'custom:toggle-control-button-row'
    secondary_info: '[[ if(switch.wallplugajaxkitchen.state != "on",if(switch.wallplugajaxkitchen.state != "off",<b style=''color:red''>Switch Not Working</b> ,<b style=''color:green''>Switch Working</b>) ,<b style=''color:green''>Switch Working</b>) ]]'
    customTheme: true
    isOnColor: green
    isOffColor: red
show_header_toggle: false
title: Home Switches
type: entities

finity · January 8, 2021, 3:48pm

I haven’t released it yet (I really should…) but that was a feature request that I had and it’s been released in the dev branch. And it seems to be working so if you want to try to run that version to see how you like it then it would be appreciated.

If the state is “unavailable” it will be greyed out an the text will show “unav”.

Jamie_Pryer · January 8, 2021, 6:45pm

awesome!
I will stick with this for now as works well and just take the release when available

finity · January 8, 2021, 10:36pm

It’s available in HACS now.

But I had a request to change the text. It’s now N/A if the entity is unavailable.

Jamie_Pryer · January 28, 2021, 12:50pm

works great!

im playing around with the secondary info side of things, does this allow a value to be added to it?

eg. if you have a switch thats current “on” - show the current consumption from the attirbutes?
or would i need to use another plugin for this

finity · January 28, 2021, 2:28pm

I honestly don’t know is the two can be used together. I’ve never tried it.

I found out just recently that the “state_color” option works with all of my plugins so the secondary info might also.

Jamie_Pryer · January 28, 2021, 2:50pm

i played around and doesnt seem to take it, im afraid

finity · January 29, 2021, 2:45am

It will use the standard entities card secondary_info but I can’t work out a way to nest custom entity rows.

so something like this works:

- type: custom:toggle-control-button-row
  entity: light.computer_room_ceiling_light
  secondary_info: last-changed

But you cant use attributes.

Jamie_Pryer · January 29, 2021, 9:18am

yep I have this, which works really well and looks great.
I wanted to pass in the value (current voltage) but i couldnt work that side of it out

entities:
  - label: Jamie Office
    type: section
  - entity: switch.gaming_desk
    icon: 'mdi:desktop-classic'
    name: Gaming Desk (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.gaming_desk.state != "on",if(switch.gaming_desk.state !=
      "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.jamie_work_desk
    icon: 'mdi:laptop'
    name: Work Desk (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.jamie_work_desk.state != "on",if(switch.jamie_work_desk.state
      != "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Hallway
    type: section
  - entity: switch.hallway_lamp
    icon: 'mdi:lamp'
    name: Hallway Lamp (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.hallway_lamp.state != "on",if(switch.hallway_lamp.state !=
      "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.samsung_plug1
    icon: 'mdi:power-socket-uk'
    name: Upstairs Hallway Plug (Zigbee)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.samsung_plug1.state != "on",if(switch.samsung_plug1.state !=
      "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Bar
    type: section
  - entity: switch.drinks_cabinet
    icon: 'mdi:glass-cocktail'
    name: Drinks Cabinet (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.drinks_cabinet.state != "on",if(switch.drinks_cabinet.state
      != "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.bar_room_lamp
    icon: 'mdi:floor-lamp'
    name: Bar Lamp  (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.bar_room_lamp.state != "on",if(switch.bar_room_lamp.state !=
      "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - entity: switch.wallplugajaxbar
    icon: 'mdi:power-socket-uk'
    name: Bar Wall Plug (TP Link)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.wallplugajaxbar.state != "on",if(switch.wallplugajaxbar.state
      != "off",<b style='color:red'>Switch Not Working</b> ,<b
      style='color:green'>Switch Working</b>) ,<b style='color:green'>Switch
      Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
  - label: Other Plugs
    type: section
  - entity: switch.wallplugajaxkitchen
    icon: 'mdi:silverware-fork-knife'
    name: Kitchen Plug (Zigbee)
    type: 'custom:toggle-control-button-row'
    secondary_info: >-
      [[ if(switch.wallplugajaxkitchen.state !=
      "on",if(switch.wallplugajaxkitchen.state != "off",<b
      style='color:red'>Switch Not Working</b> ,<b style='color:green'>Switch
      Working</b>) ,<b style='color:green'>Switch Working</b>) ]]
    customTheme: true
    isOnColor: green
    isOffColor: red
show_header_toggle: true
title: Home Switches
type: entities

vinceoxnard · February 9, 2021, 10:20pm

Is it possible to set isOnColor to the rgb color of the current light?
I tried this but it stays as the default blueish/green

  - type: 'custom:toggle-control-button-row'
    name: Address Lights
    entity: light.address_lights
    customTheme: true
    icon: 'mdi:numeric'
    isOnColor: '{{ state_attr("light.address_lights","rgb_color") }}'

finity · February 9, 2021, 10:26pm

no sorry the card doesn’t accept templates. And I really don’t think it ever will at least on my end.

But there might be some custom plugins that might do it.

Maybe 📝 100% Templatable Lovelace Configurations

Or https://github.com/PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card

Otherwise, my best advice is to look thru HACS to see if something there might work.

I’ve never tried to use anything like those in my cards so I’m not sure if they would work or not.

vinceoxnard · February 9, 2021, 10:45pm

Thank you, I appreciate the response!

I’ll keep playing around with things and do enjoy the plugin as is

Mark_Crummett · April 14, 2023, 4:18pm

This looks great. Im not sure if im being silly or is there a way to specify it being a toggle switch rather than on/off button?

finity · April 14, 2023, 4:55pm

I’m not sure what you mean.

it already is a toggle. if you push the button and the entity is on then it turns it off and that state is reflected in the display. and the opposite is true so that if the entity is off then pushing it turns it on.

Mark_Crummett · April 14, 2023, 6:07pm

Apologies, i didnt word my question too well. In your first post screenshots, “bool Test” has the toggle as showing “off” where as “Spare 16” is a simple toggle switch design which i’d prefer

finity · April 14, 2023, 9:21pm

The Spare 16 and spare 17 are just showing the standard toggle type switches that HA uses by default. the plugin provides the single toggle button that shows the state in text.

if you want the toggle switch then just don’t use the plugin.

Mark_Crummett · April 15, 2023, 7:57am

ah okay my misunderstanding. I was hoping to use it to do more tinkering as the entities card that gives me the toggle icon seems to fight any custom config

finity · April 15, 2023, 12:48pm

Right, that’s because it’s not custom. The default lovelace elements have little to no customization options.

what did you want to try to do?

Mark_Crummett · April 15, 2023, 1:02pm

im trying to build a card that, as part of it, includes a toggle switch. If i try to add a custom button card where the toggle icon is the exact size of the card it doesnt work, theres always a padding no matter what i do. If i use an existing entities card, i get the border

finity · April 15, 2023, 2:12pm

Sorry, I don’t think I can help with that.