frontend-archived

[tacit cave]

you most likely need to add a triggers update entity

custom button card is smart but also dumb

[oblique wind]

Do you guys have this to? New HA installation (couple day old)
Core
2024.2.5
Supervisor
2024.02.1
Operating System
12.0
Frontend
20240207.1

[tacit cave]

are you running a custom theme?

[oblique wind]

Nope

New installation without any themes or config (now i have some addons etc)

[tacit cave]

this is what the default theme looks like

what browser are you useing?

[oblique wind]

I don't have any themes, i installed it with the Proxmox helper script tho

[tacit cave]

it has nothign to do with your installation

what browser are you using

[oblique wind]

https://tteck.github.io/Proxmox/

Chrome

[tacit cave]

I'm using chrome too

are you 100% sure you're not using a theme? You don't have outlines on your cards

[oblique wind]

Then the proxmox helper script did that

Where can i see the current theme?

[tacit cave]

it's on your user

[oblique wind]

Default theme

[tacit cave]

change it to Home Assistant

you can override the default theme with your own default

[oblique wind]

It's grayed out

Ohh

Im gonna install HACS

[warm seal]

Is it possible to give a device tracker an entity picture? I tried customization, but get an error

[tacit cave]

you can add any attribute to any entity

in customize.yaml

so if you get an error, you did the yaml wrong

[oblique wind]

I've done it those same issue

[tacit cave]

Not really sure then

it's definitely related to your browser though

are you up to date with chrome? What OS is running the chrome browser?

[oblique wind]

I got it also in FireFox and other PC's

Windows 11

[tacit cave]

I'm windows 10

could be a windows 11 thing

# works on my end

[oblique wind]

xDD

[tacit cave]

didn't mean that to be huge

[oblique wind]

It's fine tho

[oblique wind]

XD Markup

[oblique wind]

It's fixed when i add padding-top: 20px basicly in the browser

Maybe i just gonna add that to the CSS somewhere

[tacit cave]

typically that's handled by the theme

so it's odd

[warm seal]

Hmm, hard to get this wrong I thought. Do you see it immediately?

  entity_picture: /local/images/volvo.png

[tacit cave]

looks fine

should work

[dusky iris]

I created a new dashboard of type sections and though well let me just move a few of the items from the old to the new... they moved fine... now i went to the new and they are not there.... any way to recover them ?

[severe isle]

hello, is it possible to set a fixed height for a light cart? (like a button cart)

[haughty vine]

How exactly are they not there? Did You removed them?

This sounds like a bug

[haughty vine]

Simple, using card-mod

type: light
entity: light.kitchen
card_mod:
  style: | 
    ha-card.type-light { height: 500px; }
# use "ha-card.type-light" or "ha-card[class]" to have stronger then default styles selector
# to avoid using !important keyword

[severe isle]

I get the error Visual editor is not supported for this configuration: Key 'card_mod' is not expected or not supported by the visual editor. You can still edit your config in YAML.
do I need to add something ot HA?

I found it is because I use horizontal-stack

[vast crane]

The moved cards exist in the view yaml under cards: I think, but due to a bug they won't be shown because they didn't move to the correct spot.
If you copy-paste them out of yaml you can find them.

[dark dirge]

that's not an error, just a message

[dusky iris]

ok i will look at that and yes i think its some kind of bug...

should i just stop HA and move them from the cards into the sections cards and then they should work ?

[haughty vine]

You don't have it installed. It can be installed from HACS. It's an addon for other cards that gives you ability to add own css styles.
https://github.com/thomasloven/lovelace-card-mod

it doesn't support every type of card there is but most of them (including other custom ones)

[dusky iris]

btw it worked, moving the cards in the lovelace file

[tough valve]

trying to add an icon to a picture elements card, and have the color set by a template

  - type: icon
    icon: mdi:printer-3d-nozzle
    entity: sensor.cecil_ams_1_tray_3
    style:
      top: 18%
      color: '{{ states.sensor.cecil_ams_1_tray_3.attributes.color }}'

i tested the template in the dev tools and it outputs #FFF144FF, so wrapping it with single quotes i thought would be enough, but it doesn't work

i've tried every combo of single and double quotes

[storm citrus]

can you have sensor.cecil_ams_1_tray_3.attributes.color without any qoutes?

• type: icon
  icon: mdi:printer-3d-nozzle
  entity: sensor.cecil_ams_1_tray_3
  style:
  top: 18%
  color: sensor.cecil_ams_1_tray_3.attributes.color

[tough valve]

that doesn't do it either

i also can't do the raw color code without quotes

which is why i was fixated on that as the solution

the # sign in the color code comments it out of the yaml i think

[vast crane]

You can't put templates here.

[tough valve]

😢

[vast crane]

None of the core cards (aside from markdown) support any templating.

[tough valve]

RIP

saw this on printables, wanted to give it a go, didn't realize it was on a custom card 😦

i guess i'll go without material colors in the meantime

[fallow cradle]

I'm actually working with this one for the first time, seems to be working for ha cards, not so much for my custom mushroom title cards?

Am I just running into a compatibility issue with the particular card?

[haughty vine]

Mushroom Title Card should be supported.
(since it includes <ha-card> child element inside). It works for me.

[fallow cradle]

I must be doing something wrong then, I was using the color example on the github.

Directly pasted it at the bottom of the card's script

[haughty vine]

which example?

[fallow cradle]

I'll just share my attempts directly here

card_mod:
    style: |
        ha-card {
             --primary-text-color: blue;
             -secondary-text-color: orange;
}

Another example from the official github

card_mod:
    style: |
      ha-card {
        color: red;
}

Intention is poor because I'm on mobile 🤭

Using a custom:mushroom-tilte-card

[haughty vine]

try.

card_mod:
  style: |
    ha-card {
      --title-color: blue;
      --subtitle-color: orange;
    }

[fallow cradle]

That worked

Guess the example I found was dated

Thank you!

[haughty vine]

Mushroom has it's own css variables, that one works for most HA cards

[fallow cradle]

Gotcha

What about when I'm trying to append this to specific card in a vertical or horizontal stack?

Where should I apply the css

[haughty vine]

in the specific card. Card Mod doesn't work on horizontal/vertical stack or gird card anyway.

[golden mist]

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

[fallow cradle]

Wow ahaha

I Hate that bot

That's my current script

[fallow cradle]

It's not possible at all?

[haughty vine]

You can include it on the cards that are in inside the grid/stacks Just not the grid/stack itself.
And usually You don't want to change the appearance of the grid/stack itself but it's children.

But yes it's possible (workaround) if you really need exactly that.

[fallow cradle]

Gotcha, was able to make it work.

Second question, what variable would you typically choose to make the background of a card transparent?

[haughty vine]

--ha-card-background (--card-background-color should work as well)

[fallow cradle]

Perfecto 🤭

Last one, what variable should I use for changing the color of a state icon?

Also is there a list of variables that lovelace uses?

[haughty vine]

Basic tutorial: https://www.youtube.com/watch?v=UeHPHuflQc4
List of variables can be checked in source code: https://github.com/home-assistant/frontend/blob/master/src/resources/ha-style.ts
docs: https://www.home-assistant.io/integrations/frontend/#supported-theme-variables

Just overwrite 'color:' attribute on <ha-state-icon>

[fallow cradle]

Thank you

I appreciate it

[molten parrot]

Hey guys, I have a tile card that uses the icons style, rather than dropdowns. I'm trying to make it so my icons are different to each other, but for some reason they're all dots. Anyone got a solution?

    entity: climate.daikinap27018
    vertical: false
    show_entity_picture: false
    hide_state: true
    card_mod:
      style: |
        ha-card .content {
          display: none !important;
        }
        ha-card {
          padding-top: 10px !important;
        }```

[alpine frost]

Where is the option to paste? I used the three dots and clicked cut but don't see any way to restore my card.

[molten parrot]

when you go to select a new card, the top card should be Paste from Clipboard or something

I'm trying to setup a mushroom template cared to change the secondary information based on entity state, but the states aren't "on" and "off, they're "standby" and "idle". For some reason this isn't working

  hello
{% endif %}```

[dark dirge]

It's is_state()

[molten parrot]

Ah, that doesn't work either

[unkempt quiver]

Hey, I'm currently dealing with a similar issue with a timer if statemented.

[molten parrot]

I'll let you know if i find a solution

[unkempt quiver]

Thank you. I've been trying to get it to work for two days now and don't know what else to do.

[alpine frost]

hmm didn't work, guess I have to try remember what yaml I had

[molten parrot]

turns out this code works, I just missed a trailing )

  hello
{% endif %}```

@unkempt quiver use this ^

[unkempt quiver]

Oh okay, thanks. I'll give it a try 🙂

[spring pollen]

I've been trying to adjust the size of the card for a while now, which is a mix of floor plan card, calendar card, weather card and mushroom-person-card. The main problem for me is the calendar card, weather card and mushroom-person-card, because I don't know how to adjust them to adapt to the display on the mobile phone. Now I tried with the grid grid layout card and settings:

- title:
   type: custom:grid-layout
   path: grid
   layout:
     grid-template-columns: 30vw auto
     grid-template-rows: 15vh 15vh 15vh 15vh 15vh 15vh
     grid-template-areas: |
       "calendar person"
       "calendar fp"
       "calendar fp"
       "weather fp"
       "weather fp"
       "weather fp"

How to determine the individual card to adapt to the screen size as written above?

[golden mist]

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

[distant briar]

when I try to limit who can see a specific view/tab the button automatically switches back on

any reason why?

[haughty vine]

I see that too. It's likely a bug and should be reported to devs.
(there is JS error in console when You switch toggle)
edit: it was already reported (bug: #20010)

[flint depot]

Is there any way to ignore the standard masonry layout HA provides?

Sometimes it puts a few large cards underneath eachother and the next column is just 1 small card.
I know I can change the order but can i decide which cards should go into which column?

I'd like to 'drag and drop' the cards to be where i want them to be.
Any advice?

[haughty vine]

I don't think so.
I recommend trying custom layouts https://github.com/thomasloven/lovelace-layout-card that come with more customization options

[vital burrow]

You can work around it with combining vertical, horizontal stacks and the grid card to some extend

[flint depot]

Thanks... I'll try making more stacks.

Would be so nice to just "force" cards to move over a column to the left or right.

[flint depot]

another front end question.
I'm trying to download a few cards from HACS to help me with the above problem of creating an acceptable layout of cards.
For example I've downloaded the 'stack-in-card'

How do i add this card to my dashboard?

It doesnt show up when I add a card in the GUI.

And if I press manual and just copy+paste the Yaml code example (with the sun) it cant find the custom:stack-in-card

! No card type found

Or lets try a different way.
I've got 1 horizontal stack with 2 cards (both a person entity)
I would like to combine this in a vertical stack with 2 single cards underneath.

So it will look like:
2
1
1

How do i get this to work?

[golden mist]

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

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

[tribal galleon]

@flint depot The stack-in-card has to be added via YAML; it doesn't have an option through the GUI. I would mention, though, if you added the one in HACS, that one has not been updated in a long time and doesn't work well (without adding extra card_mod to help it.) I recommend this fork instead: https://github.com/ov1d1u/stack-in-card
Remove the HACS one you installed and then add the above link as a custom repository.

[unreal tinsel]

Hi, I somehow can't get conditional to work. It should display the card only when the group is on, but it displays it constantly…

[vast crane]

Did you exit edit mode?

[unreal tinsel]

nope, do i have to? ;p

[vast crane]

All conditions are always shown in edit mode.

(otherwise you wouldn't be able to find your cards)

[unreal tinsel]

well, i wound't when they'd evaluate to false -> which should be expected ;p

[flint depot]

When I try to add it as custom repository it says: Repository 'ov1d1u/stack-in-card' exists in the store.

[unreal tinsel]

i just did, it is still visible

It disappears when I remove the card's title :/

[tribal galleon]

For a sensor that is open for too long, I use a state-switch card. ```yaml
type: custom:state-switch
entity: template
template: |
{% if is_state('binary_sensor.living_room_door_on_off', 'on') and (as_timestamp(now()) - as_timestamp(states.binary_sensor.living_room_door_on_off.last_updated)) | int > 30 %}
open_too_long
{% endif %}
states:
open_too_long:
type: custom:mushroom-chips-card
chips:
- type: template [followed by the rest of the card settings]

[tribal galleon]

When you try searching the HACS store for stack, what do you see?

[unreal tinsel]

So… if the "inner" card has a title, then the conditional card does not* work? o.O

*the inner cards stays constantly visible then [?]

[flint depot]

I find 2

One thats last updates last year and one thats updated 2 months ago

I've downloaded the most recent one.

It tells me thats its going to located in: '/config/www/community/stack-in-card'

I'd like to know the next step towards actually using the card.

I actually find 3, a vertical one too but this one I ignored.

[unreal tinsel]

That would require me to modify every frontend card when I add/remove a sensor -> lacking proper model/view separation.

What I did, is that I created a group with a list of all outer windows/doors + another group managed by automation ("open for too long").
When I add a new window to the first group, it is handled in the second group automatically.

BTW, I'm a bit disappointed that making dynamic groups is kinda hard – but that's for another topic… not #frontend-archived 😉

The groups work perfectly, now I have an issue with conditional frontend card.

[vast crane]

I'm not sure why that wouldn't work. sounds strange.

I would maybe try with a stock card to see if it behaves better, maybe the custom card is somehow doing something that's breaking the conditional, though I'm not really sure how.

looks fine to me 🤷

[unreal tinsel]

i've tried with a simple entity as the inner card: when i remove title it works properly…

EDIT: nah, it's still always visible

[tribal galleon]

I see the one by RomRider (76k downloads)which says it was updated 2 months ago, but checking the repository doesn't show any new commits in over 4 years so I don't know where that date is coming from. I see the vertical one from ofekashery which says updated last week but again, no new commits there either.
Both of those are ones that I don't suggest using as they have not been updated to support newer Lovelace stuff.
The one I recommend was updated last years, 356 downloads, 4 stars by ov1d1u.

[unreal tinsel]

It is always visible, even when I remove both title and name and Save to return to the Dashboard.

So… something wrong with handling the group state? o.O IDK…

Condition did not pass
And yet… the card is still visible o.O

[tribal galleon]

Are you still in Edit mode? I think conditionals will always appears regardless of condtion while editing.

[flint depot]

Found it and downloaded it.
Whats the next step to actually using it?
It doesnt show up in the GUI when adding a card

I feel like im missing 1 step.

[unreal tinsel]

nope, I did save it and in the Dashboard it is also visible

[tribal galleon]

Scroll all the way to the bottom and add Manual card. the type will be custom:stack-in-card. An example of usage on my GH (note that most of the card mod stuff is not needed with this repo; mentioned in the Tip.) Stack in Card

[flint depot]

No card type found
custom:stack-in-card

[tribal galleon]

Refresh your browser. Clear browser cache if it still doesn't work.

[flint depot]

Done both, logged back into HA.
Same problem:

There is no cards parameter defined
type: custom:stack-in-card

[unreal tinsel]

I was suspecting something wrong is with groups -> so I've changed the group. into a input_boolean. -> the conditional is still not working o.O

Now i'm starting to suspect the outer grid card o.O

[tribal galleon]

@unreal tinsel You're still in Edit mode in that last screenshot. I just tried on my side and it works fine. Off state = visible in edit; hidden when done.
Click Done in the top right and see if it is still there.

[flint depot]

There is even a bit of example code writen in the repository. This also doesnt work.

I'm reading that i still need to manually add the card to /local/ or something, however no clear instruction on how to di this

[unreal tinsel]

WOW, you're right! ❤️

I thought u were meaning the card edit mode, not the whole dashboard edit mode!

[flint depot]

• type: custom:stack-in-card
  title: My Stack In Card
  mode: vertical
  cards:
  • type: horizontal-stack
    cards:
    • type: button
      entity: sun.sun
    • type: button
      entity: sun.sun
  • type: vertical-stack
    cards:
    • type: entities
      entities:
      • sun.sun

[tribal galleon]

@flint depot That documentation is from many years ago. Nowadays, you shouldn't have to add the custom resources as HACS does everything that it needs to do. I've never had to do it and have a bunch of custom stuff added. Right now, I'm assuming you're dealing with a caching issue provided the card installed properly via HACS.
(I'm not the best at troubleshooting things if it doesn't. Usually refreshing and clearing cache works 95%. You could try removing and reinstall the stack-in-card, refresh/clear again, try another browser, try another device.)

[flint depot]

Allright, Let me try switching to chrome (i was in Brave)

[tribal galleon]

@unreal tinsel Yeah. I figured that may have been the case when you mentioned that you Saved but it was still visible. While in Edit mode, conditional cards will be shown (evaluated as true).

[unreal tinsel]

I had to turn off the Edit mode for the whole Dashboard too see the "real" state.
It's working perfectly, thanks! 🙂

[flint depot]

Same problem in Chrome, even tried using my anmdroid phone 🙂

im giving up for today.

[unreal tinsel]

after you installed the HACK component, you can also try to restart the whole HAOS

[tribal galleon]

That could be true if this is his first time using it. Did not take that into consideration.

[flint depot]

I'll try this now

[tribal galleon]

I'm a bit disappointed that making dynamic groups is kinda hard – but that's for another topic… not ⁠frontend
@unreal tinsel It's not that it is hard. I'd say it is just a matter of getting the syntax right. I was working on a Dynamic Light Group that would return lights that were on (as opposed to a simple all_lights kind of group). I started making progress on it and meant to write up some info but never got around to it. The template that I came up with is about 100 lines long (with assistance, of course). I imagine you can get a template to do everything that your automation is currently doing. #templates-archived would be the place for that. petro and TheFes are masters at that craft.

[flint depot]

Same problem,
It wasnt my first time using HACS but i still gave it a shot restarting the whole OS

[tribal galleon]

@flint depot Try going to Settings > Dashboards > three dots in top right > Resources. Search for stack and see what that returns.

[unreal tinsel]

you're on point with the channels and people -> they both were really helpful to achieve my goal 🙂

it still needs some polishing:

• I want the timedelta of 2 minutes to be configurable in the UI (using input datetime is a "hack", not an elegant solution)
• a bit of duplication

the biggest issue I had back then was:

• expand (not understanding the concept, no documentation at all)
• the differences between "old" and "new" style of groups (like the services NOT working on "new" styles of groups -> I blame documentation again ;p)

but once it clicked, i'm kinda proud of the result, haha:
https://gist.github.com/MacDada/bfd2cbc905cac71b762e997dd8ec5316

When I said it is "hard", I'd assume it would be as easy as using something like "auto-entities" card in the UI, but for groups.

[tribal galleon]

I want the timedelta of 2 minutes to be configurable in the UI (using input datetime is a "hack", not an elegant solution)
You could always use the value of a input_number entity. I use {{ states.input_number.automation_auto_bathroom_lights_duration.state | int(0)*60 }} for setting a duration which I can change via the frontend.

[unreal tinsel]

yep, that's what i'm probably gonna do

BUT, then I have to decide whether it should be minutes or seconds – and i don't like the fact that I need to decide that in the "model" (the input helper).

• I wish the helper value was "universal" (some kind of "Duration" object, representing any kind of unit: seconds, minutes, hours, days, weeks…) – MODEL
• the UI card could allow me to select the unit (let's say: minutes) – VIEW
• within the automation I should be allowed to "extract" the value in a selected unit as well (let's say: seconds) – SERVICE

|| i will try to make my own integration one day 😄 ||

[tribal galleon]

I'm sure you could add a unit_of_measurement attribute and then adjust your template/code to handle that.

[polar radish]

My to-do lists have disappeared 😦 i was trying to delete an item in one of my lists and HA complained that the call failed because no time zone information was available (I checked and the time zone is set). I tried a restart of HA with no luck and then did a reboot on the HA computer. At this point HA completely lost it's marbels and removed two of my three to-do lists. All. other functions seem to be functioning normal as far as I can see. IOne of the lists was for all my appointments and I am somewhat concerned about recovering my life 😦

[vast crane]

Does the todo entity still exist?

[polar radish]

Yes, there are two to-do lists left out of four. One is not used. I did a full backup before rebooting HA and did a restore but the stuff that was missing after the reboot was still missing. I did a restore to a month old backup and the lists were complete at that point. I restored back to the current version and the two lists were missing again.

[polar radish]

I should mention that the to-do list names are there but the content is not ..... well they are on the page where I display my lists but when I go to the main page main menu item on the left side that says 'to-do lists' and click on that, I only see two of the 4 lists that should be there.

Where would HA keep the shopping list configuration and where would the data be located?

After some more digging, it appears there was a problem in the latest HA core update (2024-3.0) that is causing some to-do list problems although there is no mention of list data getting erased

[spark spear]

hello there:
I need hhelp understanding why this code of mine does not work:

i copied it from an old config and now it does not work

it says missing commas but i dont seem to undersand why

[wicked sapphire]

anyone willing to help out a noob with figuring out how to add NFL standings using the https://github.com/vasqued2/ha-teamtracker/wiki/Standings-Card to thier dashboard?
Following this I was able to get EPL but im not sure how API works because I cant get the NFL to work

[tribal galleon]

@spark spear It's because that is JSON and not YAML

[spark spear]

Mmm that was copied out of w backup.

Is there a way to fix it ?

So it is yaml ?

Do I need to take out all of the commas ?

[tribal galleon]

My understanding is the underlying code of HA relies on JSON, but users entering data have to format it in YAML. When you save your YAML, HA turns it into JSON that it can understand. (Something like that.)
You could run the code through a JSON-to-YAML converter. https://www.json2yaml.com/
Or manually edit the code, removing the extraneous commas, brackets, and braces and get it back to proper YAML structure.

So your first couple of lines would look like: ```yaml
type: horizontal-stack
cards:

• type: custom:stack-in-card
  mode: horizontal
  cards:

[spark spear]

Ok thanks I'll give that a try

[tribal galleon]

@spark spear It looks like you're missing a couple of lines at the beginning and perhaps the end of your pasted code. I don't know enough about JSON to figure it out but I think there are supposed to be a couple more braces and brackets to contain everything.

[spark spear]

I tried to convert it but get this

[tribal galleon]

Yeah. That's what I was saying. The JSON is not formatted properly. You're missing some stuff at the beginning and perhaps then end.

[wicked sapphire]

Help with TeamTracker sport API standings

[arctic rose]

hello all. coming across a weird issue. i have a second dashboard created, and i created multiple views for it. each one is for a different room. I have two users besides myself (my wife and my daughter) and i want to restrict which views in the dahsboard they have access to, but i'm not able to. When i go to the visibility tab of each view, it lists them with toggles, but when i turn the toggle off for them, the "save" option is still greyed out and cannot be pressed

they are both standard users and i am an admin if that means anything

[vast crane]

Should be fixed in 2024.3.1

Known bug

[arctic rose]

ah ok, gotcha, thanks

found a work around for it for now. if i switch to YAML view, then edit/undo part of the YAML, the save option lights up, i can then go back to visual editor and toggle the appropriate people and save

[fiery ledge]

Uhm… statistics page in IOS app??

What happened there…

[polar radish]

Where does HA keep to-do list and/or local-to-do list data?

[chilly sapphire]

Hi, I have a water valve with a slider, but the slider is very hard to set. How can I change the slider to a manual input? So I can tap on the number, then type in what I want to set it to. Thanks!

[violet talon]

on the mushroom readme, what is being displayed on the left? some layout card? or is that a mushroom thing where you can pick vertical cards and columns? https://github.com/piitaya/lovelace-mushroom?tab=readme-ov-file

is it a vertical stack with a horizontal stack inside of it? 🤔

[chilly sapphire]

is this to me? I'm just using the default HA entities card

[tribal galleon]

Go to the entity's settings and you can change to an input field. You can also change the step size and min & max which might also be helpful.

[chilly sapphire]

Thanks! will check now

I went to Entities but dont see those fields, maybe im in the wrong place

[vast crane]

That's only for input_number, not for number

[chilly sapphire]

can i change it from number to input_number?

[vast crane]

No

[tribal galleon]

but you can create an input_helper helper to use instead.

[chilly sapphire]

ok thanks, I will do some research 👍

[tribal galleon]

@chilly sapphire are you using a slider-entity-row in the screenshot you showed?

[chilly sapphire]

dont think so, here is the code

entities:
  - switch.0xa4c1380c097abc6c
  - number.0xa4c1380c097abc6c_countdown
  - sensor.0xa4c1380c097abc6c_battery_state
  - sensor.0xa4c1380c097abc6c_error_status

its just the default HA card

[tribal galleon]

I didn't realize the entities card showed a slider without something custom.
If you still want to give the slider a try, check out the slider-entity-row. That would allow you to set min, max, and step. I'm assuming the entity is from a device and an input_number helper may not be the best option.

[chilly sapphire]

yeah the entity is a water timer which I put on my outside tap for watering

the countdown is from the device and turns it off automatically after the period

I wanted a manual input rather than a slider but will check out slider-entity-row

[tribal galleon]

I believe that is showing a Grid card. And then Mushroom cards set up inside of it.

@chilly sapphire Using an input_number helper would still be do-able. The simplest approach would be to set up an automation so when you change the input_number, it updates the number entity.

[chilly sapphire]

great, thank you! I will try in a few hours.

[vast crane]

This might work:

a bit of a hack though

The other thing you can do is use customize to set the mode attribute of the number to box

using customize probably the better option

[chilly sapphire]

thanks, the hack works 😎 I will check out customize tonight, thanks!

[lusty arch]

Im a total newb and getting into HA, what would it take to build this beauty? https://www.reddit.com/r/homeassistant/comments/pqwyxb/new_dashboard_for_my_wall_mounted_tablet/

[tribal galleon]

Scroll down on the thread. The OP describes everything about it including links. Do note, however, the iOS theme is old and files need to be manually moved in order to work. Issue #47

OP even inclded a link to the dashboard's YAML. Can't ask for any more than that! https://pastebin.com/A7QWcyaD

[lusty arch]

Thanks for your reply, I could not understand the configuration and what it does. I have never played with home assitant dashboard and how to customize it. Is there and easy way to do it?

Or if you could guide me to an easy to understand way of chaging the theme of home assistant that would be greatly appreciated.

[shell torrent]

Hi, for the new Sections View, I can't change visibility (which users that should see the new view). The toggle goes back to 'on' no matter how many times I click it. Known bug or just me? I searched for sections here, but found nothing about this issue.

Hmm.. seems to be a bigger issue, I can't change visibility for old views either.

[vast crane]

Known bug, will be fixed in .1 release

[tribal galleon]

Just tried it myself and saw the same. Was going to tag you karwosts to see if you knew anything about it. But, you're just too quick.

[vast crane]

It's been reported like 8 times so it's top of mind 😂

[tribal galleon]

Gotcha. I don't really follow bug reports. Actually, most of my info comes from you posting in here. 😛

[golden mist]

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

[golden mirage]

I have custom:button-card want lock.
But it can not lock

[tribal galleon]

@golden mirage Your code pretty much worked for me (removed the styles and fixed the state). Needs a press & hold to unlock and remains unlocked for 10 seconds.

[golden mirage]

I still press on and off normally when locking

[tribal galleon]

I tried your code exactly as you shared it (using my own entity) and it functions just like the screenshot above (it only shows the white digital clock icon regardless of state.) Can you share a screenshot or video/GIF of what you mean. It works fine for me (and I've never used the lock function until now).

[golden mirage]

Here

oohhh
I find error because
styles
lock:
- width: 14px
- top: '-8px'

i tried remove styles of lock then it work normal

[tribal galleon]

Ah. That wasn't provided in the example earlier. I was wondering why the lock was on the left side in the recording.

[golden mirage]

i want size off icon is smaller

It seems its styles are not supported

i want size off lock icon is smaller

[golden mirage]

I have removed part of the content for brevity

The lock icon size is too big compared to the button icon 😄

[tribal galleon]

I was able to modify the lock icon size with card_mod. yaml card_mod: style: | ha-icon { --mdc-icon-size: 12px !important; }the value can be either px or a %. (I thought it could go in the lock style but I could not get it to work.)

Here's it is set to 60% with yaml styles: lock: - color: yellow top: -8px right: -8px

[golden mirage]

many thank
I will try

[golden mirage]

it works fine
Many thanks

It looks better
Thanks

[golden mist]

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

[spark spear]

hello there:
I am trying to use this code provided on top but it seems to complain with some formatting can anyone help me with it?

it says:
Configuration errors detected:
tab characters must not be used in indentation (15:1)

12 | - '--keep-background': 'true'
13 | custom_fields:
14 | location:
15 | →- text-transform: capitalize
------^
16 | →- position: absolute
17 | →- left: 4%
thats what it says

[golden mist]

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

[spark spear]

here only the code again

[golden mist]

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

[spark spear]

is there a spezial way to past it so the tabing is correct ?

ok made some prgress but stil not displaying it correctly 😦

bi it does not is ther still same spacing i got wrong ?

[golden mirage]

You wrong tab for it

it must same column with styles

and you can change left styles to other for two custom_fields

copy full code to here

[golden mist]

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

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

[golden mirage]

you want it to display like this

[spark spear]

yes

can you past the code and show me howit is to look ?

[golden mirage]

that code

[spark spear]

ok cool ill try it

it seems it not copying it wrong i am opening it in notepad++ and if i past it does it not woork

[golden mirage]

show_entity_picture: true
for show picture of person

[glass ibex]

Hi,
I have two cameras and would like to display one frigate card as the main one and another video stream card as an overlay to the first in the top left corner. Is this possible?
It seems possible to add states etc as labels to the picture elements card but I need to use the frigate card for two way audio to my doorbell.
Perhaps there is a card that just overlaps another card?

[spark spear]

@golden mirage got it work thans

[spark spear]

@golden mirage would you be able to help me with the code to make it so that it displays a chring icon and is blinking wenn the phone is charging ?

[chilly sapphire]

I tested an input_number helper and it seems like it will work too, thanks

[chilly sapphire]

I tested this and it looks exactly the same as the hack 👍 thanks

[arctic rose]

was wondering if someone could suggest what i'm doing wrong. I have a dashboard with multiple views. One of the views (the last) is specifically for my wife, and i removed access from all other views besides that one for her. I set that dashboard as her default view. The problem is when she opens the app, it shows her the first view (not her specific one) even though she doesn't have access to it. the views section at the top only shows her own view though, not the first one that she is currently viewing. Is there a better or more correct way of doing what i was trying to accomplish?

[tribal galleon]

With the custom:button-card, you can set that in the state section. This is one of my examples: #frontend-archived message
If you follow the link, you'll find the code at Line 505.
The card can handle the charging icons on its own. If you want better icon coloring, check out this example: custom:button-card dynamic icon color

[hexed lantern]

I have a weird problem with an iPad and the ios HA app, but it's the same via the browser too..... a "time card" doesn't update the time, it always stops at the time that is displayed when you open it

[tacit cave]

that card will only update on the frontend when sensor.time updates

it also uses custom button cards update engine

which is not smart

it simply listens to sensor.time state changes

because it was supplied in the entity field

[latent cobalt]

How to scale the image in a picture-elements card

[austere geode]

Im trying to make a detailed dashboard from the inverters of my solar roof...In my mind i would like to show every tile as each individual picture (maybe) with an ID. I would to change the color of the tiles depending on the production...

any ideas how to approch this...

[tacit cave]

picture elements

[glass ibex]

Any suggestions? 🙂

[austere geode]

and how do i make alot of them fit in a row (small)

[hexed lantern]

How could I add a time here that also updates itself?

[vast crane]

Doesn't sensor.time update once/minute? Not sure why that would be a limitation.

[tacit cave]

Yeah

[hexed lantern]

Yes, that's how it used to be. But currently on the iPad, the time is only updated once when I go to the view. Then it just stops at that time.

[tacit cave]

old ipad?

[hexed lantern]

ipad 2018

[tacit cave]

best case with custom button card is that you can add triggers_update: sensor.time

[hexed lantern]

same ios hA App or browser

[tacit cave]

I highly doubt the os is the same version as new iOS

that's a 6 year old device, apple typically cuts support at 4/5 years

looks like they haven't

so it should work the same as any other browser

[hexed lantern]

ipad have actuall iosPad

[hexed lantern]

i have insert it und will test it

[tacit cave]

not sure I follow this comment

the iOS for gen 6 ipads can go as high as 17.4 which is the current iOS release

[hexed lantern]

ok i have 17.3 installed ...

[glass ibex]

Found a solution using card mod. Position is absolute but it works.
Pm if anyone wants the yaml:)

[tacit cave]

then it should just update, if not, take it up with custom button card

[heady basin]

Hi, I can't select from the UI the users who can see a view, However it runs OK editing it in YAML. Any solution? Thanks

[vast crane]

Will be fixed in 2024.3.1, imminently

[scenic current]

    - type: markdown
      view_layout:
        grid-area: time
      content: |-
        # {{ now().strftime('%-I:%M')}}

I'm using this in a card to display time. Unfortunately this is using the time on the device. I'd like to display the time on my HA server. Is there a different way to do this so that all devices have the same time. I know about NTP but would rather have this using the server time.

of course this is just a small piece of the card

[dark dirge]

you can make whatever you want from the time_date entities:
{{ states('sensor.date_time_iso')|as_datetime|as_local }}

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

Templates are evaluated on the backend, so will get server time. I don't know why now() would correspond to the device you're viewing the card on

[modest frost]

I'll show myself out.

[vast crane]

np

[golden mirage]

what do you mean for chring icon

[scenic current]

Beats me. I know that it is device dependent though as the new device I started using today was set for a different time zone and it showed that time instead of HA server. Thanks for the info above. Will give it a go!

[golden mirage]

you can add more custom_fields for charging state near battery field

[chilly sapphire]

Not an expert but you could try making her view the first one

[arctic rose]

yeah that works for that problem , but then also makes all other members who each have their own view see hers when they load it up. i think i'm going to have to make separate dashboards for them all

[fickle timber]

How do I fix my sensor card ("Outdoors") to be 4 columns wide instead of 2?

[tribal galleon]

I don't know why now() would correspond to the device you're viewing the card on
@dark dirge This was something that karwosts pointed out to me a couple of months ago. #frontend-archived message

[dark dirge]

That doesn't seem related to a template, but instead a countdown or time calculated by and displayed on a card

[tribal galleon]

I see what you're saying. (TL;DR: You're right.)
I just did a test. I advanced my time on my laptop by ten minutes. Using the template mentioned above ( {{ now().strftime('%-I:%M')}}), Dev Tools Template shows HA's time (10 minutes behind the laptop).
Put into a Markdown card and Mushroom Template Card, both also show 10 minutes behind.
Putting a Markdown card as a custom_field in a custom:button-card, shows 10 minutes behind.
In a custom:button-card using new Date().toLocaleTimeString(), shows the laptop's time of 10 minutes ahead.
Starting a 30-minute timer, shows only 20 minutes remaining and the last-changed starts at 10 minutes ago.

[tribal galleon]

Before creating the separate dashboards, hold off until the .1 release. There's currently a bug with toggling views for users which might be related to your issue. #frontend-archived message

[arctic rose]

Ok thanks. Will do

[shadow cipher]

Hey HA people, I've been back a forth a bit trying to work out if I can customise an air conditioner card. The AC unit can heat and cool. In heat mode the temp range is 16 - 30c, In cool mode it's 18 - 30c. Is there a way to make the dash card scale to this rather than the default values?

I'm guessing at the moment that this may end up going down a route where I'm creating a custom entity.

[violet talon]

if I wanted these cards all in a single column and not masonry-ing, would I throw them in a grid card? one big vertical stack? or is there another card for that?

if I did the vertical stack would it be left aligned instead of centered?

current: https://i.imgur.com/QVIkzsn.png

stacking them all in a vertical stack worked 👍 🎉

[nimble harbor]

Hi guys - I have a problem where everytime I add a new card, it's not showing up. I see it in the raw configurator, but it's never visible.

Tried every browser / clearing cache etc. But can't seem to find the issue

[livid silo]

i'm brand new to all this so I'm probably being mega dumb, but how do I hide/get rid of the "UI Lovelace Minimalist" dashboards?

[tacit cave]

don't use it?

[livid silo]

what do oyu mean?

[tacit cave]

I mean, you installed and configured it. Remove the configuration, then uninstall it from hacs

[livid silo]

okay

[azure canopy]

trying out the sections view now, but how is it determined if a card takes 1 or two horizontal spaces?

[vast crane]

hardcoded to the card type I think

[azure canopy]

example:

[vast crane]

probably get some more customization in the future?

[azure canopy]

bottom one is a mushroom media player card, I would like to have that 2 horizontal spaces

[vast crane]

people have been sticking them in horizontal stacks as a workaround

horizontal stack = full width

[azure canopy]

ah okay

that works, thanks 🙂

[tribal galleon]

@vast crane Was working this issue the other trying to get custom card to work. Did the usual refresh/clear cache process. It seems like HACS is not adding the resources like it is supposed to on his system. He's tried a couple of cards and none are showing up. I don't know enough about manually adding the resources to try to troubleshoot further. Thinking about suggesting reinstalling HACS but I'm not sure what the ramifications of that would be.
Have you seen anything like this before or is it more of a #integrations-archived issue at this point?

[vast crane]

I don't really follow much HACS or custom card issues, couldn't say.

[tender wedge]

Is there really no way (without hacs) to show group light entities in popup windows?

For example, I have a button for light.landing which is a group for all landing lights, when I click the button a popup opens with the list of all landing lights, and lets me to control them all

[tacit cave]

Nope

[dark dirge]

It's pretty much the only thing keeping me using old-style groups

So I guess that's also the answer to your question?

[tender wedge]

Such shame ;(, hopefully with grace we'll see some changes

[dark dirge]

Like I said, I believe that an old-style group does what you're asking. It just results in a group.* entity instead of a light.*

[fiery ledge]

You can also set the amount of hor/ vertical space it uses

At least in Dev, I’ve posted an example in the community topic about it

[glass tiger]

Is it possible to specify the minimum and maximum temperature settings for heating and cooling independently on the thermostat card?

[fiery ledge]

        - type: tile
          entity: climate.heater_library
          layout_options:
            grid_columns: 4
            grid_rows: 1```

[torpid harbor]

I believe I've found a bug, do I report it here or on GitHub?

I'm editing an automation in YAML mode, and when I change the brightness_pct: for a light.turn_on, I don't get the Save button until I do something else, like add an action or building block.

I'm pretty certain that this is a new issue, as I've done YAML editing before (I've got a couple of automations that I cannot edit in the visual editor and must be done in YAML).

[tacit cave]

working for me, save button is always persistent

[torpid harbor]

Here are screenshots showing no Save button until after adding a button press action. https://imgur.com/a/m3FzbQ9

[torpid harbor]

Oh sure... I go to record actions and it works... 😦 🤷‍♂️

The fridge always works fine when the repairman gets there...

[vernal abyss]

hi, I am pretty new to hHomeassistant and I just created a horizontal stack and I would want it to appear a bit wider. The right 3 cards shoud be square at least and the left one shound be wider too. Maybe it would auto adjust if I just made the stack wider but I have no clue how to. Can I somehow change the width of the whole stack?

that's what I tried but it doesn't seem to work

[vast crane]

you can't change the card width from the card itself, you either need to use a 1-card view (in which case your card is as wide as the screen), or get some custom plugin that allows more customizable view/grid arrangement.

But for masonry view the column widths are fixed

[vernal abyss]

hm, okay. But 1-Card view sounds like I can only place one card on the dashboard, right?

[vast crane]

yes but it can be a card that contains other cards

so you could make that "1 card" a vertical stack, and inside that put several horizontal stacks, and inside those put several other cards

[vernal abyss]

what do I have to search for to find the mentioned 1 card?

just a manual configuration?

[vast crane]

Click edit dashboard, click edit on your View, and there should be a radio set of options for what view type you want to use.

[vernal abyss]

and I want to select Panel (1 Card) I guess?

meh, I don't like that either. Guess I'll just put the 3 cards under the larger one

[ruby narwhal]

Hi, trying to get my head around setting up home assistant (only new)

Trying to follow this guide for different backgrounds

When ever I edit my configation.yml to the guide and I reboot home assistant it goes into recovery mode and says the configuration.yml is wrong

If someone could kindly assist 🙏🏻

Setup via windows

https://www.juanmtech.com/how-to-theme-home-assistant/

Unsure why my configuration.yml was completely empty before I edited it also.. is this correct? Thanks 😊

[haughty vine]

Weird. Defaults created on new installation:

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder
frontend:
  themes: !include_dir_merge_named themes

automation: "automations.yaml"
script: "scripts.yaml"
scene: "scenes.yaml"

[haughty vine]

Also, have you tried running config check (in "developer tools" panel) before rebooting?

[untold trail]

https://i.imgur.com/JVtaZm4.jpeg I want the "post 1 post 2 and post 3" at the bottom left to be right under "garage lights" but they're getting pushed down since "Eve Lights" is so tall. How can I make it so they go where they fit? I'm using a grid layout, and according to my grid, it should be right under Garage Lights

[untold trail]

anyone...?

[ruby narwhal]

Thanks for this I seem to have it working now,

My only other question is there documents anywhere for the default dark mode theme in home assistant.

I have changed the background image in my theme but everything else is now white.

Trying to have it all default dark mode with just my new image as background.

I appreciate the help

attached files

[haughty vine]

Try:

back1:
  modes: 
    light: {}
    dark: {}
  lovelace-background: 'center / cover no-repeat url("/local/backgrounds/back1.jpg") fixed'

..and you should be able to chose between dark and light mode variant of "back1" theme
You can also apply light / dark mode specific variables in place of {}

[slow oracle]

is it possible to perform a simple regex on a markdown card content?

[spiral vale]

Hello is their some custom cards that kinda works like the "energy-date-selection" card but for any card you wish? id like to make a custom energy dashboard with custom cards but would also like the functionality of the "energy-date-selection" card

[haughty vine]

You can use jinja2 templates in the Markdown card, so yes
regular expression tests and filters: https://www.home-assistant.io/docs/configuration/templating#regular-expressions
example:

type: markdown
content: |
  Three letters that come after "c" are:
  {{ "abcdefghijklm" | regex_findall("(?<=c)...") | first | default }}

If you're asking whenever markdown content itself can be accessed in template then also yes ({{ config.content }})

[split marten]

Without seeing the grid code, it makes it a little more difficult to see what you are doing. I assume the post lights are in column 1, row 2 based on the picture. Row 2 is pushed down due to the large card in column 3, row 1. You are either going to need to merge column 1, rows 1 & 2, or simpler, just put a vertical stack card in column 1, row 1 and put you garage lights and post lights cards in there.

[untold trail]

I switched to masonry instead of grid

[split marten]

OK. That will work as long as the screen size doesn't change. Things can move around in unpredictable ways on a masonry card as the screen size changes.

[knotty veldt]

is there anyway to know if the theme selected is light or dark so i can chose a picture depending on the theme

[vast crane]

Picture elements lets you pick separate dark mode vs light mode image, maybe can use that. Or are you asking for a custom card?

[knotty veldt]

i saw that but i want to do it in a custom:button-card

with a entity_picture

[vast crane]

Do you have the hass object in that card's templates? I think hass.themes.darkMode is the boolean for that.

[knotty veldt]

it can use template, but i dont know how to check the actual theme selected

[lyric prairie]

This works in custom:button-card

[knotty veldt]

need some help how do you use it ?? {{ states("hass.themes.darkMode") }}

[lyric prairie]

entity_picture: "[[[ return hass.themes.darkMode ? 'local/dark.png' : 'local/light.png']]]"

[fiery ledge]

those only check for the actual mode your theme uses. If you dont, as do I, you need to select based on the name of the themes you use

[knotty veldt]

thnaks, im trying it but is not working

[lyric prairie]

Do you use two different themes or one theme with both a dark and light mode?

[knotty veldt]

two, im using homeassistant default theme

[lyric prairie]

And you have the mode set to auto?

[knotty veldt]

no, im selecting each one to try

[fiery ledge]

i used this toi select my dark themes{{states('input_select.theme')|regex_search('(ight|Dark|Matrix)')}}

'ight' selects themes slsike Midnight 😉 and not 'light' mode

[lyric prairie]

you can find the current selected theme with

hass.themes.theme

[fiery ledge]

another option is to set a variable in your dark themes. eg for map: map-filter: "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)"

and that will change all your Maps to the Dakr mode settings, without using Dark mode

[knotty veldt]

{{states('hass.themes.theme')}} return me unknown

[fiery ledge]

that is javascript

[dark dirge]

It's not an entity

[lyric prairie]

You cant put jinja in custom button-card

[fiery ledge]

jinja templates are used in HA core backend templates, and markdown cards and some other custom cards like card_mod and template-entity-row

most other frontend cards use javascript, which is an entirely different syntax

[knotty veldt]

[[[
return hass.themes.theme
]]]

if i do that it returns me default

[lyric prairie]

You will need to use that in an if/else condition to let it return different images

[fiery ledge]

next thing to realize is that Themes can use the dark/light mode (as your mobile device does) or not. So 'checking' dark themes depends a bit on your definition. Eg, my theme Dark blue uses no dark/light modes, but is a dark theme ... I know that for all of my themes, so made a list once to select based on that

[knotty veldt]

yes but both return me deafault, light and dark

[fiery ledge]

do you have other themes

[knotty veldt]

yes

it does return the name

but not the option on light or dark

[lyric prairie]

That is expected, if you want to change the entity picture based on the selected theme you could use that info

[knotty veldt]

thanks, this is returning true or false is its selected, i can work wit thtat
[[[
return hass.themes.darkMode
]]]

thank you all for the help

[shadow cipher]

hey peoples, bit of noob help, maybe a pointer to a good video on writing yaml for dash cards? So far my card has some bits to control my garage doors and lights. I've added a sensor to tell if the doors are open. But it would be great to combine this all into one entry. Maybe the Icon for the garage door can track the State of open and closed, and change with it. Can anyone point me in the right direction?

[vast crane]

What you want is probably not here in the UI, but to create some template cover entities.

Then you can add those entities and they will merge status and control into single entities with nice presentation.

[shadow cipher]

ah ok, I'll lookup templates

Template or Helper? @vast crane

[vast crane]

https://www.home-assistant.io/integrations/cover.template/

[pine crypt]

is the login page particles.js adjustable?

could i change the colors for example?

[spring pollen]

Hi! I have cards made specifically just for lights, electricity consumption, switches, heating switches, people, etc. All entities or entities on the cards are placed individually in such a way that I can customize each one for myself and move it wherever I want on the individual card. Now I would like to make cards for individual rooms and I am wondering if I can and how to make a connection for each entity in the room card so that when I change the switch in the card with the switches on the individual switch, I don't have to fix the switches in the room as well.

[azure laurel]

HI. I am trying to learn how to use a custom strategy. I have read through the documentation on the developer site and tired setting up the full example provided without any changes. Unfortunately, however I am getting a TypeError. I will admit that I am a novice when it comes to programming, but I would expect the example to work. Any advice would be appreciated.

[onyx skiff]

Hello, i like your dashboard did you mind to share the code

[runic dagger]

Messing around with sections a bit. Is there any way to make section visibility conditional?

[burnt kite]

Hey does anyone know how I can change this to not have any words? I just want it to have a standard time look

[tribal galleon]

@burnt kite The last line of your screenshotted code 🤢 is the return value. Just format that the way you want to see it.

[burnt kite]

I honestly just took all this from a crappy HA form post

[tribal galleon]

#devs_frontend-archived would probably be a better place to ask about that.

[burnt kite]

Too brain fried atm to make my own code

Thank you

[tribal galleon]

Paste the text (and not a screenshot).

[burnt kite]

Will do!

[chrome tangle]

Hi, is there a way that all settings in a profile (like configuring color and the default Dashboard) are set automatically when i log in with this profile on a new device? (currently to my understanding, all these settings are only saved for each browser individually)

[tribal galleon]

how to make a connection for each entity in the room card
@spring pollen I'm not following what you're trying to ask. The connection is the entity itself. The cards are just showing whatever the entity's status is. So, if you turn on a light on the main view, that change would also be "seen" on the room view.

[rigid token]

HI, I seem to be having a similar issue to Jens here ( #frontend-archived message ) and after updating my OS to 12.1 today, my todo list reports its status as "unavailable" and rebooting does not resolve the issue. This is the first time I've rebooted in a little whilte (certainly since Jens reported this issue). I didn't see a resolution for the issue in this chat and was hoping to either help provide more info or if someone could point me at the answer.

[kindred escarp]

I'm tring to remove a default 16px padding value in an entities card. The padding value is set at :host ::slotted(.card-content) from what I see in dev tools. I've tried a ton of different ways with card-mod to no effect. The select menu in the entities card is in a layout card grid with some button cards and the padding value is pushing it lower. Any ideas?

[tribal galleon]

Try modifying the margin to a negative number. Padding is the spacing inside.

[kindred escarp]

thx!

[floral badger]

I'm looking for a way of changing the state description (zone) of a person entity card based on that state (zone). So that different people can display the state 'Home' when they are at their respective home zones (which are distinct defined zones).

[tribal galleon]

More than likely, you won't be able to do it with the person entity card. HA's stock cards offer little customization outside the scope they were designed for. You might be able to make a templated person entity, but with the time and effort that would be needed to make that work, you might as well just consider a third-party card. Then, it would just be a matter of using some Jinja/Javascript.

[floral badger]

Do you have any suggested third party cards to consider? I've not delved that deep into custom cards but I'm a web developer and perfectly happy figuring things out. Save me some research, what's good/popular?

[tribal galleon]

The two most popular that I would recommend are the Mushroom Card and the custom:button-card. With the Mushroom card, you would have to use the Template variation to allow you to define a Jinja template. The custom:button-card would rely on JavaScript. Both are pretty simple.
Install HACS and use the HACS install method for those cards.

[sleek drum]

Anyone familiar with the team-tracker card hacs integration ?

[ruby narwhal]

Is there a way to blur all the background and other cards when a card pops up?

dialog-backdrop-filter: blur(5px)
  iron-overlay-backdrop-opacity: 1
  iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

I read that you could add this to ya theme.yml but doesn't seem to work
Thanks

[limpid shadow]

I'm still running into an issue when I select settings I get "Error while loading page dashboard", JS Console reports: Error loading page dashboard SyntaxError: missing } after property list

No real errors or warnings in any of the logs

Strange, just before the error are a number of /frontend_latest/<hash>.js GET request with empty responses.

Looks broken, but for all I know that's compeletely normal

[vast crane]

Try safe mode? Sorry don't see the rest of the conversation so don't know what was said before.

[haughty vine]

Try the following:

• Open browser dev tools, go to "Application" tab (in Fx it's "Storage") then select Cache storage > file-cache
• Delete the file-cache from context menu
• Clear standard browser cache or perform hard-refresh (usually Ctrl+Shfit+R but depends on os / browser)

[limpid shadow]

Duh, for some reason my setting for clearing the cache when the devtools are open got turned off

So, I didn't go looking for the cache... assuming it was already cleared... when it wasn't

Ok, problem solved... Noob

😄

I'm happy it was something that simple... I didn't like the idea of HA developing a mystery error

[haughty vine]

* Cache storage is a special thingy and is not cleared when standard browser cache is.
It's part of clearing "site data" but clearing site data will log you out as well as well as it would clear client side settings (like language, sidebar order ect)

[limpid shadow]

I get that, but I didn't even have to do that... it was simply a corrupt normal browser cache

I simply made an incorrect assumption that it was cleared automagically by my settings when I opened the dev toolbar

[timber dagger]

Can I add custom functional icons into home assistant? like for example: https://fonts.google.com/icons

[vapid field]

Hi Guys

who is learning about frontend?

[tribal galleon]

Was thinking about your message from yesterday. I remember you working on your LCARS dashboard a few months ago. Wondering what the purpose of the input_select is in the screenshot you shared in this post.

[tribal galleon]

Generally, the font-awesome integration is recommended for adding custom icons.

[molten cipher]

I have this entity entity_apparent_temp: sensor.edmonton_wind_chill on my platinum weather card. The problem is when there is no windchill then it breaks it.. how can i hide it when there is nothing happening... and make it visible when i want?

i think it registeres as "unknown" when nothing is going on.

you can see where it starts happening.. as the weather wamrs up

and thats what the error looks like..

[tribal galleon]

@molten cipher What is providing the sensor.edmonton_wind_chill's data? Is it from an integration? Do you have it set up as a template sensor?

The "unknown" state isn't because nothing is happening. More than likely, there was a communication issue (data was requested and it timed-out). The NaN error stands for Not a Number, in this case, the unknown state.

[molten cipher]

Pretty sure it's an integration. I do not have it setup as a template sensor. I dont have any template sensors... Noob on that.

[molten cipher]

Yeah that makes sense. I figured maybe it was reading as no windchill... Cuz there can't always be cold wind. I wasn't sure if I could use the "unknown" state specifically to hide the entity as a work around.

[tribal galleon]

So, sometimes I've noticed my weather entities will report unavailable. (Not qiute the same as your unknown.) For me, I'm assuming a communication "glitch." To combat this problem, I set up a simple automation that watches a weather entity when it goes to an 'Unknown' state, it reloads the config entry. ```yaml
action:

• service: homeassistant.reload_config_entry
  target:
  entity_id: "{{ trigger.entity_id }}"
  data: {}```Not sure if this could be used for your unknown state. Now that I think about it, unknown probably means data did not come back (unlike timing out.)

[golden mist]

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

[jolly chasm]

Silly me, I was in edit mode

[tribal galleon]

Yeah. Conditionals return true when editing. Curious what you're trying to do (other than understanding how it works.) I have a couple of examples showing how to make different charging icons/colors for the Mushroom Template Card. Link

[flat copper]

Hey there. Is there a known issue that "YAML configuration reloading" is broken for HomeKit? If I add a new HomeKit Bridge into HomeKit portion of YAML, and hit reload HomeKit, it doesn't show up. I have to restart HomeAsssistant for it to show.

[junior iron]

Hi guys, do you know if there is some auto rotating card ? Or a way to come back to the first panel after some times of inactivity on the dashboard? I've kiosk and the swipe add-ons for my tablet but they don't afaik offer this possibility.

[tribal galleon]

I used to use the swipe-card which has an auto-scroll feature but it has been abandoned and no longer seems to work. I tried using the fork by breakthestatic but it is also broken and issue reporting seems to be turned off.
IIRC, Fully Kiosk Browser can return home after inactivity. If not, an simple automation using FKB or browser_mod should be able to get the job done. For FKB, use can use the button.press service along with the buton.*_load_start_url entity. (I don't have the automation set up for inactivity like you want; I use HA_start, HA_shutdown, and lovelae_updated events.)

[junior iron]

Thanks. I'll look at that.

[ruby narwhal]

I'm trying to blur the background when a popup card happens.

dialog-backdrop-filter: blur(5px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

I found online that this is baked into HA now but it comes up as error when i add it to code editor on my current cards

If anyone is able to assist ? 🙏🏼 Thanks

[meager goblet]

not sure if this is the correct forum but can anyone advise on how to turn on SSH on my pi3b+ running HAOS

[dark dirge]

it is an #add-ons-archived , so you should install the addon

[meager goblet]

Ahh ok i will go check! thanks

[oak oyster]

Try adding the add on “Advanced SSH & Web Terminal”

[dark dirge]

and make sure you have "advanced mode" enabled in your profile

[atomic glacier]

@ruby narwhal This what and where I use that code to blur the backgrounds:
https://github.com/Dino-Tech/Home-Assistant-Main/blob/master/includes/themes.yaml#L165-L190

[gleaming oak]

Hey guys, is there any native way to add a vertical flex space between two cards? I'd like to add a card to the right bottom corner of my kiosk dashboard, which is basically 4 vertical stacks. I've been trying to play around with the new Sections layout but it's insanely confusing. Thanks for any help 🙂

[stark spruce]

hey there, i am trying to add a extra line into a card , its the battery level of my phone sensor.chriss_iphone_battery_level where should i place this ? my though was entity

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: device_tracker.chriss_iphone
show_state: true

[ruby narwhal]

Im still learning but is this what i have to do if i have card mod installed?

thats my theme file for back1.yaml

[true galleon]

I made a wall mount tablet for my HA installation out of an old Google Pixel Slate that was basically useless to me prior to repurposing it for this purpose. I mounted it a little crookedly, but it’s too much effort for me to fix it now. I think a new frontend would be great. Any recommendations?

[atomic glacier]

I'll take a look at it when I get home ✅, but yes, that's the way my theme.yaml is currently

[ruby narwhal]

That would be appreciated thanks, not seeing any changes with it atm 👍🏻

[atomic glacier]

😐

[tribal galleon]

Dashboard design is very subjective; what works for me (or looks good), may not to you. I would suggest installing HACS which will let you install third-party cards and integrations. Looking into Kiosk Mode which you can use to hide the header and sidebar. Consider some custom cards such as Mushroom card and custom:button-card. Consider Fully Kiosk Browser which there's an integration that could allow some extra features and automation capabilities. (This is paid-for software but only if you need the Pro features. Pro features can be turned on and tested to see if you want to purchase the software; it does put a watermark on the screen if you're using a Pro feature without having Pro.) (browser_mod can also give you some options.) If you don't already have one, consider getting a smart plug to control changing the tablet so it is not always being charged/running at 100%; this can be done via an Automation.

[atomic glacier]

That would be appreciated thanks, not

[warped bramble]

What are the best resources for viewing other people's dashboard/card creations and related code? Is there any? I'm struggling to first find ideas for laying out my data, and second once I have an idea I'm just searching google/reddit reading random posts where everyone is saying different things, sometimes no code is posted, etc

[tribal galleon]

@warped bramble There's probably no single place where you're going to find examples with the cooresponding code. There's show-off threads in the forum but usually they don't have the code to go with it. Usually, if there's something that catches your eye, you can grab a snippet of the picture and ask for guidance in here. Usually someone can point you in the right direction. I randomly come across examples when browsing GitHub. Checking out some of the threads in here can also leads to good ideas with pictures and code.

[warped bramble]

Thanks. I like tinkering but I'm pretty short on time these days and I know how easy it can be to get lost in HA customization so I'm trying to find more efficient ways to get some nice dashboards 😬 .

What's the best way to explicity control the layout of the dashboard on desktop vs mobile? The default masonry sorting is very odd to me. Can I define explicit columns and force cards to stay in that order in that column? And then mobile would stack the columns, or even better a way to change the layout only for mobile?

[tribal galleon]

Using vertical-, horizontal-stack, and grid cards let you keep cards in certain spots. layout-card has options for more control over the layout. There's also options for mediaquery to defind different layouts per device. Generally, however, I find it easier just to design a specific dashboard for a specific device. So, for example, my tablet dashboard looks horrible on my phone than the phone's dashboard, and vice versa.

[warped bramble]

Makes sense, on mobile you can change your default dashboard/view?

[tribal galleon]

IIRC, default dashboard is device/user specific. You could also consider adding a user for a Tablet, for example.
I'm currently looking through someone's GitHub that has a lot of code and examples. He has a section showing off Mobile and Tablet variation. Here's a good example of how he set up his dashboard to handle mediaquery: Link to code

[warped bramble]

Anyone know how I could modify these types of cards to allow you to tap or expand them to view all of the entities in the group and control them individually?

[meager goblet]

i have the non advanced set up and its working, but it looks like advanced can do more, if both are installed, can that cause conflicts? maybe causing the os to crash and reboot

[atomic glacier]

@warped bramble https://github.com/thomasloven/lovelace-fold-entity-row

[zenith stag]

I use Dribble or just google image search ”UI dashboard design” for inspiration. Ypu just have to be wary that a lot of UI designers have next to no UX thinking, so they might look good but not be very functional at times ^^

[night cape]

hey, is there a way to set this setting global?

  style: |
    ha-card {
     --title-spacing: 10px 10px 10px;
     margin-bottom: -10px;
     }```

[dim cloud]

Can I hide empty sections? Or have them rescale to just the required height when conditional items in it are not visible/needed?

[next dagger]

How are you all creating really nice looking dashboards? I don't see any of this functionality

[golden mirage]

What card is this?

[tribal galleon]

Those are Mushroom Light Cards from Mushroom card.

[tribal galleon]

What do you mean? Can you be more specific?

[next dagger]

I basically don't see any of this functionality you guys are talking about in the home assistant dashboard

[tribal galleon]

Without looking into it too much, I'm going to assume: probably not at this time. Sections are really new and new features and functionality will come as they are being developed.

@next dagger What does this mean? any of this functionality

[next dagger]

The screenshots. Not sure how you can create cards like this. I don't seem to have any of these for whatever reason

[tribal galleon]

Looking at this pictures above.
The first I answered. Those are Mushroom Light Cards from Mushroom card.
The second with the tablet: Those are all stock cards that are included with HA.
The pics above that from DinoTech look like some Mushroom cards, maybe Picture card, and maybe mini-graph-card. You can look through his GitHub by following the link.
The weather card further up is the Platnium Weather Card.
Third-party cards can be added via HACS.

[next dagger]

Ahhh ok interesting

Thanks I'll take a look at HACS

Blimey...things make a lot more sense now

[haughty vine]

Yes, check the Card Mod wiki's theme section:
https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes

[golden mist]

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

[molten cipher]

This used to work.. i want the card to flash when my contact sensor is 'open'

  style: |
    ha-card {
      {% if is_state('binary_sensor.front_door_ct_contact', 'closed') %}
      animation: blink 1s linear infinite;
    }
    @keyframes blink {
      50% {opacity: 0;}
    }
    {% endif %}
    mushroom-badge-icon {
      {% set bl = states('sensor.front_door_lck_battery') | int %}
      {% if bl <= 10 %}
      animation: blink 1s linear infinite;
    }
    @keyframes blink {
      50% {opacity: 0;}
    }
    {% else %}
    {% endif %}```

but now it isn't

fyi i was testing the code with it closed... so i didn't have to keep getting up to open the door

if i change it from is_state to just states it blinks.. so i know it works somewhat. but it doesn't seem like the is_state is recognizing 'closed'

[tribal galleon]

@molten cipher binary sensors are either true or false. HA translates the state to open/closed (or on/off).

[molten cipher]

thanks! this code has worked for months. and then it stopped... sigh. ill switch all of them.

can you remind me where you found that screen?

[tribal galleon]

Dev Tools > States

[molten cipher]

right

[tribal galleon]

Useful to be able to change the states (of most entities) for testing purposes.

[molten cipher]

i would have assumed what it said in my screen shot was the actual state.

[tribal galleon]

It's because that entity is set as a door. All binary sensors are on/off but because it is set as a Door, HA shows it as open closed for us, the user. Code, on the other hand, needs the actual state.

[molten cipher]

that is fair... and i did look through that also. I saw window and door as options. So i put it where im using it 😆

[gusty fossil]

hey there, ich have a short question. I want to display a thumbnail of my actual print. This is working:

show_name: true
camera_view: auto
type: picture-entity
entity: binary_sensor.octoprint_printing
image: http://10.10.10.43:7000/plugin/prusaslicerthumbnails/thumbnail/Teil1_0.2mm_PETG_MK3S_2h2m.png

But this is not working:

show_name: true
camera_view: auto
type: picture-entity
entity: binary_sensor.octoprint_printing
image: http://10.10.10.43:7000/plugin/prusaslicerthumbnails/thumbnail/{{ states("sensor.octoprint_print_file") | replace('gcode','png') }}

Value of sensor.octoprint_print_file is: Teil1_0.2mm_PETG_MK3S_2h2.gcode
Can someone help me?

[tribal galleon]

Try wrapping the link in single quotes and changing the single quotes that you already have to double quotes.
image: 'http://10.10.10.43:7000/plugin/prusaslicerthumbnails/thumbnail/{{ states("sensor.octoprint_print_file") | replace("gcode","png") }}'
From: https://www.home-assistant.io/dashboards/picture-entity/ last example.

[gusty fossil]

I don't understand what you mean

can you give me an example?

[tribal galleon]

Meant to respond to your message yesterday but forgot. Generally, trying to get stock HA cards to do something that they weren't designed for (in this case, showing a second line) is not going to work. You could consider the custom:button-card which is very customizable and you can get it to do a bunch of stuff.
You could accomplish something similar using a Markdown card a some code to render what you want to show. You can see an example here: https://discordapp.com/channels/330944238910963714/460846676358332417/1191960988220670012
Do note, however, that Markdown cards don't support tap_actions so they won't be tappable/clickable. Still useful for showing information though.

[tribal galleon]

Umm, I literally put the code to try with the recommended changes. 😕

[languid night]

Hi all, I have a small question. I think it's easy I just can't find an answer out there. Is it possible to add a tab to a dashboard with the same items as the default overview has?

[gusty fossil]

sorry, didnt saw that... 🙂
Tryed, but still not working

[tribal galleon]

Try putting that same code as the name: and see if it is rendering the correct path. (I'm not sure this will work because of how many characters the path is...)

[gusty fossil]

The correct link is:
http://10.10.10.43:7000/plugin/prusaslicerthumbnails/thumbnail/Teil1_0.2mm_PETG_MK3S_2h2m.png

i can open the thumbnail in the browser

so, image: 'http://10.10.10.43:7000/plugin/prusaslicerthumbnails/thumbnail/{{ states("sensor.octoprint_print_file") | replace("gcode","png") }}' should be correct?

[tribal galleon]

Right, but you need to ensure that the template that you're trying to use is making that link and not something else.
(You can wrap single line code in here with a single backtick at the beginning and end; three backticks for multiline code.)

[gusty fossil]

can maybe permissions or things like that be the reason?

ahh

i followed this post:
https://community.home-assistant.io/t/dynamic-picture-card/281785

[tribal galleon]

@gusty fossil The template should be working. I'm not sure what the problem is. I could not get it to work properly with a Picture-Entity card or a Picture card, but does work in a Mushroom-Template-Card. (Looking again at the link I posted, the template was used in a call-service and not the actual image.) The thing is, that thread is primarily showing how to create a camera entity but I don't understand why the template isn't working for us. **The cards I tried probably don't support templating the actual image. **
If you're just wanting to show the image, it could probably done a bit more easily with the custom:button-card but the syntax is going to be different.```yaml
type: custom:mushroom-template-card
primary: '/local/{% set file = "ha-logo.gcode" %}{{ file | replace("gcode", "png") }}'
picture: '/local/{% set file = "ha-logo.gcode" %}{{ file | replace("gcode", "png") }}'

[faint rampart]

what would my automation be when i want to turn on a plug when the garage is open and when it closed to turn off the plug after a few minutes

[dark dirge]

Trigger on the door opening and closing

What part are you having trouble with?

Also, #automations-archived

[faint rampart]

oops my bad

[shut robin]

hey guys, i kinda want to have some kind of view like this on my dashboard but for power usage of my house - ideally it'd be able to from like -10 to +10kw and have it green if it's positive and red if it's negative as a fun little way to see how my solar system is going

does anyone know of a front end way i can make this happen? ideally i'd like this to be either horizontal or vertical if it exists?

[digital swallow]

That looks like the Retro LCD Bar gauge from grafana. You can just use InfluxDB and grafana and create that exact same thing. Unless that wasn't really what you meant.
I also found these related things:

• https://github.com/tdvtdv/ha-tdv-bar
• https://github.com/custom-cards/bar-card

[shut robin]

funny you should mention it, i have a grafana dashboard set up for my plex server (this bar is showing hdd space remaining) - you have a great eye!

the issue is i don't know how grafana or influx db works (i'm not very tech savvy and just have grafana running somehow on my windows plex computer), so not sure if i can use them in HA or what the go is or how it works?

also thanks for the bar card options - i think i might want something a little more retro looking but the bar card is a good alternative if i can't find a retro looking one?

[golden mirage]

You can creat image for each percent then use custom-button-card to change image with percent of entity

[unreal kelp]

Hi all. Using https://github.com/thomasloven/hass-lovelace_gen for quite some time now and super happy with it. Using it for passing arguments to YAML files, etc. But one thing keeps bugging me, and I can't fix it. Studio Code Server keeps complaining about formatting errors like 'duplicate key' and 'missed comma between flow collection entries'. Even in the basic example from @polar kelp . Whatever I tried, can't get rid of them. The YAML code itself works perfectly though. Can anyone help!?

[dapper grotto]

Hi all

I have a complex lovelace UI panel with a lot of object displayed and integrations updates

everything is ok the UI works properly

but on my Android tablet that I have on the wall

[polar kelp]

That's because jinja is not yaml. It's highly non-standard.

[dapper grotto]

24/7 connected

I experience crashes every 2 or 3 times per day

I am using fully kiosk browser

but the same is with the HA app

I monitor the memory usage, and it seems to increase and then go down

I did the same with Chrome and after one hour the page is loaded

[unreal kelp]

Thanks @polar kelp Understand that. So does it mean I should just accept those warnings? Or is there a way to have File editor or Studio Code Server stop complaining about them?

[dapper grotto]

memory reaches also 400 MB and more

I did use the memory analyzer under chrome dev tools

and most of memory seem to be used by card_mod detached objects

one thing is that if I click on garbage collect button in chrome dev tools

the memory goes down immediately

any idea/suggestion how can I avoid the crash on the tablet?

of course, I don't want to reduce the list of cards/object I have on the panel

[polar kelp]

Not that I know of. With lovelace-gen you can't rely on other tools.

[dapper grotto]

Please suggest

[dapper grotto]

??

[lyric prairie]

It could be a CPU overload by the amount of (custom) cards. Not everything has to be as well optimized as core frontend components.

[fiery ledge]

arrgh, been overlooking this all this time.... custom:slider-entity-row and the colorize:true need the attribute set....https://community.home-assistant.io/t/lovelace-custom-hue-slider/369839/31?u=mariusthvdb

and now it works just beautifully!

[tacit cave]

I built something simliar to that

looks like I can ditch it for that

[flat condor]

Is this a good place to ask for advice on choosing between the "Lovelace Mini Graph", "ApexCharts", and "Plotly" cards?
It looks like the first doesn't do long-term statistics, the second is very powerful but seems to not be very actively maintained, or are they just all so stable? 🙂

[fiery ledge]

seems youve got it right there, except for all being so stable. each has its quirks...and its strengths

what do you want/is your quest

[flat condor]

I want more powerful/customized graphs for various long-term energy/weather stats, starting with simple things such as choosing the colors for my graphs or deciding which areas get shaded etc.
(I thought about iframing in influxdb/grafana graphs, but that's a royal PITA with firewalls and authentication)

[fiery ledge]

given the fact you can also card_mod pretty much everything, my rule is always try to stay as close to a cards own option first. Apexcharts has most of those I feel, more than Plotly. Otoh, the latter makes very cool dynamic graphs, and feels lighter on the system

so, I guess there is no single answer here.....

[flat condor]

Thanks! card_mod is a good suggestion too

[fiery ledge]

there is also the no longer maintained History-explorer card, which is a really awesome replacement for HA's own history graphs, and way more flexible and system friendly

[flat condor]

I hope that eventually we'll get a bit more plot/graph action as part of the core set of cards 🙂

[fiery ledge]

dont keep your hopes up...

what ever you do, try to keep down the number of graphs on a single view. Ive made a few subviews containing a single apexcharts, and those go well. combining them with history-graph and mini-graph isnt very nice. especially if your hardware isnt up for it

[fiery ledge]

yeah, well, there is a separate topic on modding mini-graph-card, but it remains difficult. theres a built in problem with multiple state colors when using multiple entities that cant be overcome. so, as the name suggests, keep that card nice and simple, and use it as a cool and more versatile replacer for the sensor card.

[flat condor]

Thanks, that's very helpful. I may try to just start modding the "default" card and then see whether I get more done with either plotly or apexcharts (my hardware is generous, I guess it'll also depend on how they look in the mobile app)

[tame oriole]

is there a way to take these saved colors and apply them to all my lights? it seems like each light / light group has its own and i dont really want to do it 300 times

[fiery ledge]

tbh, Ive never had that need, nor do I use these buttons. I suppose you could do it on a light group containing all your lights..

[tame oriole]

i do, but if i have 5 light groups, one for each room. i would want all these colors applied to each one

but when you create a new light group, its reset to stock colors

my living room group

quite a pain to go in, and redo all of it

and i dont see any setting to setup your own

[fiery ledge]

yep, I can see that. it could be useful if we could set our own defaults

[tame oriole]

yep exactly

i dont much care for the defaults that are there

[fiery ledge]

did you check for a discussion on that in Frontend repo?

[tame oriole]

no, unfamiliar with that. is that on the official forum?

[fiery ledge]

no, its in the Repo. Normally it would be a FR in the community, but for Frontend those go to the Discussion section

https://github.com/home-assistant/frontend/discussions

[tame oriole]

okay. so go there and add a discussion?

[fiery ledge]

first check if it doesnt exist yet....

[tame oriole]

hmm okay. do you know the official name of what i sent a picture of

?

so i can do an accurate search

"color presets"? maybe

[fiery ledge]

yeh, its a light more-info and the element seems to be ha-favorite-color-button

https://www.home-assistant.io/blog/2023/06/07/release-20236/#light-entity-dialog-improvements-favorite-colors

[tame oriole]

gotcha, favorite colors

[civic hinge]

I have seen some picture having a picture and in that different sensor data. How would I manage that? I would like to import a picture of a ventilation system and then show different fan speeds, temperatures etc. on that picture. The sensor data should not be place anywhere, but at exact positions in the picture. Can that be done in HA?

[fiery ledge]

picture-elements

[tame oriole]

what section do you think i should put it in?

[fiery ledge]

dashboard

[tame oriole]

ty

[civic hinge]

Thanks, I will take a look at it.

[fiery ledge]

check this https://community.home-assistant.io/t/zehnder-comfoconnect-component/82522/50?u=mariusthvdb

[tame oriole]

https://github.com/home-assistant/frontend/discussions/20125 done!

[fiery ledge]

you could add its a FR to set your own, and ad FR to the topic, might get a bit more trction that way

[proper geode]

Hi all. First time posting here.

I use to have a sticky media player bar at bottom of my mobile dashboard. For this i used card mod with:

card_mod: style: | :host { position: sticky; bottom: 10px; z-index: 4; }

Problem is it don't work on new sections view. ¿Does anyone know how to create sticky sections or sticky content inside a section?

Thanks in advance

[tame oriole]

FR = feature request?

[tribal galleon]

@tame oriole @fiery ledge I wonder if a card-mod theme can "get in there" and set the desired colors. Like creating the child elements or something like that.

[fiery ledge]

i was thinking customize..... Ive just edited (added) my first favorite color and this is on that light"light":{"favorite_colors":[{"color_temp_kelvin":2000},{"color_temp_kelvin":3512},{"color_temp_kelvin":5023},{"color_temp_kelvin":6535},{"rgb_color":[127,172,255]},{"rgb_color":[215,150,255]},{"rgb_color":[255,158,243]},{"rgb_color":[255,110,84]},{"hs_color":[358,50]},{"color_temp_kelvin":2135}]}}

its the only occurence of favorite_colors in the core.entity_registry, so its now set all of these defaults there, even when I only added 2

but it is not set in the states, so cant touch it there I am afraid

[tribal galleon]

Does that work for the entire light domain with the appropriate supported features or does that have to be applied to each entity individually?

[fiery ledge]

thats just the thing, it is per light

seems a very valid FR, to be able to set those favorites in a much user friendlier way, and be able to default your own colors. or theme them

for the time being, I guess it would be easy to hack the entity_registry and c&p those settings 😉

[tame oriole]

Yeah i have like dozens of lights

im not manually setting my favs on each one

crazy

a nice favorite editor with profiles would be nice

then you can pick your own and set your own

i was super confused when i setup all those colors then went to another room and was like "where are they?"

[kindred escarp]

is it possible to pass variables defined in button card to a Jinja template in card-mod? doesn't seem to be

[tacit cave]

you shouldn't need card mod for button card

can you post what you're trying to do?

[kindred escarp]

i'm trying to modify the CSS for a slider-card that I'm embeding inside button card. For example: ha-card.type-custom-slider-button-card . Can you modify those type of items without card-mod inside button card?

[tacit cave]

ah, you'd have to use template config card for that

otherwise you could make your own CSS slider

e.g.

https://github.com/Petro31/home-assistant-config/blob/6d1cc7d09fe15666ae1dc21b8daa88fad4419cad/lovelace/views/mood_lighting.yaml#L39

wait, that might not be it

no that's it

wait, no

Ha

i used a custom slider row, ignore me!

[kindred escarp]

yeah, you're right. I love button card but it's not going to work. i'll try and go down that route

i'm already using a forked version of the slider card that allows clicks and dragging. works great

https://github.com/lizsugar/slider-button-card

[kindred escarp]

Can template-card variables can be used inside card-mod ?

[tacit cave]

can you share the exact example please?

I understand what you're trying to do, but there's a good chance you don't actually need the variable in cardmod. What you're asking for is going to have odd repercussions even if it does allow it.

[kindred escarp]

Sure. I'm using buttons that control lights, sometimes they will have a curved border (border-radius) on the left and sometimes on the right. That CSS is set inside card-mod. So what I'm trying to do is templatize it as much as possible... For example, a card that needs the border-radius on the left I simply define a variable "left" that uses different values. I also need to modify the Background-color based on the light being on/off, but I got that working easily with a jinja template checking the state of the light.

[tacit cave]

If you take everything in style and treat it like a string in JS for the template card, you can use string replacements

which will work with variables

return `allyourjunk ${var[0]} more junk`;

e.g.

i.e. the entire style field

style: |
  [[[
    return `all your junk ${var[0]} mroe junk`;
  ]]]

[kindred escarp]

actually did something similar w/ button card and it worked great (soft of).. just ran into issues with the card being inside and weird flicking occurring. I'll try it again with template card though. thx!

[gusty glen]

Hello guys! Quick stupid question, I think I'm just lacking the correct term. I would like to have a card, that when clicked, opens a custom subcard with more entities that I configure just like a vertical stack. is there something in ha? I'm pretty sure there is, but I don't know what it's called ...

[vast crane]

What's built into HA are subviews. You set the navigation action on a button to go to that subview, and then you put whatever cards you want on that subview

There are custom cards I think that have more options like making popup dialogs if that's more your fancy.

[kindred escarp]

FYI, Figured out card-mod will accept any variable using the config.whatever method. The documentation mentions config.entity, but doesn't explicitly say that any other item will also work. So I just created a new value in my card, direction: and called it from card-mod ${config.direction} and it works!

[languid holly]

Hi all, new to the discord and pretty new to HA (1 month of tinkering and loving it). I noticed something with card-mod today where it doesn't seem to apply to an Android companion app dashboard when the dashboard is the first one loaded along with the app. For example, if the companion app is fully closed and not cached etc etc, and then I open the app, it shows the dashboard I have set to "default on this device" -- which is good, and correct! But no card-mod styles apply unless I reload the dash by navigating away from it and back. Am I missing something here?

[gusty glen]

Subviews are perfect, thank you very much karwosts!

[lyric prairie]

@shut robin regarding your message in #templates-archived the first thing that can help is to add the entity variable to the triggers_update key. That ensures the object is reloaded on each state change of that variable/entity

And second to prevent the code from working when the entity object is not rendered correctly due to the use of a variable you can change entity.state to states[variables.entity1].state

[golden mist]

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

[shut robin]

ah, i got it!

so i had the btn1 code within a custom field and had the trigger update within that btn1 code, but i moved it to be within the general template rather than the custom field

thanks for the help, this is a huge step!

[lyric prairie]

Ah couldn’t see that from the snippet. Makes sense though

[shut robin]

yeah, sorry, i didn't think the issue would be related to something outside the snippet - my bad

[shut robin]

hey guys, i'm working on a customisable card template using button-card and i've hit another issue

here's the code i have for it: https://gist.github.com/Opaque02/15c60ed676dc33acae5c0d90fb27bef5

the idea is that i can make a button with up to 3 extra entities and have stuff show for it, or in this case, have buttons that can be pressed to turn those entities on/off

i've made my btn1, btn2 and btn3 based off another template (it's basically all just styling) but sometimes i'll only want to use btn1 and btn2 without btn3, yet if i create btn3 it'll be placed onto my card-button even if i don't have it in the grid area, like so:

- grid-template-areas: '"n btn1" "s btn2" "i btn2"'

when i have that grid area, this is what see, when in reality i don't want that third button (i know it looks like minimalist cards, but i'm trying to make a version that'll eventually be different for my dashboard, and from my testing i think minimalist would work so don't want to change it out)

is there a way i can have btn3 not show at all and not be interactive? if i have the last bit of the grid area have a section for btn3, it'll be in the right alignment, but it'll still be interactable - even if i hide the icon and make the tap_action: none, you can still click on it and nothing will happen, whereas if i delete the code for btn3, it's not there at all and you can click through where btn3 would be? hopefully that makes sense, but happy to paste more code/images if not

[golden mist]

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

[spiral vale]

Hello I am using the plotly cards and wonder if it is possible to somehow combine the history graph with it or get something similair.
I would like to see at which temperature and for how long one of switches is on or off.

[flat condor]

I've got another question about the statistics graph card 😬 With the card mod I got the theme etc, but is there any way to force the y-axis to go to zero? It scales "automatically" so I've got a few that only show, say, the 80-90 percent range which greatly exaggerates the actual fluctuations visually ...

If not, I guess I'll have to give up and finally go plotly as well 🙂

[brittle jay]

is there a way to round the value of an entity in a tile card?

[tacit cave]

same way you round all entities

entity -> cog -> precision dropdown

if this is a yaml only entity without a unique_id, then you need to make a template sensor

[fiery ledge]

do we have a lokalise channel here? how to correct this button translation without writing a Frontend issue

[tacit cave]

zoek het uit

[fiery ledge]

hehe

[tacit cave]

hehe

took way to long to translate that

#devs_translations-archived

[fiery ledge]

right! i missed that completely, let me go and 'zoek het uit'

[scenic current]

Doing more work on my View Assist projects. I am storing things like title, message, images, etc in a custom sensor per display device. Can I use JS to identify the device (IP address?) and then have the view pull from that specific custom device? Can a custom button card show different content on two different devices with the correct JS?

[vast crane]

I think you may be able to achieve this with browser_mod, or the easier thing may be just use a different user per device?

[scenic current]

I was thinking more like a seperate dashboard per device rather than user. Maybe I should share one of the views I have to illustrate. WIll do in a bit. Jumping to a meeting 😦

[vast crane]

I understand that you want it to be per device, but what I'm saying is that there's nothing built in that will give you that. So you can either make a user per device and use the builtin conditional per-user logic, or you can go to try to use browser mod or similar.

[tacit cave]

user per device is easier

[scenic current]

Can you give me an example or point me to some docs for this? I'm all about easiest.

[vast crane]

Make one card per device, hide each behind a conditional card. set the condition card to show based on the user

condition card can be setup in the UI

[scenic current]

Oh I see what you've got going. That makes sense. Does not scale the best but luckily I only have a few views that would need this treatment.

Life is a lot simpler when you're only targeting one device.

[scenic current]

https://github.com/dinki/View-Assist/blob/main/Dashboard_Views/Info/info.yaml

Not to beat a dead horse but I think it would a lot easier if I can determine what my browser mod 'browser id' is and use it to determine which custom device is being used and assign that like I'm assigning the value in line 4 of the code above. Each device has it's own set of data to be used for that devices display if that makes sense.

https://github.com/dinki/View-Assist/wiki/Optional-Components#satellite-custom-device-configuration

I can determine the correct custom device to use based on the 'display_device' set as it can be used to determine the 'browser id' to use. I'm just not sure how to get the BM 'browser id' on the client side. Is that something that can be extracted using JS?

[tacit cave]

we gonna rehash the convo from the other day?

[scenic current]

about the values changing? I'm seeing that they aren't changing.

[tacit cave]

if they aren't, and you have the entity_id, what's the problem?

user_agent is an attribute on one of the sensors

iirc i'ts browserID

[thin mirage]

Hello, i have a question about the entity filter card. How can i define all entities that are device_class: battery and only be shown when state below 40?

[vast crane]

I thought I saw something like browser mod stores the ID in the window object, and I'm sure it's probably accessible with javascript, though I don't use it enough to say exactly. There's a big browser mod thread on the forums I'm sure using it for various JS templates has been discussed.

[tacit cave]

I thought it was done through user_agent via JS templates

and it varies via the card

it may do other things

[scenic current]

Browser User Agent sensor value ^^^

I'll check 'browserID' from JS

[tacit cave]

browserID is an attribute on the entity

not sure if it's available in the frontend

[scenic current]

I am not trying to complicate things but I think making multiple condition cards per user could end up being cumbersome too. I'm trying to be mindful to make this somewhat user friendly but despite my best efforts, and lack of a lot of skill, I may not be accomplishing that. I'm trying though.

[tacit cave]

apparently it's in windows.localStorage (it being the browser id, print it to console to see the contents)

[tacit cave]

browser_mod is not user friendly

making users per device is

[vast crane]

Other idea is just to make a dashboard per device, and then just pick that dashboard as the default for that device. Then you don't need any conditional cards.

[lyric prairie]

Or take a look at lovelace-state-switch

[scenic current]

https://i.imgur.com/Cg0i3YY.png

Image of the available identifiers. have the id which I have been using to ensure I switch to the correct view on the correct device. Also seeing a 'browserID'. This is all HA server side stuff.

How do I pull this information from the remote/client device and then compare. I see you are referencing windows.localStorage . Is that where I would find the browser ID for that device and then could match to what's in the entity attributes?

I'm already doing somethings similar for determining the called device display and device media player, just need to be able to determine which device is accessing the web dashboards to get it to pull the correct data (like song playing) and display it correctly.

[scenic current]

Can I try your patience as to how I can print this to console? I can do this on the android device using developer tools or similar?

I see it now.
browser_mod-brower-id as key and Value is what I need

[tacit cave]

Console.log(....) in your JS code

[scenic current]

okay. so then it will be a matter of calling that and getting just that value using the key, THEN I can use it in a similar way to what I'm doing to set the variable which will point things where they need to be pointed.

var id = console.log("browser_mod-browser-id");

but then I look up console.log and it says it is used for writing to log, I'm trying to read from it.

https://www.w3schools.com/jsref/met_console_log.asp

Thanks for your patience. This is what I was hoping for.

[scenic current]

entity: input_boolean.lr_tablet_mic
variables:
  var_browserid: '[[[ return localStorage.getItem("browser_mod-browser-id"); ]]]'
  var_assistsat_entity: sensor.assistsat_viewlr

Is this the proper way to declare?

    [[[
      var message = states[variables.var_browserid]; 
      return `${message}`
    ]]]

Is this the proper way to retrieve? I'm getting undeclared

[kindred escarp]

Just saw this!... Built a custom music player with an LCARS theme with a bunch of different cards. The Select menu picks the speaker you want to control in the house. I have a bunch of different tablets around the house and they each have their own input_select.menu menu to have a different speaker chosen to control

[tacit cave]

use F12 to see if there's any errors. Pretty sure the code should be window.localStorage...

[scenic current]

I'm definitely able to pull out the value using
var id = localStorage.getItem("browser_mod-browser-id");

I put it in with some other stuff I had and it displayed the matching value I see in the BM sensor data.

The question I had was trying to extend that and I must be doing something wrong in the declaration and/or the call. I'm assuming that those vars at the top of the card are globals throughout the card. I think I may just have my syntax goofy.

[blissful parrot]

The latest mushroom cards adds support for sections. In its release notes it has this example image

Which card is the top card? It’s tempting to think it’s the light card but I cannot see any way to add that button for scenes?

[hallow crater]

Hi there 🙂 Please, caanot figure it out: I have some heating (Netatmo) with valvels. Working well. I can add Thermostat Card to my dashboard. Then I'm able to display modes: Auto (default) and Heat. But I would like to have Auto and Disabled (off). Any clue? THanx a lot!!!

[lyric prairie]

It's not a button for scenes but a truncated color selector

This config will give the card:

type: custom:mushroom-light-card
entity: light.hue_go_rechts
use_light_color: false
show_color_control: true
layout: horizontal
collapsible_controls: true
show_color_temp_control: false
show_brightness_control: true

That is the behavior in horizontal lay-out if more than 1 controls are selected

[scenic current]

https://pastebin.com/Mjf1pwL4

Here's the code I'm trying. See line 4 for the definition I'm trying to make and then line 87 where I am printing it to the screen. Can someone spot my error?

[lyric prairie]

Do you want to access the state?

Right now you selecting the full entity object

[scenic current]

That's the part I guess I don't understand. I'm trying to modify things I've copied and changed in the past. Am I not just defining a variable in the beginning? Maybe the problem is the way I am trying to assign it at the bottom? This isn't a HA entity so it doesn't have a state right?

does it have a state I guess is what I mean

[lyric prairie]

So it isn't part of the states object?

[scenic current]

I'm pulling that value from localStorage and assigning to variable browserid. How do I access that variable after I assign it?

I got it 🙂

don't need states. doh

[lyric prairie]

That is what confused me. states is the reference to the full states object of HA

Where the keys are entity_ids and the value the entity object

variables is its' own object

[cloud oriole]

Hmmmm Can I not specify a friendly name from an attribute in an entity list like:

  - entity: sensor.solcast_pv_forecast_forecast_day_3
    name: {{ state_attr('sensor.solcast_pv_forecast_forecast_day_3','Dayname') }}

[lyric prairie]

In what card are you trying to do that?

[cloud oriole]

just the normal entities one

[lyric prairie]

That doesn’t support templates

[golden mist]

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

[cloud oriole]

ah - is there one that does?

[golden mirage]

custom-button-card

[cloud oriole]

hmmmm ok - I'll take a looksee

[lyric prairie]

Just add https://github.com/thomasloven/lovelace-template-entity-row so you can use templates within the entities card

[glass crest]

short of including a date/timestamp in the notification itself, is it possible to have persistent notificatiosn show the actual date/time instead of "7 minutes ago"?

[cloud oriole]

hmmm - I can't quite figure out the syntax to get the attribute in the name field..... Any hints?

I thought this might do it:

  - type: custom:template-entity-row
    entity: sensor.solcast_pv_forecast_forecast_day_3
    name: {{ state_attr("sensor.solcast_pv_forecast_forecast_day_3","Dayname") }}

[lyric prairie]

The template needs to be quoted:

  - type: custom:template-entity-row
    entity: sensor.solcast_pv_forecast_forecast_day_3
    name: "{{ state_attr('sensor.solcast_pv_forecast_forecast_day_3','Dayname') }}"

The inside quotes need to be different as the outside ones

[cloud oriole]

ahhhh

when I hit save though, it changes it to:

  - type: custom:template-entity-row
    entity: sensor.solcast_pv_forecast_forecast_day_3
    name: '{{ state_attr(''sensor.solcast_pv_forecast_forecast_day_3'',''Dayname'') }}'

but it looks like its still showing name from the entity, and not the template.

[golden mist]

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

[cloud oriole]

produces:

Ahhhhhhhhh

its case sensitive 😄

[lyric prairie]

Yes, almost everything in code/templates is case sensitive

[cloud oriole]

ok - I think I've got it now..... Just trying to figure out how to get the state to show kWh on the end instead of blank lol

Ah ha! Perfect now 🙂

@lyric prairie thanks for the help. That's spot on now

[meager goblet]

i installed advanced ssh and it won’t start, something about apparmor? how do i get around that

[cloud oriole]

try #add-ons-archived - as that's more related

[meager goblet]

Ok good idea

[next bough]

Hello together... I have a small issue. I started yesterday to renew my dashoard and build a navigation with the sidebar-card. Later I get some trouble with my floor plan (build with config-template-card). Now when I turn on the light in a room the "brightness" is cutted in the middle of the screen. When I remove die sidebar-card everything is OK. There were already two open issues at github and closed without any information what was the reason for it. (https://github.com/DBuit/sidebar-card/issues/98 / https://github.com/DBuit/sidebar-card/issues/97) - Can maybe someone point me in the right direction 😄

[golden mirage]

https://paste.mozilla.org/ieNUcssO

Why can't I use the same variables for two properties icon and color.
Currently I am using 2 separate variables for the icon and color properties

[tacit cave]

your snippit doesn't exist

[tacit cave]

No one in either of those issues explicitly said "when I add the sidebar, this happens, when I remove it, it does not". I also suggest trying to simplify this down for DBuit into something small that he can setup to verify that it's his card or not. It could be a floorplan issue.

[next bough]

One guy sais: "When i deactivate the sidebar all is fine."

Anyway - when I change the width from the Sidebar the shadow, line, cut whatever you it call its moving.... it looks like a overlay from the sidebar

[tacit cave]

it could also be a margin set on the floorplan layers

[deep jasper]

I'm wondering why 'kitchen' has its own toggle in this card, and if i can add other headers with toggles to it.

[vast crane]

It's just a basic feature of entities card:
https://www.home-assistant.io/dashboards/entities/#show_header_toggle

[deep jasper]

ahh i see so it isnt controlling lights.kitchen it is just controlling all of the defined entities

[tribal galleon]

Variables are limited to their scope. A variable set in icon cannot be "seen" by color. If you're using the custom:button-card, it has the ability to define variables that can be accessed throughout the card.

[tribal galleon]

petro do you think the z-index could be set (with card-mod) for one or both of those cards to adjust for the layer that is overlapping?

[tacit cave]

ya

I've done it, but I don't have that card anymore

you just gotta find all the things you want to mod

[tribal galleon]

I haven't used either card but I've used z-index and absolute positioning to make an indicator appear on top of the header.

[tribal galleon]

@final atlas saw your question in templates. The error you're getting is because you don't have the templates for the custom:button-card defined in your dashboard's YAML. https://github.com/custom-cards/button-card#configuration-templates
These templates are not the same as Jinja templates but rather a way to re-use your code.

[final atlas]

where is this: Define your config template in the main lovelace configuration and then use it in your button-card.

where is the lovelace config file? I tried putting it at the top of the dashboard in Yaml and it didn't like that. The various lovely smiles that are in the dot storage do not look like the right format at all to add this template

[sweet bolt]

Hello can i save my custom card for use later or another place

i don't want to copy paste again and again

[scenic current]

{{ (expand('group.assist_satellites') | selectattr('attributes.mic_device', 'eq',states('sensor.assist_last_called')) | map(attribute='attributes.mediaplayer_device') | list| first) }}

Can someone tell me how to translate this to JS? oooffff

I'm using @tribal galleon github guide but I don't think it covers enough for me to translate this.

[tribal galleon]

I was actually looking into something similar recently. With the Jinja templates, the functions like expand, list, and first are readily accessible. The same cannot be said for JS (or at least I haven't found it yet.) I imagine the function would have to be written, probably with a FOR loop, and then a sort algorithm added. I'll have to look into it a bit more to figure it out but for the time being it is probably out of the scope for the guide.

[vast crane]

maybe this?

hass.states['group.assist_satellites'].attributes.entity_id
  .filter((eid) => hass.states[eid].attributes.mic_device === hass.states['sensor.assist_last_called'].state)
  .map((eid) => hass.states[eid].attributes.mediaplayer_device)[0]

[warped marten]

I have a mqtt sensor, giving me a timestamp.
Now in a room-card in info_entities I want to display the date and time. I've tried this:

info_entities:
  - entitity: timestamp_entity:
    format: datetime

But I always get the timestamp value as a number. What's going wrong?

[scenic current]

Thanks for this. I will try it in a bit

[upbeat harbor]

Does anyone know of a way to make a gauge card perform an action on hold? Or have a better idea for this? I'm using gauges to remind me when to clean the dishwasher, refill the jetdry, and clean the washing machine. it'd be nice to not have to have a separate reset button if possible.

In my image here, I have my original setup, which I just thought looked clunky and not very visual, and my new setup below. I was going to add little reset buttons below the meters, but it'd be nice to just be able to tap and hold them to reset. Thanks!

[scenic current]

Brilliant! Worked first try!

hass.states['group.assist_satellites'].attributes.entity_id
  .filter((eid) => hass.states[eid].attributes.mic_device === hass.states['sensor.assist_last_called'].state)
  .map((eid) => hass.states[eid].attributes.mediaplayer_device)[0]

@vast crane Can this be modifiedto show the name of the member of group.assist_satellites? This does what I need but could also use that entity name as well. Preferably as a separate bit of code.

[vast crane]

Well we can get the entity id of the first group member that meets that criteria with this:

const entityId = hass.states['group.assist_satellites'].attributes.entity_id
  .find((eid) => hass.states[eid].attributes.mic_device === hass.states['sensor.assist_last_called'].state)

if it has a friendly_name attribute you can just look that up with the entityId (and also the mediaplayer_device in the same way)

const mediaplayer = hass.states[entityId].attributes.mediaplayer_device;
const name = hass.states[entityId].attributes.friendly_name;

[scenic current]

Yep. This is what I needed. Thanks again. I keep saying it but I am getting even closer to having this put together.

[tribal galleon]

Does anyone know of a way to make a

[golden mirage]

In Gauges dont have hold action.

[final atlas]

My garage door has a toggle to open and close. Thats one entity. There is a second entity of a switch that shows the door open or closed. Right now on my dashboard I have two buttons one the simply shows the state of the door. And the other one is to toggle the door open and closed. Is there a way to merge those two together somehow?

[shut robin]

hey guys, i'm trying to make something with button-card but have hit a bit of a snag. i'm struggling with positioning things in the grid. i've got some custom fields (btn1, btn2 and btn3), and originally had the following for my grid-template-areas:

- grid-template-areas: '"n btn1" "s btn2" "i btn3"'

and it looks like the first screenshot with the small buttons all lined up on the right. the issue though is i sometimes only want 2 buttons, but since i'm using templates i can't get rid of the custom field, so i thought i'd change the grid-template-areas to not include btn3 and to have btn2 be longer instead, like so:

- grid-template-areas: '"n btn1" "s btn2" "i btn2"'

however instead of not showing btn3, it still shows it but breaks the positioning of the card, like in the second screenshot

does anyone know of a way to have this work so i can keep my templates with all 3 btn fields but not always show all 3? my relevant code for the button-card template i have is here, though it doesn't include things like the styles - if you need that or any other info, let me know and i can get it: https://gist.github.com/Opaque02/15c60ed676dc33acae5c0d90fb27bef5

[vast crane]

Yes, you want to create a template cover.
https://www.home-assistant.io/integrations/cover.template/

[sweet bolt]

how can i make this 4 buttons make side by side and title top of it

[final atlas]

the description of the cover sounds like exactly what I need. I see that you put yaml in the configuration. But it has hardcoded entity names. It seems in the example. sensor.garage_door for example. When I need to make one of these for each of the doors and put the appropriate sensors in this? Then, later on in the document, it then says to go ahead and create actual card on the dashboard with another set of examples that looks real similar to the one that's in the config file. So do you need both of those? Do I need to set up one of these for each one of the doors do I? I'm confused. It sure sounds like the great thing but I have no idea how the heck you use it. I'm sorry. When people write these things they assume people know a lot and unfortunately, I know very little.

does this get put in configuration.Yaml ? It looks like it's the same thing that you put in the dashboard. I'm looking for YouTube or something on this. I'm just thoroughly confused. What else is new?

[tribal galleon]

When you define a custom_field but do not define an area for it to be displayed, the card will show it anyways, usually in the bottom right. Something that I think might work is to
a. define your entity1-4 variables in the template but set them as null. (Anything you put in the card will override these settings, so defining varaibles1-3 in the card will return those entities, but 4 will still be null.)
b. Configure something like this into each of your btn fields:

styles:
  card:
    - display: '[[[ if (variables.entityX == null) return "none" ]]]'```(This syntax may not be correct; I'm just kinda throwing it together.)
Since you're using a modified version of the Minimalist UI's Room Card, looking at the templates the dev used could be helpful. Take a look [here](<https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_room/#usage>).

[shut robin]

ah, i didn't know about the display: option for styles - that looks like it might work, but i've hit another issue

since the grid area is set to grid-template-areas: '"n btn1" "s btn2" "i btn3"', the bottom right of the card where the btn3 is is still interactable - so if btn3 is set to display: none, it doesn't show, but if you tap inside the area of btn3, it doesn't do anything - ideally though i'd like to make it so if you tap in that area it's... "not interactable" i guess, so tapping the btn3 area would just activate the whole card like normal

[tribal galleon]

~~You should be able to apply the same concept for the tap_action. If null return none, else return what you want it to do.~~Disregard. I read your message wrong. But, I think I have a fix for that.
You might consider reversing the order of your buttons. Have btn1 at the bottom and btn3 at the top. From a UI perspective, this might have a better look.

In fact, looking at the template mentioned above, that's basically what the dev did: yaml tap_action: action: "[[[ return variables?.tap_action?.action ? variables.tap_action.action : 'none'; ]]]"(I'm not sure how exactly this works though...)

So, these are not the same: yaml tap_action: none``````yaml tap_action: action: noneThe first example will register the tap_action and show the mdc-ripple-color effect while the second example does not. Note the different cursor in the screenshot.

[shut robin]

ah ha, you're a genius! thank you so much! this has solved so many issues! super weird that the tap actions are different though!

[vast crane]

The hardcoded sensor.garage_door in the example is just an example, you can replace it with the names of your sensors. Yes I would expect you might want to create one cover per garage door. Each cover you create in this way creates a new cover.name entity that you can then add to your frontend cards, and they will be treated like an integrated garage door sensor/controller.

I don't see any discussion on this page of creating cards. All the examples I see on this page are what you would add to your configuration.yaml to create template cover entities.

[sweet bolt]

how can i make my image fit at the center

for background

views:
  - title: Home
    theme: ios-dark-mode
    background: url('/local/homekit_wallpapers/hk-House.jpg')
    cards: []

[golden mist]

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

[green raft]

Feeling the urge to re-do my UX. Hit me with your best mobile-first UX designs! Also, are there any simple styled room cards similar to the UI-Minimalist button cards, but easier to configure?

[golden mirage]

can you are share full code of this card

[golden mirage]

button, tile card of HASS

[green raft]

Was hoping for something with a little more configurability. I guess I'm more after something like the mushroom template card.

Or perhaps the picture glance card, but with an MDI icon instead.

[shut robin]

sure, it's a lot of code but here it is:

https://gist.github.com/Opaque02/fd41706bd20c321b82175ea899bd9f36

this is for the raw configuration editor and is the templates for the cards

once you've got that, this is the code for the whole card:

https://gist.github.com/Opaque02/d2a4ab7d3e461919aaacebdcc7a2427b

for the card, you can edit the entities using the entities variables. once done it should look like this screenshot

any questions, let me know

[golden mirage]

many thanks

[shut robin]

all good! if it does work or something let me know, but hopefully that's all the code for it - let me know if you have any ideas on how to make the icons spaced out more 🙂

[shut robin]

i'm not quite sure i'm following what you mean here

[golden mirage]

i found solution. Thank

[shut robin]

to get the card working?

[vernal abyss]

Hi there, anyone here that could assist me with Mini Graph Card?

I made this card, I told it to show 168 hours (7 days) but what I wanted was it to show the energy consumption of the last 7 days (or rather the last 6 days and the current day) instead of accumulating/adding the values of the last days. Also, I want the big number on top to show the kWh of the current day (or even better the kWh of the last 24h), currently that number also shows the accumulated kWh value of 7 days. Could anyone assist me with changing the yaml?

type: custom:mini-graph-card
entities:
  - entity: sensor.plug_hpe_max_zusammenfassung_geliefert
name: Stromverbrauch HPE-MAX
hours_to_show: 168
aggregate_func: max
group_by: date
show:
  graph: bar

[lyric prairie]

Mini graph card is not the most dynamic card for that purpose

If you want something like this you could use apexcharts

[vernal abyss]

hm, okay, what do the dofferent colors mean in your case?

and could you maybe give me a configuration example for that one?

[lyric prairie]

You can find the code here under answer -> option 2

The colors are based on a set threshold

[vernal abyss]

is it possible to disable the number label on the bar?

[lyric prairie]

sure, remove datalabels: true from the config

[golden mirage]

Yep

[shut robin]

nice - there's a bunch of stuff you can play around with for colour options too if you want

though i still haven't been able to make the small buttons spread out evenly and i can't figure out why

[golden mirage]

• margin: >-
  [[[ if (variables.position == 1) return "0px 0px 6px 0px"; else if
  (variables.position == 2) return "15px 0px 6px 0px"; else if
  (variables.position == 3) return "6px 0px 0px 0px;" ]]]

Manual 😂

[wise parrot]

I'm trying to make a dashboard for my tablet using the new drag an drop. I want to have 4 columns so it fits my tablet but when I'm done with the ui it only shows 3 columns and the and it doesn't look as I want it to... Is there a way to scale it so it fits my tablet? ( I know about the layout card but I want to drag and drop) please tag me when you answer to this post

[shut robin]

i guess that works, but it'd be nice if there was an automatic way to make it work... surely there's got to be a way somehow

[shut robin]

i fixed it! on line 105 there's this line of code:
- grid-template-rows: min-content min-content 1fr;
change it to this:
- grid-template-rows: 27.5% auto 27.5%;
you'll now end up with 3 perfectly spaced icons along the right 🙂

[lyric prairie]

The amount of columns is based on the available screen width. The sections dashboard is just in its experimental phase and will add features with future releases. Setting column width is a much asked feature so maybe it will come.

You can follow everything and add feature request on the forum post
https://community.home-assistant.io/t/a-home-approved-dashboard-chapter-1-drag-and-drop-sections-view-and-a-new-grid-system-design/

[wise parrot]

Okey thanks!

[sweet bolt]

why there is space here even this is single object

[tacit cave]

what container are you using for those?

[sweet bolt]

manual

not container

[tacit cave]

No, I mean what are you putting those cards in?

vertical stack? horiztonal stack? grid? just in the view?

[sweet bolt]

just view

[sweet bolt]

when i put in stack

let me send picture

it becomes this

[tacit cave]

when I put the thermostat card in a view it covers the whole column

are you sure you're not putting this into a horizontal stack?

[tacit cave]

yes that's a custom card

[sweet bolt]

now i putted in horizontal and becomes this

[tacit cave]

can you show the original configuration for this picture

[sweet bolt]

just created 2 manual card from add card

in new dashboard

[tacit cave]

Yeah you're still using in-stack

[sweet bolt]

stack in card is this

this has 2 items inside of it

1- chart
2- text

[tacit cave]

Yes, but the problem is with the in-stack card

which is the card that's not sizing itself

[sweet bolt]

ohh

i should use different type of card i guess

[tacit cave]

Or just remove your card-mod config for it

you set the width to 230px

[sweet bolt]

yea

[tacit cave]

well that's why it's not filling the full column...

[sweet bolt]

i just thought control panel will resize to width

[tacit cave]

not if you override it

[tacit cave]

Yes, but you do this:

[sweet bolt]

yes im setting the transparent background's box size

[tacit cave]

no you're setting the height and width of the card

[sweet bolt]

hm