Button-card, gradient border

[ivory escarp]

Hope its ok i created a thread, just to keep the chat thingy clean 🙂

It looks like it will work perfectly if using a button-card in the custom field, not sure if its the best solution though.

Button-card, gradient border

[mighty mica]

It's a bit of a hack, but it works ok at least. But as you see there will be an angle to the border when it's not at 0, 90 or 180 degrees so to avoid being annoyed by that I would set the width of the border to a minimum

also, in your image above you see what I mean about the two border-radius have to be different, as it looks a bit wonky now

[boreal socket]

Like

[ivory escarp]

Yes indeed!

[boreal socket]

Please share full code

[ivory escarp]

when done 🙂 its only styles atm.

@mighty mica you were right about the size, looks way cleaner now:

[ivory escarp]

and it works ! 😄

[native agate]

I look forward to seeing how this turns out. Could have some useful applications.

[ivory escarp]

almost done, but struggeling with removing the W behind the state, and changing the font size of it hehe.. but working progress

i figured it out hehe

        [[[ return states['sensor.power_tibber'].state + '<span
        style="font-size:0.5em "> W</span>' ]]] ```

i forgot i had to use label instead of state 🤦‍♂️

[mighty mica]

nice one, very Tibber-ish. I rememeber there was someone on the Swedish HA FB group asking if the Tibber home screen could be replicated. This would be the answer 🙂

[ivory escarp]

there we go! 😄

thanks @mighty mica for your help! Alwasy a super person 😄

woops i se now i forgot to hange the value of the label when copy pasting lol

[mighty mica]

no prob! So what are the borders actually? Percentage of something that has a min/max? Or time?

[ivory escarp]

I set a MAX of 10.000 on the power consumtion, as i dont want to go above.. so i made a calculation: 1800W / 10000W * 360 degrees 🙂

or not 1800W but the actual sensor / 10000W * 360 deg

and then used a return conic-gradient(${color} ${degrees}deg, black 0deg);

its not the cleanest code probably but here it is:

        [[[
          const watts = parseFloat(states['sensor.power_tibber'].state);
          const degrees = Math.min((watts / 10000) * 360, 360);
          let color;
          if (watts <= 2500) {
            color = 'lime';
          } else if (watts <= 5000) {
            color = 'orange';
          } else {
            color = 'red';
          }
          return `conic-gradient(${color} ${degrees}deg, black 0deg)`;
        ]]]```

[mighty mica]

oh cool, that's way past my skills of templating

[ivory escarp]

I cheated and googled it hehe

but im now trying to add some keyframes, same way that you helped me with the pulse effect thing.. i want it to ease in when opening 🙂

[mighty mica]

cool 🙂

[ivory escarp]

the keyframe styling, should it be all the way at the end? it always onfused me where to place it

[mighty mica]

extra_styles you can put wherever you like. There is just something about using it on the first card in a dashboard in the documentation

[ivory escarp]

ah ok

am in on the right track here? cant get it to move ehe

[mighty mica]

should this happen when the dashboard loads?

[ivory escarp]

it should happen when i open the popup.... but that is probably already loaded?

[mighty mica]

hmm

[ivory escarp]

i might move it away from the bubble pop-up thingy and streigt into its own page

or are pages also pre-loaded?

[mighty mica]

lol

[ivory escarp]

hehe nice

[ivory escarp]

Actually looks more clean without the bubble card thingy

[boreal socket]

Do you can share full this code

[ivory escarp]

I believe i say yes, when I'm done several times... If you can't wait, you can try creating it with the code we have shared above.

[ivory escarp]

https://github.com/BerrisNO/HA-Custom-Cards you can find it here

[boreal socket]

thanks

[boreal socket]

I try change min max current
But it look like image

[ivory escarp]

Check my code vs yours, and se if you can find a spelling issue 🙂, a small hint would be that the script should be yellow.. if you have white text in it, there is a error with the spelling or placement of the code

@mighty mica I was looking at your navigation card With gradient colors… and was thinking about making this card similar?
Chaning the background color to a light green gradient With the same green color on the border... and then Orange and red..
Do you think this will be overkill…. or maby it will turn out nice?

[mighty mica]

hmm well technically, orange and red goes complements green, but i'm not sure tbh. Might be too many colors. I would probably keep the background the same as your other cards

[ivory escarp]

noted, thank you good sir! 🙂

[boreal socket]

ignore min max
I replace the value directly in
conic-gradient(${color} ${degrees}deg, black 0deg)`;

[ivory escarp]

the issue is not the values, but look at line 5. and compare it to my line 5 and you will solve the problem 🙂

[boreal socket]

line 5 " |-" only for look good

[ivory escarp]

you have a "-" in there, that is not supposed to be there

nice. now the problem is futher down.. now the code for the degrees are working.. but there is a secound card placed above this one.. so you need to scroll down and se whats wrong there 🙂

[ivory escarp]

if you look at the following from @mighty mica , he explains it here:
#frontend-archived message

you probably need to change the colors to your own colors.. as i use minihass theme and refer to the theme colors.. like this: background: var(--contrast-0)

you might need to change that to "black" or something

[boreal socket]

thanks

[ivory escarp]

Im trying to add a graph inside here, but cant get the color threshoald to work:

Any idea?

[ivory escarp]

Never mind... I got it to work "ich".. but too messy hehe

[native agate]

HA will sometimes add this on its own. This is what I wrote about it on my concepts page.

Using multiline code requires a block style indicator to indicate how new lines should behave. Using a pipe symbol | keeps the new lines as the literal style. The folded style uses a right-angle bracket > and new lines are replaced with spaces. A chomping indicator can also be used to control what happens with newlines at the end a a string. The default puts a single newline at the end of a string. Using - removes all newlines; + keeps them.

[native agate]

I was actually in the process of writing something along these lines but you had beaten me to it.

i forgot i had to use label instead of state 🤦‍♂️
You can get it to display as the state if you want. You'll need to use state_display instead similar to how you used label.

[ivory escarp]

thank you for explaining 🙂

[ivory escarp]

that would probably be easier indeed. I will test this out when soon, im working on a new version of my vehicle card combining my former design with this card 🙂

Do you have an example where you used state_display?

[native agate]

type: custom:button-card
entity: sensor.bathroom_door_temperature
name: '[[[ return Math.round(entity.state) + " °F" ]]]'
state_display: '[[[ return Math.round(entity.state * 10) / 10  + " °F" ]]]'
show_state: true
show_icon: false```

[ivory escarp]

i have never done that before.. must be tested! Thank you good sir!

that will actually clean up my code allot.. as i usually set show_state to false, and use eighter the label or a custom field to make it!

[native agate]

For your label, towards the bottom, consider: ```yaml
label: |
[[[ return entity.state + '<span style="font-size:0.5em "> øre</span>' ]]]

EDIT: Corrected to entity.state.
The custom:button-card has its own entity variable that can be used when the entity is defined. So you don't have to repeat the entity name that you defined a few lines above. (`entity: sensor.electricity_price`). This makes it easier for you do update (and people like us to ~~~steal~~~copy your code.) 😄

[ivory escarp]

[[[ return entity + '<span style="font-size:0.5em "> øre</span>' ]]] <-- tried using this in the state_display: but get returned with [object] hehe

[native agate]

Oops. The entity variable is actually an object. Try entity.state. (Updated code above.)

[ivory escarp]

oh makes sense!

thanks buddy! that worked like a charm!

now i can use label for some other random thing, instead of using custom_fields ❤️ 🙂 😄 😄

[native agate]

And actually, you might be able to adjust that a little more if you have a unit_of_measure attribute. Then, you can pull that in automatically without needing to hard-code it. (I generally try to add that when working with temperatures and distances so F/C and miles/km are handled automatically.)

[ivory escarp]

well... can i then pull just the "KM"? so i can style it?

the only reason i do it, is to style the mesuremet attribute hehe

[native agate]

I like keeping the label available for "debugging" JavaScript. So I can see what something is going to return without having to save and just kind of hope for the best.

[native agate]

label: |
  [[[ return entity.state + `<span style="font-size:0.5em "> ${entity.attributes.unit_of_measurement} </span>` ]]]
```Note, in the code above, the use of backticks replaced the single-quotation marks around the span. The **$** part is known as a Template Literal or Template string. This is slowly becoming my preferred method of "injecting" variables into strings without having to use a bunch of quotation marks and plus signs. [Reference](<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals>)

UPDATE:
This can be further simplified as the following considering the whole return is considered as a string.```yaml
[[[ return `${entity.state} <span style="font-size:0.5em "> ${entity.attributes.unit_of_measurement} </span>` ]]]

[ivory escarp]

i found the perfect place for that label hehehe

i will need to test this 🙂

[ivory escarp]

this worked as a charm as well. genius! 🙂 no need to repeat stuff, me likey!

[ivory escarp]

Does this work with a "if script".. si IF entity.state == 'on' instead of pasting the entity all the time

in my custom template card, i use if(states[variables.engine].state == 'on') { return ' Vehicle is running. '

so i dont need to repeat, but i want to try to build it outside of the yaml only world

this is the full code i now use on the label:

label: >
  [[[
    if (states['binary_sensor.vehicle_running'].state === 'on') {
      return 'Bilen er ute å kjører!';
    } else if (states['binary_sensor.mg5_battery_charging'].state === 'on') {
      return 'Bilen er parkert og lader.';
    } else if (states['binary_sensor.mg5_cable'].state === 'on') {
      return 'Bilen er tilkoblet en ladestasjon, men lader ikke.';
    } else {
      return 'Bilen er parkert, ingen lader tilkoblet';
    }
  ]]]

apolegize for the Norwegian in there 😛

[native agate]

Yeah. The entity variable should be accessible throughout the card. You may run into an issue when embedding extra custom:button-cards into the custom:button-card.
Another, option. Say you're not referencing the card's defined entity but you're going to be doing a bunch of IFs with another entity. You can define your own variable for use within the IFs.yaml type: custom:button-card name: | [[[ const variable = 'light.living_room_lights'; return states[variable].attributes.friendly_name ]]]In this case, I've defined variable as light.living_room_lights. All the IFs would only need to reference variable and it is only defined once. (This is kind of a bad example because you could just use ELSE IF.)

[ivory escarp]

oh genius!

[native agate]

In the instance above, the variable will only be accessible within the name: section. (This is known as scope.) Say, for example, you want label: to be able to use the same variable. You could define it again in the label so it is within the scope that it can use but now, you've just repeated the same two lines twice.
You can define "card-level" variables within the variables: section.

type: custom:button-card
show_state: true
variables:
  variable: light.living_room_lights
name: "[[[ return states[variables.variable].attributes.friendly_name ]]]"
state_display: "[[[ return states[variables.variable].attributes.brightness ]]]"

[native agate]

Variables can also be used within custom:button-card templates. yaml type: custom:button-card template: rgb_selector variables: var_color_name: green var_entity_id: light.living_room_lights styles: card: - background-color: rgba(0, 255, 0, 0.5)This is the code use to create the button. The template has the bulk of the code; only the variables and background color gets changed here. But, the template now has specific variables to use for this button.

[ivory escarp]

There we go! now it all works 🙂 😄

[native agate]

If you want to get really fancy with the colors, I invite you to check out the dynamic coloring that I "developed"; no hard-coded colors. custom:button-card with dynamic icon color
The JavaScript figures out the color to use. Red = bad, yellow = middle, green = good and all the colors in between.

[ivory escarp]

oh nice i will chek that out!

[ivory escarp]

i will try this when i start working on my Unifi dashboard 😄 😄

[native agate]

I actually though of the Unifi images when you proposed your idea of the border color status thingie.

[ivory escarp]

Yeah same here, got the idea mainly from tibber, but when i installed my DMP i really started loving those

[native agate]

Not sure what I'm missing here. I don't seem to have the nice rounded corners. I'm sure it is a background issue but not sure where.

Found it. - border-radius: var(--border-radius) I don't think I have a --border-radius. Changed to 1rem and flipped the colors.

[ivory escarp]

Ah yes, I have made everything based on the minihass theme, so I don't need to change colors on things

[native agate]

Gotcha. That makes sense. I generally tend to hard-code stuff like colors and whatnot and don't rely on a theme. (Kind of. There is a custom theme applied but I haven't touched it in years.)

[ivory escarp]

Yeah I did too.. until I figured out how it worked. Using the minihass theme was a big help

[native agate]

I think because I also write/share a bunch of code, hard-coding ensures that my code will easily transfer over to someone else with minimal modifications.

[ivory escarp]

Well that is understandable

[native agate]

Also, I generally try to adopt the variables section in a long custom:button-card to make setting entities easier. Both for myself and others. So they (also me) don't have to scroll and hunt down where entities are defined throughout the card.

type: custom:button-card
variables:
  person_entity: person.derek
  phone_battery_level_entity: sensor.s22_ultra_battery_level
  phone_wifi_connection_entity: sensor.s22_ultra_wifi_connection
  proximity_integration_entity: sensor.home_derek_distance
  [...shortened...]```

[ivory escarp]

variables makes life easy 🙂

[ivory escarp]

Is it possible to make that icon toggle lights, but when I click on the name "stue" or something, it opens a new room view ?

[mighty mica]

use custom_field and a button card as the icon. I have all my toggles as custom_fields. That way I have the main cards icon free to use as something else

[ivory escarp]

Thank you good sir!

[native agate]

Don't forget you also have hold_actions and double_tap_actions that can be used.
I also use the custom_field and button method too when applicable, but, generally, I use double_tap actions for toggling and hold actions navigating.
(This screenshot is from a while back before I added the timer-bar card to the bottom.)

[ivory escarp]

yeah thats what i use today, but i wante a more "one click" solution on my room cards )

🙂

[boreal socket]

Use background-image: for background:
its look good now 😄

[ivory escarp]

Was that bug in my original code? I can't find it anywhere 😬

[boreal socket]

With your code I got this error

[native agate]

- border-radius: 1em

[ivory escarp]

Hehe it's because I have set the border radius in the theme and not in the code. You need to change all colors and borders that contain "var(--color/border)

[boreal socket]

i'm looking for a way to automatically center it vertically

[ivory escarp]

You need to change the position in the code. The state should be bottom and the name should be top. So they meet on the middle. I'm currently on the road, but can help you tonight.

[boreal socket]

I done

[ivory escarp]

Good job!

[ivory escarp]

not easy to get perfect on the new theme you guys made @mighty mica hehe trying to find the perfect padding and stuff hehe

[mighty mica]

looks very good so far, or what did you have in mind? 🙂

[ivory escarp]

them details.. the right side is 0.0001 smaller then the top and buttom border hehe

no wait. its actually my PC making it bad

Looked better here

You guys did a good job there! 🙂 freaking love the the layouts and stuff so fare 🙂

[mighty mica]

Nice, the design is mostly Damien, improving the MiniHass cards and making more from that 🙂

[ivory escarp]

ah ok 🙂 are you planning on more stuff for MiniHass in the future?

[mighty mica]

I'm working on my own dashboard from time to time when I have new ideas, and those will for sure make it into the MiniHass repo. But it's npt anything near projects such as bubble card where I'm pusinh updated and taking feedback and issues from others. When I published MiniHass I got a little overwhelmed and although I definately appriciated the interest, it took the energy out of the project. So I will keep sharing my stuff, but at my own pace 🙂 We'll see how HaCasa progresses. Damien is very talented 🙂

[ivory escarp]

Have you started using bubble card in your theme?

[mighty mica]

I tried it a while back but not for me. Too complicated

[ivory escarp]

noted. trying to figure out how to make a cool security screen like you have, but i want to "fiter the cameras", instead of using 4 different camera dashboards, i want to find a way to show only driveway, if i hit the driveway button.. but i want to be at the same page. if that makes sense hehe. thats why i looked at the bubble card..

but i tried with popups to keep to one view/page.. but i dont get the results i want with popups hehe

[mighty mica]

I'm thinking that you should be able to switch the camera feed like I switched the background for my media card. Or at keast use the conditional card together with a input_select helper

yes, I would assign those three buttons you have there for each view to a input_select.helper

so when Driveway is on, the card for the driveway camera feed is displayed, and so on

[ivory escarp]

nice nice, i will try to find a way to make this happen 🙂

[ivory escarp]

Have you found a way to show Google tv/Chromecast tvshow names and stuff live on the dash ?

Or do we have to use pre-defined names and styles based on what app is used ?

[mighty mica]

so far all the apps/media players have almost the same attributes for titles. If they don't you can just create an if/else statement

<span>${entity.attributes.media_title}</span>

just ignore my dummy door helper, I have a few for dev 😛

[ivory escarp]

Nice. I will try!

[ivory escarp]

It works like a charm!!

its absolutly perfect! 😄 only thing i want toggle off the other once when hitting driveway, but i will find a way! 😄

[ivory escarp]

So I need to define all the different apps we use, I forgot hehe

[native agate]

Was working with the border-gradient the other day. Got everything lined up nice-and-pretty in the editor but when I saved and returned to the dashboard, the positioning didn't work as nicely. I may need to change some values from em/rem & px to percentages.

[ivory escarp]

Same issue here, but haven't looked more into it yet.

Hard to get perfect

[native agate]

Looks wonky here. But in the expanded UI editor it looks good.

But then if I collapse the UI editor, it looks like this.

[ivory escarp]

Yeah the border radius must not be the same on both

[native agate]

I think it has to do with the placement of the state custom_field. ```yaml

• width: calc(100% - 0.4rem)
• height: calc(100% - 0.4rem)
• left: 0.22rem```and adding padding to the label to get it centered.

[ivory escarp]

Ok

[ivory escarp]

yeah, i got it working earlier, i dont wnat to mess with it again hehe

[native agate]

May have had a break through. Testing it now. Think the key is to define the height of the root custom:button-card and everything else can be derived from that.

[ivory escarp]

ah ok nice 🙂 let me know! 😄 😄

I know there is a way with SVG files.. but i dont know how to work with svg files hehe

[native agate]

I saw that too when I was looking around but one thing about SVGs, if I remember correctly, you can't pass variables into them which I think would cause an issue.

This is my take on it so far. I think I have the card and "border" set up to be a bit more adaptive without requiring a complete overhaul of the code.

type: custom:button-card
variables:
  var_entity: sensor.s22_ultra_battery_level
  var_name: Phone
  var_background_color: black
  var_card_height: 125px
styles:
  card:
    - height: "[[[ return variables.var_card_height ]]]"
    - background: |
        [[[
          // Establish percentage to be used
          var percentage = parseInt(entity.state);
          var percentage = 100; //used for testing; remove when finished

          // Determine the color based on the percentage
          let color;
          if (percentage >= 90) { color = 'lime'; } 
          else if (percentage >= 75) { color = 'green'; } 
          else if (percentage >= 50) { color = 'orange'; } 
          else if (percentage >= 30) { color = 'yellow'; } 
          else { color = 'red'; }
          
          // Return the conic-gradient CSS value
          return `conic-gradient(${color} ${percentage}%, transparent 0deg)`;
        ]]]
    - border: none
    - aspect-ratio: 2
    - border-radius: 1em
  custom_fields:
    state:
      - width: 99%
      - top: 1%
      - position: absolute```

custom_fields:
  state:
    card:
      type: custom:button-card
      show_label: true
      name: "[[[ return variables.var_name ]]]"
      label: >-
        [[[ return `${entity.state} <span style='font-size:0.5em '>
        ${entity.attributes.unit_of_measurement} </span>` ]]]
      styles:
        grid:
          - grid-template-areas: '"l l" "n n"'
          - grid-template-rows: 1fr 1fr
          - grid-template-columns: 1fr 1fr
        card:
          - background: "[[[ return variables.var_background_color ]]]"
          - border: none
          - border-radius: 1em
          - height: "[[[ return `calc(${variables.var_card_height} - 3px)` ]]]"
        label:
          - text-align: center
          - font-size: 26px
          - font-family: Montserrat
          - font-weight: 600
          - color: white
        name:
          - text-align: center
          - font-size: 20px
          - font-family: Montserrat
          - font-weight: 500
          - justify-self: top
          - align-self: start
          - color: gray
entity: "[[[ return variables.var_entity ]]]"
show_icon: false
show_name: false```

This does not center the percentage and name in the custom_field but it is sized appropriately so that should be relatively easy.

I'm glad I started to get a better understand of the template strings. Makes using inline variables much easier.

[ivory escarp]

Hehe yes. I went back to using clean yaml dashboard, and makes life so much easier having templates in separate folders

[native agate]

Different type a template. This is a template string: ```yaml

• height: "[[[ return calc(${variables.var_card_height} - 3px) ]]]"```

[ivory escarp]

Ah ok

[native agate]

@winter veldt Dunno if you've seen this thread but something you might be interested in.

[ivory escarp]

I need to try the height thingy

[ivory escarp]

are you using var_ before all variables you use by habbit or? 🙂 just wondering if it a OCD thing hehe

[native agate]

just a force of habit, especially when trying to use names like entity and name just to ensure that my variables doesn't step on something built in already. (It is basically redundant in the custom:button-card since variables have to be called with variables.xxx.)

[ivory escarp]

well its a good force of habit though

i kind of like it

[ivory escarp]

i got it working with this: https://dpaste.com/GYBYRJB9A

i have two cards now, one combined with yours and mine, and then my old version to se whats easerst to implement hehe

[ivory escarp]

I kept your height calculation, but not the width thing, made my card go crasy hehe

[winter veldt]

@native agate Thanks for the tag bro🫡 Out of town, but looks very interesting 👍🏻 will dive in when I get home ✅

[boreal socket]

I divided the background and content into 2 custom_fields

[ivory escarp]

Should not make a difference though

[boreal socket]

I do this when I want to change content that won't affect the background

[ivory escarp]

Im not sure if im following this, but by all means, if it works fo you 🙂

the background is in the main card, so whatever you change in the customfield of content, will not effect the background of the animation code

[boreal socket]

i known

If only 1 custom_field then i want changre padding state and it affect the background

[ivory escarp]

ok

@native agate i took a look at the code you presented earlier (adding values to the temp).
I belive i can use some, but i think i might want to add a "calibration variable" so that users can just put in the values, same with unit of measure.. that it all is variables

REF:

type: custom:button-card
show_label: true
variables:
  var_entity: sensor.living_room_door_temperature
name: "[[[ return 'Temp: ' + (parseInt(states[variables.var_entity].state) + 10) + ' °F' ]]]"
label: "[[[ return `Temp: ${parseInt(states[variables.var_entity].state) + 10} °F` ]]]"

I got most of it working, but not sure how to return the unit of mesure correctly.

My code:

label: "[[[ return `${parseInt(states[variables.room_sensor_temp].state) + variables.room_sensor_temp_calibration} + room_sensor_temp_unit_of_measure ` ]]]" 

so basically calc var_sensor_temp + var_sensor_temp_calibartion = X + var_unit_of_mesure

[boreal socket]

All variables in my card

How to display this number with thousands separator 1,558

I can creat new sensor with entity like below
But i want format it in the card

[ivory escarp]

Change it ti kWh maby? then you can add decimals 🙂 so it can show 1,558 kWh instead

thats the easy way, but if you want it to show with W you need to format the text some how.. but I havent tested that before. can try though

first i need to fix my own dashbaord... i f*** ed it up a bit, so cant load the page heheh

[boreal socket]

How to convert it to number format

[ivory escarp]

parseFloat is used to ensure the values are treated as numbers.

[boreal socket]

I tried with parseFloat but it not change.

[ivory escarp]

show me the code please

[ivory escarp]

can you add the whole line in here? with ` so its easier to actually copy paste and check? 🙂
It looks like your spacing on the label also is a bit wrong

[boreal socket]

I found with below
var toabc = parseInt(entity.state); return toabc.toLocaleString('en-EN')

[native agate]

label: "[[[ return `Temp: ${parseInt(states[variables.var_entity].state) + variables.room_sensor_temp_calibration} ${states[variables.var_entity].attributes.unit_of_measurement}` ]]]"```Plus signs are not used in template strings except for actual mathematical operations, not to join strings.

[ivory escarp]

i see!

worked like a charm buddy! thank you 🙂

Now i just need to split the right icon into its won button card, so i can hit the light toggle, and then the rest of the card will be navigation path 🙂

[ivory escarp]

Thank you for helping! this its going to be super when its done! 😄

[ivory escarp]

Well... now i had to use it on floor deviding as well heheh 😛 thanks for the guidance here, it helps clean up the dashboard allot!

I might need to make a automation to toggle off the other helper when i hit one of them though

[native agate]

What is the purpose of the toggle? Is that what actually does the turn on/off? You could just do a service call to toggle the device and the state of the device for the visual toggle position.

[ivory escarp]

It's to toggle a light, the rest of the card is to navigate to a Page

[ivory escarp]

I want to have it as separate buttons inside a button, to easy navigate and klick stuff.
Its basically going to be a room card in the end

[ivory escarp]

No wait, i miss read your question and my statemen hehe.. its not always easy to explain with adhd and dyslectic brain hehe.. i cant explain my own thoughts sometimes hehe.

So the two toggle buttons, is zones.. so 1 = 1st floor, 2=Basement.
Right now it acts as a filter, so i can toggle both zones on.. but this have both positive and negative sides, as it can clutter the dasbhoard allot when there is more rooms in the basement

Better to show with screenshots

the main idea is to avoid having to create two separate views 🙂

[native agate]

Take a look at the state-switch card. I think this will do what you want. The two toggle buttons at the top could be used to toggle a helper which subsequently shows the cards corresponding to the two floors.

[native agate]

Now that I think about it a bit more, you might want to consider using an input_select instead of an input_boolean. If your buttons set the state of the helper, going this route will give you some room to expand in the future. Maybe later you want to add "Outside". The input_boolean will only afford two states but the input_select would not be limited to only two states.

[ivory escarp]

I might need to look into that 🙂 but now i just need to get this stuff working... and then do a massive cleanup hehe

[ivory escarp]

is it possible to create a card that shows spesific month of energy usage of a room? i want to create three cards: 1. today, 2. this week, 3. this month consumption.
i have created helpers that sums up the energy for each room (energy_livingroom) as an example

[mighty mica]

I think that is what I said, yes 🙂

[ivory escarp]

@native agate i got the bar card working with SVG file

[native agate]

Interesting. I thought SVGs couldn't accept variables so I didn't think about trying to use it. I'd like to check that out a bit more when you're able to share the code.