The second and third vertical stacks are separate, and vill be placed automatically
#frontend-archived
wheat current
Oh, that to
rotund island
you lost me
flat timber
I can't seem to get the picture into the picture glance card and can't figure out where I'm going won't (first picture card that I'm trying to do) all the controls show up but no picture
polar kelp
@rotund island The cards that are Inside the horizontal stack needs to be alligned. There needs to be exactly the same number of spaces before each - type: vertical-stack.
polar kelp
And so on for the cards inside the vertical stacks, like the Presence and Radio cards
rotund island
@polar kelp would that be correct ? https://hastebin.com/zifahuwaja.bash
mild veldt
I've been using a circle-sensor-card for ratings, could put the last check-in entity picture as the background of the circle sensor with the rating then as the outer ring around it
polar kelp
That will give you four columns
rotund island
oh wait sorry
polar kelp
If you inset the Radio card as well, you'll get what I think you want
mild veldt
No added space to render, but more information. That would be slick
Too bad you can't know how many levels are available for badges, could then do one on that too
rotund island
@polar kelp like this ? https://hastebin.com/udelelonec.bash
polar kelp
Give it a try
rotund island
I did but i screws up everxthing by using an horizontal stack i try to fit 3 coulmns in the width of one column
polar kelp
You might need an extra two spaces after each cards:-line, but I'm not sure, actually.
as in the configuration examples: https://www.home-assistant.io/lovelace/horizontal-stack/
polar kelp
Ok. Time to simplify. Minimal working example: https://hastebin.com/xekariyili.yaml
This looks ok to me
Replace one card at a time untill it looks the way you want or breaks
rotund island
didn't take that long 😄 https://hastebin.com/emewazuwaj.bash
the issue here is the colun width in the horizontal stack
rotund island
ok looks more like it not as beautiful as i hoped for but it's a leap forward
@polar kelp @wheat current @buoyant skiff Thank you for your time
glad it wasn't an indentation error at least i hope so
polar kelp
Finally! https://github.com/thomasloven/lovelace-fullykiosk
I hate writing documentation. It's so anoying having to explain how to do things that would be obvious to anyone who spent the last week writing the code...
sudden lion
@polar kelp nice work! Do you have a screenshot of how it looks?
polar kelp
Doesn't look like much, really.
rotund island
@polar kelp in what case do you youse this ?
polar kelp
I have an android tablet that I plan to mount as a ha dashboard in my hallway. This lets me also use it as a security motion sensor, and lets me turn off the screen automatically at night.
And with lovelace-player (linked from github) I can play text-to-speech messages or sounds on it as well.
rotund island
ok I see the use
mild veldt
@polar kelp awesome! You just got me some bonus security cameras! Nice!
sudden lion
Are you able to hook into the camera to get a live feed or is it just live pictures?
polar kelp
Just still images
sudden lion
This is my fully kiosk "integration" https://hastebin.com/axecequbes.cs
mild veldt
@polar kelp So is it just images from when motion was detected?
polar kelp
I'm not sure, really... it's quite slow from what I can tell
Well... actually, when I open up the camera feed it's not too bad
sudden lion
i dont think it store anything it just shows it "live"
mild veldt
Okay. I’ll be checking it out regardless
sudden lion
When you open the feed its "ok"
polar kelp
2-3 fps perhaps
sudden lion
Not to be a party pooper, but you can just add it as a generic camera into hass with:
camera:
- platform: generic
name: tablet1
still_image_url: http://IP:2323/?cmd=getCamshot&password=SUPERSECRET
You mean exactly what I say at the bottom of the readme?
sudden lion
haha yes 😉
polar kelp
The camera feed is not a part of the plugin.
sudden lion
sorry, didnt read that far
mild veldt
Mr party pooper
sudden lion
Ill check out your plugin, looks decent
polar kelp
I think the only difference to your integration is actually the motion sensor and the ability to controll the screen brightness
Besides the fact that it's not homeassistant polling, but the device pushing the data.
sudden lion
I tried tinkering with the motion sensor but wasnt satisfied with the response time so ill check out yours instead
i think push will be better for that case
polar kelp
Can you even get motion state through the rest interface?
sudden lion
there is "motionDetectorState" but that never updates (on my system atleast) but i tried to play around with when it turned the screen on = motion
upper cedar
i am trying to display darksky sensors on Lovelace, and it's coming up blank
here is my snippet from ui-lovelace.yaml: https://hastebin.com/hopekojotu.css
and my /sensors/darksky.yaml file: https://hastebin.com/ukagupihir.bash
forest onyx
Hey there - is it possible to hide/lock the sidebar in Lovelace? I want to have a tablet showing an alarm panel bit if you can just press the sidebar and change the state from there it kind of defeats the point...
icy shard
can somebody help me with this "background: radial-gradient(#141E30, #243B55)" i want to have a radial gradient but it dosnt work
if so please dm me beacuse i need to sleep right now
upper cedar
i swear even the simplest things don't work for me on first try, i'm just trying to change the theme to theme: dark-mode but it doesn't do anything
upper cedar
views:
- title: Overview
id: overview
icon: mdi:home
theme: dark-mode
cards:
@upper cedar you have dark-mode defined in your frontend configuration?
upper cedar
after a lot of digging around i only just now realized i needed to do that
so i just added this to frontend.yaml
themes:
dark:
primary-color: "#1ABA92"
primary-background-color: "#303030"
secondary-background-color: "#303030"
paper-card-background-color: "#424242"
and changed it to theme: dark in ui-lovelace.yaml
looks like that is what did it
mild veldt
you'll need to restart to get the change in frontend to reflect
upper cedar
thank you
buoyant skiff
@icy shard use rgb instead of hex
dense roost
@north spear http://imgur.com/gallery/6us9O5U I messed around with the alarm card. The dots are crudely done, could be done much better as I just used css psudo classes to add the circle outline.
buoyant skiff
that looks really nice
sudden lion
@dense roost Would you mind sharing those icons, the look very nice!
buoyant skiff
nick made those from scratch, thats why i truly love his unique ui
gonna be nice to see a overall later on when its done
dusk dirge
Question: If I change the icon on a device in customize.yaml the icon changes color according to the theme depending on state. If I change the icon on the entity in ui-lovelace.yaml the icon does not change color according to the theme. Is this a bug?
buoyant skiff
no more blurry text all opacity is handled from background using rgb instead of hex
icy shard
can somebody help me with this i get the error "mapping values are not allowed here in "/config/ui-lovelace.yaml", line 55, column 19" and in ui-lovelace.yaml it looks like line 54: "- switch.dorr_altan_oppen" and line 55 "name: Altan"
icy shard
yeah ive already fixed it by the help from your answer
buoyant skiff
something is malplaced in the config
might be as simple as a missing :
or a whitespace
or indentation
@mild veldt
way better now
icy shard
toast should i send a picture in dm?
buoyant skiff
naa use hastebin and post in the chat 😃
polar kelp
@icy shard I think you need
- entity: switch.dorr_altan_oppen
name: Altan
whats the diffrence?
polar kelp
entity:
buoyant skiff
entity is needed for it to work
the nice part about rgb color is that opacity is avaible
background-color: rgb(4, 4, 4, 0.6)
icy shard
its working now thanks
buoyant skiff
the 0.6 is the opacity for the background
icy shard
but btw it clips out some of the name in the ui how do i fix that
here is the code for that card https://hastebin.com/ohiveyevik.coffeescript
buoyant skiff
fontsize in styling is one way to go
icy shard
?
buoyant skiff
can you post a picture on a imagehost
so we can see what you refering to
@wheat current
wheat current
Hard to read the numbers at the bottom
icy shard
icy shard
oh
icy shard
icy shard
yea
polar kelp
@dusk dirge You should submit an issue https://github.com/home-assistant/home-assistant-polymer/issues
Just search first to make sure noone already did.
buoyant skiff
💯 @wheat current
faintest tones of shadows made it way better
think its ready for sharethelove 😄
icy shard
how do i fix my glance card?
buoyant skiff
well you can use style for making the font smaller so it fits
thats one way to handle it
polar kelp
Remove the särskrivning, and it might not be a problem...
buoyant skiff
that too
polar kelp
😋
buoyant skiff
but im fairly sure that its gonna cut off due to the length
icy shard
it is the lenght
icy shard
what should i use instead
icy shard
picture elements?
kind shellBOT
A place for LoveLace Config https://sharethelove.io/
buoyant skiff
some examples
icy shard
so i cant make the glance windows bigger?
icy shard
@subtle rune what is the easiest way to do that
icy shard
what is lovelace kiosk mode
half cradle
@buoyant skiff mate that looks great
buoyant skiff
loving all the animated icons from loading.io
half cradle
its a great Job well done
forest onyx
Thanks @polar kelp
polar kelp
Hey @subtle rune, remember how I said you'd never be able to access states from lovelace-gen?
Well.. I was wrong: https://github.com/thomasloven/homeassistant-lovelace-gen#experimental-feature
subtle rune
Wow, that's great! 😃
Will try immediately
@buoyant skiff I like your calendar entries 😄
subtle rune
I mean the things in your calendar 😄
buoyant skiff
ahh 😛
subtle rune
But the card is great too! 😛
subtle rune
@polar kelp Works nicely! Now I can use the ununsed entities a little bit better at least!
icy shard
what is the easiest way to make so that i can toggle a device by clicking on it and view more info by holding on it
icy shard
do anyone got an solution?
subtle rune
I dont understand what you want to do.
icy shard
a glance card that when you click on a device it toggles it but if you hold on it, it will bring up the more info screen
never mind i will just use a entities card instead
buoyant skiff
even better with some text-indent: 1em
dreamy tendon
what's the tv schedule thingy?
dreamy tendon
well ofc but how is it setup?
buoyant skiff
fetches from tvdb database via rest
dreamy tendon
hmm, okay
wheat current
Why not sickrage?
subtle rune
I need to setup so I get info from sickrage and radarr
mild veldt
@buoyant skiff are you familiar with trakt.tv? I'm working on a sensor to get similar things from them for tv schedules, watchlists, etc
mild veldt
i did not know you were on the kodi project
buoyant skiff
OSMC to be specific
and yeah been involved
so thats how i know many of devs in various opensource projects like sickrage and raspberry pi devs etc
since many of the developer gather around such a big project
@mild veldt hows your untappd card coming along ?
mild veldt
haven't really touched it since i last sent you an image, my dad has been in town and i haven't really been doing much with hass
buoyant skiff
ahh okey
buoyant skiff
no idea
mild veldt
@frank garnet I believe so. @north spear has been looking into bringing a codepen written in jquery to a card. He might know
north spear
@frank garnet it is, but I strongly suggest against it
to be honest I've been reading around the best approach to the custom web components problem
currently as things get more and more complex (like thermostat or the animated weather card) it gets more complicated for users to include things
also keeping version management is a pain
So far (after a few tries with different approaches) I came to the conclusion that Stenciljs is the way forward (At least for me)
What stencil does is some sort of bundling + compiling into usable (Even in es5) web components
buoyant skiff
@north spear had anytime to peak at my ff issue ?
north spear
no, i've been quite busy as of late and yesterday had our company summer party, so today I'm broken again
wheat current
Use Chrome, problem solved 😉
buoyant skiff
ahh
north spear
left the party at 5am 😃
north spear
@buoyant skiff do you have position relative on the :host ?
dreamy tendon
pff chrome.. Vivaldi all the way
buoyant skiff
using default position on all cards
north spear
ok
buoyant skiff
anyways get some rest and drink some fluids 😛
north spear
do you use any extra css for positioning ?
north spear
just standard picture-elements?
buoyant skiff
yepp
undone egret
I second Vivaldi with Handel second
buoyant skiff
anything thats in the available in the default style settings
that config i posted is a good tool for recreating it
and the component i used for that snipplet is available on custom_component repo
north spear
I think I was missing the sensor than
buoyant skiff
its camera.unsplash
north spear
can you ping both on private message ? Just so I don't lose them again from messages on lovelace scrolling stuff up
buoyant skiff
all done
honest yoke
Anyone knows how to show an image in an entity section in lovelace?
I have a group of sensors but i also wish to show the camera image in the same group/card
title: Vägstatus Nöbbele väg 23
show_header_toggle: true
entities:
- camera.nobbele_vagkamera
- sensor.luft_temp_nobbele
- sensor.vagtemp_nobbele```In a separate card/group then?
buoyant skiff
i suggest you read vertical stack and picture entity
those two will do what you want
vertical will group em
buoyant skiff
and picture will make it an image
honest yoke
Thanks!
buoyant skiff
np
forest onyx
Is it possible to have different views on different devices (hall tablet Vs kitchen etc)
blazing parrot
Do I need to do something special to add themes if using Lovelace? I'm getting a lot of errors when trying to add. I created a themes folder in my config directory and copied over some themes I found. I copied them over into individual .yaml files and when that didn't work just took some theme .yaml files from some public configurations I found.
In my configuration.yaml I added:
themes: !include_dir_named themes
The long list of errors I'm getting are all like this:
Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['disabled-text-color']. Got '#545454'
buoyant skiff
@blazing parrot theming is not specific to lovelace what your trying is more suited to #330944238910963714 channel
blazing parrot
Ok, will add there. Sorry about that!
buoyant skiff
@forest onyx mind expanding on what your trying to do
@blazing parrot np 😃 just dont add that into ui-lovelace.yaml cause it will only break it
blazing parrot
Ok, yeah I had it in configuration.yaml, I asked over there. Hopefully will get some resolution.
simple jolt
Anyway to use a conditional card to show/hide a view?
north spear
I see no point unless you have more complex logic to fallback to another view, etc
upper cedar
i have two waze_travel_time sensors: "waze_home" and "waze_work", they show up fine in the states tab, but i can't call them properly in lovelace
only "sensor.waze_travel_time" works, and it just pulls the "waze_work" one
wheat current
@simple jolt you can "sort of" get that working with vertical/horizontal card https://hastebin.com/buwoxehuqe.bash
@upper cedar Then you are doing it wrong :P, config?
upper cedar
so i have this in my config: sensor: !include_dir_merge_list sensors/
wheat current
That has nothing to do with lovelace 😉
upper cedar
in /sensors/, "waze_work":
- platform: waze_travel_time
origin: device_tracker.jeff_jeff
destination: lat, long
region: 'US'
"waze_home":
- platform: waze_travel_time
origin: device_tracker.jeff_jeff
destination: lat, long
region: 'US'
here's the bit from lovelace
upper cedar
- type: glance
title: Traffic Status
entities:
- entity: sensor.waze_travel_time
name: To Work
- entity: sensor.waze_travel_time
name: To Home
well, my bad, that's the one that actually shows somethign, but it only shows work
wheat current
that is the exact same entity_id, it will never show different states
upper cedar
- type: glance
title: Traffic Status
entities:
- entity: sensor.waze_work
name: To Work
- entity: sensor.waze_home
name: To Home
And what is the state of those to?
upper cedar
sorry, i'm not sure what you mean by that
wheat current
When you check those two sensors in 
what is their state?
And what is not working in lovelace?
upper cedar
well i see now that they're not even named what i thought they'd be
they are named waze_travel_time and waze_travel_time_2
and that worked
wheat current
so you are just making up the names?
Tips: always check for the entity_id 😉
upper cedar
i guess i just assumed that they'd be named what the file was
yeah that's super helpful
thank you
simple jolt
@dense roost beautiful dashboard. Would you be willing to share it on sharethelove.io?
acoustic turret
Quick one to the experts: Can the header and top menu bar be styled at all? On mobile, it takes so much real estate.
buoyant skiff
no but you can use kiosk mode
and make a header of your own
there are custom cards that let you enable kiosk mode
acoustic turret
That sounds interesting. I'm a front end Developer so keen to have a bit more control over html/css
wheat current
https://gist.github.com/ciotlosm/1f09b330aa5bd5ea87b59f33609cc931 <-- "Kiosk mode" for Lovelace
acoustic turret
So, with a quick review, is it just hiding default header title and nav then pulling in the headless HA pages into another page? Giving me the control of a header/menu?
wheat current
correct
buoyant skiff
@wheat current both script work 😛
buoyant skiff
np
simple jolt
Is there a way to change the size of a picture card to help align things better?
wheat current
make the image smaler 😛
buoyant skiff
using picture entity ?
kinda have to state what type of card it is for better help
cause there is picture glance, picture-entity and picture elements
each with its own style for making stuff "fit" better
wheat current
there is also just picture
buoyant skiff
indeed professor @wheat current
😛
so @simple jolt how about you help us help you ? 😛
with giving us a better description of the issue
hides its ian again
mild veldt
I actually have a similar problem. I have security cameras that are different resolutions and therefore the cards are of different heights, when I want them to be the same 😦 I don't want to reduce the resolution so that they are all the same
mild veldt
turn off your face
mild veldt
i didn't spend 2 hours crawling through my attic this past weekend to have the camera off
buoyant skiff
cant argue with logic
void marten
chaps, can you use template values in the Lovelace ui yaml? - I'd prefer to change my PIR sensor so instead of showing 8 it shows "motion"...I know you can do it to the entire sensor in the config yaml, but wondered if I can specifically do it in lovelace?
wheat current
@mild veldt Create a nice big picture-elements card with a nice unsplash background.
And add your cameras on top of it.
This way you can size them however you want 😃
mild veldt
not in lovelace, but in a template sensor, @void marten
void marten
dang, thought so - thanks @mild veldt
mild veldt
@wheat current that was going to be my plan, actually. We'll see how that holds up on mobile
thanks
void marten
extension to my qq, can you change font/highlight colour based on the value? (probably not)
wheat current
smal AF on mobile, use camera.combined there 😉
buoyant skiff
if you turn off the mobile then it will hold up @mild veldt
mild veldt
@buoyant skiff go drink a beer
wheat current
Turn of your typing and grab a 🍺 @buoyant skiff
buoyant skiff
im just being logicial 😛
mild veldt
@wheat current on that note, do you think combined could be updated so that when I click on it it will give me the feed to that camera and not just a larger version of combined?
wheat current
@void marten In some cards you can, with a "state-filter"
void marten
doesn't that just hide it based on state though?
mild veldt
Just looking for your quick yes/no judgement. I'll take a look into actual implementation if you think I won't be wasting my time
wheat current
@solar pawn https://www.home-assistant.io/lovelace/picture-elements/#state_filter
@mild veldt clicking will allways expand the entity, in that case camera.combined
mild veldt
oh shit! surprise pizza party at work! good bye!
wheat current
you can add an entity attribute to it, and a cusom card to get what you want 😉
void marten
cheers @wheat current I was thinking of entity_filter 😵
simple jolt
here is a simple example. the different picture cards dont line up correctly. one is bigger then the other. https://hastebin.com/alezitesum.bash
wheat current
That is a simple picture card.
To change allignment you need to edit the pictures to be the same size
simple jolt
@wheat current how would I go about doing that on a Mac?
mild veldt
kind shellBOT
mild veldt
mmmm pizza
upper cedar
is there a way to get two cards side by side but taking up a full column each
mild veldt
@upper cedar panel: true with the cards in a horizontal-stack
mild veldt
@upper cedar if you want additional rows you'll need an outer vertical-stack
buoyant skiff
feels like im recreating the olympic rings 😛
wheat current
😂
buoyant skiff
feeling all sporty and shit 😛
steady narwhal
go take a run
wheat current
@steady narwhal You must be new here 😛
buoyant skiff
i dont run, i drink and i know things
steady narwhal
nice
buoyant skiff
@empty heath you missed out on all the new fancy stuff we have been doing
empty heath
I saw your DM. 😃 Very cool.
buoyant skiff
and Ludeeus made a cool camera combiner
empty heath
Camera combiner?
buoyant skiff
combines feeds
buoyant skiff
the custom component repo
is where those are 😃
my new longer version of the greeter card
freaking huge this time around
mild veldt
@empty heath do you think it is feasible to think we might have a card/component store like we have for add-ons in hassio at some point?
buoyant skiff
halfway there with the repo setup
custom-cards, custom-components
ohh and i found a nice site for animated svgs https://loading.io
makes the webui so much more fun
wheat current
@mild veldt since every dev have their own view on how to develop their card/component, that would be almost impossible to manage
empty heath
@mild veldt Yes, something like that idea is on the idea map. The idea is to have a showcase of user-shared stuff, and maybe even allow you to right-click and send to your own HA instance directly from the showcase (via the cloud). 😃
mild veldt
That's easily solved with required criteria/standards to be accepted on the store page, like we do with add-ons
empty heath
As for custom cards, most likely not, unless someone builds it third-party.
wheat current
else then 😛
mild veldt
😢
buoyant skiff
but i really have to rethink my olympian rings of values
mild veldt
@buoyant skiff ehhh, you're using my sensor card changes! hooray! I'm useful!
wheat current
In theory could the tracker-card be expanded to include an "install" button for components/cards that are not installed on the system
buoyant skiff
ohh shit now i have to scrap it
mild veldt
😦
buoyant skiff
cant let ian be useful
wheat current
I know next to nothing about frontend, so I can not implement that 😦
mild veldt
assuming we have a service for the tracker that can do this, the install button is just making that call
empty heath
@mild veldt Don't get too excited 😛 I love feeling useful, but when you become so useful that people need your help all the time, it's not as exciting. Hahaha
mild veldt
I have no problem not living up to expectations. Ask my wife
buoyant skiff
loool
wheat current
@mild veldt the backend for the tracker card has all it need for that for components, and I can easily add the same for cards, just need someone to make it accessable in the card 😛
mild veldt
I volunteer
empty heath
@buoyant skiff Someone sent me this gift yesterday: https://www.givethembeer.com/products/ipa-beer-gift-basket ❤ I am going to be sure to check all of them into Untappd.
wheat current
go write then ;)
it will have the attribute card/component: {"not_local": true} if it's not local, and use the custom_update.update_single_card/component service to do the job 😉
empty heath
He said you guys missed me and need me back. I guess that was his way of getting my attention. 😂
wheat current
Looks like it worked 😛
mild veldt
when in doubt... 🍺
empty heath
😃
buoyant skiff
@empty heath nice 😄
empty heath
I guess he just knows the secret to my heart. Haha
buoyant skiff
@empty heath untappd component is out btw
empty heath
Nice! In core?!
wheat current
"out" (custom)
empty heath
Or still CC?
buoyant skiff
CC
empty heath
Ahh, ok. Try to get that into core!!
buoyant skiff
got some ideas for it
wheat current
should be fairly easy, since it's using a ext lib for api handling you do not have to write tests for it 😛
mild veldt
"test it in prod"
wheat current
always 😄
buoyant skiff
"barely tested"
haha
if it is a component about beer then it should be written while consuming said beers
i think that is a law or something 😛
wheat current
I can confirm that the part I have done on it (including the ext lib) has been under the influence 😉
buoyant skiff
and if i break something i expect it to be fixed by others 😛
haha
also another law 😛
wheat current
That sounded like a me problem 😛
buoyant skiff
hehe
wheat current
check
buoyant skiff
yepp 😄
mild veldt
@buoyant skiff it bugs me that the repo is untapped and not untappd
wheat current
same here @mild veldt !
buoyant skiff
we cant name it untappd
wheat current
we can
buoyant skiff
cause then they can revoke our api keys
mild veldt
we do what we want
wheat current
sensor.untappd != untappd 😉
wheat current
I have, he has not responded, also we should move this to #the-water-cooler 😛
buoyant skiff
im working on my lovelace interface 😉
buoyant skiff
i often am
mild veldt
at least he's humble, though
mild veldt
although, sensor.untappd is not "using" the api. It is using pyuntapped which uses the api directly (perhaps some wiggle room?)
as I imagine plenty of our hass integrations have similar stipulations in their api terms
buoyant skiff
@mild veldt the untappd card is on sharethelove.io btw
with all minor tweaks and fixes
mild veldt
awesome, i'll check it out
wheat current
untapped*
buoyant skiff
dont be so salty @wheat current 😛
hybrid jolt
@buoyant skiff sick looking lovelace setup man
buoyant skiff
tnx 😃 i share most of em on sharethelove.io
wheat current
.sharethelove
kind shellBOT
A place for LoveLace Config https://sharethelove.io/
storm lion
🍺
buoyant skiff
have you configured and added untappd yet @storm lion ?
storm lion
😉
upper cedar
On the Lovelace home page, there's an example video and they have a card for Birthdays where there is a countdown for selected people, how would i go about doing that?
buoyant skiff
half of that is sensors
and that is covered mostly anywhere
lovelace is mostly design
css basically
its frontend
not backend stuff
storm lion
@upper cedar - that's mine.. but I stole it off @glossy birch
link to the original : https://github.com/skalavala/smarthome/blob/master/packages/birthday.yaml
buoyant skiff
have you made a lovelace card for birthdays n stuff yet ?
i dont have any of those sensors
so havent bothered
storm lion
nah, trying to think of a nice way of displaying it still
I think a glance card is a nice display of if
storm lion
buoyant skiff
but if you do it right with the colums it might look awesome
storm lion
lovelace config
glossy birch
@storm lion we are celebrating a birthday today and kids are enjoying the messages. I even have my TTS talk to alexa to sing happy birthday song 😊
upper cedar
thank you!
storm lion
haha, yeah I set google up for that and it is totally awesome 😃
glossy birch
My TtS aimply say, Alexa, sing happy birthday song. That’s all.
storm lion
yeah.. I'll have a think.. it's probably monster card territory too.. in reality I only need it to flag up birthdays that are a week or two away.. probably overlaid over a cake image or something
glossy birch
On my mobile, can’t type well. Apologies.
storm lion
^my fancy pants is in his Tesla just typing away while it drives him home 😉
real cape
Goodday,
Got a this error ALLOT in me logs
https://*.duckdns.org:8123/frontend_latest/eb618cf11a4eca6918ea.chunk.js:266:747 Uncaught TypeError: Cannot read property 'offsetWidth' of null
https://pastebin.com/WcKTFpQb
Any idea's?
split granite
Are you using any custom cards?
real cape
At this moment not
winter wasp
is there a good way to deal with weird card alignment when using normally hidden conditional cards?
ie, if my first card in a view is a hidden conditional, i get a blank spot on the left side
icy shard
how do i change my weather card to 24 hour clock
buoyant skiff
dunno its not a lovelace question
and i dont use dark skies
so ask in #330944238910963714
mild veldt
yes, what are you trying to achieve?
wheat current
only with panel: (true/false)
wheat current
Add panel: true to the view
mild veldt
which will extend it to be the full width of the screen, but only display the first card so you'll need to wrap everything in a vertical-stack
buoyant skiff
wrap you in a vertical stack
mild veldt
I imagine the will be developing a method to due something like foundation grids in the future which will allow for better customization of card widths
buoyant skiff
😛
mild veldt
can't argue with that...
buoyant skiff
yeah panel true does blow up the screen a bit
like i want my card a little wider not 9000%
some wiggle room would be nice
but ill make due with what i have in the meantime
mild veldt
you COULD do it 100% if your full view was just one picture-elements card with your other cards on top
then you could define everything, style-wise, to you hearts content
buoyant skiff
urgh
all in one card
image the styling on that card
take forever to find anything
mild veldt
I didn't say SHOULD
you would have to use lovelace-gen
no way around it
or you'd go mad
I actually started breaking my stuff out last night to use lovelace-gen. Feels very clean and quick to find things now. Hopefully it works once I'm done though 🤞
rotund island
can i use the secrets file for my lovelace ui for picture-elements ? i wanted to hide the address of my hass
buoyant skiff
techically you can setup a template and use it there or something but i fail to see the purpose of it
but again thats just me
so if anyone else had better advice feel free
rotund island
let's say if i share my configuration a lot for debugging purposes for instance ?
rotund island
@north spear and with that answer you solved my issue and made my first question obsolete Thx M8
forest onyx
@buoyant skiff so I'm aiming to have a tablet in the hallway showing alarm panel, travel info, weather and security cam ... Then one on the fridge showing relevant lights, plants that need watering etc. Then my phone view would likely be different (as I probably wouldn't have the alarm panel front and centre in my phone)... Is this possible?
wheat current
@forest onyx have a look at https://github.com/ciotlosm/custom-lovelace/tree/master/home-setter
rotund island
is there a list of custom cards? that are shared ?
wheat current
no, there are some here, but also other places:
rotund island
i was think about an analog watch card inluding the date. does anybody have an idea if this exists ?
tacit cave
probably doesn't at this point
rotund island
would look awsome imho. shame i don't have the competence
tacit cave
I'm in the same boat
Learning though, and if you have a coding background... it doesn't appear to be that difficult.
rotund island
No coding background 😦
urban shale
someone better than me at ui generation should offer services on fiverr or somewhere. I would pay for sure. 😄
upper cedar
is it possible to do two rows in one card?
i want to have a glance card with one row of 50% columns and then one row of 25% columns
drowsy summit
@upper cedar - type: horizontal-stack will allow something like this. I have a card that is overall one column wide but inside the stack card I have one row showing 2 cards and the row below it showing 3. Don't know if it will do 4
upper cedar
horizontal-stack being the outer one?
drowsy summit
sorry... vertical stack as the outer and then 2 horizontals as the inner
upper cedar
gotcha. thank you
clear vale
hi guys am trying to setup the dark-sky-weather-card but all am getting is an empty screen .... I have the dark-sky-weather-card.js in the local folder, and I have the icons in the /www/icons/weather_icons/animated folders as well. last I add the type: custom:dark-sky-weather-card in the ui-lovelace.yaml folder.. any agead what I am missing ?
timid burrow
have you entered your darksky api key?
clear vale
I have it in my in my sensor
sensor:
- platform: darksky
api_key: 7bbf663benotmyrealdarkskykey
update_interval: '00:05:00'
also I have been using darksky sensor for a year now .. all am trying to do is to add it in lovelace like I see in the examples
drowsy summit
@clear vale I just used the custom weather card for DarkSky
kind shellBOT
@drowsy summit posted a message that is more than 15 lines. It is now available at: https://hastebin.com/yeholaqivi
drowsy summit
oops
clear vale
@drowsy summit that is the same one am using https://hastebin.com/apacokipiy.css
drowsy summit
did you add the resource entry at the top of your lovelace-ui.yaml? @clear vale
type: js```- url: /local/custom_ui/dark-sky-weather-card.js?v=5
type: js
I been messing with V= I saw where someone said 5 so am up to 5
drowsy summit
how did you get the .js file? download it? copy/paste?
clear vale
download it I went to soneone repo and got it
drowsy summit
and what's the full path of the .js file?
clear vale
/home/pi/.homeassistant/www/custom_ui
clear vale
I have my alarm working just fine
drowsy summit
match your .js file against this https://hastebin.com/asudeduyej.cs
maybe it corrupted in the download
drowsy summit
OH!!! change dark-sky-weather-card.css to weather-card.css and change the link in the .js file on line 8 to match
I remember having some issues in the beginning and that fixed it
or just grab this https://hastebin.com/unisevahuy.css
and name it weather-card.css
clear vale
link.href = '/local/custom_ui/weather-card.css';
clear vale
yes that is my originally I did not change it
drowsy summit
and what's the file name in the folder?
clear vale
it ws dark-sky-weather-card.css I change it to weather-card.css
trying a firfox now chrome do the same thing
yeah firefox showing black screen
going to reboot
clear vale
reboot and CTRL-F5 blank screen
I have other working fine but this one wiill not work at all
clear vale
me too I have spend many nights
mild veldt
easy
child's play
git gud
seriously though, it should be easy for you. universal remote?
mild veldt
i have my roku remotes
buoyant skiff
got the rpc documentation right infront of me
mild veldt
have it now so when you click on the tv icon on my cards, it will hide all cards and just show the remote and then you can hit an 'x' on the remote to go back to the cards
buoyant skiff
so im gonna try and import whats playing on the screen
😛
or atleast a screenshot
mild veldt
isn't that already available?
rotund island
i have an awful lot of dimmable lights, is there a way to only show the dim.slider in a lovlace card ? As i'm switching my lights via a picture-elements card i wanted a list next or under my picture-elements card with the dimming sliders ) ?
rotund island
WOW 
buoyant skiff
subtle rune
I've worked on a slider but it's not ready!
subtle rune
Here it is though. Feel free to improve ;)
https://github.com/isabellaalstrom/HomeAssistantConfiguration/blob/master/lovelace/light-slider/light-slider-element.js
timid girder
Hi, how would I add a media-control card for a media_player entity that's only created after the discovery component finds it.
When the device is not discoverable on HA restart, I get a red error "card" instead ("no state available...").
Is there a way to suppress this error and only show the media-control card after the entity is created?
wheat current
@timid girder Manually add the platorm to your configuration
timid girder
ok, if that's the only way
north spear
@timid girder or use 'conditional' card
wheat current
That stil give an error if the entity_id does not exist
north spear
no way to get a new entity in the backend with a template to update when the media_player gets available ?
and use that for conditional card
worst case, just path lovelace to support the use case
buoyant skiff
wheat current
@north spear With a template sensor you could get it working, but the prefered (most stable) way of having platorms in HA are by defining them and not rely on discovery:
subtle rune
What's the cleaning icon for? 😃
buoyant skiff
cleaning library in kodi
north spear
@wheat current I like discovery. It just needs some extra checks to make it reliable and comfortable to use
buoyant skiff
any suggestion if i should add anything else ?
void marten
@buoyant skiff I hate to tell you this, but the power button icon (top right)...it's icon is slightly aligned too far to the right by like 1 pixel 😲
void marten
I can't concentrate on anything else now, because of that...
split granite
I had the same "issue" going from AppDaemon 2 to AppDaemon 3 where the layout shifted by one pixel - even the developer hadn't noticed 😂
midnight monolith
I created a calendar component for Lovelace... what do you guys think? https://imgur.com/egQofZM
void marten
It's nice @midnight monolith but what's the slider for?
subtle rune
@midnight monolith Awesome! Do share please
void marten
@split granite wanna help me figure out what typo I made in my yaml last night to entirey break lovelace? 😛
split granite
Sure, I've only had one ☕ though so I may be oblivious 😛
void marten
I spent an hour running it through a parser last night and getting different errors every time I tried something else, so you can't be any worse than me 😄
midnight monolith
@void marten it is the same in the Android Calendar - it shows the current time
void marten
ah okay, as in progress through the day? - like half way across (50%) would be 12pm?
midnight monolith
No, it just displays the current date as a line between the events... This way you know which events still come up and which are done
current date = current time
void marten
sorry, spam much
kind shellBOT
Attention!: Please use https://www.hastebin.com to share code that is more than 10-15 lines. You have been warned, @void marten!
Please read rule #6 here #rules
void marten
bleh, soz
void marten
my apologies, didn't expect it to be that big 😃
split granite
Well, Hastebin/share.ubuntu.com/whatever it up and try again 😉
buoyant skiff
lol thats the first time ive seen tinkerer go off 😛 your in the doghouse now @void marten
@midnight monolith nice going
split granite
The first time?
Where the hell have you been? 😛
(also, for me, that's pretty calm - you should see it when I really go off on somebody)
void marten
kind of inclined to say nothing at all for a few days and fix it myself lol
that and the fact that hastebin is the biggest pile of shit I've ever seen, ie, chrome, firefox - always says "somethign went wrong" in red 😦
no pastage for me
split granite
It breaks from time to time, hence the suggestion of https://paste.ubuntu.com or another too
There's lots and lots of options for code sharing
void marten
yar, there we go
with the error being
while parsing a block mapping in "/home/homeassistant/.homeassistant/ui-lovelace.yaml", line 41, column 5 expected <block end>, but found '<block sequence start>' in "/home/homeassistant/.homeassistant/ui-lovelace.yaml", line 44, column 7
so as I say, suspect I've put a typo in somewhere or something else has slipped into the wrong place
buoyant skiff
so indentation
split granite
Ok, that should be easy to find - though maybe I need more ☕ first
void marten
thought so, I suspect np++ has been dicking
void marten
tink, because it's indented too far in?
void marten
won't deny, I'm not a fan of yaml indentation and the way it works so probably not 100% savvy
kind shellBOT
YAML is the mark up language used by Home Assistant. Consistent indenting (two spaces per level) is key - read more at https://home-assistant.io/docs/configuration/yaml/
kind shellBOT
Click on the link https://codeshare.io/29rByX and paste your code there. It makes it easy to collaborate and make changes in real-time.
split granite
I'm dumping your code in there and gonna fix it up so you can see
void marten
kk, ta
split granite
I've fixed the first block, from 44 - you should be able to work out what the second needs
And now I've fixed the second block
void marten
that sorted it, cheers tink
split granite
Indenting is key
void marten
suspect a combination of hack and slash of code examples + notepad++ inserting tabs everywhere may have added to this
split granite
Each level of indents is like moving up a step on your stairs - some things need to be on the same stair as other things
Yeah, tabs are bad
buoyant skiff
pixel perfect
void marten
much better toast, my ocd can rest in peace now
split granite
Yeah, but all three circular symbols are different diameters...
void marten
lol, I actually drew over them in paint and saw the same. I didn't have the heart to say it
split granite
I just eyeballed them - the differences leapt out at me 😦
buoyant skiff
in the words of the master 😛
final since there arent anymore suggestions to add anything else
and it scales fine in the ui
@mild veldt this one doesnt break 😉
void marten
@split granite qq, just noticed - instead of those two sets of entities being in cards under the bedroom view - it's actually created them each as two separate views? (unnamed view & sensors) based on the title
do I now need to move them in, to make them "under" the original bedroom view?
split granite
Then you just need to shuffle things around to get what you want - identing as required
https://codeshare.io/29rByX probably
But I've not tested and need more ☕
midnight monolith
@subtle rune sharing the love: https://github.com/rdehuyss/homeassistant-lovelace-google-calendar-card
First version...
split granite
Nice
void marten
I will have a Tinker 😃
buoyant skiff
@midnight monolith can it be used within a picture element ?
cause i wanna replace mine with that
prime umbra
@buoyant skiff how to make the sizes of cards bigger?
buoyant skiff
with reading the documentation one more time 😉
so read it and you will find it
thats so basic
prime umbra
k
midnight monolith
@buoyant skiff No clue... this is my first attempt to create a card... not a lot experience yet
buoyant skiff
hehe try it within an picture element
see if it works
in anycase really nice work 😄
should add it to the custom card repo
just ping @wheat current about getting into the repo
nice to have em all in one place 😃
wheat current
@buoyant skiff Every card can be used in picture-emenets 😉
buoyant skiff
guess i fucked up then
wheat current
guess so 😛
wheat current
Was added in 74 😛
midnight monolith
@wheat current what needs to be done to add it to sharethelove.io?
I would also appreciate a code reviw
review
wheat current
If you are talking about homeassistant-lovelace-google-calendar-card STL is not really the best place for it, but if you want to add it to https://github.com/custom-cards send me a PM and I'll help you there 😉
midnight monolith
Ok, will do so soon...
buoyant skiff
wheat current
#the-water-cooler (cough)
buoyant skiff
wrong discord 😛
mild veldt
@buoyant skiff does the center show what’s playing?
buoyant skiff
yeah if you press it
mild veldt
No way to do volume?
prime umbra
very nice card, where to get the icons?
buoyant skiff
can make it
asked for request before but nobody came with any
yeah gonna upload icons later
had to run to the store
was outta beer
prime umbra
cool @buoyant skiff awsome card
buoyant skiff
so volume up, volume down and mute are those the items you want @mild veldt ?
mild veldt
I don’t want anything 😃 I just woke and saw it and have my own remotes already
mild veldt
Coffee first
buoyant skiff
could move volume 1 em down
give it some space
@mild veldt @wheat current opinions?
wheat current
last one, but remove the "note", move the rigth collum to over it with 1em, and release it as a standalone card 😃
buoyant skiff
the note is kinda needed its content menu
was thinking of the same thing
maybe have that icon join em together
or something
maybe have the kodi logo alone in the corner and content menu in the middle
that could work
that better @wheat current ?
wheat current
A little, but a more "remote" layout (3,9,3) would look cleaner
void marten
Chaps, I know it's possible to change the icon of a sensor based on it's state and definition under the icon_template section - but if I wanted to use custom mdi images (not available from the site) is that possible? I've found several separate articles about doing that in the customization.yaml but they seem specific to the "absolute" sensor image, nothing related to the actual states?
wheat current
If you need the context button, remove cody logo, and release it as a custom generic-remote-card.js 😉
buoyant skiff
kodi logo stays 😛
buoyant skiff
cause i want it so that users can swap it if they are running something else like plex
roku etc
subtle rune
#frontend-archived is now #kodiplayer 😜
prime umbra
@polar kelp for some reason having trouble with lovelace-gen.py, everything was running ok now is not updating and getting this
homeassistant.components.shell_command] Error running command: python /config/lovelace-gen.py, return code: 2
any thought what could be?
polar kelp
Probably some file missing. The latest version on github should have better error messages
prime umbra
not sure why that happen for some reason my custom_updater i wasnt able to update the new cards version and i wasnt sure if was related to the lovelace-gen.p
polar kelp
Or of you could run it from a console you should get more info
prime umbra
so i deleted custom_updater and set again and then grrr
polar kelp
Check your resource section. Custom updater may have done something to it
median jolt
Is it possible to put a mdi icon in a markdown card?
frank pasture
@wheat current You arround? Having a issue to update custom-components, but not sure if it's custom_updater or tracker-card related.
kind shellBOT
Ludeeus is away for 55m 33s with a message :point_right: Object reference not set to an instance of an object.
odd light
I have
- title: Main
- icon: mdi:home-assistant
and it shows the word main at the top, and a ha icon next to it
I just want the ha icon but if i take out title I see neither
confused
frank pasture
@odd light Remove the - before icon, otherwise it's another view.
wheat current
@frank pasture to slow 😛
frank pasture
Damn, you beat me.
wheat current
no fun 😄
kind shellBOT
YAML is the mark up language used by Home Assistant. Consistent indenting (two spaces per level) is key - read more at https://home-assistant.io/docs/configuration/yaml/
odd light
views:
# View tab title.
- title: Main
icon: mdi:home-assistant
So @wheat current, using the 'check' button on the card, does nothing. Or at least it doesn't show it. Tried to manually call the check_all service, but the card still doesn't show 0.2.0 for custom_updater.
odd light
seems right to me
wheat current
@frank pasture The json file it is checking has not been updated, investigating
frank pasture
Dev logs shows:
18:59 components/system_log/__init__.py (ERROR)
Log Details (ERROR)
Sat Aug 11 2018 18:59:41 GMT+0200 (Midden-Europese zomertijd)
https://www.redacted.duckdns.org/frontend_latest/app-c65b4028.js:445:3536 Uncaught TypeError: Cannot read property '_stateDisplay' of null
not sure if related.
wheat current
don't think so
https://github.com/custom-components/information/blob/master/repos.json#L44 <--- the problem 😉
frank pasture
naughty json
wheat current
@odd light this works for me:
- title: Main
icon: mdi:home-assistant
@frank pasture 0.2.0 are up 😉
frank pasture
Any idea what the other error might be related to? No custom cards except for update tracker,
configuration valid is valid (or doesn't that check the lovelace-ui?), happened out of nowhere,
the error always comes in pairs when accessing the Lovelace UI or reload.
frank pasture
It's valid yaml and pretty sure my indentation is correct. Here is my yaml: https://pastebin.com/hyPMqZfx
Should use the raw view, pastebin messes with the file: https://pastebin.com/raw/hyPMqZfx
north spear
probably another case that I haven't encountered
this errors out if you don't have a stateObj
odd light
anyone know why it forces me to have a second tab? I mean maybe I will need one sometime but if I remove it, the first one vanishes.
frank pasture
@north spear Should I create a bug report on GitHub? In the home-assistant-polymer repo?
north spear
it depends, ideally you should narrow it down to which elements triggers it
and find the context / state that triggers it
frank pasture
Ok, will try commenting out most.
north spear
it's not something that usually happens which means it's a more unique combination of states that triggers it
so far whenever I've had the chance to investigate such an error, it was always something on the user end
frank pasture
Commented out the custom:tracker-card, errors went down from 2 to 1 per reload.
frank pasture
Other one was caused by me, still had the sensor.last_successful_authentication while I disabled that because sensor.authenticated gave me so much errors.
Oh, maybe it's both because of that, the tracker card checks sensor.authenticated
Btw, @wheat current , probably the reason I didn't have errors in my log anymore after a reboot 😂 Will enable it and check again.
kind shellBOT
Ludeeus is away for 57m 43s with a message :point_right: Object reference not set to an instance of an object.
split granite
@odd light It works on mobile in the browsers, if the apps aren't simply displaying the web pages then they have their own UI
median jolt
Is it possible to have a card as an entity within another card?
for instance i want to have a glance card at the bottom of an entities card but not as a seperate card
median jolt
@north spear yes i saw that card and its just what im looking for but it doesnt have the options to remove title or state like a normal glance card
north spear
it should
median jolt
I tried it earlier and it didnt change. Will give it a try again
aaaa it works now. Must have done something wrong the first time I tried. Also the divider works in it too 😃
devout onyx
finished my roku remote https://imgur.com/a/SRC3Npw
kind shellBOT
A place for LoveLace Config https://sharethelove.io/
median jolt
Help please. Im trying my first picture-elements card and its not working for me
https://www.hastebin.com/oninusawal.sql
for some reason the icon always shows next to the image
@buoyant skiff you able to assist maybe?
median jolt
lol ok
devout onyx
@buoyant skiff I don;t think it's a good candidate, every button is a service call to a harmony hub that is unique for each user...too much setup for most people
devout onyx
Ok lol
devout onyx
allright I'll throw it together later, going to the pool now
subtle rune
In www folder
ivory raft
not too familiar with docker to find said /var/www folder
buoyant skiff
mortal cape
buoyant skiff
hehe
void marten
Good evening, anyone had bizarre issues with certain sites displaying in the iframe card?
sickrage works fine but sabnzbd throws this error;
Refused to display 'http://192.168.0.150:9000/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
Apparently that error is related to cross site resources, from what I can tell - it relates to something hardcoded into the sabnzbd php configurations...question is, is there a way around it from HA/Lovelace?
north spear
it has nothing to do with lovelace. Including stuff in an iframe has to play by the browser rules
http/https mix and other things the browser refuses are up to you to fix / match
void marten
Yeah I figured as much, I've seen it before - just didn't know if there was anything that "could" be done 😛
alas, not my site so not much I can do about that one sadly
odd light
anyone know where the lovelace background.png is stored?
buoyant skiff
?
north spear
in heaven
buoyant skiff
R.I.P
north spear
@odd light usually you provide more context to stuff before asking 😃
wheat current
@void marten setup NGINX (or other proxy) and map an adress to it with ssl :)
@north spear hmmm... is that something new? 😄
odd light
# Optional background for all views. Check https://developer.mozilla.org/en-US/docs/Web/CSS/background for more examples.
background: center / cover no-repeat url("/background.png") fixed
cheers @wheat current will give it a shpinnnn
odd light
I thought that, but that folder does not exist
buoyant skiff
suggest you read the ha documentation again
odd light
i've been reading the lovelace docs
odd light
ahh
buoyant skiff
that is the basics of ha
odd light
okay
buoyant skiff
burp
maybe another beer 😄
and complete the remote
done 😄 now for that beer 😄 all buttons are mapped
odd light
sick man, sick
buoyant skiff
meh that was easy 😛
wheat current
He just enjoy his beers, he is not sick 😉
buoyant skiff
drinking a berliner atm 😛
a sour beer
😄
found that my untappd card had the icons swithed 😛
so tomorrow i have to update my untappd card and the kodi remote with the volume buttons etc
btw Ludeeus why doesnt untappd show in the tracker card ?
wheat current
I have told you that 😉
wheat current
then if you want it to show up, change the py file
and config examples
and all your lovelace (and potantially template sensor config) 😃
twilit zodiac
hi all, I'm attempting to write a custom component, and would like to use " <template is="dom-repeat" items="[[w]]">" template style functionality to build out the innerHTML. My card extends HTMLElement, is this possible?
wheat current
meh
odd light
what do you guys like to use for showing date and weather forecast
was thinking darkskye
warm stone
Someone should add the card galleries link to the Lovelace UI page.
buoyant skiff
someone could
vapid field
@odd light I'm with dark sky ... I feel is more complete with more information .. also looks like it's more accurate than others because of where I'm based
viral sorrel
is there a reason that sometimes the title goes at the top level but other times it goes under card?
buoyant skiff
bug
found it yesterday
me and marius
dunno if its been reported
but there seems to be some sort of lazy loading going on
viral sorrel
it's caused me grief because I like consistency and I always get it backwards 😛