#frontend-archived
1 messages · Page 20 of 1
you know a workaround for my issue
You're using https://www.home-assistant.io/dashboards/calendar/? or some other card?
i use exact this card
this views works in browser mode but not on tablet whether in the browser or app
works only on pc
any recomendations for making nice dashboards? with lots of sensors and switches?
With the original media card they dont do that... I would like another option.
They create like another window and in the background you still see the dashboard
You could have a look through hacs, but as Luca says the media browser is the easiest way.
Does anyone have any idea?
anyone using flex-table-card by any chance?
I have a card I've created using apex charts and entities cards(for the readout) and I'd like to get the header name on the right to be aligned right with card-mod; however I am seemingly unable to do so.
This is my code:
Yep, i do
All good I got what I needed working 🙂
Ugh. Realized "justify-content" was being set on the header, I tried align and text-align to no avail
justify-content: right;
}```
Result:
I looking for card to persistent notifications, I found this: https://github.com/gadgetchnnel/lovelace-home-feed-card but I'm interested into other options
Is there some kind of guide to how to create your own theme
or at least some kind of crib sheet to all the different paremeters? can't find anything on the official deocumenation
looking for help from the awesome ha crew...
Is it possible to use a {template value} to provide a url path in a card, eg, see example attachment picture glance card - I'm trying to compute the url path - this template renders the correct/dynamic url to the latest youtube video posted by DrZzs (via youtube sensor). the sensor works like a charm and I can see the correct url in dev tools... but if I drop the template syntax in the card, (tried a few variations), it never renders the actual url, just is treated as a text string? it doesnt like it if i remove the quotes too.
any help or suggestions, much appreciated, M
No I don't believe it supports any templates.
thanks - bummer - would be wicked to solve that to create cool automated dashboard of favorite youtubers and links to their latest videos - I'm sure plenty of other uses too
when i run {{ states('binary_sensor.multisensor_6_motion_detection') }} i get the output of on or off. is it possible to get the "clear" or "detected" like the logbook shows?
If you write the template that way
You can't get the translated states from a template
hm. so if it says on or off, im going to have to write something to replace the text basically ?
{% if is_state('binary_sensor.multisensor_6_motion_detection', 'on') %}
Detected
{% else %}
Clear
{% endif %}
?
Could be shorter, but yes
impress me by telling me how to make it shorter lol
iif(is_state(xxx), 'Detected', 'Clear')
if(is_state('on'),'Detected', 'Clear')
?
oh
{{ 'Detected' if is_state('binary_sensor.multisensor_6_motion_detection', 'on') else 'Clear' }}
That's one way. Read further
{{ iif('binary_sensor.multisensor_6_motion_detection', "Detected", "Clear", "None") }}
that one is really confusing lol
Just read the examples
i am
{{ iif(is_state('binary_sensor.multisensor_6_motion_detection', 'on'), 'Detected', 'Clear') }}
gotcha
I've been having this weird issue on Desktop for a couple of days now, every time I reload/open homeassistant my main dashboard doesn't load properly, but as soon as I resize the window (like in this example I open devtools to resize it) it fixes itself. I'm on 2023.7.1 using Firefox 115.0.2. Not a cache issue, but it only seems to happen with firefox#
Anyone had this issue where HA will load like this until I click on another dashboard or page in a dashboard? Not really sure where to even start in figuring it out
:')
You should start by removing all custom cards (especially anything with my name on it) and then reintroduce them one by one.
was actually thinking about you as I use card mod and some others, but it happens on absolutely any view even dashboards that have nothing of yours on them or absolutely any custom cards. The interesting thing is it only happens on first load, then never again unless I refresh
Still, though. My stuff does some really weird things sometimes, so that could still be it.
I'm patiently waiting to have to fix lovelace_gen again
Every frontend update is a pucker
thats pretty much the same issue i have as well. Resizing the window fixes it without issues, until I reload
I don't think I'm using any custom cards
see this
@faint vortex are you also using fireforx?
Yepp
hello i got a big problem with my frotend, i cant change everything or edit another cards in my dashboard 😦 anyone know this issue?
clear your cache and refresh the page
yep 😦
Could you be more exactly specific what you're trying to do and what's not working?
Does anyone know how I can use multiple Icons for one entity with multiple states?
I have door sensors Of which I am displaying the state on my dashboard [trough mushroom chips],
But what I want to do is use a different Icon depending on the current state.
is such a thing possible?
Does anyone know how I can use multiple
hey guys, i have quick one - i have a dashboard that i have sitting in a browser window on my pc that for some reason slows down very quickly - it gets to the point where it seems like if i leave it open for more than half an hour, it becomes unresponsive (kinda like how sites are sometimes like "do you want to wait for this page or stop it from loading?"), and the only way to fix it is to fully close that tab and reopen it
other tabs are fine - i can leave my energy dashboard running all day (it has power/energy flow cards which have movements happening all the time)
does anyone know of a way i can figure out why it's slowing down, or how to fix it? i'm still quite new to all this so i'm not sure what logs would help or even where to look, can but provide whatever's needed for it
Do you have a screenshot of your dashboard, with the list of cards you are using?
sure, here's a screenshot of my dash - is there an easy way to get a list of all the cards i'm using? most of them are mushroom ones - i know it looks like minimalist but they've been recreated with mushroom cards
most of the mini buttons are just light entities, but the tv remote and washing machine mini icon both open up a browser mod thing that has some stuff on it as a popup window
also the washing machine mini icon has a bunch of logic in it because it changes colour/state when the washing machine is on, and the middle bit spins too when it's on using some logic i found on a forum post somewhere
i suspect it's probably the remote, because sometimes when i load in, the lounge card takes a bit to load in compared to everything else, but i don't know how to prove it or check if there's a certain part of it that's slowing everything down
I would suggest to try and copy the dashboard to a new one, and remove things 1 by 1 to see if you can find the culprit
that's a good idea - i'll give it a shot
anyone use auto reload card from hacs ?
i got this in my card type: 'custom:auto-reload-card'
delay_in_minute: 1 it doesnt work
Is there a way to open the history tab instead of the more-info by default for a card?
anyone can point me to what card type and configuration is needed to create these cards for my blinds? Thanks
@modern yarrow I converted your message into a file since it's above 15 lines :+1:
tap_action:
action: navigate
navigation_path: /history
mushroom cards I think
Is it possible to place a custom: fold-entity card inside either a mushroom card or a custom: button card?
not sure about mushroom card, but button-card yes.
Quick question: Im looking to use the name of an entitity as a title and have a entities style card displaying all the values from the sensors, which are there for an overview of the irrigation control. I'd also like the icons to change color, which I know is possible via the custom button card, Im just not sure on how to structure it so it looks similar to the entities card with a title.
Similar to this, with the text in the title based on the following template: {{ state_attr('sensor.peach','friendly_name') }}
What are the current popular HA themes?
Is it possible to add in sidebar-card next to 'room name' the temperature sensor so I can know what temperature each room has?
for example where I wrote "here"
would you mind sharing a example. I have searched and can't find one where the fold entity is nested in the button card.
It's the same as nesting any other card
you don't need the fold entity example, just an example of a nested card
https://github.com/custom-cards/button-card scroll down to https://github.com/custom-cards/button-card#custom-fields, there's an example of nesting a sensor card
- type: custom:button-card
aspect_ratio: 1/1
custom_fields:
graph:
card:
type: sensor
entity: sensor.sensor1
graph: line
style: |
ha-card {
box-shadow: none;
}
styles:
custom_fields:
graph:
- filter: opacity(50%)
- overflow: unset
card:
- overflow: unset
grid:
- grid-template-areas: '"i" "n" "graph"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
entity: light.test_light
hold_action:
action: more-info
Hey everyone, I've been trying to find if anyone else is having this issue but ever since the last update to the mushroom cards anytime I tap a button on my dashboard the tap action is no longer working
cards:
- type: custom:mushroom-light-card
entity: light.living_room_lights
name: Living Room
show_brightness_control: true
collapsible_controls: true
tap_action:
action: toggle
when I tap it, it just does nothing
When in doubt clear cache and refresh page
yeah I've tried that on every device 🙂
Doesn’t tap action default to toggle on lights?
it was defaulting to the more info card
and well I don't need that on a kiosk 🙂
this is a nested card
@thick dagger I converted your message into a file since it's above 15 lines :+1:
So that took me to the history page. I was hoping to get to this history page.
rolled back to a backup prior to the mushroom update and my toggles work again
Try instead:
action: more_info
Yea that still just brings up the generic more info. Ex:
Was hoping to go straight to the history/log as shown above without the extra click. Since the Unlock/Lock functionality is handled by other buttons on the card.
If you're just looking for something simple there is the History Graph card. https://www.home-assistant.io/dashboards/history-graph/
type: history-graph
entities:
- entity: binary_sensor.living_room_door_on_off
hours_to_show: 6
show_names: false
title: Living Room Door```
If you remove the title it will only show the graph and times.
Is there a way to see when was sensor updated even if the same is the same as the last one?
Yes it has a last_updated property that contains that value. Where do you want to see it?
I was hoping to see every update in the history view, or something like that
I'm trying to debug the update rate of a sensor
The last_updated property isn't enough...
actually I think maybe I'm wrong. IIUC last updated isn't really when a sensor "updates", its anytime it changed a state or attributes. if state and attributes are identical, I think last_updated is not updated.
There's nothing that really tracks when something polls but does not write state.
How can I create a card that contains a button to navigate to another dashboard?
That's a basic feature of the button card. Just choose tap-action:navigate, and choose your dashboard from the dropdown.
GIve the card a tap_action to navigate:yaml tap_action: action: navigate navigation_path: /fire-main/living-roomOr a hold action or double_tap_action, if you choose.
You can also "disable" actions if you want.yaml tap_action: action: none
Damn, found this crazy bug with more-info card and card_mod. It'll cause the elements on the card to infinitely replicate which will eventually destroy your tabs resources
Weird, can't reproduce all of a sudden
hello i got a issue with my calendar 😦
hope some can help me 🙂
i want to add a clock and this destroy my frontend.
You can see it on pictures 🙂
and with clock
how i can fix it ? 😦
What is wrong with it? How would you want it to look?
Wondering if there is a layout issue. Like they're supposed to be in defined spots but the order of the cards doesn't have them showing in the right order affecting widths. Or using stack-in-card. (It makes sense in my head but not in text....)
Hm. Tested by adding a calendar, weather and a clock and as I used the buttons in the calendar upper right, I could no longer get a full-widget calendar. It was cut in half vertically
Impossible(?) to restore normal look
What happens when you remove the clock card? Does it go back to being correct?
Same thing. Right after removal Calendar was restored, but as soon as I used the buttons it was wonky again
Seems to be the Calendar somehow. I removed all else, same. And then changed the dash to 1 card, also wonky
Wait.hassian, you were able to duplicate Paddy's issue?
Yes I am
Or not exactly. Mine is cut in half. His looks like increaed amount of spaces in each row. That I don't see, mine is all symetrical
So is it two cards not playing nice with each other or strictly a calendar card issue?
I have only seen it with the Calendar. One of the buttons sets the "Events" view, so belive two calendars are set side-by-side
Oh, it is reproducible with the Calendar alone, yes
Maybe a calendar Bug ? 2 Guys the same Problem ?
https://github.com/thomasloven/lovelace-layout-card
With this workauround fixed my problem
How do I configure lovelace?
I'm trying to add the mini-graph-card
does anyone know of any bar card that is resized in picture entities? overwise my card is going to be extra long 😛 and ill have to do percentages with images 😛
Hey, is it possible to set the title of a picture-glance card dynamic? I tried something like this but it dosn't work. Has title to be a static value?
Don’t use custom card secondary-info myself but got a support question on that card using state-color.
Found 1 issue in that repo, but maybe users here also found a solution yet? Seems to be completely ignoring that for now?
Generally, the stock cards don't like templating. I'm mobile at the moment so can't double check.
Where does the yaml live for dashboards added via the UI? I don't like editing the yaml in the narrow UI editor window
is there a way to add entities into markdown cards alongside other custom code? like if i wanted to do some custom lines of stuff, but then add an entity after it?
type: entities
entities:
- entity:
There is no yaml that you can edit except for the raw-editor. GUI dashboards are directly stored as json files
ah, ok. Well editing that json may still be preferable to the narrow web yaml window. I found that in config/.storage/
hey guys, I have a problem with hacs addon floorplan, but the issue is generic i think.
To be sure /hacsfiles/ is a short-cut to /www/community/ so leaving the url as is should work.
how do I verify that this shortcut works?
ls - l in the root or inside the config dir doesn't show me this shortcut.
ok, I just updated ha from 2023.4 to 2023.7 and it started to work
Is it possible to use a sensor.name state in a frontend card title?
looking to figure out how i can get the bulb current color for use in a Markdown card. currently when you add an entity card, it shows up. but again i want to create this in a markdown card
Maybe converting the light's rgb_color attribute to hex and using that as font color?
yeah is there a way to do that without creating helpers?
{{ '#%02x%02x%02x' % state_attr('light.aaron_s_room_light_4', 'rgb_color') }}
ooh i think that works
<td align="right"><font color="{{ '#%02x%02x%02x' % state_attr('light.aaron_s_room_light_4', 'rgb_color') }} "><ha-icon icon="mdi:thermometer"></ha-icon></font>
<font> is depreciated in HTML, but I haven't been able to get <span style="color:#ffffff;"> working in a markdown card.
i use font color today and it works
i color my icons with it
i couldnt get span style working either
looks good thanks. i had to add and IF/ELSE to make it black when the light is off because it errored out. but its good now.
why does a timer in the UI of home assistant show a countdown of 00.31.30 when its set to 30 minutes??? where is the 1,5 minute come from?
What kind of sorcery is this that makes this work?
%02x converts a number into a hex with a leading 0, if it would be one digit otherwise
If value = 11
%x % value converts to hex b
%02x % value converts to hex 0b
%03x % value converts to hex 00b
Still seems like sorcery. I might try to incorporate something like that into a Javascript function I have in Node-RED. I had difficulty working with RGB (strings vs objects). The quick fix was a RegEx function. msg.payload.data.rgb_color = rgb_out.replace(/[^\d,]/g, '').split(',');.
Is it possible to add in sidebar-card next to 'room name' the temperature sensor so I can know what temperature each room has?
for example where I wrote "here"
@steel moon I converted your message into a file since it's above 15 lines :+1:
This happens when your frontend and backend clock are out of sync
Did you ever find out the issue? I have done a rebuild, but have not messed with trying to recreate the dashboards. Lot of work there of someone like me without a lot of knowledge in the area. So didn't want to start messing with it and break something.
BTW, any idea where the dashboards are kept in the HA backups?
No. Still doing it. I reloaded all mushroom stuff. I can create a new page and that works but there is no way to edit the old one and it locks the whole front end up as soon as it is accessed. I noticed the two cameras are at loading but all the other light status seems ok. Not sure which component is killing it or how to manually edit the page.
I only had two things on my main page, calendar and weather. It showed both, they appeared find, just locked up so nothing was accessible.
Oh, and I have a bunch of mushroom stuff also for a custom dash someone created for the Bambu Lab 3D printer.
How do i get it back in sync?
Make sure your computers get their time from the same NTP source.
I have question the Minimalist UI dont have all mdi icons ?
Newest addition to my tablets' dashboard. Simple HTML placed in the /www/ folder. Automations to control Fully Kiosk Browser: before shutdown show the HTML, after startup button.press Load Start URL. (The start URL one is also useful for when Lovelace tries to display but not all elements are loaded yet resulting in errors.)
I don't think Minimalist UI comes with any of its own icons. Pretty sure it just uses the ones provided by HA. Which icon(s) are you having issues with?
"mdi:Filmstrip"
this dont show up
the icon show up on my studio code but not on the UI
try mdi:filmstrip. It works for me. (Doesn't work with the capital F.)
@rustic lynx For future reference: https://pictogrammers.com/library/mdi/ to browse icons available.
If /hacsfiles maps to config/www/community and /local maps to config/www, does anything map to config/custom_components? Buried under there seems to be where lovelace-layout-card.js is, which I'm trying to preload in frontend/extra_module_url. Tired of "Custom element doesn't exist".
this card existe on Minimalist ui ?
Nice touch 🫡 Made one for FKB mobile if you need it 
@atomic glacier Did you just use an image or HTML? I went with HTML so, in theory, it should scale accordingly.
Ah...gotcha. I just got back from vacation. Haven't implemented it yet, I've been using MP4 loop screens during restarts and timeouts. Should be easy to swap around and see what looks better...I'll keep you posted when I hook it up, prolly later tonight or tomorrow
Here's what I threw together. It is just a two cell table centered vertically and horizontally. Image came from https://www.pngwing.com/en/free-png-pbiov
In its current form, it may not translate well for portrait orientation. But, I imagine, it wouldn't take much to implement some way of handling that with mediaquery or something.
EDIT: Just rotated Amazon Fire 10 and it shows okay. Shows Home Assistant is restarting. on three lines instead of two.
@tribal galleon I converted your message into a file since it's above 15 lines :+1:
For the automations, I did add a three-second delay to the beginning of the one for startup and a three-second delay at the end of the shutdown just to make everything play nicely together. (The shutdown one needed the delay because the webserver would go down before FKB had a chance to actually load the HTML.)
this is my original start up...
https://pastebin.com/A6iRwePb
...and script here:
https://pastebin.com/QhTT4ZQP
Old stuff, but can retrofit it easily. my video screens are on a panel view /lovelace/screen
Okay. So you don't use FKB but accomplish the same thing through browser_mod?
Yeah, mostly bc I have all of my kiosk automations running on the old browser_mod...(and yes @polar kelp it still works 😂 )|| <---I just ignore all the errors👻 ||
All of the motion activated and screensavers, clock screens and video screens were way b4 the FBK integration came out, (several years old 🫢 ) showing my age here 🫣 just a bit short on time lately to bring it all up to current. 92+ popups created the old way and takes a bit to rework them and it's pretty much all or none unless I wanna break it all 🤓 and start from scratch 😩
I've created a vertical-stack card using the custom-card front-end add-on and I'm wondering how I can get rid of this middle grey line?
@bronze spindle custom:stack-in card or custom:vertical-stack
type: custom:vertical-stack-in-card
yep...that works...a bit braindead tonight over here LOL
ah, we're only midday Sunday here in Australia
I had to add a little bit of card mod when I was testing stack-in-card. I still got borders around button cards (contained within a horizontal stack card). So, the layout was stack-in-card with two horizontal cards each with three button cards. Add this to each button card: yaml card_mod: style: | ha-card { border: none; }
sweet! that got rid of it, thank you 🙂
I also used the above posted card mod on the stack-in-card when I put a custom:auto-entities card inside it. This way, the border was removed around the stack but I had custom:button-cards appear for each light that is currently turned on.
After I turned some lights off:
Why not set border none in your theme and be done with it? On the stack-in-card: I did away with that, as there is nothing we can’t do using entities or vertical-stack. ( and card-mod). With the ever changing core Dashboard it pays to be as core as possible ….
that reminds me. i'm using the custom:stack-in-card quite a lot, and currently every single time i copy paste the same card-mod, ha-card {--ha-card-border-width: 0} in my case (same effect as yours basically). Is there an elegant way to not have to copy/paste it dozens of times?
(crap, forgot to take out the ping for the reply, sorry)
Set it in your theme…
hey, I'm trying to access the state of one of my entity but I'm not sure how to do it
if(entity.input_boolean.air_conditioner)
return "rgba(var(--color-theme),0.05)";
else
return "rgba(var(--color-theme),0.5)";
]]]```
something like this, but entity.input_boolean.air_conditionerdoes not work
What card are you using?
I'm trying to modify this card to fit what I'm doing https://ui-lovelace-minimalist.github.io/UI/usage/custom_cards/custom_card_input_datetime/
I think it's using the custom:button-card
@shell kelp Try thisyaml [[[ if (states['input_boolean.tester'].state === 'on') return "rgba(var(--color-theme),0.05)"; else return "rgba(var(--color-theme),0.5)"; ]]]
it works, any idea where I could get documentation about that?
The custom:button-card uses Javascript so that's what the code is. Obviously, there's the docs for the card on Github. This thread has some good examples https://community.home-assistant.io/t/fun-with-custom-button-card/238450. Also, search this room for my username and button-card. I've posted a lot of examples and screenshots. Really, that's how I figured it out was by looking at examples and asking questions.
Also, as a shortcut, if you've defined the entity for the custom:button-card, you can use something like this instead if (entity.state == "on")
Would you know how to color the background of the icon ? This - background-color: "rgba(var(--color-green),0.5)"only color half of it
@shell kelp I converted your message into a file since it's above 15 lines :+1:
nvm found the issue, I have to use ```img_cell:
- background-color: "rgba(var(--color-green), 0.5)"```
@shell kelp Looking at your yaml, a lot of the stuff you have in quotes does not need to be in quotes, such as type: "custom:button-card" and entity: "input_boolean.air_conditioner". Also, this is a good example where you've defined the entity in the card but end up repeating yourself in the IF statement. if (entity.state == "off") should work.
what's the general rules about what need to be in quotes ?
Not sure of the rules specifically, but I would say generally, if you have the first part such as type, entity, or icon (something that is followed by a colon), you should not need to use quotes.
Also, you might consider looking into state styling instead of the Javascript method. Since your entity is defined and you have relatively basic on/off criteria. Something like this might be easier to set up. ```yaml
state:
- value: 'off'
operator: '=='
icon: mdi:lightbulb-auto-outline
state_display: Automations are off.
styles:
icon:
- color: red - value: 'on'
operator: '=='
icon: mdi:lightbulb-auto
state_display: Automations are on.
styles:
icon:
- color: green```The operator is optional here since == is default, but I leave it in the just for good measure.
EDIT: Corrected syntax for icon name. Had it under styles where it doesn't belong.
Thanks
Also it looks like some colors are already predefined (probably in a css), do you know where I could find the full list ?
Colors such as var(--color-theme)
Those are going to be defined in your theme which is under /config/themes. If you want standard CSS names, I like this page for reference: http://davidbau.com/colors/
Is there a bug or design that when I choose a different default dashboard on any given device, my overview dashboard disappears from that device.
Honestly, I’m hoping it’s a feature because I’m taking advantage of it. I cleared my Overview tab and I’m turning it into an intro/tutorial for new guests, (my wife & I host a lot and have lots of friends & family stay with us when they’re in town, so this is perfect for giving them a few important tidbits that they can eventually get rid of).
I meant to say is IT a bug or design, mind currently does that.
Disappears how? From the sidebar?
why every time i try to copy a yaml code with ctrl + c and then paste it, it wont work?
(macbook)
Have you tried a different browser? Works for me in Firefox on PC.
i use the app
Just to have actually asked… you mean cmd+c on a mac, right?
yep yep
Hi all !
I'd like to manage my lovelace dashboard through git, and publish the changes to HA when I push.
Is there a way to reload lovelace dashboard from disk, without restarting HA ? frontend.reload_themes doesn't do it.
can i get state_image to use script in card like [[[ if (entity.state <= 10) return '/local/ioniq2/10.png'; else if (entity.state <= 20) return '/local/ioniq2/20.png'; else if (entity.state <= 30) return '/local/ioniq2/30.png';
or should i be using a inbetween logic? say 0 to 10
Yeah.
Bruh I want this.
hi guys, so I just set up HomeAssistant and added HACS with the custom cards thing
in the installation it says "Add the configuration to your ui-lovelace.yaml"
But I don't have a ui-lovelace.yaml file. What am I missing?
yaa me too
hi! does anyone have experience with using a custom card inside another custom card (within minimalist)?
it works when used in the regular dashboard but i'm getting an error No card type configured
i'm guessing i need to import the other custom card at the top of the yaml file i'm using it in but I can't figure out how to do that...
Yeah it took me a while to learn to ignore the manual installation instructions on some things. 😂
Now I’m only clues 90% of the time instead of 95%. But I’m slowly starting to figure out HomeAssistant and loving learning it all.
@tribal galleon I tweaked it a bit and this is what the mobile looks like. Will probably do the same for the wall mounts 🫡 Thanks for the inspiration to get me off my lazy butt 😂
ok I know this is wrong, because it wont work, is there anyway to do this state_image: | [[[ if (entity.state <= 10) return 'image: /local/ioniq2/10.png'; else if (entity.state <= 20) return 'image: /local/ioniq2/20.png'; else if (entity.state <= 30) return 'image: /local/ioniq2/30.png'; else if (entity.state <= 40) return 'image: /local/ioniq2/40.png'; else if (entity.state <= 50) return 'image: /local/ioniq2/50.png'; else if (entity.state <= 60) return 'image: /local/ioniq2/60.png'; else if (entity.state <= 70) return 'image: /local/ioniq2/70.png'; else if (entity.state <= 80) return 'image: /local/ioniq2/80.png'; else if (entity.state <= 90) return 'image: /local/ioniq2/90.png'; else if (entity.state <= 100) return 'image: /local/ioniq2/100.png'; else return 'image: /local/ioniq2/centre-squares.png'; ]]]
hi there, i just made a button that lets me go back to the main page right, but i also added the option that if i hold it it will open a popup with browser mod that will show me all the other pages/tabs i have. Why when i click one of those tabs nothing happens?
@vale vine I converted your message into a file since it's above 15 lines :+1:
i really like this card aswell. Where did you find it?
Sadly, I think it was just a PhotoShop Concept, and not a real thing.
How do I call a service from a footer button in a card?
... maybe I can make an ordinary card button and look at the yaml it generates and copy that 🤔
Hey friends, how could I create a card that tells me that a device is on based on the power consumption? 🤔 The easy way I'm not that skilled:)
There is no easy way, it'll be an automation or a template binary sensor
😅 😅 OH i
i have a Konnected Alarm Panel Pro. it is configured with HA so i can see the zone sensors, and the alert outputs. now, how do i setup an alarm panel card so i can arm/disarm the alarm, and so forth?
i just created a status card showing all the zones, and their status, but still need help on the alarm part.
i think i am figuring it out...
@dusky kayak If you're just looking for a visual representation, this is what I use to show a dumb TV being on. It looks at the power usage of a smart plug. ```yaml
type: custom:mushroom-chips-card
chips:
- type: template
content: >
{{ ((states("sensor.tv_plug_active_power") | int) > 5) | iif("TV is
on", "TV is off") }}
icon: >
{{ ((states("sensor.tv_plug_active_power") | int) > 5) |
iif("mdi:television", "mdi:television-off") }}
icon_color: >
{{ ((states("sensor.tv_plug_active_power") | int) > 5) | iif('green',
'red') }}```
found most of the info i need here: https://github.com/scarpazza/home-assistant-konnected-tutorial
anyone?
is not a card is in the original concept of the design
but i think i will try to make it my self
@stoic geyser I've been using these with Konnected for a few years now

https://github.com/nielsfaber/alarmo <-- also has a decent display card, but not necessary
and...
https://github.com/konnected-io/noonlight-hass <---for 24 hr monitoring police, fire & medical
can i make buttons appear and disappear based on a state? like when a media player is on a certain input, i want one of my lovelace pages to dynamically change remote buttons from tv remote to media player remote..or can i have the buttons glow or something?
anyone have any idea why my kitchen dot does not want to show the cover image of whats playing or the media controls. I have tried two different media players and still the same result. My OCD is kis kiing me..
Hello all, noob here. I want to get started designing dashboard cards. So far I've encountered two new things I know nothing about: What is Lovelace? Why should I install HACS?
Hacs has some cool things that don’t come with ha. I’m using a few things from there in my first few days with ha
@reef knot Unnerstood. What sort of cool things? Do I need a Lovelace thingie or is that just the /front end object now?
Lovelace is front end. I got my monoprice 6 zone amp working the way I wanted from a hacs integration.
@reef knot Thanks for your advice. Next time someone contacts you for help, provide some assistance instead of showing what you know.
To expand on what you've been told. HACS is a way to manage custom code additions to Home assistant. For installation and updates. There's no requirement to use it, and everything you do with it can be done manually. It's just a little more effort, rather than a limited number of button pushes. Lovelace is what you're using on the dashboard. if you're going to be building custom cards, then you'll need to get to know it better. if you're just plugging configuration into other people's cards, less so.
Front end is not very responsive for some controls. Is there a way of making it poll more often? Or is that up to the sensors?
any tips for using a custom card in a custom card? sorry for bumping because I've run out of ideas where else to look.
Is it possible to have some sort of yaml card templates, i have a few pretty complex cards that i want to reuse where only the entity changes.
Something like this: https://hastebin.skyra.pw/semaqugigi.yaml
yaml anchors seems interesting, not really sure where i should place those definitions without hass saying there is invalid yaml. Is there a special place for this within hass?
Do you have some yaml to show of what you have already tried?
You'd have to fully use a YAML ui, you wouldn't be able to use the UI at all.
The decluttering card seems more usefull then 😄
Do you need the lovelace-ui.yaml or can i use the
homeassistant:
packages: !include_dir_named packages
as well for this, cant really figure out under that item decluttering_templates should be placed.
packages does not work for the UI
decluttering templates might also require all yaml
I don't use that so I can't really answer that
Ouch, so there isn't really a way to reuse complex components other that copying them around with the UI enabled?
Big oof haha, just migrated my entire YAML config to the UI based one 😬
this is the sort of thing chatgpt is good at, just type in convert this to the home assistant yaml config and dump whatever in 🤣
Haven't thought of that, was 2 days of work hahaha, painfull 😄
chat gpt is also good at giving you something which totally doesn't work 😉 and then annoys the piss out of people trying to help.
you need to correct its work but it gives you something 90% done that sort of works 😆
I reckon I could do 5 jobs at once and just farm it all out to ai and correct the mistakes
🤮
How can I have a fullscreen camera view in the dashboard? i.e. a camera feed that fills the whole dashboard
change your view to panel. It's an option on the view
What about 90% of it is the camera then add a few small buttons next to it or on top of it?
you can do anything with stacked cards or picture elements, picture glance, etc
I'm trying to use the decluttering card and trying to split those into their own yaml.
This is at the top of my dashboard config:
decluttering_templates: !include_dir_named "config/templates-decluttering/"
but I only get this error:
Unable to parse YAML: YAMLException: unknown tag !<!include_dir_named>
I've been trying to research if using !include_dir_named is possible, and I have found several posts of people doing it exactly like this without getting the error. Can anyone help?
This works only when you build a dashboard in Yaml. Not when you use the raw-editor/GUI
Is there anywhere I can find documentation on how to add "info" messages? I found code {{ states.light|selectattr('state','equalto','on')|list|length }} to put in a message "There are X lights on." and I'd like to add a whole bunch of info to that card. "The average temperature inside is Y" (I have a helper entity that finds the mean of the temp sensors already), "There is motion detected in Z rooms." etc.
Are you just talking about a markdown card?
it sounds like you just want to construct text with some template data
@hard estuary I converted your message into a file since it's above 15 lines :+1:
card ideas for a water tank? mushroom climate card kind of works
domestic hot water that is
Mushroom Title Card, but I think it works the same.
So your question is how to write templates for that?
Is there any variation of the effect of the stack-in card that I can accomplish through the UI?
I think the answer is no but I'd like to ask.
Yeah, I guess. I'm clueless with this, but wondering what other types of things I can reference in those messages. 🙂
Well sweet! I did see that channel, but wasn't sure that's what "templates" meant. 🤪 LoL.
wondering if it is possible to show data from a MQTT weather stations wind direction sensor, as a circular compass readout? the weather station reports the azimuth
may have found it myself...
found this: https://github.com/tomvanswam/compass-card but i am having trouble getting it to work...
i have downloaded and put in place the compass-card.js file, and added a javascript module resource "/local/compass-card.js" but i can't add in the card
Put it where?
in my config dir, + "www"
Restart HA and clear your browser cache
Hi there. Grouped some lights to helpers and made a dashboard with tiles to switch the light entities or the helpers (groups for rooms and so on, only lights). The buttons for lights got faders to dim them, but not the groups, so i have to long click them to dim. is it possible to get the faders directly in the tiles of the groups?
before i used helpers to group the lights i used groups in the config.yaml (or groups.yaml). also wasn't able to get the faders in the tiles.
I'm assuming you're using a Light card. When you made your groups, did you choose Light Group? The reason I ask is because using the Light card and my light group, I see the dimmer slider around the icon. Are all the entities in the group lights or do you have switches defined too?
You might consider trying a different card, Take a look at this post for some ideas. https://smarthomescene.com/blog/home-assistant-light-cards-collection/
Anybody else using browser_mod popups where tap_actions are no longer working?
Yes, i created light groups, and there are only light entities in it. Let me check out the link
Does anyone have experience with the 'Minigraph" addon/plugin.
I am having a issue that I cannot fix or find a way to fix it
Issue: Minigraph only shows data-points per 2 hours
What I want: Show data points per per hour
The sensor in question I am using it for is a "zigbee" Temperature sensor which updates every 5 minutes
A quick search in the docs on the mini-graph github
Already have that in my YAML:
That preview will not always show all changes.
And points_per_hour should not be part of the show: list
Should be on the same indentation level as entities:
Simple example:
type: custom:mini-graph-card
entities:
- entity: sensor.electricity_price
points_per_hour: 2
hours_to_show: 12
Is there a way of changing entity details popup style from this colored bar to graph?
I would prefer to have both sensors display data like this
I tried changing device_class to something else, but result is the same
Sensor type is 2byte_float (knx integration)
its really hard to see peaks on that colored bar on value that changes very rapidly
I found out the issue,it had to do with spacing.
Now I need tofind a way to get custom colored graphs based on value with multiple entities in the same graph
[temp sensor]
where if Humidity is below X color changes to #XXXX
I want this for both sensors in the same graph
Your sensor will need state_class: measurement for that
ah thanks
Look at the dynamic color options. But I think it will only work when the same thresholds are used for multiple lines (e.q. no option to set multiple thresholds for each entity)
I already have dynamic colors set for the single entity graphs, but when using it for multiple, it does not work correctly
That is what is expected by looking at the docs
I think there was a recent update to fix that over the weekend. It also broke stuff for me so I reverted.
is this not possible or is my syntax of:
- entity: switch.shelly_plug_torretumbler
name: {{ states.sensor.shelly_plug_torretumbler_power}}
Templates are not allowed in most cards
And if they are allowed in this particular place, there are multiple errors
@misty mango I converted your message into a file since it's above 15 lines :+1:
The template should be between quotes, and you are now returning the entire state object
@misty mango you can't have more than 1 sensor: section. Both go in the same section.
What would it look like if I use custom botton card ?
custom button card uses JS, not jinja
name: "[[[ return states['sensor.shelly_plug_torretumbler_power'].attributes.friendly_name; ]]]"
Can't get it to show the value of my shelly plug
show_name: true
show_icon: true
type: button
name: >-
[[[ return
states['sensor.shelly_plug_torretumbler_power'].attributes.shelly_plug_torretumbler_power;
]]]
entity: switch.shelly_plug_torretumbler
that would just be states['sensor.shelly_plug_torretumbler_power'].state, FYI there are examples in the custom button card documentation that show this
i.e. Don't guess
Its now showing any value underneath the button
just the text
... did you add the [[[ and ]]]?
with return?
all the rest stays the same
i.e.
name: "[[[ return states['sensor.shelly_plug_torretumbler_power'].state; ]]]"
Is it possible to define shapes as conditional elements in the picture elements card? I have an existing map with various elements, but have started to add motion detection. Rather than have the mdi motion dude icon, I figured it'd be good to flash that area red. Or is my only option to create the shapes as images?
there might be an icon with a specific shape, otherwise I don't believe that exists without implementing your own HTML
Ah k, ty
Did you ever get the light group figured out? Curious what the outcome was.
Yeah, found out i had to go to helpers and create light groups where i put the light entities in. before i used to group them in the configuration.yaml, but a recent update changed the behavior what made me switch from the configuration.yaml to helpers (i wasnt able to change light color of groups anymore)
Ah. Gotcha. I thought you did go with the helper route. I remember having to use the yaml method years ago to define a light group before it was able to be done in the UI. I still have the leftovers in my yaml.
Hey guys, this might seem to be a really stupid question but I just don´t get how the custom Frontend elements from HACS can be implemented in my Lovelace dashboard 🙄
So here is the problem: Some frontend elements that I got from HACS I can easily add to my Dashboard after I downloaded them. Others just wouldn´t even show up to be added, even when the files have been downloaded to the corresponding folder (config/www/community/).
Can anybody please tell me what is the magic trick to make these elements available to add? 🧙
have you restarted?
this is my code type: custom:button-card
name: Avvia Timer
tap_action:
action: call-service
service: timer.start
service_data:
entity_id: timer.timer_cucina_main
duration: |
{% set minutes = states('input_number.timercucina') | int %}
{{ minutes * 60 }}
show_icon: true
show_name: false
icon: mdi:play
and i would liek to take the durations by my input type, it's called input_number.timercucina
if i start this it's gives me failed to start
How i can resolve it?
Cards don't support templates
@toxic ferry To format your text as code, enter three backticks on the first line, press Shift+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.
like this? https://pastebin.com/SMUQ1msK
you must use this format [[[ return Math.floor(states['input_number.test'].state / 10) ]]]
Read more infor in custom buttton card
type: custom:button-card
name: Avvia Timer
tap_action:
action: call-service
service: timer.start
service_data:
entity_id: timer.timer_cucina_main
duration: |-
[[[ return Math.floor(states['input_number.timercucina'].state * 60) ]]]
show_icon: true
show_name: false
icon: mdi:play
Is it possible to embed other custom cards within a custom JS card? (https://developers.home-assistant.io/docs/frontend/custom-ui/custom-card/)
Thanks, trying to declutter my configs a bit, took an approach of generating the yaml contents (https://gist.github.com/kevinvdburgt/4a702fbc3e6185f5d35611f9884e28d8) but not sure if this is what i like.
You could also think about installing lovelace_gen, or you could try auto-entities
both which "automatically" add things
however, both are hard to use
Wish it was easier to create reusable templates in the frontend 😦
something like that will most likely never exist
if you want auto-generated UI's, you're going to be going all-yaml
auto-entities works in the UI, but it's still mostly yaml
Would like to have all-yaml, but also want to to use the UI for testing and trying stuff out.
Wait.. that's possible,.. 😮
You have to be kidding me haha, thought you had to choose between those 2 😄
for the "overview" dashboard, you ahve to choose
but you can add any other dashboar
My main auto-generated dashboard is yaml
I have about 3000 lines of code that generate 400k+ lines of yaml
😄
reqruies lovelace gen tho, which will be daunting
Will take a look at it, sounds promising 😄
Lovelace_gen lets you use jinja2 templating in your lovelace config.
Exaclty what is was looking for haha, TYSM!
Keep in mind, it's base Jinja
meaning it doesn't have any HA extensions
i.e. you can't search the state machine
That should be fine, simpel stuff as for loops would be awesome 🙂
yep, loops galore
I also write my configuration in jinja
instead of using the config file for lovelace_gen
which allows you to change your 'config' without restarting HA
you can use yaml to JS conversions to do that BTW
if you don't want to write the dictionaries out by hand
Awesome, thanks for the information!
https://github.com/Petro31/home-assistant-config/blob/master/lovelace/views/echos.yaml#L23
How does that include work, is that part of lovelace gen?
yes, that's lovelace gen
Is there a way to force cards to a certain column in the Dashboard? I keep trying to rearrange my cards how I want them but they just wont go into the way I want them in.
https://i.imgur.com/mHHlFa.png
Left is how it is, Right is how I want it, but no matter how I press on the little arrows on the cards it still doesn't end up like that. Is there a more controlled way of controlling the cards?
not really, the card order is dropped left to right.
so card 1 goes in the first column, card 2 second, 3 3rd, then from there HA tries to reduce your vertical scrolling so all bets are off
Oh it goes left to right first, that explains why I'm struggling so much with it lol, I thought it filled the first column first hehe
You can make the full page a panel, then use vertical and horizontal stacks to get something close to what you want
Also, keep in mind, if you resize the page, things go wonky
the whole thing is designed to minimize scrolling
I guess I just want 3 separate columns with manual control of what goes into each column, and the order of each
that would be a horizontal stack with 3 vertical stacks
and the view set to panel mode
keep in mind it will look like trash on mobile
oh hmm thats a good point. I can create 2 separate dashboards, one customized to look good on phone and one customized to look good on desktop, and set a different default dashboard for each device right?
Lovelace_gen is, but how is auto-entities difficult/hard to use ? It’s one of the most useful cards out there, and so super convenient, From straightforward listings to complex templates card/combinations .
Huh? What’s that??
because most people don't understand yaml
it's hard because you have to understand how the things link up, and it's not straight forward
On mobile and have no clue where these skulls come from.. had to edit that on desktop.. sorry for that
confess only creating those in yaml, never the ui. But once you get the hang of it, I feel it grows on you... certainly worth the while. I even type the card_mods for them blindly now 😉 And ofc, you can copy&paste, or even better, anchor complete configs
right but he was interested in using only the UI
so, anchors, etc aren't an option
I'm not bashing it, I'm simply pointing out that it's not easy
many people here want easy
he didn't care about that, and went with lovelace_gen and a UI managed dashboard for quick tests
right, sorry for intruding. my main objection to lovelace_gen has always been the fact is uses jinja, and with a config my size, that would really be costly. I could try a ui dashboard for experiments sake once again though
I'm not sure you understand how it works
it wouldn't be costly at all, it executes once.
I generate pages upon pages of data, all nested, all redirects. It's extremely fast.
I’m sure I am not sure at all. You’re right, I should revisit. Must explore if my varied dashboards can be templated. If only partly.
Now that it is quite settled, it’s a nice new challenge 😉
@tacit cave lovelace_gen is soooo awesome!
Yep
makes it super simple
@polar kelp hasn't abandoned that integration yet, but if he does I'll probably take it over because my whole setup revolves around it
It makes it so much less work when i want to change how a component (template) looks 😄
Need to get used to adding # lovelace_gen in every yaml file i want to use lovelace gen in. Happend already 7 times not knowing why the template isn't working because i've forgot to add that first line.. 😄
SOLVED: I finally installed HACS properly. What I had done wrong was to attempt to install the HACS integration without already having the SSH addon activated. SSH addon is a requirement for installing HACS
Has anyone else noticed that the notification icon cache doesn't seem to be clearing properly?
It's always been a bit of a problem, but it seems like it's been worse recently
Hey all, is grafana still used or has something else come along? I'm looking into some nice graphs and such for my RV lol
8 think mushroom cards is what I'm looking for lol
yes, this has been notified (..) during last beta, there's an issue on it, but seems to be completly ignored so far
then again, it has been unreliable since over a year or so:https://github.com/home-assistant/frontend/issues/12145
this is the latest related I believe: https://github.com/home-assistant/frontend/issues/17137
Anyone using Apexcharts who knows if it's possible to only have one time-popup come when you click somewhere?
Currently there's 2 showing
I've seen petro mentioning lovelace gen several times, but never looked at it
but this is actually awesome
uh you'd love it
yes, I see that now
with your skills, you can take your UI from 100K+ to like 1K or less
installing it right away
It has some nuances
that you'll have to learn
like reloading and sometimes on startup you have to refresh the page
well,not sometimes, every time
you'll get "error in your config" after a restar, just refresh the page when HA is fully restarted
good to know!
Also
if you don't want to restart each time you add to your config, make your config in Jinja
that will allow you to reload when you add an item.
if you use the built in "config", you have to restart each time you add to it
not fully grasping that yet
So lovelace gen has the ability to pass a yaml file as an object you can use in jinja
that's your "config"
that variable does not update when you 'reload'
reloading reloads the Jinja & yaml for your UI, but not the config
it just makes it easier to manage and your changes are instant if you add something
ah okay, I think I get it 🙂
basically config is like configuration.yaml, can't adjust it without restarting. However lovelace-ui.yaml can be reloaded whenever you make changes.
same principle.
sooo.... put your "config" in your jinja instead. I use a yaml to JSON converter. I add to the yaml, then confert to JSON manually, then add it to my jinja.
EZPZ
so basically instead of (example from docs)
{% macro button(entity) -%}
- type: entity-button
entity: {{ entity }}
tap_action:
action: more-info
hold_action:
action: toggle
{%- endmacro %}
use
{% macro button(entity) -%}
{{ [
{
"type": "entity-button",
"entity": entity,
"tap_action": {
"action": "more-info"
},
"hold_action": {
"action": "toggle"
}
}
] }}
{%- endmacro %}
🥁
i.e. Don't bother with global vars
Make your global vars in your master file, and pass all variables to other files
using jinja
see my config for examples. master.yaml in lovelace/views holds the key
I'll have a look
thanks
and just to be sure, do I have to add # lovelace_gen on all yaml files, or does it work down in includes?
you have to add that in all included files
it doesn't work in the first file
so I just point the first file to my main file
almost as small as my configuration.yaml
my configuration.yaml is huge
mine is just homeassistant: !include_dir_merge_named /config/include/homeassistant
you don't have any other yaml integrations enabled?
they are includes as packages
ah ok
The first part of that master file is what you meant with creating it as yaml right
with these macros
Oh no, I"m talking about this
(wait for it)
then taking the json output and assigning it to a variable
Awesome, thanks for the info
ah right, and where do you actually output this areas variable
I don't, I iterate it to generate my dashboard
I use a custom "card" that auto generates the view based on the input
e.g.
areas generates what's inside the areas button you see there, it also generates that overview button
and areas looks like...
which is all autogenerated
ah, I see what happens when {%- set testing = true %}
yeah, that just creates the test button
I usually leave it true at all times 🤣
anyways, each area is auto generated via the areas config too
same princple, the area button is auto generated with an overview button and the button directs to a subview
all autogenerated, each page looks the same
FYI this is designed for mobile as I rarely use my UI for desktop
in lovelace is possible to change the background cards with background-color, how is it possible to change the text color for entity name in the cards?
My thing with lovelace gen and some other integrations like that is you need to use yaml only. I don't get how people iterate on complex dashboards doing yaml only because you can't see changes immediately, no?
yes you can, just reload the page
Maybe I'm over estimating how much of a problem it is, but I know at least with card_mod even a page reload would be too slow of a cycle
But I can never get card mod right for some reason. Or rather I can, but it's a serious struggle every time I come back to it. The whole shadow dom thing really throws me off with writing my selectors
But also in terms of getting cards right, the immediate feedback really helps when playing around with cards
🤷♂️ I just reload, takes 2 seconds and with lovelace gen you see the change everywhere it's used
One other strategy I've heard is to design the card in UI mode and then move it over to yaml mode when done. Which I can see working in some situations, but once you start with lovelace gen, your actual yaml is going to look vastly different and I can foresee running into snags
Is yaml vs ui mode universal per install or is it per dashboard?
per dashboard
Maybe I should duplicate my main dash and give it a shot and see how it works
personally, I value single point of origin changes over being able to see my changes as I make them
I have a sensor card, when I update it. All sensors update.
I'm 50/50 right now, I also value it highly but the feedback is also important so I haven't wanted to move away
I've been using the decluttering card to single point of origin
Though you can't edit that in the UI so maybe it's really just the same thing
How do you deal with duplication across dashboards?
That's been my main pain point with decluttering card. It's only per dash
Ah ok, that solves that then
Isn't it true that you can't use anchors in your main configuration.yaml? I think I tried once but it seems like there's some kind of pre-processing that messed things up
I was looking for a solution for removing secret "blocks" I think
lovelace_gen does that automatically, you just call out the card you want to use
it's a separate file
not like decluttering
Ok, I'll have to play around with it before asking questions
so when I say "I make an update, it updates everywhere", I mean exactly that
Yeah, decluttering card ended up being kinda meh since it was per dash
I wonder if with the new custom_templates you could achieve something similar
If somehow you could render cards from what those macros generated
You can
You could maybe even get away with no reloads if you had something to auto reload templates when there are changes in that dir
I would think you could call macros in lovelace_gen?
Is it not using the same template engine?
lovelace_gen does not have access to the extensions to jinja that HA provides
ah
the jinja that lovelace_gen uses is loaded prior to HA even starting for the most part.
How would this work?
You can make a macro that outputs yaml
Like there would need to be some kind of wrapper card I'd imagine to call the macro and display it as a card
TBH none of that is needed
because the way lovelace_gen works is that you include a card and it builds the yaml for you
Oh sorry, I meant as an alternative to lovelace_gen
no, that will not work as lovelace does not load jinja
It sounded like you wouldn't be able to use it with lovelace_gen anyways since it's a different templating environment
I do have some pretty ugly templates used with auto-entities cards that generate json I could probably move to a custom_template
But generating json isn't super fun
But yeah, I think I'll give lovelace_gen a shot next time I get a chance
Do you guys use auto-entities extensively as well, or is it not needed as much with lovelace gen?
From what I understand, lovelace gen doesn't update things at runtime so it's still needed
I have a real love/hate relationship with auto-entities though because it's error handling is a mess
auto-entities still serves it's purpose
I'm not sure why more people haven't pointed out the issue actually. It swallows errors and it doesn't properly wait for resources to load
So using a custom card inside auto-entities often fails
Maybe I have something messed up with my setup? But have you ever had a dashboard load with a bunch of error cards that resolve as the custom cards are loaded?
Basically if that card loads like that inside auto-entities, it swallows the error and just doesn't display
Well, I use loader card
Will take a look at that
@tacit cave This? https://github.com/gadgetchnnel/lovelace-card-preloader/
well actually I don't now that I look at my config
but I used to
that's all I use
I posted a long comment in auto-entities after debugging the issue and came across all this error handling logic which incorrectly swallows errors
I thought card-tools was just for development or something?
it's required for many other custom cards
IIRC it's required for config template card
Was just gonna say, I need to check out that one as well
it may not be required anymore for anything
I haven't cleaned up my UI in ~2 years
maybe 3
Not required because of lovelace gen?
lovelace_gen is an integration
Not sure I follow
What did you mean not required then?
Also this outlines the problem with auto-entities in detail:
https://github.com/thomasloven/lovelace-auto-entities/issues/329#issuecomment-1475530005
I don't understand why more people don't have this issue
card-tools may not be required for anything I have
I haven't look at anything and have been just blindly updating all my cards for about ~3 years
Oh sorry, I meant config template card, not card-tools
I think I use it in like 2 spots
Was that preloader card what you were referring to though? I'd like to correct the root of the problem if it's just me, but until then I'd like to use a workaround
I use it in one spot
Yeah that looks like it
Or maybe this one? https://github.com/thomasloven/lovelace-card-loader
I don't have issues with auto entities because I don't use anything custom
Ah ok
oh, that looks like it's it
It's mainly a problem for me cuz I use chip cards a lot since I try to keep my dash very minimal for some screens
Also most stuff is hidden on my dash and only pops up in the right context. Like a remote control card doesn't show up if I'm not at home
I used to do all that kind of stuff, then I found that I wanted those controls regardless if someone else is home
or guests when my wife and I are not home
Yeah I mean this is just for my own personal dash
I also dynamically build out some cards so like if I add a new motion sensor it's automatically added. I think lovelace gen might serve better there since that isn't something that really needs to be at runtime
@pallid zephyr I converted your message into a file since it's above 15 lines :+1:
... which I only tried because doing the same thing in the style key of the state-label didn't work either.
new HA user.. at some point I must have been trying to mimic someone's dashboard.. my ui-lovelace.yaml is 600 lines long with a whole ton of crap that isn't valid.. My fault for not taking a backup before doing whatever the hell I did.. that being said, watchman (which I just found out about today) found all sorts of issues in that file (makes sense).. what's my best course of action for this? Thanks
Anybody else having issues with browser mod popups since 2023.7.3?
well, I have this:
not very accustomed to browser_mod popups I am using smthng like: hold_action: action: fire-dom-event browser_mod: service: browser_mod.popup data: style: | --popup-border-radius: 0px; --popup-padding-x: 0px; --popup-padding-y: 0px; --dialog-backdrop-filter: blur(0.8em) brightness(1.2); --dialog-content-padding: 20px; which pops up just fine. On desktop I can click next to it and make it go away. On iOS app however, I can not... even when I swipe in another menu item, it stays... is there some option I need for that to make it go away?
not sure it is 2023.7.3 though..
Hi team — I'm wanting to track click events on my front end (to help gather data for UX improvements). I'm using https://umami.is/ for tracking... I'm a ex-frontend developer but my skills are way rusty. I'm attempting to use javascript to attach tracking events using document.querySelectorAll("ha-card") (for example) But it doesn't seem to be returning anything... Here's a wee snippet
(function() {
document.querySelectorAll("ha-card").forEach((element, index) => {
element.onclick = (event) => {
console.log('Click' + index + ': ' + event.target.innerText); // for debugging
}
});
})();
My guess is this has something to do with shadowDom? But I haven't actualy written any javascript is many years so I have no idea about this new fangled shadow dom stuff. Anyone have any thoughts/tips?
@arctic moat This topic is generally for interacting with the Lovelace interface. You might consider visiting https://discord.com/channels/330944238910963714/351047592588869643
This is probably an easy one... I have created a sub-view, but can't figure how to call it from another view...
does a sub-view just need a navigate action?
yes. It does not show on it's own, can be navigated to and offers a "back" link, if I got it right
lemme see if I can figure it out right quick. (I have not used sub-views before.)
Cool, thanks 🙂
@random relic yaml tap_action: action: navigate navigation_path: /dashboard-lab/sub-view-testwhere dashboard-lab is the name of your dashboard, and sub-view-test is the name of the sub-view. Instead of tap_action, you can also use hold_action or double_tap_action.
Thanks a lot! Will try this out 🙂
Works perfect, very nice
I realize now why I don't use sub-views. I hide my header on my tablets so the back button would end up not being seen (which it wouldn't be hard to add a "back" button). Navigation is done with hold_actions. So I can tap a button to turn on/off living room lights but press and hold and navigate to view containing "living room-related" stuff. Plus, I edit on PC so seeing the views on the header is fine for me.
Yeah, my front end is mostly a pure mess, but thought I'd sort it a bit to start with. This was a great addition
It is neat to use the hold action, but would've been even better if it could be made to indicate (mouse hover) that there are more actions defined...
I'm slowly starting to incorporate popups with browser mod to lessen some of the different views that I have, a lot that just end up repeating what is on other views (such as other lights in the apartment).
I wonder is some sort of mouseover event can be added somehow. 🤔
I bet there are custom cards that has that, just haven't looked for it
someone asked in the forum but tom_l quickly shot them down with a no. (post is three years old though.) https://community.home-assistant.io/t/user-defined-mouse-over-tooltips/182930
Aha, well there probably was a reason then. Much have changed in last three years though
But, in his defense, the stock cards (like you mentioned) probably can't do it but I'm willing to bet some fancy CSS work can be added. (It's possible to do animations with CSS so why not mouseover?)
Your right, it very well could be possible... Cool if so 🙂
thinking of just adding "[...]" after it's name, it works too
I use yaml - '--mdc-ripple-color': white - '--mdc-ripple-press-opacity': 1.5on some of my custom:button-cards to create a "ripple effect" when the button is pressed.
Looks like CSS already has a lot of options for mouse icons built-in. https://stackoverflow.com/questions/3087975/how-to-change-the-cursor-into-a-hand-when-a-user-hovers-over-a-list-item (Note the second answer.)
Looks hopeful, agreed 🙂
where would you set this?
styles:
card:
- background-color: transparent
- '--ha-card-box-shadow': none
- border-radius: 20px
- '--mdc-ripple-color': white
- '--mdc-ripple-press-opacity': 1.5
- border: 1px solid var(--primary-text-color)```but, again, this is for the `custom:button-card` https://github.com/custom-cards/button-card
(Light was a little slow to respond...)
Just realized I already had an example for something else that I was working on. (Dynamic grouping.)
EDIT: Back story on this, if you have a grouped entity (light.all_lights) and you adjust the brightness for it, all lights defined (even the ones that are off), will adjust to that brightness. With this Dynamic group, the entities contained will only be affected if they are currently turned on. This was something that @azure canopy worked on a little while back (He did 95% of the work; I basically came up with the idea.) but I haven't taken the time to write it up and post it in the forum.
Looks cool, I maybe should have a look at that some day, thanks for showing!
Between custom:button-cards and Mushroom cards, you can do almost anything.
I am struggling with card-mod, I can't find a way to change the color only to the entity name and not even to the entity value, can you please help?
Hi,
my iphone doenst seem to load css styling in cards anymore, so i wanted to reinstall the mobile app but i got the same problem in safari. A other iphone loads the frontend perfectly and android aswell.
Just 2 iphones wont load any of css styling. Some ideas?
So the exact problem is, that these 2 iphones display the browser mod pop ups, but none of the css styling seem to apply.
So the popup is only as big as the displayed card is and the background is blurred (on iphone 13, s22, taba7 and windows11)
but iphones 11 pro max and iphone x only show the popup with fullscreen dark background
How can i Make all of These looking Like 1 card with Buttons?
custom integration „vertical-stack-in-card“ and remove the background of each small card with card mod and:
card_mod:
style: |
ha-card {
--ha-card-background: none;
}
@dry wind did you ever find a fix for the issue with firefox making HA look like this until a resize or switch between dashboards?
Or maybe someone more familiar with HA's development can help out? This only appeared recently, not sure if I should report this on github or if it's something from my settings
Yes and no, it seems to be caused by the experimental css "has" selectors in firefox, if you disable those in about:config it's apparently fine. I need them, so I just deal with it :/
ah damn I need those too :\
I'm not sure why the issue was completed though, I had this enabled since I installed firefox and this issue only appeared in a recent HA update
yeah same here
Now that I have a better understanding of HA fundamentals I have been experimenting with custom cards and themes. I find a custom card which looks appealing at first, but the color scheme is much too garish.
Is there an online resource explaining the way themes are structured?
it is, if there is a way to set a color only to entity name in a card and not to the entity value too, please share, I can't find it
The specifics of what you're trying to do depends on the card you're using.
For official stuff, check out https://www.home-assistant.io/integrations/frontend/
Also, check out https://www.juanmtech.com/how-to-theme-home-assistant/. I used his Google Theme as my guide and adjusted it the way I wanted. https://github.com/JuanMTech/google-theme
is it possible to graph 2 entities with separate units on the same graph? (like have the y-axis on the left be one unit, and the right be the other?)
Does anyone know how the camera integrations work in terms of streaming? Cameras shown are RTSP, however browsers dont support RTSP, so just wondering how HA handles this?
Hi did is possible to use with picture element the vertical-stack or horizontal-stack elements? 🙂
I'd like to add a screen wide console to my front-end, no edit, just for display of logs. Would anyone know if that can be done?
is there a way to hide certain switches in dwains dashboard?
like i have changed 2 of my wall switches to fan and light respectively but dwains dashboard still shows 2 switches as on when them two are the only active switches
I need to hide dashboards from sidebar and add views to this sidebar only on tablet user. This is possible?
Now I have energy, multimedia, map...
@tribal galleon Excellent references! Thank you, I am working on my first theme file
This doesn't specifically answer your question, but for my tablets I have the sidebar completely hidden, the header is hidden, but I have the ability to swipe between views if needed. Push and hold actions are available for some navigation capabilities. For example, I have a view that shows an overview of each room; press and hold a card will take me to that room's view. Each tablet has "their own view" for the respective room so there is much browsing being done.
I use Kiosk Mode (https://github.com/NemesisRE/kiosk-mode) with users and entities set up to accomplish this.
hass-swipe-navigation (https://github.com/zanna-37/hass-swipe-navigation) for its capabilities.
@random relic Looking in to this a bit more, I found options for --md-ripple-focus-opacity, --md-ripple-hover-opacity, --md-ripple-pressed-opacity, --md-ripple-hover-color, --md-ripple-hover-opacity, --md-ripple-hover-opacity, --md-ripple-pressed-color, and --md-ripple-pressed-opacity.
I want to have different sized items in the dashboard, this means I have to create grid within grid within grid within grid.... This is terribly unreadable and hard to maintain. Is there any dashboard in which I can merge and combine cells like in Excel?
Specifically the "grid layout" section
Yes, I know. I try and I don't know why I don't use this, I don't remember... I need to check again
But I need to write grid layout in yaml?
No, you can use the UI to add those cards and configure them. At least to an extent
Yes, but to defined columns and size I need yaml?
Hi,
im having big issues with browser mod popups.
- Windows 11 Chrome shows them perfect
- W11 Edge shows wrong background color
- IOS 16 @Iphone shows wrong background color
- Samsung S22 shows wrong background color
So the css doesnt seem to apply to these browsers. Already did a reset of all browser caches, even rolled back to 2023.7.2, reinstalled browser mod and even completely reinstalled a iphone
I dont know why, but the popups worked on 2023.7.2 and im now back to the exact same state of my install, and they show different results
How can i delete ALL browser mod related files?
tested the same popup with an old installation and works perfectly
Some of the styling variables for popups have changed to be more in line with default hass dialogs.
There seems to be a issue for this already. Seems like the same problem.
that really seems to be the problem!
Did you find a fix for this? I removed all custom resources, cleared cache and site data, but no luck. Works fine in Chrome etc, only happens in Firefox (I'm on 2023.7.1 & 115.0.2 aswell).
Thanks 😘
Is there any method of using "conditional card" but only applying this to a single line of an entities card? Want to exclude any offline object from displaying OR make the message a little nicer (state_not: "unavailable")
If it's just for those WLEDs going from 81 to 88, you might want to use https://github.com/thomasloven/lovelace-auto-entities with a filter like filter: include: - entity_id: "sensor.wled8*_firmware"
then it'll only list those that are available
Thanks, will check that out. Looking at nesting multiple conditional card within vertical stack but that makes the list a lot larger within the dashboard.
You could probably use https://www.home-assistant.io/dashboards/entity-filter/ aswell though
Sorted thanks, looks like entity-filter did it (Wasn't aware of that option)
Hi. Wondering if anyone has had this issue and maybe have a solution.
I have a dashboard with buttons, and said buttons are quite finicky when displayed in the android app. IE if I don't very precisly tap them, they won't trigger. I think the issue is because if I ever so slightly move my finger during a click, it's interpreted as a scroll instead (even if there is nothing to scroll)
does anyone know of a tv remote button that i can configure (and add) buttons to call a service individually?
Hello, I've some problem with UI Lovelace Minimal, I'm trying to use a custom_card from Github but when I write the template code an error appears in my UI, can somebody help please?
Triple check you have all the prerequisites installed and force refresh your browser.
Hey everyone! I need some help with my Homeassistant setup. I have an input number helper where I enter my current gas consumption amount.
However, I want it to save the data only when I press the return button or a specific button in the UI. Currently, it always sends the data after I deselect the card.
Is there a way to change that?
ok, thanks
I tried splitting a datetime in Javascript to only show the HH:MM and delete the :00 with .split(':00')[0], but that is not very nice when the datetime is set on a whole hour... it then only shows the HH. so, for now I settled on states['input_datetime.cover_dorm'].state.slice(0,5) but that feels even hackier. How can we do the split more correctly?
,Hi, I'm trying to set up sidebar-card on my dashboard.
I add those lines to my raw configuration
http://pastie.org/p/5XZbXr3FDo9xns2jpxYFD2
however I don't see the sidebar in my dashboard.
I do see an empty area that he suppose to be there, but can't see him. (I did hard refresh and empty cache in my browser)
I am using glance type under custom:layout-card
It was meant to be "no it's not implemented", but here's a link to request it. I was not commenting on the feasibility.
hope this is not too obvious, but we can set those tooltips on custom:button-card. Not the same as on just any core dashboard card, but on the ones I need tooltips, I use button-card. And, with only a few lines of css templates, style and speed them the way I like it.
styles_tooltip:
styles:
tooltip:
- transition: opacity 0.5s
- color: var(--primary-color) #var(--card-background-color)
- border-color: var(--primary-color``` just so you are aware we have tools
Hi all, I see there is now colour states in the ha icons. Where do we set the colour thresholds ? As an example I have a temperature sensor that I want to go blue or red depending on the current value
there are hundreds of topics in the community on that specific subject. just show us what you have and go from there?
Is there any special thing to add, to use animated icons? (card mod installed)
the code should work, but no animation
without any code, we can not see if there is anything to add.... post what you have, minimal config please, and we can have a look
Sorry, heres the code:
Tried other methods with mushroom cards but they wont work either.
Found the animations here: https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/3240
The thing is, you're using examples intended for use with Mushroom cards. The examples are not necessarily going to directly cross over a different card, especially a stock HA card. For example, this is for a Mushroom Template Card yaml type: custom:mushroom-template-card primary: Robot icon: mdi:robot-outline icon_color: deep-purple entity: input_boolean.tester card_mod: style: | ha-state-icon { animation: rotation 3s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
While, a custom:button-card just needs the following to accomplish the same thing yaml type: custom:button-card entity: binary_sensor.hallway_closet icon: mdi:star name: Rotating styles: icon: - animation: rotating 5s linear infinite alternate
I never considered adding tooltips to my custom:button-cards. This could actually be useful for me as a means of "keeping notes" for a card without having to going in to the Edit to look at how the card was set up. (I keep a View of examples and experiments with titles to help me find specific examples.)
well its actually very useful esecially in buttons with only an entity_picture and you dont want to spoil the view at first sight. hovering the cursor then shows what is all about.
or, even better shows a state dependent action you can perform```
tooltip: >
[[[ return (entity.state === 'on') ? 'Doe Cover override uit' : 'Doe Cover override aan'; ]]]
btw, posted this this morning... would you know how to simply show HH:MM on an input_datetime, other than this hacky manipulation states['input_datetime.cover_dorm'].state.slice(0,5) ?
I'm not sure if this will work directly for the state, the concept should apply (strformat) yaml {{ now().strftime("%m/%d/%Y, %H:%M") }}creates 07/24/2023, 17:09.
yes but that is jinja.... I need js for button-card
I have an example that I use in a function in Node-RED but I'm not sure how to make it work within a card. (I'm sure there is a better way it can probably be done too...)javascript const time_now_hours = new Date().getHours() const time_now_minutes = new Date().getMinutes() const time_now = time_now_hours + ":" + ('00' + time_now_minutes).slice(-2);
haha, yes that is essentially just as hacky 😉
yeah, but IIRC, javascript does handle dates and times very easily...
@pallid zephyr I converted your message into a file since it's above 15 lines :+1:
I have what I hope is a simple question.
I'm using the custom secondaryinfo-entity-row card, and trying to do some basic math on two attributes. Unfortunately it's failing. But this syntax is working. Is it possible to do do some division within the js templating?
card:
show_header_toggle: false
title: TrueNAS Datasets
type: entities
filter:
include:
- entity_id: /sensor.truenas_datasets/
options:
name:
- []
secondary_info: >-
<b style='color:orange'>Pool:</b> <span style='color:white'>[[
{entity}.attributes.Pool ]]</span> <br> <b
style='color:orange'>Mountpoint:</b> [[ {entity}.attributes.Mountpoint ]] <br>
<b style='color:orange'>Used:</b> [[ {entity}.attributes.Used ]] bytes<br>
<b style='color:orange'>Free:</b> [[ {entity}.attributes.Available ]] bytes<br>
type: custom:secondaryinfo-entity-row
show_empty: true
sort:
method: state
numeric: true
reverse: true
type: custom:auto-entities
I want to display GB instead of bytes.
@tribal turtle Honestly, IMO, I think the easiest route would be to create a template sensor which will create an entity with the value that you want to see. I'm all for trying to get the card to do as much of the work as possible. But, you're going to have to figure out how to implement some JavaScript into your HTML because HTML cannot perform math on its own. I can show you an example of one of my cards doing some math (without any HTML), but I don't know if it will help you implement. I hope it does though. yaml type: custom:mushroom-template-card primary: 'Status: {{ states("light.living_room_lights") }}' secondary: > {% set t = ((as_timestamp(now()) - as_timestamp(states.light.living_room_lights.last_changed)) | int) %} {% if t < 60 %} {% elif t < 3600 %} {{ t // 60 }} min {% elif t >= 3600 %} {{ t // 3600 }} hr {{ (t % 3600) // 60 }} min {% else %} error {% endif %}
Actually, take a look at @tame oriole's post a while back where he was doing some HTML and math-related stuff in a Markdown card. (Primarily rounding the values but that's the concept that I was mentioning with the HTML & JS working together.) #frontend-archived message
I know what you mean, but the code ive sent, doesnt have anything to do with mushroom, right?
Mushroom was just an example, that this doenst work aswell.
Okay, this actually works for me, thx
How can i get this to work with tile cards?
Thanks for your help, im just wondering why all of these ‚mushroom animations‘ shown in the forum dont work anymore
This is copied directly from the mushroom forum article, but this wont work, but i dont get behind why.
I'm honored to be used as an example
Hi all, I've written a popup when pressing on a light card, which brings up the lights. The light card is a mushroom light card, and it doesn't work when tapped, only works when sliding the dimmer. Can anyone shed some light on this? I'm not sure what's going on and google doesn't really help.
Sliding the brightness bar turns the light on and off. Pressing the light on/off does not worked. I've even tried to specify the tap_action which still doesn't work.
This ofcourse works as normal without the popup card. Any help is appreciated.
The code is here: https://pastebin.com/7yLwkAcm
**EDIT:
Update to HA 2023.7.3 and clear cache. This solved the problem for me in the browser.
On the companion app now the popup css styling does not work (max height) and so it extends so large, it is in fact clickable but not the sizing is completely off and is glitching. Anyone else having this issue?**
Sorry for the late reply but this doesn't work:
show_name: true
show_icon: true
type: button
name: "[[[ return states['sensor.shelly_plug_torretumbler_power'].state; ]]]"
entity: switch.shelly_plug_torretumbler
There was a breaking change to the Mushroom card that changed how card_mod animations are handled. https://github.com/piitaya/lovelace-mushroom/releases/tag/v3.0.5
If you want to customize icon animation, you must use ha-state-icon selector with animation property.
card_mod:
style: |
ha-state-icon {
animation: spin infinite linear spin;
}```
In fact, I even made a post when the breaking change happened and was trying to figure out how to get it working with the new syntax. https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590/7230
Follow the examples in this thread that come after my post.
When you were talking to petro and TheFes, they talked about using custom:button-card (https://github.com/custom-cards/button-card) since most cards don't accept templating. You're using the stock button card.
Thank you very much!
Sorry to bother you, but your knowledge is great.
I want the mushroom entity icon on the screenshot to be as bright/white as the tile card because its hard to see with the theme. Do you know how i can do this?
I'm pretty sure I have an example set up for something like that but I don't remember the syntax of the top of my head and I'm at work at the moment. Won't be able to check for about 8 hours...
its not that important, dont mind! Im happy for any advice anytime😅
I am having some issues getting the RPI monitor card to work? [hacs] does anyone know what I am doing wrong?
Yaml data I currently have:
https://codeshare.io/DZX8XE
May not be the problem but try using lowercase entities: on line 2
Looking at the docs, I'm not sure if the card will accept a list of entities. I think it is meant for individual sensors.
That did not resolve it. it does not look to be a issue with case sensitive wording.
the listed entities are from a different list [minigraph] so the do work/are defined correctly.
But nowhere in the docs for the rpi monitor card does it show multiple entities being listed. Just because one card can do something, doesn't mean they all can, especially with custom cards. What happens if you use a single entity: entity: sensor.memory_use_percent?
this did it for me:
type: custom:mushroom-template-card
primary: Waschmaschine
icon: mdi:washing-machine
icon_color: |-
{% if is_state('switch.waschmaschine_lokal', 'on') %}
amber
{% elif is_state('switch.waschmaschine_lokal', 'off') %}
grey
{% endif %}
Hello guys, I have a question about the icon-color of a sensor.
How can I change the icon-color based on the status of the sensor in customize.yaml ?
Thanks.
You can't change the color based on the value in customize.yaml
it's all done through themes or custom cards
Hey,
i want to click a mushroom chip to open a fire dom event -> browser mod popup, no problem so far.
But i want it so switch off a input bool at the same time, with 1 click.
Some ideas?
Should he possible with a script, but can a script use a fire dom event to only show the popup at ‚this device‘
Yup. That's pretty much what I was going to show you. You can apply the same concept for the icon, too, if you wanted. yaml icon: |- {% if is_state('switch.waschmaschine_lokal', 'on') %} mdi:washing-machine {% elif is_state('switch.waschmaschine_lokal', 'off') %} mdi:washing-machine-off {% endif %}
Thats very nice! Thank you👍
It looks like that card relies on the RPi Reporter MQTT2HA Daemon to be installed on the Pi you're trying to monitor. But it looks like you're trying to use the built-in sensors. I don't think this card will do what you want it to do. (At least not at the moment without the daemon.)If you have a number of Raspberry Pis on your network then this might be the card you need to setup your Dashboard for monitoring all of you RPi's. Setup the sensor software on your RPi: See RPi Reporter MQTT2HA Daemon. Then install this card to display the state of your RPi.You can probably accimplish the same thing with an entities card but it will have less customization.
But, with that said, the custom:button-card has an example of turning it into a RPi Monitor. https://github.com/custom-cards/button-card#custom-fields
I can't get the jinja templating to work with your example or the one you linked.
As far as I understand this part of the code I shared is javascript templating, but it doesn't seem to allow full blown javascript. [[ {entity}.attributes.Used ]]
Post your yaml in a thread and lemme see what you're working with. (You're not limited to 15 lines when in a thread.)
Post your yaml in a thread and lemme see
best weather card suggestions please?
are there things in works to make ui and configuring dashboards better
because I'd say its by far the worst part of my home assistant experience so far
I get this like every few weeks
and dont remember how exactly to fix
Clear your browser cache
Im using mushroom media plazer, but it shows me mz source instead of the name of the entity. why? https://i.imgur.com/TeLwx8e.png
Hi everzone, does someone has a nice waz to show traffic maps ...Waze as a iframe does not look so nice.
Thanks
Is it possible that when you used to have an entity card with a toggle helper in and you clicked it it would just toggle? Right now it brings up a pop-up with a toggle button to change the state of it.
Do I even remember that correctly? And either way, is there still a way for it to be a button that toggles the toggle helper on and off without a pop-up?
If I use the entities card I still get toggles at the end of each line but that doesn’t seem to be an option for a mushroom-entity-card
Oh right, I found where the config is on the mushroom card, at least. I know I’ve seen and used that before.
I suppose that is what tap action is for on the native button-card?
grid-layout question. When I have grid-template-areas: "weather tesla solar" and grid-template-colums: 1fr 1fr 1fr, it does what I expect: each thing is 1/3 the width of the screen. The things are platinum-weather-card, picture-elements, and a grid-layout with 3 button-cards. When I change to "weather weather tesla tesla solar" with grid-template-columns: 1fr 1fr 1fr 1fr 1fr, I expect weather to be 2/5 screen width, tesla to be 2/5, and solar to be 1/5. Instead weather is 26%, tesla is 15%, there's a large gap, and solar way over on the right is 25%. How does this make sense? Don't adjacent cells with same name become a single div which the object then fills?
Thank you for the info, Will check it out in the following weeks
Does anyone have a idea for this?
Every time I get back to doing new things in ha after six months just using it passively, as it were, I find myself relearning things that should be obvious. But yeah.
np, I do exactly the same thing... 🙂
But my ulanzi with Awtrix is fully installed now, after 3 or 4 months since I bought it. Wa-hey!
(And in the process I found out that even for the 3-4 month old tutorial, my mushroom cards install was out of date cause it didn’t have a card they used…)
grid-template-columns defines 5 equal size columns so why is column 1 wider than column 2? The area labels are at least in the right columns - but the actual widget with the picture of the tesla is drawn in column 2 instead of columns 3 and 4. WTH??
Does view_layout not work inside picture-elements?
- type: picture-elements
view_layout:
grid_area: tesla
This is one of the cards inside a
type: custom:grid-layout
layout:
grid-template-areas: 'weather weather tesla tesla solar'
grid-template-columns: '1fr 1fr 1fr 1fr 1fr'
cards:
...
please custom:button-card users, have a look at the beta version currently in development. The author has updated a huge amount of new functionality, and now would be a good time to engage and help out checking for issues.
For crying out loud ... is all my suffering because it has to be grid-area instead of grid_area?
Is this possible at all?
template: card_generic
entity: sensor.server_room_energy_usage
variables:
ulm_card_generic_name: "Power Usage in [[ states('sensor.current_month') ]]"
ulm_card_generic_icon: "mdi:flash"```
what are you trying to do? iow, what is your questions really?
Aside from correct spacing, yes, it is possible but requires the card_generic template to be defined in the Raw editor. That's also where the variables would be applied.
This line:
ulm_card_generic_name: "Power Usage in [[ states('sensor.current_month') ]]"
Because it just shows up as Power Usage in [[ states('sensor.current_month') ]] in the card right now
o I see, well no, that is a jinja template inside a button-card, which uses javascript
So what would be the proper formatting?
did you check any of the million examples 😉
its very easy
[[[ return states['sensor.current_month'].state; ]]]
and I always put them on a multiline, so I dont have to mess with surrounding quotes
name: >
[[[ return states['sensor.current_month'].state; ]]]
So ulm_card_generic_name: "Power Usage in [[[ return states['sensor.current_month'].state; ]]]"?
no, you need to add that string inside the template
[[[ return 'Power Usage in ' + states['sensor.current_month'].state; ]]]
Like this? - type: 'custom:button-card' template: card_generic entity: sensor.server_room_energy_usage variables: ulm_card_generic_name: > [[[ return 'Power Usage in ' + states['sensor.current_month'].state; ]]] ulm_card_generic_icon: "mdi:flash"
in stead of asking, why dont you try?
The card just dissapears
Errors in inspector maybe?
And as d_sellers said: you have that template configured ?
I am now happily using my personally customized theme file and learning to tweak all sorts of details. Nice. Can text properties (font, color, size, letter-spacing, line-height, etc) be manipulated in a theme file or does that stuff belong somewhere else?
@pliant mural It looks like you're trying to replicate the Generic Card from UI Minimalist. You need the generic_card template for the custom:button-card put into the Raw, but that template also relies on two other templates: icon_more_info_new & ulm_translation_engine. So you'll need those too. (https://ui-lovelace-minimalist.github.io/UI/usage/cards/card_generic/#usage)
UI Minimalist is cool but it takes a bit to actually get it to work. Honestly, you might be better off just going with Mushroom Cards (https://github.com/piitaya/lovelace-mushroom) or styling your own custom:button-card (https://github.com/custom-cards/button-card) without all the UIM stuff. Use it as an example but design what you want.
There are lots of examples for the Mushroom Card here: https://community.home-assistant.io/t/mushroom-cards-build-a-beautiful-dashboard-easily/388590 and custom:button-card here: https://community.home-assistant.io/t/fun-with-custom-button-card/238450/762
does anyone know how i can add custom CSS to one particular view or dashboard? i found the way to add resources, but I don't want to apply this CSS to the entire interface.
my problem is, I am using a custom card on a view with panel mode, and there is always a scrollbar on the side of the screen. I want to add overflow: hidden to the body to make the scrollbar not appear.
Can anyone help with this?
i tried making a copy of the theme i am using and adding overflow: "hidden" to the bottom, this did not change a thing after i changed to this new theme.
I dont know if this is the correct place to discuss this... Im using chromium browser in Ubuntu in kiosk mode on a tablet as an HA frontend. Yesterday, I updated Chromium and now kiosk mode doesnt seem to work. It now shows an activities menu and the ubuntu clock etc at the top of the display when previously my dashboard was full screen. Has anyone seen this happen or have any tips?
Hello
I've setup zones on the map. Is it possible to change the person status on the dashboard to specific status depending on the zones? Such as "Home, Shopping, Working Out, At work" etc.
I might be mistaken but I think overflow: hidden does not hide the scrollbar. Instead it hides the top right overflow menu in the header.
The specfics will depend on the card you're using but it can be done with some templating. Here's an example: yaml type: custom:button-card entity: person.derek name: >- [[[ if (entity.state === "home") return "At the house"; else return "Not at the house" ]]]
wouldnt the person entity do that itself? I mean its either Home, Not home or in a zone, and with the new translations that should just work out of the box?
It should report what zone the user is in, but if you want to customize what is shown, that's where the template comes in.
alright, new problem. how can i remove the space between cards and make them touch each other?
got card-mod?
i do
IIRC there's a borderless card option
all of my cards are in nested vertical and horizontal stacks
ok lemme see
sorry not at home, and I don't have internet to dial into my HA and check
oh i meant i will try to see how that option works
I know what you meant 😛 I was preemptively saying that
something like
style: |
ha-card {
background: none;
box-shadow: none;
}
should work
obviously with proper indentation etc
okay, i just realized that i have to put that in every card instead of just in the top stack card
yeah unfortunately
Consider the custom:stack-in-card.
Or if you're using a custom: button-card, you can make a template to apply to the cards you want look the same.
im just glad d_sellers1 agrees with what I said
imagine the shame and embarrassment otherwise
Mhhh.. I've just come across this... Those folks have embedded some custom cards created out there, no mention of the license (and no credit given to the authors, that might be optional depends on the licence). And they are selling a product out of it... http://www.ai-speaker.com/
https://github.com/sviete/AIS-home-assistant-polymer/tree/alfa/src/panels/lovelace/cards
I can at least recognize some cards from @polar kelp, @hoary river and @mild veldt (+ button-card)
When using a conditional element, is there a way to delay the "disappear"? I have motion detection from my cameras, so I have conditional elements in my picture-elements that only show when motion is detected, but sometimes the motion is only like 0.5 seconds. I'd like the state-icon to show for say 5 seconds before disappearing again
Create a template binary_sensor based on your motion sensor entity with a delay_off of however long you want. Then use that in your card
that's genius
Ah thx, will give it a go
So the condition could be either the motion sensor, or the binary_sensor, but the element would be the binary_sensor, so it uses the delay_off. Nice
The condition would be just the binary_sensor
It looks like they've completely ripped off Home Assistant down to even the hardware. The site doesn't translate to English well but looking at the screenshots and the github, it is all HA, not just custom cards...
Yes, I know, but HA uses apache 2.0 licence. They have open-sourced the modified code, though... I don't know if that's enough
yeah the site doesn't even translate properly when you select english just shows the polish
I get the open source aspects but to just copy everything and brand it as their's, that's not right (I wouldn't think). Then, if an open source project doesn't have a license defined (a custom card for example), how do the rights work with that?
if no licence is defined, then they can't use it at all
It looks like they grabbed just about every custom card out there.
I recognized your username. I suggested custom:button-card sooo many times!
I came across this because... LOL
https://github.com/custom-cards/button-card/issues/729
i know it from someplace too but can't quite place it
I'm giving some well required love to button-card at the moment haha, so going through the issues 😅
That's interesting. So one of their users ended up on your Github for support. Too funny.
Can anyone point me straight on the syntax for adding entity "attribute" within a entity-filter card?
Can do with regular entity card but trying to put list into entity-filter
OK thanks, wasn't sure if I was missing anything on the documentation 😦
There's a section in the docs talking about filtering attributes but not sure it is relevant to what you're trying to do.
state_filter:
- operator: regex
value: "^([0-7]{1})$"
attribute: eta```and```yaml
state_filter:
- operator: ">"
value: 50
attribute: humidity```
Like, are you trying to make a list of devices with CR1632 batteries. Or a list of devices and then it tells you what each battery is?
Will be a fill list of devices with battery type. Have it in the Entity-Filter so I can then filter out anything which isn't working or disconnected etc.
Think Auto-Entities is what most people mention on search. Was just trying to keep it to native cards.
You may find yourself outgrowing the capabilities of native cards. That's where the custom cards come into play. For example, I use custom:battery-state-card (https://github.com/maxwroc/battery-state-card). (Don't mind some of the entities shown here in the screenshot. I need to update/remove some...)
Looks like state_filter is just for filtering and not changing entity info which is displayed.
Thanks for the pointer, will take a look at the custom cards and use those. Not using supervisor so didn't want lots of manual updates to custom_components mods
You can install HACS without supervisor. There are instructions for Container and Core users. I would assume once you installed HACS, it should be able to keep your cards and whatnot updated.
Had never heard of IPoAC. The technology has been around forever though. Shame it suffers from high latency.
yeah and packet loss can be is an issue
Only like 55%. No biggie. 😆
I was just looking over the ping response packets...
but the latency actually is ok, you just can't stream a movie file until it's done
goes from 0%-100% in one jump
true. it all depends on how you encapsulate the data. But distance is also a significant factor.
Thankfully my the island I live on is only 21 miles long and 7 miles wide
Can I do this in configuration.yaml? The path to it isn't covered by the mappings of either /hacsfiles or /local. That's where I find custom:grid-laayout and I'm quite often getting "Custom element doesn't exist" for that.
frontend:
extra_module_url:
/config/custom_components/ui_lovelace_minimalist/cards/lovelace-layout-card/lovelace-layout-card.js
rephrased.
you should be able to use the actual path, or the mapping
It hasn't made the problem go away so either I'm using the wrong path or it's not the right thing to do.
I've experimented a bit and there doesn't seem to be any error message anywhere if you use a path that doesn't exist.
my pigeons are wet so I can't connect to home right now
and I didn't take my laptop out the truck because we are having torrential rain atm
Hi All, whats the best way to acheieve this sort of layout where the lines encompass the vertical stack rather than the individual items in the stack - I currently have a vertical stack, then a horizontal stack in it for the two gauges.
For reference, as apposed to this:
Similar question asked about 12 hours ago by carpet. KrAzIe242 suggested some style options. I suggested looking at the custom:stack-in-card (https://github.com/piitaya/stack-in-card). You can also apply some card_mod (https://github.com/thomasloven/lovelace-card-mod) yaml card_mod: style: | ha-card { border: none; }In this mockup, I used a stack-in-card with two horizontal stack cards each containing three custom:button-cards. (I also applied the card_mod to each of the custom:button-cards; something about the way that card interacted with the stack-in-card or something... The custom:button-card is capable of templating, so that could have been an option too.)
I'm just glad I knew something about front-end work lol
I've been trying to build out a dashboard in yaml, and I'd like to have some graphs on it, but they always flicker, and seem to also sometimes cause my custom:expander-cards to collapse and the page to jump. Am I doing something wrong here?
https://monosnap.com/file/UBTtOZqgUwg6T96QcmZDf5QE3LTF7X
Area cards can display a camera feed for the area instead of an image, which is great! However, Frigate creates camera entities for each of the detected object types, and since the actual camera device belongs to an area, so will those entities.
As a result, the area card sometimes displays detected objects instead of the feed. Any way I can fix this without changing the camera entity names or area?
Any who knows something about car charger and power card plus ?
My home charger has an attribute that shows the consumption but hos do I put that ind my card/frontend ?
Does anyone know how I can easily replicate this?
it looks like picture elements or the grid card with buttons
Can't it be replicated with a button card?
a single button card for 8 buttons?
you'll need a grid card no matter what
that looks like its a 5 by 3 grid of buttons where some buttons are not filled in
I hadn't thought of creating a stack within a stack. Thanks for the hint. I managed to achieve such a thing, I will create my dream remote control to control the TV. And do you know any way that will make it easier to type text from your phone on a samsung smart tv?
sorry, I do not
Okay, Thanks again for the idea 😄
I want a card like the energy-devices-graph but can be used for real time power or current consumption, not energy. Does such a thing exist?