#frontend-archived
1 messages ยท Page 74 of 1
Does anyone how if it is trivial to change the click event of this custom-card?
https://raw.githubusercontent.com/kuuji/light-card/master/light-card.js
(click event is on line 30, function called line 54)
current behaviour is to display a more-info panel
my js knowledge is too basic unfortunately, usually can bang things together if i have an example to work off
no not for js
for the yaml
- type: custom:some-card
title: something
toggle: blah
anyways off to work vacation is over ๐ฆ
@gentle garnet It's not entirely trivial. I assume you want to toggle something. If so, you first need to find out the current state from hass.states..., and then call the correct service using hass.callService().
Strike that... you can just call homeassistant.toggle. Look at this card from the same author: https://github.com/kuuji/button-card/blob/master/button-card.js
@polar kelp perfect! thank you!
@kindred pasture I used http://www.roomarranger.com on OSX
how do i change the size of the picture in a picture elements card?
~lmgtfy @icy shard css dimensions
Here, try this @icy shard => http://lmgtfy.com/?q=css+dimensions
@wheat current how do i set that for the background, it isnt an element
same thing
sigh im not gonna carry you, either double down and read css documentaiton or give up
it works.
at work as most of the people in here are
because style is for the elements in a picture element, but i want to change the size of the background
on the map card is there a way to adjust the zoom factor?
if you want to change the size of the background then i suggest you take the time to actually read the documentation
@woven forge doesnt seem like it all you can tweak is the aspect ratio
been looking at that also
and on there there is no style for that
@icy shard please take the time and actually read for once
what is there to read ive read that but apparently not you if you look at what i linked
the aspect changes the size of the card. i am looking to zoom in or out
if your using picture elements then read picture elements
cause guess what its all in there
i did
yeah @woven forge i know but like i said there is no such option yet
you dont seem to see my problem it isnt the elements i want to resize its the background it that ISN'T an element
have you ever thought of reading it again @icy shard ?
ok thanks
cause i know its in there
link it then cause i read it all
read
please just read
like i know you wanna learn but it takes more then 5 min to do something useful and you really gotta read it all and not just bits and pieces
Know what, @buoyant skiff , I think you were actually a little quick on the judgement in this case...
were talking about two diffrent things toast
I can't find any support in the source code for picture-entities to style the image:
youre talking about the view background and im about the picture elements background
i got better things to do then waste it here and geez picture elements really thats the one thing i do
.away work
Toast is away! work :wave:
Sorry, @icy shard. I don't think it can be done. Not in the way you think at least.
can i like change the size of the picture
You could use a blank background and add an image element which you can style.
Hey. I made a not-so-short blog post about yaml. Might be useful to someone, perhaps: http://thomasloven.com/blog/2018/08/YAML-For-Nonprogrammers/
Your blog needs some design love ๐ but good content!
Community Collection of Lovelace Resources: https://www.awesome-ha.com/#lovelace-ui
Hey folks, I'm editing a theme, midnight specifically, but I'm at a loss as to hoe to force the changes to show.
I've restarted HA, cleared the browser cache, everything I'd usually do in a web-dev environment.
The thing that is puzzling me, is I had this issue last night and about lunch time today the changes I made were in effect...
how do I force changes to take effect immediately? I must be missing something somewhere, but no idea what...
u got it set as default ?
it's the currently active theme
well
TO DISABLE CACHING IN CHROME
- Right click anywhere on the page, choose Inspect
- Push F1 to open DevTools settings (Fn+F1 on a mac)
- Under Network, check the box "Disable Cache (While DevTools are open)"
- Refresh the page as normal
This will make sure all changes are forwarded as long as the Inspect pane is open.
Useful if your browser displays the old version of a newly update image, or if the changes to your custom javascript doesn't seem to do anything.
you can do that to force chrome reload every time
This is whats puzzling me, as a web designer, I have that set permanently...
It's happening cross-browser too.
firefox and chrome
most people dont mind caches
on this machine I have it set so I can see immediate changes, speeds up workflow.
I have other machines for end user testing
weell we cant decide what the browser caches or not
I'm about to pull my hair out here. ๐
perhaps there is an addon for chrome or a userscript that does the trick
but again never explored that route
but you can always google it
it's only occurring with HA
So, to check:
- You're using Lovelace
- After you change the theme you use the service to reload the themes
- You re-apply the themes from the service?
my suspicion is that it's HA not detecting the changes I've made, not the cache as it's not device/browser specific
if I change back to default, then back to midnight the changes do not show :/
What version of HA are you using?
sorry yes, I'm using lovelace. rather than the service i'm using User>Theme>
That the problem?
76.2
Not at all, just that the setting vanished for some in 0.76 because of changes
I'd try the service from the
menu just in case
ok, I'll keep playing,
got to go now, otherwise I'm gonna miss kick off โฝ๏ธ
will try again later, and let you know how I get on.
Thanks for the input guys.
I never had any luck with the reload theme service. Only thing that worked for me was ha restart.
It worked for me when I set it all up, but I haven't touched themes since a month or so after they were introduced
just messing around with lovelace - the picture entity card, is it possible to set it up so that when you tap the image it turns on/off the light rather than bringing up the light popup and then having to press that on and close it
@mossy otter Use tap_action https://www.home-assistant.io/lovelace/picture-entity/#tap_action
99% done on the greeter card gonna probobly put it up this weekend
@buoyant skiff that looks brilliant!
@buoyant skiff Continues to do some awesome eye candy ๐
only 586 lines ๐
thats the lovelace part
then we got the behind logics
all the jinja that @glossy birch and @empty heath has helped me with
@raven nacelle that worked exactly right! Thank you!
@buoyant skiff looking great!! I like how some of the text is in bold, it gets your attention at the same time, very subtle!
now you see all those wierd jinjas ive been toying with in action ๐
thats why im counting the counters ๐
all for the summary action
lol - there is no use of jinja when you don't have right people using it ๐
yeah learned alot from you and dale you both are masters of the craft ๐
l learned from @empty heath - he is the Guru!
prefers the title โJinja Ninja.โ
haha
another lovelace question as I seem to have the masters in with me right now ๐
can I set a transparent background for a card? If so, how do I do that?
next challange is a system info page
@empty heath you mean this?
Hahahahaha very nice!
lol
@mossy otter you can go for a simple transparant png
@mossy otter Yes, I think transparent PNG and SVG are supported
@empty heath we need you play with bot permissions when you get time!
@buoyant skiff apartment* (just fucking with you) you have a typo in your greeting card ๐
I'll send you a DM
Someone I read about had written that they had used rgba(0, 0, 0, .25) in their theme customization?
opacity that also one way to go
last value in rbga is opacity
setting that to 0 will result in transparent
@marsh sentinel neat will fix ๐
Red/green/blue/alpha (which, as toast said, is opacity)
@buoyant skiff looks very awesome ๐ like your รถl and vinmรคssa too (fellow Swede here)
most important day of the year
fuck christmas fuck easter fuck any other holiday
that date is my christmas ๐
haha ๐
themes:
transparent:
rgba(0, 0, 0, .25)```
never worked with themes before, is this right?
doc says something about primary colour? do i need to put that in there? I guess I do...
frontend themes and themes are different
right, so where in my config.yaml do i want to put the info for the transparent theme i want to use for lovelace?
- name: test
title: test
background: rgb(0, 0, 0, .25)
thats how it would look like
or you can use an image as a background
@mossy otter then you need to create a theme
and thats not really lovelace
Hi there, im thomas, i m new to HA and just began to finish my first project. I just spend 60 hours on some (for you) simple things and then i found out about lovelace and wondering is i need to start over or not
Not at all. Take a look at the migration scripts listed here: https://www.awesome-ha.com/#lovelace-ui
Also, cross posting in several channels is generally frowned upon.
(Not that I have any experience of the migration scripts - I started over with my UI setup - but I heard much good about them)
The scripts worked for me, did the heavy lifting I needed
I think the same method should work on windows too.
Otherwise you can just run it with python.
But I don't recommend using it from the start. Get lovelace working with a single file configuration first.
Just to minimize the possible sources of errors - introducing them one at a time.
ok
still need to firuge out how and what to do exactly, lovelace will become the new default eventually? dont wanne wast LOTS and lots of days and hours in something thats going to be replaced in future, im no dev, only thing i can do is create html5 websites XD
Yes, the current UI is going away and Lovelace will replace it
I'd not be surprised if we see Lovelace as the new default in the next 2 to 4 releases
There's also plans on a new way of handling the configuration. More graphic and less codey as I understand.
Yeah, with the expectation that you'll still be able to do it manually, but that the default will be through the GUI
You can fake it with the Monster card, but 0.77 will introduce a notification area for these
Lovelace looks super nice with that dark theme
I need to get started on configuring it
@split granite lots of re documentations then
biggyk
have a strange issue - Iโm using the custom thermostat for Lovelace that looks like nest - working great - however on my kindle fire it fails to load for some reason
Maybe itโs a browser version thing? Although the animated weather card works fine
for custom cards open a issue on github for that card so that the author can respond
@swift violet - I want to say that I saw a message that said only Chrome was supported but I can be wrong about that.
gonna have a list where i list how many automations script sensors and switches are loaded in ha ๐
@buoyant skiff Do I recall that correctly that you are using markdown for those cards?
the useful markdown card
not the plain markdown card
and then a shitload of templating sensors to do what i want
The useful markdown card... what a pretty name ๐
the original markdown card should be named the useless markdown card ๐
The useful md card is not in custom-cards repo, is it?
no its on thomas repo
thomasloven?
yes
it has some wierd predefined styling
--paper-card-background-color: none
--paper-material-elevation-1_-_box-shadow: none
--shadow-elevation-2dp_-_box-shadow: none
that removes it
Cool. Thanks. I'll have a play with it.
might look ugly atm but it will look great once im done ๐
@buoyant skiff - That looks very nice. Can you share the code?
*calendars
tnx
just not sure about the design so far
got an idea but thats all i got
the good thing is that it looks nice under a light background
good when the background is switching
is it possible to add empty space on horizontal-stack cards?
think it will be possible later on there is plans for having a border
atleast it looked like that in the official gallery
- type: divider
dunno if it works yet
@buoyant skiff does it work with 0.75.2? thanks
I tried it but I get
Unknown card type encountered: divider.
You could add a blank picture...
Or any empty card, really.
But you'll get the frame and stuff.
Hello, first time here. I've been self teaching myself hass yaml and now lovelace but am stuck. I read through all the card types but cant figure out if picture element can work with multiple entities with filtering for on, open, home etc?
I want to see all my entities that are on unlocked open or home on one page with a background, not seperate cards. If that makes sense.
so it looks kinda clean
left the background image out intentionally
So all of the bold text is sensors
added smartmon tool to hassbian and added a sensor for checking if the harddrive is getting a pass or fail
@dusky jackal That's kind of hard to do...
... give me a few hours... I got an idea...
they can
Ok so I can just change my current filter cards to transparent. But would like to see @polar kelp idea
the border line that i know been working for awhile
- type: divider
it creates a border line
never used it
@buoyant skiff what font type is those you using, name?
they look awsome
Anyone know how i can see a whole group in a card instad of just a group-button that expands? http://tinypic.com/r/2r4kbb7/9
@buoyant skiff With your experience, would something like this be useful, or just a waste of time? ```yaml
- type: custom:card-modder
card:
type: entities
entities: ... etc
style:
background: url('whatever.bmp')
color: 'hot pink'```
dunno have to mess around with it
thanks
- url: https://fonts.googleapis.com/css?family=Clicker+Script|Nunito+Sans|Quattrocento+Sans|Gothic+A1|Inconsolata:700
type: css
@prime umbra
@buoyant skiff that looks awesome, have tones of fonts :)
thanks for sharing !!!
was wondering if its possible to have like a bank on fonts to become something more local available, other then be dependent of internet?
dependent on being online
you can download em
but i really dont see the point since most of HA is aimed at being online
thats true
@dusky jackal There's my idea...
Okay, strange. If I head to http://myip.com:8123/lovelace/People I get a login screen and then I see the UI. However, if I go to http://<myip>:8123/lovelace/ I get a 404 error. This only seems to happen inside of the network. If I enter http://myip.com:8123/lovelace/ on my mobile device from outside of the network, it works. Recent change: I added id: tags to each section to have a friendly URL instead of 0 / 1 / 2 etc.
Try http://<yourpi>:8123/lovelace without the trailing slash
What the bananas!?
That worked.
Although I am getting a console error because I'm not https yet.
It's the same for all panels, /states/ 404s, /states does not, /config/ 404s, /config forwards to /config/dashboard etc.
@vapid field the card-modder?
yes
It can be used to do all kinds of stupid stuff.
And probably some nice things too, in the hands of someone other than me.
In your case, i think box-shadow: none and background: none might be useful, but I donโt claim to know css and canโt test it right now.
No, wait... I was thinking of something else.
But at least you can put a background on a monster-card now...
Can I use the state/attribute of an entity with the markdown card?
With this you can: https://github.com/thomasloven/lovelace-useful-markdown-card
Still a little beyond me at this point. Appreciate your input though
Yeah... as I said, what you're asking is doable, but in no way easy.
So do I add a style opacity attribute on cards to get transparent?
Hi!
Im loving HA , running on intel NUC on ubuntu with lots of KNX-lights&sensors, netatmo, sonos, deconz, etc, etc.
Now struggling with lovelace custom cards, that I cannot get to work
Just getting: "Custom element doesn't exist: monster-card". Read the instructions and forum 10 times. I can see js-file from [my ha]/local/monster-card.js
I defined it as:
resources:
- url: /local/monster-card.js?v=2
type: js
anyone kind out there who have any smart idรฉa ? ๐
@latent jasper local corresponds to www folder
@raven nacelle yes, the monster-card.js is placed in /config/www/
Any errors in your log?
and it has the right permissions?
and resources are in ui-lovelace.yaml and not configuration.yaml?
logged in as homeassistant when uploading all files. I can edit them in configurator.
I deleted logs now, reloaded page, got error and I dont see any errors in log
and yes, resources are in ui-lovelace.yaml
run ls -la to check permissions
checking
-rwxrwxrwx 1 homeassistant homeassistant 105354 aug 26 16:53 monster-card.js
added x, no difference
and the folder?
drwxrwxr-x 2 homeassistant homeassistant 4096 aug 26 23:19 www
looks fine to me
If he can browse to /local/monster-card.js the permissions shouldn't be the problem.
@polar kelp I thought the same...
How about your browser log?
you can browse to it in the browser?
What's your browser?
chrome
open the console and check for errors. if using chrome ctrl+shift+i and click console tab
might also be good to see your card config for the monster card
not just the resource entry
wss://[my ha]/api/websocket?latest
says 0b, pending. Dont know if it matters? No other errors in console
card config straight from example in documentation:
- type: custom:monster-card
show_empty: false
card:
type: entities
title: Lights On
filter:
include:
- domain: light
state: 'on'
Ok. Then go to the Elements tab press ctrl+F and search for "monster"
Do you find <script async src="/local/monster-card.js ... ?
no, i did not. Just custom element doesnt exist...
Then the resource isn't loaded correctly.
Mind sharing your entire lovelace-ui.yaml? Through hastebin preferably.
Det ser ju ok ut... Wrong server... I mean: I can't see anything wrong...
Did you get the other custom cards to work at some point?
also hass version?
hass updated latest official 2-3 days ago.
nรค, tyvรคrr, vet inte var jag ska ange javascript
(.. sorry, back to english...)
trying this out with monster-card, as it was the best documented example.
In your homeassistant configuration.yaml yaml frontend: javascript_version: latest
And then restart homeassistant
thank you. I added that. restarted. same error/no difference
๐ฆ
... and emptied chrome cache. Nothing new....
you're sure you're looking at the lovelace UI right?
url should be [hass url]/lovelace/0
Youโre getting the red box, right?
@weak gust yes, thank you, I enabled that as default and switching between /states and /lovelace when testing
yeah, red box
the script tag isn't showing up in the lovelace page
everything else seems to be in place
Me too ๐ฆ I disabled adblock and avast. Should I try another browser?
you don't have any custom html, themes, or anything like that?
yeah i'd try a different browser
Tried 2 different computers/browsers. Same error.
When you opened it in the browser what was the first line?
no custom html, no custom themes.
custom components...?
@wheat current
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
Thats it
there is the issue ๐
? ๐
But why diidnโt that give an error in the log?
no errors in log ๐
and change url: /local/monster-card.js?v=2 to url: /local/monster-card.js?v=3
@polar kelp It was not a js file so the error (can not load) is somewhat correct i guess? ๐คท
It should have given a "Uncaught SyntaxError" in the browser console
great ๐
copied /replaced that file in Ludeeus link, restarted, cleared chrome cache.
but same error
<!DOCTYPE html>
<html lang="en">
<head>
when direct accessing the file
when opened in configurator, its:
class MonsterCard extends HTMLElement {
_getEntities(hass, filters) {
function _filterEntityId(stateObj, pattern) {
when opened in browser , its:
<!DOCTYPE html>
<html lang="en">
like ha-url/local/monster-card.js?v=3
The cache clearing thing only works while the devtools are still open, by the way
changed to v=3, restarted, no difference
direct accessing /local/monster-card.js?v=3
gives me: 404 not found
Hi, i have hello world example of lovelace card and I want to make a simple clock using java script. I found simple example on the web and this example use document.getElementById("MyClockDisplay") and that didn't work, i also try with that Polymer.dom(this.root).querySelector("#MyClockDisplay") and I also try to create element dynamically. What i am doing wrong? I put all javascript function inside <script> </script> tags
@latent jasper changing lovelace config only require reload of the page, not restart ;)
That indicate that it does not find the file, verify the name and localtion
what was the full path you put the monster-card.js file in?
it should be in www folder, which should be in the same directory as your configuration.yaml
its [my hass]/config/www/monster-card.js
Well, thank you all
I was stupid
I now put a copy under [my hass]/www/monster-card.js
restarted
and it works ๐
error was putting it under [my hass]/config/www/monster-card.js
Sorry for bothering you all ๐ฆ Have a nice evening/night ๐
Where is info on the new persistent notification drawer?
right top drawer
atleast it was on the betas
ask in beta
think you will get a better answer there
dynamic wifi icon based of state
Ok. Thanks.
So I think it is automatic now? No need to configure a card? And it is called notifications?
have no idea
havent even bothered to update
came out like an hour ago
again ask in beta
Ok
those guys have fiddled around with it
Notification drawer ๐
meh ๐
I've waited so long ๐
i want to continue doing my system overview
but im so fucking tired
and im bored at work
Bored at work = hass
been looking at ip services
I'm waiting for verification so that we're able to make a new release, so in the meantime I'm watching a Pluralsight about Python ๐
thinking of doing a very simple sensor
returns all the values
could be good for me atleast since i got my domains setup via homeassistant
dunno how useful it would be for anyone else ๐
but ive made a liitle redirecter in python for my dns
Hey, Toast. Did you see my atrocity? https://github.com/thomasloven/lovelace-card-modder
It would be fun to see if you could make something nice with it.
well... yeah... but... umm...
aleast it can give me a clue of what it looks like
then i know if i can do stuff with it
okey well its worth trying it after i wrap up the system overview
I have this not working:
style:
"--paper-card-background-color": "red"
Where is the red color? in your image?
It's behind the background image. Not a very good example, really...
SO if i put off the imgae i will have the red background?
hopefully
ok
@polar kelp So card-modder if just for adding style to any card, correct?
Hi guys, I think you can help me, I'm creating a neato botvac custom card, and i want to open the more-info from the camera entity when clicking on the picture. Do you know how to create this kind of link ?
.sharethelove
A place for LoveLace Config https://sharethelove.io/
like that ?
if you just want it to move over to the cleaning map then use navigate
and set up a page for the cleaning map
@steady pumice thats two ways of doing a neato botvac card
Owh i did something not so complicated
Just putting infos from vacuum attributes (battery level, status, etc ...), and an image with the cleaning map
And when I click on the cleaning map, I'd like to open the more info dialog from the map entity
navigate on toogle it then
Hola all - I am sure this is easy! But how do I show an attribute of an entity on a card? eg I tried - entity: climate.thermostat.current_temperature but get the red card of FAIL ๐
Not possible unless the card/element support it
bugger! Any thoughts on a work around - I want to use my theermostat to show the temperature of the room it is in.
A card /element that supports it, or create a template sensor and use that
great thanks will go and have a play I have used templates before I guess I had hoped with lovelace "it woudl jsut work" lol ๐
Didnโt someone create an attribute card?
Yes, there are several actually ๐
only 1.8 down?
yeah for homeassistant alone
not all of it
thats the system overview
how much its downloaded and uploaded
@polar kelp Hi, I really like your slider-entity-row.js . But it often wrongly and automatically goes to maximum brightness when toggling on/off instead of remembering the last brightness value
Often as in always or as in sometimes? Always for the same light?
Is there an updated changelog for .77? I know they added the notification drawer but I also see that there are some updates to the map card. Wondering what else was added.
check the blog
@buoyant skiff there is nothing in the blog.
then guess what there might just been the notification drawer then that had changes ๐
@buoyant skiff I see in the lovelace gallery that the map card now has a default zoom option. Donโt see that mentioned anywhere else so that is why Iโm wondering if anything else was added.
how should i know that ?
ยฏ_(ใ)_/ยฏ
if its not in the changelog its not in the changelog
you can check on git
to see what was changed in history
Doesn't appear that anyone is maintaining the changelog: https://github.com/home-assistant/home-assistant.io/blob/next/source/lovelace/changelog.markdown
a part of this release https://github.com/home-assistant/home-assistant-polymer/releases/tag/20180825.0
Octobox โค
Since LL additions are not tagged in a spesial way, it would have to be a manual task of producing LL changelog :/
Yes, you should get it ASAP ๐
I need to fix my installation first. All hass api calls are broken since moving to 0.77 for me
Can't install new add-ons or update them. Can't update or rollback the hass installation itself...it's awful
I don't want to debug and will probably just blow it all away
@buoyant skiff Some of us have to do it ;)
@mild veldt I think that was fix'd in SU 128
but i can't update SU...
@wheat current just dont ๐ its very simple ๐
I can't
I get bad request for all kinds of updates. No matter, I'm taking it as an opportunity to roll my server back to 16.04. I'm not liking 18.04 changes
Oh, docker has some DNS issues on 18.04
yeah, it's dumb
no, this is sparta
@polar kelp same lights, not every time. Id say approx 2/3 times.
xknx-managed lights
no this is patrick
how long did you search for that? lmao
slowly it beging to look awesome
What plant is that. Basilic? Baby marijuana? ๐
TL;DR
anyone used the Big numbers card? https://github.com/ciotlosm/custom-lovelace/tree/master/bignumber-card
A couple of times
any idea if the max: value will take input_number values
so that the threshold can be defined in the frontend rather than hard-coded
also curious to know what happens if that max is exceeded (e.g. if you've put a max temp of 30 and it gets to 32)
can anywone please quickly explain me what the diff is in custuim ui and lovelace?
Custom UI is a hack
im very new i just setup my frontend and wanne make sure im choosing the right follow up
Lovelace is fully supported
@mild veldt ok so it only takes integer values defined in the yaml code?
Custom UI will go away
ok so i will go for lovelace :p
Lovelace is official, custom_ui is unofficial...essentially
thanks man!
@mossy otter it does but it could do as you want with changes.
im an noob ๐
just got my first setup done and i hope this project is going to get major
this is something we really need anno 2018
this can be a buseniss model
im a company owner and i might wanne invest in this
This is an open source project. We have sponsors but no investors
i understand but still, this is a huge gap in the market
but thats offtopic right ๐
๐
@mild veldt what do you mean it can do as i want with changes?
Fork the code and add more options ๐
New pull requests are always welcome for custom cards
confused and wondering. why people on the forum still say to use custom-ui :(
https://community.home-assistant.io/t/need-help-with-sensor-icon-color-based-on-state/49292/54
documentation is a reall mess
Probably because that's what would solve the problem in that case. Also lovelace is still officially in Beta, I think.
@latent jasper I'm not convinced the problem is in the slider-entity-row...
How do you mean? Can I help?
- entity: light.terass_ledlist
name: Ledlist terass
type: custom:slider-entity-row
break_slider: true
hide_when_off: true
- entity: light.terass_fasad_h
name: Terass fasad hรถger
type: custom:slider-entity-row
break_slider: true
hide_when_off: true
(the intendation is the same)
the second one is going to max, the first one remembers
@polar kelp you might be right, Im investigating differences in KNX-adressing and group adresses in lights.yaml. So far no luck. Will be back ๐
.format @latent jasper please
@latent jasper To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks. Here's an example:
```
code here
```
Click on the link to learn how to format: https://raw.githubusercontent.com/skalavala/HassBot/master/format.gif
slowly moving over to lovelace - have to say its pretty sweet (the no reboot option is a killer feature)!
could someone help point me in the direction of some examples - i had custom tiles before, and when using lovelace button-card firstly they are huge so need to change the size down a bit - and secondly the color is based on var(--primary-text-color) - which just changes the icon color. I was hoping to change the button color, but cant find the name of it
also guess this is where feedback goes too - assuming i've not missed it can we add color_on to glance card toggle icons?
anyone else have problems getting to lovelace with the new auth? When i go to /lovelace it puts me in a login loop, redirecting to /states instead of back to /lovelace, then i try to access lovelace and need to login again.
I'd really like to have one vertical stack (with only one card in it) and then 3 vertical stacks with 4 cards in them but I don't seem to be able to make this work
morning
@trim dove has nothing to do with lovelace seek help in #330944238910963714
morning
david an empty card perhaps ?
by using picture elements
with a simple state-label and transparent background and text
hey @buoyant skiff how are things ๐
hmmm.... any idea what an empty card would look like?
should look ok
or you could go panel: true
and just build everything inside it
todays challange for myself is to make a summary for my nas
similar to this
@buoyant skiff im at work, lunch time now ... busy checking out how this lovelace works
what does panel: true do? make it go full width?
yeah
well not really stacks you need to make em from scratch
using images ๐
or by using useful markdown card
or by adding
they arethat nice new sonarr card and I wand to then stack my media player cards in columns next to it
the sonarr card can run top to bottom..
really? I thought there was no sickrage component?
anyway.... I want to have the sonarr card on the left with the upcoming displayed as posters and then have my media players next to it - 4 columns and however many rows
I'm just here pretending I know what you guys are talking about ....
ok I'll check that out but it's not helping with my problem lol
soon time to release my ui
know much about css David ?
cause thats is what you need to use in order to do what you wanna do if you wanna go the panel true route
yes
i tried looking for examples but didnt see any
kinda like the boxes in the image i posted
i thought you were just showing off ๐
that too ๐
lol
i really dont use anything else then picture elements
cause picture elements can use almost any other card inside it
most people seem to go for glance
never really got that card so easy to build a better glance if you have some knowledge
i haven't used glance
ohh nice a kernel update ๐
love it when my assistant fixes that on its own and just sends me a message ๐
pushbullet from bash ๐
i just ditched my picture glance cards lol
kernel for what?
so on a Pi then
a rpi3b with the os on a usb connected ssd no sd card
Linux debian 4.9.0-8-amd64 #1 SMP Debian 4.9.110-3+deb9u4 (2018-08-21) x86_64
but that's not the kernel is it?
i didn't think 4.9 was the latest... I thought it was 4.14
4.9 is LTS
and as i said debian is all about stability rather then shiny version numbers
but i always max out my rpis if i wanna play around with new features
thats why i tend to run bleeding edge kernels
@frosty pelican do you know if there is an bugfix available for hass ?
well we're getting a little off topic... OH hang on... duh.... 4.12 is HIGHER than 4.9 lolol!
yeah we are offtopic as fuck ๐
but im drinking my morning coffee
urgh have to helpout on first line support today they was understaffed
so when I do an apt-get update and upgrade, that will update the kernel as well right?
ok!! I have been in the habit of upgrade
upgrade can break
no idea why they havent removed it
but even debian recommends agianst using upgrade
so apt-get update && apt-get dist-upgrade
if you wanna be fancy add -y
OK awesome I shall etch that into my brain!
after distupgrade
i swear putting -y on the end I got an error once
probly gonna post my greeter card this weekend
that should serve you good as an example
just need to gather all the jinja that goes into that card
so much templating to get custom values
along with dynamic icons
David check the kodi remote at sharethelove
realized that used the method i was describing ๐
thanks @buoyant skiff I'll check it out
I think I was looking for that site but it's not pinned above
.sharethelove
A place for LoveLace Config https://sharethelove.io/
.awesome
Awesome Home Assistant - A curated list of amazingly awesome Home Assistant resources. https://www.awesome-ha.com/
for anything ha related
thanks
@polar kelp is there a possability of using entity picture in useful-markdown-card ?
[[ sensor.something.picture ]]
like that
or simular
Let me experiment a bit...
kewl take your time ๐
i can get it to spell out the path with sensor.location.attributes.entity_picture atleast
tried the official markdown method
but that doesnt seem to work
<img src=[[ sensor.location.attributes.entity_picture ]] />
![]() doesn't seem to work in the normal markdown card either...
ahh
hehe think i have to define it a bit ๐
its fekking huge
tnx anyways ๐
Is it possible to reverse โSet Lovelace as the default page on this deviceโ?
Yes, visit
and click the obviously titled Remove Lovelace... ๐
Time to add smart data from NAS to hass ๐
then add that to the lovelace ui ๐
Is it safe make a dist-upgrade of hassbian while hass is running?
@foggy tendon Wrong channel - ask in #330944238910963714
@split granite I just asked here because i read posts about it here... sorry
Do please read the channel topics
Reminds me, time to poke @buoyant skiff for his stream of image posts ๐
haha
currenly doing boring jinja stuff
not really the most fun thing to post about
now to make a jinja that checks the values and if one fails report which one
and then have it display on ye old UI ๐
I set-up the custom card state-element and tried to use it in this way:
but i get this:
Where am i wrong?
Where is the customization about colors, fonts, etc...?
I have history graph defined in ui-lovelace.yaml:
- type: history-graph
title: 'Temperaturer'
entities:
- sensor.aeotec_zw100_multisensor_6_temperature
- sensor.yr_temperature
One shows up as a line in the graph, the other as a multi-coloured bar above the graph. What is causing that?
@fallow oak unit_of_measurement
The state of the bar one is probably not a number but a string.
@wheat current Both set to ยฐC.
Then it's what @polar kelp said
@polar kelp Hmmm... Do I need to create a template sensor for that, or can I edit it directly?
Dunno. I'd use a template sensor... but perhaps there's a configuration option for aeotec or whatever your component is?
It's could be something as simple as it using decimal comma instead of point, or the other way around (I'm not sure off the top of my head what hass expects).
@wheat current hmm... that is the result of my code?
I had to use another entity and I set top: 50% but other than that yes
hmm.. so what's wrong on my side?
maybe the sensor i use doensn't support those styiles?
styles are for the card element, not the sensor
yes, i see but why i see no style in that card?
https://bin.halfdecent.io/hiqavokela.bash my entire ui-lovelace.yaml
@wheat current not minimal enough
@wheat current Using that with the sensor.weather-report i get this error:
2018-08-30 14:23:36 ERROR (MainThread) [frontend.js.latest.201808200] https://hass-maurizio.duckdns.org/local/state-element.js?v=90:1:1 Uncaught SyntaxError: Identifier 'StateElement' has already been declared
๐ฏ minimalistic approach
@wheat current 2018-08-30 14:25:41 ERROR (MainThread) [frontend.js.latest.201808200] https://hass-maurizio.duckdns.org/local/state-element.js?v=90:6:41 Uncaught TypeError: Cannot read property 'state' of undefined
.format
To format your text as code, enter three backticks on the first line, press Enter for a new line, paste your code, press Enter again for another new line, and lastly three more backticks. Here's an example:
```
code here
```
Click on the link to learn how to format: https://raw.githubusercontent.com/skalavala/HassBot/master/format.gif
@foggy tendon Cannot read property 'state' of undefined == It cannot read the state of the entity you supplied to it
ok solved and working... i was missing the picture-element card....
Hey guys, just wondering if there was a known issue where custom cards (like the monster card) donโt work on the iOS app, but work just fine via the web interface?
using safari on IOS ?
Custom components don't load on my IOS device?
This is because for IOS devices by default javascript served is es5. You can allow custom components to load by forcing javascript_version: latest in your configuration.yaml under frontend:.
Note: Enabling latest on IOS could cause automation and script editor to crash.
I must of missed that, thanks @buoyant skiff
https://pastebin.com/raw/FFw1Z94w << why isnt the card texr changing
text
it should be white
not everything is changing :S
@gritty swift themes are not really a #frontend-archived question. Better suited for #330944238910963714
Is it possible in lovelace to put stroked text? white text with black border
I tried text-shadow, but it had no effect
on a picture elements card
the card you're working with would have to allow text css
should be able to with picture elements
trying to overlay room temps on the image
it accepts style which is just a list of css properties to apply
I tried text-shadow in style, which I generated on http://owumaro.github.io/text-stroke-generator/
it had no effect, but also no errors
can you do it from dev-tools?
haven't tried it - let me check it out...
Where would I try it out? Template editor?
background: center / cover no-repeat url("/background.png") fixed <<< where is this /background.png? in the same directory as the config? if so its not working?
Ah - My bad... Thx!
@gritty swift you should be placing your images in you www folder. So this would be the physical path /config/www/background.png and then in your ui-lovelace.yaml you would reference with the path /local/background.png
Thank you!
And you need to restart homeassistant (once) after creating the www/ directory.
lovelace now looks amazing
How can I do '- type: weather-forecast' with dark sky? I don't have weather.? entity id
Just specify your entity to use for the card
Your dark sky sensor will need to have a forecast attribute
as ian said
NO!
NO!!!
weather-forecast doesn't work with sensors
owww burn
#doesntworklikethat
I pride myself on my ability to put out amazing burns
@meager grotto , @polar kelp is absolutely right though
and I'm sure he can help you with anything else after he's discharged from the burn-unit
setup darkskies then burn down the house and then do something else ๐
100 solution skill
#topminds
freaking yahoo weather api is down
that made my whole ui freakout
cause all the markdown sensors complains
when they arent found
I'll check it out
a good thing to have when wanting a forcast is the actual weather component setup to begin with
thats atleast something ive heard ๐
I'm wondering I have several google calendar, is there a custom lovelace card for it?
Well since the community website is down it's hard to find any information
do you have a github page?
nope search its on there somewhere
not new really but new to all the people that starting with lovelace and components now
is that something thats as a default component in ha?
no
I mean this: custom_updater:
card_urls:
i know what you meant
Not sure if it should be asked here ,or in #devs_mobile_apps-archived - Is there consideration for a long-tap-action, in lovelace. E.g. If I use a picture element card and tap on a room the light switches on, but if I long press I get more info that I can set the brightness value?
@halcyon mantle A long press should be generic and not ios specific. I've heard it mentioned before but have not heard if it is in the pipeline. Best to create a feature request on the actual repo: https://github.com/home-assistant/ui-schema/issues
do gifs work on picture entitities in lovelace?
Hey guys
So I've enabled love lace and have my ui lovelace.yaml but I'm not seeing any changes on my dashboard after reboot
append /lovelace to your URL
for now it runs side-by-side with the og UI
to make it the default, you can go to the
page and there's a link for to do that
Ahhh that would explain it thanks @signal pine
Sorry but can you explain append to URL for me
http://IP_OF_HASS:8123 is how you would normally access it. instead go to http://IP_OF_HASS:8123/lovelace
Wonderful thanks a billion
๐
i've seen a bunch of migration scripts - but anyone know if there is one to take an older custom-ui card and convert it to lovelace?
not for custom-ui
hi om going to try my first step on lovelace, the ins turction say create a new file
Create a new file <config>/ui-lovelace.yaml and add the following content. Adjust the entity names to entities that exist in your Home Assistant installation.
is <config> a folder i need to create? cause by default there is no config folder
Does anyone know if its possible to navigate deeper that just a page when using the "navigation_path"
for example on lovelace/2 I have two entries, one for my washer and one for a dryer.. If I have an icon/image on page zero and I click on the washer I would like to navigate to the washer section of lovelace/2
@fiery temple the ui-lovelace.yaml file sits in the same directory as your configuration.yaml or groups.yaml or etc.
this is the <config> dir
ah ok thanks you very much cause i just tried and got an error will try the root folder instead
its working now thanks
so <config> is a variable to /root folder of HA
not clearly documented ;0
๐
@plain torrent the washer... section? do you mean the info card of a specific entity?
@vapid field i'm not sure that it normally is the root folder
mine certainly is not
well the configuration.yaml is in the root folder of HA installation on windows
C:\Users\HTPC\AppData\Roaming.homeassistant
I guess he means something like page anchors
@signal pine - on the ui config I on /lovelace/2 I have two "- type: picture-elements" one for the dryer and one for the washer.
oh, i especially know nothing about installing on windows, heh @fiery temple sorry
@plain torrent please do not PM me without permission, please keep all support requests in the appropriate public channels
goddamn too many people with similar names
you can turn off pms for the server
going to shortly lol
@signal pine, my apologies.
does having wildcards for entity_id's require aa custom card or something?
'monster card'
for now that seems to be the case, yes
I cant pointer-events: none iframes?
bummer, thanks for the reply @wheat current though
Has anyone encountered this in their logs? I just did a fresh install yesterday and set everything according to docs but I am getting spammed in logs every 10 seconds (Yes, literally) with this error:
WS 22521086116976: Message incorrectly formatted: expected str for dictionary value @ data['api_password']. Got None
@wheat current any ideas?
yeah but its not lovelace related
so no idea why u posted it here
and please dont ping one user they are not your personal supportline
@buoyant skiff Thanks so much, you were incredibly helpful.
- If you have encountered the error, it would have been helpful to explain it rather than just be a dick.
- If I want to ping a friend and ask them about it, it is no concern of yours, so again, you can piss up a rope.
- I just did a fresh install for lovelace and enabled it so was unsure if that was a common thing specific to the new still beta UI, so yes, I asked in here on purpose.
Now, you have yourself a nice day. ๐ ๐
not being a dick saying read the topics and post right @split granite would agree
Tinkerer is away for 9h 7m 40s with a message :point_right: Off to help some jรถtnar with a goat problem
@buoyant skiff seeing as literally the only reference I found in my search BEFORE ASKING was this: https://discordapp.com/channels/330944238910963714/330944238910963714/425547546786791430
and it was never resolved.... yeah.
Anyhow, I figured out the issue>
Thanks for the time @frosty pelican
Turns out that running appdaemon with the new 77.2 release if you run docker causes HA to go full retard and spam logs every 5 seconds (yes literally) with the aforementioned error.
Hopefully someone else finds this useful. ๐
What's a jotnar and what does it have to do with a goat? My curiosity...
Since I was replying to you, I figured it was appropriate. @buoyant skiff
.thoughts @safe stag
@safe stag Please don't use the support channel to think out aloud. Go through the basic troubleshooting steps and then highlight the specific problem that you are facing. We don't have access to your system and it is hard for people to imagine what may be going on.
lol
since I explained it pretty clearly, I think I'm good.
anyhow, enjoy your day/night/whatever. ๐
@dense roost One of the types of Jotnar is a troll - I'll leave the exercise for identifying the link between trolls and goats up to you ๐
I forgot who asked for this: https://github.com/thomasloven/lovelace-long-press
@polar kelp - That was me - Thx! ๐คธ๐ป
Itโs kind of iffy still, as youโll notice.
just saw that - got it in my yaml file like this, but breaks the picture elements card - perhaps a syntax issue from my side```
resources:
- url: /local/long-press.js
type: js
And the picture element entry looks like this:```
- type: custom-long-press
child:
type: image
tap_action: toggle
entity: light.living_room
image: /local/images/floorplan/shapes/living_room.png
state_filter:
"off": opacity(50%)
"on": opacity(1%)
style:
top: 47%
left: 66%
width: 33%
Dedent the style section
style needs to be at the same level as child.
Tried to fix that, but couldnโt ๐ฆ
Now, I get an error on the ui with this code https://hastebin.com/bufaxituhe.bash
unknown element type, but when I change the -type to custom:long-press the error dissapears
If I press and hold on ios it requests to save image
haha - I have a meeting now, will test with other attributes afterwards and give you feedback... Thx for the effort
type icon works as expected
Hi all,
quick question, does anyone know why the glance card's title text does not align with the titles on other cards? I know this is nitpicky, but I can't be the only OCD one out here ๐
ding @buoyant skiff he might know if not ding @split granite
havent thought about it but if it does that all the time then feel free to file a bug report at the tracker
๐ see @buoyant skiff knows
@fallen mortar fixed in 0.77.2
For custom card developers that were relying on hass.config, it has been split up. hass.config.core is now available as hass.config and hass.config.services is now available as hass.services
pin that comment please ๐
thank you
Damn, beat me to it by 1 second ๐
Does anyone ever look at pinned messages? ๐
yepp
That change is happening in 0.77.2 btw, I didn't want to put a breaking change in it but some other fixes came in and couldn't bother splitting it all up
atleast in this channel
Bonus is that the frontend will be loading faster
Nobody may look at the pinned messages, but we can at least point people at them ๐
It's like documentation - some days you wonder why you bother writing any ๐
so that people can ignore it ๐
@half osprey Sweet! thanks!
is it correct that i need to add tabs in ui-lovelace? or is it also possible to use include for this
https://pastebin.com/HPTqegAs
dont wanne make 1 huge file
also my sensor.battery on line 29 doesnt show up
If the battery sensor doesn't show up, it probably means you have a typo
usually just comment with a # on the section im currently working on
its not a typo, it the exact same line as i use in the frontend
!include <filename> is replaced with the contents of lovelace/<filename>.
so do i use include commands or put all my files in lovelace dir?
sorry english is not my native lang
i have put my files in www/lovelace/*.yaml
when running th escript it says the files are not there
please check screenshot in lounge
.homeassistant/lovelace
not /.homeassistant/www/lovelace
Well I guess i gotta move to Lovelace this weekend .... @wheat current you got plenty of โ and/or ๐ป
๐
๐ค
I got something stronger than that ๐
ok we good then..... drink slow need ya awake
should not be a problem ๐
@undone egret you going from scratch or using a migration script?
not sure i got some done from script
I am just old school and been it for years with groups/views
Anyone able to help me figure out how to group switches in Lovelace? In the regular groups.yaml, I had 2 switches controlling outlets in my ktichen - I had them set as a group, so that in my main screen I would add the group so an existing view, so I had one button to control the outlets instead of individual ones. Now with lovelace, there is no "groups" that I can set to "view:no", so now I see both individual outlets listed on my page when I only want one to control them both
You still can use groups, even with lovelace.
@undone egret - I advise starting from scratch and rethinking your layout as you go
Lovelace was introduced to decouple the UI from groups so that you don't have to abuse groups to build the UI to your liking.
@wheat current got it, i ask thomas to change the example main.yaml cause a non dev i was thinking it was the folder www/lovelcae
*lovelace
this is his description: # Copy resources from anywhere to www/lovelace and include them
xD
thats for images probly
Hmm a conditional card can only has one card, when changing it to cards it gives an error
^whats your code look like?
@storm lion I was thinking the same thing would also increase the understanding of it
keeping anything from the old ui is really a waste of time
A few weeks ago i moved a friends layout over to it, just as he had it... he said "I thought you were moving me over to this lovelace new thing" - It looked nearly identical to his old setup- next day I started throwing in custom cards and all the new great base cards etc, he said the PAF (partner acceptance factor) went through the roof with how good everything can look in lovelace
the game changer for me is monster card and conditional cards
Which is not a card ๐
nope its abuse of all the functions which lovelace has to offer ๐
yep - now full screen on my tablet interface - Wife loves it
^want the top one!
thats the whole card
both parts
its just that huge ๐
the sun hours changes at night to moon sensor
just need to work out sunset and sunrise and after dark a bit more
and side by side is system overview
You may paste image walls at times @buoyant skiff - but damn is it eye candy
thats the one im activly working on
think those two work as all the info one needs at a glance
for getting a comprehensive overview of everything you need
@storm lion so thats why im not rushing it ๐
wanna get it right
That's almost magic mirror territory stuff
well i do have once of those
that i run the magicmirror software
but im really tempted to scrap it and do this instead
You've (fairly consistenly) got a good balance of white space and information going on - something too many people don't
^Agree with @split granite
yeah i hate having too much going on or just stacks of stats
wanna have my ui living and dynamic and changing
most of the icons swaps based on states etc
the jinja magic that comes into play ๐
been doing so much jinja lately so that users dont have to change that much just define sensors
@storm lion that is tablet worthy right ? PAF guaranteed