#frontend-archived
1 messages ยท Page 51 of 1
@burnt herald maybe can do a docker package so people donโt guess the setup ๐
yeah looking at the code it still wants home assistant installed on the machine your running the script on
I mean, he took all of 20 minutes or something to whip that out. If it sounds like I'm complaining I'm not. ๐
haha, amazing guy.. and I didn't realise he was that young either
(not that that really matters)
If you have SSH to the container it should work on hassio
For a regular docker I used:
Copy the content of the script to clipboard
run this in the ssh session: cat > lovelace-migrate.py
Paste the content from clipboard.
Hit: ctrl+c to end cat
run python3 lovelace-migrate.py -c /config
that's how i tested it in my docker too
Maybe create a PR with instructions ๐
All the lovelace stuff in dev is awesome, much thanks to @quick beacon ๐
Draw states on pictures and allow control of entities
very very nice work indeed gents
Proper urls per views
Run in JS console localStorage.defaultPage = 'lovelace'
And your default page is lovelace
Can also be any view, just replace lovelace with lovelace/dashboard etc
or 'map', if you want to see the map
instead of the current workaround? (with lovelace.html)
yes, no more workaround needed (although this is also a workaround - an official one ๐ )
I will update instructions
Workaround will still be needed
So people donโt have to hack something for ios
Entity cards now have a toggle to control all states at once
Yes! Was missing that so much
Canโt wait to test it
If you're running dev, you can already start using it
time to move over to dev then ๐
Canโt wait to get my hands dirty with code either
just here to say great work, and it looks great! Excited for the advances to come as it becomes the main UI. Nice job you studs!
@half osprey is there a change on how entity-filter handles 'glance' card?
- type: entity-filter
filter:
- domain: climate
- domain: camera
- domain: input_boolean
card: glance
card_config:
title: All entities
I get that showing up as normal entities card with toggle control
meh, i'll stop asking questions, I should read the code
is this dev for frontend as well ?
i mean there is no package for frontend yet with these change right?
it is online
the new additions work great gents ๐
oh well, i'll have to wait until i'm back home and have proper time to tinker
no pun ment @split granite
๐
my url's per page are coming up as url/lovelace/1 and url/lovelace/2 - is that intended?
yes
that is awesome, finally deep-linking ๐
I am not a big fan on {} in yaml
has glance changed?
no
if you use entity-filter, you need to migrate config to new syntax using card: as object
glance only had the title fix to avoid overlap
but we're back to short names
such as?
Get a floor plan image and overlay controls using that card
nice idea, I like it ๐
you guys know the best way of doing things I have no doubt, but I personally would have show_header_toggle default as off, just a small suggestion. i think at the minute, loosing that was a big deal for people, but when they restructure it'll be the exception rather than the norm
I would have to agree with the default however the current default would offer better familiarity for people doing the migration
And walkthrough like the docs-lovelace could point a better setup for those interested with info and examples
I think a lot of people would do well to restructure there systems with the new ui.. the whole entity-filter thing is game changing, let along the other cards
I think the combination of customizable cards for everything + a refresh button are the major plusses
No complete reload of HA (even groups) on UI change is a big plus
Now that we have absolute urls, I think that we should add a navigate action to glance picture, tapping the picture will allow users to navigate to a different page
๐ฎ That's a good idea ๐
Has anyone been able to successfully run the migrate script with packages enabled?
if it's broken blame balloob ๐
ok, I blame @half osprey then ๐
Uncaught TypeError: e.startsWith is not a function
- type: entity-filter
filter:
- domain: climate
- domain: camera
- domain: input_boolean
card:
type: glance
i tried - type: glance { type: "glance" } - type: "glance" and other weird combinations
you should learn some yaml basics ๐
mine works fine
- tab_icon: mdi:settings
name: Settings
cards:
- type: entity-filter
filter:
- entity_id: '*battery*'
card:
type: glance
title: Battery
@quick beacon once sane methods fail I start to try the most absurd methods
btw, since when glance became glances ?
ignore that (was messing with something else)
glance works for me, also with filter
cards:
- type: entity-filter
filter:
- domain: input_boolean
card:
type: glance
i'll run again script/bootstrap and script/develop maybe I missed something
running off "master" branch right?
I just pulled the dev docker
ok, latest master doesn't work
but the published package using "dev" branch for backend does
@half osprey using localStorage.defaultPage = 'lovelace' still won't change Overview link right, just the /
Correct.
So if you navigate to /states, you go to the states panel
You go to / you will be redirected to defaultPage
@north spear what do you mean with latest master doesn't work?
the frontend one ? should work
latest polymer mater gives javascript error for me trying to use the entity-filter with glance card
error ?
Uncaught TypeError: e.startsWith is not a function
but maybe I'm doing something wrong
defaultPage works for me
I take it you've done a clear cache etc?
@north spear do you have any config referencing an entity that doesn't exist ?
it's one of your card definitions
I'm using:
- type: entity-filter
filter:
- domain: climate
- domain: camera
- domain: input_boolean
card:
type: glance
is that your only card in your config ?
2018-06-27 23:15:15 INFO (MainThread) [homeassistant.core] Bus:Handling <Event call_service[L]: domain=system_log, service=write, service_data=logger=frontend.js.latest.201806250, message=http://localhost:8123/frontend_latest/1c0e45547a1e180d8b17.chunk.js:311:471 Uncaught TypeError: e.startsWith is not a function, service_call_id=4559601392-13>
2018-06-27 23:15:15 ERROR (MainThread) [frontend.js.latest.201806250] http://localhost:8123/frontend_latest/1c0e45547a1e180d8b17.chunk.js:311:471 Uncaught TypeError: e.startsWith is not a function
not the only one, but the one that crashes
I can remove the rest and leave only that
Yeah, please comment out the rest
loads fine if you comment it out I take it?
Do what Jack suggests first
rule #1 look in JS console for errors, not in HA logs
I looked in both!
yes, it loads fine if I comment only that out, but let me load only that in the ui-lovelace
name: My Awesome Home
views:
- name: Home
cards:
- type: entity-filter
filter:
- domain: climate
- domain: camera
- domain: input_boolean
card:
type: glance
still crashes for me
okay, and if you comment that one out and add another card, it's fine ?
yep
name: My Awesome Home
views:
- name: Home
cards:
- type: entity-filter
card:
type: glance
also crashes and not with UI friendly error, but js error
are you sure that you are using latest master ? ๐ค
name: My Awesome Home
views:
- name: Home
cards:
- type: entity-filter
filter:
- domain: climate
- domain: camera
- domain: input_boolean
just try
- name: Home
cards:
- type: entity-filter
card:
type: glance
and make sure that you run script/develop after you pull master
your config works here
and that your backend is configured to point at the frontend repo
for development
commit de91aea3b9fe79819de63695b84adfd694c41c18 (HEAD -> master, upstream/master, origin/master, origin/HEAD)
Author: c727 <11984118+c727@users.noreply.github.com>
Date: Wed Jun 27 22:12:01 2018 +0200
Revert "Love: Add column and row card"
This reverts commit e0ccc1999ad3c83901f5e4d5b54ed0188debba39.
haha, the state text for climate is nice ๐
you tried my edit of your code with a change in indentation @north spear
@storm lion doesn't work for me
@half osprey i ran those a few times, and made sure I am on the latest upstream/master commit
well at least we've eliminated the yaml bit ๐
if I remove: development_repo: /Users/ciotlosm/git/development/home-assistant-polymer
it works
that installs frontend from a package
@north spear the develop script keeps running right
yes
and make sure you don't have a service worker (Application tab of Chrome dev tools)
WARNING in You're using the following Workbox configuration options: [globDirectory, globIgnores]. In Workbox v3 and later, this is usually not needed. Please see https://goo.gl/EQ4Rhm for more info.
that's good
last message from script
Then in Network, check the "Disable cache"
And in Application -> Service Worker check "Bypass for network"
or try it in an incognito tab?
In the network tab you can see where your files are being served from
In network tab I had Disable cache
but Bypass for network in service workers made it work
without that no chance
that's how Service Workers work
they remain active until you close all tabs
Or if you click reload on the "New version available toast" in the bottom left
so a close of chrome entirely would do it too?
yes
New version available toast never appeared
But only if a new version has been found and has been installed and is waiting to replace the currenet one
god I'm learning so much here by osmosis ๐
and I closed chrome and reopened without the bypass network in service worker and I got JS error again
I checked bypass for network and it works again
Yeah, so somehow your browser is not picking up the new service worker and installing it
But the old one is still active
you can delete it in the application tab
clicking "unregister" worked
I think this should be in doc files for development ๐
thanks for the help, now I feel dumb again not knowing how to fix my stuff
You're right, probably should put under the development section that unless you're developing the service worker, you should bypass network for it and you should check disable cache in network tab
pull request welcome ๐
will look at it tomorrow, better sleep now to catch my flight in the morning
see ya!
night !
so in an entity-filter i have state: 'Downloading' .. to filter on ... is there a way to make it not Idle? I tried various flavors of !Idle in place of 'Downloading' but they all didn't work. Is there a way to achieve a not?
There is no negative filter right now
okie. TY
you could I imagine create a filter with all the positives though...
yeah, what i am going to have to do, got spoiled with kitchen ๐
hmmm ... * kitchen *
I am in the process of rewriting the migration script to work based off of the REST API instead of the direct config file. Main reason is because the current script does not work with packages.
Hi guys, apologies for this massively newbie question, but if I'm putting something like:
name: Our Home
views:
- name: Lights
theme: dark-mode
cards:- type: entities
title: Lights
entities: - light.utility
- light.living_room
- light.hallway
- type: entities
in the ui-lovelace.yaml file, what exactly is it that I'd need to put in the configuration.yaml file and what is it actually doing? I've read the docs and tried to get my head around it but just ending up with blank pages with the name at the top.
Again I know this is probably really simple but just trying to learn and improve etc ๐
nothing wrong with learning and improving ๐
your indentation is wrong
better copy and paste exactly the example and replace entity ids with entities that you have
have you checked out - https://github.com/ciotlosm/docs-lovelace/blob/master/configuration.yaml and it's indentation ?
Ok I can look at the indentation an can see where that's gone wrong, what about what goes in the configuration.yaml?
(thank you!)
nothing goes in configuration.yaml
Oh ok, I think I've misunderstood what's on https://developers.home-assistant.io/docs/en/lovelace_index.html where it says "Add to your configuration.yaml:" is that just because the example has used input_booleans?
Yes
Thanks guys, as mentioned I did think it would be a simple one! Got my first tab up an running, thanks again!
Now make sure you share the love โค
hmm, maybe we got a memory leak somewhere
when I close the tab....everything goes back to normal
I saw a few ```
Log Details (ERROR)
Thu Jun 28 2018 11:13:40 GMT-0400 (EDT)
:0:0 uncaught exception: out of memory
in the logs and then started investigating
I am running on a Skull Canyon....so it is not hardware limitation
Does it happen on every tab ?
And do you, by any chance, have camera streams ?
Not the camera card, but where you set the camera stream as an image source ?
Did you opened that tab and went back to other tabs after that ?
yes that is possible
Those camera streams can hiccup the browser
Not closed correctly
Use the camera card, don't set the image as a source for an image
Ok...I will see if I can provide any more info
Hey y'all, I'm struggling getting my camera image to work. It shows up fine, but it does not update at all. I have to refresh the page to get it to change. Here is my code:
views:
- name: First Floor
tab_icon: mdi:numeric-1-box
cards:
- type: picture-glance
image: !secret livingroom_camera
title: Living Room
entities:
- etc.```
With this in my secrets folder
`livingroom_camera: /api/camera_proxy/camera.webcam?api_password=XXX`
And this is what it looks like https://m.imgur.com/RrdY8Vu
I think someone here implied they were using picture-glance with mjpeg
I'd have to search
Is there something I need to do to convert that photo to a mjpeg, or is it already that way?
It was @upper jungle
We don't support setting mjpeg streams as picture cards
Yeah, it's possible, but you're on your own
Browsers don't handle it well and it EATS your data
Which would be more ideal for a migration tool:
A. Python script that you can run anywhere that has access to your Home Assistant REST API, and output the new lovelace config to stdout (which can easily be piped to a file).
B. Simple webapp that allows you to enter your Home Assistant API URL and API password (all connections done client-side for security purposes, similar to how HA Control Panel works), and outputs the Lovelace config for you to copy/paste into ui-lovelace.yaml?
What do you mean by custom panel?
Ideally what I am writing will allow the migration tool to easily be implemented into the core as a script.
Ahh, ok.
I am not familiar with writing those ๐คท
so you want to write your wep app in .net or ... ?
๐
I am using the existing migration tool code and modifying that. It is in Python.
Lololol
In JavaScript you have access to hass object, which can access all the states as hass.states
....and you don't have to enter your hass password on some random website...
@quick beacon For the record, I didn't like the idea of that either ๐
I am sure once you develop a few examples of what do to with React Panel, its adoption will go up. Look at Lovelace ๐
Well React Panel is the example
Custom Panel is the component
Floorplan leverages it
And Hass.io
@split granite Since you're just waking up, mind testing out my migration script?
I'm not on 0.72 yet I'm afraid
Probably I'll have time to upgrade by the time 0.73 comes out, but life hasn't provided a free half day to upgrade and battle interesting issues at a convenient time ๐คท
@split granite On which version are you?
Hah, whatever. I just upgraded my main install from 0.66.1 a couple days ago.
And to my surprise, no errors!!!
Lucky you ๐
Last few upgrades have all brought fiddly things, often Z-Wave related
What errors do you think you'll be facing?
None I think I'll be facing
Oh? You know you'll be facing them?
But, each upgrade for the last few months has had something that's been a pain
Sometimes it's just the 30 minutes it takes to compile and install numpy
Otherwise it's usually Z-Wave related fun
Last time it was a device that mysteriously picked up a _2 suffix
Wtf is numpy?
It's one of the libraries
It sounds very dumbpy. ๐
๐
Oh, and of course sometimes OZW will corrupt it's own cache file, and cause HA to crash on startup
So, I've learned to put aside half a day for upgrades, or at least a couple of hours
Oh man, I bet that's a lot of fun!
Yup
Note to self: don't invest in too many Z-Wave devices. ๐
Z-Wave itself is fine - just OZW ๐
Sooooo today is the day, my friend!
If only
I've got a little time before work, then it's the weekend, and more work related travel from Sunday...
Hey, at least OZW isn't a pain and two-fifths of the ass to install anymore.
Very true ๐
@empty heath your migration script gave me this:
WARNING:__main__:Cannot determine card type for entity id 'script.good_night'. Maybe it is unsupported?
script.* are supported
@wheat current Hmm, yes, they are, let me check on that.
other that that it worked great ๐
Yay!
but my UI is minimal AF :P
https://hastebin.com/rafuyujibu.css
tip:
python3 lovelace-migrate.py -h xxx.xxx.xxx.xxx -P | tee /haconfigdir/ui-lovelace.yaml
will create the file, usefull when the conflig gets long ๐
@wheat current Looks like the script doesn't allow scripts to be an entity of a card.
Why tee and not just >?
old habbit ๐
python3 lovelace-migrate.py -h xxx.xxx.xxx.xxx -P > /haconfigdir/ui-lovelace.yaml
๐
I always use tee, since it alow me to sudo tee where needed, can't really do sudo >
@wheat current Here's the output it gives me on one of my test machines: https://hastebin.com/ohunoqatur.css
Not to bad :)
Im guessing main machines of most users will be atleast double that ๐
I used to have 600+ entities when I ran HA full-time, so I can only imagine that most people have even half of that.
@empty heath where can i find your migration script and will it work with packages?
Thanks!
Yes, there ^ lol
It's not finished yet, still a WIP.
Oh, and this one works with Hass.io ๐
@empty heath may I link yours alongside Otto in my docs ?
@north spear It'll have a full repo when it's done, but you're welcome to link to the existing gist.
๐
Would have been nice to get a custom component as @quick beacon suggested ๐ More frontend friendly ๐
I'll try to prepare for 0.73.0 the docs as @quick beacon has been very busy and then get to patch a few stuff myself
you can use this config to test the new stuff https://github.com/home-assistant/ui-schema/tree/master/dev_repo_test_config but master is broken atm
oki
I'll delete my files and point to those for testing
I assume they will get merged in master
@quick beacon you mean master of frontend right?
yes
@quick beacon Do you have readily available a link to all available keys/options for all Lovelace cards/views?
So no hidden options in the code anywhere?
Oh, that is perfect and exactly what I am looking for! Thank you, sir.
It would have taken me like 20 minutes to find that, haha.
no, but the changes are not live yet. but they are on git https://github.com/home-assistant/developers.home-assistant/blob/master/docs/lovelace_card_types.md
Perfect, thank you sir.
I am hoping that my Python Lovelace module is easily extendable for future improvements to the UI.
@empty heath is this going to be more of an interactive choose-your-card-type builder?
Yes'r.
Probably a flask app, since I'm using Python.
unless someone wants to port it to JavaScript.
Wow thatโs so cool
trying to document changes from 0.72.1 https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/changelog.md so people can easier update their interface
@north spear Repo is up: https://github.com/dale3h/python-lovelace
yall get lovelace sorted out and hit me up @empty heath and @north spear ๐
@quick beacon is type row not working?
As already said. The last commit broke some cards
yeah, but I moved glance cards inside row and column, but not really get expected results
but then again, Imight have not understood their purpose correctly
My suggestion was to name them collection-column/row as they are not a real column and only grouping cards together
but why are they row/column? are they forcing somehow for cards to stay on same row or column ?
Yes
row probably broken
doesn't display anything
if you have two column cards, will they show side by side if you have space for 3 columns?
...
Revert the last git commit and see how it looks like
@quick beacon using "row" will force multiple cards in the space of one on the same row
not really intuitive row and column
column is more like a stack that acts like a card in the normal flow
and row is more like a squeeze box as it just forces many cards like a bench vise in the same space as previously one card
@half osprey I would really avoid calling them row and column
that would cause expectations and then annoyance ๐
I'm open for options
let me tell you my perception
I would have expected on a big screen if I use three "column" cards to get control on the 3 columns I usually got without the code
but instead as there are only 3 cards now (the 3 column) , I actually get just 1 looooong column
which is counter intuitive
that's a bug
stack or something similar would be a bit more intuitive, maybe provide some sort of visual queue for the cards belonging to the same stack
See, the guarantee of the column card is that all cards defined in it, are treated as 1 card for the layout algorithm
So you should get 3 columns, and if you have a small screen, you get 1 column
However
Right now the getCardSize() doesn't work for the column card because the DOM is not created yet when we ask for card size
ok, but still not really column, as if I had more,... i will not force more columns
correct
I will get layout algorithm to kick in
We need to find a balance between what the user wants and how the screen looks
true
the column card is helpful, at least for people like me that don't like their cards especially when grouped together to jump around
but it's more like a "stack" or something
especially as it won't force a "new column"
it kind of works like column on bigger screens if you use <= maximum you can fit
I like the word stack
but the smaller the screen the less "column" like it will be
we were talking about column-group before, but that felt weird because the word group is overused
it's a stack of cards (i'm laughing at my poor joke)
and would row ever expand more then the width of one card?
max-width for each card is the only restriction we have and if somebody wants to have other card-widths he can create a custom panel and still use our cards there
No one makes custom panels ๐ฆ
Are there any plans to make the Picture Entity card customizable in size?
-.-"
You can change the picture size to change the size?
I know I annoy you guys, but I've updated again the "hack": https://github.com/ciotlosm/docs-lovelace/tree/0.73.0#forcing-status to avoid page refresh. It's ugly but it works
Crusader has added an option to dev-info to allow setting lovelace as default
Also, instead of hijacking an existing button, why not add your own ๐
dev-info will set default when navigating to /
but clicking overview will still open old interface
if you did it like me where you removed all useless groups, you'll have a huge lump of stuff in default view
there still seems to be a minimum size of the picture entity card? i tried with a image 100x200 and HA scales it up
@half osprey but considering that now / will give you /lovelace/0 a button would work
@sudden lion correct, but you can add a white border in your image. Cards will always fill width of column
how to do a button that is not an iframe, but just a navigation path?
<a href="/lovelace/0">Hello</a>
btw note that you should drop the /0 because you can define your own ids
I thought of an left menu button like Overview not an anchor somewhere in /status
Just change data-panel="lovelace"
Oh I guess you can't really access menuClicked hmm
Well I guess you can hijack logout haha ๐ just change data-panel
Then why not hack overview if i do want lovelace to be my default?
I guess
I'll look tomorrow morning for column rename to stack
@half osprey is it possible to get the entity cards to be "full screen" ?
No
That would be a nice feature of the picture-elements card as it could be used for a full size floorplan for example
That's a custom panel
Looks like the beta changed lot of things. tab_icon is not showing the icons
title: ARS Home
views:
- tab_icon: mdi:home-assistant
@raven nacelle check https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/changelog.md
helps you migrate easier
that is perfect
The toggle for setting Lovelace as default is not quite reliable...
@raven nacelle check: https://github.com/ciotlosm/docs-lovelace/tree/0.73.0#forcing-overview-to-lovelace
the toggle will not touch your clicking on "Overview"
that's why you feel it's not reliable ๐
but my evil ugly never loved hack will
@raven nacelle did it work?
I need some more testers for the migration script: https://github.com/dale3h/python-lovelace
@empty heath - just tested it, worked fine for me ๐
hmm
is the lovelace script supposed to point at file or configuration ?
geez dull as a rock today
@empty heath Output from lovelace_migrate: https://hastebin.com/ojujadibij.cs Only a very small amount of manual work required
@outer pendant is this syntax correct python3 lovelace_migrate.py -p mypass https://mydns:8123/config/api
@buoyant skiff Yes
ok
ahh tnx
fails ๐ฆ
might be cause its selfsigned certs
the error indicates something about that
Make sure you've put your CA certificate in the relevant directory so that it can be verified
the script should just check if traffic is https
and selfsigned doesnt have CA right ? ๐
anyways not in a rush for lovelace atm
i can wait for dal3h
but i do have a question for you ๐
@quick beacon will we move hassio on lovelace?
is it planned for lovelace to support custom ui?
@dapper rain Custom_ui will have to be updated to work with Lovelace. I am sure Andrey will update it soon.
ok ty then
is lovelace going to be the new standard ui ?
oh and i was talking about custom_ui_state_card from config. right now lovelace is only showing the standard cards, not respecting custom_ui_state_card
yes, as I said earlier, custom_ui has not been updated yet
ok i thought you were specifically referring to https://github.com/andrey-git/home-assistant-custom-ui
@dapper rain It's not supported yet, but planed for the future. See: https://github.com/home-assistant/ui-schema/issues/44
Hi all, is there an equivalent of the widgets to include on top of the page ?
never mind , glance
@storm lion Good deal, thank you sir!
@outer pendant Thank you, sir!
@buoyant skiff You donโt have to enter your password in the command, just specify -p with no password and it will prompt you for it. But yes, your error is because of self-signed cert. I should be able to add an argument to disable SSL verification
@empty heath ๐
@buoyant skiff I am getting there. Out camping at the lake this weekend ๐
hehe
just got home for the bar
kinda fucked up
so enjoy your weekend @empty heath
Can we use multiple entities with Entity picture? Would like one that has a pic with all lights.
Use a group
@empty heath btw, this should also work and be a bit nicer in the dumping code:
OrderedDumper.add_multi_representer(OrderedDict, _dict_representer)
- Publishing it as a pip package would be ๐
Can I visit old /states page if I made Lovelace default view? now /states redirects to /lovelace
@upper jungle it depends
On latest beta you can with the updated hack. See https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/Readme.md#forcing-overview-to-lovelace
On the previous version you must comment out the frontend extra html bit
after updating to newest pre
- type: weather-forecast
entity: weather.weather
gives me
TypeError: this.lastChild.setProperties is not a function
Working fine for me. What weather entity are you using?
Weird
It ensures an element exists before creating it
Browser?
Will be fixed in latest beta
Also, if you're on Firefox and want the best experience, turn on experimental custom elements and shadow dom
ok ty for the hint. how exactly is that improving the experience though?
Oh well things will start working as intended for one
Right now we have to polyfill both custom elements and shadowDOM on FF, and those polyfills are not perfect
for example the spacing between cards doesn't work with the polyfill
And I also don't want to invest too much time into it, as ShadowDOM and Custom Elements will be turned on for FF pretty soon
spacing between cards of the stack card *
ok with the 2 options enabled it's working now in ff
couldn't see any differences in spacing compared to chrome though but maybe that only applies to certain configurations
Anyone made something cool yet with picture elements they can share?
Want to highlight that in the release notes
*bonus: a custom panel using picture-elemts
Here's my floor plan....
not sure if that is the best way to present cameras there...still playing with options
icon colors, but active/on doesn't work for lights
style:
'--paper-item-icon-color': green
'--paper-item-icon-active-color': orange
@raven nacelle no cameras inside?
I do....have 3 inside as well
but I am still trying to figure out the best way to present them
Id go with an icon representing how it covers the area and then click to get video
so instead of badge, use an icon
Maybe link in header: https://developers.home-assistant.io/docs/en/next/lovelace_card_types.html as people are trying out beta
I assume our lovelace experimental users would go cutting edge ๐
So should we merge your docs with our dev docs?
Should it be interested in the main site?
no no
I ment that in the topic of this channel , there is a link to developers docs, but it links 0.72, not next
updated changelog again as well
I don't know. The docs I maintained are not really developer docs
and being experimental it wouldn't really make sense to have them in the official getting less experimented users to try it out and get many issues in main repo
still not a bad idea to merge....right now there are a few places that someone needs to look around
happy to move it where you guys think it brings more benefit
as long as we don't put pressure on c727 to have yet another place to update docs ๐
ui schema should be a good place. @north spear you can still be incharge of that part ๐
it depends on the future of that repo
I've already moved the docs once, would be nice if I move it again to be in a place where won't move that much in the future, but I might just have the wrong impression on the effect on users
Yeah true
I think the developer docs should only contain custom cards
Rest move to main site
@half osprey should I give it a go to add parameters from dev docs in docs-lovelace so people can see how it looks?
@half osprey you can see a potential try here: https://github.com/ciotlosm/docs-lovelace/tree/0.73.0-more-data with example on entity-filter https://github.com/ciotlosm/docs-lovelace/blob/0.73.0-more-data/card-entity-filter.md
changelog format updated as well https://github.com/ciotlosm/docs-lovelace/blob/0.73.0-more-data/changelog.md
@north spear Groups are not working with Entity Picture..
Does your group have only toggle entities?
why should groups not work? they also have on/off
Nope, assumed state so the two lighting buttons.. I'll try assumed state off.
dont know what you try to say
Haha sorry, I had control: hidden so no group switch but tried both ways still not working.
@cunning violet which docs are you using? Can you post a code snippet?
@north spear This is the group.
'Picturetest:
name: Test for lovelace
entities:
- light.tv_blue
- light.lounge_room
- light.kitchen
- light.dinner_table'
And the lovelace config?
image: /local/all.jpg
entity: group.picturetest```
@hallow granite try the version here: https://github.com/dale3h/python-lovelace
@cunning violet it's been fixed in the beta
@north spear I really love what you're doing with the docs
I think we should drop all docs but custom cards from the dev docs and create home-assistant.io/lovelace
Sounds like a good idea. Let me know how to prepare for that. I am sure it would still need some adjustments
let me create a foundation on the main website
Only downside about main website is that compiling is so slow ๐ฆ
homeassistant) hass@home-assistant:~/.homeassistant$ python3 lovelace_migrate.py
Is it normal that nothing happens visually?
homeassistant) hass@home-assistant:~/.homeassistant$ python3 lovelace_migrate.py 192.168.1.22:8123/api
Loading files is not yet implemented. Please use stdin.
(homeassistant) hass@home-assistant:~/.homeassistant$
@hallow granite better ask the creator of the script
Have you read instructions here: https://github.com/dale3h/python-lovelace/blob/master/README.md?
@hallow granite i never used it. I build my interface from scratch to just make sure I used most features
I just need lovelace.yaml with content right ?
Lol
Looks exactly the same for me
Will play around another time
Thanks so far
you need ui-lovelace.yaml
@north spearthanks.. got it ..still strange view
Updated changelog for better readability: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/changelog.md
Question with the new deep-llink view is it possible to control that with an automation? Say if Spotify starts playing it switches to lovelace/3. Cheers
@raven nacelle can I use your floorplan screenshot in the blog post about 73 ?
@cunning violet that is currently not possible
hmmm.. trying lovelace..
but the samples does not work.
is thjere something wrong with this example??
- type: entity-picture
image: https://images.pexels.com/photos/775219/pexels-photo-775219.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=295&w=490
entity: light.bed_light```
i get: error in cardconfiguration
@atomic citrus which version of home assistant are you using?
72.1
that should work, unless you are not using demo: which means your entity doesn't exist
There will be quite a few changes in names and parameters, so I would not invest as much in setting up lovelace before 0.73.0
this includes changes to entity-picture
no i am not using demo, but i used it as reference.
the first entity-picture is working
- type: picture-glance
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
title: Living
entities:
- switch.meq0357338```
but the second version using entity instead of entities does not
maybe 0.73 will fix that. i'll just sit and wait ๐
thanks
right.. picture-glance is working
picture-glance is working, but entity-picture is not
- type: entity-picture``` would create a clickable picture, right?
yep
okay. and that gives me the config error
can you open the developers tools console and point the js error there ?
something red ๐
0.72.1 doesn't have entity-picture does it?
ahh.. good catch, was thinking of that one ๐
@atomic citrus can you remove "title" and try again ?
make sure you have a usable entity:, something that really exists
you do have an entity called light.bed_light don't you?
@cunning violet have you removed "title" from your config?
there is no title set.
- type: picture-glance
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
entity: switch.meq0357338```
the entity is also used in the glance card where it is working
- type: picture-glance
you said entity-picture
your setup should be:```
- type: entity-picture
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
entity: switch.meq0357338
sometimes i am pretty good confusing myself..
oh will! its great!!!!
that is what i was waiting for all the time!!!
Even my wife approves ๐
@atomic citrus you will love picture-elements: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/card-picture-elements.md
@north spear - loving the new layout of the Example Docs for 0.73 - great work
since my floorplan somehow broke with updating to 0.72 this would be the next big thing for me ๐
(i spent soooo much time into floorplan with doing all the "glows" and animations......)
It won't be ready for prime time I think, as you won't have "full screen" yet, but close enough
talking about full screen... i am still looking for a nice dashboard for a tablet ๐
and i need some ideas on face recognition at the door
lol
still a lot to tinker!
I don't think lovelace is far from doing kiosk mode as well
lovelace through kiosk browser works fine for me
and now lovelace too...
damn... the pile is getting bigger
design wise i would say it is totally suitable for a kiosk mode!
btw... can you adjust the card sizes?
๐
there are no card options to allow that, but I might be wrong
not yet, I believe it's requested though
if you can't find an issue in ui-schema, you can raise one, but make sure you are thorough and cover most use cases: how will it work on mobile, how will it work when resizing browsers, etc.
it would be great if you could entity-picture and picture-glance
main entity on the picture, the rest on the bottom
an extension of that thought process I'd say
thanks
oh think there will be some nice things coming up in the future with lovelace
for the filters: is it possible use AND ??
by default it is OR, right?
because: how would you handle for example "turned on lights" if you also have various light groups??
it would show groups and entities alike
you drop usage of groups for cosmetic reasons
you use cards for lights
groups you only use for automations
no more groups?
@half osprey sure... Feel free to use the image.
@atomic citrus I think if you can get AND as well not just OR
filter:
- domain: lights
state: 'on'
that is AND
filter:
- domain: lights
- state: 'on'
that should be OR
hmmm.
let me think... if want to select lights but exclude the light groups
nice that lovelace just updates when saving the yaml file!!!
you can't do excludes, just includes (at the moment)
okay.
@raven nacelle thanks ๐ It will look like this: https://rc--home-assistant-docs.netlify.com/blog/2018/06/29/release-73/ . One question: could you send a new screenshot where the hover is gone? It now has "More from this category" tooltip in the middle
๐
@half osprey - typo boss - Update to hole to 0.3.0 (@fabaff - #15014) (sensor.pi_hole docs) (breaking change)
(I know the inappropriate channel but you were here so....)
the problem is that it's in the commit message and those are automatically generated
So I can't fix it now, need to fix it before the final generating of the list
odds of me forgetting after the last time generating it are 95%
๐
you've got a lot of more important things to deal with than that small typo ๐
a vertical and horizontal stack combined is amazing ๐
hi, where can I find the current available types ?
look in the channel description..
horizontal and vertical stacking is yet to come to release yet
good, didn't notice
no problem ๐
I am trying the sample from https://github.com/home-assistant/ui-schema/tree/master/dev_repo_test_config
- type: picture-glance
image: https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=240&w=495
title: Picture glance
isn't showing anything for me, I am in0.73.0b1
ok, was becuase of undefined entities
so, I am trying to migrate my /states
cards:
- type: entities
title: Covers
entities:
- cover.bedroom
- cover.living
- cover.bedroom_2
there a on/off switch is shown
but I don't want it
in the old states interface I could do that by disabling it in the associated group
covers:
- type: entities
control: hidden
title: Covers
entities:
- cover.bedroom
- cover.living
- cover.bedroom_2
how do I achieve it in lovelace?
for the overall card?
yes
my first approach was to including the whole group as entity as I was doing on the states
nope, a group is an entity, no longer black magic ๐
ok, but I still would want to mantain it for HA Dashboard for instance
groups were doing too many thing automatically on the UI, they should now be used only for automations
if you need a group... you either need a glance card or an entities card
usually entities card is your previous group
the "circle like" sensors shown in the old states UI are no longer in lovelace ?
badges - nope glances is the new way of showing that sort of info
We might add them back but not currently
they are still there in picture-elements @vapid field
other: can I use weather with weather underground?
not using the weather card no
it has to be a weather component, and wunderground uses sensors
Trying to get https://developers.home-assistant.io/docs/en/lovelace_custom_card.html working on 0.73.0b1
Getting:
Custom element doesn't exist: custom-card-example.
already restarted HA
my-ha-url/local/content-card-example.js returns the .js content
in ui-lovelace.yaml I have
resources:
- url: /local/content-card-example.js
type: js
Not sure if changed but have a look here https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html
I think that example has to be updated to include setconfig....not sure if it will work with 0.73 as -is
yes, now it says setconfig is not defined
s.setConfig is not a function
I added
setConfig(config) {
if (!config.entities) {
throw new Error('You need to define entities');
}
this.config = config;
}
and now it says:
You need to define entities
got it working with
setConfig(config) {
if (!config.entity) {
throw new Error('You need to define entity');
}
this.config = config;
}
@vapid field so the sample in the last URL is still not working?
@north spear The example is updated in next https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html
ok, that is good
Is it possible or will it be possible to define lovelace trough packages?
For now, only ui-lovelace.yaml file. Given that we are moving away from packages, I doubt we will move to in that direction. You can always combine multiple files using include
Moving away from packages ๐ข
Packages were a catch all solution that configured integrations, automations and UI in 1. We're moving away from that. Integrations are being stored in config entries, UI config in Lovelace
Note, we're not taking packages away
We just don't see much value in investing more time and energy in it
The nice thing about config entries and also about lovelace in the future is that it's easy to build UIs for it
@storm lion imagine a world where you donโt write yaml and can change setup from any device through the ui. You wouldnโt care about packages anymore. ๐
When that is the case i'm happy to let my packages go ๐
Once we get our device registry added, we can introduce areas where devices are. And entities map to devices. So now you can see your config entries and UI files that are related to an area
Yeah I agree with both of you, however for me I prefer the nitty gritty of personalising every little detail myself in the yaml. I tried using the GUI to build automations once and really don't care for it. It's a personal thing, and I think that the yaml will hopefully stay indefinitely for "power users". But inorder to make the project even wider spread, which we all want, the additional of a click and go interface front and center is key
^ that sounds very cool Paulus
I like yaml for automations too. Some prefer node red some might prefer different ui. Current automation editor is far from ideal ๐
But i do think updating the cards and such from the ui will be nice. I would use a ui to shift from entities to glance and back to see how it looks if it was staight forward vs changing yaml
And for me node red is even more painful than the automation editor, but everyone else seems to really love it. That's what's great about home assistant
yaml ๐
Please visit my Github repository at https://github.com/jackjohnsonuk/homeassistant-config
(very messy)
The UI change will tempt a lot of people I think.. but as Paulus' own post, the UI I imagine is secondary for a lot of us.. but probably less so for "the average Joe" who is used to something like the hue app, and will probably never care about Bayesian sensors etc https://www.home-assistant.io/blog/2016/01/19/perfect-home-automation/
Also very off-topic.. my apologies
๐
im trying to use an image from a camera in the UI. I have a shell command that grabs it, but where is it going? I have tried a few iterations but am a bit lost ``` get_lr_snapshot: curl "http://192.168.1.196/cgi-bin/api.cgi?cmd=Snap&channel=0&rs=xxxxxxxxxxx&user=admin&password=xxxx" > /config/images/motion_livingroom.jpg
i can get the image ok, but not clear on the path to send it
hmm
@wooden canyon just take latest beta and use camera_image
no hacks needed
see: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/card-picture-entity.md check for camera_image in the options
@north spear looking back, wasnt too clear on detail. Have a couple cams, want to trigger them from HA to take a snapshot and put the image in the local folder (www). All works except I don't seem to have the right path to deposit files into the local folder.
ah, ok, so not related to lovelace? probably wrong chat
if you're using hassio your path should be /config/www/images/motion_livingroom.jpg
thats what Im using but getting no joy. thx . . . .
ahhh , and no im not doh ....
thanks @north spear for your sight, the obvious eluded my eyes
hi, how to make the weather fcast card , to work , i tried many different combinations , all with no result , just nothing , no errors.
to make it simple you need yahoo weather component installed.. now make sure it's the component and not the sensor
then it should be as simple as
- type: weather-forecast
entity: weather.yahoo_home
Is there a known issue with history_graphs and View names in Lovelace in the beta?
i made a tab to show all automations and scripts , using a simple filter , the page become unresponsive and finally hanged .. , ( it works perfect with "all groups" on the std UI) , should be reported as a bug? .
is there a way to get picture-glance to update the image on demand? I am updating an image from a camera keeping the same name.
@wooden canyon Are you on b3 already?
is the example given at https://developers.home-assistant.io/docs/en/lovelace_custom_card.html supposed to work with .73.0b1 ?
@mortal cape Nopes...that will not work. Use https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html
ah ok
thank you
guess I'm not seeing the difference except for the advanced example
@raven nacelle no, the stock issued version
at https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html it says In our example card we defined a card with the tag content-card-example (see last line), so our card type will be custom:content-card-example
but the lovelace yaml uses type: "custom:custom-card-example"
@wooden canyon in which case, picture-glance card only updated on refresh.
Is there an updated example for entitiy-filter? ive messed mine up since 0b3
@cunning violet see here: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/card-entity-filter.md
@north spear Why thank you sir
I have the same question as @wooden canyon
@vapid field - on the next release you'll have a way of using a camera_image as a background to a picture_glance, assuming that's what you are trying to do
will markdown support templating in the future?
it was requested previously and it was noted that a custom card is the best way of doing that
not really, ignore the advanced example totally:
you just need this bit:
https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html#defining-your-card
and this bit:
https://developers.home-assistant.io/docs/en/next/lovelace_custom_card.html#referencing-your-new-card
and this card will support templating?
@atomic citrus what do you mean by templating? Ability to use in a freeform entity data ?
because that's exactly what the example does:
this.content.innerHTML = `
The state of ${entityId} is ${stateStr}!
<br><br>
<img src="http://via.placeholder.com/350x150">
`;
that is custom HTML with dynamic data inside
okay. right.
ithought about things like
{% if is_state('group.motion', 'off') %}.............
i want to creat text, based on different conditions and place it in the card.
that was my initial intention
you can do that with the custom card
${stateStr} can be defined as you wish
see higher up
const stateStr = state ? state.state : 'unavailable';
you can call stateStr what you want and build it as you wish
so it is following a different syntax than jinja, right?
or make it easy on yourself and don't have the front end do any processing... create a template sensor that does it for you, then just call that in the front end ๐
right ๐
altough i like to NOT clutter my system with dozens of sensors ๐
...
with lovelace those sensors no longer auto show on your UI, so no clutter
only would need one... but ok, each to there own ๐
I think he means in
.. which is even more bizarre
can the entity_filter also just hold an array of entities?
@atomic citrus what do you mean ? it is using an array of entities which is than filtered based on state_filter
like
- type: entity-filter
filter:
- entity_id:
.................
state: 'on'
card: glance```
that structure is outdated, check latest: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/card-entity-filter.md
- type: entity-filter
entities:
- device_tracker.demo_paulus
- device_tracker.demo_anne_therese
- device_tracker.demo_home_boy
state_filter:
- 'home'
card:
type: glance
title: People at home
okay. coming with 73 i guess
yes
okay
you can follow the changelog here: https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/changelog.md
is planned to support hyperlinks with entity-pictures?
like jumping to a different view
yes, but using picture card New card: picture for triggering navigation and services
cool. seems that 73 is a relase i am really looking forward for a long time ๐
for a long time or since a long time??
no idea ๐
i guess you get it
What about using wild cards within 'entities:', is this gone? Same for use of 'domain:' within filter/state-filter?
Yep. Gone
that's too bad ๐
It would have been done for a good reason, however I'll miss it for sure
Iโm sure someone will create a custom card for it
Anyone got the weather-forecast card working with yweather. It has worked for me before.
is it not working at all or are the logo's just not appearing?
on a vertical card is anyone else getting scroll bars appearing? The card is being fully shown but the GUI obviously thinks it warrants a scroll? N.b. this isn't happening on any other vertical stacks
(excuse the mess) https://i.imgur.com/ibEcTx2.png
@lapis oriole posted a message that is more than 15 lines. It is now available at: https://hastebin.com/ekisidekiq
I imagine in
it's called weather.Harderwijk .. just check for me
the error is saying that weather.yweather doesn't exist
@storm lion Super, thanks!!! ๐ This did it:
- type: weather-forecast
entity: weather.harderwijk
glad to be of help
@atomic citrus at the moment you will get a way to have a card full screen using panel in views
sorry, i dont get that ๐
Check https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/Readme.md#views and "Panel with a full screen card"
Setting panel: true will force the first card to be a full screen panel
@storm lion nice! That is what im looking for, next release as in 0.73?
yes, it'll no doubt be released shortly
@vapid field - an example https://i.imgur.com/odGXKee.png (excuse the mess)
can you make cards smaller too?
thats what i was looking for. combining H and V stacks!
an example of just that - https://github.com/ciotlosm/docs-lovelace/blob/0.73.0/card-vertical-stack.md
pfff.... this is just too damn easy to create custom cards now
first time trying it out
haha, I tried one earlier (basically as the example just as a statement of where the last motion was)... so easy even i could do it!
there was a missing setConfig, but I created a PR to correct that
hey guys, hope you are doing well. i dont see an open issue for that but when i refresh my lovelace page i am not seeing the icons for my other views. did i oversee an open issue or is there even a fix already?
once i click the invisible icons, they pop up
are you sure you have the right yaml code for views / tabs in lovelace?
and are you on the dev stream or production?
production
let me see if i can post pictures to visualize what i mean
looks like this after first refresh
and when i click next to overview they missing icons will popup
actually its the debugging view. once i click that, the other one appears as well
let me remove it completely and see if that helps.
nope, even without the debugging view, its still hidden. and now it stays hidden
btw: if you use an editor with utf8 you can also write ร. the icon issue is already listed
wow, thanks @quick beacon -
that's amazing
thanks @quick beacon.
Hi all, i found a problem with vertical and horizontal cards , not sure if it was something that was not finished at the time , or something related to my configuration, but couldnt make them work while everithing else worked fine , just checking if there is new information , tks
@calm rock what issue are you experiencing ?
@north spear there cards were just not working , nothing on the screen when i applied the card , everything else worked
hmm
you on dev?
no ,
which HA version do you use ?
There's your problem ๐ patience my man
72.1
ok, i see tks
Is it worth it to upgrade to lovelace? I have a pretty big UI and moving it over would be a lot of work, or should I just wait and see where this goes?
It is still experimental, and as such you need to go into that with eye's wide open to this, if the dev's change something you will need to just roll with it.. With that said it's a fantastic interface and it's revolutionized my GUI
If after that you do decide to do it, I'd at least wait till 0.73 drops
alright that was kind of what I was going to do since it was experimental.
i recommend trying out a migration script, it makes life easier when you have a large UI ๐
Maybe @empty heath can let us know if he's updated the script with latest changes for 0.73.0 ๐
@upbeat eagle the good thing is, you don't need to touch your existing UI, so you can try it pain free. The only thing you need to do after you migrate is to delete all your obsolete views & groups that you created to work around the magic in previous UI
Just released 0.73.0b4 with a couple of more lovelace changes
navigation_path option added to picture-glance and add option show_info: false to picture-entity
I would love if people could create videos going through their Lovelace UI and show off all the cool stuff
@north spear The script has not been updated, no. I will try to review the changes today and see if I can get them into the script.
take your time, as I think only when 0.73.0 hits you'll get lots of friends asking for it ๐
I know I could take the time to look in multiple places, but if you have an idea of where the changes might be listed, it would be extremely helpful.
I don't even need a link to them. I'll go ahead and check the lovelace docs first, as that's probably where they are ๐
it has
And it has been released ๐
Even though in Polymer the commit for path -> navigation_path is after the version bump, I released it with b4
@north spear Thank you, sir. It would have taken me quite a while to dig around to find that, haha.
I step away for a couple of days and everything changes, haha.
how should i configure the climate component in order to show correctly on lovelace , doesnt work in an entity card
@calm rock what do you mean ?
climate will need to show more-info-dialog which is the default behavior when using entities card
I'll try and do a gif or something later of mine @half osprey ๐
also i was trying to find out why show_info: false wasn't working ๐
If you're on a Mac, I can recommend https://github.com/wulkano/kap for screen recording
prefer a youtube video over a gif if you're showing full ui. Gif doesn't hold up well with many colors
Thanks,I am on Mac at home so will give it a whirl!
i always used quicktime viewer to do screen recording on a mac since it was native lol
@north spear exactly , it needs to show all the controls , but it just shows the state .
how to paste an image here ?
paste imgur link
the more info card has not changed..so it should be the same in both
Look like they have different names to me..
Climate's working fine for me in Lovelace
@calm rock Seems you are including your hvac_2_change entity instead of control_hvac_2_H
the climate component is "exacltly " the same on both cases , the config is a copy paste
then, why are the names different in the two images
I think you've included this instead of the correct entity:
i see what you mean
the problem is that the climate component is missing alltogether
so i clicked on the last one without noticing , is not even there
climate is working fine here....
ok, will split it into a separate card , to see what happen
I just checked here and climate works fine for me
i understand is strange , but i have one working and one not , ( both work fine on std UI , and have not been modified ) , but with the second climate component , the info is not shown https://imgur.com/a/mr9voji
to sumarize , the component IS, working for me too , but only on one AA , on the other ( ) one is not . from the config point of view the only difference between them is one is configured as ac_mode: false , and the other as true .
found the problem , copy mistake , i copied the name instead of the id ( when doing the manual lovelace config) , and they differ one is _H and the other is _h
thanks
Bonus tip for people starting to use the Lovelace navigation_path option that has been added to various cards: it's not limited to Lovelace views. You can navigate to any part of the UI by using the right url. For example: /map
what could be the cause of my mdi:icons acting up? I don't get any material design icons
on all browsers and also in incognito mode ?
chrome, also incognito. But i'm sure it's from something in dev mode
it was working earlier on different station, but not got home and it's not working
oh, make sure you git pull and run script/develop
No. It's an issue we have since the beginning
is it only in lovelace ?
ooooh
guess what
It's because we use iron-icon and not ha-icon
yep
got a fix ๐
it's been there since the beginning
some condition on this machine triggers it constantly ๐