Custom Button Card custom_fields | Home Assistant | Page 1

mint lance Dec 17, 2023, 9:23 AM

#

You just create a custom_field with whichever card you want to add 🙂

floral axle Dec 17, 2023, 9:24 AM

#

ok, so the first one is "main", then next one is costom field. notet 🙂

mint lance Dec 17, 2023, 9:25 AM

#

custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.aqara_weather_ute_temperatur
          name: Temperature
          color: '#ff8c00'
        - entity: sensor.aqara_weather_ute_luftfuktighet
          name: Humidity
          color: '#3399ff'
          y_axis: secondary
      height: 50
      hours_to_show: 24
      line_width: 3
      font_size: 50
      animate: true
      show:
        name: false
        icon: false
        state: false
        legend: false
        fill: fade

#

then you can style this in the button card, instead of using card_mod.

styles:
  custom_fields:
    graph:
      - your styles

floral axle Dec 17, 2023, 9:30 AM

#

now i get it inside the same card 🙂 looks like crap atm, but i will try to style 🙂

#

type: custom:button-card name: > [[[ return states['sensor.dag1'].state + ", " + states['sensor.dato2'].state]]] label: > [[[ return new Date().toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }) ]]] show_label: true styles: card: name: - justify-self: start - font-size: 14px label: - justify-self: start - font-size: 35px - font-weight: 500 graph: - position: absolute - bottom: 0px - width: 100% - margin: 0 - opacity: 1 - overflow: hidden - z-index: 1 custom_fields: graph: card: type: custom:mini-graph-card entities: - entity: sensor.aqara_weather_ute_temperatur name: Temperature color: '#ff8c00' - entity: sensor.aqara_weather_ute_luftfuktighet name: Humidity color: '#3399ff' y_axis: secondary height: 50 hours_to_show: 24 line_width: 3 font_size: 50 animate: true show: name: false icon: false state: false legend: false fill: fade

#

lol i failed on the `` part 😛

#

https://dpaste.org/HxAWC

#

I honnastly belive my brain is stuck in the old way. i will have to research a bit more 🙂 thanks buddy! i be back and try agian a bit later

mint lance Dec 17, 2023, 9:43 AM

#

yuo forgot custom_fields in your styles, insert that above chart and you should see some improvements 🙂

#

type: custom:button-card
name: Name
label: Label
show_label: true
styles:
  grid:
    - grid-temaplate-areas: '"n" "l"'
    - row-gap: 8px
  card:
  name:
    - justify-self: start
    - font-size: 14px
    - padding-left: 1rem
    - z-index: 2
  label:
    - justify-self: start
    - font-size: 35px
    - font-weight: 500
    - padding-left: 1rem
    - z-index: 2
  custom_fields:
    graph: 
      - position: absolute
      - bottom: 0px
      - width: 100%
      - margin: 0
      - opacity: 1
      - overflow: hidden
      - z-index: 1
custom_fields:
  graph:
    card:
      type: custom:mini-graph-card
      entities:
        - entity: sensor.aqara_weather_ute_temperatur
          name: Temperature
          color: '#ff8c00'
        - entity: sensor.aqara_weather_ute_luftfuktighet
          name: Humidity
          color: '#3399ff'
          y_axis: secondary
      height: 50
      hours_to_show: 24
      line_width: 3
      font_size: 50
      animate: true
      show:
        name: false
        icon: false
        state: false
        legend: false
        fill: fade
```

#

floral axle Dec 17, 2023, 9:49 AM

#

oh you are right!

#

can i now make a custom_field2: style for the right entities?
Weather info and such?

mint lance Dec 17, 2023, 9:54 AM

#

yes, if you need to add more things to your card that won't fit in name, label, state or icon, you create another custom field

#

is the weather info one card or how does it work?

#

I would include those in the grid, and not as absolutes

floral axle Dec 17, 2023, 9:56 AM

#

yes its a own button card

#

https://dpaste.org/eZswS

mint lance Dec 17, 2023, 9:57 AM

#

ah okey. I think you could usr have them all as fields instead. But choose whicehver gives you the least amount of code 😉

floral axle Dec 17, 2023, 9:59 AM

#

ok, i can try. always fun to try new things

mint lance Dec 17, 2023, 10:00 AM

#

#

styles:
  grid:
    - grid-template-areas: '"n weather temp_in" "l weather temp_out"
    - grid-template-columns: min-content 1fr min-content

floral axle Dec 17, 2023, 10:09 AM

#

thak you

#

are you scandinavien by any chance? 😛

mint lance Dec 17, 2023, 10:15 AM

#

50% Norwegian, 50% Swede😅

floral axle Dec 17, 2023, 10:16 AM

#

nice! im 100% Norwegian 🙂

#

Got all the info in, now i just need to style it and sutch hehe

mint lance Dec 17, 2023, 10:26 AM

#

nice 🙂

floral axle Dec 17, 2023, 10:28 AM

#

https://dpaste.org/wGhod

#

#

what i dont understand, is why the other infomration is pushed under the time and date.. should i maby put date and time as well in a custom field?

mint lance Dec 17, 2023, 10:34 AM

#

hm good question.... trying to find what makes wverything stack up in a pile too

floral axle Dec 17, 2023, 10:34 AM

#

graph is making it stack i tink

#

think*

mint lance Dec 17, 2023, 10:35 AM

#

try changing your grid styles to this, just temporarily and see what happens:

grid-template-columns: 1fr 1fr 1fr
grid-template-rows: 1fr 1fr

floral axle Dec 17, 2023, 10:37 AM

#

no changes

#

but i belive its the entity name and label doing it

mint lance Dec 17, 2023, 10:37 AM

#

ah yes you are right, we forgot about the graph

floral axle Dec 17, 2023, 10:38 AM

#

or maby not

mint lance Dec 17, 2023, 10:38 AM

#

you want to graph to be behind the other stuff right?

#

and not just under

floral axle Dec 17, 2023, 10:38 AM

#

yes

#

i actually want a gradiant on it, so it fades out

#

thats why i used:
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}

type: custom:button-card

mint lance Dec 17, 2023, 10:40 AM

#

you had misspelled grid-template-areas

#

🙂

floral axle Dec 17, 2023, 10:40 AM

#

lol

mint lance Dec 17, 2023, 10:41 AM

#

also, remove the ; after font size

floral axle Dec 17, 2023, 10:41 AM

#

oh no.. you did not se that

#

it works 🙂

#

but can i now add a card mod for the gradiant background inside the graph?

background: linear-gradient(to right, var(--card-background-color) 20%, transparent);

mint lance Dec 17, 2023, 10:43 AM

#

I have never done that, but it you normally can, then yes

#

in the graph card itseld, not in the custom_field styles

floral axle Dec 17, 2023, 10:44 AM

#

ok will try

#

hmm wierd, didnt work 😛 but i will google a bit.

#

well.. wherever i put it, its not working as expected

obtuse owl Dec 17, 2023, 11:00 AM

#

I just wanted to throw this into y'alls conversation. For a simple (but a bit less customizable) option, there's the stack-in-card. It does need a little bit of "assistance" with card_mod to handle the background and borders of cards but it can almost make multiple cards look seamless. ```yaml
type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--ha-card-background: none;
}
cards:

type: horizontal-stack
cards:
- show_name: true
  show_icon: true
  type: button
  tap_action:
  action: none
  entity: null
  icon: mdi:dice-1
  name: Card 1
  card_mod:
  style: |
  ha-card {
  border: none;
  }
  [... more card yaml here but shortened for message ...]```

floral axle Dec 17, 2023, 11:02 AM

#

Interesting!

#

@mint lance with your help, everything aligned perfectly:

obtuse owl Dec 17, 2023, 11:07 AM

#

Another example. (The background of the weather card is transparent and I have animated backgrounds applied to this dashboard.) Tapping the weather brings up the weather more-info; tapping the animated radar brings up a browser_mod pop that shows three different radar types.

floral axle Dec 17, 2023, 11:11 AM

#

i will look into that @obtuse owl thank you

mint lance Dec 17, 2023, 11:21 AM

#

floral axle <@1006623249569943592> with your help, everything aligned perfectly:

awesome! You can add some - column-gap: 1rem to get some pace between the columns if you want (seems a bit tight after the weater icon)

floral axle Dec 17, 2023, 11:22 AM

#

yean thanks 🙂 i will try it out. just need to figure out the gradiant background firt hehe

#

first*

floral axle Dec 17, 2023, 12:30 PM

#

@obtuse owl for the live background, do you use a camera?

#

sorry i miss read, you used animated.

obtuse owl Dec 17, 2023, 12:34 PM

#

Correct. For the animated background, I use lovelace-animated-background. I have a collection of MP4 videos downloaded from https://mixkit.co/. I'm (slowly) working on being able to have the backgrounds change depending on holidays that I have defined. Right now, most of my videos are smoke-related and the integration will change between them automatically.

#

For live camera video I use frigate-hass-card but that is displayed as a card and not as the background mentioned above.

floral axle Dec 17, 2023, 12:38 PM

#

ok. maby this iwll work with the same code as the weather icon.. if the weather is "clear" then play clear.mp4? hmm i

obtuse owl Dec 17, 2023, 12:39 PM

#

Yeah. In fact, some of the default code, allows you to do just that.

#

It can use the state of the weather entity.

floral axle Dec 17, 2023, 12:41 PM

#

i do wonder what camera pepole are using for the screenshot of weater though. wold be perfect for a "live" view outside of my house hehe

#

thank you buddy, now i have some work to do 🙂

obtuse owl Dec 17, 2023, 12:42 PM

#

Do you have an example to show/link to?

floral axle Dec 17, 2023, 12:46 PM

#

https://community.home-assistant.io/t/mobile-first-dashboard-a-minimalist-and-user-friendly-ui-for-your-dashboard/535580

#

here you have an example, kind of smooth. with a live camera of weather.

#

and it worked with my camera, just tested with my garage one. but not sure what camrea that is fit for that hehe.

obtuse owl Dec 17, 2023, 12:50 PM

#

Looking at the screenshot in the first post and looking over the description, the author is using the same card that I am.
Mentioned in the 49th, Cloos (he's the Dev of the Bubble Cards) mentions using the Generic Camera integration is a bit easier.

#

As long as you can get an RTSP feed out of the camera, integration should be relatively easy.

floral axle Dec 17, 2023, 12:51 PM

#

ok interesting 🙂

floral axle Dec 18, 2023, 1:32 PM

#

I got it all working 🙂 thanks guys

mint lance Dec 18, 2023, 1:42 PM

#

share the results 🙂

floral axle Dec 18, 2023, 1:49 PM

#

looks like this 🙂
But i started on a new one, to get a live camera background 🙂 but i think we can close this thread thingy

floral axle Dec 18, 2023, 2:30 PM

#

Ended up with this

floral axle Dec 19, 2023, 7:55 PM

#

Hi again 🙂
I now am tryint to create a vehicle card, based on the code above.
But how can i create a "battery" card, that goes under all of the things above?

I made a vertical stack just to make an example:

mint lance Dec 19, 2023, 8:06 PM

#

use custom_fields and add the battery card 🙂

floral axle Dec 19, 2023, 8:22 PM

#

#

closing in...this is good practize but.. a pain in the butt 😛

mint lance Dec 19, 2023, 8:30 PM

#

no it's easy once you get the hang of it 🙂

floral axle Dec 19, 2023, 8:32 PM

#

well frick

#

I got the top ok. but i cant get that custom bar alligned

#

https://dpaste.org/K8zc1

#

i did not put it in the grid template, because i wanted t under the other grids... i might be wrong now

mint lance Dec 19, 2023, 9:32 PM

#

why would you not want it "in the grid"? THe whole button card is made up of a grid, so why not use it:)

floral axle Dec 19, 2023, 9:49 PM

#

Mainly becuase i cant figure out why its not working to be honest.
but will sleep on it 🙂

#

but i found out that picture elements actually might be better for this

#

https://community.home-assistant.io/t/generic-vehicle-card/397844/53

mint lance Dec 19, 2023, 10:13 PM

#

hmm maybe..... I could definitely achieve that exact same result with the button card though hehe

floral axle Dec 19, 2023, 10:24 PM

#

i got it all wiht grid, but my patians ran out 😛 will check again tomorrow, as i cant get what i want with the picture thing 🙂 but i got closer though!

#

floral axle Dec 20, 2023, 7:47 AM

#

OK.
I started from scratch today, and managed to allign itt all, but have some issues i would probably need some help with

#

#

the card is going over the with of the card.
The icon shold be inside

mint lance Dec 20, 2023, 8:06 AM

#

what happens if you change to - overflow: hidden?

#

hmm it happens to me too. Does not seem to be suited for nesting

floral axle Dec 20, 2023, 8:12 AM

#

it hides, but it does not "crop" into the size i want

#

Maby thats why they use picture elemets for this instead hehe

#

i could to padding maby

mint lance Dec 20, 2023, 8:14 AM

#

but the picture elements card you linked above does not have a bar card in it from what I saw, so you can't campare 😛

floral axle Dec 20, 2023, 8:14 AM

#

hehe true

#

when i do padding-right, the bar gets smaller

mint lance Dec 20, 2023, 8:22 AM

#

this buton card uses the bar card so it should be possible. Maybe you cna have a look in the template of this card and see how they did it
https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_bar_card/

#

I took their card setting and copied right off. That solved it. So must be something in the styling. Maybe you can find it?

floral axle Dec 20, 2023, 8:25 AM

#

we did the same thing hehe

#

i pasted inn some styling, and worked!

#

or almost

#

#

i got it all right, except for the target value

#

thats the only thing messing it up now 🙂

mint lance Dec 20, 2023, 8:43 AM

#

ok 🙂

floral axle Dec 20, 2023, 8:43 AM

#

removing te target:

mint lance Dec 20, 2023, 8:43 AM

#

what car is it?

floral axle Dec 20, 2023, 8:44 AM

#

MG5

#

I want to get the target % out of the API connection, so it states if target charging is 80% or 100% 🙂

#

thats why i added thet arget thingy

mint lance Dec 20, 2023, 8:46 AM

#

this would be a coolar image for the card 😉

floral axle Dec 20, 2023, 8:50 AM

#

hehe nice 🙂 where did you find that picture?

#

padding-right: 100% worked btw

#

mint lance Dec 20, 2023, 8:53 AM

#

https://www.google.com/search?sca_esv=592455495&sxsrf=AM9HkKnJEDsEqp6I_9vn_zxeFm_kgXzR0w:1703061851418&q=mg5+front+white&tbm=isch&source=lnms&sa=X&ved=2ahUKEwibqrzlz52DAxVtavEDHYZUAloQ0pQJegQIDRAB&biw=1792&bih=935&dpr=2#imgrc=5gNE89rcHF9lcM

floral axle Dec 20, 2023, 8:53 AM

#

might work with a align-start something, but could not remember the code hehe

mint lance Dec 20, 2023, 8:54 AM

#

align in css is usually for vertical placement, justify for horizontal

floral axle Dec 20, 2023, 8:55 AM

#

ah ok thanks

#

Woooops. that did not work 😛

#

i will stick with padding-left hehe

mint lance Dec 20, 2023, 8:58 AM

#

where are you placing the padding?

floral axle Dec 20, 2023, 9:00 AM

#

bar-card-background {
height: 35px !important;
padding-right: 100%

#

Do you know if i can set a icon in the upper right corner, and use a "refresh" button that calls a spesific API?

tap_action:
action: call-service
service: homeassistant.update_entity
data: {}
target:
entity_id:
- sensor.mg5_bmsestdelecrng

#

Not sure if i can use the "icon" or if i should create a new custom field

mint lance Dec 20, 2023, 9:22 AM

#

no idea, sorry

floral axle Dec 20, 2023, 9:24 AM

#

ok 🙂

#

thanks for the help! 🙂

mint lance Dec 20, 2023, 9:26 AM

#

it seems to be this part that makes sure it is placed correct

      style: |-
        bar-card-currentbar {
          border-radius: 6px !important;
          right: 0;
        }

#

these two together, I mean

      style: |-
        bar-card-currentbar {
          border-radius: 6px !important;
          right: 0;
        }
        bar-card-backgroundbar {
          border-radius: 0px !important;
          right: 0;
        }

floral axle Dec 20, 2023, 9:46 AM

#

Yepp

#

My plan is to make something like this:

mint lance Dec 20, 2023, 9:48 AM

#

very nice

floral axle Dec 20, 2023, 9:48 AM

#

That is the current app for the car, just working on reading the sensors right 🤣

mint lance Dec 20, 2023, 9:49 AM

#

I would probalby dedivde that into three cards

#

unless you want the background.....then one card

floral axle Dec 20, 2023, 9:51 AM

#

I will probably do a bubble pop-up

#

#

I accidentally upgraded my car range 🤣

mint lance Dec 20, 2023, 9:55 AM

#

could be done like this for example

floral axle Dec 20, 2023, 9:55 AM

#

How you make that so fast ?

mint lance Dec 20, 2023, 9:56 AM

#

Boss level

#

No but I'm a graphic designer, I have the programs open allready 😛

floral axle Dec 20, 2023, 10:11 AM

#

Ah ok 🤣

floral axle Dec 20, 2023, 3:59 PM

#

type: custom:button-card name: name label: label icon: url(/local/images/arctic-white3.png) show_name: true show_label: true show_icon: true styles: grid: card: name: #miles label: Battery Range icon: custom_fields: c1: #custon:bar (battery state) placed below the vehicle image c2: c3: c4: c5: custom_fields: c1: c2: c3: c4:

#

am i on the right track?

I changed some of it but

floral axle Dec 20, 2023, 4:27 PM

#

#

not sure how to splitt the objects yet but progress

obtuse owl Dec 20, 2023, 4:55 PM

#

Jumping in y'all's conversation again. Was noticing the battery percentage bar that you guys are working on. I use a timer bar card to act as a countdown timer. While not necessarily relevant to battery percentage, it is based on a bar card which can show numbers or percentages. What I wanted to show off is how it is positioned at the bottom of the card and takes very little space. (Don't mind the weird layout on the screenshot; that card is for tablet but grabbed from my phone.)

floral axle Dec 20, 2023, 5:01 PM

#

That's a nice card! 🙂 I might use that for time remaining while charging

#

I'm going to try to use picture entity, and make one picture for not charging, and make a GIF for the charging / animated

mint lance Dec 20, 2023, 9:03 PM

#

sorry, could not resist to make it ^^

#

Allready had this from before so was quick to rearange

floral axle Dec 20, 2023, 10:52 PM

#

Nice

#

Could you share the style of the entity picture ?

#

I'm not sure where to start hehe

floral axle Dec 21, 2023, 7:53 AM

#

#

My picture to small 🤣

mint lance Dec 21, 2023, 8:02 AM

#

I actualy went for a picture card this time. But a picture_entity should work as well

#

📎 message.txt

floral axle Dec 21, 2023, 8:02 AM

#

Ok I will check thanks ! Don't look at my icons 🤣 no styling yet

mint lance Dec 21, 2023, 8:06 AM

#

also, just replace Name with State in my code. I just used name for the ease of it since I dont have the right entity

floral axle Dec 21, 2023, 8:13 AM

#

Dude.. css has changed so much sins I used it last 🤣 like 15 years ago 🤣

#

The picture cardz can that be animated / changed based on entity state ? My idea is to Photoshop a green circle / blue circle pulsing when the charger is connected or charging

mint lance Dec 21, 2023, 8:23 AM

#

you can add a another custom_field and just place it on top of the picture?
Just use postion: absolute and place where you want it

#

At least yuo have some CSS experience 🙂 I did not when I started with HA just over a year ago

floral axle Dec 21, 2023, 8:28 AM

#

That I could do

mint lance Dec 21, 2023, 8:32 AM

#

and I would supose you can set the image url based on states using standard HA templating

floral axle Dec 21, 2023, 8:35 AM

#

yeha, but i want a circle pulsing, so i eighter need to trigger a picture animation, whitch switches between to images, or i need to create a GIF with a pulsing circle.

Or... i do belive its possible to create a pulsing circle with css.. buuut thats next level 😛

#

There are som keyframe css thingy i could try

mint lance Dec 21, 2023, 8:37 AM

#

you can 100% for sure make it using only CSS

#

there might be even easier ways, but I would make a new custom_field with a custom:button-card in it. Set the width and height of the card, border width and color and a radius. So you end up with a circle. THen just animate that

#

transform scale to make it grow/shrink and opacity for a pulsating effect

#

actually I allready have the css for that I think, let me check

#

animation: shake .2s ease-in-out infinite

  extra_styles: |
    @keyframes scale {
      0% {transform: scale(1); opacity: 1}
      25% {transform: scale(1.1);}
      50% {transform: scale(.9); opacity: 0}
      75% {transform: scale(1.1);}
      100% {scale: rotate(1); opacity: 1}
    }

#

that should get you started 🙂

floral axle Dec 21, 2023, 8:43 AM

#

Oj

#

Nice

#

#

tested your code inside a bubble card 🙂 woked quite nice

mint lance Dec 21, 2023, 8:47 AM

#

ah great 🙂

floral axle Dec 21, 2023, 8:48 AM

#

just need to find the right colors hehe !

mint lance Dec 21, 2023, 8:49 AM

#

and icons 🙂

floral axle Dec 21, 2023, 8:50 AM

#

Yeah, the icon I will set by state I think

floral axle Dec 21, 2023, 9:11 AM

#

do you have a ite, where i can copy in a picture like that, and get some nice color pallets back? 😛 trying to figure out what button background i want

mint lance Dec 21, 2023, 9:14 AM

#

try this
https://coolors.co/image-picker

floral axle Dec 21, 2023, 9:18 AM

#

ty

#

#

starting to take form. ugly font though hehe

mint lance Dec 21, 2023, 9:27 AM

#

getting there (y)

floral axle Dec 21, 2023, 9:29 AM

#

yeah. im doing two things at once.. trying to connect everything with the MQTT connection to the car hehe

#

#

I believe I need to fix the picture, and make it a bit bigger, and get the battery one higher up

#

#

Te button on top is only to trigget he popup card hehe

#

The*

mint lance Dec 21, 2023, 10:04 AM

#

looks good 🙂

floral axle Dec 21, 2023, 10:33 AM

#

Do you know how I can get the bar a bit closer to the picture without damaging the with/height of the picture above?

mint lance Dec 21, 2023, 12:40 PM

#

I would start with making sure the original picture has no space around the car. Better to add spacing with CSS

#

after than, you just use row-gap in the grid to set the space

floral axle Dec 21, 2023, 12:46 PM

#

ok

#

https://codepen.io/u01jmg3/pen/PGmzVL <--- one day! my batery bar will loke like that hehe

mint lance Dec 21, 2023, 12:55 PM

#

haha

zinc bronze Dec 21, 2023, 3:45 PM

#

Someone can explain me what should i edit in order to fix these position please?

#

That’s a screenshot from iPhone

floral axle Dec 21, 2023, 5:32 PM

#

floral axle Dec 21, 2023, 8:08 PM

#

This with gif 🙂

#

it is really starting to take form, even though i would love to have that circle under the car in css 😛 but if im going to do all the small details now, i will never finish the card hehe

#

mint lance Dec 21, 2023, 8:12 PM

#

yeah thats really cool 🙂 Did you try and make the circle as I said?

#

instead of the gif

floral axle Dec 21, 2023, 8:12 PM

#

i could not figure out where to put the css, and i felt bad for asking so many questions.. hehe so no

floral axle Dec 22, 2023, 7:59 AM

#

@mint lance would you have time to check something for me?

I have started wit adding the pulse thingy, without a anmation, just the circle to se if i got the grid right.. but i cant figure out how ot make it visible.
Did you do anything on the first "customs_fields" or left that blank and just did the code in the secound one?

#

#

` styles:
grid:
- grid-template-areas: |
"s s s s"
"l l l l"
"img img img img"
"pulse pulse pulse pulse"
"c1 c1 c1 c1"
"item1 item2 item3 item4"
- grid-template-rows: 2fr 1fr 1fr 4fr 1fr
- grid-template-columns: 1fr 1fr 1fr 1fr
- column-gap: 8px
- row-gap: 8px

`

#

wait dont answer! im stoopid

#

i forgot to spell check.. ignore my questions

#

i figured it out 😛 dang it.. always right after i ask a question hehe

#

i though have one question... and thats how to get the bordr visible?

I tried the way i did before, border: 10px solid, but nothing shows up

mint lance Dec 22, 2023, 8:13 AM

#

border of the circle? Check my code from yesterday, it has the border in it

#

but this should work

border: 6px solid green

floral axle Dec 22, 2023, 8:15 AM

#

my aploegiez, im blind

#

for some reason, the border is not visible. only the background color

mint lance Dec 22, 2023, 8:20 AM

#

hmm I don't know. must be a typo somewhere

floral axle Dec 22, 2023, 8:21 AM

#

#

the pulsing is working though! and its real sooth 🙂

#

smooth*

mint lance Dec 22, 2023, 8:27 AM

#

did you add either color to the border like I did, or write - border-color: green? Cause now you have color: green and I don't think that works

floral axle Dec 22, 2023, 8:29 AM

#

I removed the color: green

#

But no changes

floral axle Dec 22, 2023, 8:57 AM

#

it will not show me the border at all, i lied about finding it hehe

#

border: solid
border-width: 10px
border-color: green
position: abosolute

This shoud be correct, i dont understand how you get it to work with the same code and not me hehe

#

WAIT!!!!

#

might it be the theme ? i removed borders from the theme itself

#

frick.. its the theme screwing with me.. changed theme and i got the border back hehe frick

mint lance Dec 22, 2023, 9:12 AM

#

strange, I thought what you put in the card would override the theme. I'm pretty sure I don't have borders in the theme either

floral axle Dec 22, 2023, 9:15 AM

#

I changed theme, and everything worked hehe

#

i might as well install your theme 😛 then i know its all perfect! hehe

floral axle Dec 22, 2023, 9:37 AM

#

Lokks like there is a code or something in the theme i was using, i swapped to yours and it worked fine

mint lance Dec 22, 2023, 9:40 AM

#

floral axle i might as well install your theme 😛 then i know its all perfect! hehe

almost perfect 😉

floral axle Dec 22, 2023, 9:51 AM

#

#

Hehe now I see the borders correctly

floral axle Dec 22, 2023, 10:25 AM

#

#

#

starting to look like something, but there is a big difference between my cellphone and computer hehe

floral axle Dec 22, 2023, 10:44 AM

#

mint lance Dec 22, 2023, 10:49 AM

#

You could also add animation to the border-width for an aven cooler effect

floral axle Dec 22, 2023, 10:50 AM

#

oh really?

#

i need to figure out what i did to your theme, because i have the wrong background color hehe

floral axle Dec 22, 2023, 11:55 AM

#

@mint lance i might have f.. up a bit when adding your theme.. now all my custom cards are gone :/ all my custom cards are gone hehe

#

#

I reverted back to the old one.
I guess i have to start from scratch with dashboard if im going to use yours 🙂

mint lance Dec 22, 2023, 12:34 PM

#

yeah the theme comes with no guarantees of functionality with other stuff than my own. Yuo would have to adapt it:)

floral axle Dec 22, 2023, 12:41 PM

#

i will try to do that during xmas, just a day when the wife is note home.. hehe

#

added a secound pulse, to make a cooler effect 🙂 just not done yet!

mint lance Dec 22, 2023, 12:48 PM

#

google animation delay also perhaps

floral axle Dec 22, 2023, 12:48 PM

#

yeah i did, but not sure how to apply it to this card.. i manage to get it to work in html..

#

There is an animation-delay: .5s; but need to wrap my brain around the difference between div in html/css and these cards in ha.

#

I will get there 🤣

floral axle Dec 22, 2023, 3:32 PM

#

I`m a bit lost..
Trying to make a "chargin" station platform, looking good from my perspective, but i cant get the animation pulse below the frame..
this is the code i have for now:
https://dpaste.org/Ong3c#L2,12

Would you mind taking a look fredrik? 🙂

floral axle Dec 22, 2023, 4:31 PM

#

i managed to fix it with learning the basics of z-index 🙂

floral axle Dec 22, 2023, 5:08 PM

#

finally did it! 🙂

floral axle Dec 22, 2023, 5:48 PM

#

@mint lance you need to get a "buy me a coffe" thing on your github page... or a buy me a beer... i owe you a few 🙂

mint lance Dec 22, 2023, 7:33 PM

#

haha maybe I should 😮 No that just fields wierd:p
But very nice card, glad you got this far!

floral axle Dec 22, 2023, 7:34 PM

#

my only question for you now.. is how to place the pulse thingy? 😛

floral axle Dec 22, 2023, 7:34 PM

#

mint lance haha maybe I should 😮 No that just fields wierd:p But very nice card, glad you ...

You should! 🙂 you helped allot

floral axle Dec 23, 2023, 12:52 PM

#

could i ask you about that delay thing you talked about? 👼

mint lance Dec 23, 2023, 3:23 PM

#

It seems I had tried it too without sucess when working on this snowing effect. So cannot help :/

floral axle Dec 23, 2023, 3:24 PM

#

its fine 🙂 thank you for checking!

#

I found a way... but then i have to add a "clone" of the pulse.. and add following:

  - animation-delay: 3s

mint lance Dec 23, 2023, 3:32 PM

#

hmm not does not work for me. Does it for you?

#

with that indentation

floral axle Dec 23, 2023, 3:38 PM

#

I managed to get two above echoter yesterday.... but now im not hehe

mint lance Dec 23, 2023, 3:39 PM

#

I got the delay working, just had to split all the animation properties to their each line 🙂

- animation-name: snowflakes3
- animation-duration: 3s
- animation-timing-function: linear
- animation-delay: 1s
- animation-iteration-count: infinite
```

floral axle Dec 23, 2023, 3:41 PM

#

i also got it to work, but i pasted the whole keyframe on top of a new card

#

you did it the lean way then hehe

#

my code real messy 😛

mint lance Dec 23, 2023, 3:44 PM

#

what will you use the delay for? a second "pulse"?

floral axle Dec 23, 2023, 3:45 PM

#

i was thinking of making a delay to the shadow, and make the shadow look like the border kind of

#

i explaind that in e really bad way

#

Oh you changed color on your name! Well done

mint lance Dec 23, 2023, 3:55 PM

#

the shadow of what? not following here haha

floral axle Dec 23, 2023, 3:55 PM

#

im not following myself.. to be honast 😛

#

im not sure yet how im going to use it.. right now i added a seound pulse with a delay.. making a nice effect.. but that is not ideal, as the height of a cellphone and a computer or tablet, will not be the same.. so the circles will not be aligned

mint lance Dec 23, 2023, 3:57 PM

#

a good image speaks more than a thousand words. You don't have any reference images? inspo?

floral axle Dec 23, 2023, 3:58 PM

#

i will try to find something. hold on

#

https://www.kirupa.com/animations/creating_pulsing_circle_animation.htm

#

but doing it that way, will result in a other problem.. and thats aliging the together perfectly, whitch can be a pain when using phone with different size of height/width

floral axle Dec 23, 2023, 4:20 PM

#

fixed the car a bit, made some better shadows .. helped allot 🙂
Now i need to add the bar-card again, i accedently deleted it hehe

floral axle Dec 24, 2023, 12:08 PM

#

Is there any way to add this card as a custom:card that I can re-use or share with others ? It is your code as well, so I won't just share stuff out of the blue.

mint lance Dec 24, 2023, 12:30 PM

#

Do you mean in HACS? That I don't know. And also don't recommend. Cards from HACS get so limited. Better to publish on say Github or make a forum post on the community page 🙂

floral axle Dec 24, 2023, 12:33 PM

#

Ok but for my own sake, if I install the UI Lovelace, can I save this as a custom card on the custom folder ?

#

I will download your stuff, and se if I can find a path 🤣

mint lance Dec 24, 2023, 1:46 PM

#

yes yes ofc 🙂 two options:
Either you create a template. the template can contain as much or as little as you want from the "original" card. You could for example only keep the following in the dashboard, and put all the rest in the template:

- type: "custom:button-card"
  template: car-overview

Another option, which I use when I want to re-use something, that does not need to be adapted with variables, is the just move the whole thing into a separate yaml, and use !include to bring it back in. I use this for my footer menu for example. This is just an easy way to move all those long lines of code out of the way

#

oh btw, I'm talking from a yaml dashboard perspective. If you are using the GUI, you place the template in the "raw config editor". At the bottom for example. All is described in the button card documentation.

floral axle Dec 24, 2023, 1:51 PM

#

I had yaml dashboard before, and have now started creating one:) thats why i am interested in how to clean it up.

#

i crated this one out of custom:button-card, and some css:
and want to make a "header card" so i can re-use if i make more pages

obtuse owl Dec 24, 2023, 1:53 PM

#

You could always put your example on to Github. Wouldn't necessarily be something to download from HACS, but at least your example would be out there for the world to see.
I recently started putting some of the examples that I frequently share onto GH: https://github.com/dsellers1/home-assistant

mint lance Dec 24, 2023, 1:54 PM

#

obtuse owl You could always put your example on to Github. Wouldn't necessarily be somethin...

that's actually I nice setup, also with the dropdown tabs for the code

floral axle Dec 24, 2023, 1:56 PM

#

obtuse owl You could always put your example on to Github. Wouldn't necessarily be somethin...

nice, a good way to keep track of your cards as well. gave you a star 😉

obtuse owl Dec 24, 2023, 2:01 PM

#

I went with the drop down code to make the whole page shorter and faster to scroll through. Also, if you're not interested in a certain piece of code, there's no sense in making you scroll through it.
That's honestly one of the reasons why I started putting that up. I started collecting too many examples and started having difficulty finding them. Now, the bad thing is, I have a bunch more to put up but getting them posted is just time consuming.

tame spoke Dec 24, 2023, 3:54 PM

#

mint lance Do you mean in HACS? That I don't know. And also don't recommend. Cards from HAC...

That statement does not make sense.
It can not be used in HACS without being on github.
Also.. There are no limitations, a custom card is a custom card regardless of how you download it.

mint lance Dec 24, 2023, 5:11 PM

#

tame spoke That statement does not make sense. It can not be used in HACS without being on ...

Ah yes your probably right. What I meant is from my experience a lot of custom cards ”back-end” are in Javascript, where as for example custom button card is something you can actually work with more easily. If you know what I mean

floral axle Dec 26, 2023, 7:04 PM

#

Starting to take form 🙂🙂 will add the pulse thing to the charger instead, so I have garage, vehicle and charger seperated

mint lance Dec 26, 2023, 7:11 PM

#

perhaps just a green half-pulsating glow the the now grey circle on the charger? 🙂

floral axle Dec 26, 2023, 7:11 PM

#

Yes indeed

#

When that is done.. I want to transfer over to clean yaml. But not sure how good the pop-up card is to use there

floral axle Dec 26, 2023, 8:27 PM

#

I think this looks good, just something missing.. can't put a finger on it

#

Apologies for the sound 🤣

floral axle Dec 26, 2023, 8:59 PM

#

#

Tried with a bar again, but does not fit in

mint lance Dec 26, 2023, 9:02 PM

#

perhaps crop and resize the image? Also the text could be bigger to fit the screen perhaps

#

just a quick idea at least ^^

floral axle Dec 26, 2023, 9:18 PM

#

Yeah trying to find out why there is a big gap between the text and the image, the image is cropped to the limit, and making it bigger.. maby.... I want to add buttons under for the power usage and sutch.

#

You might be right 👍

#

When I put one custom field over the other, should I use 1fr in grid or am I doing it wrong

mint lance Dec 26, 2023, 9:35 PM

#

you can combine different units. If you don't need an area in the grid to be any bigger than the content within it, you can use min-content. Here are two examples

floral axle Dec 26, 2023, 9:38 PM

#

ohh thanks!

mint lance Dec 26, 2023, 9:46 PM

#

this is great when you might want to push content in some directon for example, many use cases

floral axle Dec 27, 2023, 4:06 PM

#

is it possible to create something like the attached image? thats a Apexchart, but i want it to be a icon with percentage circle around the icon.
I could maby make something out a custom:button-card with the stroke?

found one in UI Minimalist, but thats a custom card im not sure how to use

mint lance Dec 27, 2023, 11:01 PM

#

Let me know when uo find it 😉
I think the guy behind "A different take on lovelace" had some cirgular graphs in his card. Check his github

floral axle Dec 28, 2023, 12:40 PM

#

I found it in his button card templates, but it looks to complicated hehe

floral axle Jan 10, 2024, 7:43 AM

#

Frickedi duck.. i accedently crashed my HA, now all my custom cards are gone and i have to re-make these charging cards... a good thing this thread is not removed yet!

mint lance Jan 10, 2024, 7:59 AM

#

Hope you had a backup?

floral axle Jan 10, 2024, 8:12 AM

#

Nope. The backup was interrupted so it failed to load 🤣

obtuse owl Jan 11, 2024, 12:04 AM

#

floral axle Nope. The backup was interrupted so it failed to load 🤣

If you have the backup file, you should be able to extract your dashboard. IIRC, it is just a compressed file. I had to do that recently when I did not click Commit when moving some of the examples over to Github and I deleted the originals.

floral axle Jan 11, 2024, 7:44 AM

#

obtuse owl If you have the backup file, you should be able to extract your dashboard. IIRC,...

True, I fixed most now, but I do want to figure out how to upload my custom cards to GitHub for safe storing. Will look at that today.

mint lance Jan 11, 2024, 9:30 AM

#

floral axle True, I fixed most now, but I do want to figure out how to upload my custom card...

you can start with just pasting them in a word doc/notes. There is also a Desktop app called Obsidian that is code with code.

floral axle Jan 12, 2024, 10:53 AM

#

#

Do you know how I can make the icon go to right ?

#

i used

icon:
                  - justify-self: end
                  - align-self: end
                  - aligh-content: end
                  - color: "var(--color-white)"
                  - overflow: hidden

grid settings:

                 - grid-template-areas: |
                          "n n"
                          "s i" 
                  - grid-template-rows: 1fr 1fr 
                  - grid-template-columns: 1fr 1fr

#

Never mind I will find it myself, need to learn hehe

floral axle Jan 12, 2024, 11:54 AM

#

#

There we go! Now I just need to figure out what's missing 🤣

floral axle Jan 12, 2024, 9:38 PM

#

so... i tried making a huge custon-card, but i cant get the last "grid" to be correctly placed.
https://dpaste.org/XpOHv

The 3 lock icons should be higher up, but what ever i do to the grid-template-rows: just makes a bigger gap between the "battery" card and the "controls" card

I might have put to many into one card, but i wanted to try to se if it was possible to make a really easy card for others to use

floral axle Jan 12, 2024, 10:22 PM

#

Cleaned up the icon a bit, but stuck with the wired gap between the two last rows

mint lance Jan 13, 2024, 9:46 AM

#

I'm not if you should use 1fr for ALL your rows in the main grid. I often use min-content for the most part (but you need at least one 1fr to fil out the remaining space.

floral axle Jan 13, 2024, 10:03 AM

#

Ok! I will try a bit more

floral axle Jan 13, 2024, 10:22 AM

#

I tried this now, but did not change anything.. allot claner though

        - grid-template-areas: |
                "range"
                "l"
                "img"
                "engine"
                "battery"
                "controls"
        - grid-template-columns: 1fr
        - grid-template-rows: 1fr repeat(5, min-content)

floral axle Jan 14, 2024, 12:31 AM

#

@mint lance I managed to get it uploaded to github: https://github.com/BerrisNO/HA-Custom-Cards 😛 but not sure how i can add more about you.
you have helped me allooooot with this!

floral axle Jan 14, 2024, 12:03 PM

#

Finally starting to get this one in place 🙂

floral axle Jan 14, 2024, 6:52 PM

#

mint lance I got the delay working, just had to split all the animation properties to their...

was this delay added to the same grid?
The reason i ask, i want to add a secound ring effect with a delay.. but then i have to add another object that potentially will be hard to place

#

mint lance Jan 14, 2024, 8:39 PM

#

floral axle was this delay added to the same grid? The reason i ask, i want to add a secoun...

Add the delay to the object you want to delay 🙂 So yes, you need to create a new object. But the pulse is not in the grid right?

floral axle Jan 14, 2024, 8:40 PM

#

mint lance Add the delay to the object you want to delay 🙂 So yes, you need to create a ne...

- grid-template-areas: |
            "range"
            "l"
            "img"
            "pulse"
            "engine"
            "battery"
            "controls"

#

Yes i have it in th 4th row, is it possible to do it a other way maby ?

mint lance Jan 14, 2024, 8:43 PM

#

oh okay, I think I had it floating outside the grid, with positition: absolute

floral axle Jan 14, 2024, 8:43 PM

#

https://dpaste.org/OGmiT

#

ah ok, i could try

mint lance Jan 14, 2024, 8:51 PM

#

and thren you jsut create a second pulse, with a delay to the animation

#

this is how I positioned the pulse card

floral axle Jan 14, 2024, 8:53 PM

#

ah ok 🙂

#

Will that give a difference if you open it on pc, tablet and phone?

#

because now my pulse move about 5 pixels from the top if i use my wifes phone

mint lance Jan 14, 2024, 8:54 PM

#

yes, you should probalby change the card dimensions and the units in the custom field styling to something else than pixes

#

fr seems to be a good unit

floral axle Jan 14, 2024, 8:55 PM

#

noted 🙂

mint lance Jan 14, 2024, 8:56 PM

#

or actually, does not works for me in this case now when trying. Not % either...

#

sorry I mixed up, I mean rem and not fr

floral axle Jan 14, 2024, 8:57 PM

#

ok

mint lance Jan 14, 2024, 8:59 PM

#

styles:
  custom_fields:
    img:
    pulse:
      - position: absolute
      - top: 52%
      - left: 50%
      - margin-top: 1rem
      - margin-left: '-10rem'

custom_fields:
  pulse:
    card:
      type: custom:button-card
      styles:
        card:
          - height: 2rem
          - width: 20rem
          - border-radius: 50%
          - border: 6px solid green
          - background: green
          - z-index: 1
          - animation: pulse 3s ease-in-out infinite
      extra_styles: |
        @keyframes pulse {
          0% {transform: scale(.8); opacity: .6}
          50% {transform: scale(1.2); opacity: .3}
          100% {transform: scale(.8); opacity: .6}
        }
````

floral axle Jan 14, 2024, 9:05 PM

#

noted thanks, i will test 🙂

#

using rem did the trick! thank you again for the 100 time for the support @mint lance ! now get that buy me a coffy thing hehe

mint lance Jan 14, 2024, 9:17 PM

#

no worries 🙂

floral axle Jan 14, 2024, 9:27 PM

#

#

its a good start, but needs tweaking hehe

mint lance Jan 14, 2024, 9:31 PM

#

very nice 🙂

floral axle Jan 15, 2024, 10:33 PM

#

This is what i ended up with, not sure if you like this or the other one best hehe

#

Just need to find a better green color that is "glowing" but not to bright for the white background

floral axle Jan 16, 2024, 7:26 AM

#

The idea is to get it looks like it is pumping power hehe but not sure if I got the effect right or if I should keep it more simple

mint lance Jan 16, 2024, 7:26 AM

#

I prefer the other one. That resembles charging more I think

floral axle Jan 16, 2024, 7:27 AM

#

Noted 🙂 I kind of agree but it was fun making it hehe

mint lance Jan 16, 2024, 7:29 AM

#

nice to see you mastering the button card. Everything becomes way for fun right? 😄

floral axle Jan 16, 2024, 7:32 AM

#

Indeed. It reminds me of what I managed before (about 15 years ago).. when I actually knew css and stuff hehe. I have had a long break 🤣 I switched to animation in after effects and sutch hehe.

But only a hobby though

#

Oh I feel old now

mint lance Jan 16, 2024, 7:36 AM

#

haha I get you

floral axle Jan 16, 2024, 7:47 AM

#

mint lance haha I get you

I appreciate the help, and hopefully someone will want to use this when it's complete 🤣

mint lance Jan 16, 2024, 7:49 AM

#

yes I'm sure (y)

floral axle Jan 17, 2024, 5:43 PM

#

Do you know if it is possible to add a bubble card or some kind of a popup inside a button card ? Like a settings popup but all settings inside the button card ?

mint lance Jan 17, 2024, 6:50 PM

#

Yes if you use - display: none for card state then you can toggle it on an off lika s pupup

floral axle Jan 17, 2024, 7:50 PM

#

Oh, I will try this tomorrow

mint lance Jan 17, 2024, 8:06 PM

#

Here is the card styles for a popup I had before for my media player EQ settings.
Using helper to toggle it

  card:
    - height: 220px
    - width: 360px
    - border-radius: "var(--border-radius)"
    - padding: 1.5rem
    - background: "var(--contrast-10)"
    - position: fixed
    - top: 50%
    - left: 50%
    - margin-top: -140px; /* Negative half of height -30px */
    - margin-left: -180px;
    - z-index: 4
    - display: >
        [[[
          if (states['input_boolean.eq_dropdown'].state == "on"){
            return 'block';
          } else {
            return 'none';
          }
        ]]]

floral axle Jan 17, 2024, 8:30 PM

#

mint lance Here is the card styles for a popup I had before for my media player EQ settings...

Is that a custom card or a bubble card ?

mint lance Jan 17, 2024, 8:31 PM

#

When talking to me you won't get much else than custom button card 😅

floral axle Jan 17, 2024, 8:31 PM

#

Hehhehe I should have known

obtuse owl Jan 17, 2024, 9:38 PM

#

mint lance Here is the card styles for a popup I had before for my media player EQ settings...

I've started implementing IF shorthand for simple IF statements. Cuts down on the number of lines for a simple return.yaml - display: > [[[ return (states['input_boolean.eq_dropdown'].state == "on") ? 'block': 'none'; ]]]which could technically all go on one line if you wanted:yaml - display: '[[[ return (states['input_boolean.eq_dropdown'].state == "on") ? "block": "none"; ]]]'

mint lance Jan 17, 2024, 9:39 PM

#

obtuse owl I've started implementing IF shorthand for simple IF statements. Cuts down on th...

oh that's handy, thanks for that 🙂

obtuse owl Jan 17, 2024, 9:41 PM

#

I have two similar methods for Jinja too. But, at the moment, I cannot seem to find them.

floral axle Jan 18, 2024, 5:32 PM

#

obtuse owl I've started implementing IF shorthand for simple IF statements. Cuts down on th...

handy! 🙂

floral axle Jan 18, 2024, 5:53 PM

#

mint lance Here is the card styles for a popup I had before for my media player EQ settings...

i tried to test thism but i only get a icon with no actions.

- type: custom:button-card
    entity: input_boolean.soc
    name: Settings
    icon: mdi:cogs
    show_name: true
    show_icon: true
    tap_action:
      action: toggle
    style:
      card:
        - height: 220px
        - width: 360px

#

or does this thing need browser mode?

mint lance Jan 18, 2024, 7:42 PM

#

no, no need for browser_mod. By using the absolute position you can place it where you want in your dashboard. Or in a card as you asked for

floral axle Jan 18, 2024, 7:43 PM

#

i did not get it working lol sorry!

mint lance Jan 18, 2024, 7:49 PM

#

share your full card and I can have a look

floral axle Jan 18, 2024, 7:51 PM

#

oh i havent tested in the card i want it on, i wanted to check if i got it popping with just its on as a pop-up

#

https://dpaste.org/a0tUc

mint lance Jan 18, 2024, 7:58 PM

#

that should work. With that it will hide/unhide
Ofc you can take it the next level and add animations later on

floral axle Jan 18, 2024, 8:00 PM

#

it added a huge button to my dashboard, it enables and disables the card.. but no poppup thingy

mint lance Jan 18, 2024, 8:01 PM

#

well how do you define a pop-up? 😛

floral axle Jan 18, 2024, 8:03 PM

#

A card that goes over the other card with new information, that you can close and your back at the view

#

same as the bubble-card pop-up card

mint lance Jan 18, 2024, 8:03 PM

#

yes, the above is that very same card. now you just have to fill it with your content

#

and ofc you need a button to trigger it

floral axle Jan 18, 2024, 8:05 PM

#

#

hehe this is how it looks now

#

the button will toggle the input_boolean.soc right?

mint lance Jan 18, 2024, 8:07 PM

#

yes, but you need another button to toggle pop-up (the big card with the gears). As this wil dissapear when off, you need something else to click

floral axle Jan 18, 2024, 8:07 PM

#

for me, the icon only goes yellow when its on hehe but ok.
I will try to make some info, and create a toggle button

#

it wont go away when i toggle it off, so there must be a stupid mistake of mine somewhere hehe

mint lance Jan 18, 2024, 8:13 PM

#

this is how it should work

#

floral axle Jan 18, 2024, 8:15 PM

#

#

haha the differance is huge

mint lance Jan 18, 2024, 8:18 PM

#

I have no idea what you are doing 😛

#

floral axle Jan 18, 2024, 8:19 PM

#

show off!! hehe

#

ok, let me check again

#

  - type: custom:button-card
    entity: input_boolean.soc
    name: Settings
    icon: mdi:cogs
    name: Test pop-up thingy
    show_name: true
    show_icon: false
    tap_action:
      action: toggle
    style:
      card:
        - height: 220px
        - width: 360px
        - border-radius: "var(--border-radius)"
        - padding: 1.5rem
        - background: "var(--contrast-10)"
        - position: fixed
        - top: 50%
        - left: 50%
        - margin-top: -140px
        - margin-left: -180px
        - z-index: 4
        - display: >
            [[[
              if (states['input_boolean.soc'].state == "on"){
                return 'block';
              } else {
                return 'none';
              }
            ]]]

#

i dont get it lol

#

mint lance Jan 18, 2024, 8:24 PM

#

do you have that same entity in the button you are clicking?

floral axle Jan 18, 2024, 8:24 PM

#

yes

#

 - type: custom:button-card
    entity: input_boolean.soc
    name: Settings
    icon: mdi:cogs
    show_name: true
    show_icon: true
    tap_action:
      action: toggle

mint lance Jan 18, 2024, 8:26 PM

#

hmm ok well here is my example

#

  - type: custom:button-card
    view_layout:
      grid-area: btn
    entity: input_boolean.dummy_light1
    name: Button
    show_name: true
    show_icon: false
    show_label: false
    show_state: false
    styles:
      card:
        - height: 200px
        - width: 200px
        - background: orange
        - padding: 0
        - margin: 0


  - type: custom:button-card
    name: Pop-Up
    show_name: true
    show_icon: false
    show_label: false
    show_state: false
    tap_action: none
    styles:
      card:
        - height: 300px
        - width: 300px
        - position: absolute
        - top: 50%
        - left: 50%
        - background: black
        - padding: 0
        - margin-left: -150px
        - margin-top: 150px
        - display: >
            [[[
              if (states['input_boolean.dummy_light1'].state == "on"){
                return 'block';
              } else {
                return 'none';
              }
            ]]]
        - animation:
            - slide-up .5s ease-out
            - opacity .5s ease-in
    extra_styles: |
      @keyframes slide-up {
        0% {transform: translateY(50px);}
        100% {transform: translateY(0);}
      }
      @keyframes opacity {
        0% {opacity:0;}
        20% {opacity:1;}
      }

floral axle Jan 18, 2024, 8:28 PM

#

ohhh its the tap_action: none

#

probably.. i used toggle.. so basically it toggels off and on at the same time

mint lance Jan 18, 2024, 8:31 PM

#

oh haha

floral axle Jan 18, 2024, 8:33 PM

#

hehe nice.. thanks for helping bro!

floral axle Jan 18, 2024, 8:49 PM

#

Is it possible to toggle the pop-up when clicking on my main Battery button, that already have an entity?

#

mint lance Jan 18, 2024, 9:04 PM

#

yes if you change the action from toggling the entity to a call service instead, then you can toggle another entity

floral axle Jan 18, 2024, 9:05 PM

#

oh yes! thanks

#

I got it all working, just struggeling with placing it correctly inside the card

floral axle Jan 20, 2024, 1:23 PM

#

mint lance yes if you change the action from toggling the entity to a call service instead,...

Do i need to do anything spesific to get the bar card working inside that pop-up?

#

i put one outside, and one inside

#

mint lance Jan 20, 2024, 1:24 PM

#

hmm no, I mean the pop-up is just a normal button card. Works the same way as your other cards

floral axle Jan 20, 2024, 1:24 PM

#

wierd

#

wait... i might have it now

#

lol im dumb

#

what is the first thing i should ask myself before asking you for help? hehe

mint lance Jan 20, 2024, 1:31 PM

#

spelling? 😛

floral axle Jan 20, 2024, 1:31 PM

#

yeah.. but in my defence... i used ` instead of ' hhe

#

hehe* they are hard to se some times

#

#

there, just need to figure out why its not centering correctly 🙂 probably padding

mint lance Jan 20, 2024, 1:47 PM

#

yes I think I had a similar problem in a card, I can checj

floral axle Jan 20, 2024, 1:47 PM

#

thanks, i checked forums, but everyone asking the question did not get a replay hehe

mint lance Jan 20, 2024, 1:48 PM

#

are you using custom:my-slider-v2?

floral axle Jan 20, 2024, 1:50 PM

#

no, im using bar-card

#

custom:bar-card

#

mainly because you can visualize the SOC and Target SOC for the vehicle

mint lance Jan 20, 2024, 1:53 PM

#

ah see, same problem here. Mayb I never solved it XD

#

it does not show too good in the screenshot but halv the bar is outside the card

floral axle Jan 20, 2024, 1:54 PM

#

i fixed it last time with padding-right: 100%, but i cant figure out where i did it hehe

#

yeah i see it

#

https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_bar_card/#example

#

i tried to add this styling, but no changes

mint lance Jan 20, 2024, 1:59 PM

#

I found out why the card was f*cked up. I had to old version of card_mod applied

floral axle Jan 20, 2024, 1:59 PM

#

wait what?

#

is there a new way of doing card_mod?

mint lance Jan 20, 2024, 2:01 PM

#

yes you cannot just write style anymore

#

try addid this to your bar card and see what happens

#

      card_mod:
        style: |-
          bar-card-currentbar {
            right: 0;
          }
          bar-card-backgroundbar {
            right: 0;
          }
          bar-card-background {
            height: 35px !important;
            background: none !important;
            left: 0;
          }

floral axle Jan 20, 2024, 2:02 PM

#

YOU SEXY MF..

#

thanks!

#

oh i have a new question.. anny suggestion how to put in a slider ? im not sure how to make this "bautifyl"

#

my goal is actually to add all of this:

mint lance Jan 20, 2024, 2:09 PM

#

custom:my-slider-v2 is what I use, you can style to look however you want too

floral axle Jan 20, 2024, 2:11 PM

#

oh ok cool. thanks!

mint lance Jan 20, 2024, 2:13 PM

#

this card is a bit broken now, not using it anymore but here I have emdebed 2 sliders into the button card.

#

haha forgot I have a new one... 😛 here, three sliders

floral axle Jan 20, 2024, 2:14 PM

#

oh nice

#

The only thing missing there, is to show the %.. so i need to show how much in value

mint lance Jan 20, 2024, 2:15 PM

#

I think default look is like the bar card. So here I just made the track/progress bar super thin, and then the thumb/controller bigger and with a radius

floral axle Jan 20, 2024, 2:15 PM

#

ah noted

mint lance Jan 20, 2024, 2:16 PM

#

you ust have to remember that usability can be tricky on small screens if you have clumsy fingers 😛 better if you can scale everything up a bit. Here I've taken it to the extreme. It works, but could be better

floral axle Jan 20, 2024, 2:17 PM

#

hehe i noticed on those small buttons up right for the alarm you made.. i had to make them bigger for my fat fingers to hit the right one hehe

floral axle Jan 20, 2024, 8:42 PM

#

starting to take form... but i do struggle a bit with figuring out the layout and design of this thing hehe

floral axle Jan 21, 2024, 1:07 PM

#

I do wonder.. if at any point the button-card can start beeing slow?
I`m currently up to 700 lines soon with this card, and should probably stop? hehe

mint lance Jan 21, 2024, 1:20 PM

#

Maybe you should start looking at templates includes and yaml anchors:)

#

Check the UI Minimalist cards, they usually have several layers of templates

floral axle Jan 21, 2024, 1:23 PM

#

yeah i probably should

#

i will finish this card, and probably pick it apart and try it out

floral axle Jan 21, 2024, 2:47 PM

#

#

You have some nice gradient colors

mint lance Jan 21, 2024, 3:11 PM

#

Yes suits the car too:) google css gradient generator. There are lots off tools online to help make nice swatches

floral axle Jan 21, 2024, 3:12 PM

#

Ah ok. Just trying to find the best layout to fig everything hehe

floral axle Jan 22, 2024, 9:20 AM

#

is there a way to force these to be same hight?

#

i tried with height: 100%, checked that the grid has 1fr on both row and column

#

i can force it to set a pixel hight, but not exacly what i wanted hehe

floral axle Jan 22, 2024, 9:45 AM

#

Endet up with this 🙂 and will style it later hehe, i need to focus on finishing some other project, and come back to chane the style here 🙂

mint lance Jan 22, 2024, 10:08 AM

#

nice, try experimenting with the animation properties also. Would look good if it slides up from the bottom of the screen without the opacity face for example

floral axle Jan 22, 2024, 10:25 AM

#

Yeah. I have a feeling I'm going to split the pop-up out of the card, and add it as it's own card, so it fits better to the dashboard, and reduce the amount of code in the card

mint lance Jan 22, 2024, 10:39 AM

#

yes I think that makes sense

floral axle Jan 23, 2024, 9:12 AM

#

is there a way to make this pop-up by user and not for everyone?

#

i should probably change this to browser mod?

mint lance Jan 23, 2024, 9:25 AM

#

hmm yes probably. I never managed to make nice pop'ups with browser mod, hence this method. But sure you have some more conditions you can set there

floral axle Jan 23, 2024, 9:28 AM

#

well, aint it possible to use browser mod, and put a button-card in it?

mint lance Jan 23, 2024, 11:44 AM

#

it is, but I struggled with the size. But give it a try and let me know 🙂 For me this was more practical though

floral axle Jan 25, 2024, 3:11 PM

#

#

Any suggestions on where to place my power consumption and price ?

#

I can't figure out hot to make it look ok 🤣

#Custom Button Card custom_fields