frontend-archived

[spring pollen]

first layer before floorplan layer.

[tacit cave]

.... you remove the camera cards

am I not being clear here?

The pop up will just happen.

[spring pollen]

Sorry yaml and javascript are completely foreign to me. So I remove this part url: rtsp://192.168.1.42:8554/Jedilnica fashion: webrtc muted: true
and instead I write: automation.kamera_jedilnica_pop_up

[tribal galleon]

Like Petro said, here, we're letting the automation handle the pop-up. Nothing has to be added to your dashboard in order to make it work. (Other than registering the browser.)

[tacit cave]

I suggest you learn yaml then, because the word remove means 'delete', and card has a lovelace meaning. So at most, you will be deleting lines of yaml.

you will be adding exactly zero things to your card.

your automation goes in as an automation

which will also require the custom browser mod integration

I think you really need to learn to walk before you run based on your comments here. These are simple actions via the UI.

[spring pollen]

Ooo! I understand. Then that's not what I wanted. Would you give me a moment to make a picture of what I want.

[tribal galleon]

Agreed. There is a level of experience needed to get this to work easily. It is not hard, per se, but there is a lot going on to get it to work.

[spring pollen]

Well, I'm not that ignorant again. It is logical that if I delete something, I have to replace it with something. This is the first time I'm doing automation like this. I have already mounted the network disks and it makes sense to me that they run in the background.

[tacit cave]

A pop up is something that pops up and covers the UI

This is why I said, if you want it to conditionally show, you add a conditional card

[tribal galleon]

The automation is the part that is being added.

[tacit cave]

correct, which is what will create the pop up.

therefore you delete the card that is showing the camera

if you want the camera to show in that spot, it's not a pop up. It woudl be a conditional card showing the camera

[tribal galleon]

That video is from SHJ so you should be able to follow his instruction.

[tacit cave]

these are basic functionalities in Lovelace. Hence the 'learn to walk before you run' comment

[spring pollen]

OK. Do I need to specify this in automation?

This is what I would like it to look like:

And so if it detects an object

[tacit cave]

That would be a conditional card

[spring pollen]

and of course when there is no more detection to close and an icon is shown

[tacit cave]

Yes, all conditional card

[spring pollen]

It kind of looks like this now

[tacit cave]

You don't need to look at the object tree

this goes in your dashboard, you can edit it via the UI.

add a conditional card

that conditionally shows the camera, and one that conditionaly shows the icon.

[spring pollen]

Ok.

[vapid field]

On hold_action, ability to copy state/attribute value (string) to clipboard.

[warped marten]

Hope, someone can point me what I'm doing wrong.
I'm using almost decluttering cards to prevent multiple times repeating the layout.
For a variable I have the following:

  - my-list:
      - item: one
      - item: two

Then further I will access the list items in a for-loop with

        {% for item in '[[my-list]]' %}
        - {{ item }} -
        {% endfor %}

The output is: "-[--[--m--y-----l--i--s--t--]--]-"
Seems it iterates over the string, but not substitutes the variable.

[tacit cave]

As said in templates, you're mixing Jinja and JS templates

you need to stick to 100% JS templates for decluttering cards (assuming it supports JS templates)

it does not support Jinja Templates

I.e. Templates using {% %} or {{ }} will not work.

[warped marten]

But this one:

                --card-mod-icon-color:
                  {% set level = ((states('[[chip-entity]]')|int - '[[lower-limit]]'|int) / ('[[upper-limit]]'|int - '[[lower-limit]]'|int) *100) | round(0) %}
                  {% if level <=  20 %}
                  red
                  {% elif level <= 30 %}
                  orange
                  {% else %}
                  green
                  {% endif %}

I successful use in a decluttering card.

[lyric prairie]

That's within a card_mod style which does support jinja templating

[golden mist]

@warped marten I converted your message into a file since it's above 15 lines :+1:

[spring pollen]

is it possible with any HA card to make it so that if binary_sensor.jedilnica_motion = on it should show kamera.jedilnica (video from the camera) else hide the video and show the mdi:cctv icon

[tacit cave]

Use a conditional card. It’s literally called conditional card in the UI.

[lyric prairie]

@warped marten Some cards like mushroom and card_mod support jinja templating. Other custom ones like decluttering use JavaScript. It's always mentioned on the card's documentation page. It's quite important to understand the difference if you want to do cool custom stuff. Else stick with the basic GUI provided tools

[patent dawn]

Anyone have an example on-hand of aliasing entity attributes/states in a card? Is it possible?

Purpose: I want to rename my Blink system arm/disarm state as "cameras on" / "Cameras off" on my wife's mobile dashboard UI.

[golden mist]

@warped marten I converted your message into a file since it's above 15 lines :+1:

[sly sedge]

Does anyone know if the supervisor logs are gone from the logs tab on the frontend? I just did a fresh install of home assistant and can't find any option to select the supervisor logs any more

[tacit cave]

FYI this is the documentation to all available stuff you can do in the frontend: https://www.home-assistant.io/dashboards/ The sidebar shows you the cards that are available. Here's the docs to condtional card https://www.home-assistant.io/dashboards/conditional/

[spring pollen]

Hi man! Thanks. After long search i found bubl-card who have pop-up function, but where i live it is night and nobody come or go so i cant tested for now. We'll see in the morning!

[tacit cave]

Just keep in mind, pop up means it will pop up on your screen. It does not mean what you think it means.

[spring pollen]

Yes, I know, that's exactly what I was looking for, a popup on the card where I place that card (where I have sed custom:webrtc-camera).
This way is completely familiar to me, unlike what we debated during the day (at least it was with me)

[spring pollen]

Plus I had to make a common template for the camera sensors (vehicle, person, motorbike, bike). What more to write than tomorrow is a new day and thank you for your effort. I'm sure we'll be in touch again. By for now.

[tacit cave]

Pop ups in home assistant fill the whole screen on mobile and are centered and have focus on desktop/tablet. They are not what you are looking for.

[jaunty pivot]

hello, i'm using the battery-state-card to show all my battery state. Do you know if there is a way to show only battery with for exemple less than 50% remaining ?

[tacit cave]

add a filter to your configuration,

https://github.com/maxwroc/battery-state-card?tab=readme-ov-file#filters

[jaunty pivot]

time to time, I should RTFM before asking for help ! Tx

[gusty hatch]

Anyone know how to make the frigate card bigger on a dashboard? Like if I want a card with just a single camera that takes up a large portion of the dashboard?

[tacit cave]

you can make the view a panel, otherwise, custom cards to set the size of the card based on the screen width

[gusty hatch]

How would I make it a panel?

[tacit cave]

change the view type to panel

[tribal galleon]

Bonus tip: setting a filter to include unavailable and unknown and excluding a state greater than 0 is useful to see entities that are not reporting a battery level because they're either dead or not communicating properly.

[gusty hatch]

Cool thanks! Works great on mobile

[visual glen]

hi, i'm trying to install mushroom cards, i've installed them via HACS but i don't see them when i search in cards, can someone help ?$

i restarted my home assistant

[gusty hatch]

So when you got to "Add Card", the mushroom cards should be towards the middle bottom. Did you try just typing mushroom card in the "Search Cards" area?

[visual glen]

ty for reply ! yes i tried to write "mushroom" in it, but nothing appear, i've tried to install 4 different cards pack, i didnt see them even after a restart

i'm trying to clear cache but i dont find where is it to do it, even on google i dont find how to do it clearly$

[gusty hatch]

https://github.com/piitaya/lovelace-mushroom-themes

On chrome, go to settings, then privacy and security then clear browsing data and you should be able to just clear the cache

[visual glen]

yes i've cleared my browser cache, but isnt there a frontend cache on home assistant to clear ?

[gusty hatch]

That I don't know. Ive never had to do that. Have you tried just to close the browser and reopen?

[dark dirge]

it's just the browser cache

I usually hit F12 to open the dev panel, right click on the "reload" button and select "Empty cache and hard reload" to make sure

[timid beacon]

I never got the difference between hard reload and empty cache and hard reload. I thought the "hard" part was the cache clearing

[dark dirge]

🤷 When I get weird results, I go all medieval on it

[visual glen]

It dont work i dont see card even after that

[gusty hatch]

Which mushroom cards did you install?

[visual glen]

On HACS i writed "mushroom" and installed the card with that

It doesnt show on my phone app either

After a reinstall it show up now

[fiery ledge]

just noticed this really silly Frontend bug?:```
- type: attribute
entity: climate.voorkamer
attribute: min_temp
name: Min temp
icon: mdi:thermometer-minus
suffix: °C
- type: attribute
entity: climate.voorkamer
attribute: max_temp
name: Max temp
icon: mdi:thermometer-plus
suffix: °C

[fiery ledge]

see: https://github.com/home-assistant/frontend/issues/19537

[scenic current]

Back again. I'm still working on my Alexa Show clone cards (example) and could use some help. I'm trying to layout my card like this:

https://pastebin.com/7FcGEhMf
This is the code for my markdown card

It's looking like this. I don't know where the weather element went to. I'm also looking for a way to get the second row to size like it shows in CSS Grid Playground image above.

I'm trying to learn this stuff and use tools to try and visualize but running into stumbling blocks. I know it's part of the learning process. My thinking is if I can get one of these to look good then I can do others in a similar way. I have not attempted to style the text for size but figure that will come later once I can figure out how to position the elements.

and in fairness, I am trying to mimic another example that is doing similar to what I am trying to accomplish. Any help is most appreciated.

[tribal galleon]

@scenic current I'm not sure if it will help, but at Line 18 of the code that you posted above, try changing it to layout_type: custom:grid-layout. I had an issue when I was playing with mediaquery and that seemed to be the fix. Issue #250

[nova bloom]

trying to get a local image to show in lovelace as the background. its in the config folder then a subfolder images. Is this the wrong path? background: center / cover no-repeat fixed url('/local/images/bg001.jpg')

[tribal galleon]

put it in the /config/www folder. HA maps /local/ to /config/www

[nova bloom]

yes! you rock thanks!

[nova bloom]

are we able to use jpg? or only png?

[tribal galleon]

Not sure of specific file types but I do have .jpgs set for a couple of my views.

[torpid harbor]

Anyone have any idea why I get blue text in one FireFox tab and purple text in another FireFox tab?

[vast crane]

different users? private mode? any theme settings?

[torpid harbor]

I had the "blue" tab open, then hit Duplicate tab in the context menu and saw the purple text. FF 121.0.1 64-bit on Win10. It seems I do have an update pending a restart...

Same HA user, same FF user, same FF window, just different tabs. Using dark mode, I don't think I've even got a theme installed...

[tribal galleon]

I just Duplicated the tab and still have blue in both.

[torpid harbor]

Doesn't matte much, just a curiosity. It did, TBH, help a bit, as I was duplicating naming conventions from one sensor to another - the colors were one more thing to keep me straight...

curiously, I duplicated the purple tab and got blue again... weird... 🤷‍♂️

[vast crane]

must've been something failed to load properly

[tribal galleon]

Not only is it blue > purple text but the icon shapes around custom integration and cloud is gone. Also, the "button" to show disabled integrations.

[torpid harbor]

And the red outline around the Brother integration is missing, too. Again: weird... 🤷‍♂️ Not a crisis by a long shot, just... weird...

Honestly, I've got no idea why that Brother printer is offline, either... Need to plug a cable into it to see if it'll connect wired instead of WiFi.

But, that's a totally different topic.

[tribal galleon]

Printer probably just asleep and not reporting. You could try waking the printer and restarting the integration. My Canon printer does that every once in a while. (Note: if you decide to go wired, printer will probably get a new IP address and you'll probably have to re-setup the integration.)

[torpid harbor]

You'd think, but it doesn't ever wake up. Doesn't appear online after a power cycle, either. Can't print to it. It's feeling very dead... Need to test it wired. Since HA found the printer via WiFi and installed the integration for me, I'm betting it will find it again once it's wired, but thanks for the heads up. Frankly, don't really care if it's in HA - I don't do anything with it there, it's just... there.

[tribal galleon]

Just noticed weird discrepancy with the Duplicated tab... Names aren't showing friendly_names but original tab does... 😕

[torpid harbor]

Not sure I see what you're saying. Also, your GIF isn't GIFing...

[tribal galleon]

It's GIFing on my side. One tab says "Home Assistant Supervisor"; other one says "hassio".

[torpid harbor]

Ahhh... It GIFs sloooowly - I was too impatient. I don't even see that in my images. I must be totally blind today...

[tribal galleon]

Maybe something didn't load quick enough so the page just quit early before it translated the name to friendly_name.

[torpid harbor]

Finally refreshed the tab and it went back to blue text.

[tribal galleon]

Yeah. Same with mine. Duplicated several times and about half had the weird names.

[atomic glacier]

Both ☑️

[wintry gull]

Hello everyone. Im trying to change this template to round to 0 decimals but havnt been able to get it to work. Is there a way? ${states['sensor.master_bedroom_broadlink_temperature'].state}°C

[vast crane]

If that's just javascript, then maybe:
${Number(states['sensor.master_bedroom_broadlink_temperature'].state).toFixed()}°C

[wintry gull]

that worked. i would have not tried that... Thank you.

[flint geyser]

Can any provide a very simple example using the custom button card that contains one button that can display values from two different entities on it?

I've found many examples but they are all very complex and include way more then i'm looking for, i'm hoping to start simple and work my way up. The examples in the docs are also a bit overwhelming.

[vague fjord]

I have something kind of funky going on where I think Lovelace is changing the units of some of my time entities...

The history graph shows the desired output of days, but the cards are showing in hours like the display above the graph. Happening with two similar entities... any ideas?

[surreal otter]

I have an issue where the Main dashboard page is scrollable at every axis with a 'bounce' effect on mobile. How can I make it so it is fixed position like all other views?

[tribal galleon]

Click the cog icon in the top right and check the unit of measurement.

[vague fjord]

The field doesn’t exist for some reason. I’ve used that before on other entities, but it’s not there on this one.

[golden mist]

@spring pollen I converted your message into a file since it's above 15 lines :+1:

[spring pollen]

The problem is that when one card becomes active, all the cameras are displayed. Does anyone know what I did wrong? By the way, I tabbed style: | and everything below it!! Ah yes, if you can't see what's written in front of you, then you're probably beyond help. I used the same sensor for all cameras and that's why all cameras showed up. ;=(((

[tribal galleon]

Is that a template sensor that you made? You may need to define it in the configuration and/or add a unique_id (if it accepts it; I cannot remember if it does.)

[vague fjord]

No, it’s being provided by the AeroGarden custom integration. I was trying to avoid making a template sensor if possible

[glossy bluff]

Hi, I would like to to show a card with the contents of a local file. I managed to setup a commandline sensor - but this is limited to around 275 characters. I also tried using iframe - that worked, but the content is not refreshed after I change the file. Is there any other way to do it?

[mystic timber]

Hi, I just changed my boiler device to zigbee device recently, wondering if I can create something in the frontend side that I can see for how long boiler is on (tried timer but it remains on Idle) and maybe something that shows how much time left in case one of the buttons (scripts) have been triggered.

[vast crane]

I think you're confused about what timer is, it's not a stopwatch.

You set it with a duration, and then it counts down that amount of time, and then fires and event when finished.

@mystic timber

[mystic timber]

You're right, is there a stopwatch option for what I mean?

[vast crane]

Not in the sense that you're thinking of. However all you really need is to fill in an input_datetime with the time that it starts, and then if you show that entity on the frontend, it may display something like "4 minutes ago", so maybe that's what you're thinking of?

Generally we don't want anything in the state machine that's just counting time elapsed, since that creates a bunch of thrash on the database for no reason.

So you get the same effect by just noting the time that something started, or the time you want something to finish (timer)

[mystic timber]

Yeah, I want to know how long it's on basically, time left like i had with the old device not necessary needed here.

[vast crane]

There's probably lots of ways to do that, for example in entities card or tile card you can just add the last_changed as secondary information. If you're in templates you can get the last changed time from the state object. If you need an entity of the time it turned on you can snap it to an input_datetime.
Lots of options.

[mystic timber]

Thanks dude!

[tribal galleon]

I'm not for certain but if the AeroGarden integration isn't giving you that option, you might check the issues to see if someone has reported it. If not, then open one and see what happens.

[tribal galleon]

I have an example posted in here somewhere where I added a "how long has it been on" counter and embedded it into a custom button-card. It looks at the last-updated attribute and does some math. If you can't find it, lemme know and I'll track it down. (At work at the moment.)

[mystic timber]

I found some

sensor:
  - platform: history_stats
    name: Pump ON today
    entity_id: binary_sensor.pool_pump_running
    state: "on"
    type: time
    start: "{{ now().replace(hour=0, minute=0, second=0) }}"
    end: "{{ now() }}"

should do the job for the "how long state has been on", but I will still need "time left" one incase someone triggers the scripts (the custom buttons I made there)

[tribal galleon]

This is the one that I made. Doesn't rely on a separate entity. But I'm going to take a look at the one you posted too to see what it can do.
#frontend-archived message

[scenic current]

Thanks for the tip. Tried but did not help.

[mystic timber]

Thanks man

[loud finch]

Do you know why entity is missing from stastics graph?

  - platform: tuya
    name: "Humidity"
    sensor_datapoint: 6
    unit_of_measurement: "%"
    device_class: "humidity"
    accuracy_decimals: 0
    icon: "mdi:water-percent"

this is the sensor config in esphome

Do I need to explicitly set state_class: "measurement" ?

[vast crane]

Yes you need state_class

[loud finch]

And can I somehow create entity that would work with this https://www.home-assistant.io/dashboards/humidifier/ from esphome entities? It is not possible, afaik, to create climate class in esphome for dehumidifier

[dusky haven]

If there any effective difference between using frontend: extra_module_url: and resources:. Also what about using the resources editor in the GUI. Seems like that accomlishes the same thing as well.

[pallid zephyr]

FAQ I know, but none of the answers I've found are actually working in this case - even though they do work in other places. In sensor.yaml I define a sensor value thus
value_template: >
{{ states('sensor.blue_time_to_full_charge') | float(0) * 60 | round(0) }}
but it always displays with one decimal place. In place of round(0) I've tried int(0) and int, but always the same result. The sensor itself has the fraction (well, until it got down to 0), it's not just a display card issue. I've been reloading Template Entities and/or All YAML Entities with each edit.

[dark dirge]

you're rounding 60

you need to add parentheses

[pallid zephyr]

That part seems to work, i.e. 0.75 comes out at 45.0. Converting hours to minutes.

[vital burrow]

What Rob is saying: the way it is now it kind of rounds 60.0 to 60, not the product of the multiplication

[tribal galleon]

{{ (states('sensor.blue_time_to_full_charge') | float * 60) | round }}

[vital burrow]

value_template: >
  {{ (states('sensor.blue_time_to_full_charge') | float(0) * 60) | round(0) }}

[pallid zephyr]

I see.

[tribal galleon]

It is an order of operations thing. | happens first.

[dark dirge]

wasn't sure what this meant:

That part seems to work

it clearly didn't

[pallid zephyr]

I misunderstood where you thought parens should be.

Thanks.

[stuck granite]

Hey everyone, so I am using the Lovelace UI minimalist for the dashboard, or at least I want to but for some reason it shows under integrations as failed to set up. This has happened multiple times every time I restart my HA server or if there is any updates that require a restart. The first time it happened I was pretty deep into making all the views and writing up the yaml and the server restarted for an update from 2024.1.2 to 2024.1.3 and i did a clean install from HACS and then it showed up again when i updated to 2024.1.4.

[stuck granite]

from what I can find from me digging around is that there is no "config" to save the settings after installing the integration anywhere, not in custom_components or ui_lovelace_minimalist directories

[woven echo]

I thought I read about a feature release within the last few months having to do with detecting screen size for dashboards or cards. Does that sound familiar to anyone?

[vast crane]

Yes that's part of the new options for conditional card.

[woven echo]

ah, that's what I was looking for. Thanks!

[tame oriole]

Does anyone know why temp controls have 2 options? I don't understand the one on the right .

[simple grotto]

what would cause my last_triggered not to update? UI says it was triggered seconds ago but last_triggered isn't changing

script's mode is "restart"

[vast crane]

last_triggered is "triggered + passed all conditions"

[tribal galleon]

FYI: Animated radar images from Weather Underground have started working again after not updating since November 6th.
Note: It seems current.png doesn't work but animate.png does.
Shown below: https://s.w-x.co/staticmaps/wu/wu/wxtype1200_cur/usday/animate.png. I use this link in a Picture Card, but will be moving it to an automation using the Downloader service.
From: https://www.wunderground.com/radar/us (Available for US, Canada, and Australia) The website still seems a bit screwy but you can use the Image Link button in the bottom right to get your link.

[tribal galleon]

That's where the timer entity could come in handy. Like karwosts mentioned, the entities card can show the countdown in real-time. Your automation should be able to integrate that entity pretty easily.

[stoic stratus]

speaking of weather radar views, i am trying to do a pretty specific thing wrt my local radar gif, and i could use guidance towards the right direction. i have

        image: https://radar.weather.gov/ridge/standard/KBOX_loop.gif```
and i would like the displayed picture to be zoomed in on a section, then to display the full gif when clicked on.... is that viable?

[golden mist]

@clever plover I converted your message into a file since it's above 15 lines :+1:

[clever plover]

Sorry, I'm not able to edit above post. Anyway, with the hosttop and left percentage, I should be able to position the bar but this doesn't work

The picture-element has also state-label elements. No problem to manage the position with below code.

    entity: sensor.id_4_pro_range
    style:
      top: 85%
      left: 25%```

[north mauve]

anyone have any suggestions on how to make a tap action on a binary sensor load the footage of a camera instead?

[turbid violet]

https://developers.home-assistant.io/docs/core/entity/binary-sensor/ which binary class to use for a light switch?

light is light detected not detected

power is also detected and clear

Plug is plugged in or unplugged

light should be light on or off

[mild wagon]

Hey, any tips for some easy integration of light scenes? Some auto created dashboard site with default scenes or something?! ^^

[alpine willow]

Hello everyone,

I'm quite new to Home Assistant and I'm having some trouble with something.
I'm trying to connect my Bambulab 3D Printer to Home Assistant and I've managed to do it, but my images won't load. It's about an image identity that it simply doesn't display. Does anyone have any ideas what this could be and how to fix it?

this is wat i get to see:
https://gyazo.com/c8766382c2957c1208df06698f67e921

Best regards,
Thomas

[tribal galleon]

A light binary sensor is not a related to a light bulb or light switch. It is a sensor that detects light. As a binary sensor, it is only capably of detected/not detected. A light sensor entity is capable of showing how much light it detects. A light switch should be a switch entity.

A switch entity turns on or off something, for example a relay.

[mystic timber]

Sweet, thanks!

[hybrid charm]

i know i can edit individual device icons, but i couldnt figure out if its possible to edit these icons

[tribal galleon]

Go to Settings > Dashboards then click the dashboard name

[clever plover]

I have an entity card with:

  entities:
  - entity: button.id_4_pro_start_climate
    name: Climatisering aan/uit```
It shows on the right hand side a button 'PRESS'.
When I hit it, it works.
I want the same in a picture-elements card, so I made:
```type: picture-elements
elements:
  - type: service-button
    title: Start AC
    service: button.press
    service_data:
      device_id: button.id_4_pro_start_climate```
But it doesn't work. Why?

[tribal galleon]

Try changing device_id to entity_id.

Actually, it might be: ```yaml
target:
entity_id: button.id_4_pro_start_climate

[clever plover]

That works. Thanks!

[golden mist]

@unreal urchin I converted your message into a file since it's above 15 lines :+1:

[tribal galleon]

@unreal urchin What part isn't working? You need to be a bit more specific.

[unreal urchin]

sorry, the hourly card works fine, but when tapped, there is no popup of any kind

[tribal galleon]

Do you have browser_mod installed? Your tap_action works fine for me in a button card.

[unreal urchin]

i do. maybe i'm missing a step in between with registering this browser?

[tribal galleon]

Lemme try something. I noticed by using your code, the pop-up showed up on multiple screens (which are registered) but not on some that are not. (I actually use fire-dom-event instead of call-service. The syntax is a bit different.)

@unreal urchin try using yaml tap_action: action: fire-dom-event browser_mod: service: browser_mod.popup data: dismissable: true autoclose: false content: aspect_ratio: 84.5% type: iframe url: >- https://embed.windy.com/embed2.html?lat=35&lon=-82&zoom=5&level=surface&overlay=rain&menu=&message=&marker=&calendar=&pressure=&type=map&location=coordinates&detail=&detailLat=32.487&detailLon=--84.023&metricWind=default&metricTemp=default&radarRange=-1

[unreal urchin]

perfect, thanks

i saw a note on using fire-dom-event vs the service, but couldn't follow why

[tribal galleon]

I'm not sure of the differences between them. I just know fire-dom-event worked for me first so that's what I've used since.
Here's a good article on browser_mod popups: Browser Mod Custom Popups: Replacing The More-Info Dialog Window

[unreal urchin]

thank you sir. you're a legend

this makes sense

[tribal galleon]

The second to last line was what I was thinking. And, sure enough, there in the docs is that info. A note about targets

[unreal urchin]

thanks again. now i'm off to see why it isn't centering vertically 😄

[tribal galleon]

Good luck with that one... I never had any luck with it. And that's with some card_mod styling for it. 🤷‍♂️

[unreal urchin]

--vertical-align-dialog: center resolves it, but i'm over my head to know if it's a BM issue, theme interfering, or something else no it doesn't

[turbid violet]

there is no switch binary device class

need this in esphome

[latent kelp]

Can anyone help me with this? Had to reïnstall HA this weekend because of a server crash and gotta start over. Now when editing the default dashboard i dont see the menu in the top header. instead i get this popup about areas and two options to hide entities without area and hide energy. But how do i get the real dashboard editing back?

nvm...just found an option on the 3 dots to take control.

Im the owner... offcourse i want to take control 😛

[severe isle]

hello, can I make a history-graph to show always the graph 0 line

[vast crane]

You mean plot the Y axis 0? Not currently, but there's a PR in the works to add this feature.

[hollow urchin]

Hi, I am trying to create a vertical stack card, but every time I start the config and select the first card for the stack, the stack card configuration goes away and I can only save the card as if I had selected it individually. If I edit it, it just says its the card I selected, not a stack card. Known issue? Only me?

[severe isle]

ok thanks I hope it is going to be the year of the frontend

[tribal galleon]

then that's not a frontend question; that's more of a #diy-archived question.

[tribal galleon]

--vertical-align-dialog does, in fact, set the vertical alignment, but I could not figure out how to get card-mod to set it. When inspecting the pop-up, I could set that variable to center, but that only works until the page is refreshed. I've read some people have gotten it to work by adding it to their theme but that also seems to be hit or miss. Even looking at the browser mod code, I can see the variable used, but I'm guessing that it has something to do with @media adjusting for the screen size.

[unreal urchin]

There's also no way to add that workaround to the default theme (that I know of)

[tribal galleon]

Yeah. That's a good point. I use the default theme with (usually) hard-coded colors and values in my dashboard design.

[unreal urchin]

This tiny little card is turning into quite an effort

[tribal galleon]

That's usually how it starts. But, looking on the bright side, it is designed how you want it to look.

[vast crane]

I've never heard of such a thing.

[unreal urchin]

got it. i had to create a new theme with just default modified: card-mod-theme: default modified card-mod-more-info-yaml: | .: | ha-dialog { --vertical-align-dialog: center !important; }

and also add this to my config.yaml frontend: extra_module_url: - /local/community/lovelace-card-mod/card-mod.js

[turbid violet]

but these sensors show up as different in Homeassistant depending on the device class, icons remain same in esphome web.

these devices classes are based on HA device classes

[molten cipher]

Can you make an icon loop rainbow colors when 'on'

Or the background of a card?

[tame oriole]

anyone know what the font color is of HA? trying to match it, does not appear to be pure white #FFFFFF

[tribal galleon]

The horizontal lines in your screenshot return #eeeeee.

Also, some #eaeaea. Name pretty much returns Light Gray.

[tame oriole]

yeah i was fiddling between which gray to read.

couldnt find on google any official color

[tribal galleon]

Inspecting the HA page, --primary-text-color = #e1e1e1 (at least in Dark Mode)

[tame oriole]

okay. thats what i ended up seeing and noting down too. so that helps.

looks pretty good

[tribal galleon]

With keyframes changing the background color, you could use an animation (if the card you're using supports it or perhaps with card_mod.) This was done with a custom:button-card. Code includes keyframes for regular color which could be used for the icon. (Though I don't recommend running both animations at the same time; it looks kinda crazy.)

[golden mist]

@tribal galleon I converted your message into a file since it's above 15 lines :+1:

[tribal galleon]

changing color: to box-shadow: 0 0 0 2px followed by the RGB, it's possible to get the border to change colors too.
(Not posting a screenshot of this one. Too much flashing colors on the screen already. Don't want to send any one into a seizure...)

[haughty vine]

Thank You Alex for creating and supporting this great custom card.
Sorry if your bad experience is what made you quit this community.
I wish You all the best and hope You'll be happy with Your future projects. ❤️
You'll be missed.

[runic apex]

This is a pretty niche question, I want to cast MP3 to my google home display, when you cast it doesn't show the album artwork, has anyone got down this rabbit hole, I can make a MP4 with Picture instead butthis turns a 20MB audio file into 120MB MP4 which would likely take longer to buffer - doing a jukebox type things with nfc tags

[buoyant furnace]

Hi. Im using picture entity card to show my camera on the dashboard.
Whenever i switch to another view and comeback to the view with the camera it takes a few seconds to load the card with the camera.
What can be done? Dont want any delay.
Btw, its not showing live image, but a preview, snapshot taken every few seconds, clicking on the card opene up the live view, not sure if that matters

[scenic current]

Back again trying to do some custom grid stuff and having problems. I posted a message on forum but I'm not getting much in terms of responses. See here:

https://community.home-assistant.io/t/reproducing-echo-show-screens-with-custom-button-card/672465

I'm trying to take this all the way back to html/css to make sure things look the way I'm expecting before trying to get it going as a custom markdown card. Here's a paste of the css and html:

https://pastebin.com/QGmaVqje

I've pasted an image of what it looks like. All seems well. Seems straightforward. Can someone tell me how to convert that static html/css over to a markdown card? I am unable to get it to position the elements like I'm showing in this screenshot

[tribal galleon]

I almost have the pop-up being centered working without using the theme method. I can get the pop-up to appear in the center of the screen but it breaks adding stuff to the ha-dialog{}. I'm confident I'll get it figured out this evening; it's just a matter of getting $ and ha-dialog to play nicely together.

@scenic current take a look at this message. I used HTML to make a table in a Markdown card. Maybe it will point you in the right direction.
#frontend-archived message

[scenic current]

Interesting and I can probably format this one as a table as well but I think I'd like to learn how to use grid. I'm wanting to make this card and other cards pretty universal in output but on a few different devices with different screensizes so not sure if table will get what I'm after.

I'm just not understanding how I can't get this to cooperate. Can someone look to see if maybe I'm nesting this incorrectly?

https://pastebin.com/d114ekx7

[hard estuary]

Anyone know if it's possible to put mdi icons in the primary/secondary text of a mushroom template card?

[scenic current]

OMG! The problem has been solved. I had a stray ';' where it didn't need to be and that broke everything. wow.

[warm turret]

Hi, i have problem with Kiosk mode in combination witch card-mod. Card mod-stopped wirking so i had to reinstall. That helped but also enables hides the top bar and iam not able to bring it up again using kiosk mode switch. I need to uninstall both and install Kiosk mode again to get top bar to appear again. But when i install card-mod it starts all over again. Some idea?

[tribal galleon]

I imagine you can using ha-icon. I've gotten it to work with custom:button-card (which is JavaScript-based) but also in a Markdown card but that was done using HTML in a table. Here's a Jinja-based example you might be able to adapt: #frontend-archived message

[unreal urchin]

I almost have the pop-up being centered

[surreal otter]

How do I make Maps use Dark Mode system wide not just the card?

[fiery ledge]

You can set this in your theme map-filter: "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)"

And it will get applied all over

Only discovered that today myself 😉

[surreal otter]

Amazing, thank you!

[fiery ledge]

Card_mod doesnt hide the top (menu) bar on its own. You must have some mod telling it to do so

I’d leave that out and hide the menu bar with Kiosk mode which is where it shines

[hard estuary]

I tried {{ <center><ha-icon icon="mdi:clock"></ha-icon> states("binary_sensor.living_room_door_contact") }} but it didn't work 😦

[severe isle]

hello is there a way to make like a dummy (fake) button or so

[fiery ledge]

Probably

Show us what you tried that didn’t work

[severe isle]

i think i found it

just dont fill in a entity

[fiery ledge]

There you go ,-)

[warm turret]

i understand that it doesnt hide top menu but i deleted all card_mods From dashboard yaml config and even then when i install card_mod Kiosk mode stops to react on switsching entity. I have following configuration for Kiosk mode:

kiosk_mode: mobile_settings: hide_header: true ignore_entity_settings: true non_admin_settings: hide_header: true ignore_entity_settings: true entity_settings: - entity: input_boolean.kiosk_mode: 'on' hide_header: true - entity: input_boolean.kiosk_mode: 'off' hide_header: false

[fiery ledge]

Tbh, this sounds more like a cache thing . Did you refresh ?

I’ve never experienced anything you describe.

Yet if you can reproduce 100%, you could write it up in an issue on Kiosk mode repo

But first be sure to clear the cache thoroughly

[warm turret]

I did purge all history, cache etc. But now i think its realy some card_mod thing. I uninstalled Kiosk mode completely, remove settings from dasboard yaml and uninstall card_mod. everything works. Installed just card_mod, refreshed and top menu goes away, uninstall mod and its back again after refresh...

[tribal galleon]

I'm not aware of card mod being able to hide the header. Browser mod can. Unless you have something in your theme set up to do that.

[warm turret]

Ok thats it. I changed from default HA theme to mushroom and it appeard.. Thanks for a tip. Now i need to look what exactly from the theme did it.

[tribal galleon]

Look for a section similar to what is shown in this message. (This is card mod modifying pop-ups in a theme.) #frontend-archived message

[woven echo]

Anyone know how I can do a To-do card that only shows up if there are items on it and doesn't show the Add item or active 3 dots to rearrange? Just a very minimal to-do list is what I'm after.

[hybrid charm]

is it possible to use custom png icons for these "paper tabs"? i know i can asign mdi icons, but i would like to use custom pngs

I know that with entities, i can asign "entity_picture" in YAML, but that doesnt work for these "paper tabs"

[blazing wren]

No, you can create your own custom icons and load them using something like this from HACS https://github.com/Mariusthvdb/custom-icons

Not necessarily that exact one, but there are similar ones.

[bitter storm]

🤦 the custom colours for the Tuya integration won't delete for some reason.

I can move them around but they don't want to be deleted

Same for the Lifx bulbs. Custom colour can be added, but not removed.

Core
2023.12.4
Supervisor
2023.12.1
Operating System
11.3
Frontend
20231208.2

[vast crane]

I have no problem deleting custom colors, though I have heard occasionally some people report difficulty getting the - button touch target to work, or it works very sporadically.

Nothing happens when you click the - button? Supposed to launch a popup dialog.

[primal vine]

I put an input_text in an entities card and it showed a value of "unknown" - how can I change that string?

type: entities
entities:
  - entity: input_text.yt_url

nevermind, I just set it to a default value in the helpers menu, didn't know I can do that

[fiery ledge]

yes you can do that (by setting a background) with card_mod quite simply, just like changing those icons btw:```
card-mod-root-yaml: |
.: |
paper-tab[aria-label='Welkom'] {
--card-mod-icon: {{'mdi:home-alert' if alerts }};
background: url('/local/devices/hue_home.png');
color: {{'crimson' if alerts else 'green'}};
}

ofc this is an image of the wrong proportions, but I just jotted it in to show you.

[fiery ledge]

check https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#remove-the-header-fully

[hybrid charm]

thank you, just, where should i put the cardmod style? Into the dashboard configuration?

[fiery ledge]

No check the link I posted to d_sellers on the Wiki

So this is about creating a card-mod-theme, and you add that code inside a theme as explained in the docs there

[hybrid charm]

like this?

[hybrid charm]

because this doesnt work... :| (i did select the style in profile selection)

[scenic current]

  - type: markdown
    view_layout:
      grid-area: time
    content: >-
      <center><font size=75em>{{ now().strftime('%-I:%M')}}</font><br><font size=4.0em>{{ now().strftime('%a,
      %b %-d')}}</font></center>

I'm trying to make my time font really large. Can someone tell me the best way to increase the size? Seems like em value has a limit on how large it will go

[polar kelp]

type: markdown
content: |-
  # {{states('sensor.time')}}
  ## {{states('sensor.date')}}
card_mod:
  class: class1
  style:
    ha-markdown $: |
      h1,h2 {
        text-align: center;
      }
      h1 {
        font-size: 400%;
        padding-top: 8px;
        padding-bottom: 8px;
        margin-bottom: 0px;
      }

Here's what I use.

[zenith stag]

why are you not just using the button card (as you already had an almost finished design for)?
Just curious what the actual goal is here 🙂

[tribal galleon]

I use a custom:button-card with a 50px font. yaml [[[ return states["sensor.dashboard_date"].state + " / " + states["sensor.time"].state ]]]

[hybrid charm]

ok somehow got it to work:

        position: relative !IMPORTANT;
        background-image: url("/local/home.png") !IMPORTANT;
        background-size: 60px;
        background-repeat: no-repeat;
        
        color: #FF0000 !IMPORTANT;
        padding-top: 20px;
 }```

frutiger aero icons 😋

[scenic current]

Thanks for this. Is there an easy way to decrease the space between date and time? I tried changing the padding-bottom value but it did not decrease close enough.

[polar kelp]

margin can be a negative value

(padding cannot)

[scenic current]

Fair question. I'm really trying different options from different examples. Unfortunately I'm just learning how to customize things so my approach may be a bit scattered. Certainly open to suggestion.

I THINK the button card was bit different in that I had to use JS to get some of the sensor values whereas what I'm doing here is much more familiar with the templating format.

[zenith stag]

ah ok got it 🙂 Well interesting to see where you end up

[fiery ledge]

Id never think Id need to ask, but here goes.... how do we add things like button_card_templates to a ui configured dashboard.... I cant find any place in the UI where to enter these. Ive ony now noticed that, since I am testing several cards in a UI dash, while the rest is in yaml. aarggh

all I get is this

while I need to add this, like all my yaml dashboards have set: button_card_templates: !include_dir_merge_named ../button_card_templates decluttering_templates: !include_dir_named ../decluttering_templates kiosk_mode: !include ../kiosk-mode/kiosk-mode.yaml custom_more_info: !include ../custom_more_info/custom_more_info.yaml

and the only reference I find to that dashboard is in the hidden lovelace_dashboards so seems unwise to edit that ;0(

[crisp zephyr]

HI, i have some custom add-ons that are displayed in the sidebar.
Are those only visible to admins? I had to make my guest account admin to see them. Is there another way? I been looking trough People/Accounts and the add-on menu but don't see it anywhere.

[zenith stag]

you add each template in the raw-config. One by one

like this

[crisp zephyr]

@fiery ledge I always just slap in 1st card i see and then go to the cards code editor and paste it in there. Like frederik says. It's very finnicky with formatting though. Indents and stuff. So don't panic when you get errors but check the formatting for problems.

[zenith stag]

Not recommended if you care about your insanity hehe
Better to go full yaml

[crisp zephyr]

Yeh, stay away from raw config if you don't know what you are doing. And make backup 1st. (Always make backup 1st 😛 )

[tribal galleon]

I've been slowly putting together a templating guide that shows Jinja and JavaScript syntax. Still a work in progress but if you wanna check it out, click here.

[zenith stag]

this is something I def need in my life! thanks for the work effort 🙂

[tribal galleon]

I keep forgetting syntax between the two languages sometimes so this is also a reference for me too. Open to suggestions and improvements to the guide. There's a TODO at the bottom of the page.

[elder sandal]

Hello, Im trying to add volume controls to the default lovelace media control card. So far ive managed to make it look decent, the last thing is that I would like to get rid of the cover art in the mini-media-player but keep the color. Anyone got any experience with this? I tried to make the opacity 0 but that makes it just dark. Is there any easier way to add a volume slider/volume buttons?

[loud finch]

How can i create humidifier entity so I can use humidifier card?

[blazing wren]

You can use a template to create one: https://www.home-assistant.io/integrations/generic_hygrostat/

[loud finch]

seems almost too easy and almost perfect even - just with this I would not be able to have the additional features of the card, like fan speed and modes and I would need seperate card for it, right?

[fiery ledge]

no. please don't tell me I have to add those completely, and for each view....

those 4 views alone would be more in lines than my complete config 😉

and even then I cant save it, showing a red line

wait, I need the raw config editor

and can save then for all views in that Dashboard

except I have to take out all secrets and other imports...... how do people use this mode comfortably?////

[tribal galleon]

Correct. I was just typing that as you posted. I just recently started using the yaml mode. I'm configured for both yal and storage modes. YAML mode is nice being able to use VSCode, !includes, and yaml anchors but it is nice still being able to use the Editor when designing a card and then just copy over the code.

[fiery ledge]

wait, you say you can use !includes and !secrets in Storage mode? hhm not here. I deleted the !secret and could save.

[dark dirge]

I don't know about !secret, but definitely not !include

[tribal galleon]

I got my modes backwards. Corrected message.

[fiery ledge]

hehe, 'yal' mode is good 😉

and is not as bad as I feared, only having to throw those couple of thousand lines in once....

maintaining them will be, but then again, I hope not to have to edit these files too often. Only my custom_more_info filters grow as I use the plugin, so need te keep an eye out there. the others are quite steady

[clear meteor]

Does anyone know of a way I can create a toggle for a cover?
If the toggle is "on", the cover position would be set to a custom value i.e. 20
If the toggle is "off", the cover position would revert to a default but still specified value i.e. 70

[scenic current]

Thanks for sharing this and for putting it together. Did a quick look and you've got some really good information going!

[tribal galleon]

With a stock card, you would probably have to rely on a script to make that happen. Using a custom:button-card and a little bit of JavaScript would probably also work. I'm not sure about using a Mushroom Card. I know it doesn't support templating the service but I don't remember if it can handle the service data being templated.

[clear meteor]

I see, alright thanks!

[tribal galleon]

If you were to use the custom button card, you could even set a double tap action to toggle the input boolean helper. Even fancier still, you could incorporate an indicator to be able to see the status of the that helper, too. 🤔

[fiery ledge]

right, new challenge... trying to make some bigger 'chips', as in round buttons for top view, using custom:button-card. for now Ive managed to pull off this: top is the too small mushroom chip, below is the right size button-card. But as you see, the stream of the camera is not rounded

this is basically: type: custom:button-card template: round_button card_mod: style: | ha-card { background: {{'var(--alert-color)' if is_state('binary_sensor.voordeur_person_detected','on') else 'var(--state-inactive-color)'}}; } entity: camera.voordeur show_live_stream: true aspect_ratio: 1 and I want the live stream to use that same border-radius...

I did find the right Dom element, and can resize it, but it wnt accept setting a border-radius thusfar. any chance of hints you might have here?

[scenic current]

I'm trying to make the date larger but no matter the value I put for h2 it does not change size. Am I going about this incorrectly?

[tribal galleon]

@fiery ledge I wonder if there is any padding in the img-cell or container? Maybe use some negative margins to compensate?

[scenic current]

Also looking at the GH page for card_mod and I don't see anything about using h1/h2 the way you are doing it. Not sure how # = h1 and ## = h2 .. I got a lot to learn

[polar kelp]

H2 is defined diferently in the markdown card. Try font-size: 200% !important;

[fiery ledge]

if I set width:150% on hui-image, the button is at least filled completely. in Inspector that is, now I need to find the correct element in button-card or card_mod...

well blimey: styles: entity_picture: - width: 150px.....

and with a nice alert border.... type: custom:button-card template: round_button styles: entity_picture: - width: 150px card_mod: style: | ha-card { border: {{'4px var(--alert-color) solid' if is_state('binary_sensor.voordeur_person_detected','on') else 'var(--state-inactive-color)'}}; } entity: camera.voordeur show_live_stream: true aspect_ratio: 1 we're all set!

[scenic current]

Thanks again! Can you tell me where I might find more information on this? Is this CSS specs or is this specific to the card_mod usage?

[waxen iris]

Hey! For the picture entity card is there a way for me to disable the image being greyed out when the selected script entity is 'off'? Or is there a better card to do this? I'm fine with custom cards too

I just need an image with a name over it similar to how the media player selection shows up, and need it to run a script when clicked
Edit:Got it, state_filter and just set brightness to 100% and nothing else

[thick nacelle]

I've been getting "updating sensors" notifications from HA, anyone know what triggers these and if I can disable the notification?

[twilit dragon]

A simple Google search gave me this topic https://community.home-assistant.io/t/getting-an-updating-sensors-notifications-from-the-phone-app/227137

[crisp zephyr]

Any tips on using whatsapp from HomeAssistant to send myself alerts?

Or can i do it trough the HA-app?

I had telegram set up but they just f'd up and they are dead to me.

[twilit dragon]

https://www.home-assistant.io/integrations/notify/

This page explains it all

You can just let the app send you notifications to your phone

No WhatsApp, telegram or whatsoever needed

[crisp zephyr]

Good. I will give it a go. Thanks.

[twilit dragon]

No problem

[crisp zephyr]

super easy.. already had successfull test done

[twilit dragon]

Haha yeah it has come a long way but now it’s really easy. You can also use emotions and actionable notification. Many possibilities

[crisp zephyr]

What is 'actionable notification'?

yes/no?

nvm i first need to fix all the telegram ones

Yeah, telegram totally redundant. Sayonara telegrambot

[twilit dragon]

For example if you go out and you have an automation to check if your heater is on after you leave the house, you get a notification of that with a button where you can turn your heater off with.

[crisp zephyr]

Yeah, that sounds nice i have one for my boiler that asks 'it's off for over 5mins is that right?" i could add a "Turn it on" "Leaveit off" 😛

Yeah miles of script and academic docs. I think i will pass on those.

[twilit dragon]

Yeah good case indeed!

[scenic current]

How do I get card mod to center elements in the div? I've tried:

margin: auto;

and
vertical-align: middle;

but neither move the element

[hardy warren]

Any reason why these color_thresholds settings are being ignored?

[twilit dragon]

Maybe because of the decimal?

did you try like 70.0 ?

[hardy warren]

I did. Adding a .0 does nothing.

[twilit dragon]

I thinks its about the indentation

[golden mist]

@twilit dragon I converted your message into a file since it's above 15 lines :+1:

[twilit dragon]

this works fine for me

but if I indent the color_tresholds to the same alignment as the - entity: its not working.

So I think its not possible to have it configured with 2 entities and with the threshold.

[thick nacelle]

You've listed them under -entity. JunSnow (As seen above) has them listed under entities. Maybe try that out?

[hardy warren]

New problem. Now the line is just black.

[twilit dragon]

Weird, I did exactly the same

Other value's but that shouldnt matter

Maybe a theme issue? I have no clue to be honest.

[hardy warren]

Changed from Dark to Light theme. No change.

[golden mist]

@twilit dragon I converted your message into a file since it's above 15 lines :+1:

[hardy warren]

It's weird. If I delete it all and start writing out the thresholds, it works. If I mess with it too much it changes to black again until I delete back to only 1 or 2 colors.

[twilit dragon]

I've noticed that some changes are visible until I save the card

[hardy warren]

Seems to have something to do with the entity state. If I bring the value down below the current state, the color works..

[twilit dragon]

Alright, well great!

[hardy warren]

Though, instead of the color gradient, the line is just either red or black.

[lyric prairie]

The documentation tells to define the colors in hex-values

[hardy warren]

Welp... that fixed it. The documentation has examples showing color names being used in other areas but sure thing, it says to use hex in the dynamic line color section. Thanks @lyric prairie !!

[lyric prairie]

No examples with color_thresholds that use color names though

[hardy warren]

Do you know if you can use color_thresholds with multiple entities?

[copper pebble]

Hello, can I stop the needle moving like this (down and up)?

[spring pollen]

Hi! Is it possible to run the card/layout in full screen mode in the `home assistant companion app' on an android tablet?

[polar kelp]

By not forcing the card to reload. What are you doing when it happens and what is your setup?

[twilit dragon]

I think its only possible with the Kiosk_Mode intergration.

[spring pollen]

Thank you for your reply. I know that full kiosk mode allows this. But I know that one of the cards or the function of the card also allows it, because I had it turned on some time ago but I forgot which card allows it!

[copper pebble]

I'm not doing anything, just starring on the screen :). This is a custom room-card.

[polar kelp]

Does it happen if you place the gauge outside of that card?

https://github.com/marcokreeft87/room-card/issues/283
Seems like that thread could realy use a MWE.

[ruby nexus]

Hey, is anyone else experiencing major UI problems in Firefox? I'm having this problem for many months now with at least 4 HA releases, when I open a dashboard for the first time or reload the page all the elements are completely unreadable in the center of the screen (https://imgur.com/a/fvT3EAL). When I switch to another dashboard in the navbar and then go back to the previous one everything looks fine again until I reload the page.

[vast crane]

Do you have up to date firefox version? Kind of looks similar to an old bug with the has-selector, but I thought that got fixed last year in firefox.

[copper pebble]

I didn't tried yet, will do later, but thanks for the point

[tribal galleon]

Curious about how you want this to work; I wanna see if I can put it together in a custom:button-card.

• If the cover is closed and toggle is on, opening would only go to 20. Pressing again, cover would close.
  If the cover is closed and toggle is off, opening would go to 70. pressing again, closes.

[scenic current]

Hello. Your old friend back with more questions. Can someone tell me about card_mod? I'm trying to get a background image on my topmost card (custom:layout-card). I THINK I should be using card_mod to apply this image. I also think I am using the right definition (background: ) . What I'm unsure of is the ha-card part. I did an inspect and the part that contains where I'd like the background is called grid-layout . I tried changing the ha-card part to grid-layout but that did not work either. Can someone tell me how I can apply a background image to that base card which will then have the other cards on top of it? Searching and not finding solutions.

[tribal galleon]

Look a bit further down in the doc: Styling cards without an <ha-card> element

This is only necessary in very few instances, and likely to bring more problems than it solves.

I use it to "pin" cards at the bottom of the screen. ```yaml
type: custom:mod-card
card_mod:
style: |
ha-card {
border: none;
background: transparent;
position: fixed;
bottom: 0px;
}
card:
type: vertical-stack

[ruby nexus]

Oh just installed a clean version of Firefox 122.0 and it doesn't seem to be a HA related issue since it works there. Previously I tested it with the latest Version of Waterfox (G6.0.8) assuming there are no differences regarding website rendering. Whet exactly was this bug because the CSS :has() selector seems to be working from a quick test?

[scenic current]

Thanks again for the help. I thought that's what I was doing in the image I shared above. Where am I going wrong?

[vast crane]

I don't exactly understand the bug, but I think if you have older version (like maybe waterfox), if you had has-selector enabled in firefox, it would break rendering like this
It was fixed by turning off has-selector in about:config

[scenic current]

oh. I need custom:mod-card right? I need to somehow nest all of this in custom:mod-card ?

haha.. thanks for your patience.

[tribal galleon]

The last line of my code snippet above would start your Line 1.

[ruby nexus]

Oh thx it's working now 😄 Let's just hope disabling the has selector doesn't break other websites.

[tribal galleon]

It was fixed by turning off has-selector in about:config
I think I remember having to do that a while back ago but haven't seen anything related to it since.

[vast crane]

I know having it off subtly affects the issue where conditional cards collapse empty columns, so there is some tradeoff.

[scenic current]

I'm coming up with this new fram but the image is not showing. Trying to do a pastebin but site is down.

type: custom:mod-card
card_mod:
  style: |
    layout-card  {
      background: url("/local/alexaclone/tropical-green-foliage-leaf-dark-background-natural-rain-forest_512343-121.jpg");
      background-size: cover;
     }
card:
  type: custom:layout-card
  layout_type: grid

That's the first part of the file

[tribal galleon]

Try changing Line 4 from layout-card to ha-card

[scenic current]

sheez. Yep. I probably should take a break right?! That fixed it.

So I'm so close! The only other issue I have is placement of the temperature/alarm in those divs. I don't know how to center them vertically. Short of that, I need to turn off the black backgrounds and this one will be mocked up enough to finish.

[golden mist]

@clear meteor I converted your message into a file since it's above 15 lines :+1:

[clear meteor]

My msg is above if it didn't reply to you

[tribal galleon]

Before going too far with the Markdown cards, I would suggest migrating to custom:button-cards. The Markdown cards don't support tap_actions so you may eventually limit what you're able to do with the design. At least with tap_actions, you could perhaps see an extended weather forecast popup or adjust the alarm.
I did some experimenting with the headers in a Markdown card last night just for the fun of it.

[golden mist]

@tribal galleon I converted your message into a file since it's above 15 lines :+1:

[scenic current]

I have thought about the utility of having the ability to touch the screen to interact. To be honest, I'm making this as a replacement for what I currently have now and how I use it. While the Echo Show does allow for physical interaction, I seldom do it short of trying to turn off the ever increasing junk they show.

You may remember, my desire is to have this display to be interactive by voice command using Assist. As such, I will eventually be able to say things like 'Show clock' and it will set the input select to the 'clock' value and the condition for that card will be met and it will display. Same for other cards.

[unreal anvil]

Hi all, I'm relatively new here and have a question that I feel like is likely to have been answered but I can't find it.

I have an entity that provides a really nice view when I select it. But I don't know what this modal/view is called and I can't figure out how to add it to a dashboard as a card

[vast crane]

that is the "more-info" dialog.

I think there's a custom card wherein you can stick that in a card, but it's not something possible in stock HA.

[tribal galleon]

lovelace-more-info-card

[copper pebble]

So I tried it outside of the room-card and it does not happen. But I don't know how to prevent this weird "refreshing" inside the card :/

[torpid notch]

I have a sensor that I can't use in a statistics card, they are not selectable via the card configuration. The only thing I notice, is that it doesn't have an unique ID. is this a limitation?

[vast crane]

Does it have a state_class? Needs to have state_class.

I don't believe unique_id is needed

[torpid notch]

nope, only a device_class :/

But it's get's a graph in the normal sensor popup view... So there is data

[vast crane]

Statistics data is stored separately from history data

the entity must meet all the requirements for statistics to be collected

once you add all the proper things statistics will start being recorded.

[torpid notch]

Ahh there is my problem. I wanted the history graph... thanks the explantion!

[scenic current]

Getting really close now. I still need to find some better icons and translate HASS state to those icons and size correctly (1), figure out how do a center vertically in the div (2), and better position the clock (3) as it appears to be too low. Last item to add is an animated bar at the bottom as a conditional card that will pop on when assist detects the wake word and is listening.

oh and to try and mute the background image a bit.

[tawny haven]

Hey all! I'm using a lovelace dashboard as a form to enter some information. I'm using input texts and numbers to store the values to be used in automstions. However, the value of entity only updates on blur of the field in the UI. Is there a way to change that so it updates on change, even if debounced? It's just slightly annoying to enter a value, have the field still in focus and click "submit" but the field entity value wasn't actually updated yet

I'm required to focus another field after entering a value before clicking submit to ensure the entity value was actually updated to be used in the automations kicked off by submission

[vast crane]

Don't think there's any way to change that. What is the "submit" button, could that be a script that has a ~50ms delay to allow time for the inputs to settle?

[twilit dragon]

If your background blurs when a more-info card is open, that I guess its the theme your using. I have no blur when I open a popup.

Look for something like this in the theme your using dialog-backdrop-filter and remove that.

[unreal anvil]

Thank you!!

[lofty remnant]

https://github.com/royto/logbook-card?tab=readme-ov-file#custom-styling Hi, is there any way to add information about who did it in this HACS add-on? There is definitely this information in the logs, but I don't know how to find it and put it in this story

I can even pay someone to add such an option in this add-on, the source code is available to anyone. You just need to know how to modify it. And I care about this very much

[tawny haven]

The issue is that the actual entity, the input_text doesn't update until you blur the field in the lovelace UI. If the field is focused for a second or a day after entering text it makes no difference.
Definitely seems like a drawback to the lovelace UI. I'll try and do some more digging.

[vast crane]

Yeah but I thought that as soon as you click the "submit" button, the field would be blurred by the focus going to the button.

and then it's just a race between the button action and the entity update

[tawny haven]

Hm, I see what you're saying. Ya, let me try that

Well would you look at that, that seems to work. Thanks!

[hexed widget]

I have defined an Apexchart-Card. Under iOS or on a German Windows I see a 24 hour scale on the X axis and degrees Celsius on the Y axis. When I open the map on a computer with English Windows and/or an English browser, I see a 12 hour AM PM display and degrees Fahrenheit. How do I make sure that 24 hours and degrees Celsius are always displayed in the chart - no matter which setting is stored in the operating system?

[tribal galleon]

Anyone know why a Picture Card doesn't refresh a locally stored image (downloaded hourly via automation), but calling the URL shows the current (correct) image. Refreshing/navigating still shows the old image. A hard refresh will load the current image so it's definitely a caching issue but I'm not sure how to resolve it.
(Left side: calling local image but that picture is from yesterday; right side: calling the URL)

[solemn shuttle]

If you enter the sidebar item "calender", you get and overview of the your calanders, and a button called "add event" which opens a view where you can add events. Is there a way to add an "add event" button to a dashboard that opens the same view ? (without having to custom make a view like that yourself)

[fiery ledge]

not sure about the why, but I recall an issue on the subject when those template images were introduced. I did struggle at that time to have the image of a local snapshot updated correctly. I am not even sure I did the right thing in the end with ```

• type: picture-entity
  entity: image.last_snapshot_oprit_camera
  show_name: false```

[golden mist]

@potent lodge I converted your message into a file since it's above 15 lines :+1:

[potent lodge]

ah, my message was too long, i'll rewrite it then

[golden mist]

To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks.
```yaml
example: here
```
Don't forget you can edit your post rather than repeatedly posting the same thing.

[split granite]

Do use code markup

[potent lodge]

hey guys,
I'm trying to create a card with a different icon and color depending on the day of the week(to help the kids get the trash out the correct day)
I posted in automations, they told to come here for help (my mistake)

i've seen some people talking about now().weekday() but i've got no idea how to use it.. also, it seems i cant use it in a card
here's what i've got rn (of course it doesnt work..)

{% set current_day = now().weekday() %} {% if current_day=='monday' %} red {% elif current_day=='thursday' %} green {% else %} blue {% endif %}

[potent lodge]

i think i'm into something, i'm using input_text which is set using an automation
might not be the best solution, but it should work

[polar kelp]

As you can see in developer-tools/template, now().weekday() returns an integer for the number of the day of the week. 0 for Monday, 6 for Sunday.

[golden mist]

@potent lodge I converted your message into a file since it's above 15 lines :+1:

[potent lodge]

also, sorry if some bits are in japanese

[sly stratus]

Not sure if this is the right place but this button gives me an error "custom element doesnt exist: button-card

https://pastebin.com/dP0X1HLq

Pastebin didnt really format it 😕

[zenith stag]

Hey, I'm trying to do this in button card, but don't know how to add that time templating as JS. Can you help?

      content: |-
        # {{ now().strftime('%-I:%M')}}
        ## {{ now().strftime('%a, %b %-d')}}

this

[polar kelp]

(new Date()).toLocaleTimeString()
(new Date()).toLocaleDateString()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

[zenith stag]

ah thank you, will check that out

only problem is it's not updating by itself

[polar kelp]

Maybe you should make a date and time sensor to connect the card to for updates? https://www.home-assistant.io/integrations/time_date/

Then you can just use the state variable

Like #frontend-archived message

[edgy root]

Hi, everyone
Is there any tutorial\guide\documentation how to create themes for HA, what to write in theme and how it works?
E.g. I want to know how to change a style for specific cards, elements which don't have css class applied (change padding for markdown card title, increase font for size for entity names in entity card)

[zenith stag]

well.....ofc I already had that from before 😅

But it would be better to use that other way you linked, so when I share this card other people don't need to make any additional sensors

[tribal galleon]

Ensure you installed the custom:button-card (via HACS, preferably). Refresh browser. If that doesn't work, try clearing the cache.

[tribal galleon]

I wasn't using a picture entity; just supplied the URL directly into the card. It seems it is definitely a caching issue but not related to the card itself. I tried using a custom:button-card with the background set to the local file and triggers_update: all. The card loaded the current file but I noticed this morning that somehow it had loaded the image shown in the screenshot above which was at least 36 hours old. I'm not even sure how it managed to do that but it had to come from the cache.

[zenith stag]

I had a go and made it as a button card instead. The format of the date is wrong though and the alarm is not connected to anything. Just a static tex. Perhaps you've figured out something for that? Also added a bouncing bar for the Assist. This could bouce when a state changes (when the Assists picks up a word). Or do something else ofc.

[tribal galleon]

Check out my take on it a few days ago. Note the date and time formats used. (It was a PITA to figure out.) https://github.com/dsellers1/home-assistant/tree/main/echo-show-screensaver

[zenith stag]

ah you managed to add inline styles to the icons too. great, then I can skip button card for those

[stray horizon]

Can I get an icon picker straight into the Studio Code Server ?

[timid beacon]

Anyone know of a way to sticky dev tools and settings in the side bar? Would be nice to allow more icons in the side bar, but not have to scroll for dev tools and settings

[gusty socket]

I'm having so many issues with the RSS Feed integration. Feedparser + ListCard and I have the RSS feed displaying a feed from ESPN for NFL news and the pictures aren't showing. Anyone ever have this issue? I am super close just need to figure out why my images are parsing through.

[tribal galleon]

https://www.home-assistant.io/integrations/panel_custom/
I made one for Integrations and Automations. Should just be a matter of plugging in the link.

[timid beacon]

That will just add it as another item in the list though, no?

I want it to not be affected by scrolling similar to how notificadtions and user preferences are

[tribal galleon]

Yeah. That would just add it to the list above. I'm not sure about getting something into the lower section.

[timid beacon]

Well there's sort of like 3 sections. The icons top aligned, the ones bottom aligned, and then the one positioned below all those that are positioned absolute at the bottom

[lapis grotto]

What's the best way to make a change to the stylesheet so that it doesn't get deleted during the update? I want to achieve frames that will improve the readability of blocks in automations (in red for preview).

- --ha-card-border-color: none;
- --ha-card-border-width: 0px;
+ --ha-card-border-color: var(--primary-background-color);
+ --ha-card-border-width: 1px;

[pliant drum]

This is probably a really easy answer, but how do I configure visibility of the map in the "Where's X" card? It shows names and their location, but not the actual map, unless the card is clicked. Is there a way to show the whole map by default if the person isn't at home?

[scenic current]

I'm late on my reply as it looks like @tribal galleon has provided how to format the date. I'm using jinja so just regular strftime formatting to produce. I also hooked into assist for the display of the 'listening' part. I am displaying an animated gif of a bar that cycles colors. It works great except that it appears to force a resize of the all the elements when it shows up and then everything shifts back when it turns off.

Would love to see how yours is written if you'll share.

Here's what I have currently:

https://pastebin.com/5yMygbvD

Also, if interested, someone asked what my plans were for these cards in my forum post and I wrote a fairly detailed explanation:

https://community.home-assistant.io/t/reproducing-echo-show-screens-with-custom-button-card/672465/13?u=dinki

My struggle continues to be figuring out how to position all of these vertically within their divs. I'm wanting to center each in their div but try as I might I cannot figure out what is needed

[pliant drum]

Check this thread out https://stackoverflow.com/questions/79461/how-can-i-vertically-align-elements-in-a-div

The article on understanding Vertical Align is a great resource http://phrogz.net/CSS/vertical-align/index.html

[scenic current]

Thanks for this. I was trying vertical-align: middle with no success. Will dig in to these

@pliant drum Exactly what I needed. Thanks so much for sharing. This is the type I needed:

position: absolute; 
top: 10%;

[agile wagon]

can someone help me make a card? Following a reference image.

[pliant drum]

Happy to help, I am actually a complete noob when it comes to writing code, so my "shoshin" (beginners mind) prompts me to research other peoples questions!

[agile wagon]

I found this photo online. I would like to try to reproduce it on my home assistant

[pliant drum]

A general call out to this channel, I'd love some recommendations for dashboard cards that are for visual consumption only, not interactible switches etc

[agile wagon]

is a card that detects the consumption, status and instant consumption of the device

[pliant drum]

So whats your question? How to design the layout of the card? Or what integrations you need to configure, etc?

[agile wagon]

design layout

I already have animated images to put

[agile wagon]

Do you have any idea how to do this?

[pliant drum]

Did you try reaching out to the person who made the card you are looking to reproduce?Depending on your own level of comfort you could be starting with Mushroom cards and tweak them how you want, or you could also design them in Figma and import them in

[agile wagon]

I honestly don't know who the designer is

[young blaze]

I would like to add the thermostat card on my dashboard. but for my Air conditions, the swing mode is not showing. When i go to settings Entities and select the entity it shows ok, but in dashboard no. How can i add the Swing mode as well in the dashboard thermostat card?

[tawny haven]

Is anybody familiar with the lovelace-card-mod? https://github.com/thomasloven/lovelace-card-mod
I'm trying to style a specific ocmponent and I guess I'm having a bit of trouble with the shadow components.
I want to try get to that multiple-entity-row there at the bottom

[agile wagon]

Within the dashboards, can you put 'IFs'? Like if the device is On it puts one picture, otherwise another.

[fiery ledge]

sure, did you search for 'conditional'?

[fiery ledge]

check the Pinned message on the huge topic in the community with all card_mods you can think of

[tawny haven]

Hm, something isn't right. I copied an examople from that thread in attempt to at least replicate what they had and it doesn't work. The colored title in particular.

I have

- type: custom:multiple-entity-row
    style:
      hui-generic-entity-row:
        $: |
          .info.pointer {
            color: orange;
          }
    show_state: false
    name: test
    icon: mdi:fridge

but the string "test" is still the default color

[scenic current]

You guys are probably sick of me. Couple questions though. If you watch this video, first off, why doesn't my image take up all space both horizontally and vertically? Second, you can't hear me but I am saying 'Ok Nabu' and the assist detect is triggering my condition card containing the animated colored line to appear. When this happens, the screen resizes. After a while the assist detect times out and it goes back to condition not met and the screen goes back to the original size. Any clue how to keep this from happening?

https://pastebin.com/6dKtYDJx

[zenith stag]

I don't have assist, but here is the behaviour when I tap the card 👍🏼

[zenith stag]

it must be something to do with your GIF, adjusting the width and/or height of your "foot" area. Perhaps try and give that row a static value instead of 1fr?

[scenic current]

Thanks. Tried with 10px but did the same thing. I think it may be because the background image is not taking up the entire viewport. Any idea how to force the containing card to always scale to full view AND have the background stretch to match?

That's a really cool animation by the way. Is it available to borrow??

[zenith stag]

sure, here is the code. Just note that I'm using button card, but you should be able to translate the animations over to card_mod one way or another
https://pastebin.com/tFG4qUYe

[zenith stag]

no idea, sorry :/

[scenic current]

Got the background fixed by using a vdh

card:
  type: custom:layout-card
  layout_type: grid
  layout_options:
    height: 100dvh

One day I might know something about all of this if I keep working on this one card! ha

[scenic current]

Man! Wow! I didn't realize that animated 'What can I do for you' was a button card. Impressive for sure!

[zenith stag]

the sky is the limit!

[scenic current]

Now the problem is that the clock portion is moving up and down when the bar is shown but at least the whole screen is stable. I think I need to reconsider my units and positioning of the clock to get it locked in place.

[wanton lynx]

Hi friends, I'm having trouble getting a custom word to show up on a badge in my dashboard. Specifically, I have an occupancy sensor for a room and I want a badge on my dashboard to say "Occupied" if the room is occupied and "Unoccupied" if not. By default, nothing is showing up which makes the badge pretty useless.

The docs (https://www.home-assistant.io/dashboards/badges/) are a bit light on help here: they say to add, as part of each entity's block:

type string (optional)
Sets a custom badge type: custom:my-custom-badge

I tried adding type: "custom:occupied", but received the error "custom component not found". Do I need to somehow make an entire component just to display custom text? Is there some easier way I'm missing here? Thanks in advance!

[oak mason]

Good morning - pulling my hair out with trying to get a Mushroom Card working - the aim is to have the Icon change depending on states heat or off

[golden mist]

@oak mason I converted your message into a file since it's above 15 lines :+1:

[oak mason]

I have gone across all the help doc..

[latent kelp]

How can i ge this to show the profile pictures that are set at the profiles in settings-people?

[lyric prairie]

Please provide (always) a snippet of the code. From a picture it can be very hard to guess what card you are using and what your config code is

[latent kelp]

oh sorry

Here it is

[golden mist]

@latent kelp I converted your message into a file since it's above 15 lines :+1:

[latent kelp]

it was provided by hass itself after installation.

[lyric prairie]

That card needs an image that is locally stored in /config/www/ and be accessed with /local/

[latent kelp]

ah oke. On my previous installation it automatically showed this with the profile pictures that were set then. But now i gotta take extra steps then?

[lyric prairie]

Yeah, or use something like the tile card

[snow flame]

@latent kelp I managed to do it this way with the built-in editor, no reason to put the pic additionally into /config/www:

• developer tools --> list your entities, show attributes, filter for 'person', Ctrl+C the 'entity picture' attribute for a person
• edit the grid card
• choose the right person as entity again (not 'person 1'), then Ctrl+V the picture path for the person (/api/image...) Edit: no data: upfront
• done, works like a charm

[fiery ledge]

while in beta, this mght be the better forum to post the issue I am experiencing in the Frontend regarding navigation to and from (sub)views. wondering if I am alone .... https://github.com/home-assistant/frontend/issues/19628

I've always used subviews in stead of popups as theyr'e native to HA Dashboard, so rather invested in those.... no idea why this suddenly started to act up

eg my dev view has a nice grid of them

[lyric prairie]

That also works indeed, you need to specify an url from somewhere

[latent kelp]

great! This works better and has no need to upload photos again

[manic linden]

Hi, can you please advise some UI card for 3D printer? I need it for PrusaLink integration...

Something like this:

https://github.com/Misiu/ha-threedy-card-prusalink

or

https://github.com/dangreco/threedy/tree/threedy2.0

but make it work with PrusaLink. I can't get it to work...

[scenic current]

I was thinking about this last night and I'm pretty sure you're right about eventually wanting to use the tap_actions. I guess my the thing that I don't particularly like is the js portion as I'm much more comfortable with jinja. Now that I'm a bit more familiar with the css I think I can spend a little time working on the js part and see if I can get that going. Thanks for this suggestion. I certainly would not want to rewrite a bunch of cards in the future if I can just do it now.

[tribal galleon]

Consider using the Mushroom Template Cards. They rely on Jinja but you have to define everything little thing for them in regards to how they look and operate.

[scenic current]

How translatable do you think what I have now is to moving to a button card in regards to layout? I am not tied to using jinja if I can figure out how to translate what I'm doing to JS. I've been banging on a keyboard since my Commodore Vic20 so learning a new way to code something is nothing new or beyond reason. The real issue is with lack of time to devote to things like this so I tend to default with what I already know and comfortable with.

[snow flame]

Only disadvantage I figured out: If you change the person's image, the old one will remain inside the card.
You'll have to manually assign it again. Not sure if a template could help here, only working on/with HA since a few days.

[crisp zephyr]

Map question; The home location has a fixed size?

[tribal galleon]

IIRC it is. Also, I didn't recommend putting a larger "home" zone around the actual Home zone. I did and it caused issues "jumping" between zones.

[crisp zephyr]

Man, my nephew and brother both live in my home circle as it is. I want it smaller 🙂

But it's ok, i was trying to resize it and failed. Good to know it is fixed in size.

Tempted to drive a bit to get out of circle and test. Seems decadent.

[tribal galleon]

I didn't think it would be too difficult. You're not doing anything super crazy with the code. It is just the difference in syntax that kinda makes the transition between the two a hassle. Generally, when I make something new or use a new concept, I'll try to do it in the other language too. I have some examples on my GitHub but I haven't gotten around to making examples showing both languages for some of the cards (like I did on the concepts page.)

[dark dirge]

You can override it - it's covered in the docs: https://www.home-assistant.io/integrations/zone/#home-zone

But the ability to accurately determine your location and not have it bounce back and forth (as mentioned) is key. GPS is usually good enough for "home" and "away from home", but not so much "this apartment" or "next door"

[thorn granite]

A trick I use for "Home" is to use a check on if you are on your home Wifi SSID.

[scenic current]

So. Uh. Um. Wow. Yeah. Now that I think I know a little bit more about this stuff and I'm looking at the button card versus the grid layout stuff, seems that short of the jinja vs js stuff that this is way, way, way easier and smarter. I guess I was just struggling with things I lost sight of things and tried a different route. Experimenting with another card now to see if I can translate what you're showing to that. Can't thank you and others enough for the help with this.

One question in regards to js, is there a way that I can test my variable definitions easily and then move to placement? For jinja I use the Dev template tool but is there something similar for js?

[mortal ferry]

Can I change the color of the history graph to align with the state name

[scenic current]

Target and then about 10 minutes of me modifying @tribal galleon example. Sure I've got some work to do with placement and alignment but this is way easier than the way I was doing it before. Thanks again for challenging me to circle back!

I'd like to extend this to get the wind direction in compass format (NNW in Alexa example). I found a function that seems to do this. Does anyone know how to add a function to the js of the custom button card? I'm getting an error:

ButtonCardJSTemplateError: SyntaxError: Unexpected identifier 'degToCompass' in 'def degToCompass(num): val=int((num/22.5)+.5) arr=["N","NNE","NE","ENE","E","ESE", "SE", "...'

I did a search and see someone reference button code templates. How can that be used to hold a function and how do you call that function passing the sensor state? I do realize what I posted should have some return value being sent back rather than the print statement but not sure how to handle that either.

Guess I need to get busy figuring out how js is handled within HA cards as things like this, the weather icon and I'm sure a bunch of other stuff would be better to be written once in a central place and referenced from the cards that need that information rather than coding it for each card separately, right?

[lyric prairie]

def is a pythonic way to define a function

Guess you will need function in JavaScript

also print is pythonic

So use return instead in JS

[scenic current]

uh oh. I think I took my search term for granted and was looking at a js example. Now that you mention it it is definitely python! Once I convert this to js, can I include functions in the custom_fields js code blocks?

Further, should I be looking to build some of this out in 'button card templates'?

[lyric prairie]

You could always create a template sensor to let the backend preform the calculations

and call that in the JS template

[tribal galleon]

@scenic current yaml type: custom:button-card name: | [[[ let bearing = 359 const directions = ["N","NNE","NE","ENE","E","ESE","SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"] return directions[parseInt( bearing / 22.5)] ]]]

[scenic current]

You're a champion. Thanks for the continued support

[tribal galleon]

180 mph winds? You in an F5 tornado right now? 🤣

[scenic current]

haha.. I obviously putting something out of place.

[tribal galleon]

I must have put a decimal point in the wrong place or something. Shit! I always do that. I always mess up some mundane detail.

[scenic current]

haha.. No doubt. Question for you. So in your time card you have some of the styling in html tags. Can that be done in the custom_fields definitions instead? Things like font color, size, font style, etc

[tribal galleon]

custom:button-card configuration templates do not have the same meaning as HA's templates. The configuration templates allow you to duplicate the code in a button without having to repeat it. Each of the buttons in this screenshot is only 4 lines. The template, however, is 32 lines. ```yaml

• type: custom:button-card
  template: generic_custom_button
  entity: light.kitchen
  icon: mdi:ceiling-light-outline

[tribal galleon]

If you're referring to the alarm field, the HTML used there was just to return the alarm icon, but I used it also to format the rest of the string. Styling for the custom field can be done in the styles: under custom_fields starting at Line 22. (Which I just realized is not updated compared to what is on my dashboard; the time custom_field includes - color: white)

[chilly widget]

Wondering if anyone could help me figure out how to make some changes that Im struggling with in my dashboard design.

First, Im pretty new to this, so im sure im missing some obvious things here.

I want to set up an HA tablet dashboard. I have mocked up a crude design of what im trying to accomplish.

Installed card-mod, layout-card and stack in card.

In the top left section, I cant figure out how to space the ‘Good Morning’ messaging on the left side, and set the time and date to the right side.

[scenic current]

Got this a bit better. Feeling much more confident in dealing with js. Still shaky in regards of placement that will auto adjust based on screensize and the theming of the text elements. I guess I can do the inline html tags but would prefer to not use those if possible.

[scenic current]

I think I tried that without success. Do I somehow have to define the element type that those values are being applied to or does it apply to all elements returned by that custom_element ?

[tribal galleon]

@chilly widget I would format the Markdown card with some table HTML.

[scenic current]

Gotcha. Can do that easily.

[tribal galleon]

Each item defined in the custom_fields: section has a cooresponding section in styles: and then custom_fields:. In my mockup, that's also what allows the custom_fields to be positioned. I just updated Github. Time and alarm colors now defined at Lines 40 & 46.

But, just like the Markdown cards, the custom_fields don't support actions. I haven't gotten around to converting them to something else to allow them to be tappable.

[scenic current]

Thanks for the tip on the table. Think this is shaping up.

I was able to use a text-align: left in the custom_fields definitions and found my error on the colors. I was mistakenly using font-color instead of just color.

So those button card templates are not what I thought they are? I cannot include a bunch of custom fields in them and then just call/reference them in inidividual cards?

[tribal galleon]

You might be able to but I'm not sure if it will work well or as you intend. Now, with that said, you could make individual templates containing a custom field and maybe include those. (The custom:button-card can reference more than one template when needed.)

[scenic current]

It's been a long day so out for now. Definitely moving in the right direction with all of this. Thanks again friend.

[mellow dune]

how can i make the buttons to move the camera

?

it only moves with "drücken" (=press)

i can't find a service

[mellow dune]

found it. button card

[warm junco]

is there a way to scale the statisticsgraph to kW instead of W ?
(also totally new on this, just got my Home Assistant Green today)
chart_type: line
period: hour
type: statistics-graph
entities:

• sensor.solaredge_aktuell_effekt
• sensor.power_production
• sensor.power
• sensor.solar_energy_consumption
  stat_types:
• mean
  hide_legend: false
  logarithmic_scale: false

[flint kestrel]

For some reason my webinterface stopped working.

The Home Assistant observer http://homeassistant:4357/ works fine and I'm guessing the rest should be working fine. I have access to the OS on a Raspberry Pi 4 with a monitor and keyboard.

Just the main frontend refuses connection. I don't know where to start. After searching the forums I couldn't find much.

I commented out the http ssl entries in configuration.yaml on the file system but no luck

Anybody have an idea how to go through the options step by step?

[vital burrow]

Have you restarted HA after removing the SSL entries?

[flint kestrel]

Yes

[vital burrow]

And you have tried the IP instead of "homeassistant" or "homeassistant.local", I guess

[flint kestrel]

Yes

[vital burrow]

Does the command core check give any errors ?

Or ha core check

[flint kestrel]

Versions are
OS 11.4
HA 2024.1.6
Supervisor 2023.12.1

I did the core check yesterday but don't remember specific errors. I'll try again now. Just a sec

I should probably look at the http access log, but could take a while before I find that. Getting connection refused so it's not just a TLS issue.

By the way. When I reach the website through https://myha.duckdns.org:8123 I still get the frontend JS trying to connect but it fails.

[vital burrow]

My wild guess would be a config error (typo or something) preventing the Core to start

[flint kestrel]

That would be strange. Nothing really changed although I had an error that an update couldn't be installed early January. I never followed up on that but after a while it disappeared. A few days ago I rebooted the device (power off/on) and that's when it started.

Ah I get a

Post "http://supervisor/core/check": Client.Timeout exceeded while awaiting headers

on the core check

[vital burrow]

I would try a ha core rebuild

[flint kestrel]

I tried that and it says

Error: Another job is running for job group container_homeassistant

https://community.home-assistant.io/t/error-another-job-is-running-for-job-group-home-assistant-core/619612/5

Maybe I can try this

[vital burrow]

Restarting the Supervisor might help.
ha su repair
ha su restart
ha core rebuild
would be my attempt

[flint kestrel]

I tried the first two multiple times with rebooting

But I'll do that first

[shadow geode]

I am trying to have openai fix this for me but its not working. I have a custom:state-switch/custom:button card for my garage door. I am trying to add the temp sensor to display temp and humidity. I was able to get that working, but it is justifying that text to the right of the card, how do I correct it?

[golden mist]

@shadow geode I converted your message into a file since it's above 15 lines :+1:

[golden mist]

@zenith stag I converted your message into a file since it's above 15 lines :+1:

[flint kestrel]

su repair has the same Client.Timeout message as the core check

Ah I get a

Post "http://supervisor/supervisor/repair": Client.Timeout exceeded while awaiting headers

on the core check

[vital burrow]

#installation-archived might be able to fix that.

[flint kestrel]

I'll move my discussion

[shadow geode]

That doesnt show the correct state of the garage, and also the temp and humidity is still right aligned

[zenith stag]

what should the state be then? Don't you get the state from the binary_sensor.garage_door_garage_door_contact?

[tribal galleon]

Probably just needs to reverse the Red/Open and Green/Closed in the code. He probably also just wants the temp/humidity under the state; I'd use a label for that instead of a custom_field.

[zenith stag]

true that

[scenic current]

So I'm working on my positioning an dthought it'd be good to see how these elements are contained. I was surprised to see that these are much wider than expected. Can someone tell me how to reduce these? I think I'm supposed to use min-content but my attempts to do width: min-content in the custom_fields definitions did not change anything

[tribal galleon]

@shadow geode Revised fredrik's code.

[golden mist]

@tribal galleon I converted your message into a file since it's above 15 lines :+1:

[tribal galleon]

Also, don't try to use AI to design your cards. Read the docs.

[snow flame]

Heya 🙂 N00b question, but been searching all day without success. Any hints why my pictures in 'picture-elements' cards are always displayed twice as high as they are? Even F12-Tools dont give me a hint - nothing enlarges those pic areas. Here an example:

[tribal galleon]

@scenic current Do you have your full code posted somewhere? I worked on combining @zenith stag's design with my design. I incorporated the weather and alarm stuff from my design. Even in an non-fullscreen card, his layout scales better than mine. (Though the assistant part is giving me some issues.) I'll post code on GH shortly.

[dense saffron]

is there a way how to assign custom picture to button?

[tribal galleon]

@snow flame Try adding square: false to your grids which the default is true. Link to the doc

[tribal galleon]

Can you be more specific? In a button card? Replacing the 'PRESS' for a button entity in an Entities card?

[scenic current]

@tribal galleon Scaling is what I'm working on now. I still have times when the card does 'funny' stuff when I add new elements. I've also abandoned that attempt and have moved to the button card version which, to be honest, has a lot of borrowed elements from your example.

[snow flame]

ummm thanks 🙂 headbanging table ... so obvious, I did it at other places already

[scenic current]

But I'll grab it.

In related news, do you know how to change this jinja to js?

{{ state_attr('weather.home','forecast')[0]['precipitation_probability'] }}

[golden mist]

@dense saffron I converted your message into a file since it's above 15 lines :+1:

[dense saffron]

that results ins something like this
so my goal would be to replace the azure thingie with icon (for example icon they provide in radio browser)

[scenic current]

@tribal galleon

custom layout card : https://pastebin.com/L5m1qR8g
button card heavily inspired by yours : https://pastebin.com/17AvJCmG

I moved on to the weather card as a change of pace and to see what I could do more 'on my own' but will circle back to the clock one once I wrap my head around the positioning. Again, I'm really shooting to make these as universal as possible so that they look correct on any screen and scale properly according to the view size

[tribal galleon]

@scenic current My weather.home did not have a precipation probability in the forecast but OpenWeatherMap's did. yaml type: custom:button-card name: '[[[ return states["weather.openweathermap"].attributes.forecast[0].precipitation_probability + "%" ]]]' This syntax works too: ```yaml
type: custom:button-card
name: '[[[ return ${states["weather.openweathermap"].attributes.forecast[0].precipitation_probability}% ]]]'

[scenic current]

states[variables.var_weather_entity].attributes.forecast[0].precipitation_probability

Thanks. I just found it as you were providing.

cools stuff for sure

Do you know how I can shrink the size of my custom_element containers to a minimal size? Right now the temperature is way too big and I think that's affecting my positioning

or choice of values to position I mean

[shadow geode]

Thanks that worked perfectly

[shadow geode]

Will do. Still have a lot to learn

[tribal galleon]

@scenic current Revised code posted. I relied totally on @zenith stag's layout so he may better able to better answer that.
(I had to add top and left fields for the filters because they rendered in a weird spot; temporarily set their z-index to 0 to ensure buttons could be tapped though this could probably be changed soon so default is 0 but 99 when the assistant is up.
Added weather icons with color and modified the alarm field. Added variables section. Background doesn't rely on local image anymore.)

@shadow geode The custom:button-card is a good card to learn from; it can do a lot and there's a good bit already built into the card such as states:. Just be aware that when it comes to templating, it relies on JavaScript whereas pretty much the rest of Home Assistant uses Jinja. Usually you can accomplish the same thing between the two languages just the syntax is going to be different.

[scenic current]

Nice. Thanks for sharing. I guess I'll end up setting up a GH repo for these once I can finally noodle through the positioning. I was watching a YT video last night talking about this and the need for the parent to have a defined size. I thought I had that but I guess not. I'll have to go back and watch the video and see what I'm missing. For my weather card I'm having to put a left: -20% where I'd think it would just default to the left most edge. I think grid is the key to this and I'm not using it at the moment

[zenith stag]

min-content will contract that first column to be no bigger than the object (your state) within in

[scenic current]

Yeah. I am not using any grid and I'm betting that's the problem.

https://pastebin.com/Fm8DhsQ1

[tribal galleon]

Technically, it does have a defined size with card: height: 100%. (At least in my example.)

[zenith stag]

question, is it even possible to create that layout without defining the areas in the grid? At least I have no idea how to ^^

[scenic current]

haha.. Apparently I came close without them but not without problem!

I'm going to refactor it borrowing how you are laying things out with grid

[tribal galleon]

If you set the positions in the styles: custom_fields: name_of_field sections you wouldn't need the grid-template-areas but I'm not sure if it would scale properly. That was the issue I was having. Looked great on Fire10 screen, not so much on 24" touchscreen... (But, I was also hard-coding positions based on percentages and did not account for sizes, fonts, etc.)

[zenith stag]

absolute positions?

[scenic current]

Yes. That's what I was attempting and also finding would change based on changed screen size (different devices)

[tribal galleon]

Yeah. I did absolute positioning but, honestly, I don't really know what I was doing in that aspect. This is the original that I started with: GH link.

For the z-index that I mentioned above, I use this with card_mod to allow me to push a card back (It was stepping on the Editor so I toggle this to push it behind.) Might be able to incorporate this into the assistant feature. ```python
{% if is_state('input_boolean.card_mod_z_index', 'off') %}
z-index: 0;
{% else %}
z-index: -1;
{% endif %}

[zenith stag]

ah right. yes that would probably cause some head aches along the way 🙂 I try to only use absolutes on "floating" objects that don't have a part in the grid. The Assist pop-up being a perfect example

btw, I added a transition fade when the Assistant is closed for a smoother look. Was real fun making this so thanks for the inspo/idea @scenic current

[tribal galleon]

Is there a way to add an "exit animation"? It seems off when it just disappears.

[zenith stag]

yes, but you probably have to change how it's displayed first. They way you have it now, it dissapears. You can't add an aniamtion because it won't be shown. So you need to have it visible all the time

[tribal galleon]

Z-index working how I hoped. Assistant set to 99. Filter1 = - z-index: '[[[ return(states["input_boolean.tester"].state == "on") ? 98 : 0 ]]]'1 (The input_boolean.tester also triggers the assistant.)

[tribal galleon]

I'm not sure what you mean. I haven't changed anything in assistant:. Only in the style which it would still be displayed. Screenshot above had assistant's z-index at 99 to ensure it was on top of everything.

[zenith stag]

ok so how about you keep z-index so it's visible all the time, but use opacity instead to hide it?

[tribal galleon]

Could it just be as simple as adding a state: for off with "reversed" animations? EDIT: Nope... Didn't work right...

[zenith stag]

it can be, but for me it create a bunch of other problems so had to make it much simpler. Hense only the background in animated in the off state

share if you have an idea in your head on what you would like, and maybe we can try it

[stiff cipher]

What would be the easiest way to have it show the date, instead of minutes ago as the secondary info on this button?

[scenic current]

I love it. Looks fantastic! I'm enjoying working on these and learning. I am in awe with some of the stuff you and others are doing with this. I'm thinking that what I'm wanting to achieve is achievable and will be pretty cool for my needs

[scenic tusk]

I’m trying to use a custom cards… The iCloud3 js.
It is installed in /config/www/icloud3/ directory.
I’m trying to add it to a dashboard. I click to add a card, manual and then I use type: custom:path.

But whatever path I try to use it always said that it can’t be found.
Can you help me add that card ?

I run HA in a docker. The custom_component is working and configured.

[chilly widget]

@tribal galleon thank you so much for the suggestion. I tried the markdown card table, which is getting me closer to what Im looking for, but I cant figure out how to get the markup table to fit 100% width in the container. I also tried an html table, which I have showing the correct positions in the container, but I cant figure out how to get my code in the html table. Can anyone tell me if there is a way I can add the following code to an html table cell that performs the function instead of just showing the code in the cell?

{% if now().hour < 5 %} Good Night {% elif now().hour < 12 %} Good Morning {% elif now().hour < 18 %} Good Afternoon {% else %} Good Evening {% endif %}

[tribal galleon]

@scenic tusk It looks like iCloud3 is an integration that provides entities for your Apple devices. It does not seem to include its own cards. Try using a simple entity card with one of the entities the integration provides. I did find this in the docs:

Note: The Lovelace code for these screens is in Step #5 - Set up a Lovelace card tracking card
which, ironically is a broken link...
Looking at the image shown in this section, that looks like a Glances card.

@chilly widget Post your code for the Markdown card.

[chilly widget]

Yep. hit enter too quickly.

[tribal galleon]

That doesn't do any good. That's an image of the code; not the code.

[golden mist]

@chilly widget I converted your message into a file since it's above 15 lines :+1:

[scenic tusk]

Well, the icloud3 gives a .js custom card… Here’s how to install it:

https://gcobb321.github.io/icloud3/#/chapters/1.5-installing-icloud3?id=installing-the-event-log

I even see it in the Ressources, the .js file is listed there.

[tribal galleon]

@scenic tusk If you followed the steps that it says to do, try refreshing your browser and/or clear the cache. (That usually fixes most issues with newly installed cards.)

[scenic tusk]

Hm, and if I’m in the iOS app ?

[tribal galleon]

#ios_and_mac-archived (I don't have Apple stuff so I'm not sure.)

[scenic tusk]

I reinitialized the front end cache… in the companion debugging section, I can do that.

I’ll try again.

Still no luck…

I’ll try from the browser and would determine from that if it’s a cache issue…

[tribal galleon]

@chilly widget Not sure why you're using the custom:html-card. The Markdown card works fine, but the width doesn't go inside the style. I also put the time and date in one cell with a break rather than using two rows. yaml type: markdown content: | <table width="100%" style="margin: 0px"> <tr> <td><font size="5"> {% if now().hour < 5 %} Good Night {% elif now().hour < 12 %} Good Morning {% elif now().hour < 18 %} Good Afternoon {% else %} Good Evening {% endif %} </td> <td align="right">{{ now().timestamp() | timestamp_custom('%-I:%M%p') }}<br>{{ now().timestamp() | timestamp_custom('%A | %B %-d, %Y') }}</td> </tr> </table> card_mod: style: | ha-card { background: transparent; border: none; }

[chilly widget]

@tribal galleon , you are amazing. You're a like a machine. Im learning so much from you. GREATLY appreciate you!!

[tribal galleon]

@chilly widget With a little bit of card_mod, you can easily remove the background and border for a different look. (Code updated above.)

[onyx ermine]

Hi all! How can I rearrange the two widgets on my dashboard which are underneath each other despite lots of horizontal space?

Also, where can I see the (raw) published state of an MQTT device? (Edit: MQTT Explorer is nice for this)

[quick pumice]

Do you just need a horizontal stack card to contain your widgets? Apologies if I’m misunderstanding your question!

[onyx ermine]

I'm a complete newbie, @quick pumice ... just trying to figure out how to have them next to each other.

Right now it looks like so... https://i.imgur.com/dehvRDp.png

[flint kestrel]

Thanks for the help. I finally fixed it by installing HomeAssistant on a new microSD card for Raspberry Pi 4 ... I used backup new -name myBackup on the old system and restored that TAR on the new system using the website (which worked again)

Might have been a tiny corruption on the old SD card. Although scans couldn't find bad sectors

[scenic current]

https://pastebin.com/ERR91VX5

Hey guys. Trying to rework my weather card and trying to start from the base and work outwards. A question, @zenith stag clock example is using a height: 100% for the base containing card. When I do that everything collapses to nothing. The card I am creating only has a background color and not an image. Is that the problem? I'm having to do a height: 100vdh and width: 100vdw to get the card to be maxed in the viewport.

[zenith stag]

can you please post the full code, and a screnshot of the current card would be helpful

[scenic current]

Sure. Standby. It is very barebones right now. Main card definition, grid layout, one cutom field style and one custom field definition. It's showing nothing though.

[zenith stag]

also, you need to have at least one "1fr" to fill the width of the screen. Rember that min-content will make the column as small as your content

• grid-template-columns: min-content min-content

[scenic current]

https://pastebin.com/7nu74gS7

mmmm.. okay. One of my rows does have 1fr but columns all set to min-content

[zenith stag]

@scenic current you forgot to add ```custom_fields: ```` below your styles

[scenic current]

Sheez. I can't tell you how much time I spent overlooking that! Sorry to bother over a simple thing like that

[zenith stag]

happens all the time 🙂

[tribal galleon]

It's always something small. That's when another set of eyes comes in handy. 😛

[scenic current]

unfortunately. So this looks good. I can do height 100% without issue but as expected when I remove width it squeezes just to the date content at the top. I know that when I add other elements that will grow, but how will I ensure that the whole card is filled in the end?

[zenith stag]

min-content in combination with 1fr

[tribal galleon]

@zenith stag I made a change to filter1 on my version. It's little but has a nice effect.
- backdrop-filter: brightness(50%) blur(0.2em)

[zenith stag]

nice nice. I think that is one effect I could not get working on my iPhone though. Was a while back so could be worth looking into again

[scenic current]

Okay, a little more on the education front. I get that i = icon and n = name. In my case, I try to remove the icon i and everything goes blank. I think, well that's a grid with only one cell. Hey, why don't you just have a button card with just name showing (second screenshot), also blank?

To be clear, the one with 'i n' works without issue but if I remove the i or if I just make it a simple button card showing name the text disappears

[tribal galleon]

cheat: show_icon: false

[scenic current]

Right, I don't have an issue with the actual display but more so if I have to include the i for icon even if I'm not using it?

I'm seeing in fredrik's clock card that it's a simple one without the grid and it displays

[gaunt ermine]

any idea why the tile i have added to the right is not sizing correctly? when i edit that tile and select code editor, it aligns properly, but when i save and view it is scrunched and overlapping the left column. browser is up to date waterfox.

[scenic current]

https://pastebin.com/bdzLjW3d

Not sure why this doesn't display the content

Okay, so I figured it out. It's the grid-template-columns: min-content min-content .. Shouldn't the min content be enough to cover the data being shown though?

[zenith stag]

I would think so yes, but apparantly not in this case. Just make it a habit to not ONLY use min-content 😉

I don't see any case where one would want that anyway

[scenic current]

Learning a bit each session. I'm still struggling but should be good once I get one basic example put together

[zenith stag]

sometimes it's good to draw your final design on paper, and then draw the logical grid on top of it

[tribal galleon]

It almost seems like the icon field ignores the grid-template-areas when not defined unless show_icon is false.

[scenic current]

Sure. I have the Alexa screen I'm using as guide. So I've got the text and it appears to be mostly in place. How do I adjust placement though? Also, still unsure how to take up the whole screen. Lastly, note the scroll bar. I'm sure that that's due to the side and top menu influencing the viewport. Is there a way to eliminate that?

Here's the code for reference as it stands now:
https://pastebin.com/DCXvAE8q

[zenith stag]

I think 100vw will work as you wish when you also hide the sidebar, with browser_mod for example. Until then, I don't know how to solve it

[scenic current]

I just have to laugh at how enempt I am. Noticing that my table how looks like it's center aligned, I am able to move the temp value over to the center but not able to move the detail table from it's spot on the right edge, and no clue how to move things around vertically so that it's not all in the top part of the view.

I'm going to wear a hole out on my scalp from scratching my head so much!

[golden mist]

@stuck granite I converted your message into a file since it's above 15 lines :+1:

[wintry gull]

Hello. Anyone know why this happens on iOS for me?

That is the bottom of the screen. Like the color doesn’t go all the way down to the end of the screen

[zenith stag]

maybe this little guide can help you? The same goes for moving things vertically with align-self.

[zenith stag]

hey I noticed that by not defing the width at all, the card takes up the full screen width. So remove that live

[buoyant furnace]

Hi

im using picture entity cards for displaying my cameras on the dashboard
not a live feed but a snapshot that being taken every 10 seconds and when i click the image , a live feed opens.

anyway, it takes a while for it to load when i open the dashboard, around 5-6 seconds per camera, any way to avoid this ? make it display it instantly ? i mean its just a snapshot its displaying, why does it take it so long ?

[zenith stag]

They are different parts of your screen. Are you using a theme? Can you edit the yaml file?

[scenic current]

I do see that but what about the height?

[zenith stag]

have not figured that one out yet

[past pebble]

Hello guys, I am dealing with a problem for some time now: I want to use the Layout-card by Thomas Loven. I do have it configured as shown in the pictures, but its just not changing the layout depending on the width. Its still the four cards next to each other. Can someone help me with it?

[lofty remnant]

https://github.com/royto/logbook-card Hi, can anyone program? And would you like to add the person who performed the event to this add-on?

[tacit cave]

you spelled width wrong

[snow flame]

N000b here, and I think I am doing at least one thing fundamentally wrong (long-year programming experience is available, but not in HA).
Whenever a code is put in this channel, I am trying to reproduce it - copy/paste - the local results are way different than on the pictures shown, eg no square cards at all.
Latest experience - see pics.

What am I doing wrong?

[tacit cave]

No idea what the context is that you're even talking about

coding and the WTF match, but no idea what you're even showing on the left.

[golden mist]

@snow flame I converted your message into a file since it's above 15 lines :+1:

[tacit cave]

Your columns don't match the column count

well, nm, they do, miss counted

Looks like it should work, are you clearing your cache?

[snow flame]

yes, even switched off

[tacit cave]

Well, it's going to be a layout-card setting that's doing it

[snow flame]

And again: Following a lot of the examples posted here over the last couple of days. None of them was working as expected / in the screenshots posted here. I somehow feel that e.g. layout-card is just not 'firing in'.

[tacit cave]

the grid settings look good

[zenith stag]

@snow flame Where are you working? In Visual Studio Code or in the front end?

[snow flame]

front end

[tacit cave]

pretty sure your problem is

            style:
              grid-area: samson

when grid-area should be in

              view_layout:
                grid-area: samson

copied from my own config

the other 2 things still need to be in style

            style:
              background-color: transparent
              border: none

not sure what content: button3 is doing either

granted, my configuration is geriatric

[vapid field]

Background photo action game

[snow flame]

Full code here, original layout with references to button3 etc here. Working on your comments, thanks. 🙂

obviously just overlooked the view_layout when transferring the grid - it's all layer 8 fault, appreciate the help 🙂

[zenith stag]

You can skip all those empy columns and rows with dots and just use gap: .1rem instead (if you want the same gap everywherekr

[snow flame]

Will do - just experimenting, thanks the hint! 🙂
Btw this is where I am heading to - a screenshot from my previous home automation that I used for 10 years, GUI by myself.
The Layout is for the grey device bottom-left. Just a few more footsteps here in HA to get to the whole pic ... 😉

[zenith stag]

this should be very similar to yours, but simplified````
- grid-template-areas: |
"samson modell anlage"
"button1 display display"
"button2 display display"
"button3 display display"
- grid-template-rows: 1fr 1fr 1fr 1fr
- grid-template-columns: 1fr 2fr 1fr
- gap: .1rem

sory I missed the chart, here is a revised one:

  grid:
    - grid-template-areas: |
        "samson modell anlage"
        "button1 display display"
        "button1 display display"
        "button2 display display"
        "button2 chart chart"
        "button3 chart chart"
        "button3 chart chart"
    - grid-template-rows: 1fr min-content min-content min-content min-content 1fr
    - grid-template-columns: 1fr 2fr 1fr
    - gap: .1rem
```

[snow flame]

Yeah, that seems to fit, will give it a go - thanks buddy! 🙂

[scenic current]

I'm curious about the '.' in the grid-template-areas .. Is that for padding only? If so, can you not just use padding your definitions? I'm still learning

[snow flame]

For me so far it was just a 'placeholder' to build up a proper grid. But learning by doing.

[scenic current]

https://community.home-assistant.io/t/help-needed-for-positioning-and-sizing-elements-in-custom-button-card/685138

@zenith stag @tribal galleon So I posted on the forum to maybe get some more eyes. I got a little more advice and have made some changes. I'm not sure that it's better but it's different

[past pebble]

Holy moly, you are right. Thank you very much. 👍

[zenith stag]

I answered on the post

[scenic current]

Thanks for sure.

    - grid-template-rows: min-content 1fr
    - grid-template-columns: 1fr max-content

Like this?

[zenith stag]

• grid-template-columns: max-content 1fr

actually I think both will work for you

depends on where you want to place each object

[scenic current]

https://pastebin.com/4AG5znm5

This is with:

- grid-template-rows: min-content 1fr
- grid-template-columns: max-content 1fr

Not sure why it's not centering the temperature or the detailed content.

[zenith stag]

because of this

[bronze pecan]

Hello, I’m working on setting up a wall mounted touch screen monitor that will just display a stand alone Lovelace dashboard. I have a Raspberry Pi 2 laying around that I was going to use for displaying the browser on the screen. The dashboard loads really quick on my computer and the companion app, but the rpi goes from chooching along just fine to a near dead halt when I load my dashboard.
I thought maybe it was the rpi just being not strong enough, so I used a small PC (64bit, 4core, 4gb RAM, 120gb msata ssd) and at first it loads the page fine but a couple minute later it too grinds to a near halt and gets really hot.

Are there any known causes of performance issues when just loading a Lovelace dashboard?

Hmmm… I just read someone seemed to have trouble when using mushroom cards… maybe I’ll try taking the dashboard down to just a few basic non-third-party cards and see if it loads any better

Also, Rpi2 was running the latest raspian with the chromium browser
Micro pc was running Linux mint cinnamon with Firefox browser
Then I tried Bodhi Linux with chromium just to use something as lightweight as possible.

[blazing wren]

It's most likely related to the number of entities in your dashboard and the number of updates they're getting.

[bronze pecan]

Oh interesting… I do have some sensors displayed, plus a camera stream and weather radar… but it loads super fast on my computer, phone, and tablet.
Maybe they just handle the thermals better and the pi and micro pc do not.

[scenic current]

Ah of course. So this is what it looks like when I do a center on the three details. The big temperature value is still using center but it is certainly not in the center of the temperature cell.

Do you have the code you used from the forum response you made?

[zenith stag]

yes it is 😛 as I said earlier, if you want to move the temperate horizontally too you need to use something else than min.content or max-content. Maybe - grid-template-columns: 1fr 2fr?

[pliant drum]

Question here on the Mushroom climate card . Currently when you enable the controls, they're added underneath. Is there a way to use the code editor to move them to the right hand side of the icon/name/current temp? I experimented with using some horizontal stack cards, but I couldn't find a way to hide/disable the name element like you can with the controls:

[zenith stag]

you can also revert to justify-self: start for the three items on the right, but add some width to the column-gap instead

[scenic current]

Okay, used your tips. Looking much better. Screenshot does not show entire width. Elements are centered.

Any idea what's causing that gap between detail1 and detail2,3 ?

[zenith stag]

Probably because you have not set a height for the two last rows in the grid

[scenic current]

Yep. Just added a height: 100% and that got it in alignment.

It's like really close now. Just needing to get the vertical placement figured out then to find a source for those weather images

[wintry gull]

Hello. Yes I can. I have made a theme but only of a couple of lines to fix some things and I think it could be that. Is there a list of all variables for theming? Or something I could use to make a theme? I saw a tool on the forums but it seems it’s not maintained anymore. Thanks

[deft salmon]

man, I almost paid someone on fivrr to do a dashboard for me the other day. It can be pretty fustrating trying to get it looking nice or even move things where you want it to display.

[fiery ledge]

can anyone help me out retaining the marquee inside its grid element.... currently it just runs over the full card width... Before, I had a marquee html tag, but since that is officially deprecated (still works) I wanted to replace with the css animation

also, it doesnt respect the card padding at all... those odd numbers in the extra_styles were me trying to position it, should probably be set to a more generic stretch

[zenith stag]

what happens if you change to - overflow: hidden

[austere geode]

Hey everybody - Im trying to make learning to spell more fun for my bonusdaugter - So I wanna have a dashboard that looks like this: https://tress.cdn.storm.io/a2386a58-4097-4c19-804d-690a0ba9bd45?format=webp&w=1920&h=1440 Two sqares that takes up as much room as possible and two colored numbers thats gets its value from a counter helper - Im working on making a physical button I can press when she spells a word correct or not...

[zenith stag]

may I suggest to move the date to the right for a more balanced layout?

[zenith stag]

I think this is line you want to add, and match that with your dashboard background: ````
app-header-background-color: var(--background)

[fiery ledge]

nothing, i had that, and figured to see what difference it made... now implemented this scroll marquee https://isotropic.co/how-to-marquee-elements/

still overflowing the grid area I believed I had set

if I comment the animation, the position seems ok (except for the right side margin which is still not considered

[golden mist]

@austere geode I converted your message into a file since it's above 15 lines :+1:

[zenith stag]

I read through but what I can see that's the same as you allready have. And it does not solve your overlap isse.
One solution is to but a background to you "2 Alerts" and use z-index: to move the scrolling text behind it.

[fiery ledge]

haha, still not working.... btw its a bit of a hack isnt it? I should be able to keep the animated element inside its grid container.

[zenith stag]

well basically you are not animating the text, but the whole div called "name". I think.

or in your case, you are animating the whole custom_field, and not the text within it.
Maybe if you put the text in a <span> and animate that instead?

hmm I tried it now and it still overlaps. Wierd

[golden mist]

@fiery ledge I converted your message into a file since it's above 15 lines :+1:

[zenith stag]

of well, hiding with a backgrund and z-index is at least a solution until we find a "better" way 🙂

[fiery ledge]

its odd, because when I do```
marquee: >
[[[ return <marquee scrollamount='4'>${variables.marquee}</marquee>; ]]]

so back to```
name:
- justify-self: stretch

- width: 120%

- display: flex
- text-align: center

name: >
[[[ return variables.count + variables.phrase +
<marquee>${variables.marquee}</marquee>; ]]]``` for now. that simple css animation isnt that simple....

[zenith stag]

To add to that, I would want it to loop before it ends. So you constanly see the text. I tried adding another field for that but had trouble aligning them

[fiery ledge]

seems as if the grid isnt applied at all when the animation is active. If I dont animate, the position is ok

[golden mist]

@timber flint I converted your message into a file since it's above 15 lines :+1:

[zenith stag]

Update how you use card_mod. Check the documentation or do a quick search. It’s been the #1 asked question for the last couple of months :p

[timber flint]

Thanks I figured it out. ❤️

[shadow geode]

Hi guys. I have a calendar card that shows mine and my wife's calendars. Sometimes we have the same event in our calendars so it displays twice. Is there any way I can get it to not display duplicate events twice?

[zenith stag]

Hey, got it working when placed in a <p> !

custom_fields:
  marq: <p>Etiam porta sem malesuada magna mollis euismod.<p>
  box: This has NO background.
extra_styles: |
  p {
    animation: marq 10s linear infinite;
  }
  @keyframes marq {
    from {transform: translateX(100%);}
    to {transform: translateX(-100%);}

[scenic current]

So I watched a few Kevin Powell videos and I was able to see how he is using min-height: 100dvh to expand to the full size of the card. This is excellent. Only issue I'm having now is that the date is smashed up next to the other grid cells. I would have thought that the:

      - justify-self: start
      - align-self: start

For date would put it in the top left corner but apparently it does not.

[fiery ledge]

thats awesome, but I cant make it happen... tried it with ```custom_fields:
marquee: >
[[[ return <p>${variables.marquee}</p> ]]]

top the marquee, bottom the css experiment

fwiw this is my current config

[zenith stag]

I'm obsessed with his videos, super helpful. The CSS battles are super interesting

[scenic current]

Yep. Good stuff for sure. I bet if Ihe's got exactly what I need to know in one of those videos if I can just find the right one! I'm VERY close now

[austere geode]

Can anyone help with my issue above...

[golden mist]

@zenith stag I converted your message into a file since it's above 15 lines :+1:

[fiery ledge]

no, its hardly any improvement

moving the animation to the extra_styles gave me hope, but it doesn help in that config yet.

[zenith stag]

what?? haha
Why is it working for me? can you draw a picture of your goal? 😛

[scenic current]

@zenith stag @tribal galleon As you guys know, I'm planning on using the cards I'm making for an Amazon Echo type display. Some of these cards will have some of the same elements on them (time/temperature/etc). Is it possible for me to set these variables in the top level card and then use those variables in the cards within that top level card?

I guess a different way to phrase it is can I set custom_fields in the top level card but use those variables in the cards within it?

[fiery ledge]

see this #frontend-archived message

[storm briar]

hi guys, i have HA installed in docker, so the z2m and mosquitto.. everything works perfect.. i've also added z2m iframe panel into HA as frontend.. within network it works fine but of course not in the HA app.. I've tried to create external alias for it ane expose it to cloud via nginx proxy manager and it worked but its not safe as there's no authentication.. any ideas how i can achieve to get access to z2m fronted within HA from outside ?

[zenith stag]

the code I pasted last is exactly that top card

@fiery ledge

[zenith stag]

what is the "top level card"?

[fiery ledge]

now we're getting somewhere. I believe there was an indent on the p before, and the grid have internla quoting. Its much better, though seems to not run all the way through, it restarts midway

the speed can be set with the translateX precentages

[zenith stag]

did you set from 100% to -100% though?

[fiery ledge]

i tried to get the marquee closer to the alerts: but making that even 85 percent makes the Ale.....

[fiery ledge]

yes this is that

[zenith stag]

again, wierd you are not getting the same result as me.
You can move the two closer by changing the padding of the name.
```- grid-template-columns: max-content 1fr````

  - padding-right: 12px

[fiery ledge]

I can control the length of the marquee by setting a width. if I make that 150% it now scrolls ok. But it will probably be longer when weather texts are displayed, so I need it to 'auto' size correctly

[fiery ledge]

max-content and an extra space in the```
phrase: >
[[[ return entity.state == 1 ? 'Alert:&nbsp' : 'Alerts:&nbsp'; ]]]

[zenith stag]

ok I see what you mean, I got the same issue when increasing the text length

[fiery ledge]

if we can get that marquee to run completely, no matter its length it would be perfect now (ofc, if we could also control the speed. I do believe there was an option for that in the link I posted earlier, lat me go back to that

[zenith stag]

Not sure about the logics, but this did the trick for me to have is scroll properly regardless of text length:

  custom_fields:
    marquee:
      - justify-self: start
````

the speed you adjust here

animation: scroll 10s linear infinite;

[digital swallow]

What's with the stray backticks? 😄

[zenith stag]

indeed, please tell me how to properly right code here. Everyone says to use three backticks but obviosuly it should only be two? or ? haha

[digital swallow]

It's indeed three for multi-line code. See here:

• https://support.discord.com/hc/en-us/articles/210298617-Markdown-Text-101-Chat-Formatting-Bold-Italic-Underline#h_01GY0DAKGXDEHE263BCAYEGFJA
• https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code
• https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code
  If you select your code and press SHIFT + TAB you can unindent it so it doesn't start with a space/tab.

[zenith stag]

that last part I knew, but then Mr. Marius would have to indent it again 😉 Thanks for the links

[fiery ledge]

yes, that is nice, and mch better. I have it now. Still see a difference when the text is longer. The longer it gets, the further to the right it starts, Ive experimented with another option to start a 10%, to give the eyes a bit if time to read the first bit of text....

[zenith stag]

yes true. Perhaps start at 10% but also include opacity to fade text in and out? might look wierd but perhaps better than having it jump back and forth so quickly?

[fiery ledge]

I wonder if this 100% { transform: translateX(calc(-100% - var(--demo-marquee_gap))); can be used, did not yet see promising results with the gap, which, running down those variables in the link, is set to 2rem

any thoughts how to have it respect the right side padding of the button? The card has 12px padding, but the scroller runs right through that. (because of the justify-self: start I tried setting a right side padding extra in the marquee custom_field, and that didnt change that

[austere geode]

I need som seriois CSS help - For the right person it takes two minuts, for me...not so fast...I just can't make it the way I want.

I have a dashboard (simple) that works but the looks of it is that part I need help for

I have two sensor values that I want shown in two colums and with a red and green border - The "print"/value text should be green and red too, and the font size 10 rem or something - Please help...heres my code.

[golden mist]

@austere geode I converted your message into a file since it's above 15 lines :+1:

[austere geode]

The idea is : https://cdn11.bigcommerce.com/s-36fb5/images/stencil/2000x2000/products/282/1841/PXL_20220715_011157388__82383.1669183871.jpg?c=2 The font doesn't matter and I would like a board in same color as the number around each number.

[fiery ledge]

rying to adjust the speed to the length, I figured lets try and ad that to a new variable (which in itself is correct) time: > [[[ return Math.round(variables.marquee.length/10) + 's'; ]]] and add that to the animation.... p { animation: scroll variables.time linear infinite; animation-delay: 4s; } but it is not correct obviously. How could we do that>?

wait, we can set: - --scroll-time: > [[[ return variables.time; ]]] on the marquee styles and then call that in the animationanimation: scroll var(--scroll-time) linear infinite; .....

[random laurel]

I am trying to follow the instructions for adding a card on "https://www.home-assistant.io/dashboards" I can get as far as selecting "Edit Dashboard" which opens a small window. However, there is no blue '+ Add Card' icon shown at the bottom right. I can generate a new dashboard using the similar button on the "Dashboards" page. I presume that I am doing something wrong or are missing a step in setting up my system. Advice please.

[vast crane]

You're probably messing with autogenerated dashboards, which don't let you customize the cards on them.

You'd need to either create a new blank dashboard to add cards, or select "Take Control" of your auto dashboard.

[random laurel]

Thank you. I shall try that and see how I get on.

[clear dagger]

Heey all, is there a way to change colors for calendars?

[timid beacon]

I'm pretty sure I've seen that requested before and I think last I checked the answer was "no"

If you want to track progress on it it seems like this might be the best way to do so:
https://github.com/home-assistant/frontend/discussions/11262

[scenic current]

Got some additional help in the forum. It's nearing completion short of doing a bit more refinement and adding the weather images:
https://pastebin.com/euz671kv

[clear dagger]

Thanks Scott for pointing me in the right direction.

[rough silo]

I want to make a card in the dashboard that displays the cheapest time to run certain appliances. The EPEX Spot Sensor Plugin uses electricity prices from the EPEX Spot Data & how long my appliances take to run to tell me when I should run them. Thing is, it's a binary sensor that turns on at the "cheapest time", but it also has the info I am looking for in its attributes. Is there any way I can take the info that I've marked in red, format it nicely, and then display that in a card?

[scenic current]

Can the action of loading a card be used to trigger a service call or script?

Use case: I have Waze travel time sensors. These only update when I call a service to update those entities. I would like to trigger that update any time the Waze travel card I'll write is displayed. It would only update once while it displays. Hmmf.. I will want to show these as conditional cards. Can the conditional card call a service once it's view state becomes true?

[snow flame]

Thanks for your help yesterday, fredrik & petro. I am currently styling the approach with the layout-card (steep learning curve, but doable).
However - #2 (the approach using button-card) isn't working here at all. Any clue what's wrong? Pretty sure layer 8 error again, but where?
Compared: Left fredrik's grid preview, right mine - no grid at all here. https://pastebin.com/LyASVNfy

[thick nacelle]

Not exactly sure where to put this, I'm able to see "Home Assistant" as a casting device while trying to cast to my speakers. Is there any way to remove / disable this?

[golden mist]

@jade tendon I converted your message into a file since it's above 15 lines :+1:

[jade tendon]

nice it deleted the picture >.>

Question i want when a light is on in 1 of these area's that the card color's Orange
is there a way to do it, i really suck at the coding of this

state:
  - operator: template
    value: |
      [[[
       return states['input_text.sleeping'].state === 'Sleeping';
      ]]]
    icon: mdi:bed
    color: '#ffffff'
  - operator: default
    icon: mdi:bed-empty
    color: '#ffffff'

I got a thing for when a state changes

[scenic current]

Here's a dumb question: Can I edit the dashboard files in yaml format? I see them in .storage but they are in JSON or similar format. How can I edit these with VSCode?

[jade tendon]

when editing a dashboard

[dark dirge]

You would need to switch the dashboard to YAML mode

[scenic current]

No, I mean not editing from the web gui but connecting to the file stored on the server and editing it directly. It's a bit of a chore to go back and forth in webgui and it's definitely not as comfortable as VSCode

Like the 'raw configuration editor' text but be able to use an external text editor to edit it

[dark dirge]

That's YAML mode

You cannot edit the JSON directory in Storage mode

Or should not, I guess

[arctic sandal]

quick question, is it normal for HA to have some trouble getting images? often I upload an image in www/images which is /local/images, but in my card the image does not show up

does HA have to be rebooted in order to recognize new images?

or when I replace an image and go to my dashboard, the old one shows up. even after CTRL+F5 or quick reload of HA

there must be something to this i dont know 😛

[scenic current]

Right. I am trying to edit the YAML but not in the browser. Is the browser the only place that I can edit in YAML format?

[dark dirge]

Unless you move your dashboard to YAML, yes

[zenith stag]

Welcome to a whole new world in yaml mode, where you have full acess to yaml anchors and !includes 🥳 since you only have two cards it would not take long to move over

[zenith stag]

Probably because you’ve written custom-fields instead of custom_fields 🙂

[scenic current]

oh cool. So I write these in yaml in my HA dir and then just do a !include to call. That will make life a lot easier.

[snow flame]

🤦‍♂️ 😂 thanks again, much appreciated! been looking at that code for hours and didn't see this. told you - layer 8 ... 😂

[vocal dew]

Hey all, how do I change the icon size in the custom button card? I have the layout set to use the icon_name_state2nd option with the 2 grid columns set to 1fr 2fr.

But the icon is small and takes up only 60% or so of available space. But I can't seem to get the icon any bigger

[golden mist]

@vocal dew I converted your message into a file since it's above 15 lines :+1:

[vocal dew]

and it turns out looking the like red card in the picture. I'm not familiar enough with yaml to make it "look better"

[atomic glacier]

@arctic sandalthat's typically do to browser caching or loading slow. Usually a couple refreshes or hard refresh will get it loaded, kinda depends on browser...as long as your image is in the right location you are calling it from and no restarts usually needed for frontend loading
EDIT: I should read the whole post v4 answering...🫢 Check your URL(location of files), for spelling errors or any typos, that has gotten me several times 🤔

[tribal galleon]

styles:
  icon:
    - width: 125%```

[vocal dew]

Thank you!!! It was driving me crazy

[vocal dew]

That definitely made the icon look better! But how would I now make the text move to the left a bit so it better utilizes the space?

[tribal galleon]

@vocal dew You could try applying negative margins.

styles:
  name:
    - margin-left: "-20px"
  state:
    - margin-left: "-20px"

[vocal dew]

Again thank you!

[thick vessel]

Text-align: left?

Would be better imo (if it works)

[shut robin]

hey guys, i have a dashboard that was working well for ages, and as far as i know i didn't change anything except updating addons and whatnot, and as of a few weeks ago i noticed that the dashboard is very very slow to load, and when loading it on desktop or mobile, you see the elements loading in, like so: https://i.imgur.com/1iIDwXK.mp4

is there a way to find out what's causing this to fix it? i have some bubbles popups for a few things (air con, tv remote, and a couple of apex graphs for temperature that pop up for the garage and laundry), and then i have one browser mod pop up for the laundry area

i don't know when it started happening or what was changed, but it used to load in very smoothly and not have issues, but i guess i've added too much over time and now we're here

[opal jay]

i cant seem to figure out how to add popup with browser mod with the following code.. Is it even possible and so how ?

type: custom:simple-weather-card
entity: weather.buienradar
secondary_info: false
primary_info: false

[golden mirage]

checking CPU at real time

maybe CPU is High

[shut robin]

huh, CPU isn't high - it's sitting at like 3-5% - but when i refresh the dashboard it spikes, and if i keep refreshing it keeps spiking and spiking and after 3/4 refreshes it was sitting at 15% CPU

actually that may be nothing - doing it again and it was sitting at 6-8%

[golden mirage]

how many percent when you refresh

100%

or you can cleaning device

[shut robin]

no, it spikes to about 8-10%

this also happens on mobile or desktop too which seems weird

and i've restarted HA multiple times since it started

[golden mirage]

oh, maybe power supply is not good

do you use Mushroom

i use mushroom and same problem

i must changed to custom-button-card

[shut robin]

i don't think it's the power supply - it's a mini pc and this is the only thing that's doing it - everything else like automations, other dashboards etc all seem to work fine

but i do use mushroom, but i've been using it for ages

do you think it's a mushroom thing?

[golden mirage]

i think 😄

[golden mist]

@paper ledge I converted your message into a file since it's above 15 lines :+1:

[zenith stag]

bacause you wrote view-layout: instead of view_layout 🙂

[paper ledge]

oh, Thanks 😄

[arctic sandal]

yea i've done this multiple times, but nothing seems to take affect.. had an image replaced by a new one but with the same name, clearing cache, reboot, refresh etc did not replace it. i checked this morning and the new image is showing up.. so weird

[snow flame]

Heya, any ideas: A) which type of card to use for a graphical display of a none-timebased series that is B) stored in an entity? In particular I want to make a card where X is the outside temperature, Y is the corresponding heating supply temperature, and the dot represents the present supply temperature reading (see screenshot, a heating curve).

The curve is a more or less static display of set points, based on various settings in the heating system. In my present system I made a python script that calculates data points like [[20,Y1], [19,Y2], [18,Y3], ... ,[-25,Y45]] at startup or after change of curve settings.

Any ideas where to start with this?

[shadow nymph]

I have an old HA install that I can no longer access via the web. I still have all the relevant files and directories. I should be able to find the yaml files for the dashboards somewhere, right? There are a few pages/views I want to copy over to my new install

[scenic current]

Is there a way to add a blur filter to a background image of a custom button card?

[tribal galleon]

#frontend-archived message

[tribal galleon]

Looking at the doc, the card supports a tap_action. Take a look at the example I posted here: #1201552443469742091 message
You'll want to use the fire-dom-event method.

[opal jay]

For some reason that doesnt work for me

[tribal galleon]

What have you tried?

[scenic current]

Thanks.. I was trying filter and not backdrop-filter

  card:
    - min-height: 100dvh
    - border-radius: 0px
    - border: 1px solid red
    - overflow: hidden
    - color: white
    - font-family: '"Roboto", sans-serif'
    - font-weight: 300
    - padding: 0%
    - background: >-
        center / cover no-repeat 
        url("/local/alexaclone/tropical-green-foliage-leaf-dark-background-natural-rain-forest_512343-121.jpg")
    - backdrop-filter: brightness(50%) blur(20px)
    - background-size: cover

Like this right? Doesn't appear to have any effect.

[golden mist]

@opal jay I converted your message into a file since it's above 15 lines :+1:

[zenith stag]

You need to have it on a seperate layer with a z-index above the background, but below the other content. Otherwise everything could be blurry

[scenic current]

ah okay. Makes sense. In truth, I was able to blur things using the filter property but it did exactly like you said and blurred the entire card.

Do I need to set a z-index for the card itself and it be lower than the elements that already have a z-index of 2? Can I set the z-index of the main card as 1 I mean?

that didn't work 🙂

Oh. I see what you did before. You made a separate filter and positioned it. Gotcha now.