Custom button card styling (border with SVG) | Home Assistant | Page 1

woeful dome Jul 22, 2024, 8:04 AM

#

lets use this thread 🙂

#

so. why not use two path? and create 1 SVG for the background and 1 SVG for the colored border

#

so basically add a #background-path {
stroke: grey;
stroke-width: ${bar_thickness};
}

and use the "remaining" path of the earler created one?

#

<svg id="progress-bar" fill="none" stroke-linecap="round" viewBox="0 0 100 100">
          <path id="background-path" d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
          <path id="progress-path" d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
        </svg>
        <style>
          #background-path {
            stroke: grey;
            stroke-width: ${bar_thickness};
          }
          #progress-path {
            stroke: ${color};
            stroke-width: ${bar_thickness};
            stroke-dasharray: ${totalLength};
            stroke-dashoffset: ${progress};
            transition: stroke-dashoffset 1s linear;
          }
        </style>

open ridge Jul 22, 2024, 8:06 AM

#

I was initialy thinking about that but the box-shadow seemed like a good fit. Might run into an issue with the z-index depending on how they're both drawing. (I assume if gray is drawn first then it will be on the bottom.)

woeful dome Jul 22, 2024, 8:06 AM

#

open ridge Jul 22, 2024, 8:07 AM

#

Seems like that was the way to go.

woeful dome Jul 22, 2024, 8:07 AM

#

it worked, just copy pasted the SVG (the same) And didnt give it a path.. just let it act as a background

#

the problem now is this:

#

its not round anymore hehe

open ridge Jul 22, 2024, 8:12 AM

#

I think it is because totalLength has to change because now there is an additional path that it has to draw.

woeful dome Jul 22, 2024, 8:18 AM

#

I do get it to 100% nicely, but the border is not have rounded edges,, its to "thick" for its own good it seems like

#

I think my card styling is the issue..

#

it was the stroke-linecap tricking my brain

open ridge Jul 22, 2024, 8:29 AM

#

I literally just figured that out...

woeful dome Jul 22, 2024, 8:29 AM

#

<svg id="progress-bar" fill="none"  viewBox="0 0 100 100">
          <path id="background-path" d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
          <path id="progress-path"  d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
        </svg>
        <style>
          #background-path {
            stroke: grey;
            stroke-width: ${bar_thickness};
          }
          #progress-path {
            stroke: ${color};
            stroke-width: ${bar_thickness};
            stroke-dasharray: ${totalLength};
            stroke-dashoffset: ${progress};
            transition: stroke-dashoffset 1s linear;
          }
        </style>

#

hehe

open ridge Jul 22, 2024, 8:30 AM

#

woeful dome Jul 22, 2024, 8:30 AM

#

i just removed the whole strole-linecap and worked 🙂

#

but none might be more safe to use

#

your way*

#

and i have to fix my const to var i see now hehe

open ridge Jul 22, 2024, 8:32 AM

#

var is the safest approach IMO. const is best if you're not going to change the value later.

#

I also ended up making a second custom_field and setting the z-index of each. It works, but if it works with a single custom_field, that's probably the better way to go.

woeful dome Jul 22, 2024, 8:37 AM

#

so you z-indexed the SVG background in a custom field? that might work for many other things.. like adding shadows and stuff 🙂

#

i will need to test that 🙂

open ridge Jul 22, 2024, 8:40 AM

#

Yeah. It allowed me to put the background under the progress.
But, interestingly, the background stroke-width wouldn't change and I couldn't figure out why. ...I still had the box-shadow in place... 🤦‍♂️

#

Putting the background in the code before the progress would have probably worked too but I wanted the background at the very end (so it would be easy to delete if it didn't work.)

#

Had to change totalLength from 311.1 to 314 now that the linecap is gone. (There was a gap at 100%.)

woeful dome Jul 22, 2024, 8:51 AM

#

i think i will try your way with the background when im back home, i se it made some complication having it in the same custom field

open ridge Jul 22, 2024, 9:00 AM

#

I just put the two paths back together. Seems to work for me.

olive oracle Jul 22, 2024, 9:08 AM

#

You guys are awesome, I drop and image and with in a couple hours you 2 smashed it out. I really appreciate the support guys. 👏.
I am just on my road to learning all this, you are were I want to be. Kudos.

open ridge Jul 22, 2024, 9:18 AM

#

If you would have posted your question a week or two ago, I doubt there would have been a response. It just so happened that BerrisNO was working on something similar and the concept was able to be adapted.

#

I just added some variables that can be easily defined and color options for the bar. The bar can now be a defined color, simple 5-color scale, or dynamic red-to-green.```yaml
variables:
demo_percentage: 65
bar_thickness: 13
bar_background: gray
bar_color: dynamic

#

I incorporated the dynamic colors from one of the examples on my GH.

open ridge Jul 22, 2024, 9:43 AM

#

So, I just learned something new based on something that I've been trying to incorporate more: conditional (ternary) operators. But, I used it to set a variable. I went from javascript if (typeof variables.demo_percentage !== 'undefined') { var percentage = variables.demo_percentage } else { var percentage = entity.state } to```javascript
var percentage = (typeof variables.demo_percentage !== 'undefined') ? variables.demo_percentage : entity.state

woeful dome Jul 22, 2024, 9:50 AM

#

Oh.

open ridge Jul 22, 2024, 10:07 AM

#

Just had a genius idea: merging the square and circle configurations into one super card. 🦸

woeful dome Jul 22, 2024, 10:10 AM

#

you and me think alike bro!

#

I was thinking of a if variable.type = circle ( sett different values)

#

We do like super card hehe

#

using your code might help with that...

var type = (typeof variables.type !== 'circle') ? variables.type : square

#

how the frick did you add the colors to pasting code in discord? 😛

open ridge Jul 22, 2024, 10:17 AM

#

I was thinking along those lines, however, I have an interesting spin on it. Two custom fields: progress-square and progress-circle. In the styles: for each custom_field, display: none could be set to hide the one not in use.
For the rest of the card, there should be a relatively easy way to handle the layout without having to use IF statements on each line. Perhaps mediaquery or something.

open ridge Jul 22, 2024, 10:17 AM

#

woeful dome how the frick did you add the colors to pasting code in discord? 😛

After the three backticks, add the language: yaml, javascript, python, jinja, etc.

woeful dome Jul 22, 2024, 10:19 AM

#

var type = typeof d_sellers1.awesome!==`OFC`

#

oh nice

open ridge Jul 22, 2024, 10:19 AM

#

I've already incorporated more variables. It will soon be ready to turn into a template and theat's when it will become really useful. ```yaml
variables:
demo_percentage: 34
card_height_width: 120
card_background: black
icon_state_color: white
bar_thickness: 13
bar_background: gray
bar_color: blue

woeful dome Jul 22, 2024, 10:19 AM

#

Same as with github basically

open ridge Jul 22, 2024, 10:20 AM

#

exactly.

woeful dome Jul 22, 2024, 10:20 AM

#

why use height and width?

open ridge Jul 22, 2024, 10:21 AM

#

Just because apect_ratio never really works for me. I tend to set specific sizes for the majority of my cards (provided they're not sitting in a grid card or something like that.)

woeful dome Jul 22, 2024, 10:21 AM

#

ah noted

open ridge Jul 22, 2024, 10:21 AM

#

That's what works for me but I'm sure there's a way to incorporate both.

woeful dome Jul 22, 2024, 10:21 AM

#

i add everything inside grids automatically hehe

#

#

woops i did something with the text hehehe

open ridge Jul 22, 2024, 10:26 AM

#

I noticed earlier if I set the demo_percentage to 0, the state disappeared.
Correction: it actually returns the entity.state now that I have it set to use either. Kind of a weird thing. Not really a bug but I guess it has something to do with 0 kind of being undefined.

#

@karmic raptor Come join in the fun here. I'm curious how you got that to work.

karmic raptor Jul 22, 2024, 10:38 AM

#

I'm on my way home. I can discuss 2 hours later

woeful dome Jul 22, 2024, 10:45 AM

#

@open ridge what styles have you applied to the card?

#

my name and state is to fare bewlow hehe.
probably because i dont use height and width

open ridge Jul 22, 2024, 10:50 AM

#

I started working with the layout a little bit. I posted the whole code here: ~~https://pastebin.com/sSq4bm0c~~ https://pastebin.com/raw/sSq4bm0c (TTL: 1 week)
This has both square and circle buttons.

woeful dome Jul 22, 2024, 10:57 AM

#

i was missing the icon height of 50% lol

#

karmic raptor Jul 22, 2024, 11:00 AM

#

Is that what you want?

woeful dome Jul 22, 2024, 11:03 AM

#

what happens if you set the border radius to 25% instead?

karmic raptor Jul 22, 2024, 11:09 AM

#

open ridge Jul 22, 2024, 11:10 AM

#

woeful dome what happens if you set the border radius to 25% instead?

It makes a rounded square. That's what I used in the first example around Line 11.

woeful dome Jul 22, 2024, 11:10 AM

#

karmic raptor

This is using the background thing that we worked on earlier?

#

thats the code withouth the SVG thing that we are working on

karmic raptor Jul 22, 2024, 11:14 AM

#

woeful dome Jul 22, 2024, 11:16 AM

#

open ridge It makes a rounded square. That's what I used in the first example around Line 1...

I belive my theme is screwing with me hehe. i cant get the text to be placed correctly hehee

#

never mind.. spell check

karmic raptor Jul 22, 2024, 11:18 AM

#

woeful dome This is using the background thing that we worked on earlier?

I use it and have edited it

woeful dome Jul 22, 2024, 11:18 AM

#

karmic raptor I use it and have edited it

it looks good 🙂

karmic raptor Jul 22, 2024, 11:21 AM

#

If you want to follow the shape, you need to add code for it

#

I can try 2 hours later

woeful dome Jul 22, 2024, 11:23 AM

#

no no, we are trying a different way, without using the background thing 🙂

#

@open ridge i got it working now:

open ridge Jul 22, 2024, 11:52 AM

#

woeful dome no no, we are trying a different way, without using the background thing 🙂

Ah. That was the conic-gradient background method.

woeful dome Jul 22, 2024, 11:53 AM

#

yes sir

#

Im working on all the variables now, prepairing it for the config change 🙂 but i need your help on making this the super duper card! 🙂

open ridge Jul 22, 2024, 11:53 AM

#

One thing that I've considered about my version is that it is really only useful for 0-100% values. Although, I was considering how to make it a bit more flexible to handling other values.

woeful dome Jul 22, 2024, 11:56 AM

#

you can add the threshold thing

#

i can share mine in 2 sec

#

might take a bit more then 2 sec.. i screwed up my threshold hehehe

#

I forgot how to add a sensor in variables lol hehe

woeful dome Jul 22, 2024, 12:08 PM

#

open ridge One thing that I've considered about my version is that it is really only useful...

https://dpaste.org/2DGJN this is how fare i got 🙂 just need to figure out how to set a sensor into the variables, and return it in the code. : )

open ridge Jul 22, 2024, 12:12 PM

#

Do you mean like this: yaml variables: sensor_entity: sensor.ams_7494_pthen at Line 61javascript var percentage = (state / states[variables.sensor_entity].state) * 100

woeful dome Jul 22, 2024, 12:12 PM

#

oh my god.. was it my ' ' that made it go in error mode?

open ridge Jul 22, 2024, 12:14 PM

#

Or you can just pull the value into the variable:yaml variables: sensor_entity_state: "[[[ return states['sensor.ams_7494_p'].state ]]]"then at Line 61javascript var percentage = (state / variables.sensor_entity_state) * 100

woeful dome Jul 22, 2024, 12:14 PM

#

i always do this.. add ' ' where is not supposed to be, and then not when i need them hehehe

open ridge Jul 22, 2024, 12:15 PM

#

Yeah. They can make a big difference sometimes. 😛

woeful dome Jul 22, 2024, 12:15 PM

#

dude... 20 minuits of problem shooting.....

#


var threshold = states[variables.sensor_threshold].state
var percentage = (state / states[variables.sensor_threshold].state) * 100

#

nice it works!

#

i have so many things i should do... but this thing is fun 😛

open ridge Jul 22, 2024, 12:19 PM

#

I should be asleep right now... 5.5 hours should be good enough though.

#

Oh. I noticed what you did with the background opacity. I didn't even consider going that route, but it makes sense that it would work.yaml opacity: ${bar_bg_opacity};

woeful dome Jul 22, 2024, 12:22 PM

#

yes, inspired by you tricking me into using variables 🙂

open ridge Jul 22, 2024, 12:23 PM

#

You don't have to set the variables in your code block to use variables set at the card level. Just call the variables.whatever or entity.state directly since they're already defined. javascript var bar_thickness = variables.bar_thickness; var state = entity.state; var bar_bg_opacity = variables.bar_bg_opacity; var bar_bg_color = variables.bar_bg_color;

woeful dome Jul 22, 2024, 12:26 PM

#

ah ok

open ridge Jul 22, 2024, 12:28 PM

#

The only problem with setting the bar_bg_opacity, is if it is undefined, it will break the card. When/if you turn it into a template, you must set the variable within the template (like a default setting). Any variables defined at the card level will override the template. Really, all variables need to be defined at the template level to ensure default values are present. (Except for demo_percentage that I used which is special.)

woeful dome Jul 22, 2024, 12:30 PM

#

i usually always set tie variables in the template

#

      var state = entity.state;
      var threshold = states[variables.sensor_threshold].state
      var percentage = (state / states[variables.sensor_threshold].state) * 100
      if (percentage >= 90) var color = 'red';
      else if (percentage >= 70) var color = 'orange';
      else if (percentage >= 50) var color = 'yellow';
      else if (percentage >= 30) var color = 'lightgreen';
      else var color = 'lightgreen';
      var totalLength = 315;
      var progress = (1 - state / threshold) * totalLength;

      var svg = `
        <svg id="progress-bar" fill="none"  viewBox="0 0 100 100" width: 100%; height: 100%;>
          <path id="background-path" d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
          <path id="progress-path" d="M50,0.2
                h0 a50,50 0 0 1 50,50 v0 a50,50 0 0 1 -50,50
                h0 a50,50 0 0 1 -50,-50 v0 a50,50 0 0 1 50,-50" />
        </svg>
        <style>
          #background-path {
            opacity: ${variables.bar_bg_opacity};
            stroke: ${variables.bar_bg_color};
            stroke-width: ${variables.bar_thickness};
          }
          #progress-path {
            stroke: ${color};
            stroke-width: ${variables.bar_thickness};
            stroke-dasharray: ${totalLength};
            stroke-dashoffset: ${progress};
            transition: stroke-dashoffset 1s linear;
          }
        </style>
      `;
      return svg;

#

thanks, that made it allot cleaner 🙂

open ridge Jul 22, 2024, 12:37 PM

#

Just found something that could be useful.

The nullish coalescing (??) operator is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

#

Well, that solves that problem: opacity: ${variables.bar_background_opacity ?? 0.2};

woeful dome Jul 22, 2024, 12:42 PM

#

genius!

#

so it goes back to 0.2 if nothing is set right?

open ridge Jul 22, 2024, 12:43 PM

#

I was actually looking for something else dealing with null but this turned out to be better.

#

Correct. If the variable is not defined at all or is simply null, it returns 0.2. If the variable has a value, it uses that value.

woeful dome Jul 22, 2024, 12:44 PM

#

that is sawesome

#

so we can set all defaults, to help the user get a "standard" then they can edit variables if needed

open ridge Jul 22, 2024, 12:45 PM

#

Yup. Without having to explicitly define the variables in the template ahead of time.

woeful dome Jul 22, 2024, 12:45 PM

#

nice find dude! that is perfect

#

so i just added it and it works real nice: bar_thickness: #set a value between 1-100, default set to 5

#

real handy!

open ridge Jul 22, 2024, 12:47 PM

#

#background-path {
  opacity: ${variables.bar_background_opacity ?? 0.2};
  stroke: ${variables.bar_background ?? "gray"};
  stroke-width: ${variables.bar_thickness ?? 13};
}```

woeful dome Jul 22, 2024, 12:49 PM

#

same with what i did hehe perfectto

#

Is it allowed to work on this in the hospital, if wife desides to poop out child nr2 while we are working on this? hehhe

open ridge Jul 22, 2024, 12:51 PM

#

woeful dome Is it allowed to work on this in the hospital, if wife desides to poop out child...

I'm sure she won't mind. (Disclaimer: Don't listen to me as I could be wrong.)

#

styles:
  card:
    - height: '[[[ return `${variables.card_height_width ?? 120}px` ]]]'
    - width: '[[[ return `${variables.card_height_width ?? 120}px` ]]]'
    - background: '[[[ return variables.card_background ?? "black" ]]]'

woeful dome Jul 22, 2024, 12:51 PM

#

open ridge ```yaml styles: card: - height: '[[[ return `${variables.card_height_width...

your faster then me! dang it 😛

#

but i dont get the "stroke: gray" thing... it gives me an error

#

stroke: ${variables.bar_bg_color ?? gray};

This gives no error if you have something in the variables, but when you remove it, i get a syntax

open ridge Jul 22, 2024, 12:56 PM

#

Looks like gray has to be in quotes. stroke: ${variables.bar_background_color ?? "gray"}; which makes sense because otherwise it could be a a variable.

woeful dome Jul 22, 2024, 12:59 PM

#

true

#

styles:
  img_cell:
    - height: '[[[ return `${variables.icon_height ?? 120}` ]]]'
    - height: '[[[ return `${variables.icon_width ?? 120}` ]]]'

#

so that actually made things allot easier for "beginners"

#

might be a stupid question.. but when i use 100 instead of 100px, what does it actually use?

open ridge Jul 22, 2024, 1:08 PM

#

px might be a default. I didn't consider it would have a default so I just added the px to keep it from breaking.
EDIT: I just tried to remove px from the card's height and width and it broke the card.

#

If the demo_icon is defined, it will use that. Otherwise, it defaults to the entity's icon. icon: "[[[ return `${variables.demo_icon ?? ''}` ]]]"

woeful dome Jul 22, 2024, 1:14 PM

#

might be safe to use px then.

#

#

i can se that without it braks at my side as well hehe

#

was kind of cool with a bigger backgrund svg hehe

#

there is many customazation things we can do with this card.. by just changing the width and stuf.. love it!

open ridge Jul 22, 2024, 1:19 PM

#

might consider using % instead of px.

woeful dome Jul 22, 2024, 1:19 PM

#

yeah i usually do

amber sandal Jul 22, 2024, 5:55 PM

#

Can someone send the whole card code?
I tried to piece together stuff and failed

woeful dome Jul 22, 2024, 7:03 PM

#

I will update my GitHub when I'm back home tomorrow. Currently a bit busy 🙂

olive oracle Jul 22, 2024, 8:42 PM

#

I know where to come when my get my next idea haha. I spent all weekend searching for something like this, and a few evenings Trying to force ApexCharts to do what I want. Would be really cool to test it out when you guys are ready... I am really good at breaking things 🤣

karmic raptor Jul 23, 2024, 1:33 AM

#

    background_in_card:
      - width: |-
          [[[ if ( variables.main_card_height < variables.main_card_width )
              return Math.floor(variables.main_card_width-(variables.main_card_height-(variables.main_card_height/1.1)))+'px';
            return Math.floor(variables.main_card_width/1.1)+'px';
          ]]]```

#

for this

woeful dome Jul 23, 2024, 7:17 PM

#

olive oracle I know where to come when my get my next idea haha. I spent all weekend searchin...

https://github.com/BerrisNO/HA-Custom-Cards 🙂 its just in testing, but try it out 🙂

amber sandal Jul 24, 2024, 2:34 PM

#

https://github.com/BerrisNO/images/blob/main/circle.PNG

I think the images repo you use is private

#

open ridge Jul 24, 2024, 2:39 PM

#

~~I've seen images "not get linked properly" when pasting directly into the editor. That's probably all that is. Just means the image needs to be re-added.~~

#

Nevermind. I just looked at the link. He probably wrote it in a private repository and then copied the markdown into the public.

woeful dome Jul 24, 2024, 2:48 PM

#

I will try to fix it tonight

olive oracle Jul 24, 2024, 9:48 PM

#

Just want to say thanks to everyone who helped and a big thanks to @woeful dome for the coaching. I have got the key parts of what I ws hoping to achieve, just need a little tweaking of shadows etc.

#

#

I take no credit for this. Here is the Code I ended up with for each "chip card"

#

📎 message.txt

#

as I make more tweaks I will share them here if anyone is interested

woeful dome Jul 24, 2024, 9:53 PM

#

Beautiful 😍 quick note. When pasting code in here you might want to use dpaste.org or something 🙂🙂

woeful dome Jul 25, 2024, 8:28 AM

#

amber sandal https://github.com/BerrisNO/images/blob/main/circle.PNG I think the images rep...

Could you check now? I think I solved it hehe

open ridge Jul 25, 2024, 8:31 AM

#

woeful dome Could you check now? I think I solved it hehe

I visited earlier and noticed the image was visible.

woeful dome Jul 25, 2024, 8:31 AM

#

open ridge I visited earlier and noticed the image was visible.

Thanks buddy!

olive oracle Jul 25, 2024, 8:32 AM

#

woeful dome Beautiful 😍 quick note. When pasting code in here you might want to use dpaste....

I tried the site last time you said that and it didn't load, just tried again and its working now. so here is my latest.

#

https://dpaste.org/rTjUh

#

#

Now I just want to find other things with Batteries so I can make more hahah

open ridge Jul 25, 2024, 8:34 AM

#

Do the iPad & Polestar images not show the rest of the bar properly (from 48-100% and 91-100%, respectively)?

#

#

Or do you just have it set to none which I just figured out works, too.

#

I'm dumb. Just noticed you posted code link. I see it now. You have the bar thickness at 8 and the bar background thickness at 2. That makes sense now.

#

In my version, I just used one variable that applied to both paths.

amber sandal Jul 25, 2024, 8:53 AM

#

olive oracle

I'm using this yaml
Any way to fix the overlap in horizontal stacks ?

open ridge Jul 25, 2024, 8:53 AM

#

You want them to display on top of each other?

amber sandal Jul 25, 2024, 8:54 AM

#

next to each other

amber sandal Jul 25, 2024, 8:54 AM

#

olive oracle

like this

open ridge Jul 25, 2024, 8:55 AM

#

Here I used a grid card but you can apply the same concept to the horizontal-stack.```yaml
type: grid
cards:

type: custom:button-card
entity: sensor.s22_ultra_battery_level
[...all the yaml here...]
type: custom:button-card
entity: sensor.s22_ultra_battery_level
[...all the yaml here...]```

amber sandal Jul 25, 2024, 8:57 AM

#

grid seems wo work well, but it adds a lot of extra blank space

open ridge Jul 25, 2024, 8:59 AM

#

You can "control" the spacing by setting the number of columns (accounting for future cards.)

columns: 8```

amber sandal Jul 25, 2024, 9:00 AM

#

Perfect!
I can have a row on my dashboard dedicated to batteries

open ridge Jul 25, 2024, 9:03 AM

#

If you want to get really fancy, you can incorporate an auto-entities card and have it "generate" the bar-cards. Here, BerrisNO has it set to find power usage and sort it by consumption. (It can "find" the entities to display or you could define a list. Minimal repetitive code.)

woeful dome Jul 25, 2024, 9:07 AM

#

The auto entity is using labels to find what I want to show. So I add labels to everything I want shown there, and it filters it automatically 🙂

amber sandal Jul 25, 2024, 9:09 AM

#

open ridge If you want to get *really* fancy, you can incorporate an [auto-entities](<https...

i don't have a lot of stuff to display like that
only phone and watch currently

#

possibly a galaxy ring in the future :)

open ridge Jul 25, 2024, 9:09 AM

#

It can also accept wildcards. So, something like sensor.*_battery_level could be used.

#

Holy crap! 750-day streak on DuoLingo. That's crazy!

amber sandal Jul 25, 2024, 9:10 AM

#

if i don't practice in a day all the screens in my house go crazy

open ridge Jul 25, 2024, 9:10 AM

#

How so?

amber sandal Jul 25, 2024, 9:11 AM

#

this lol

open ridge Jul 25, 2024, 9:13 AM

#

👀

olive oracle Jul 25, 2024, 11:53 AM

#

open ridge In my version, I just used one variable that applied to both paths.

that works well with the dark theme, on a light theme, the Green disappears a little in to the grey colour I chose.

olive oracle Jul 25, 2024, 11:54 AM

#

amber sandal I'm using this yaml Any way to fix the overlap in horizontal stacks ?

I used the new view type that is experimental, called "sections"

#

then I can drag and re-arrange the cards easily

amber sandal Jul 25, 2024, 1:10 PM

#

olive oracle I used the new view type that is experimental, called "sections"

I don't find it customizable enough to make my dashboards in
I prefer the grid view with CSS layouts

olive oracle Jul 25, 2024, 6:27 PM

#

I usually do to, just trying out the new feature.

#

Strange one. Does any one know why the coloured progress bar isn't showing up on my iPad dashboard? everything else is fine, just the progress bar is missing....

woeful dome Jul 25, 2024, 6:38 PM

#

olive oracle Strange one. Does any one know why the coloured progress bar isn't showing up on...

Yeah its kind of a IOS thing..IOS does not like SVG files, trying to find a way around it

olive oracle Jul 25, 2024, 6:38 PM

#

oh no 😦

#

god I hate apple

woeful dome Jul 25, 2024, 6:39 PM

#

can you install other borwsers in ipad? like firefox or something?

olive oracle Jul 25, 2024, 6:46 PM

#

I am using the HA app on the iPad in focused mode, I am guessing switching to Chrome wouldn't be a big issue.

woeful dome Jul 25, 2024, 6:51 PM

#

Well not sure if it will help... But it's worth a try

olive oracle Jul 25, 2024, 8:05 PM

#

No luck, same issue with chrome on the iPad.

woeful dome Jul 25, 2024, 8:06 PM

#

Hmm well shit

olive oracle Jul 25, 2024, 8:46 PM

#

playing with other uses of this card of yours, and trying to figure out how to change the Shadow colour based on the entity state. Why? - I have sensors on doors and windows, when they are all closed I just want a plain grey card, but if any are open I want it to be red. the idea is that I can quickly glance at my dashboard and know if everything is closed before leaving or going to bed.

#

I have tried adding if/else statements in the box-shadow area, but it doesn't seem to like that, tried using another method I found here: https://community.home-assistant.io/t/custom-button-card/386807 but again I think its the box-shadow doesn't like it.

#

I even tried setting up two box_shadows as variables but again styles doesn't seem to like if/else statements ( or at least how I have written them). If I google it, I never seem to get the same answer in 2 places.

woeful dome Jul 25, 2024, 8:50 PM

#

I have already started on that with shadows, it will come out on next update I think

#

But. I would probably use another method.. and that's conditions. So it only shows if anything is open, and hides closed stuff

#

It will be on a separate card though

olive oracle Jul 25, 2024, 8:55 PM

#

oh cool. Well just if it helps at all this is some of the ones I am playing with:

#

My next step was going to make the Electric car box-shadows glow blue, when they are charging. so I will take a look at conditions.

#

or maybe pulsating, but let me start with getting the right colour first hahaha

#

just to help me narrow down my searching and learning, this is considered CSS right? or is it something else?

woeful dome Jul 25, 2024, 9:00 PM

#

Pulse ?

#

Just look at my GitHub, the vehicle card has a effect you can tweak

olive oracle Jul 25, 2024, 9:02 PM

#

yes similar to that, but for the shadow only. need to learn how to use conditions in styles first

woeful dome Jul 25, 2024, 9:04 PM

#

State styling

#

It's in my vehicle card

olive oracle Jul 25, 2024, 10:09 PM

#

I tried to follow what you have done on your Vehicle card, and tried it 20 different ways, but I am getting some odd behaviour. Sometimes it changes colour, but then it won't change back. I thought it might have something to do with the state value being text rather than an integer, but I tried both and still nothing. No rush, you got a lot more important things going on, just when you get a few mins spare, can you tell me where I am going wrong? cheers

#

https://dpaste.org/CfcAf

open ridge Jul 26, 2024, 7:45 PM

#

thought it might have something to do with the state value being text rather than an integer
@olive oracle All states are strings. But, when you do comparisons of a string that is a number, it has to be coveted to an integer. With Javascript, use parseInt(value) or parseFloat(value); with Jinja, pipe to int/float value | int or value | float.

olive oracle Jul 26, 2024, 10:38 PM

#

turns out it was throwing up the strnage bevahiour as it was unhappy that I had semi-colons at the end of the box shadow inputs. wish the inbuilt de-bugging was a little smarter to counter act my lack of it haha

#

I also needed to create another template that gave me an 'on' / 'off' value based on the number of doors open.

#

everything closed

#

a door open:

#

and if you tap the card a pop-up tells me what door is open:

open ridge Jul 26, 2024, 11:03 PM

#

olive oracle and if you tap the card a pop-up tells me what door is open:

What does this pop up look like when they're are multiple doors open?

karmic raptor Jul 29, 2024, 12:57 AM

#

olive oracle and if you tap the card a pop-up tells me what door is open:

You can use Bubble Card or Browser_mod

olive oracle Aug 5, 2024, 9:35 PM

#

open ridge What does this pop up look like when they're are multiple doors open?

back on this now, been a busy week at work and been on holiday. Even though my template says to " | list | join('/n')" for some reason it doesn't put them on a new line, just adds them to the back of each other. so will play a bit more to get that to work better. If I can't figure that out I will use the pop_up card mod

olive oracle Aug 5, 2024, 9:39 PM

#

olive oracle oh cool. Well just if it helps at all this is some of the ones I am playing with...

unfortunately, because Apple have to be different I was unable to get these to work on my iPad dashboard. so in the meantime I have changed tack to using the inset shadow to give me a red/amber/green visual state. I do not like it as much as the one you guys developed ( progress bar around the outside), but not much I can do about Apple and SVGs

#

might add another colour state ( pulsating blue) based on a different entity ( charging state), next.

olive oracle Aug 6, 2024, 7:18 AM

#

Went with the pop-up card and auto entities.

#

karmic raptor Aug 8, 2024, 1:40 AM

#

woeful dome Aug 13, 2024, 8:56 AM

#

animation is fun 😄

olive oracle Aug 15, 2024, 7:09 PM

#

@woeful dome I have the SVG working on the Ipad now too, if you are interested

woeful dome Aug 15, 2024, 7:20 PM

#

how?

olive oracle Aug 18, 2024, 8:00 AM

#

@woeful dome

Here's my full code. Still working in the car one that gives an additional state of plugged in and not charging. Will share that when it's done. But for now here is my one for a device state of charge with a pulsing shadow if charging.
https://dpaste.org/jaW7D

woeful dome Aug 18, 2024, 8:05 AM

#

And the svg works on iPad? What part of the code made the svg on iPad work?

woeful dome Aug 18, 2024, 8:07 AM

#

olive oracle <@276419402348494851> Here's my full code. Still working in the car one that g...

Thanks. I haven't had much time after our newborn son came to life, need quite bussy hehe

olive oracle Aug 18, 2024, 3:51 PM

#

woeful dome And the svg works on iPad? What part of the code made the svg on iPad work?

In all honesty, it was the chatgpt part lol. I popped your svg code in and asked it to adjust it to work with apple, after a few extra adjustments it got it working. You could stick both codes into chatgpt and ask it why one does and the other doesn't work.

olive oracle Aug 18, 2024, 3:52 PM

#

woeful dome Thanks. I haven't had much time after our newborn son came to life, need quite b...

I have been there myself mate, I get it.

#Custom button card styling (border with SVG)