frontend-archived

[hazy summit]

Do you have a Roku device or Roku enabled TV? I'd love to have some more eyes on my upcoming Roku support for the Firemote card. https://github.com/PRProd/HA-Firemote/discussions/275

[tacit cave]

it's just a png of the remote w/ clickable buttons?

[umbral harness]

nothing wrong with that. pretty popular for hd receivers

[hazy summit]

Oh no! It's not an image at all! The whole card is built with html/css and fully customizable!

[hard blaze]

Hi 🙂
I`m trying to make a dashboard for my nest hub, and works well.. except for media player.
When i start playing music, it wont show the image of the album.. only a picture of the nesthub with a HA background.. any ideas on a fix? 🙂

[ornate topaz]

Hey 🙂 im currently using minimalistui card_vertical_button. Is there a way to find out what are the possible color options? using 'red' works but using 'aliceblue' does not work

[hushed agate]

I would guess that this will accept any css color

https://www.w3.org/wiki/CSS/Properties/color/keywords

[ornate topaz]

doesn't seem so, the template is using ' - color: "[[[ return rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1); ]]]"' where variables.ulm_card_vertical_button_color is the input color

[hushed agate]

Alternatively it may also accept the rgb as hex code

[tacit cave]

minimalist UI uses all custom button cards

so it definitely accepts all css colors, hex, rgb, and rgba values

[hazy summit]

aliceblue = #f0f8ff

[dark dirge]

I always find it amusing that the "minimalist" UI uses the most complex card

[tacit cave]

hehe, its visually minimalist 🤣

yamlly its maximalist

note to self, spellcheck doesn't work w/ made up words

[dark dirge]

dictionary requests go to the forum

[ornate topaz]

the issue im facing is that this works

- type: 'custom:button-card'
  template: card_vertical_button
  entity: sensor.day_of_week
  name: Mon
  icon: mdi:leaf
  show_last_changed: false
  color_type: card
  tap_action:
    action: none
  variables:
    ulm_card_vertical_button_state: "Monday"
    ulm_card_vertical_button_color: red

but changing the color to anything apart from red,blue,yellow,purple,and 2 or 3 others does not work

[scenic current]

I'd love to use an old tablet I have for a HA information display. I'd like to create a dashboard with a page with my local weather station, a page for a clock, a page showing all my security cameras, maybe a few other things too. What I'd really like to do is have that dashboard auto advance to the next page after a set amount of time (10 seconds?) and when it hits the last page to go back to the first and continue that cycle. Basically a slideshow of HA sensors.

Is this possible?

[lyric prairie]

You will need to check the theme file, as it are references to color variables defined in the theme

[safe sage]

Does a "export" of the default HA theme exist ?

[zenith stag]

@ornate topaz if you have a look at the cart template you see that it accepts the colors are defined using rgb from the theme. And red is most probably one of them. Aliceblue is very specific and therefore not in the theme.
https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_vertical_button/#usage

      styles:
        icon:
          - color: "[[[ return `rgba(var(--color-${variables.ulm_card_vertical_button_color}), 1)`; ]]]"

[hard blaze]

@zenith stag your team, is based on the UI Lovelace? It looks really great. Maby I will try it for my tablet view!

[golden mist]

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

[zenith stag]

You could say that, yes. At least, I started off by customising some UI Minimalist cards. But I pretty soon moved away from Minimalist and made my own cards with inspiration from UI design found on the internet 🙂

[hard blaze]

Oh ok 🙂

[gloomy iris]

So, I got .nameworking but nothing else 😄 .
But how do I change .entites.no-header and .entitesitself?

"card_mod": {
  "style": {
    ".entities": {
      "$": ".no-header { padding: 0px 0px 0px }",
      ".entity": {
        "$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
      }
    }
  }
},

Also tried:

"card_mod": {
  "style": {
    ".entities.no-header": {
      "$": "{padding-top: 0px}",
    },
    ".entities": {
      "$": "{padding: 0px 0px 0px}",
      ".entity": {
        "$": ".name { text-overflow: unset !important; white-space: unset !important; margin-bottom: 0px; padding: 0px; display: flex }",
      }
    }
  }
},

[summer mist]

I'm trying to graph some power sensors in the history-graph, and most of them are in units of "kW", but one is in unit of "W", and that's resulting in two diffrent graphs. How can I get them under one graph?

[mental wraith]

oh I'm here for card-mod as well... installed it via hacs - it's in /homeassistant/www/community/lovelace-card-mod/card-mod.js but.... it doesn't get loaded or I don't know ... I've tried adding extra_module_url as - /local/card-mod.js and with - /homeassistant/www/community/lovelace-card-mod/card-mod.js and /hacsfiles/lovelace-card-mod/card-mod.js - no joy... doesn't want to work

[tacit cave]

change the units to kW

[summer mist]

How? make a template sensor out of the "W" one?

[tacit cave]

literally just change the UOM on the entity

[summer mist]

there ought to be a way to tell the history-graph that kW and W are the same units, one just being 1000 of the other

[tacit cave]

there is 😉

[summer mist]

how?

[tacit cave]

my man, here, I'll take a picture

er, above the arrow

[summer mist]

hmm, I did that.. the unit changed.. but the number didn't...

so 2000 W is now 2000 kW

[tacit cave]

click update

[summer mist]

it looks fine here:

But in the history-graph, the number didn't change..

[tacit cave]

refresh your page

[summer mist]

I did

[tacit cave]

clear your cache and refresh the page

[summer mist]

still the same

It looks like maybe new data is /1000, but everything older retains the number at W

[tacit cave]

Not sure

works for me, but then again all my units where the same from the start

[summer mist]

stupid history-graph

[summer mist]

Is there a way to change the label/name of a badge?

[gloomy iris]

Moving this to the card_mod thread in thhe community.
Tomorrow I need to test if all the hierarchy can be omitted by doing something like

"card_mod": {
  "style": {
    ".": "entities {}",
    ".": "entities.no-header{}",
    ".": "entities.entity.name{}",
    }
}

So basically just starting each div with ".":
Probably total nonsense 🫣

[halcyon mantle]

I checked the docs and searched on here and the forum, but still coming up empty handed. Is it possible with the new thermostat card to have the modes and fan speed available as on the default more-info climate dialogue?

[golden mist]

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

[tall dragon]

I'm wondering what approach people usually take to get nice 3D diagrams, because I found an approach but I'm curious as to whether it's the easiest option

the main impression I get is that 3D modelling is still hard, even when it's dumbed down to a large degree in an application specifically for doing house floor plans

part of me wants to throw in the towel and use Blender directly but I know that's only going to make life even harder still

[sturdy bough]

hi guys
my climate (meross MTS200b) has 2 presets (auto, custom) that have no icons, only a dot.
is there a way to assign an icon to them?

[fiery ledge]

not yet, 'they' seem to be working on it for some future day..

you can however use another card and set your own

[kindred dirge]

Is there a way to create a list that auto-sorts depending on the value of a sensor?
I'd want to create a list with the lowest battery percentage of devices on top so I can prepare to change them whenever possible and order batteries ahead of time.

So far I did find "Battery Note" and a Blueprint notification, but I'd also want to try and build a list for them.

[rocky hinge]

how would i reverse the meters?
https://i.imgur.com/ZWWJyDH.png

as solar panels create negative measures...Would love to make these meters go higher when they go into minus.

[sturdy bough]

is there a way to, in an horizontal-card, divide the space between 2 entities in an uneven way?
i want the Ambilight to be as small as possible (like a custom button) and the rest of the row to be used my the mini-media-player card. Not 50/50%

[tacit cave]

IIRC the custom layout card can do that

[atomic glacier]

@kindred dirge https://github.com/thomasloven/lovelace-auto-entities the best 💯

[hard blaze]

Hi.
is it possible to make a background image fit inside a button card?
Or should i crop it in photoshop?

My car is missing its front

[atomic glacier]

@hard blazeresize it, may have to do a couple tries to get a good thumbnail image. 🫡 I use Paint.net, free, easy and effective ☑️

[hard blaze]

ty. was hoping i could do it with yaml, as i want it to get larger if i use full size cards 🙂 but ok! thanks

[atomic glacier]

Just make one for an icon size and keep the other for the bigger stuff 👍

[tacit cave]

it should resize, what card are you using?

[hard blaze]

custom:button card

want to make a custom charging / vehicle card, and was hoping that background image would re-size

[tribal galleon]

Along with @atomic glacier's suggestion, check out the battery-state card. Link and screenshot [here](#frontend-archived message).

[vast crane]

Do you want contain instead of cover ?

[hard blaze]

contain worked, thank you @vast crane

perfect 🙂 thank you!

[warped marten]

On an entity card, when I click on a temperature entity, I get a history graph.
Can I define the history time frame? Currently only 24 hours are displayed.

[vast crane]

That's the more-info popup I believe you are referring to. The time range is not customizable (maybe with some custom plugin?)

[vocal gale]

I'm tinkering with my layouts and have something I can't quite figure out. I have a wide banner card that MUST span the entire top of my dashboard, portrait or landscape. It is a Webpage card.

It looks god when it's a panel layout, but then I don't get any extra cards, and a vertical stack for the entire layout would limit me. Is there anything else I can do to ensure the very first card is max width and I dont care what happens to the rest? I do have layout-card installed.

If I do layout card grid style, it is a good width but then my embedded webpage has a lot of empty whitespace because it tries to make each card a square

[hard blaze]

@zenith stag you alive buddy? 😛

[vast crane]

There's nothing built-in that does that. You could do something with stacks-in-stacks on the panel card, like a vstack with iframe at the top, and the second card in the vstack is a horizontal stack with 3 columns, and than in those columns you can add more vertical stacks.
Maybe someone knows a custom view that you can install that does what you're looking for.

[hard blaze]

I am working on that card we made.. just changed it over to a vehicle card.. you able to help out with that grid thing?

never min. i might actually have figured it out 🙂

[zenith stag]

Panel mode and the custom layout card can sort you out. Just prepare do use some yaml. Easy though. You can create your cards visually in another dashboard and then just copy and paste the yaml into the final one. Whatever works best for you

[vocal gale]

thats exactly what I'm looking for, care to share your yaml for the header part?

I'm comfy with yaml, been doing it for years but I'm new to HA

[zenith stag]

Choose panel mode, create a manual card, and paste this:

[golden mist]

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

[vocal gale]

oh yeah thats exactly what I wanted here

tysm

[warped marten]

I've read about "animated beckground" but cannot find it in HACS. Is this gone?

[tribal galleon]

For the animated background, I use lovelace-animated-background.
Add this repository to HACS and then you should be able to install it without any issues: https://github.com/dreimer1986/lovelace-animated-background . IIRC, I did not do Step 2 in the Installation Method 2: HACS instructions. For step 3, copy the example shown and place it at the beginning yaml of your dashboard when editing in the Raw Editor.
I have a collection of MP4 videos downloaded from https://mixkit.co/. They need to go somewhere in the /config/www/ folder; the path to define them will be /local/whatever_here.
Then, to acutally get the animations to appear on you dashboard, you need to find the beginning of the view that you want to add the animation and add animated_background: weather. Something like this: ```yaml

• path: living-room
  theme: Derek Dark Theme
  animated_background: weather
  type: panel
  icon: mdi:sofa```It is kind of a pain in the butt to get working but looks cool once complete. Just take your time and make sure you follow each of the steps. (Also, a word of caution, be careful in the Raw Editor and don't go messing with stuff you don't know what it does. You can mess things up in there.)
  I'm (slowly) working on being able to have the backgrounds change depending on holidays that I have defined. Right now, most of my videos are smoke-related and the integration will change between them automatically.

@zenith stag Can you tell me what the &ref_0 and *ref_0 are in your code above and how they're used? By the looks of it, it seems like inline templates basically.

[warped marten]

@tribal galleon Thx, the hint with adding it to the repository will help, I hope. I've tried to add it via UI, but it was not found. I Git I already read the docs.

[young ice]

I'm trying to use the new style thermostat card and for some reason the "Climate preset modes" feature in icons mode just shows a dot for each preset mode. According to the docs there should be a house for home mode, etc. Not sure if I am doing something wrong, but having just a dot for each preset mode makes it impossible to know what mode the thermostat is in

the icons for the HVAC modes work fine, it's just the preset modes (home, away, etc) that all show up as dots

going to try starting Home Assistant in safe mode to eliminate any of that stuff from being the cause, but I'll be surprised if it is

yep, even in safe mode, my preset modes with the new thermostat card are all just white dots

[zenith stag]

they are yaml anchors to repeat the styling of the first card: - height: 100%

you can use them to repeat whatever content on the same page. As a quicker alternative to using card templates

[timid moss]

I want to change the color of the icon in a custom:button-card when the attribute hvac_action is "heating". I tried using this, but it evaluates to true if I type anything between the quotes

          state:
            - operator: template
              value: >
                [[[
                  return states['climate.basement_thermostat'].attributes
                  && (states['climate.basement_thermostat'].attributes.hvac_action = "SOmeThingClearlyWrong")
                ]]]
              styles:
                icon:
                  - color: gold

[simple dagger]

any advice on how can i integrate more than one entity on this button please? i need to add a sensor like: sensor.cisterna_power

- type: custom:button-card entity: switch_cisterna name: A icon: mdi:home-thermometer template: - icon_mdi

that's in my lovelace ui, i tried using
entities: -switch_cisterna -sensor.cisterna_power

also tried tap_action and hold_action but it doesn't work

[zenith stag]

We need more info on what your goal is and what is should look like. There are many ways to add data in the card. You can add as many values as you'd like, wherever you like. You can add other card and buttons. And you can designate the tap and hold actions to different roles.

[cursive rover]

I would like to see how much instantaneous energy a certain switch is consuming.
On this screenshot of my dashboard, each button is a "switch", and below every button I would like to see the instantaneous consumption
the entity for the consumption is sensor.switchname_power

[zenith stag]

Do you mean inside the buttons? Below the buttons you don't really have much space to show anything 🙂
Easiest would be to add a Label with the info you want to show. I assume your current buttons are using Icon and Name. So that leaves you with State and Label.

[cursive rover]

even inside the button would be great

[cursive rover]

that's the code of the button, honestly i lost like 3 hours trying to get it works

- type: custom:button-card entity: switch_cisterna name: Cisterna icon: mdi:water-boiler template: - icon_mdi

can you show me an example please? just to understand how can i add it

[zenith stag]

that's not really the code of the button, the code is inside the icon_mdi template 🙂 So to make any changes, you need to work in that

[cursive rover]

oh ok!

[golden mist]

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

[cursive rover]

should be this right?

[zenith stag]

yes thats it. I would duplicate it and rename so you don't mess up the original 🙂

apoart from actually adding the label by setting it to show_label: true, and adding a template to show your desired data/state, you also need to add it in the cards grid. The end result should look something like this:

    styles:
      grid:
        - grid-template-areas: |
            "i     c"
            "n     n"
            "s     s"
            "l     l"
        - grid-template-columns: repeat(2, 1fr)
        - grid-template-rows: auto repeat(3, min-content)

You might need to adjust some spacing in the styles to make room for the extra row as well.

[cursive rover]

so after that i go in the lovelace ui yaml and add to one button label: sensor.name_power?

yeah, im a newbie

[zenith stag]

You cant use "A different take on designing a Lovelace UI" AND be a noob at the same time. You're in the boss level now...

and no, you don't just ad the text sensor.name_power. You need to add some code for it to output the value. There are tons of examples here in the chat if you scroll up, or google or in the cards documentation. I don't know how to write it by heart, otherwise I would have helped you 🙂

[teal shell]

Is there a front end Url I can use as a simple check is the user is currently logged in as an admin user?
I need to check if the session cookie is valid response 200, or invalid response 304/401

I want to use home assistant as an authentication source for a proxy

[simple dagger]

any help please?

[tacit cave]

don't post pictures of code, thanks

post & format the code

[golden mist]

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

[cursive rover]

any help on this?

  entity: switch.luci_giorno
  name: Prese Giorno
  label: >
    [[[
    return states['sensor.cisterna_power'].state;
    ]]]
  icon: mdi:power-plug-outline
  template:
    - icon_mdi```
```while scanning a simple key in "/config/ui-lovelace.yaml", line 113, column 11 could not find expected ':' in "/config/ui-lovelace.yaml", line 114, column ```

line 114 ```is return states['sensor.cisterna_power'].state;```

[summer mist]

How do you access the temperature in a weather.entity for a template? like: {{ states.weather.forecast_foo }} gives me:

<template TemplateState(<state weather.forecast_foo=rainy; temperature=52, dew_point=50, temperature_unit=°F, humidity=94, pressure=29.74, pressure_unit=inHg, wind_bearing=0, wind_gust_speed=0.0, wind_speed=0.0, wind_speed_unit=mph, visibility_unit=mi, precipitation_unit=in, attribution=Weather data delivered by WeatherFlow, friendly_name=Forecast Foo, supported_features=3 @ 2023-12-20T07:52:11.297154-08:00>)>

How do I pull out the temperature value in there?

ok, {{ state_attr('weather.forecast_foo', 'temperature') }} solves that

but that entity has daily and hourly forecast values, how do you access those?

[cursive rover]

Solved by myself thanks anyway

[tribal galleon]

Another option is adding custom_fields to the button card. But, two issues: it is not necessarily a newbie task and you'll probably end up fighting with the template to get things to work right. It looks like you're using Minimalist which does not play nicely when you want to make it do something that it was not written to do.

[simple dagger]

after a lot of strugglin i did that

need to work around a little with the styles now

[hard blaze]

hi. i have some issues with grid, could anyone help ?
`

• grid-template-areas: |
  "l l"
  "n n"
  "i i"
  "c1 c1"
  `
  but i now want to have c2 ,c3 and c4 in one row under the c1.

[tribal galleon]

I'm not the greatest with layouts but I think if you put 3 ls, 3 ns, 3Is, 3 c1s, on the next line you can add c2 c3 c4, and it should line up properly.

[hard blaze]

Perfect! it worked. thank you

[gloomy iris]

Hi everyone,
I am not so talented when it comes to CSS, so is it possible to define certain things like padding and have it applied to all "levels" of a card?
So e.g. if I have a grid or stack card, define padding somewhere somehow so all card inside the grid/stack have the same padding?

Google Bard suggests:

The Home Assistant Grid card does not have a parent element that contains all of the cards directly. Instead, each card within the grid is a child element of the grid itself. This means that you cannot apply CSS rules to all of the cards in the grid using a parent selector.

However, you can still apply CSS rules to all of the cards in the grid using a combination of parent and class selectors. For example, you could create a class selector for the grid card itself, and then apply CSS rules to that class. This would apply the rules to the grid card itself, as well as to all of the cards that are nested inside of the grid card.

Here is an example of how to do this:

CSS
.grid-card {
  padding: 10px;
}

.grid-card > .card {
  // Apply your desired CSS rules here
}

Is bard correct? I have found in the past that AI's code suggestions are usually incorrect when it comes to Home Assistant

[livid oracle]

Hi all, Iam really having a lot of issues with some of the latest changes, I have quite a large home and when I have a page of thermostats the page will just freeze up and memory usage is extremely high, this will kill my iPhone 13, I have 17 split type AC units so on my AC page I have 17 thermostats listed on the page. I didn't have this issue before the new thermostat was released. I am also having the same issue on a page what has a lot of graphs with historical info displayed for my power monitoring.

[vast crane]

There are some thermostat bugs that will be fixed in next release related to excessive cpu usage/slow rendering.

[livid oracle]

Ok great news

[vast crane]

I'm not so sure about history graphs. I think there is an open github ticket related to slow graphs in iOS, didn't see anything that looked like a resolution there though.

[livid oracle]

Yeah this happened with the change to how the historical data was being dealt with, I could't find much info on it. I will do some further testing to remove them one by one. But this page is relying on a lot of templates behind the scenes so I wasn't sure if that was contributing. But nothing too fancy just dealing with conversions kwH etc and daily comparison calculations. There are 18 CT clamps on my power monitoring board, I was going to add more but I would like to have this back to how it was before the changes were released as it was working great for the past 3 to 4 years.

[vast crane]

Couple users reporting an improvement on iOS 17.2 last week. https://github.com/home-assistant/frontend/issues/17967
This thread has been ongoing a few months though.

[livid oracle]

Yeah I am on 17.1.2 I will upgrade, but on my lap top I am still seeing issues as well. Not nearly as bad however. But first step I will update my phone and three wall iPads I have.

Thanks for your help! I will keep my eyes open for the thermostat updates.

[livid oracle]

Just upgraded to 17.2.1 helped a lot for the graphing issue, not perfect but at least I do not get stuck on my power page.

[tribal galleon]

I'm going to go out on a limb here and say, short answer to your question, is no. Here's a couple of things to consider:

card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.
But,
Cards that don't have a <ha-element> can still be styled by using the supplied custom:mod-card card.
This is only necessary in very few instances, and likely to bring more problems than it solves.
Lastly, I think the bigger issue would have to be will the cards you're trying to use actually inherit the settings you're trying to apply?
But, I'll leave a couple of options here for you. custom:button-cards can be templated to easily reuse styling without having to repeat the code. You might be able to use the decluttering-card to essentially reuse the came card configuration utilizing variables which should allow you to define your styling in it.

[ebon kestrel]

First: really sorry if this is addressed somewhere, I've been searching for 2 days now and cannot find a solution.
I've recently setup HA and I've connected my Heatpump (AirCon for USA-folk) and I can't get the air flow mode to show up on the thermostat/climate widget, but I can access it if I press the 3-dot menu on the widget

Does anyone know how I could fix this? :/

I've included a screenshot of the widget in question and the 3-dot menu view, just in case I've used the wrong name for things

[shut robin]

hey guys, there are a few things i want to show the more info of a entity by default (like my twinkly lights) but there's no option for that that i can see? is there a way to have that exact view on my dashboard?

[jade estuary]

LOL these unit versions and accuracy vs precision cracks me up 🙂

[tacit cave]

There's no way to show that currently in the thermostat card. You'll have to expose it in a separate card. In time, it will be added as a feature.

[ebon kestrel]

Darn, that's a shame given it's right there already just hidden behind a second tap/click, but glad to know I can give up on that one. Thank you

[simple dagger]

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

Screenshot from iPhone

Should display 2 colums, but it is working rn with 3 colums?

mediaquery: #phone "(max-width: 800px)": grid-gap: calc(var(--custom-layout-card-padding) * 0.5) grid-template-columns: 0 repeat(2, 1fr) 0 grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr grid-template-areas: | "sidebar . . . ." "sidebar Area1 Area2 ." "sidebar Area3 Area4 ." "sidebar Area5 Area6 ." "sidebar Area7 Area8 ." "sidebar Area9 Area10 ." "sidebar Area11 Area12 ." "sidebar footer footer footer ."

I tried also this way but doesnt works
mediaquery: #phone "(max-width: 800px)": grid-gap: calc(var(--custom-layout-card-padding) * 0.5) grid-template-columns: 0 repeat(2, 1fr) 0 grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr grid-template-areas: | "sidebar . . . ." "Area1 Area2 ." "Area3 Area4 ." "Area5 Area6 ." "Area7 Area8 ." "Area9 Area10 ." "Area11 Area12 ." "sidebar footer footer footer ."

[zenith stag]

it's impossible for anyone here to answer why it's not working without seeing the full context. As I explained yesterday, the grid areas defined need to match exactly wherever you use them. So check spellings.

also, your last example wont work because you have "sidebar" in two different locations

also, you need the same amount of columns on each row 🙂 now you have it very mixed.
This also needs to match the number of columns and rows:

grid-template-columns: 0 repeat(2, 1fr) 0
grid-template-rows: 0 repeat(5, fit-content(100%)) 0fr

[dim cloud]

Does anyone have a nice X-Mas theme for Homeassistant?

[tacit cave]

@zenith stag ^

[zenith stag]

No not me 🙂 But there's the worlds longest thread about one haha

[tacit cave]

I thought you created that snowtop thing

[hard blaze]

i remember a few weeks ago, someone put snow in a card

[tacit cave]

that someone was @zenith stag

[hard blaze]

hehe

[zenith stag]

hah true, I may by a bit guilty. But I have long since left that topic hehe

[tacit cave]

this

[hard blaze]

i have a quick question, how can i make a picture card, pulse / animate between two pictures?

I managed to switch image based on state.. but i want one that switches automaticly between two or tree images if state = charging

Tried to google this, but most results are comming back with only one picture and entity swapping

never mind, i found out i used the wrong card! 🙂

[patent scaffold]

Have the "off" button on the Climate-wheel dissapeared?

[hard blaze]

no, i still have the button

[patent scaffold]

hmm wierd ok

[hard blaze]

nice but will you be able to trigger that based on state?

[zenith stag]

ofc, just place it under:

state:
  - value: "charging"
    styles:

[hard blaze]

nice, ok i will try 🙂

[past spindle]

Did you design that card? It looks really good!

[tribal galleon]

I meant to send this yesterday. Typed it up but didn't press Enter... Hopefully this will set you in the right direction. ```yaml
type: custom:button-card
entity: climate.hvac
name: '[[[ return states["climate.hvac"].attributes.fan_mode ]]]'
state:

• operator: template
  value: >
  [[[
  return states["climate.hvac"].attributes.fan_mode == "auto_high"
  ]]]
  styles:
  icon:
  - color: gold```

[timid moss]

@tribal galleon No worries, it's on the backburner anyway. Looks good, I'll give it a shot later 🙂

I don't know how, but somehow the actual attribute got changed to what I set in my card

Refreshing the Honeywell integration fixed it, but that was weird

[zenith stag]

No not my design, just my code:) design came partly from @hard blaze

[hard blaze]

that animation of yours @zenith stag will try it tomorrow 🙂

I tried real quick, but screwed up the grid hehe. thank you for the help today!

[past spindle]

Kudos to you guys both it looks great!

[hard blaze]

Starting to take form 🙂 but real good assistance from @zenith stag

[vale vine]

i am trying to use browser mod to get a popup of my doorbell camera, but the video/live takes forever to load and at that point it would be faster for me just to open the door

anyone knows why?

[oak nexus]

Hello, is it possible to insert an empty line where I have made the green line? So that the different devices are not directly below each other?

[vital burrow]

You can have a devider in entities cards.
https://www.home-assistant.io/dashboards/entities/#divider

[oak nexus]

Ohh nice thank you

I think it's perfect this way

[timid moss]

@tribal galleon How would I change that so it changes color when the attribute is heating or fan? I'm not having much luck finding resources for javascript templating

[tribal galleon]

 - operator: template
    value: >
      [[[
        return states["climate.hvac"].attributes.hvac_action == "heating"
      ]]]```If you want both heating and fan to have the same style:```yaml
 - operator: template
    value: >
      [[[
        var hvac_action = states["climate.hvac"].attributes.hvac_action;
        return hvac_action == "heating" || hvac_action == "fan"
      ]]]```

[velvet marlin]

check the code. it the style is set as dropdown

type: thermostat
entity: climate.woonkamer
features:

• type: climate-hvac-modes
  hvac_modes:
  • heat
  • 'off'
• type: climate-preset-modes
  style: dropdown
  preset_modes:
  • none
  • eco

[golden mist]

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

[fiery ledge]

use Thomas Lovens More-info card

[fiery ledge]

theres a thread under this for exactly that

[zenith stag]

hmmm... it needs more cow bell!

[fiery ledge]

haha yes, I didnt yet automate the sounds....

only thing I cant make happen on theme change is the twinkly lights under each entities and vertical stack card

so now I add that manually as a conditional here and there

[hard blaze]

oh my! smurfs!!!

[fiery ledge]

type: conditional
conditions:
  - condition: state
    entity: input_select.theme
    state: Kerst
row:
  type: custom:hui-element
  card_type: picture
  image: /local/season/lightchain.png
  card_mod:
    style: |
      ha-card {
        box-shadow: none;
        background: green;
        margin: -16px;
      }```

i wanted to add that somehow to card-mod-theme, where most of the rest of the mods are, but I cant make it happen

creating this, we were mostly surprised by the fact we could simply drop in those animated backgrounds. No custom card required at all

lovelace-background: center/cover no-repeat url('/local/wallpapers/snow.mp4') fixed just works

the rest was just fun to play around with the various modding options and figuring out stuff

[dim cloud]

Thanks, good to see someone working on it 😉 Maybe we'll have a theme to drop in just for december next year and remove it without any traces after that.

[fiery ledge]

yeah, well, dont think that will be possible. the cnditionals on the theme are spread thorughout the various configuration options. Some for custom button-card templates, a theme, several card-mods here and there, and as said the card-mod-theme. So it fear it wont be a single drop in.

ofc, my smurf Kerst theme is overdoing it.... so its all a matter of how far you want to take it. the main background and color settings are in a theme, so thats a good place to start

with things like ```
card-mod-sidebar-yaml: |

.: |

  {% set kerst = states('input_select.theme') == 'Kerst' %}

  :host {
    background: {{'url("/local/season/kerst_smurfen.png")' if kerst}};
  }``` the card-mod-theme gets more complicated

[dim cloud]

Yeah, I guess I could do it. However after a month I wouldn't know all the places I touched anymore. At least after my wife hit my head for "helping with christmas decorations" while sitting in front of the PC 😛

[vapid field]

Hi I have some issue with dashboards and views. There are 2 dashboards, each dashboard have the same views.
Dashboard1:
View1
View2
View3
Dashboard2:
View1
View2
View3

When I"m duplicating a card from dashboard1 view1 and moving it to dashboard2 view 2, the card sometimes move to dashboard2 view3 and from there I can't move it (the move is not working).

How can I check it in the logs or other way to see what is going behind the scene?

[austere scaffold]

How do you draw the battery bar?

[hard blaze]

You need to use the custom:bar-card, you can find that under the following: https://github.com/custom-cards/bar-card

[austere scaffold]

Thanks, i found it just as you said it :) was looking for battery-card of some sort, cool thanks!

[hard blaze]

any time

[austere scaffold]

your "car-card" is way ahead of mine!

[torpid harbor]

I'm setting up a very simple entities card, and when searching for an entity by entering tdarr_ in the entity name box, it gives me loads of tdarr_ entities (green), but then... It gives me the items in the red box and many, many more (note the size of the scroll thumb). Is this normal/expected, or is something broken?

[tacit cave]

this is expected

it matches the spelling exactly first then it assumes you don't know how to spell and tries to match other things after.

all those other options have a t, d, a, and 2 rs in them.

[torpid harbor]

OK, thanks, I guess I've just never noticed before. I guess having spling help is appreciated some times.
and thanks for the clarification on how it did the matching because I was struggling to see it (need ☕ )

[tacit cave]

Well, personally, I don't like it

[idle sinew]

can i add an ipaddress to a containered (lxc proxmox) to the sidebar, i'd need multiple. the web ui for lxc zigbee2mqtt

[torpid harbor]

Yeah, I found it rather shocking (obviously), but at least it ain't broke!

[tacit cave]

I'd rather have the google style where it tries to match miss-spellings instead of "this has the same letters"

but I don't know how easy that would be to develop

specially for multiple languages

[stoic torrent]

I have all the data of my weather station (WH2600) over mqtt available in HA. Is there a card in the frontend where I can add my data from the weather station. I would like to see some statistic (Total rain per month) and even see some plots (eg. temperature). Any Ideas?

[tacit cave]

You have to add an MQTT sensor, and you should be asking this in #integrations-archived

[stoic torrent]

@tacit cave Thanks for your reply! I have already added the different values as MQTT sensors and can add it to the frontend (as single entities). For me it would help to have a predefined card to just add the diffrent MQTT Sensors (as temperature, humidity, ...) and have statistic about it. Should I ask this question in #integrations-archived ?

[old sierra]

Hi there, I was hoping that somebody could shed some light on the following. Is the custom person card from imswel is showing but only the first part. The popup map doesn't seem to work

[tacit cave]

If you want staticistics for entities, your MQTT sensors need to be configured correctly. Then you can just use the statistics frontend card

[dusky burrow]

I created a www folder in /config, put foto.png in it and restarted HA, but /local/foto.png isn't working. Did something change or isnt this working anymore?

[golden mist]

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

[ebon kestrel]

Removed the screenshot tho, naughty bot

[fiery ledge]

need more info/config to be able to help

[idle sinew]

there anyway to change the sidebar and add on additional lxc containers ip web uis?

[dusky burrow]

I wanted to host a picture locally, and this should be done by making a www folder in the config folder and adding the picture. I tried this by using filebrowser, going to config and making the www folder but this didn't work. Turned out that in my case the www folder should be in the homeassistant folder

[fiery ledge]

well, yes, it needs to be there for everybody 🙂 thats what the /config stands for

[dusky burrow]

Yeah, was just confusing because there was a folder called 'config'

And even more confusing seeing that the 'homeassistant' folder is called 'config' while accessing through samba

[fiery ledge]

guess you should read up on the basic docs for that, let me find the link for you

that took a while.... https://www.home-assistant.io/integrations/http/#hosting-files

[fiery ledge]

not sure if you had expected it to be 'homeassistant', but if thats the case, you'd better hop over to #installation-archived where they can help you out with all of that, if still new to this.

[old sierra]

With the custom card imswel person I now get this?

[fiery ledge]

it gives you the error: entity is not defined in your button-card

[hot grotto]

Hello.
I have issue where Homeassistant webui generates new websockets again and again.

In the small interuption of not having a websocket the buttons/sliders don't work

Anyone know what would cause this

[old sierra]

Hi, when a custom card has a script, lets say ring my phone...do we just add that example script to the /config/script.yaml file? how does it know which persons phone to trigger?

[tacit cave]

it doesn't, you have to program that yourself using the context object

[old sierra]

what is the context object?

[tacit cave]

it's an object that is passed around the backend that attaches to state objects so the system knows what caused the state change

you can only access it via templates

[old sierra]

I noticed that In a user I can add a script, this script seems to go in the general script file Is this what you're talking about?

[tacit cave]

no

i'm specifically answering your question of "how do I know who called a script"

when a button is pressed in the UI

[vast crane]

I've never seen anything like that reported, but that probably warrants an issue filed on github.

[golden mist]

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

[hot grotto]

I think its a network issue on my end.

Don't know enough about networking to be certain though.

[gloomy iris]

I think this belongs in frontend, so hopefully someone can see my mistake.
Trying to style an auto-entities populated entities card.

And want the color to depend on the respective entity's state.

But I think I am not using the right name for the entity

color: {% if states(config.entity) == "on" %} red {% else %} blue {% endif %};

[fiery ledge]

did you set it under the options? (states(config.entity) is ok in itself)

also, define what you mean/want to color with 'color'

this is all covered in the card-mod post we all know, and you have been looking at earlier?

[gloomy iris]

I am not defining it per entity in the respective options but for the entire card.
I am using the code examples and information from Ildar's great posts but I could not find the matching examples for this "global" case.

[golden mist]

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

[gloomy iris]

The example code works with me setting the same color independent of state. And I was trying to change the color depending on the state.

[fiery ledge]

yes, but what do you want to colorize? the whole line, or only the icon, or?

[gloomy iris]

Sorry, color refers to the font color of the name.
Background, icon etc. would be styled differently.
The color part as such is correct. It just seems that when I want to change color: red to an if expression, the reference to this.entity_id or states(config.entity) does not work.
So since the card does not know states(config.entity) it simply does nothing.

[feral rivet]

Does anyone know if the 'custom:select-list-card' by Mathias can be used in a template. I have tried this and It just won't work http://pastie.org/p/0zOBifAtV5VMugzdmLpV0H

[tribal galleon]

I'm not sure about that card specifically, but, usually, entities cannot be templated.
With that said, I wonder if you could incorporate a decluttering card and use your template as a variable that should pass the entity you want into the select-list-card.

[feral rivet]

not sure I fully understand, how that would work. I will see what I can come up with.

[tribal galleon]

Take a look at the decluttering-card. Basically, it is useful for reusing the same card configuration without repeating the code. In your case, you would just need it to evaluate the entity template that you already have and assign the result as a variable. I'm not sure I have anything really set up to try to replicate what you're trying to do to test it on my side. I'll take a look and see what I can come up with.

@atomic glacier You have a bunch of media stuff set up. Take a look at TMidi's code above. Notice that he's basically trying to make that card switch entities (which are basically playlists) based on the state of an input_select (which I'm assuming he has tied into an automation). I'm thinking a decluttering card can handle the entity portion via the template but I don't have any real media players to try to set something like that up. Can you take a quick stab at it to see if my theory is right?

[atomic glacier]

Will do, but will be awhile before I get to a computer.

[silk wadi]

Is it possible to set the label on an Input Button?

Actually, make it dynamic based on another value.

[honest ferry]

Hi someone could be so kind to help to understand how to change the password of the dreame cloud? I've changed in the app (dreame), it has changed so also the integration and I don't know how to change it

[fiery ledge]

you seem to have talent to make things difficult 😉 just do this filter: include: - domain: automation options: {card_mod: !include /config/dashboard/card_mods/binary_state_color.yaml} where the include is nothing more than style: | :host { color: {% set state = states(config.entity) %} {{'pink' if state == 'on' else 'brown'}}; }

[tame oriole]

I have a card with a light group where there are 3 lights in it. When I turn it off, all 3 go off. Is there a way or something else I can do make it so I can click into the card and only control 1 of the lights if I didn't want to control all 3? it seems a bit of a hassle to add a card for each light individually. almost need a way to seek into the light group card to pick single lights and then control them from there, like google home lets you do.

[fiery ledge]

use the group filter of auto-entities?

btw, the whole idea of light groups is what you describe..... a 1-click control of all members. If you don't want that, either don't use the group, or use it smart 😉

[hard blaze]

Good moring 🙂
I have a quick question:

Is it possible to edit the background color of a theme, and make it gradiant colors?

i know it is possible with using a image, but that will probably be harder to load then a css ?

[fiery ledge]

you mean like this: lovelace-background: radial-gradient(var(--primary-color),var(--card-background-color)) ?

[hard blaze]

so that goes inside the dashboard raw config?

[fiery ledge]

no this goes in your theme

[hard blaze]

ah ok, thanks 🙂 you made my day!

[tame oriole]

What is group filter of auto entities mean?

[fiery ledge]

didnt you check the documentation of auto-entities yet?

https://github.com/thomasloven/lovelace-auto-entities#filters

[tame oriole]

A bit over my head. I'll have to read this a few times.

[hard blaze]

anyone know if its possible to add inset to a box shadow?
i tried following:

• box-shadow: white 0 50px 0 inset 0 -15 0 rgba(255,255,255,0.25)

but only the normal box shadow is visble

type: custom:button-card
styles:
  card:
    - position: relative
    - width: 320px
    - height: 450px
    - margin: 30px
    - background: '#287bff'
    - border-radius: 25px
    - border-bottom-left-radius: 50px
    - border-bottom-right-radius: 50px
    - box-shadow: white 0 50px 0 inset 0 -15 0 rgba(255,255,255,0.25)

[analog lodge]

3 back ticks iirc... ``` (sorry I can't help with your actual question)

code

[hard blaze]

hehe its fine

[analog lodge]

so you want an interior shadow?

[hard blaze]

yes, i get it to work if i only use inset, but i want both outside and inside at the same time

[analog lodge]

I smell a wrapper div 🙂

my images are photoshop layer styles, not css

[hard blaze]

i managed to do it with html and css.. but button-card did not like the code hehe

i managed lol, i over complicated it so much

[analog lodge]

overcomplication is routine

don't worry about that 😉

Does it get you what you want with little perfomance issues? Yes? then fuck it 😄

[hard blaze]

- box-shadow: 
        - 0 15 0 px rgba(255, 255, 255, 255)
        - inset 0 15px 00 rgba(0, 0, 0, 0.5)

[fiery ledge]

shouldnt be over your head, its truly simple: filter: include: - group: light.main_inside_lights

or, maybe even more beautiful, use fold-entity-row, and have the header show the grouped light, which then auto populates the entities with the members:```
type: entities
entities:

• type: custom:fold-entity-row
  head: group.all_lights```

all on https://github.com/thomasloven/lovelace-fold-entity-row

[night cape]

hey, is it possible to set a text in front of a input_selection in a Entities card?
these looks not so nice ^^

[zenith stag]

I was going to tell to check the MiniHass theme. I have one or two lines for that there, but you seem to have solved it 🙂

[hard blaze]

i had to remove the theme:P sorry!

[next rivet]

Hmm.. So, on the mobile app when you get send a notification you can have an option to inclue an image/photo, which I have working, The minor issue is tapping the notification on android just opens the HA app and you lose the notification and the text/picture. Is there a way to change that behaviour to have it show a larger version of the picture etc?

sometimes its a little small, or you just.. fat-finger the phone and the notification is simply gone forever with no clue what it was

[hard blaze]

is there a way to remove the gap between the header and the first card?

[tribal galleon]

To "drill into light groups," I use browser_mod popups. In this example, the popup contains an entities card with the entities that I want shown. But, you can design it just like another dashboard with a grid and button cards, for example.

[tame oriole]

Is that only for the desktop?

[tribal galleon]

No. Screen capture done on desktop but that particular dashboard is used on an Amazon Show 15. I have another popup for the Fire 10s where I tap the animated radar, the popup shows three radar variations.
It is just easier for me to capture on desktop than the actual tablet.
The actual screen for this screenshot is animated but scaled down here so it doesn't try to take up the whole screen.

[hard blaze]

You could also use the "bubble-card" that has a pop-up function.

https://github.com/Clooos/Bubble-Card

Thats what i use, but note it does not work well with kiosk mode

and yes mo colors are bad hehe, i screwed up the theme colors 😛

[tribal galleon]

@hard blaze Yeah. Bubble-card is another option. I checked it out when it was first released and in the Alpha stages. The Dev has put in a lot of work on that card over the past few months. I'm not able to use it because I don't use the Masonry layout which the popup relies on (being set as the last card on the view).

[gloomy iris]

You are probably right about me 😁
Your code works, thank you 🙂

But the idea was to apply the card_mod not per filter/entity but per "type". That way I neither need globals in a separate yaml nor do I have to do it more often than necessary.

That's why I quite liked Ildar's code. It is applied to anything that fits the type of an entity switch or slider or whatever.
But there I cannot get the conditional color change to work 😦

[mellow lark]

Before I start looking into custom components, is there a way to have a card that is just a large (in terms of font size) "value". I basically want to have a page in my dadhboard that has a few key values. The entity cards show the value in a small font

[hard blaze]

I do not belive its possible without a custom card.. but if you install the custom:button-card as an example, that would do you good. This card can be modified easaly. its quite streight forward to edit

a quick example:

so if you have about 4 different you want to use, you could just add a horizontal-stack, and add custom button cards to it 🙂

[hard blaze]

https://github.com/custom-cards/button-card

@zenith stag , is it possible to use your theme, without going into yamel configuration? i liked the white theme of yours... so i tried to just apply the minihass.yaml, but that did not go well, as the background color was not changing from dark to white

[tribal galleon]

Take a look at the Markdown card. If you're looking to be able to just show a bit of information but also stylize it (without adding anything custom), then the Markdown card can do a lot. Now, adding card-mod can allow you to modify various things within stock cards.

[mellow lark]

thanks

[hard blaze]

oh i have not tested the markdown before, nice one

[zenith stag]

perhaps you can just copy the parts you like?
Note that my theme does is not made for any native elements in HA. At least not well adapted. I use my own variables to call the colors. E.g.

color: "var(--color-red)""

[hard blaze]

that explains why im not able to change the colors the same way i did with other themes 😛

i have a feeling i need to install the whole thing for fun hehe, i just have to re-do the whole design.. buuuut thats fun though

[tribal galleon]

@hard blaze This is a heavily card_modded Markdown card.

This is another Markdown card.

[zenith stag]

yeah the theme is meant to be used with the suplied cards. But either way, it requires some knowledge about both custom cards and themes. It's not mean for beginners in any way (not calling you a "beginner", just setting the expectations) 🙂

[hard blaze]

well i am a beginner to the theme part hehe so you might be on point

[fiery ledge]

those per entity mods are quite impressive for the system. Is seems to check on each and every entity if the condition evaluates to true (is this a script, is this an automation etc etc), and then applies the mod. reason enough to keep those out of the generic mods for me, and only use those per card. might depend on your system (size and power)

added to that, these (the ones I posted) mods are much simpler to use, and allow for templates based on the entity. My motto: KISS

thereory and practice are not always aligned...

[fiery ledge]

markdown card is nice and has several useful native styling options. You can Not however use any color you like, and certainly no theme variables. If you want those, you need card_mod, and have all the freedom you like

[tribal galleon]

The second example (the access point), is only HTML with some in-line javascript; no card-mod used. html <table width="100%" style="margin: 0px"> <tr><td align="center"> <font size=4 color="white">Access Point</td> </tr></td> <tr><td align="center"> <img src="https://icons.iconarchive.com/icons/martz90/hex/128/wifi-icon.png" width="64" height="64"> </td></tr> <tr><td align="center"> <font size=3> {% if is_state('binary_sensor.unraid', 'on') %} <font color="green">Reachable {% else %} <font color="red">Unreachable {% endif %} </td></tr> </table>

[mellow lark]

You can do that within markdown?

[hard blaze]

is it possible to move my custon:button-card up so it does not leave a gap between header?

[tribal galleon]

Yes. Goes in the content block. (Omitted above for length restriction.)yaml type: markdown content: |-

[mellow lark]

Interesting, I always thought markdown was way more restrictive. I only know it with basic headings, links, etc.

[zenith stag]

you can add a margin to push it up, but any card below it won't follow. You'll just push it out of its grid-area.

[hard blaze]

Thank you good sir!

[untold zenith]

Can I somehow add the audio device name after the volume level for this number tile card? I have a sensor that contains the name of the audio device, but the tile card only allows displaying attributes or state of the one entity. AFAIK you can't set attributes on entities manually either

[hard blaze]

Anyone know why this bubble card looks perfect on my computer, but when i open it on my phone, it screws up the width fo the contents?

[torpid harbor]

I'm using the custom:button-card, and I'm trying to get one large button on the left with two stacked buttons on the right. I've got this code (which is incomplete, but should, I'd think, at least show me the 3 elements), but the editor is telling me "no type provided". What am I overlooking? https://paste.debian.net/1301972

[vast crane]

I think get rid of the - on your very first line. It's not supposed to be a list.

and left shift everything by two whitespace

[torpid harbor]

winner, winner, chicken dinner!
I was following the templates at the button-card GitHub page, and they all seem to start with that -, so, like a good little lemming, I copied that.

TYVM

[tribal galleon]

@torpid harbor was following the templates at the button-card GitHub page, and they all seem to start with that `-
I just looked and you're correct. Those should probably be corrected in the docs to avoid the confusion. As many times I've been on that page, I've never even noticed that.

[torpid harbor]

PR incoming.

[dark dirge]

It's showing how to write the config for a YAML dashboard, where a list is correct

[tribal galleon]

But, I think, that is the confusion. How many people use a yaml config over a storage (UI) config, especially beginners? IMO, the examples should show what it will take to replicate that example at its basic form. A yaml configuration is a more advanced configuration. Those running the more advanced configuration will know that the - needs to be included whereas the average user will be looking to simply copy & paste.

[torpid harbor]

Below average users are looking for copy/pasta as well... 😉
If it's determined to not be needed, the PR will be rejected and I won't take it personally.

[hard blaze]

Is it possible to override a color of an SVG icon? or do i need to edit the file

[tribal galleon]

I've only used SVG icons inline (no actual .svg file.) Looking at the code, there is a fill field that is hard-coded. I'm not sure if you could put some in-line JavaScript to change the color (like on=yellow;off=gray) or incorporate a variable to reference. Probably the easiest method would be to simply make separate icons. As an example, this is SVG code for a PLEX icon. (The green ring is for a status and not part of the SVG.)yaml <svg viewBox="0 0 50 50"> <path d="M7.7.3h34.6c4.1 0 7.4 3.3 7.4 7.4v34.6c0 4.1-3.3 7.4-7.4 7.4H7.7c-4.1 0-7.4-3.3-7.4-7.4V7.7C.3 3.6 3.6.3 7.7.3z" fill="#282a2d"/> <path d="M25,7.1H14.6L25,25L14.6,42.9H25L35.4,25L25,7.1z" fill="#e5a00d"/> </svg>

[small loom]

What do you want to change exactly? Just have a different colour for something than the standard blue off / yellow on kinda deal?
I've done it with card-mod (https://github.com/thomasloven/lovelace-card-mod) for one light (single colour LED light on a wifi switch).

  style: |
  :host {
    --state-light-on-color: magenta;
  }```

[tribal galleon]

That would probably work for an MDI icon but not an SVG.

[hard blaze]

yeah was about to say the same thing, MDI that works on

Easy fix: remove the icon 🤣

[quartz swift]

I have a samsung air purifier and tha air quality I get is in CIAQ and it is from 1-5. How can I colour the glance icon on the dashboard based on the value (to give a visual representation of the air)

[fiery ledge]

you can use any custom_icons integration and edit those icons manually. I've set fill="#44739e" for all of my (custom) icons to make them easily viewable on most themes.

but card_mod is by far the easy solution

[zenith stag]

are you using Fontawesome to add SVG icons, or is there a simpler way?

[tribal galleon]

I'm not sure if I would call it easier, but I added the code for the SVG icon as a custom_fields in a custom:button-card. At the time, it was created more as a proof-of-concept alongside some of the work done by Ofir. Some of the original conversation can be found at #frontend-archived message.

[gloomy iris]

That's a good argument but unlike charts with lots of data points, these kinds of cards conatin hardly any data and hence are no system load at all even for a RPi 4.
So in this case, to me personally, less code/per entity code means less maintenance and is preferred 🙂

[tame oriole]

To "drill into light groups," I use [

[tame oriole]

Thread

[gilded blaze]

Hi, is there any way to make the first card in the left (it's a vertical stack combined with horizontal stacks) take the entire first row?
I'm fine with cards being next to each other in the rows below if there's space
I've tried achieving that with a vertical stack for all cards but that way I lose the ability of cards being next to each other if space allows.
If I combine horizontal stacks with the vertical stack "solution", the UI looks horrible on small screens because cards are forced next to each other even when there's no space

[naive delta]

I would try a custom:grid-layout card for that

https://github.com/thomasloven/lovelace-layout-card

[gilded blaze]

I've managed to achieve it with layout-card's vertical layout and layout-break cards as well as button-card blank buttons
Although I'm not sure if it looks better, I think it doesn't 🤔

[naive delta]

Hmm, what if you made a big layout card specifying two columns and then your rows, but your first row would be centered for your top card

[gilded blaze]

That sounds good, I'll try that!

[gilded blaze]

🥳
Thanks @naive delta
There's still room for improvement but it looks better than my initial result

[naive delta]

Looks great, keep it up!

[polar kelp]

That’s the original reason layout-card exists. So you can have a vertical stack with something on top, and then layout-card below with everything elsw.

[fiery ledge]

well ofc suit yourself. less is better, I agree. but also simple is better. short and simple is my motto.... that's why what I posted is 'better' (imho). Of course, also because it works 😉

fwiw, is was talking about generic stuff like:```
card-mod-row: |
:host {
--card-mod-icon:
{% set state = states(config.entity) %}
{% if state_attr(config.entity,'device_class') == 'running' %}
mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}};
{% endif %}
}

[gloomy iris]

True, and I will be using your approach for other cards that are more similar to each other.
Your example is a perfect one for changing e.g. icons for automations. Get rid of that ugly head 😄
But I think that those kind of things belong into themes rather than card_mod sections in cards.

The example I am currently trying to change will be a per-card-modification.

I also like Ildar's examples where he uses &ref1. I never knew you could do that.

[fiery ledge]

sure but those are simply anchors, and only make you yaml cleaner. I doesnt do anything for efficiency.

But I think that those kind of things belong into themes rather than card_mod sections in cards.
this is exactly what I was referring to, and believing that might seem nice, but in the end is very costly. I did have 2 of these and it drove my dashboard slow. moving the same to individual cards, so they were only applied to those made it much beter

changing those generic icons is what I always did with my custom-ui plugin. works perfectly per glob, per domain, you name it and all in JS.

yet ive taken that out now and do card_mods like style: | :host { --card-mod-icon: {% set state = states(config.entity) %} mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}}; }

and simply inject those where they belong```
- type: custom:auto-entities
card:
type: entities
card_mod: *card
state_color: true
filter:
include:
- group: binary_sensor.active_devices
options:
secondary_info: last-changed
card_mod: !include /config/dashboard/card_mods/active_icon.yaml

so making that 'generic' for that card, but not applied/evaluated for all in the system

[gloomy iris]

Yes, if the dashboards slow down then absolutely, efficient code is crucial.
So far I have not had any issues wirh that except for apexcharts cards with lots of data.

My main problem is usually keeping code minimal because HA editor does not allow for commenting and is not really made for long codes. So keeping the overview of your code becomes more difficult.

[fiery ledge]

yeah, well, using comments, !include and !secret forces one to Yaml. which is what I do indeed.

[gloomy iris]

But does that make a difference? Cards do not consume resources until you enter that dashboard. And once you enter the dashboard you will want those changes.

[fiery ledge]

listen, I am not even 100% sure that what I believed to see happening is true, but it was a clear experience. My explanation would be that a theme is used on each and every view. So, having a lot of these Jinja (!) templates makes each view go back and forth to the backend.

its not like we're talking JS which is solely evaluated in the frontend (like custom-ui).

having a per view mod is always cheaper for the system than mods that are in the themes. (at least, so it would seem)

then again, I do have rather a large system with a lot of entities... that probably weighs in. And I am no longer using a Pi4.

apexcharts are really bad for performance indeed..... only use 2 or 3 for the fun of it, on separate subviews, but the fan starts blowing on those ...

[hard blaze]

I believe we share the same experience here.

[gloomy iris]

It does sound possible. The workings in the background might be different for themes.
I am going to play with your approach once I get back from the family touring 😄

[gloomy iris]

And p.s., Ildar just confirmed that my approach will not work as config.entity is called per row. So it only works in your approach but not mine.
So even more reason to extensively test what your approach offers in possibilities 🙂

[topaz vale]

Hello, where can I find a guide on how to contribute new translations to frontend? I’ve tried searching myself and only found the Lokalise project. But I can’t find any instructions on how to add new lines and find the necessary keys for them. I’m trying to add missing preset_modes for climate.

[dark dirge]

These are the docs: https://developers.home-assistant.io/docs/translations/

[topaz vale]

I've read them but there is no information on key structure or how to add new entries to Lokalise

Found some screenshots of Lokalise and it looks like I don't have access to Add key button. Is there some sort of account verification process?

[vast crane]

You don't "add keys" in lokalise. The translation flow is that a change gets checked into frontend github that has a translation key and an english translation. Then when a new HA version with that change is released, any new keys that were added get automatically uploaded to lokalise, and language translators then add their language translation to that key.

Also some translations displayed in frontend (like state/entity translations) actually come from the backend.

[vast crane]

If you want to show like a specific screenshot of the thing you're trying to translate, I could maybe point you to where you need to start looking.

[topaz vale]

I'm trying to understand, how to translate preset_modes for climate entity. In more info card I can see only none and away are properly translated, while manual and auto are shown as pure strings in lowercase

[vast crane]

So here are translation keys for generic climate preset_mode:

https://github.com/home-assistant/core/blob/dev/homeassistant/components/climate/strings.json#L90-L98

I see that manual and auto are not there.

I am not sure how the set of strings here is chosen. Maybe only commonly used preset mode translations go in generic climate, and ones used by more specific integrations need to translate them in their integration strings

What is the integration that provides this climate?

[topaz vale]

It's provided via MQTT. The actual device is Aqara thermostatic valve connected using Zigbee2mqtt

[vast crane]

I see. I wonder the best way to handle that, as theoretically a MQTT device could create any arbitrary string for preset mode, and there can't be a localise key for every possible one...

Anyway this would be a core issue, not something for frontend.
I guess you can either ask your question in #devs_translations-archived , maybe file an issue for core/climate, or core/mqtt, not sure. I'm not sure either will get any traction.

But for there to be a translation in localise, either climate or MQTT integration in core would need a PR to add that key to their strings.json.

Also read: https://developers.home-assistant.io/blog/2022/12/01/entity_translations/

[topaz vale]

Thanks for the help, I'll see what I can do with this

[untold zenith]

What are you using for the titles?

[gilded blaze]

Mushroom title card
https://github.com/piitaya/lovelace-mushroom

[gloomy iris]

Marius, I stumbled across your post looking for how to style slider-entity-row but did not see if you ever solved it. Did you?

I saw that Thomas said that styling is only possible if it is used in an entities card. So I did so. I then tried the given examples but nothing is changing.

[golden mist]

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

[fiery ledge]

just using the :host here```
- type: custom:slider-entity-row
entity: input_number.alarm_volume
card_mod: &volume_color
style: |
:host {
--paper-item-icon-color:
{% set vol = states(config.entity)|float(0) %}
{% if vol == 0.0 %} gray
{% elif vol <= 0.3 %} dodgerblue
{% elif vol <= 0.6 %} green
{% elif vol <= 0.8 %} orange
{% else %} red
{% endif %}
}

or stuff like:```

• type: custom:slider-entity-row
  entity: input_number.outdoor_low_lux
  secondary_info: true
  card_mod:
  style:
  hui-generic-entity-row$: |
  .secondary::after {
  content: "Current: {{states('sensor.mean_outdoor_lux')}} lx"
  }```

also this, but the DOM path has changed so need to adjust that.... - type: custom:slider-entity-row entity: light.dining_corner card_mod: style: ha-slider$ paper-progress$: | div#progressContainer { background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red); --paper-progress-active-color: none; }

should be native now according to https://github.com/thomasloven/lovelace-slider-entity-row/issues/281#issuecomment-1807266614, but it does not yet show in my config... o well, some stuff for after the festivities . Merry Christmas everyone. Hope you all will be well.

[tulip urchin]

Hey guys, sorry to come here with this stupid problem but I am running out of ideas, I have some kind of vertical spacing issue with my frontend and I cant seem to solve it. First many cards are cut off at the top like in the first screenshot, and then I also have cards overlapping in vertical stacks as seen in the second screenshot

I tried installing a theme but it still has the same issue

If I remove #root { height: 100% }, it works. Would it be possible to set css globally?

[hard blaze]

There might be a margin or something in your theme, are you using a standard theme?

[merry condor]

Hi everyone, I'm searching for a specific type of card that is like a gauge but has steps, like the apple watch AQI meter, but without fiddling around with apex charts or janky workarounds. I'd like to know if someone has done something similar or if there's a card that does that, otherwise I'd throw myself into trying to make one myself ✌️

Actually, I have found this https://github.com/krissen/sixdegrees-card, but it's not customizable enough for my taste, though I might start builing upon it

[light ice]

happy holidays yall 🙂 is there a way to link to a card?ie i want to add a button the focuses/activates a card in the same view

[merry condor]

I've started something here. It's utilizing a simple svg, i'm gonna try to make it more customizable, though i'd appreciate if someone with more experience would like to assist me with a few things

[vast crane]

You can ask in #devs_frontend-archived for development questions.

[muted anvil]

Anyone know how to make the lightbulb icon bigger without making the whole button card bigger?

[hard blaze]

icon:
- width: 25px
- height: 25px

[muted anvil]

tried that. But the size is limited by the size of the button card

I just want the icon occupy more of the button without making the button bigger

[hard blaze]

Can't you make a custom field to cover your needs ?

So 1 making the size of both, just remove the background color, then use the icon and custom field

[muted anvil]

Yh, that would be the way to go i guess. Wanted to avoid making this overly complicated . Thanks

[tidal swallow]

Good evening to all and a Merry Christmas. Are there any Reolink NVR users that can recommend a good card to utilize the stream and motion sensors from the integration into a surveillance type view?

[stiff fractal]

Hi, I have a couple conditional cards that contain live video stream from go2rtc. In the latest update I've seen the video had started dropping frames and becoming unresponsive.
I've verified that the camera stream itself is fine by adding it in a non conditional card. Anyone else notice something similar?

[left sentinel]

In a statistics-graph, how do I force the y axis on a graph to be 10-30 even if there is a value outside that range in it? My brief period of my temperature sensors reporting 0 C is killing my graph usefulness.

[light ice]

anyone? seems like its not possible correct?

[polar kelp]

Afraid not.

[faint flume]

Anyone know how to modify the picture entity card? I want it to show a fullscreen view of an image when you tap on it. right now it shows a slightly enlarged image, but still too small.

[unborn venture]

How can I do a tap_action that does the same as clicking in "Explore Media" (Explorar medios) ??
Thanks

[timid moss]

I'm trying to expand custom:mushroom-climate-card into a space within a custom:layout-card, but it keeps squishing itself up

Here is the YAML for the card: https://pastebin.com/yHbZExPL

And this is what it looks like now 😦

Anyone have ideas?

Ah it was the layout type being set to grid. Setting it to horizontal makes it look normal

[hard blaze]

I have not used that card yet, but I believe a layout card needs grid details to know where to place your stuff. Nice looking button btw 🙂

[hard blaze]

anyone have a good example for a sticky footer for clean yaml theme?

[faint flume]

Im no expert but maybe apexcharts card available on HACS is the answer?

[zenith stag]

I use a button card, with fixed position to the bottom of the screen. Works great!

[merry condor]

that is a beautiful freaking dashboard

[hard blaze]

ok i will check it out

[lofty remnant]

Show off your energy-related dashboards. Whatever, solar panels, consumption, energy banks, etc (Custom dashboards)

[zenith stag]

I think there should be a ”show-off-your-dashboard” channel here too. To keep it a bit seperste to the general frontend discussions 🙂 It’s great to see what other do for inspo and give/receive feedback

[hard blaze]

Agreed

[lofty remnant]

Yeah, you have right.

And. I'm looking for such a card, does anyone have one?

[zenith stag]

Those posts on the various Facebook groups or YT are always very popular so why not also have it here 🙂

[dark dirge]

There's a forum channel for that. Here, it would scroll off the screen immediately

[lofty remnant]

The disadvantage of the forum is that not everyone is on it. I think there is more activity on discord. And you don't have to look much.

[golden mist]

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

[wispy breach]

Seconded. Or thirded. Er… I agree lol

[polar kelp]

Dashboard showoff thread

[zenith stag]

can someone PLEASE tell me why this is not working, when the exact same line works just fine in an if/else statement.....
I'm trying to display album art for a media player card. (custom button card)

- background: center / cover no-repeat url("${entity.attributes.entity_picture}")

ok so this works. I guess I still have no real clue about the differences of Jinja and JS?

- background: |
    [[[
      return `center / cover no-repeat url("${entity.attributes.entity_picture}")`
    ]]]
```

[vast crane]

well the backticks resolve the $ expression in the javascript context and return a string with the variable substituted.

[left sentinel]

Huh. I mean, not that I’m actually using this but I used it as an easy visual indicator in testing whether card-mod was working and… has there been an update in the past couple of months (which is about what I applied, I think) that makes border-radius no longer function as a card-mod override parameter?

Border:none still applies immediately, so the style block itself is still functional.

[shut pollen]

is there a way in the YAML to make a row in an entities card not show anythign on the right? I have cameras on my 3d printers - and by default its showing as "idle" - as in the camera is idle. but its confusing when the printer is printing

[left sentinel]

This is a part of my dashboard that’s a grid card (and I had it done as various other ways as well, including nested vert/horiz stacks and I think I even tried custom:layout-card on this section), but… I keep getting the cards that don’t really “want” to be higher leaving those gaps. Is there a way to force them to fill up the height? Other than just forcing them all manually with card-mod to be a certain height, ideally?

(And relatedly, Jesus, why is the button of all things forcing itself ti be extra high…)

[wind hill]

Hi I set up a dashboard about a year ago for a wall mounted phone. This dashboard has two vertical stacks with a bunch of buttons and other cards in it (including a few horizontal stack cards). The other one has 5 cameras in it vertically. When the phone was mounted sideways the two vertical cards would sit side by side and when I use my everyday phone (portrait mode) it would one above another.

The problem is that about a month ago it doesn't matter which way the device is it's one above another (even on my PC with a large screen)

I've updated HA the other day and that day didn't help. Does anyone know what's going on? Or anything I could try?

[left sentinel]

Have you checked view type? May have gone from masonry to sidebar, especially if it’s doing it on the PC as well.

Behind that edit button.

[left sentinel]

So, as the column gets bigger while the UI resizes, at some point the button gets so wide that the height overshadows the other cards and makes the whole thing look wonky. Is there a way (maybe via card-mod) to make the content stop growing?

Look more like the bottom image when it gets wider, in other words. I have tried a bunch of things but havent managed it.

[silk wadi]

Has anyone seen a panel that looks like the Weasleys (from harry potter) clock that shows where people are? lol

[gloomy iris]

I am struggling with good layouting myself, but you can define a lot using layout-card with grid layout.
As an alternative to the stock button card I have chosen to use the custom button card. It has a lot of built-in layout functions that make it easier to style it.
But it is an additional card, so maybe not what you want.

Another alternative might be to use the grid layout for your entire dashboard and place the different cards precisely where you want them.
The cards themselves then only contain the grid area they are supposed to be in.

[gloomy iris]

Does anybody know if it is possible to modify my theme to only create a border for the "main" card and not the contained cards?
E.g. the vertical-stack-card but not the cards inside the stack.
ha-card-border-width: 1px

[atomic glacier]

@gloomy iris In the past I've used both mod-card and layout-card to achieve that look. All of my mobile layouts used to have the borders, so yes 🫡 basically, you put the entire view inside something and then put the border around that...

there may be a better way...but 🤷‍♂️

[quartz swift]

Hi, I have a value from my air purifier for IAQ. It is a value 1-5. How can I change an icon colour on the dashboard based on the value? Ie, 1 == green, 2 == yellow, etc...

[gloomy iris]

My problem is that I cannot figure out how to do it with themes. "Simple" enough in the cards themselves but doing it with themes seems more difficult.

[hard blaze]

You can use a custom button card, or markdown card and set color for each state

[hard blaze]

https://github.com/dsellers1/home-assistant this is @tribal galleon git hub and he has some good examples for you to use

[thin nebula]

Is anyone facing the issue where a lot of their HACS integrations stopped working? Button-card was working fine yesterday and now it stopped working. Can anyone please help me with this?

[hard blaze]

You might need to reload the page, clear chase and sutch depending on what device it's not working on

[thin nebula]

it's not just that. I'm not able to see any HASC frontend integration when I add any card.

[hard blaze]

Wierd, have you tried rebooting you home assistant?

I know that's the most annoying question in the world 🤣

Is it your phone or a web browser?

[thin nebula]

all the devices

can this happed due to less storage? I think my vm instance has run out of storage

[hard blaze]

That I can't answer, but if it's a VM, try to apply more storage and se

Last time it happened to me, it was one HACS integration that broke them all, so I removed it and everything worked fine

[thin nebula]

ohh
cool. let me check!

[hard blaze]

I would try to remove one by one, but I'm not an expert at all, so any advice from me is plain experience that I did.. and might be a stoopid way to fix it 🤣

[quartz swift]

Thanks, if I just search for those cards will there be enough docs to perform this?

[hard blaze]

I do believe so, or you can ask for help 🙂

[zenith stag]

it might be easier for you to use the stack cards and ask in #templates-archived how to change color based on entity state

[thin nebula]

Tried everything. All the custom hacs button stopped working. Getting this error- custom element doesn't exist.

[thin nebula]

@zenith stag can you help me with this?

[zenith stag]

sorry, no idea :/

[golden mist]

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

[zenith stag]

this is my issue, with the card only taking up the minimal amount of height

[zenith stag]

never mind, I solved this by using two cards and setting the display based on state.

[shadow plank]

Adding card to Lovelace UI

[gloomy iris]

Anybody know how to access a certain attribute in an auto-entities populated card?
I am looking to access the temperature attribute of config.entity.
states(config.entity) accesses the state but I could not find a link to all available options since states() is not part of the normal templating syntax (singular and not plural).

[vast crane]

state_attr(entity, attribute) is the attribute equivalent of states(entity)

don't quite understand if that's what you're asking...

[gloomy iris]

I will test, but it looks good. So it just needs to be the correct way of calling on an entity in auto-entities.

[golden mist]

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

[gloomy iris]

Works, thank you 🙂

I am now just facing the surprising problem that my theme stops working if the entity does not have the defined attribute.
How strange. I would have thought that

{% elif state_attr(config.entity, "temperature") > 4.5 -%}

would simply return false if the attribute did not exist.

For some reason, checking if the variable is even defined does not work either.

{% elif state_attr(config.entity, "temperature") is defined -%}

It always returns true no matter if there is an attribute temperature or not -.-

[dark dirge]

you're not actually checking if that attribute exists here

you're checking if that return value of that function is defined

[gloomy iris]

Ah, I see. Yes, {% elif state_attr(config.entity, "temperature") -%} hence works

[gloomy iris]

Out of curiosity, should there even be a defined return value if there is no such attribute?

[dark dirge]

because it returns something

these will all check for the existance of an attribute:

{{ states.alarm_control_panel.aarlo_base_station.attributes.foo is defined }}
{{ states.alarm_control_panel.aarlo_base_station.attributes.code_format is defined }}
{{ 'foo' in states.alarm_control_panel.aarlo_base_station.attributes }}
{{ 'code_format' in states.alarm_control_panel.aarlo_base_station.attributes }}

False
True
False
True

{{ state_attr('alarm_control_panel.aarlo_base_station', 'foo') }} -> None

{{ None is defined }} -> True

[golden mist]

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

[grave igloo]

Hey everyone, not sure where to ask but anyone ever had a bug where the zones don't show themself, just the map? like here it's just showing the maps and when i try to add a zone it don't show the pinpoint anywhere.

and that's causing that the person card just shows unknown. not sure what to do anymore.

Thanks!

[quartz swift]

Sorry may not be able to see because it was condensed. How to justifyin horizontal stack

[quartz cedar]

Just eyeballing it, they appear to each be on the left of their respective cards. Do you want them each in the center of the stacked cardthey are in or grouped together in the centre of the whole area?

[quartz swift]

Centred in their respective card would be fine. But ideally justified so the gap between each is equal. Seems like the template mushroom chip is taking up more space in the horizontal stack than it actually takes up?

I've since added a chip in there for the outdoor temperature so it's more noticeable now

[tribal galleon]

@quartz swift Try removing the second and third ```yaml

• type: custom:mushroom-chips-card
  chips:from your code above. The Mushroom chips card can contain a ~~list ~~ array of chips to show without having to redefine a new card. So basically: yaml
• type: custom:mushroom-chips-card
  chips:
  • type: entity
    entity: sensor.house_temperature
  • type: template
    icon: |
    [... shortened ...]
  • type: entity
    entity: sensor.thermal_comfort_humidex_perception
    icon: mdi:account-circle
    use_entity_picture: false```

[quartz swift]

Is there a way to select packing for this? Ie horizontal, vertical, grid...

[tribal galleon]

There is an alignment: option of start, end, center, and justify. Not sure if this will help solve your alignment design. I would assume if you were to add alignment: center to the template chip and alignment: end to the comfort chip that that might work.
EDIT: This doesn't seem to be working for me...

[bronze spindle]

Hey guys... has something changed with the default CSS in the recent update? The style code that I have to remove the background for a markdown card now shows the background
https://paste.debian.net/1302405

[quartz cedar]

Thats what I was thinking. https://github.com/piitaya/lovelace-mushroom/blob/main/docs/cards/chips.md

Alignment is a built in feature

[tribal galleon]

Yeah. I just tried it and it works at the card level but not at the individual chip level.

[quartz cedar]

I had the reverse, all my background images disappeared. An additional reboot fixed it.

[quartz cedar]

That should work then if they are put back in the horisontal stack.

[bronze spindle]

Yeah I've done a few reboots, cleared cache, everything and the background is now appearing.

[tribal galleon]

I use a layout-card to achieve a left, center, and right layout. ```yaml

• type: custom:layout-card
  layout_type: grid
  layout:
  grid-template-columns: 25% 50% 25%
  cards:
  • type: markdown
    content: '{{ now().strftime("%m/%d/%Y") }}'
    [... and more cards ...]```This example uses Markdown cards with card_mod text-align left, center and right for the respective cards.

[quartz cedar]

Looking at your code it looks much the same as mine, but i'm using card mod.

[bronze spindle]

Any chance I can see your code for card-mod and see if I can replicate it on mine to fix it?

[quartz cedar]

Sent you a dm

[bronze spindle]

Cheers for that

[quartz swift]

Hi, I am trying to remove backgrounds from mushroom chips but I don't seem to be able to

Also, I would like to almost make a table look forr the battery and RSSI status. How can I align these for a table like look? At the moment you will see I have a template chip that gets the device name, then a space, then the two data poits. But the 99 battery is shorter than the 100 battery so it doesn't line up nicely 😦

[left sentinel]

A grid with chips inside them?

[crimson badge]

Hi. Does anyone know if it's possible to have icons instead of dots for the frost and setback options on the thermostat card?

[vast crane]

not currently, no

I think there's still some work being done in this area

[crimson badge]

Ok, thanks. I saw the pretty pictures in the release statement and thought maybe I was missing out.

[thorn ridge]

I have several equipments with 3 possible states: on/off/idle. I need a way to implement this in HA and, especially, in the frontend. For each equipment there is a switch and a sensor.equipment_power which measures its consumption. I would like to be able to reflect these 3 states in the frontend. Ideally using 3 different colors for its icon instead of just 2.

I already tried to use card-mod to manipulate the icon color wit only partial success. Updates to the state not always triggered the card-mod logic to update the icon.
I also tried config-template-card but was unable to manipulate the icon color.

A possible compromise would be using a glance card showing the icon for the switch and the state for the consumption sensor. But I was unable to find a way to do this.
The compromised I ended up going with for now is using multiple-entity-row and use the switch as main entity and the consumption sensor as an extra value in the same entity row.

But help to implement an entity icon with 3 possible states is welcome. Thanks!

[quartz swift]

Bump

[zenith stag]

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: sensor.example
    card_mod:
      style: |
        ha-card.type-entity {
         background: none;
        }

[quartz swift]

I'll try it when I'm home 🙂 thanks. Everything I found gave me "background-color: transparent;"

I have an indoor camera stream I flick on to privacy when I am home.

Is there a way to make a template card that shows an icon when privacy enabled or camera stream when not?

Just trying to find a way around a big black box if possible

[tribal galleon]

@quartz swift @zenith stag A simpler method for the background which should work for all chips plus some extra stuff to share: yaml card_mod: style: | ha-card { border: none; --chip-box-shadow: none; --chip-background: none; --chip-font-size: 24px; --chip-padding: 0 0.3em; --text-color: red; --chip-height: 75px; --chip-border-radius: 45px; }(None, transparent, a color name, or HEX can be used.)

[fallen oar]

Does anyone know if it is possible to make history(like) graphs of numeric state attributes? In this case I want to visualize the pi_heating_demand attribute of my Popp/Danfoss Ally TRV's. I know how to make a template sensor out of the attribute, but my question is specifically if it is possible to use attributes as inputs to graphs..

[tribal galleon]

Are you looking to have a Mushroom Chip card basically act as an indicator and a toggle for the privacy mode?```yaml

• type: template
  entity: input_boolean.guest_mode
  content: Guest Mode
  icon: |
  {{ (states(entity)=="on") | iif("mdi:home", "mdi:home-off-outline") }}
  icon_color: |
  {{ (states(entity)=="on") | iif("green", "red") }}
  press_action:
  action: toggle```

[vast crane]

Not with the stock cards. Possibly some other custom graph card could do it.

[tribal galleon]

But attributes don't have history, right? I thought someone asked a similar question recently (which I cannot find) and I thought that was the response.

[vast crane]

They do.

You can get them with SQL query.

[tribal galleon]

But, they're not persistent, right?

[fallen oar]

What is the meaning of 'persistent' in this case? Does it mean they don't go into long-term statistics?

[tribal galleon]

persistence, in this case, means the data is still available after a reboot. non-persistent = data gone.

[vast crane]

I thought they were all in the DB with the states. That's for example how you can graph a history of climate and it shows the temperatures, or you can plot the person history on a map.
Trying to look at the SQL to confirm.

ok yeah I think they are in there.

For example I can look at any entry in the states table and it has an attributes_id. Then if I go to state_attributes table and query it you can find all the attributes at the time that state was recorded

Does seem a bit silly that they are all kept even if not really used. But I guess it's there if an integration wants to read it.

Apexcharts claims it can plot attributes.

[tribal galleon]

Don't really know anything about SQL so it is way out of my league but I did notice this sql CREATE TABLE states ( state_id INTEGER NOT NULL, domain VARCHAR(64), entity_id VARCHAR(255), state VARCHAR(255), attributes TEXT, event_id INTEGER, last_changed DATETIME, last_updated DATETIME, [... and more...https://www.home-assistant.io/docs/backend/database/

[vast crane]

I'll guess that's probably way out of date.

the schema has been changing a lot for optimization reasons

[tribal galleon]

The docs are out of date?! 😲

[vast crane]

oh nvm it says "and more" 😁 so I guess it could be accurate

most of those fields are all empty now anyway

[fallen oar]

Yes, this is sort of what I mean. If I select the thermostat entity it will plot some of the attributes. But I cannot select which ones...

[fallen oar]

Will check it out

[fallen oar]

Indeed, Apexcharts custom component did the job

[sinful flax]

Is it possible to nest multiple views on one parent view? For example, I want to take the parent view (place it on the left), and then when a button for a room is pressed, show the room view on right.

[tribal galleon]

Possible? Maybe. Easily? Probably not.
However, I think if I were to try to do something like that, I would have the left side contain buttons that set the value of an input_select helper entity (for example, the rooms).
On the right side, I would use a conditional cards that look as the input_select. If the input_select is the "activated room", that conditional card would show what you want to see. The other conditional cards would be false and therefore not be shown.
(Not sure if this would work as planned but I think, theoretically, it would work.)

Another option would be to "fake it." Make several copies of a similar view. Buttons on the left would navigate between the different views (rooms) which have the respective stuff you want to see for that room. This method might be easier to set up initially and then transition into using the above method.

[sinful flax]

Thank you!

[tribal galleon]

While not exactly what you have in mind, @dusky haven was working on an LCARS (Star Trek) layout. The left side of the screen has buttons to navigate between views. His example might give you some ideas. You can check it out here: https://discord.com/channels/330944238910963714/1156612622993588294

[dusky haven]

I was able to get this kind of thing to work using conditional cards. I also tried using !include statements in the YAML to include yaml objects shared between views. It worked, but not as well as using the conditional cards. Just use conditional cards from the start. I wasted a lot of time tying other ways. Conditional is the best method I found.

[tribal galleon]

Did you apply styling based on the condition to the buttons on the left side? (I think that was the last thing we had been working on way back when.)

[dusky haven]

Yea the buttons on the left control what appears in the middle of the screen now. Is that the styling you are talking a bout?

[tribal galleon]

I should have added "active page" styling. So, whatever is showing on the right, the respective button is "lit up" on the left.

[dusky haven]

Oh yes, I got that to work. I had to get creative. I used a custom:button-card for the left side navigation buttons and added a background -color javascript template. The template looks for an input_text helper which has the value of the currently selected view. If the value matches the name of the button then the background-color style is applied which makes the button light up, or "go active".

The name of the input_text is the concatenated name of the currently logged in user and the magic string "_page" . I gave each control panel its own user. This resulted in input_texts named kitchenpanel_page, livingroom_page, bedroo_page etc. This enables Panel A for example to be on a different page than Panel B.

Tapping the nav buttons changes the input_text assiciated with that user. Which in turn causes the screen to change.

          [[[
            //debugger;

            var hauser = user.name.replace(/\W+/gm, "_").toLowerCase();
            var inputtext = "input_text."+ user.name.replace(/\W+/gm, "_").toLowerCase() + "_page";

            if (states[inputtext].state.toLowerCase() == this._config.name.toLowerCase())
              //return "#1A577D";
              return variables.active_color;
            else
              //return "#01466A";
              return variables.inactive_color;
          ]]]```

[sudden lotus]

hi, is there a way to set colours used by the history graph card? i thought it was based on the order the items are in the config but that dosnt seem to be the case

the colours stay the same for each entity no matter what order they are in, i would like the bar graph colours to match up with the line graph colours below

(the IP bar graph is there as a substitute for a "connected" sensor)

[elfin cedar]

hi guys
how can i edit this so it can step up a hole degree not half?

[left sentinel]

Looks like the stock thermostat doesn’t support step size, but several others do.

[quartz swift]

Is there a way to remove the icon from a chip?

[mortal delta]

Hey all, are there any Browser Mod gurus here? I want to have a custom pop-up when I click on a template card. Reading through the documentation I'm not sure what the best way to achieve this is - a service call seems a bit convoluted. I saw one example involving firing a DOM event, but it calls for a script. I couldn't understand this example.

[tribal galleon]

I think you can use yaml icon: null

[quartz swift]

No, gives me an error 😦

I just want the "Noticeable discomfort" from the thermal comfort humidex perception sensor.

I tried using a template with the content of

{{ states('sensor.icantremember') }}

But that gives me "noticable_discomfort". Idk how to get the human readable out

[golden mist]

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

[median rover]

Ran into a weird issue. Have a fairly fresh home assistant install on a Synology virtual machine. I recently updated the home assistant core to the most recent version and my dashboard resources disappeared.

I can re enter them-not a huge deal- but annoying to have to do every time

[vast crane]

The bar graph colors change with the state, not with the entity order. If they change state there will be multiple colors in one line.

[sudden lotus]

Ok, what about for ones that have a known set of states? The ip will never change but i get HA dosnt know that so what if i made a template binary sensor that was just if the ip is available?

[vast crane]

I think you can maybe set theme colors for individual states, but you'd have to check the theme documentation.

[golden mist]

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

[minor plank]

Hey. I wanted to display my phones battery level in my minimalist dashboard but nether the battery card nor the custom bar card (which i thought looked even cooler) work. As you can see I've included the custom card and set it up like in the example code. And the entity holds the correct values (i think)

[elfin cedar]

how can i add a diferent one

[left sentinel]

Simple-thermostat is in hacs, I believe.

https://github.com/nervetattoo/simple-thermostat

step_size number: Override the default 0.5 step size for increasing/decreasing the temperature

[tribal galleon]

I think I have some examples posted on this channel for browser mod pop-ups. Search this channel for my username and "pop" should give some results. (I'm mobile at the moment and can't find them.)

[mortal delta]

I figured it out, cheers 😊

[tribal galleon]

I'll check it out and figure something out for you. Working a double today so it will be a little while.

[mortal delta]

Wasn't obvious from the documentation how to call via the Dom method.

[tribal galleon]

Yeah. I think that is the older method. The service call browser-mod.pop-up (or something like that) is easier.

[tacit flower]

Anyone good with customizing entities? It seems like none of my customizations will show up. I edit configuration, reload customizations, reload the browser window (just to be safe) and yet nothing appears in dev tools. I chose the ridiculous icon (for a light) just so it would be obvious when it shows up.

[quartz swift]

Thanks mate. I really appreciate the help

[gentle gyro]

Hello, I'm trying to recreate an array of buttons like the one in the screen attached to this message.
I'd like each button to select the value of a dropdown helper but I'm stuck at the coloring part, I don't know how to change the button look so that it looks toggled

[golden mist]

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

[gentle gyro]

here's what it looks like

[fiery ledge]

could the update for card-mod to 3.4.0 have also caused this warning on fold-entity-row https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/5596?u=mariusthvdb next to breaking the mods for sidebar?

[small ferry]

Hi! Any expert here on floorplans? I made one using the standard floorplan card, tried adding like a state-icon with a tap-action to toggle, but it keeps showing me the "more info" card when i tap it. I want it to just toggle.

[sudden lotus]

ok ill have a look

[buoyant furnace]

how do i get this text color changed

using dark theme, can barely see it

[vast crane]

I believe that's codemirror-string, which you can set in themes.

Though that's not the default dark mode color... not sure why yours looks like that.

[buoyant furnace]

i think there was a way to go on the source of the html page or something to see which code relates to that section exactly ?

[distant phoenix]

Hello, I'm experiencing a weird bug where when I edit UI and press Done it redirects me to the previous page (like hitting the back button in the browser). Is this a bug or is it just me?

[vast crane]

I think that's a known bug. Maybe Firefox only IIRC?

[distant phoenix]

Yeah I'm using FF. I'll try to find the issue on github

[tribal galleon]

I also use FF and experience the same.

[tribal galleon]

Sorry for the late reply. (Clocked in to work at 0600; clocked out at 2110.) So I was close when I thought icon: null would work; it is actually icon: none. However, with the entity chip, the space for the icon is still there. If you're looking for just the state of the sensor, the template chip could be a better option. By default, it has nothing defined and you have to define everything. ```yaml

• type: entity
  entity: sensor.s22_ultra_battery_level
  icon: none
• type: template
  content: '{{ states("sensor.s22_ultra_battery_level") }} %'

[elfin cedar]

thx

[quartz swift]

No worries mate. I appreciate your help.

I tried this approach before but I am trying to get the thermal comfort humidex perception string.

If I use states(sensor) it gives me a value of "evident_discomfort". The entity chip shows "Evident Discomfort". I don't understand how to get the human readable value?

[vast crane]

believe that's a state translation. If you're in JS and you have the state object and the hass object, you can try hass.formatEntityState(stateObj)

[tribal galleon]

Looking through the Github for thermal_comfort, I found the translations files. In en.json, I found the translations from the state to English at Line 84. (There are other languages available if you need a different one.) So, in theory, this could work for you: ```yaml
content: |
{% set humidex = states("sensor.thermal_comfort_whatever_the_rest_is") %}
{% if humidex == "comfortable" %} Comfortable
{% elif humidex == "noticable_discomfort" %} Noticeable discomfort
{% elif humidex == "evident_discomfort" %} Evident discomfort
{% elif humidex == "great_discomfort" %} Great discomfort, avoid exertion
{% elif humidex == "dangerous_discomfort" %} Dangerous discomfort
{% elif humidex == "heat_stroke" %} Heat stroke possible
{% else %} Unknown
{% endif %}

Or... what karwosts suggested as I was still typing. 😆

[quartz swift]

How would I write this in JS? I just wanted to use the mushroom cards and not write my own card

[dark dirge]

Mushroom cards use Jinja

[quartz swift]

Thats what I thought, so I can't use the JS method. So the hardcoded list seems my only way?

[dark dirge]

Yes, I believe so

[quartz swift]

Thanks 🙂

[stable void]

Is there any way to create a dashboard with a pulldown at the top that selects a specific area, and then displays all the devices in the area once it's selected?

[small loom]

What I did for this is make one view with the "subview" option set for each room, then the main view just has a button for each.
Main view looks like this https://pastebin.com/qi5kqF9F

Looks like this. Main: https://i.imgur.com/J1JJ89v.png sub: https://i.imgur.com/UhAybsq.png

(designed very much for a device with a specific screen size, to fit everything on one page without scrolling)

[stable void]

That adds maintainence cost if I add new areas to control, I have to add them in their manually. It's not a bad solution, but I was hoping there was a way to generate it all automatically.

[small loom]

Fair enough. I'm carefully curating what devices and what controls for each. There are plenty of devices not shown

[stable void]

I've got 5 tablets I intend to scatter around the house, and wanted other people to be able to use them, so the interface is minimal and simple for them. I was hoping for an "Other" tab where I could select an area and see all the devices/sensors in that location.

[zenith stag]

How about Auto Entities? You can use filters to show only the devices/sensors you want

[tulip basin]

Any good way of bringing up a virtual keyboard? Have a full kiosk touchscreen in the kitchen on a pc running Debian. Voice will work sometimes but music and others may hinder it and a keyboard on demand would be great. Button to launch the virtual keyboard or even better would have been a lovelace keyboard card

[hidden needle]

Using the mushroom-template-card is there a way to have 2 badges simultaneously?
I was using this card for my living room, but now I have a presence sensor AND a door sensor, and not sure how to make it fit without adding new cards :S

[left sentinel]

Oh noooo. Mushroom light cards in almost matching configuration, its so close.

The vertical orientation is within pixels of the same height as the default-with-control.

Oh, thank god, Fill Container on the right helps:

The fact that it jumps a few pixels when left hand turns on and off still isn’t good, but at least the static screen isn’t awful.

[left sentinel]

I guess I’m just gonna not have those controls on this screen — they’re on long press anyway, and this is going to be a wall panel (spare phone) that The Fam has to be able to use as well.

[thorn ridge]

Hey guys, im trying to have my secondary text in a mushroom card to move because its too long. So for instance this a movie title that doesnt fit a card wil move like a digital commercial board, the code i used for this looks good, but its not working. Am i overlooking something? https://pastebin.com/dxN8uXTq

[tribal galleon]

I'm not the best at understanding how CSS works. I have been able to inspect a couple of cards and figure a few things out, but still struggle with it most of the time. Looking at your code, the problem that I see is the .marquee. This is going to look for an element called marquee which doesn't exist. The secondary field is held in span.secondary but I don't think it will use an animation. I imagine this kind of functionality has to be built into the card.
I found a post in the Mushroom thread (#8726) where someone was trying to do the same thing. They used a stack-in-card to "merge" multiple cards but used a custom:button-card with some inline JavaScript and HTML to make a functional marquee. Perhaps something along these lines can get something working for you. (With a bit of work, a custom:button-card can be made to look like a Mushroom card if that's your design style.)

[thorn ridge]

Hey @tidal hearth thanks for the response, ive also been trying to fix this using Ai but to no luck

[tribal galleon]

That probably isn't going to give the best results. The code you posted would probably work with HTML and CSS but not with HA.

[thorn ridge]

thats sad

[vapid field]

I can't seem to find how to get custom card in HAOS... do you install HACS manually and get them through there, or install them manually... or is it not possible??

[vast crane]

They can be installed either with HACS or manually. HACS just automates the manual steps for you.

[vapid field]

I was expecting HACS to be in the HAOS addon store, but it's not... it must be installed manually?

[tribal galleon]

https://hacs.xyz/docs/setup/download

[vapid field]

Yeah, way easier than it used to be!! THanks!

[tribal galleon]

I don't think the stock button card can do what you want. You would need to apply some card_mod to it or consider using a custom:button-card which has some styling capabilities. Both options are useful to have available to HA.

[tribal galleon]

@pine loom https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/88

[pine loom]

I found a weird workaround but if that fixes it, it would be better so I’ll try that later

[tribal galleon]

I would say this is a more "official" fix. That theme pretty old and I think HACS works a bit differently now. I helped someone with this not too long ago (but I cannot find the conversation).

@pine loom Found the conversation. Was in #general-archived and not in here. #general-archived message

[gentle gyro]

Okay thanks!

[drifting canyon]

Where do I put the issue of the thermostat card not pulling the correct icons for the preset modes unless the mode name is all lowercase?

Which by default ecobee capitalizes Home, Away, and Sleep

[gentle gyro]

@tribal galleon it works thank you for your advice!

[golden mist]

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

[flat sphinx]

formatting is hard... haha

[knotty abyss]

I'm trying to figure out the best combination of cards here. Looking for some input. I hav a wemo switch that turns the lights on and off on a fish tank I have. I took a picture of it when th lights are on and when they are off. I'd like to show the picture based oon the on or off AND I'd like the picture or card to toggle the switch as well. Tried picture entities but that just takes on image and makes it grayed out. I was trying to do a vertical card with 2 conditional cards but that wasn't working either.

[tribal galleon]

If you want to take it a notch further, I would suggest the stack-in-card. Check out this example that I posted. (Basically, it will make those four cards look like one.) #1185873894159171605 message

[gentle gyro]

Ooh thank you that was exactly what I was looking for

[north sequoia]

HI All, I am a bit flummixed how to make the View titles change colour on a state. I have tried so many different yaml tags but nothing 😦 Anyone got a hint how to make this dynamic ? ( I want to make the icon RED if the Alarm Helper is ON)

[tribal galleon]

I don't think the header is customizable in the way you're looking for. Best that you might be able to do is to design your own header (perhaps in a vertical horizontal stack card (or layout-card with buttons to navigate) and hide the stock header.

[tribal galleon]

Check out the custom:button-card. You can define different styling states (on shows one picture; off shows the other). The default tap action would toggle the Wemo switch.

[north sequoia]

thanks.. anything is worth a try

[knotty abyss]

Thank you, let me try this out

[tame oriole]

i need a better way to display my speakers, what are people doing today? right now im using a grid card for: speakers, speaker groups, TVs (3 total). i dont have a good way to divide them either so they look all mushed together.

[knotty abyss]

Oof now I gotta figure out the yaml haha

[bronze spindle]

Still having some issues getting this markdown card to get rid of the background from it...

Just a simple bit of style code that was working before some recent updates.
style: |
ha-card {
background: none;
border: none;
}

Anyone got any ideas how to remove this background?

[bronze spindle]

I'm not using card-mod though.

• type: markdown
  content: <h1><font size="5" color="#ffffff">House</font></h1>
  style: |
  ha-card {
  background: none;
  border: none;
  }

even with card-mod, it still shows the background

[tribal galleon]

That is using card_mod. The Markdown card does not have its own style section. yaml type: markdown content: <h1><font size="5" color="#ffffff">House</font></h1> card_mod: style: | ha-card { background: none; border: none; }Seems to work for me. (I have not updated card_mod yet.)

You can also try transparent instead of none.

[bronze spindle]

yeah, I've updated my card-mod the other day and it's showing that background now with it being applied to the code.

transparent didn't do it

[tribal galleon]

Can you confirm if the card_mod is working? Try changing it to red and see if you at least get that.

[bronze spindle]

nope, not gettting a red bg either

[pine loom]

Iam using this hue like light card https://github.com/Gh61/lovelace-hue-like-light-card and i want the cards to look the same as all my other cards but even with a theme: in the configuration it still looks like this.
Its also in the ressources

[tribal galleon]

Can you post your yaml for one of the cards? Looking at the doc, that card seems unique on how it handles colors and backgrounds though it shows that you should be able to use a theme with it.

[quartz swift]

visual editor not supported when using card mod?

[tribal galleon]

Visual editor only works with elements designed for use the card. Card_mod is extra. You should be able to return to the visual editor by clicking the icon in the upper left.

[buoyant furnace]

any reason why a card would work fine on the app but not on wall tablets ?

[tribal galleon]

Is it a newly added card? You might need to refresh and/or clear the cache on the tablet.

[buoyant furnace]

did refresh did clear cache

it works on my app, on computers

but not on 2 wall tablets

[tribal galleon]

What card? What kind of tablets?

[buoyant furnace]

one is surface pro and and one is redmi

card is config template card

https://github.com/iantrich/config-template-card

[tribal galleon]

Are you able to try a different browser on each tablet?

[buoyant furnace]

moment lemme grab the redmi

so the redmi uses wallpanel

[quartz swift]

    card_mod:
      style: |
        ha-card {
          justify-content: center;
          --chip-icon-size: 40px;
          --chip-height: 64px;
          width: var(--chip-height) !important;
          border-radius: 50% !important;
          --chip-box-shadow: none;
          --chip-background: none;
          border: none;
        }

[buoyant furnace]

mmm, logged in from chrome

that worked

ok restarted the thing completely, wallpanel now shows it

il try the same on the surface pro

[tribal galleon]

@quartz swift Yeah. You're going to get that when using card_mod. It's not necessarily a bad thing but it might break the Visual Editor. I just looked at one of my Mushroom cards and it wouldn't let me switch back to the VE even though an Entities card did. Honestly, once I started understanding yaml, I don't even use the Visual Editors any more. I just read through the docs and pull out the settings/features that I want. I may check out the VE to see how it might format something or get a better understand of an option's context but that is about it.

[buoyant furnace]

No luck on the surface pro

[quartz swift]

I forgot the template chips content tag (its content) and was hoping to just go back to VE to set it up

[tribal galleon]

Cut the card_mod section to your clipboard. VE should be active again. Just don't forgot to put the card-mod back when you're done

[buoyant furnace]

not sure how to go about it , its not really a typical browser on that one, its sort of a windows store plugin called Kiosk

[quartz swift]

Its across 4 chips in a chip card in a vertical stack hahaha little hard to cut out and back

[tribal galleon]

@buoyant furnace Is it the Kiosk Browser by M$? Description says it is built on Edge. Are able to try Firefox or Chrome just to see what it does?

[buoyant furnace]

yes correct

logged in from chrome

[tribal galleon]

Create a new card strictly for testing purposes, get the code you want and then just don't save the card.

[buoyant furnace]

doesnt show the card

strange the other tablet showed it fine on chrome but this one wont

[quartz swift]

I have read card_mod is css, I am a firmware engineer so not much css for me... Is all of this documented anywhere? I want to replicate this on a mushroom template card

[tribal galleon]

The syntax is a bit different with the Mushroom Template card compared to the Chip cards. No real documentation. Really, more looking through the forum in the Mushroom Cards post. I have a couple of examples that I can refer to and see if I can get that converted to a Mushroom Template card.

[tribal galleon]

Given the fact that two browsers are giving the same problems, I'm going to go out on a limb and assume it is something at the operating system level that is causing an issue. What that might be? I have no clue. Every once in a while, on Android tablets, the Webview plugin (or whatever it is) will break stuff. Not sure if there is any kind of correlation? Has this card ever worked on the Surface before or it this something new you're working with?

[buoyant furnace]

its a windows tablet

and its acting weird

all of a sudden i logged in from edge

it shows the card

from chrome

wouldnt show the card

from the kiosk separate user that uses edge, doesnt show the card

ug

strange

[tribal galleon]

Wonder if something is screwy with the Kiosk user account. Are you able to run the Kiosk app from the account that was able to show the card in Edge?

[buoyant furnace]

its a kiosk feature in windows

not an app, that you basically choose an app to run as kiosk mode

then you choose microsoft edge

stupid microsoft, isnt there wallpanel or kiosk browser for it ?

[tribal galleon]

I, personally, use Fully Kiosk Browser on Amazon Fire tablets but it is only for Android and iOS, IIRC. I was recently considering a Surface to have a larger screen but didn't find something similar to FKB. (In all honesty, I did not look very hard; it was a spur of the moment thought.)

[buoyant furnace]

yes thats the reason why i got this one

was bigger than the rest

but windows i a huge downside

terrible

this sux, really need that card displayed on it

and i doubt the wife would appreciate the idea of an upgrade now lol

[tribal galleon]

Can you post a pic of what the card should look like? That card seems to be abandoned and doesn't seem to have any active forks. Could you use an alternative like custom:button-card or Mushroom card. Both of which can be (relatively) easily templated and styled.

I have read card_mod is css, I am a

[buoyant furnace]

ok so this messed up, now the 1st tablet , the redmi, stopped showing it ,and showing the error all of a sudden

like this

[buoyant furnace]

i was following this guide
https://seanblanchfield.com/2022/02/virtual-energy-meters-with-powercalc
i want it to show power metering by circuits as shown in the screenshot

live updating

Perhaps there's another way to get it done?

[tribal galleon]

That looks like some that you should be able to recreate with the auto-entities card with a descending sort order. I'm not sure how you would be able to calculate something like Office Lights which I'm assuming is a group you made with PowerCalc. Unfortunately, it seems like the work that you've done with PowerCalc cannot be transferred over into this card. (Link plus Mariusthvdb's reply under that.)

powercalc:
no workaround possible. we explored that and its because of the way the expand functionality is implemented in HA. btw, you can also expand light groups, with domain light.

[buoyant furnace]

no i wasnt using powercalc at all

i just have separate sensors for each circuit

office lights has a ct clamp sending the readings through esphome-emporia

[buoyant furnace]

the auto entities card can act live ? as in the highest reading goes on top ?

or actually its the bar card that does that and im confusing things ?

[tribal galleon]

The bar card is going to be the hard part. It is still do-able but I, personally, have not had good luck making stuff like that work. This post kind of shows where someone got a bar-card to work. It may take a little bit of work but, I think in the long-run, the auto-entities card could be more useful.

To quickly get it working, you could simply throw all the entities that you showed above into the card. That should be enough to reproduce the screenshot above (just without the bar-card part).

[buoyant furnace]

what does the config template card even do in this case ? can the bar card run without it ?

isnt the config template card just there for the colors etc ?

[tribal galleon]

I imagine you have a template that takes the entities and value, sorts it, and then feeds that information individually into a bar-card. and just repeats the feeding process The auto-entities card should do the same thing (but hopefully be easier to set up)...

[buoyant furnace]

So my existing card uses bar card and config template card?

Auto entities can replace them both?

[golden mist]

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

[pine loom]

type: custom:hue-like-light-card
entity: light.msl320_3d71_light_bulb
theme: ios-dark-mode-blue-red

I cant format it on mobile sry

[dusky haven]

Got a really basic question abotu card_mod. In the examples on various pages by the author, sometimes the "card_mod:" line comes just before the "style: ha-card" line, and sometimes the examples just skip the "card_mod" line entirely and skip directly to "style:". How do you know when to use it and when it can be skipped?

[dark dirge]

see the latest release notes: https://github.com/thomasloven/lovelace-card-mod/releases/tag/v3.4.1

[dusky haven]

Ahhh of course it was changed two days ago. Guess I have some updates to run. Thanks.

[tribal galleon]

style: |
  ... styles go here...

has not been the recommended way to do things for more than two years and has been causing trouble since the start, so I didn't think twice about removing it.
https://github.com/thomasloven/lovelace-card-mod/issues/332

[polar kelp]

Where did you see an example without card_mod? I really tried to remove those when 3.0.0 was released, but I may have missed some?

[tribal galleon]

I don't think he was referring to seeing only style: in the card_mod docs. I've seen it scattered in various examples throughout the net. Came across one example last night for hue-like-light-card but I think it has been abandoned years ago. https://github.com/Gh61/lovelace-hue-like-light-card#slider-type
EDIT: Missed the part where he said various pages by the author.

[shut pollen]

can someone help me with card-mod on a grid card? I'/m just trying to change the font of the title - but i cant seem to get it to work. this is what i have so far :

[polar kelp]

You did of course read this?

NOTE: card-mod only works on cards that contain a ha-card element. This includes almost every card which can be seen, but not e.g. conditional, entity_filter, vertical-stack, horizontal-stack, grid.

[shut pollen]

ah well there you go

nevermind then

[polar kelp]

All is not lost, though. Take a look at the readme again.

[dusky haven]

I was looking at examples found on Google. Some examples were very old. You can't be expected to fix them all. All the documentation currently on the card_mod Github page appears to be correct from what I can tell. I was unaware of the recent change which resulted in my confusion. When making custom dashboard sometimes, I used style: and sometimes I used card_mod: without thinking about it and it always just worked. I didn't realize I was using it wrong all along.

[dusky haven]

I also opened an issue on in the custom:button-card repo by @late anvil. It supports card-mod and I use it pretty extensively. I alerted him to the change as well so he can update his docs.

[polar kelp]

No. That uses its own system, and styleS rather than style specifically because card-mod was hogging that keyword for everyone.

Ah. I see what you mean now.

Ooooh. Dino is typing... this has me worried

[tribal galleon]

I was just about to say the same. Was scrolling through the docs to double check. But, I did find one example where card_mod is used.

[bright jolt]

Anyone know why the lightbulb button changes width when I change a image width?

(The clickable area becomes bigger on the button and takes over the entire picture)
This is on the picture elemental card.

[atomic glacier]

The ancient (more than two years outdated) <--- C'mon @polar kelp , a bit brutal for us elderly folks eh? 🤷‍♂️ 😂

[polar kelp]

To be honest, I just forgot about the shorthand when I redid the background workings for 3.4.

I could have handled the transition nicer. Perhaps.
But I'm not going back on it now. It's just too much work to maintain both ways.

[dusky haven]

I wouldn't either. What's done is done. It also easy enough to fix once you realize what's going on. Adding a card_mod line isn't that hard. 🙂 Love your stuff. I use it all the time.

[atomic glacier]

Should I be updating this as well?

          Tablet:
            type: custom:card-modder
            style:

🤖

[polar kelp]

You probably should. Your grandchildren should be able to help you.

( actually just found this in button-card too https://github.com/custom-cards/button-card/tree/master/.devcontainer/www/lovelace/lovelace-card-modder)

[zenith stag]

Speaking of card_mod, I need to find that long thread about styling the dashboard for christmas. It had some good card_mod examples in it. Is there an "easy" way to find old thread without havijng to scrool this feed for x minutes? I tried searching but no luck just yet

[bright jolt]

Haha. I'm helping my dad setup home assistant 😅

[zenith stag]

ah perfect, thanks

[zenith stag]

I have a timer helper, which state is shown as a countdown in the lower right corner of this card. Can I change how this is displayed? I would like it to always use 4 digits . So instead of 29 it would be 00:29

[bright jolt]

I'm new to HA, so does
Anyone know why the lightbulb button changes width when I change a image width?

(The clickable area becomes bigger on the button and takes over the entire picture)
This is on the picture elemental card.

[bright jolt]

Also anyone got tips how to make a good floorplan? Should I stick to Sweet home 3D and Gimp? Or something else

[dusky haven]

I just went to my home builders website and downloaded the floorplan for my model from there. Made a couple tweaks from some customizations we had done, and I was good to go. I usually use Paint.NET for basic image editing .

[bright jolt]

Ah. So like cut out the rooms?

Crop*

Because I have my house Drawing but I see people use other programs

[dusky haven]

Yea. I mean once you have the JPG you can do whatever you want. This is where I got mine. Your builder may or may not have a similar website. https://www.allenedwin.com/floorplan-detail/Integrity-2000-1583430

[bright jolt]

Ah. I don't know where my parents got our house at. I'm the person doing this for my dad actually so I don't have all the resources needed.

And it might not come with a virtual tour because we built it 🥲

So it's a bit challenging modeling it

Is there any videos/guides your recommend me to follow?
Any softwares?

[dusky haven]

There is an app called Foor PLan Creator i the Google app store. I played with it a while back, but since my builder already did 90% of the work for me I kept it simple and just used their plans.

[bright jolt]

Does it create a file or something?

am I able to import it on a software

[dusky haven]

Most graphic software (if not all) can save files and JPG, GIF, or PNG. From there it should be easy to get your floorplan to display in HA>

[bright jolt]

Alrighty

Also do you know why. When I have 2 mdi:lightbulb or how it is and I change Width on a image one of the buttons clickable area expands but it's Invisible so it covers the entire picture

[quartz python]

Hello all. I have a door sensor that has open close states. The icon in Lovelace doesn't change color how can i define that the icon should change with the state?

[dusky haven]

Take a look at this. https://github.com/custom-cards/button-card

[wicked sapphire]

can someone please help me with installing https://github.com/jcwillox/lovelace-paper-buttons-row

Im sure its really simple but I dont know what this means

Installation
resources:

• url: /hacsfiles/lovelace-paper-buttons-row/paper-buttons-row.js
  type: module

[dark dirge]

Don't worry about it. It should be done for you if you installed via HACS

[wicked sapphire]

ah thank you

when I click add card I dont see an option for paper buttons row

[dark dirge]

I don't see where it says you can do that

Add a manual card and follow the documentation

[tribal galleon]

That's probably going to be tricky to do. The problem, I imagine, is that formatting is handled within the code of the card that does the real-time countdown. The only other card that I've seen that can do that is the Entities card. I had tried to use custom:button-card custom_fields to replicate the countdown, which it would show the value but not actually countdown. It would only show the current value whenever the screen processed and update/refresh. In the end, I ended up embedding an Entites card within the custom:button-card.

[tribal galleon]

This is what it took to create a field that would show how long a light has been on. It updates at least every minute. If under an hour, it reports back the minutes; over an hour, it reports hours and minutes. Under one minute was sporatic since it only updated only whenever something updated the button (tirggers_update: all). (Though I should expand it to handle days since one of my lights was on for around 52 hours...)```yaml
runtime: |-
[[[ if (entity.state === 'on') {
var last_changed_in_minutes = ((new Date().getTime() - new Date(entity.last_changed).getTime())/60000).toFixed(0);
var days = Math.floor(last_changed_in_minutes / 1440);
var hours = Math.floor((last_changed_in_minutes - days * 1440) / 60);
var minutes = last_changed_in_minutes - days * 1440 - hours * 60;
if (last_changed_in_minutes < 1) return;
if (last_changed_in_minutes < 60) return last_changed_in_minutes + " min";
if (last_changed_in_minutes >= 60 && last_changed_in_minutes < 1440 ) {
return hours + " hr " + minutes + " min"; }
if (last_changed_in_minutes >= 1440) {
return days + " d " + hours + " h " + minutes + " m" ; }
} ]]]

[tribal galleon]

Updated to handle days.

[wicked sapphire]

for some reason there is always a spinning blue loading circle on my picture element card. Everything is quick and fully loaded but that loading symbol is there for some reason. Any idea how I get rid of that?

[dark dirge]

Even outside the card config window?

[azure canopy]

Trying to replace my update browser-mod pupup from mushroom cards to tile cards with the update feature. But unfortenately the buttons don't respond.

This is the code: https://dpaste.org/SPH7X

Is this an issue in my code, or should these buttons just work, and is it maybe an issue in browser-mod?

the popup pops up as a tap action on the yellow button with the 1

Oh.. and now it works

Probably Browser Cache..

[quartz swift]

Is there a good table card?
I want to display name, template for time since updated, rssi, and battery for my bthome sensors. Currently I am using a chip with a spacer but the data isn't aligned

[craggy shuttle]

I feel like this should be such a simple fix but I can't wrap my head around it.. Could someone please tell me how I can have this open more info on the second sensor?

                    entity_id: binary_sensor.washing_machine_status
                    templates:
                      - blue_on
                    tap_action:
                      action: fire-dom-event
                      browser_mod:
                        service: browser_mod.popup
                        data:
                          title: Washing Machine Status
                          entity_id: sensor.washing_machine_current_power```

[zenith stag]

Ok I see, thanks. I'll dig around a bit and see what I'll end up with. In the mean time, I replaced the bar with this cool circular countdown instead.
Copied and adjusted from this thread: https://community.home-assistant.io/t/display-remaining-seconds-of-timer-in-frontend/119835/68?

[hard blaze]

Wow how did you add that progress around the icon? Smooth animation

[zenith stag]

check the link

[wicked sapphire]

Yes it still loads outside of the config window. And it spins like that on all our devices looking at the dashboard

[hard blaze]

Lol I'm blind 🤣

[upbeat valve]

I'm using the Mushroom thermostat card, and when the heat kicks on, it changes the little indicator to heat, which is fine. But I'd rather it change the background of the whole card to a red color so it's a little more obvious. How do I edit the card itself to see if I can make this happen?

[normal ibex]

Can fully kiosk browser dim the screen brightness to 0% after certain time (20sec) and wake tap at 100% brightness?

[gloomy iris]

I am trying to add some information to the state of a slider-entity-row but I cannot figure out how to adress it.
According to dev tools it is /html/body/home-assistant//hui-dialog-edit-card//ha-dialog/div[1]/div[2]/hui-card-preview/auto-entities/hui-entities-card//ha-card/div/div[1]/slider-entity-row//hui-generic-entity-row/div/span
I can successfully add the information to e.g. the name using:

card_mod:
  style:
    hui-generic-entity-row $: |
      .text-content::after {
        content: " ({{state_attr(config.entity,'current_temperature')}} °C | {{state_attr(config.entity,'current_humidity')}} %)";
        color: magenta;
      }

But my attempts to target the state all failed 😦

Should it not just be .div.spaninstead of .text-content (or maybe even just .span)? NEither worked for me.

Unfortunately AI search engines had the same, incorrect idea as me 😦

[tribal galleon]

I run FKB and I do not think that is an option. I use Amazon Fire 10s which do not wake the screen on tap. I have an automation set up to wake the screen when motion is detected and turn off the screen after a few minutes. I also have an automation set to adjust the screen's brightness depending on how bright the room is.

[arctic field]

Can I change name of default Overview dashboard in menu?

And one more question. May I use some animation to transition between Main view and sub view?

[vast crane]

I think you might need browser mod for that? Otherwise generally core has no means to control the frontend.

Don't think overview can be renamed, but you can make a new dashboard with a custom name, and hide the overview I think.

[shy olive]

Hi, I am trying to get the default light detail card to show up in a browser-mod popup. In the configuration, I can define any type of card to display in an overlay, but I cannot find what card type to show for the light detail.I want a light like the picture to show up when I open the card popup. Is there any way to achieve this using the default configuration or would I need some type of lovelace plugin?

[fossil solstice]

is there a way to restore the overview to being controlled automatically

i cleared it on accident

okay figured it out.. whew

[bright jolt]

Anyone know how to make a good floorplan? At this point I've watched every tutorial and it ends up failing.

Anyone got a guide i can follow

[bright jolt]

How did u make your floorplan??!

[wicked sapphire]

I followed this video. I never made my actual image in 3d since my apartment already had this floor plan image available online. My next to do is creating the floor plan from scratch so the lighting looks better

https://youtu.be/3Umo0vkLxRY?si=eAJGDLJ1cKSkY2v-

[bright jolt]

Oooh

Also do you know why. When I have 2 mdi:lightbulb or how it is and I change Width on a image one of the buttons clickable area expands but it's Invisible so it covers the entire picture

Because my room pictures needs width: 100%

[zenith stag]

I think I've seen you ask this same question 3 or 4 times now in the past couple of days, without any respone. I think you need to provide some examples/screenshot because I have no idea what you are talking about 🙂

[bright jolt]

I joined yesterday. Sorry also but I get no response :/
I'll provide some screenshots tomorrow if I don't get it fixed.

[quartz swift]

Whats going on here

    Error while processing template: Template<template=({% if (is_state('sensor.air_purifier_air_quality', '1')) %} blue {% elif (is_state('sensor.air_purifier_air_quality', '2')) %} green {% elif (is_state('sensor.air_purifier_air_quality', '3')) %} yellow {% {% else %} red {% endif %}) renders=6>

Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 513, in ensure_valid
    self._compiled_code = self._env.compile(self.template)
                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/src/homeassistant/homeassistant/helpers/template.py", line 2663, in compile
    cached = self.template_cache[source] = super().compile(source)
                                           ^^^^^^^^^^^^^^^^^^^^^^^
  File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 768, in compile
    self.handle_exception(source=source_hint)
  File "/usr/local/lib/python3.11/site-packages/jinja2/environment.py", line 936, in handle_exception
    raise rewrite_traceback_stack(source=source)
  File "<unknown>", line 8, in template
jinja2.exceptions.TemplateSyntaxError: unexpected '%'

[golden mist]

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

[lyric prairie]

You have a double {% after “yellow” which throws a template error

[quartz swift]

Where is the double {% though

[young ice]

Right after the word "yellow" %} yellow {% {% else

oh, interesting, it's there in the error... but not in the yaml you posted...

[quartz swift]

icon_color: |
      {% if (is_state('sensor.air_purifier_air_quality', '1')) %}
        blue
      {% elif (is_state('sensor.air_purifier_air_quality', '2')) %}
        green
      {% elif (is_state('sensor.air_purifier_air_quality', '3')) %}
        yellow
      {% else %}
        red
      {% endif %}

I linked the whole template

where is the double {%

[young ice]

Yes, that's why I said "oh, interesting, it's there in the error... but not in the yaml you posted..."

what is this going into? I'm not aware of a card of type: template, closest I know of is type: custom:mushroom-template-card

[quartz swift]

mushroom chip

[young ice]

the only problem I currently see with your YAML is that your indentation is wrong

any chance that you previously had the extra {% in your template, which would have logged an error in the Home Assistant logs, then you fixed that, but now your indentation is wrong so it's not working? But you are still seeing that old error log?

[quartz swift]

Whats wrong with the indentation?

[young ice]

the first line is fine, every line after that is indednted 2 spaces too many

so the "i" in "icon" should be aligned with the "t" in "type" above it

[golden mist]

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

[dark dirge]

I think the problem is that there is no card called 'template'

[young ice]

that's a thing for the mushroom chips card

[quartz swift]

Apparently it reformatted in discord

[young ice]

can you give a screenshot of the entire card editor window? Getting tiny details peacemeal really limits the context that we have to understand what is going on

I mean, it really looks like it's rendering some kind of a chips card to the right of that text input window, but it's not included in the screenshot

you also have not included the entirety of the YAML definition, which is furthering the inability to help you

but I set up a chips card using your YAML except for the card_mod part (because you haven't included all of that yet) using a sensor that exists on my install and it seems to be working fine

[golden mist]

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

[quartz swift]

I can't post the whole yaml, too long

[golden mist]

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

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

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

[young ice]

and what is rendered on the right side of the text input?

you don't need to include all of the chips, we just needed all of the contents of the problem chip 😉

[young ice]

ok, so I'm confused... it looks like that chip is rendering properly... what exactly is the problem?

you are getting the correct icon, in the correct color, assuming that the current state of sensor.air_purifier_air_quality is 1

[quartz swift]

Everything renders no problem but I frequently get error in logs for this template. Why

[young ice]

define "frequently"

while you were adding taht chip/template, it probably logged an error a few times because as you were creating the chip, the template wasn't always in a state that is renderable, so that's somewhat expected

but now that it is done, and renderable, the error shouldn't be logging any more

[buoyant furnace]

Hi

question regarding this card

https://github.com/thomasloven/lovelace-auto-entities

ive included the entities i want displayed, but how do i make it show a custom name for each entity rather than the entity id itself

[buoyant furnace]

if im adding them under entities, im able to add a name prefix, but if under "filters" it wont accept the name prefix, what can be done ?

[tribal galleon]

If you don't mind writing your own HTML, the Markdown card can render tables with states, icons, and colors. Here's an example by Aaron:
#frontend-archived message

Here's a snippet of an example that I have.```yaml
type: markdown
content: |
<h1><center> Test </center></h1>
<table width="100%" style="margin: 0px">
<tr>
<td align="left"><font color="red"><ha-icon icon="mdi:format-align-left"></ha-icon>left</td>
<td align="center"><font size="3" color="white"><ha-icon icon="mdi:format-align-center"></ha-icon>
<b>{{- states('weather.home') }} {{ now().strftime('%A') -}}</b> </td>
<td align="right"><font color="blue"><ha-icon icon="mdi:format-align-right"></ha-icon>right</td>
</tr>
</table>

This is also a Markdown card with a table handling the layout.

[tribal galleon]

Check out the more-info-card to display the more-info dialog of any entity as a lovelace card.

[tribal galleon]

Revisiting this question because I just happened to notice it mentioned in the auto-entities thread in the forum.
I got the secondary field to scroll in a Mushroom Template Card.
UPDATE: This actually doesn't work very well. The marquee can only scroll the width of the field and does not factor in the actual length of text within the field. So a shorter secondary may scroll okay but a longer one will stop abruptly and restart. Next, the duration is hard-coded so a short text will scroll okay but something long will fly by.

[golden mist]

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

[winter snow]

i can't figure out on how to install the mushroom lovelace i tried via HACS ans manual but still won't show

[tribal galleon]

Refresh your browser and/or clear the cache.

[winter snow]

how do i clear the cache

[tribal galleon]

Depends on your browser.

[winter snow]

chrome

[tribal galleon]

https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop

[winter snow]

the card still don't show

i can't add it