Custom toggle buttons in a custom:button-card | Home Assistant | Page 1

delicate patio Aug 15, 2023, 11:15 PM

#

I have come up with two options for you. One is an entities card that has been modded to hide the icon and name. The second is a custom:button-card that essentially mimics a toggle switch with corresponding icons and colors. Here is the full code in implement usage of both in a custom:button-card. Each one has two elements: defining the custom_field (the card) and its style (where and how it is placed on the card). I did not try to use a grid template and define the layout. It was just easier to say where I wanted it to show.

#

type: custom:button-card
entity: light.living_room_lights
styles:
  card:
    - width: 250px
    - height: 200px
  custom_fields:
    entities_card:
      - position: absolute
      - left: 0%
      - top: 0%
      - transform: rotate(270deg)
      - opacity: 75%
    custom_button_card:
      - position: absolute
      - right: 2%
      - top: 5%
      - transform: rotate(270deg)
      - opacity: 75%
custom_fields:
  entities_card:
    card:
      type: entities
      entities:
        - entity: input_boolean.tester
          card_mod:
            style:
              hui-generic-entity-row:
                $: |
                  state-badge {
                    display: none;
                  }
                  .info {
                    display: none;
                  }
              ha-entity-toggle:
                $: |
                  ha-switch {
                    --switch-unchecked-button-color: red;
                    --switch-checked-button-color: green;
                    --switch-unchecked-track-color: red;
                    --switch-checked-track-color: green;
                  }
      card_mod:
        style: |
          ha-card {
            border: none;
            background: transparent;
          }
  custom_button_card:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      state:
        - icon: mdi:toggle-switch
          value: 'on'
          color: green
        - icon: mdi:toggle-switch-off
          value: 'off'
          color: red
      size: 50px
      tap_action:
        action: toggle
      styles:
        card:
          - height: 50px
          - width: 50px
          - background-color: transparent
          - border: none```

#

In the screenshot, both toggle buttons use the same entity. That's why the operate at the same time. I also rotated the toggle switches 270 degrees, because, why not? Just remove that line in the styles if you don't like it.

#

Custom toggle buttons in a custom:button-card

#

@orchid yacht tagging you since I think you might like the outcome.

orchid yacht Aug 15, 2023, 11:21 PM

#

I do indeed

#

that's the mdi trick?

#

wait I just read that it is

#

I should really read first, then ask

#

I really gotta organize my life

delicate patio Aug 15, 2023, 11:24 PM

#

I think they both turned out pretty good. The entities option is a bit more complicated but it looks better and has a bit more customization available to it (requiring more card_mod). The custom:button-card is simplier but gets the job done.

orchid yacht Aug 15, 2023, 11:27 PM

#

I only just got card mod installed again

#

I've been slacking

orchid yacht Aug 16, 2023, 2:30 PM

#

I get a really weird outcome LOL

#

#

so I realized I needed the input_boolean, so I created one now I get this

#

#

ok so progress, I reloaded my browser

#

orchid yacht Aug 16, 2023, 2:55 PM

#

ok more progress

#

that's the light off

#

#

that's the light on

delicate patio Aug 16, 2023, 7:12 PM

#

Yeah. Card mod can be a bit finicky sometimes. But you can see they both work reasonably well.

#

I'm going to post an alternative example. (I meant to do it last night but forgot.) Instead of using a toggle switch, I used the double tap action to toggle the input Boolean. Then, an indicator lights up to show that it is true. To me, it has a cleaner look.

orchid yacht Aug 16, 2023, 7:17 PM

#

the toggles don't do anything tho LOL

#

I think I borked it

delicate patio Aug 16, 2023, 9:25 PM

#

post your yaml for the whole card. There shouldn't be much to have it work. Most of the code is just for the customization.

orchid yacht Aug 16, 2023, 10:21 PM

#

sec

#

type: custom:button-card
entity: switch.studydesk_2
styles:
  card:
    - width: 250px
    - height: 200px
  custom_fields:
    entities_card:
      - position: absolute
      - left: 0%
      - top: 0%
      - transform: rotate(270deg)
      - opacity: 75%
    custom_button_card:
      - position: absolute
      - right: 2%
      - top: 5%
      - transform: rotate(270deg)
      - opacity: 75%
custom_fields:
  entities_card:
    card:
      type: entities
      entities:
        - entity: input_boolean.tester
          card_mod:
            style:
              hui-generic-entity-row:
                $: |
                  state-badge {
                    display: none;
                  }
                  .info {
                    display: none;
                  }
              ha-entity-toggle:
                $: |
                  ha-switch {
                    --switch-unchecked-button-color: red;
                    --switch-checked-button-color: green;
                    --switch-unchecked-track-color: red;
                    --switch-checked-track-color: green;
                  }
      card_mod:
        style: |
          ha-card {
            border: none;
            background: transparent;
          }
  custom_button_card:
    card:
      type: custom:button-card
      entity: input_boolean.tester
      show_name: false
      state:
        - icon: mdi:toggle-switch
          value: 'on'
          color: green
        - icon: mdi:toggle-switch-off
          value: 'off'
          color: red
      size: 50px
      tap_action:
        action: toggle
      styles:
        card:
          - height: 50px
          - width: 50px
          - background-color: transparent
          - border: none

#

haven't changed much but the entity name LOL

#

I even made my input_boolean the same name

delicate patio Aug 16, 2023, 10:36 PM

#

works just fine for me. (Changed your switch entity in the button-card to one of my lights.) Also, tried with a switch entity.

#

Tested in Firefox, Chrome, and Edge on PC. HA app on Andriod.

orchid yacht Aug 16, 2023, 11:00 PM

#

maybe i borked the input_boolean somehow?

#

power just went out at home so waiting on everything to come back up

#

well fuck me, power went down again

orchid yacht Aug 17, 2023, 12:40 AM

#

ok apparently power came back up but my LTE modem wasn't recognized by my router all of a sudden, heh

orchid yacht Aug 17, 2023, 1:55 AM

#

so I restarted and the toggles still don't work

#

I think I dumbed something up

#

is this right

#

  custom_fields:
    entities_card:
      - position: absolute
      - left: 0%
      - top: 0%
      - transform: rotate(270deg)
      - opacity: 75%
    custom_button_card:
      - position: absolute
      - right: 2%
      - top: 5%
      - transform: rotate(270deg)
      - opacity: 75%
custom_fields:

#

the indent on the custom_fields: at the bottom

delicate patio Aug 17, 2023, 9:24 AM

#

It is right. The top section defines the styles for the custom_fields. the bottom actually defines what the custom_fields are.

orchid yacht Aug 17, 2023, 10:51 AM

#

then I dunno what I did wrong LOL

delicate patio Aug 17, 2023, 9:05 PM

#

what happens if you try just the entities card without any extras?```yaml
type: entities
entities:

entity: input_boolean.tester```

orchid yacht Aug 17, 2023, 9:06 PM

#

dunno didn't think of that

#

maybe I made the input_boolean wrong

#

is it supposed to be toggle type?

#

delicate patio Aug 17, 2023, 9:08 PM

#

Yup. That's all it needs. Settings > Devices & Services > Helpers tab > + Create Helper in bottom right > Toggle

orchid yacht Aug 17, 2023, 9:08 PM

#

it toggles the switches on the card in sync but does not toggle the light

delicate patio Aug 17, 2023, 9:09 PM

#

Well there is no light attached to it. It is just an entity.

#

Try yaml type: custom:button-card entity: input_boolean.tester

orchid yacht Aug 17, 2023, 9:11 PM

#

delicate patio Aug 17, 2023, 9:13 PM

#

Okay. So both cards can "see" and use the input boolean. I don't understand when the full code caused problems. Try type: custom:button-card entity: switch.studydesk_2 styles: card: - width: 250px - height: 200px custom_fields: entities_card: - position: absolute - left: 0% - top: 0% - transform: rotate(270deg) - opacity: 75% custom_fields: entities_card: card: type: entities entities: - entity: input_boolean.tester card_mod: style: hui-generic-entity-row: $: | state-badge { display: none; } .info { display: none; } ha-entity-toggle: $: | ha-switch { --switch-unchecked-button-color: red; --switch-checked-button-color: green; --switch-unchecked-track-color: red; --switch-checked-track-color: green; } card_mod: style: | ha-card { border: none; background: transparent; }basically just removing the custom:button-card toggle

orchid yacht Aug 17, 2023, 9:15 PM

#

tapping the light works, but the toggles don't, and there's only one now

#

#

the card there for studychair is using input_boolean.tester2.... so it's weird AF

delicate patio Aug 17, 2023, 9:17 PM

#

So no change from green to red?

orchid yacht Aug 17, 2023, 9:17 PM

#

tester seems to activate one of the toggles on the card that tester2 is supposed to be on

#

wait im an idiot

#

I only changed one of the input_boolean.tester lines and there were 2, FML

#

ok that part is fixed

#

#

so now tester2 does what I expect it to LOL

delicate patio Aug 17, 2023, 9:21 PM

#

what happens when you click tester in the top right corner?

orchid yacht Aug 17, 2023, 9:22 PM

#

this one ?

type: entities
entities:
  - entity: input_boolean.tester

delicate patio Aug 17, 2023, 9:22 PM

#

yeah. try toggling that one. the rest of the cards that correspond to the original tester entity should toggle too.

orchid yacht Aug 17, 2023, 9:22 PM

#

this is what happens when I hit just that one

#

#

all the toggles go green but do nothing for the switch

delicate patio Aug 17, 2023, 9:23 PM

#

they're not going to do anything to the switch. that is is whole separate entity.

#

but it shows that everything is working except for being able to tap the toggle buttons in the cards.

orchid yacht Aug 17, 2023, 9:24 PM

#

ahh yeah

#

I can tap the icons and they work but not the toggles

#

well let me rephrase that

#

I can tap the toggles as well, they just do nothing but go green/red

delicate patio Aug 17, 2023, 9:26 PM

#

umm... that's exactly what it is supposed to be doing... you're literally just toggling the state of the tester entity.

#

Now, the OP did not mention what his usage what for wanting something like this. Howegver, my usage would be to enable/disable an automation. Basically, add a state check of the toggle switch to the first line of the automation. If it is enabled, it continues; if not, it stops.

orchid yacht Aug 17, 2023, 9:28 PM

#

oh I dunno why I thought that the toggles were to turn the light on and off as well

#

bangs head against wall

delicate patio Aug 17, 2023, 9:29 PM

#

For me, in Node-RED, this is what I have in a function javascript if (ha.states["input_boolean.automation_auto_office_lights"].state === "off") { node.status({ fill: "red", shape: "dot", text: "Automation disabled" }); return }

#

With this concept, you can easily turn it into a light switch within a light switch.

orchid yacht Aug 17, 2023, 9:30 PM

#

hmmmmm I was actually going to test an automation to turn thm on

#

that's funny

delicate patio Aug 17, 2023, 9:32 PM

#

My method in the frontend is a bit different. Instead of a toggle switch, I have a label that appears. I toggle the input_boolean with a double tap.

#

Here is off

orchid yacht Aug 17, 2023, 9:33 PM

#

so the automatic is the boolean?

delicate patio Aug 17, 2023, 9:35 PM

#

This is the template that I use for that button. Note that this template references another template (oversized_custom_button) so here, I'm just adding the "Automatic" feature yaml oversized_custom_button_with_auto: template: oversized_custom_button variables: var_auto_entity: input_boolean.automation_auto_kitchen_lights custom_fields: auto: > [[[ if ((states[variables.var_auto_entity].state === 'on')) return "Automatic"; ]]] styles: custom_fields: auto: - align-self: middle - justify-self: left - position: absolute - left: 3% - top: 3% - font-size: 24px - color: yellow - transform: rotate(0deg) - opacity: 33% double_tap_action: action: call-service service: input_boolean.toggle service_data: entity_id: '[[[ return variables.var_auto_entity; ]]]

#

The "Automatic" itself is simply a custom_field.

orchid yacht Aug 17, 2023, 9:37 PM

#

ahhh I see

#

that's slick AF

delicate patio Aug 17, 2023, 9:38 PM

#

It essentially functions just like the toggle switch. Automatic = on; blank = off.

#

then the code for the card on the dashboard is yaml - type: custom:button-card template: oversized_custom_button_with_auto entity: light.kitchen_lights hold_action: action: navigate navigation_path: /fire-main/room variables: var_auto_entity: '[[[ return ''input_boolean.automation_auto_kitchen_lights''; ]]]'

orchid yacht Aug 17, 2023, 9:40 PM

#

I'm gonna try this out

#

but I don't have any automations really to turn on my lights yet

#

because I don't have any sensors

delicate patio Aug 17, 2023, 9:41 PM

#

you have a phone with the HA app, right? an easy automation is turning lights off when you leave; on when you get home.

orchid yacht Aug 17, 2023, 9:42 PM

#

oh yeah I'm gonna do that actually

#

cuz otherwise I walk into a dark ass house LOL

delicate patio Aug 17, 2023, 9:42 PM

#

without sensors, you can "simulated" a sensor by making another input boolean: input_boolean:fake_motion_detecter_has_detected_motion 😎

orchid yacht Aug 17, 2023, 9:42 PM

#

but my outside lights will be on because they come on at dusk

orchid yacht Aug 17, 2023, 9:43 PM

#

delicate patio without sensors, you can "simulated" a sensor by making another input boolean: `...

if you wanted me to drink tonite you could have just said that

delicate patio Aug 17, 2023, 9:44 PM

#

My coming/going automation:

orchid yacht Aug 17, 2023, 9:45 PM

#

yeah I need like 3 days to lock myself in my office and do all the things I need to do

orchid yacht Aug 18, 2023, 10:20 PM

#

hey you about man?

delicate patio Aug 18, 2023, 10:40 PM

#

yup. I'm here. what's up?

orchid yacht Aug 18, 2023, 11:06 PM

#

sorry, power went out again only to find out it was the electrician testing and no one bothered to tell me

#

I have a question about your "coming home" in node-red

#

I have some zones I setup on the intersections on the way to my house but was trying to figure out the best way to use them to trigger "on the way home" "leaving home"

delicate patio Aug 18, 2023, 11:19 PM

#

Well, that is kind of an issue with my automations. The way they're set up, they're basically
if state changes from Home to anything else = leaving home
if state changes from anything else to Home = arriving home

#

Sometimes the arriving home has fired before I get inside and sometimes not. I should tweak the automation so it also watches leaving from the Work zone and tie that in somehow.

orchid yacht Aug 18, 2023, 11:21 PM

#

well that's what I'm basically trying to do now, leave intersection 1 / enter my street/ home is arriving and home, end of my street, intersection 1 is leaving

#

actually I can use some math to do that I think

delicate patio Aug 18, 2023, 11:23 PM

#

well there is a distance function that can be applied to a template in HA... that's what I started looking at. #templates-archived message

#

{% set home_lat = state_attr('zone.home', 'latitude') %}
{% set home_lon = state_attr("zone.home", "longitude") %}
{% set current_lat = state_attr('person.derek', 'latitude') %}
{% set current_lon = state_attr('person.derek', 'longitude') %}
{{ home_lat }} {{ home_lon }} {{ current_lat }} {{ current_lon }} 
{% set dist = 6371.01 * acos(sin(home_lat)*sin(current_lat) + cos(home_lat)*cos(current_lat)*cos(home_lon - current_lon)) %}
6371.01 * acos(sin(slat)*sin(elat) + cos(slat)*cos(elat)*cos(slon - elon))
{{dist}} km
{{ distance(states.person.derek) | round(2) }}```

#

returns 1.1885028418603205 km 0.01This was the issue I was mentioning about the precision.

orchid yacht Aug 18, 2023, 11:28 PM

#

ok I just got a headache

#

LOL I haven't done cosines since highschool LOL

#

my math was just gonna be like "how many zones you pass thru before home or after home"

#

wtf did 6371.01 come from

#

what's that a measure of

delicate patio Aug 18, 2023, 11:30 PM

#

distance between two latitutde and longitude cordinates in km

orchid yacht Aug 18, 2023, 11:31 PM

#

ahhhhhhhhh

#

ok makes sense

#

in km ? that's kinda like 1/3 the earths diameter

#

lol

delicate patio Aug 18, 2023, 11:33 PM

#

I don't know how well "passing through" zones will work. Sometimes I don't think it updates quick enough and you might miss a zone. You might consider a larger "outer" zone around your house to catch as you're getting closer. But then you have to account for GPS accuracy and how big do you make the zone around your house.

orchid yacht Aug 18, 2023, 11:33 PM

#

delicate patio I don't know how well "passing through" zones will work. Sometimes I don't think...

also overlapping zones are an issue

delicate patio Aug 18, 2023, 11:34 PM

#

I have to revisit how it gets handled a bit better. I was thinking about
when leaving work, check the distance
a couple minutes later, check distance: are you closer.

#

yeah. I think that is what I was noticing when I was trying to overlap the zone. sometimes would jump between home and Home...

orchid yacht Aug 18, 2023, 11:34 PM

#

basically I wanna do like "if leaves home, goes thru zone 1 and then zone 2 in 5 mins, considering me leaving"

delicate patio Aug 18, 2023, 11:35 PM

#

but if something happens and HA doesn't get updated while you're in Zone 1, when you get to Zone 2, HA won't care.

orchid yacht Aug 18, 2023, 11:35 PM

#

this is true

#

this is gonna take a few beers to figure out and prolly me walking up and down the neighborhood tonite

delicate patio Aug 18, 2023, 11:36 PM

#

but then again, I have a 4-6 minute commute to work; 4-20 minute commute back.

orchid yacht Aug 18, 2023, 11:37 PM

#

mine is 3 mins if im driving, 10-14 mins if I'm walking

delicate patio Aug 18, 2023, 11:39 PM

#

nice.

#

I noticed an issue at one point where my location kept jumping between Home and Work. device tracker via my tablet was messing with it.

orchid yacht Aug 19, 2023, 12:26 AM

#

ping tracker?

#

sorry just got home LOL, I started walking and it started to rain

delicate patio Aug 19, 2023, 12:34 AM

#

no. I have the app installed on the tablet too.

orchid yacht Aug 19, 2023, 12:45 AM

#

yeah but are you logged in to it? or a tabletuser

delicate patio Aug 19, 2023, 1:52 AM

#

I'm logged into it. My Fire tablets have their own tabletuser.

#

I just took the tablet off from the device tracker for my user.

orchid yacht Aug 19, 2023, 1:54 AM

#

good idea

#

I did the same thing on all my other phones and tablets, they have their own user to login as

delicate patio Aug 19, 2023, 7:03 PM

#

@royal bloom Here's another example of my hacky-ness. It fulfilled the request. 😎

royal bloom Aug 19, 2023, 7:46 PM

#

@delicate patio nice 🙂

#

@delicate patio btw, what is that automation diagram-tingy?

delicate patio Aug 19, 2023, 7:52 PM

#

That's Node-RED. Another add-on that can be incorporated into HA via the Add-on store. It can access HA's entities and whatnot. It is a visual respresntation of automations put together with nodes. A node does a thing and then it continues to the next node to do another thing. Plus, there's a #node-red-archived channel.

#

It has a kind of step learning curve but once you start to get the hang of it things come together pretty easily. There's several good videos on YouTube that helped me out. I started automating with NR several years ago when HA's automations were strictly yaml (text) based. Let's just say things have improved since then.

#

TheHookUp's Node-RED video series is a good start: https://www.youtube.com/playlist?list=PL-51DG-VULPqeoYGyIrainyWc-_MnFb-y

royal bloom Aug 19, 2023, 7:56 PM

#

Not afraid of a bit of yaml, but yes, things has become much easier 🙂

delicate patio Aug 19, 2023, 7:57 PM

#

agreed. I, too, am more comfortable with yaml now. Considering moving some automations from NR into HA but that involves doing work.

royal bloom Aug 19, 2023, 7:59 PM

#

yes, much easer to leave stuff that work alone 😉

#Custom toggle buttons in a custom:button-card