#frontend-archived
1 messages Β· Page 75 of 1
certainly looks it - although you keep making the thing bigger - my little fire 7 wont be able to handle much more without it being unreadable!
what the resolution on it ?
kewl gonna try it in that res
thanks buddy
np
happy to try my stuff π
see how it works and what doesnt work although i havent come across something off yet
Hi guys, I would like to add "state-icon" element on "picture-elements" but with another icon, how can I change it?
I tried to use "icon" but then I cannot change color if the light is on or off
@normal nexus use light groups. https://www.home-assistant.io/components/light.group/
That is gorgeous @buoyant skiff
And I agree with the others. Good job on keeping it minimal and uncluttered
@gilded plume most people will put a vertical or horizontal stack within a conditional to get more out of one. That combined with panel true and you can really dictate your views
Hmm that's indeed how i order my view but conditional is hard when you have more then one user that you want home/not home to show for example travel time to home (only when state_not home)
and when being home at workdays travel time to work (but maybe gf is then already at work so shows travel time to home π )
@mild veldt - they are switches, not lights
same thing easily grouped
i had setup the legacy UI with the 2 switches in one group, with view: no - and then added that group to my main page, so i just had 1 button to turn them both on/poff
hmmmm so i can still make a light group out of switches?
yes if you have the old template for it then yes
what do you mean old template?
light tmplate or simular
kitchen_lights:
name: Kitchen Lights
view: no
entities:
- switch.kitchen_cabinet_lights_1
- switch.kitchen_cabinet_lights_2
or you can make a script for it
load of ways to do that
more suited to get a light template or a script help in #330944238910963714 however
π
yeah i can't add the switches to a light group
gives me an error that they dont belong to domain "light"
then you have to do a light template
Good Day Everyone. Does anyone if there is a way to reduce the size of the image when using "type: picture-glance" and are using a camera as the image background? If it is possible, what is the syntax? TIA
@plain torrent See https://www.home-assistant.io/components/camera.proxy/
@raven nacelle - I tried that and it did not help... The image still larger that I would like.
@plain torrent Do you want it to be lower resolution? Or smaller width/height on screen?
Smaller width/height on the screen
That's not how picture-glance works. The image always takes up the full width of the card
Thank you, the explains why I can't resize it..
so I'm having some issues with some basic lovelace cards. Options like show_name, show_state, and tap_action seem to have zero affect on my lovelace interface.
@valid thorn that's a very broad set of 'issues'. Some insight into how you're using them and with what would be beneficial. Post some configs on hastebin
there's an example, copied pretty closely from somone else. Thank you for your help!
and boom now we have moon state too π so at daytime its a sun with the amount of hours and at night we get the moon and what state is in π
all with animated icons
@buoyant skiff that's amazing
@halcyon mantle This should work with images now, and (kinda sorta) with ios somewhat... https://github.com/thomasloven/lovelace-long-press
wonder if i should switch the arrows and times for the moon
that would make sense π
Why is the lit part of the moon darker?
yeah good point
must have fudged the colors when i made the icons
easy to fix later on
@polar kelp Awesome! Thx a million - I'll let you know if I find any bugs...
Also, arrows to the right fits better with the units on the numbers above
Oh, you will...
sun
figure i revese when the sun goes down
havent gotten that far just made the jinja part for what state the moon is in and that the icon switches from sun to moon
Speaking of sunrise indicators, there's always this: https://www.youtube.com/watch?v=V-4YxzTx3_Q
whats next linus pΓ₯ linjen ? π
actually @polar kelp that is the correct for waning
it is correctly lit
is it mirrored though?
yes it is
so that was kinda simple to do
{% if is_state("sun.sun", "above_horizon") -%}
β {{ as_timestamp(states.sun.sun.attributes.next_rising) | timestamp_custom('%H:%M') }}
{%- else -%}
β {{ as_timestamp(states.sun.sun.attributes.next_setting) | timestamp_custom('%H:%M') }}
{% endif %}
icon is an easy thing to fix later on π
but its nice with the switching back and forth from day to night etc
@polar kelp I updated the script - It works on PC, IOS in chrome, but not in the app with an image
Not sure how to clean the cache of the IOS app, but I did close it and force a refresh
It works in the app for me.
Best way to refresh the cache for the app is to add a ?v= counter to the end of the script url
or just ?anythingreally
The ?v=2 and a force refresh did the trick...
Thx a million again - It is awesome!
Are you planning on maturing the js script to add an option to choose the long-press action? e.g navigate ?
possibly
that is something i could have use for
Feel free to write an issue on github to aid my memory.
It is already a HUGE improvement for my use case
what are you using it for?
@weak gust I have a 3d render of my floorplan with lights mapped over, if you tap the room the light switches on, now if you long press you can dim them without navigating to another page or card
that's cool
Thx! This is an example with a few lights on https://imgur.com/a/i9jcFr7
how often do you find yourself actually using it though? I thought about doing something like that but it doesn't seem too practical for me
My lights are set to follow me through the house after dark, and if I want specific lights on its either the interface or voice
@buoyant skiff - no Idea how to do that, but more than willing... I also believe I got the inspiration on there π
ever used github ?
Never uploaded code, only discussion and download
how do you handle making it follow you? motion or some kind of room presence?
can see if i can do a little tl:dr
@weak gust PIR, bluetooth and logic to process false positives
PIR?
a sensor
ah
Passive Infrared
quite effective
so motion
yess
so it doesn't follow you :D still looking for tracking specific people
what application did u use for the floorplan ?
seems nothing great exists for that yet
@weak gust nothing big is great from the start it takes time and dedication
I'm having trouble with simple lovelace cards options like show_state, show_name, column_width, and tap_action seem to do nothing at all. I'm at a loss here. Does anyone have any insight as to why these don't work for me? Here are two examples. https://pastebin.com/3gRagSk7
Its an open source 3D thing - let me quickly check on my other machine..
Sweet Home 3D
thank you π
Is there a howto to contribute to sharethelove?
This was where I got my inspiration <-- https://sharethelove.io/picture-elements-cards/3d-floorplan
yeah on the intropage
So there is an example
not really just the gist of it
oh yeah @buoyant skiff, I was mostly talking about hardware. options are usually between motion, wearing an iBeacon/some other BLE tracking, or xandem, which can't track user but is very good for presence detection
need to do a more complete version for users that havent done that much on github
anyything apple related and im out π
haha
allergic to apple π
well ibeacon is just a protocol
i know what it is π
eddystone if it makes you feel better
I'll go check out the welcome page...
PIR is actually good
I'm looking at ibeacon for a room level presence sensing
if used right
Occupancy is nice to know, but presence will be kick ass
I have tested the radar sensor too, still want to add a POT to them as they were too sensitive too wide
picked me up in the room next to it..
lol
@valid thorn Can't imagine that's the problem, but it should be column_width...
Other than that, I can't see anything wrong with that snippet
@polar kelp unfortunately i just added that back in and typoed it then, even spelled correctly it has no affect π¦
Looking at Ben's all in one sensor, and replacing the PIR with the radar if I can tone it down as I can then hide the sensor in the room and still detect occupancy
I think the challenge with PIR is what happens in the case of someone sitting still for too long. I guess there may be other tricks to tell who is in the room and combine that
combo with bluetooth it should be just fine
The radar is VERY sensitive - you will have to sit extremely still for it not to pick you up, and as mentioned couple it with additional info
@weak gust I used motion sensors and the bayesian sensor so that things like lights and media players in the room help determine presence
anyways we are kinda offtopic π
yes, sorry
just a tad.. π
naa its ok just saying before any of the mods slaps us π
- @empty heath just logged on π
Hi, All. I thought I'd join in on this one. I've got a DIY sensor array and the PIR Is ugly on it. RADAR sounds interesting, and sitting for too long it also something I have considered, I was looking at a delay of 10 mins after last movement and then possibly a dim or flash of the light sso that I can be reminded to wave my hand
move radar convos to #the-water-cooler
@halcyon mantle ill make sure to check out the sweet home 3d so i can make my own floor plan cause i really like that 3d view
so many thanks for recommending it
Big pleasure - Really easy to learn and do... Believe, I ain't no draughtsman
Took longer to figure out the correct coordinates for the images on the picture element card than what it took drawing
yeah not always where you want it to be
and if you forgot to set transform: none and use some other computer with a diffrent res
that your in for some additional issues with stuff breaking
The biggest challenge is to get the walls and overlays to line up nicely...
I used % couldn't find docs on the px option, and my css is knowledge is very limited - so I struggled through. e.g style: top: 57.2% left: 90.3% width: 14.8%
transform: none to styling
and instead of % use em etc
will have to realign eveyrthing
but it will stick better then %
if you open that floorplan up on other devices
i only use % if i want to center something
then you can do bottom:
and right:
too
π
So far it hasn't let me down, iphone chrome & app, work computer, laptop and Windows VM all aligned correctly
Guess I'm lucky
I'll add the rework to px / em on the next iteration..
Nope, straight picture element card, had an entities card follow it for the lights which I can now remove
Wait, what, if I remove the entities card will it break the current layout?
probly if its just an entity and not elements
Hmmm.. lets find out...
Removed everything as a test except for the floorplan and its fine on app & laptop...
neat
I'm relieved - otherwise it would have been another late night...
you do have backup running right ?
i do daily backup and instant backup on my config
so if i do mess up i can always just revert
Can I set a picture-element in 2 or 3 columns?
Yes - I run rsnapshot, and rsync (own script) - That goes to my NAS, my NAS encrypts the backup and uploads to Google Drive - This happens daily @ 01:00
@buoyant skiff what do you mean?
Off topic again, but still looking for a rpi-clone type backup but to image not physical device
@tough knoll - panel:true
2 large colums
that is panel: true
then you have to setup horizontal-stack
and then do your picture element cards inside the stack
I would like to have a big card in 3 columns and all the others small (like always)
panel: true then horizontal-stack & vertical stack inside - Going to take a bit of planning to get it right but its possible
I saw an example on one of the lovelace example sites - can't recall which one though
is it the only way to have this result?
the problem is that there is the same layout with little screen and big screen if I use "panel:true"
I just want that with big screen a card is in 2/3 columns
then just use the normal view and do horizontal and vertial stacks
should be just fine
then my cards will be horizontal stacked in mobile views too?
yeah
that's the problem π
mobile is a problem
workaround: create a mobile view and a desktop/tablet view
yeah
thats what i was gonna say
and then use marius script for setting home for devices
so that mobile gets redirected to mobile
and desktop/tablet get directed to normal view
that's cool, where can I get this script?
Thanks! let's try π
Toast is away! Ozark season 2 and sleep :wave:
_slaps @buoyant skiff _
Thatβs what column-card is for
To get a layout with columns that adjust to mobile view when using panel:true
@polar kelp I fully deployed your js script now and so far so good, I do pick up on the IOS app you have to slide your finger off after long press that the more info stays open
Thx! I was running in circles trying to figure out how I would get around not having it. Reason I asked for the tap-action option, is when I add more entities to my floorplan it will get difficult to tap the correct one so long-press will navigate to a zoomed view of the room where long-press will give more-info on a entity
Donβt forget about groups too. If you make the image open more-info about a group, you can keep more stuff in there
My approach on love lace is to try and keep it all on picture elements, and try and steer clear of traditional "switches/toggles"
Ideal will be to be able to tap hold and slide up and down to dim and bright without seeing a slider - but that is wishful thinking
Same idea on a air conditioner for temperature up an down, blinds, garage door - basically anything that can be adjusted π
Anyone know how to style the text of state-label? I want to do white text with a black stroke to ensure it readable against the background always
yepp
-webkit-text-stroke: 0.1px rgb(7, 9, 9, 0.8)
that is an outline @halcyon mantle
slaps @empty heath
i found this combo effective
-webkit-text-stroke: 0.1px rgb(7, 9, 9, 0.8)
text-shadow: 0.09px 0.14px 2px rgb(7, 9, 9)
Thx! I tried-webkit-text-stroke and text-shadow before, but didnt see the effect, but in all honestly my code was waaaaaay longer - used a web generator for it.
Awesome! Let me try that...
slaps @buoyant skiff again
hows it going ?
Not too shabby.
Haha, I bet.
atleast my lovelace ui is looking awesome
did some more work today on it
added moon info etc
just need to create a trigger for sunset > night
so 30 min before sundown it triggers the icon change
@buoyant skiff How did you add them?```
- type: state-label
entity: sensor.living_room_temperature
style:
top: 47%
left: 66%
width: 33%
webkit-text-stroke: 0.1px rgb(7, 9, 9, 0.8)
text-shadow: 0.09px 0.14px 2px rgb(7, 9, 9)
like this?```
style:
top: 47%
left: 66%
width: 33%
--webkit-text-stroke: 0.1px rgb(7, 9, 9, 0.8)
text-shadow: 0.09px 0.14px 2px rgb(7, 9, 9)
sorry meant -webkit
it doesn't seem to apply: https://imgur.com/a/J7gkBBG
style:
top: 47%
left: 66%
width: 33%
-webkit-text-stroke: 0.1px rgb(7, 9, 9, 0.8)
text-shadow: 0.09px 0.14px 2px rgb(7, 9, 9)```
Cool! Will play with the values - what is the 0.8 in the webkit line?
opacity
1 is fully
0 is invisiable
the other values are just Red green blue π
Thx! Appreciated
np
Is it possible to do templating in lovelace? Currently temp shows as 20.0C, would like to round it...
Or should I round it using a template sensor and pull that value?
No templating in Lovelace
Morning
think text and spacing between everything is looking good. Kinda just reused the values from my other nas at the moment while i set up a stats system for the older dlink nas
what is wrong in this card?
- type: custom:entity-attributes-card
title: Attributes Card
heading_name: List
heading_state: States
filter:
include:
- key: sensor.*_battery
name: Stato Batterie
π€¦ Good question - what's the problem you're having?
@foggy tendon do it show up if you spesify just 1 entity and not *?
and edit your post to mask your DNS name π
Seems from the code you cant wildcard match entities, only attributes.
@polar kelp How in that case?
You can, but only after the SECOND .
@wheat current No, i get the same error
I guess it could be fixed if you write a feature request on github.
@polar kelp Hmm... more precise?
sensor.whatever_battery.*
@foggy tendon I deleted your post since you didn't edit it and it included your DNS name.
You can get wat you want with the monster-card
- type: custom:monster-card
card:
type: entities
title: Stato Batterie
filter:
include:
- domain: sensor
attributes:
battery: '< 100'
you may need to set it to 101 if that is possible
@wheat current thanks... i forgot to edit that....
isnt it better to have a simple state label if your gonna look for batteries under 100% ?
i would have got it if it was 10% or something but 100%
That would require him/her to add all of them manually, by using filters you don't need to do that
Great thing about HA - there's more than one way to do almost anything π
anyone got any good themes for lovelace? I'm bored of the default gradient.
https://community.home-assistant.io/c/projects/themes There are plenty on the forum
thank ya
is anyone else using that other interface, the one made for displays? I forgot the name now.
AppDaemon ?
HACP?
With HADashboard
np ^^
now that I am getting more stuff in my HA, I'm thinking of making a view for like phones and tablets, and one for bigger screens and just overall making it look better.
Somebody using a picture elements card tu turn on a switch?
hanging in the air atm..
I guess someone didn't RTFM :P
https://www.home-assistant.io/lovelace/picture-elements/#service_data
You are missing service_data
quite funny it turns on all switches xD
btw - u uploaded the /kodiremote-card - there is the spaceholder missing
That was @buoyant skiff
spaceholder ?
Thanks - read a little to much, flying over flying over -- a i know how to do this - uhfuck.jpg
placeholder*
no its not
u create it
its an transparent png
to whatever size you want it to be
was confused first why it isnt working
I just googled placeholder.png and putet it in the path π
looks fabulus https://imgur.com/a/8qZoVWq
And just see it animated/media-card/kodi-icon.png isnt included as well
it is
True - strange that it isnt getting loaded π€¦ Wrong dir
even better - the placeholder is to small to show the last lines
so make it bigger
Will update notifications on new HA versions arrive in the new notification stream?
That's for persistent notifications (I think), and not Lovelace specific, so only if you set up an update notification to generate a persistent notification
Aha ok. Was thinkin about setting up a conditional updater card in lovelace.. but i'm not sure how to trigger it..
conditions:
- entity: updater.updater
card:
type: entities
- updater.updater```
i guess i need to set the state to trigger on from updater..
like state: True or "on"
but what is the state of updater.. when an update is available
Does anyone have an example https://www.home-assistant.io/lovelace/glance/ card that uses the service and service data? I can't work out how it should look.
I guess you can't specify a brightness for the on and then just have it turn off
cards:
- type: glance
title:
entities:
- entity: light.shave_den_sink
icon: mdi:power
name: Bathroom Light
tap_action: call-service
service: light.toggle
service_data:
entity_id: light.shave_den_sink
brightness: '10'
color_temp: '450'
is there a way to make it set the light and then turn it off when you tap again?
I thing options only work with light.turn_on, but you can practice at /dev_service or whatever itβs called.
nm I got it, woohoo
for anyone who cares:
cards:
- type: glance
title:
entities:
- entity: light.shave_den_sink
icon: mdi:power
name: Bathroom Light
tap_action: toggle
service: light.turn_on
service_data:
entity_id: light.shave_den_sink
brightness: '200'
color_temp: '450'
turns light off, and turns light on with --- whatever you specify
I wanted to do this to make sure the light comes on the setting I like regardless of what it was before, because i'm making a view that is easier to turn lights on and off instead of trying to press the little switches all small and close together on my phone lol
Are you sure? It shouldnβt call a service if you donβt have tap_actuon: call-service, should it?
apparently it does π
Ok. While useful, Iβd still consider that a bug, so donβt expect it to work forever...
yeah haha
actually it didn't seem to work the next time I tried, weird, guess i'm back to figuring it out
back to my problem
can I make it turn on with specific settings and then turn off
Add your sequence to a script and call that script with the UI.
Don't try to do backend operations with frontend π
Or a service template
hmm that could work
You can also use conditions in scripts, but that is off-topic for this channel π
yeah
I was thinking that
now to decide if I care that much lol one thing that is annoying is the glace card cuts off letters of the entity name
here's one for ya, is there a way to make the lightbulb icon light up when you turn the light on and go back when it's off
ahh, I didn't need to specify an icon, ha
Yeah if you override the icon in LL it does not respect the state for color. I think thatβs a bug
I was gonna say if you run a script, and change the icon to a bulb, can you make it light up the bulb when the script is running, etc.
I donβt think thereβs a state of βrunningβ with scripts, is there?
I may be wrong
hmmm, not sure
I think there is if the script has a delay of some kind, but I canβt check it now, and also: not #frontend-archived
yeah not sure how to make it work to be honest lol
waiting for that magic moment for it to tick over and give me my animation
and we have liftoff
now to add it to the lovelace ui π
for full effect
how can i have lovelace change icon of an entity based on state? I made this in the template dev thing and it returns the right icons based on state - not sure how to apply it to the lovelace entity -
{% if is_state("switch.garage_door", "off") %}mdi:garage{% else %}mdi:garage-open{% endif %}
this works fine but the icon is static -
- type: entities
title: Doors
show_header_toggle: false
entities:
- entity: switch.garage_door
icon: mdi:garage
does the icon work in the sensor ?
if it does it should work just fine in lovelace
if you check under dev-info
umm, well its not a sensor
its a command_line switch
if i use a template switch i can use icon_template
Hmm
@polar kelp - Found a minor bug with the long-press - it seems to still work while the more info dialogue is open, so tapping on the white space on that screen toggles the states of the entities behind them
Hi everyone... I'm getting started with Lovelace and having some difficulty getting a weather card working. I'm getting a message "no state available for weather.darksky"... any suggestiones?
I'm also seeing the same no state available message for media_player.tv, and this feels like something new after the update to Hass.io 0.77
@desert reef I only attempted briefly but I believe the weather card only works with Yahoo? Unless I missed some docs somewhere
At least I attempted to switch to dark sky and It blew up - didn't look into it further
@desert reef which weather card
@desert reef also it's weather.dark_sky not weather.darksky
Hi @dense roost it's type: weather-forecast and I tried both entity: weather.darksky and dark_sky... with the same result
@desert reef you added dark sky in your configuration.yaml right?
@desert reef being cruel, posted a message that is more than 15 lines. It is now available at: https://paste.ubuntu.com/p/FzgpbjVmBP/
Oh wait, is that just for a sensor, and I also need a "weather:" entry?
Yup, that was it, I had the sensor setup, but not the platform.
Hi all, what is thee best way to size a background image I'm using as a pannel?
I'm ending up with a scroll bar on the right hand side when in full screen
like having it as a background on cards or as a proper background ?
like having it as the "background" on a picture element, so as a proper background?
then on a card
and not background
there is a differance
using panel: true or not ?
which one if the images is the svg ?
? the black background is a svg and does not appear to be scaling since I'm getting a scroll bar?
- type: picture-elements
image: /local/Images/LivingRoom/black_background.svg
elements:
but with PNG it would be a static size?
yes and there for not break it as bad since it scales up if too small
while svg has no defined size
and there for break the ui
Ahh
see the differnace ? π
haha yeah, thanks! I'll give it a try. I'm still new to all this and trying to figure out how to make something that doesn't look like total π©
yeah no worries just glad to help out just like to make the point clear so that you guys understand why stuff like that happens π
now more coffee while i ponder my nas predicument π
π« did it die?
weird i made the background a png and made it small to the point of showing white and I'm still getting a scroll bar
.share
Please use https://www.hastebin.com/ or https://paste.ubuntu.com/ to share code.
ill take a peak if you want
naa just the releavent part
here is a good tip when setting stuff in place that i had alot of use for so it doesnt break under various resolutions
use transform: none
and only use % if you want to center something
use px or em or any other measurement to get it into plae
place*
that way it doesnt break and it looks the same on any other res
that way you can tighten up the buttons
so that the look more grid like
oh interesting, so under style for each card use transforn: non?
Yeah it kinda got blown up when I started messing with the background
I realized it wasn't sized correctly and it screwed up my alignment when I changed it
panel: true
and not scaled
false or true π
lol
but if yes works then ok but its not correct according to documentation
yes appeared to have worked haha
wonder if it works with anything else then false so any added value makes it go big
but true is the correct term π
interesting, that fixed my scroll bar.....
awesome
that's crazy, now my background is too small so I need to resize, getting white
do you have an example of the transform: none and using % to center?
check that for refernace
not sure I follow
on what i just explained
oh does the kodiremote show how to align stuff better?
yes
check the lovelace part
z-index is only used for layering so ignore that if your layout is flat
meh we all live and learn
my first cards was pretty piss pour the stuff im doing now is really good
but its gonna be hell to disect and post on sharethelove
Right? I'm trying to get this basic stuff down so I can make more sophisticated stuff. Lovelace is pretty sweet
@wheat current
the stuff im working on
all dynamic icons that change throuout the day based on states and sensor
so the interface is dymamic and more alive
wow how much time was put into that?
think im ive invested a month and a half
learning on the fly basically
only been here for 2 months :d
and in that time ive learned python and jinja on the fly π
dang haha well i've been using HA for like 2 year and I still suck at it
that is some impressive work
Sweet I can't wait to check it out. Deff puts my shitty buttons to shame
bahh continue your work dont get distracted by my work
id be happy to offer thoughts and input if you need help if i have the time
the awesome part with my ui is that the background changes every hour
so the cards changes to another background picked from unsplash π
got a little gallery setup π
that it picks from
thanks! Yeah that is really cool, I need to get into some stuff like that....My HA has always been disappointing from a visual perspective
I really like the schedule setup you have
what is that pulling from?
trackt
ohh wait
lol
thats google calander
haha had an additional shedule before with tv series
but i ditched that one
gonna reimplement that later on i think
ah yeah i need a google calendar like that
that's really cool
clearly I need to put some more work into this
used to google calander component
the fact that I can't even get a background to show cleanly is ridiculous
there is also a google calander card
try the svg again then
just for shits and giggles
see if that works as intended
what do you use for a browser to test the page with?
chrome is a B*** with it's catching
hmm i've been having to do the F12, F1 CTRL F5 like every time
hehe yeah clearing caching is often needed
dang even if i get this sized correctly, it doesn't seem like it's going to be very dynamic across other devices
all depends on the layout
phones are the worst
thats why i opted for tablet layout
You can also append ?v=1 at the end of the file name and increase that in the config after each change, if you do that F5 is enough
also a way to trick the browser π
@wheat current should i move the nas indicators ?
what do you think
To where?
look up i posted screens
meh, it fits there
it has indicator is temp is rising or falling too
ok
indicators in in the small space between icon and text
how do i add cameras??
how do i chanage image for a group?
π
that sensor is finally working just fine π
or if should use chevron arrows to indicate rising and falling
filter: drop-shadow(1px 1px 1px rgb(0, 0, 0, 0.6))
great for adding a thin line of shadow behind icons π
@quasi tinsel https://www.home-assistant.io/lovelace/ - worth reading the documentation for each card type. If you need help please include context (like what card type you're using)
absolutly perfect now with that small dropshadow behind icons π
Does anyone know if you can put temp sensor readings up in the title section? I want it to read out "Master Bedroom - 23C" for the title and have it change with the sensor
or on the picture cards, show the value of the sensor instead of having to click it
elements and build it
then you can do it
to make the "title" use custom useful markdown card
or a state-label
@buoyant skiff your greeter cards are getting better and better π
i wasn't able to get the custom:useful-markdown-card to work with templates info
for example something like
greeter_card_test:
value_template:
Tomorrow is {{ states.weather.faro.attributes.forecast[1]['condition']}} with temperatures ranging from {{ states.weather.faro.attributes.forecast[1]['templow'] | int}}β. to {{ states.weather.faro.attributes.forecast[1]['temperature'] | int}}β.
would love to see how you combining everything with the custom:useful-markdown-card
sigh
thats all wrong
you cant template
and its [[]] not {{ }}
read the documentation for that card
I feel like I'm missing something obvious here, but in the old UI, if I had a group card, I could click on the title and control the settings for all the entities in that group (provided they are of the same type) like for example group.room_lights, clicking on the title would let me change the color of all the lights in that group.
How do I achieve the same thing in LoveLace?
Usage: ~afk <message> or ~away <message> or ~seen <username>
@buoyant skiff so has example how to go about it?
to use this has example:
{{ states.weather.faro.attributes.forecast[1]['condition']}}
- type: custom:useful-markdown-card
content: >
the weather is [[states.weather.faro.attributes.forecast[1]['condition']]]
i have tried but got nothing π¦
Toast is away for 22s with a message :point_right: busy
Hello, I am trying to have a picture glance card for my Den (following: https://www.home-assistant.io/lovelace/picture-glance/). I have put my image in the root directory as well as under /configHowever, its not rendering. Entry in ui-lovelace.yaml is image: /local/Den.png
That worked perfectly. Thanks @wheat current
for "state-image" can we use > or < ? So if the temp is over 80 it shows one image, if it is less than 70 it shows a different image.
I'm hoping to put in on a picture element card.
temp above x shows x.png, temp below y shows y.png That kinda thing
so it's not a fixed state like on or off. I could do it with a boolean that turns on when temp >x etc, then set the state-image to the on/off state of the boolean. But that's an extra step it would be nice to not have to do.
@fathom tree comes in here, that's awesome
@fathom tree we β€ you like a π€
I need more help than most π
You got rfid working, that's pretty awesome
thanks. that was a good one.
Trying to make a Lovelace page for our little maker faire quest with the wand and dragon
need the gauge or state-image to give the players a visual cue that they are doing the right thing to open the box.
for some reason my custom cards aren't being recognized. I've got the .js files in the www folder, and I've got the custom cards I want listed as "resources" in the .yaml... but I'm getting the "custom-element does not exist" message.
I must have missed something...
@fathom tree thats easy
just template it in a sensor
so if 80< show image blah if >80 show picture yada
atleast i think it would work π
beeen doing most of my stuff via templating so far
does the image have to cover 100% ?
no, it's a small image.
icon size ?
little bigger.
you can use useful mardown card and then define the size of the image
after you templated the entity_picture_template
is there a way to put the template in the lovelace yaml or would it be in the config to set the state?
oooh, entity_picture_template. didn't know that was a thing.
no templating inside lovelace all handled by backend
so make a template sensor
do a value_template and then a entity_picture_template for the template sensor
that changes images
cool
greeter_weather_information_sunrise:
entity_picture_template: >
{% if is_state("sun.sun", "above_horizon") -%}
/local/icons/animated/greeter_card/sunrise.svg
{% else %}
{% set state = states.sensor.moon.state %}
{% set path = "/local/icons/animated/greeter_card/" %}
{{ path }}{{ state }}.svg
{% endif %}
kinda like that π
so that makes my icon switch from day and night to sunrise info to moon state info
hope that helps you get somewhere with your project π
@fathom tree if you come up with something nice that others can find useful feel free to pr sharethelove.io
π
does anyone know if entity-filter cards state_filter support a numeric filter being less or more than a specified number
i have tried state_filter: [ < 20000 ] but it didnt work π¦
didnt think it would be a template
I was just toying with an idea. was hopefully that it would work
well it can but not with standard cards
why do they call them monster cards?
cause the monster card can do regexp and other various funcitons
thanks @buoyant skiff
aaaah
Awesome Home Assistant - A curated list of amazingly awesome Home Assistant resources. https://www.awesome-ha.com/
cab I do one like this for battery levels? https://sharethelove.io/monster-cards/broken-card
yes
@unkempt sphinx monster card can do what you want it to do
there u can use < 20000
or whatever the value was π
- type: custom:monster-card
card:
type: entities
title: battery
filter:
include:
- domain: sensor
attributes:
battery: '< yourvalue here'
@odd light
@buoyant skiff thanks that worked exactly as i wanted
The weather forecast card suggest the following config: - type: weather-forecast entity: weather.demo_weather_north
What can I use to replace weather.demo_weather_north, if I am using dark sky or yahoo weather, etc?
@low agate any of the other weather components that aren't sensors I believe.
You see there two Dark Sky components. Dont use the "sensor" version
Same for any others you see listed there
What's the recommended way to debug layout issues in Lovelace custom cards? I'm trying to make changes to my weather card, and poking at it using Firefox's Inspector, but the card keeps reloading and kicking me off of the element I was looking at.
in lovelace is there a way to hide the "views" menu at the top? or at least to set visibility: false to a view? My intent is to rely on mini images of each room that you click on to take you to the appropriate view. I could do this anyway but would rather do this and do away with the top views menu also
@glossy yoke there are probably better ways, but I load the page, then shut down homeassistant to work on them. π
@wheat current That can't be the right answer, but it's so brilliantly simple. π
In chrome at least, you can pause JavaScript execution from the dev console. That will stop updates
@mossy otter google βlovelace kioskβ. It willbring you to a js gist that you load and any url containing βkioskβ will hide the header.
@polar kelp fantastic thank you
@polar kelp That works nicely. Thanks!
I'm struggling to figure out the syntax to get a template to render in the useful-markdown card - Anyone have an example? It just renders as undefined
Anyone know the necessary CSS to put in the style section of a state-label to change the justification of the label? (The position seems to be center of label which makes left and right of text change as length of data changes. I'm trying to align a bunch of labels.)
@drifting cove Text should be aligned to the right by default. I think the issue you have is that each element has transform: translate(-50%, -50%) so your positioning is based on the center point of the element instead of the top left. Try transform: translate(0)
@tender wasp Thanks. Can you explain that transform tag a bit so I can understand how to modify it?
Basically, it moves the element by the specified amount after it is positioned. So translate(-50%, -50%) moves the element half of its width to the left, and half of its height up. This was done so that if you position an element at top: 50% left: 50% the center point of the element is in the center of the card, otherwise the top left corner of the element would be in the center of the card
You can also use transform to rotate, scale, etc. https://developer.mozilla.org/en-US/docs/Web/CSS/transform
Awesome help. Thanks. So I could transform( 0, -50% ) to left justiry but keep vertically centered?
Yep you got it. And if you want to right align use transform(-100%, -50%)
Perfect. Thanks.
@halcyon mantle what do you have now?
morning
Good morning
Though, Iβm headed back to bed.
Finally the wife and kids are out the door! Now I can wallow in self pitty and man-flu!
hehe
@polar kelp Hi, I currently have this - I started with the standard curly brackets, and from the readme.md on github I seems that I must replace them with '[]'```
- type: custom:useful-markdown-card
content: >
## Stats
All entities: [[states | count]]
All automations: [[states.automation | count]]
[%- for domain in states | map(attribute='domain') |list | unique | list -%]
[[ domain | title }}: [[ states[domain] | count ]]
[% endfor -%]
Ok. Useful-markdown-card has a very very limited form of "templating". The ONLY thing it can do is print the values in the state variable.
So no filters ( | count), no looping ({% for), no branching ({% if), no indexing (states[domain]).
The only thing you can do is get the state or attribute of a single entity. If you want anything else, I recommend going through a template sensor.
Also, notice that in the sample on github, there's no state..
Cool! Will rethink this approach using sensors
have to do all of that stuff in a template sensor
the call the template sensor from the markdown card
we should have as a topic rule nr.1
no templating in lovelace π
(except through lovelace-gen)
ive setup a trend sensor to check if the sun is rising of falling so now i need to combine that with the regular sun sensor to make a rising and setting animation for lovelace π
Is there a way to have 2 lovelace interfaces? I want a normal one and a tablet version
You could use the kiosk-mode thing and only allow navigation between certain views using picture and navigation_path.
and you can use home-setter to define which unit goes where π
Or you can do it the hard way and create a custom panel starting from this: https://github.com/home-assistant/home-assistant-polymer/tree/master/src/panels/lovelace
Thanks for the ideas
Does lovelace support color picking for my lights? It seems it's not working out of the box
Not sure if it's by-design or I am just being dumb ;p
not sure what brand your lights are even so begin with that
and if its like hue or some other equal brand its handled by backend
It's Hue and I get the color picker on the 'old' UI
I am using the entities card for the switches
But if they are implemented somewhere in Lovelace then I know I can fiddle some more π
so if you do a simple entity and add the lights does the color picker show ?
What do you mean with a simple entity?
Like on the old UI or is that another lovelace card?
do you got ui-lovelace.yaml setup ?
Yes
views:
- icon: mdi:home-assistant
title: Home
cards:- type: entities
title: Living room
entities:- entity: light.couch
name: Couch Backlight
- entity: light.couch
- type: entities
Completely basic π
and the color picker doesnt show on that ?
DId it turn up when you turned it on?
np
With your random backgrounds, I think this screenshot is a perfect example of why a regular icon is a great idea. The right side of the left chevrons are almost invissible.
Especially at a glance
Ok. That will help with visibility...
looks like this in action π
found a nifty little linux app called peek that i can record from the screen directly into gif π
evening all, is anyone experiencing "dead" toggles after 0.77.1? I had a few switches inside glance cards that when clicked they'd expand and you could toggle the switch on/off. now theres no toggle and the gui sort of freezes. i need to reload in order to select another device, say a sensor and get it to expand.
found the problem. i still had custom ui enabled and it was breaking the lovelace cards.
sweet rising temp works just fine too
probly better with a full up arrow instead of cheron
That looks like the gitlab logo
due to the two colors i used
think im gonna use custom markdown so i can scale the icon a bit more
wondering what it would look like animating bottom to top instead of left/right
didnt look good it looked like it was glitching
gotta step up a notch
Like the chevron personally
@storm lion well needs a arrow up... get with with the program
βΉ bully!
π€£
hehe
It's looking awesome @buoyant skiff π Love the work you do and teasing us with it π
Small question: when loading custom lovelace ui elements you can see a red error for a milisecond
Example: https://i.imgur.com/YUP4LC1.png
After that the custom element (weather in this case) loads up just fine
Is that by design and maybe possible to hide the warning?
Also looking sweet Toast!
What's the trick for controlling page layout in lovelace? Is there a way for me to control card size or the number per row / column? I'm find with editing underlying card code if needed
nm finally found it in the docs
Ok maybe not - Has anyone successfully nested the nest style thermostat component in a vertical stack?
@buoyant skiff, do you have a repository with your personal lovelace config in it?
@desert reef he does not. Check sharethelove for a small selection
Thanks @mild veldt , I'll check it out.
Ok sorted out the nesting - is there a way to control card size I'm missing?
is it possible to do an entity-filter for all in a domain? Instead of listing out each entity individually?
e.g - if i wanted to have all lights show up in a card that are 'on'
ah nevermind, looks like monster card will do it
Would it be expected behavior that a conditional card still takes up space but is just invisible? On a phone or narrow browser window everything looks normal, but in a browser things are spaced out if the browser is wide enough.
@mild veldt tnx ian for pointing em towards sharethelove π
@swift ferry Thatβs because most of the interface is generated in the browser. In order to be as fast as possible most cards are shown before any custom javascripts are even loaded, so at that time the system doesnβt know that the custom cards exist.
@swift violet the closest youβll get is using panel: true
@polar kelp Ah that's what I thought. Thanks. π Is there any way to make lovelace load custom elements first? (Maybe if I add the files to the source?) I can not seem to find the lovelace repo though, which is probably by-design too for now. π
.awesome
Awesome Home Assistant - A curated list of amazingly awesome Home Assistant resources. https://www.awesome-ha.com/
got most of it covered has almost all of the resources out there
@swift ferry Lovelace is actually just a panel in the ordinary home-assistant frontend: https://github.com/home-assistant/home-assistant-polymer/tree/master/src/panels/lovelace
Oh sweet! Iβll have a look at both π
I see @swift ferry - need to look into something like flexbox from css for cards - allow a card = 3 or something to consume 3 of 12 columns
@buoyant skiff Am I imagining it or do you have a Lightpack?
do you use a platform for controlling it?
hyperion
ahh. I'm using Prismatik.. I should probably rename my platform to that actualy
well prismatik is ok for windows
but i got mine hooked up on kodi running on osmc
so prismatik is a no go there
on my windows computer i use prismatik for both my screens
yeah I'm on macos.. (and windows). still waiting for Lightpack2.. Wonder if there is any hope for this year π
they should release their API now so people can get ready. hope it's not telnet based :/
What would be the recommended way to have a card just list all light entities (either from the special group or just using a light.*)?
monster-card
That's what I was afraid of π¦ Why would there not be an easy way to "expand" a group as one of the native cards available?
Β―_(γ)_/Β―
Β―_(γ)_/Β―
π
Β―_(γ)_/Β―
Oh well, monster-card added, more stuff to keep up-to-date...
Yes, auto-updaters is great, until it breaks everything π
its not an autoupdater per say
it updates on command
it can be set to autoupdate
How do i get the weather forecast card to work with dark sky? i have the sensor but lovelace tells me its missing
.share
Please use https://www.hastebin.com/ or https://paste.ubuntu.com/ to share code.
easier to get what your refering to when looking at the yaml
@polar kelp of course, what a f*ck up on my part. thanks!
Not at all. It's not clear from the documentation. I'll get on that.
but it makes a lot of sense when you say it π
Pull request sent to the documentation!
If I use toggle as tap_action, is there a way to see more_info as a secondary?
Kind of... for picture-elements... if you're comfortable with using custom elements... and don't mind bugs...
can i adjust the height of a Horizontal Stack Card?
@polar kelp hmm, not really π
@olive forge note that Lovelace is still experimental. You are bound to run into bugs even when using only built-in cards.
π€ you don't
@mild veldt I'm aware
Home Assistant in general is, in a sense π
but I understand Lovelace is even more experimental
Hey, @halcyon mantle ! I think I fixed the clicking-through-dialog bug in long-press.
"Usage 1000 w/h" ?
π€·
Hey, @halcyon mantle ! I think I fixed the have-to-move-your-finger-a-bit bug in long-press.
Also, I'll stop pinging you now.
Thx - Reinstalled my notebook so I was not keeping an eye on discord.
I will pull the new version and let you know...
@mortal cape nice design tho, I'd much prefer the navbar in the bottom compared to how HA does it now
Appreciate the effort! @polar kelp
Works 100% on IOS app! Thank you again! @polar kelp
Yay!
Some day I should probably get started on actually automating my home rather than doing stupid workaround stuff like this...
hahaha - Well, by the time you start you will at least have all the building blocks in place
can lovelace maps update to the current position of the device they're tracking automatically?
so I've got a fan connected to a zwave outlet, is there no way to put a fan icon that will change colors when the fan is "on"?
Ok . . . So . . . I got my cards all nicely formatted and mobile tries to follow them and becomes unusable - no concept for media queryβs I gather? Seems to me it should be smart and re-organize into a vertical stack . . .
@odd light you should be able to . . . Maybe a template?
Maybe, bedtime now, will work on it tomorrow lol
@swift violet are you using vertical- or horizontal-stack?
morning
my decision to move the hdd sensors seemes to work out just nice need to realign them a bit however
@odd light If you set the icon through customize it will change color. (https://www.home-assistant.io/docs/configuration/customizing-devices/)
If you use ```yaml
- entity: my.thing
icon: mdi:whatever```
(https://www.home-assistant.io/lovelace/entities/#configuration-variables)
it will not. I think.
@buoyant skiff - not reseeding - tut-tut
@storm lion ?
if your refering to the counter on the side thats not connected to transmission
thats homeassistants upload and download
all aligned π
with the current ui you have 'home' tab that just has everything... Can you get hte same idea with lovelace?
They're working on that.
k, cool.
i'm just stuffing around, tbh
i've read about it.. now im' playing with it
More details on that here: https://hasspodcast.io/ha033/
hhmm. I had no idea that there are hass pod casts
It's great! Really interesting interviews. Also, there's #creator-connection
that google play subscribe link is not working with my google play
Yeah, I remember them mentioning some weirdness about that. Bummer.
yeah, right.
@polar kelp both - I was working on formatting layout for tablet and pc screen and realized a day later that it destroyed mobile interface too
Yeah. Horizontal-stack stops lovelace from attempting any dynamic placement of cards. And it will try to keep them at least a minimum width.
That's what light group is for https://www.home-assistant.io/components/light.group/
haha
Man, Im really liking this button platform. Goodbye all other dashboards π
cant really decide how i want my sensor for hdds and rpi π
@buoyant skiff some really nice work dude
tnx
Hmm . . . @polar kelp so I gather thereβs no real way to format layout with Lovelace unless Iβm doing so for a single monitor type?
Unrelated question, Has anyone found a way to get custom UI components working on Kindle fire? I think itβs related to an outdated web view version
This might help a bit: https://github.com/thomasloven/lovelace-column-card
Thanks @polar kelp Iβll have a look at that
@polar kelp how its visability ?
And knowing how lovelace orders card.
Should be visible in most cases. Might want to try against a light blue sky or something too, though.
This looks like exactly what I need, yeah Iβm still sorting out how ordering works but I suspect thatβs just a touch more reading an messing around in the UI
works with ligher backgrounds too added a small shadow for the images
After some bug fixes and added features, I think this is turning into something useful: https://github.com/thomasloven/lovelace-long-press
Anyone else experiencing trouble with the more-info dialog?
I can press an entity once, and it comes up, but when I press another nothing happens. Have to reload
@polar kelp Nice!
I can't believe your timing...
"Anyone having trouble with the more-info dialog?" First 12 seconds of this from here: https://youtu.be/74bkUkVGvgg?t=2m17s
Haha!
It's given me so much grief you won't believe it to get the more-info dialog to pop up when it's supposed to and close when it's supposed to, and not be clicked through, and not close by itself, and be at the right spot, and be for the right thing, and you name it
Well I'm kinda happy it's not just me.. π
No, that's just for the long-press thing. It's probably entirely unrelated to your problems.
I have no problems like yours
can confirm that aswell
Though I'm still on .76
Oh God! Did they change something in the more info dialog for .77? π°
Β―_(γ)_/Β―
Hello, I'm here to work and do job as many. Any assisstance you can contact me, Trust me I'm a pro.
NoNo Sir, Trust me I love working,
Everytime I'm bored, I work to improve more and more progress.
This discord server is for the software program called home-assistant. Not about home assistance.
Can I highly recommend that you read the Home Assistant web site and learn what you're talking about here
Before you get banned for coming across as a spammer
Damnit. I'm on the newest release, 77.3
No sir, I'm no spammer.
same here @subtle rune
Also, you're off topic here unless you're talking Lovelace @sage trench
@buoyant skiff so then it is just me π
nope im on 0.77.3 and got that issue too
so your not alone π
Have you checked if there's an issue?
I left the beta channel about a week ago. Bleeding edge is fun until it breaks everything π
nope just been working around the problem
I was reading @sage trench 's sentences with an accent
I can't see an issue in the polymer repo
cool raise one π
Yeah ill do it tomorrow when I'm at the computer
almost lost all my progress today π my rpi did a random reboot and zeroed out my lovelace file π
naa thats what i got a backup system π
didnt loose shit π
although i was kinda baffled by the random reboot
So it's pretty dependent on lovelace-gen, then?
homeassistant has made some zombie progresses
seems raspistill is the main cause
so wonder how bad the source is for rpi cam in hass
@buoyant skiff please use the chat for lovelace
OK
π―
@polar kelp havent had time to mess around with lovelace-gen
been to busy with work and then when im home im just trying to wrap up the ui
but my plan is to circle back to it once im all done and try it out
when i got a nice backup incase i mess up
Ok. I thought you meant there was jinja in the frontend configuration.
naa jinja for backend
all the sensors with icons and entities
backend files are almost as large as the lovelace file
My Lovelace is super dependent on the gen π not jinja and stuff but more that I couldn't find shit otherwise
hehe
Just noticed my switches for lights are gone from the more info as well π±
But I love the notification drawer, so that's something at least π