#frontend-archived

1 messages ยท Page 96 of 1

latent moss
#

No luck ๐Ÿ˜ฅ

mild veldt
#

any errors in yaml mode?

#

console or backend?

latent moss
polar kelp
#

@past falcon That long error message means you need to update card-tools.

latent moss
polar kelp
latent moss
#

yes

#

i would guess around two dozen weblink

polar kelp
#

Could you check them in /dev-state states to make sure they look ok?

fiery temple
#

@mild veldt the pr i have made all works nice by just changing the url

latent moss
#

there was an issue with it when i was on 0.84.6 lovelace

polar kelp
#

Seems fine. Would you mind trying to comment them all out and restarting again?

latent moss
#

i'll try that they're in a bunch of different files(packages) though. i think that might be the problem because yesterday when i used lovelace for the first time (v0.84.6) it looked like this https://i.imgur.com/3vWhKso.png mostly everything was fine but weblinks.

#

It at least worked though aside from that visual thing , since upgrading to 0.85.1 i just cannot get lovelacce to display at all

polar kelp
#

Hm... Perhaps it's not the links themselves, but rather the references to them in groups...

latent moss
#

i tried to uncomment the references as well, i'll take another look though in case i missed any

#

That didn't work either, there was only one reference i missed ( - weblink.router) and after commenting that out and restarting it's still the same issue where i can't access lovelace and just get the blank white page and circular spinner..

#

Actually i missed one more weblink reference in a group, after commenting that out, now that seems to have worked @polar kelp . Thank you! It's 100% related to weblinks.

polar kelp
#

I'd think it was because you referred to a weblink that doesn't exist. If you find out that's the reason, I'd love to know.

#

(obviosuly that last one didn't exist, because you had commented them all out)

latent moss
#

i'll have to look over all my files again, i believe all the weblinks i had were actively used though

#

also it put me on an automatically generated(?) view that looks very much like my /states/ layout, which i am not sure is correct since i have yaml mode in config and the ui-lovelace.yaml example file .. so not sure if it's still messed up somewhat

#

after looking into it that was the reason, i renamed my weblinks.yaml file to weblinks.yaml.disabled but there was just one groups reference to a weblink located in that disabled file. once i commented it out everything works. going to sleep soon but thank you very much for helping me out ๐Ÿ˜ƒ

polar kelp
#

Thanks. Then I know what to look into to fix the bug.

winter knoll
#

Anybody using mini-media-player? Yesterday it stopped working for me ๐Ÿ˜ฆ

polar kelp
#

It did for everyone. Get latest version from github.

winter knoll
#

From dev branch? Master branch is 25 days old

polar kelp
#

Oh. Seems that one wasn't updated yet.

winter knoll
#

That did the trick, thank you @polar kelp

polar kelp
#

I was able to reproduce the problem.

heavy cove
#

Does anyone know how to put a big clock up on lovelace?

polar kelp
heavy cove
#

hmm.. maybe... it would almost easily be able to wtire a PHP script and up it in a iframe

azure sandal
#

Hi all, I'm trying to use the Xiaomi vacuum card: https://sharethelove.io/picture-elements-cards/xiaomi-vacuum-card but when i past it into the lovelace windows (in the ui) i get the following message : YAML Error: YAMLException: end of the stream or a document separator is expected at line 15, column 1: โ€‹ - type: icon ^

#

i just copied it over, what could be wrong?

foggy tendon
#

Has something changed recently about button-card? I cannot see anymore cards with that

vapid field
#

How can I make first card bigger, to show weather radar, and the card under are also small. This is my problem: https://imgur.com/a/ZOfxZvx. Tried with panel: true, aspect ratio.

polar kelp
#

panel: true applies to the view

fallen warren
#

Hi , I have a little issue with my mqtt - My tasmota devices f**ed up retained messages ... Anyone here with an idea how to remove all retined messages in hassio MQTT ??

kind loom
#

Hello, does anyone know of a simple way to hide the main scrollbar? Thanks

mild veldt
#

@kind loom check the pinned message on sharethelove or google custom-compact-header

fallen warren
#

Oh, sorry... you are so right

kind loom
#

@mild veldt Thanks! this looks sweet

cedar girder
#

Hi. Anyone has noticed significant performance problems on their systems with Lovelace since 0.85?

#

it's running noticeably slower since i updated, especially when editing lovelace from GUI - literally every click takes 5 minutes to take an action... or crashes the browser

#

Safari cames up with "This website is using significant energy" whenever HA is opened

#

I never had problems with HA performance before

raven nacelle
#

No issues here. Have you tried alternate browsers? Try removing custom cards, if you are using any

cedar girder
#

tried both Safari and Chrome which is my preferred browser

#

is there a way to set loglevel to debug just for lovelace ?

polar kelp
#

The most debug information you can get from lovelace is through your browsers console.

#

What mode are you in? Auto/Storage/Yaml?

cedar girder
#

Storage

polar kelp
#

Hm... then it's a bit harder to debug...

#

Could you try renaming <config dir>/.storage/lovelace to <config dir>/.storage/lovelace.bak or something and see if the problems persist?

#

Maybe make a backup of it too, just to be safe.

cedar girder
#

i will, but wont that make whole my lovelace config disappear ?

polar kelp
#

It should bring you back to auto.

#

But when you rename the file back, all your modifications should be back.

#

Again, please make a backup

violet talon
#

anyone using the lovelace alarm card: is there a way to enter custom functions and have them run? like on a DSC panel entering *9 + code to enable "instant alarm" mode?

polar kelp
#

No

vapid field
#

hi, I|m new to the HA, got short question:
is the procedure of adding custom cards correct? what is missing?

  1. past "custom-card.js" to /www/ folder
  2. in "ui-lovelace.yaml" add at the beginning:
    resurces:
  • URL: /local/custom-cards.js
    type: js
  1. add card:
    type: "custom:custom-card"

I feel like I|m missing something

#

don't look at typos ๐Ÿ˜ƒ

dreamy flint
#

Whatever I change in ui-lovelace has no affect on the UI.. what can be the cause of this? I've tried forced refresh, but no luck

paper oxide
#

Sure you're in lovelace mode?

polar kelp
#

@vapid field Assuming you are in yaml mode and restarted hass after first creating www/ that should work. The browser log is your friend.

vapid field
#

@polar kelp so in theory I did all correct :/

dreamy flint
#

@paper oxide For sure

paper oxide
#

@dreamy flint Sorry, had to ask.

polar kelp
#

Also, as a general tip; when asking for help, type the code out exactly as you have it in your config. Or rather yet, copy paste it. Often the problem is something you have gotten blind to yourself, and if we get held up on typos and errors that are not even present in the actual code, well...

dreamy flint
#

@paper oxide Was worth a shot ๐Ÿ˜ƒ you never know

polar kelp
#

It's a fair question. That was my only idea too...

paper oxide
#

Are there any errors in the log?

#

Did you try a restart?

#

I don't expect much from the logs, regarding to lovelace

dreamy flint
#

The weird thing is that it says it's showing lovelace ui, but it's actually not..

vapid field
#

found the issue

#

yaml is case sensitive

#

must be url not URL

polar kelp
#

... which I didn't mention because you told us to ignore typos...

dreamy flint
#

@paper oxide I've deleted my ui-lovelace.yaml, but it still shows some old UI - even though the url says lovelace

polar kelp
#

"...It's actually not..." as in all your things are there? As in automatically put there? As if in auto mode?

#

... which is the default mode

paper oxide
#

@dreamy flint little confused, you removed your lovelace file but you expect to show it as lovelace?

dreamy flint
#

There are some entities there, but it's not my lovelace ui

polar kelp
#

If you click the three dots and select Configure UI, what does it say?

dreamy flint
#

It asks if I want to take control

polar kelp
#

You're in auto mode

dreamy flint
#

I guess that's something I missed in an update

polar kelp
paper oxide
#

@polar kelp Must be it

dreamy flint
#

Gonna try it now

polar kelp
#

@dreamy flint I see where the problem is. @paper oxide asked if you were in "lovelace" mode. Probably a typo for "yaml" mode.

paper oxide
#

Oh yes, i'm sorry, my mistake

#

thats what i meant

dreamy flint
#

I've become very hesitant to update anything, because every time I do something is broken

#

or changed

polar kelp
#

The big changes should be over with 0.59 as it seems now.

paper oxide
#

0.59?

polar kelp
#

Darn it! 0.86

paper oxide
#

ah, ok

polar kelp
#

I keep calling 0.85 0.58 for some reason...

paper oxide
#

it's was not so long ago ๐Ÿ˜‰

#

releases are piling up ๐Ÿ˜ƒ

polar kelp
dreamy flint
#

I know I know ๐Ÿ˜ƒ But updating anything requires time to read through posts on every add-on, to make sure something new isn't broken

#

I skipped that today and updated deCONZ.. aaaand it's broken

polar kelp
#

Really? I updated yesterday with no problems...

dreamy flint
#

Yea, something happened and now it's no longer responding on port 8080 but on 80 instead

paper oxide
#

Can i split my lovelace-ui in seperate files?

dreamy flint
#

lovelace is working again, thanks ๐Ÿ˜ƒ

paper oxide
#

@dreamy flint Do you use a generic piece of hardware for your zigbee?

#

Or do you use the manufacturers gateways?

polar kelp
#

deCONZ is most often used with a Conbee.

#

Also, yes, you can. !include filename

dreamy flint
#

@paper oxide Yea I use a zigbee usb-stick from Dresden Elektronik (I think that's the name)

paper oxide
#

@polar kelp How do i handle the syntax for the views? Is i want to hava a seperate file per view?

#

@dreamy flint Thanks

#

Do you know it works with zigbee2mqtt?

dreamy flint
#

I haven't tried, but I would think so. I mainly use Node-red for my automation

polar kelp
dreamy flint
#

Wohoo there's a deCONZ fix out already

paper oxide
#

@polar kelp Just stubmbled upon your post on the forum ๐Ÿ˜ƒ

polar kelp
#

That's turning into a rather large one...

paper oxide
#

It's simple

#

๐Ÿ˜ƒ

#

@dreamy flint whats the range for the conbee?

polar kelp
#

Realized I forgot to add browser-commander to the table of contents... fixed

#

One conbee reacher all the way through my house. About 20 meters or so with wooden walls. But every light turns into a repeater as well.

dreamy flint
#

@paper oxide Don't know the actual range yet, since the dongle is placed right in the middle of my apartment

paper oxide
#

@polar kelp I need 50 ๐Ÿ˜’

#

mmm, looking for a way to add an aditional antenna

dreamy flint
#

Not even z-wave will get you 50 meters

#

I think any zigbee device that plugs into mains, will act as a repeater

paper oxide
#

mmm, i planned to use simple battery-powered sensors

pallid kestrel
#

hello

polar kelp
#

Keep that to one channel if you must, @pallid kestrel. Prefereably #botspam

pallid kestrel
#

any body know home-assistant notification how to enable sound

latent moss
#

@polar kelp regarding the weblink bug fix from earlier, just curious, after 0.86 releases I can just uncomment them out and it should work? Or do I have to do anything extra? Thanks again for helping and fixing quickly.

#

*make them visible i mean... they are commented out at the moment

polar kelp
#

Should work with them not commented.

latent moss
#

Great

polar kelp
#

You'll even get a beautiful screaming yellow error message for the one that was bad.

#

Actually, you should be able to put all of the working ones back already.

latent moss
#

I had a whole bunch of those yellow errors heh, lovelace really helped me clean up my UI

#

i'll try that later after i get back from dinner, thanks

glad dust
#

Hey sorry if this is discussed/answered but can I still use customui with lovelace in storage mode?

summer eagle
#

Does anyone know how to make a camera preview back to a regular sized preview and not a badge style?
And the "Idle" next to it is redundant for cameras too

latent moss
#

@polar kelp just fyi i've now successfully restored most of my weblinks so far and in doing so, discovered exactly what caused that issue. Upgrading from 0.84.6 to 0.85.1 renamed certain entity_id slugs (my "weblink.hassio" got auto-renamed to "weblink.hass_io") and that single extra underscore the upgrade added broke the reference to it in a group, which then in turn broke the entire lovelace UI. All of the ones I am restoring and making visible are working / being converted just fine. ๐Ÿ˜ƒ

mild veldt
summer eagle
#

@mild veldt this works with live streams as well?

mild veldt
#

You referenced "Idle" so I assumed you were already using it

#

what are saying has "Idle" if not picture-entity?

summer eagle
#

@mild veldt played with the picture entity, works great. Thanks!

timid wigeon
#

@summer eagle Using a picture-entity for a live view of cam?

grim cairn
#

Is there any way to make "entity not available" disappear because I want the updater to show but it only appears when there is a new update of course and otherwise it leaves an ugly yellow text "entity not available" ?

gleaming lake
#

hi guys, i'm going crazy with a sonoff switch on homeassistant. i'm here because nothing found on google or community. i've the latest version of HA and in lovelace i can't turn on or off a sonoff device (light switch). all others sonoff switches r working fine. if i go to the dev tool, switch is working by change the status manually. sonoff updated with latest tasmota, doesn't resolve the issue. any help please?

placid geyser
#

@gleaming lake this is not a lovelace specific question, you may better ask that in #330944238910963714.

gleaming lake
#

already done...no answer ๐Ÿ˜„ so i decide to ask here, thanks anyway

tiny trail
#

@gleaming lake Your not trying to to use the light card with a switch by any chance?

polar kelp
#

@gleaming lake

#

You also didnโ€™t answer my question if it works in /states

gleaming lake
#

@tiny trail i'll try to explain better the issue:

  • click on the switch icon (glance picture card): it turn on, icon doesn't change state
  • click on the switch icon to turn off: nothing happen
    so...stuck in "on" state..or in off state. it depends
#

@polar kelp in few hour i'll try with /states (now i'm at work)

polar kelp
#

So the icon is stuck in the state you switch to? Does the light actually turn on/off? Does the icon switch state when you reload the page?

vapid field
#

hello everybody! just updated to 0.85.1 and would love to use lovelace for editing my views etc. sadly its reloading the whole page after a while and everything i edited is gone. i wrote this to githubissues too. is there any chance to stop this behaviour even by a dq hack?

polar kelp
#

You could switch to yaml mode... I guess... but that sounds a bit extreme.

gleaming lake
#

@polar kelp Yes the icon is stick in the state i switch. The light turn on but not off and viceversa. The icon state doesn't change if i reload

polar kelp
#

Ok. This will be a lot easier to debug when you actually have access to your interface.

#

@vapid field are you on a mobile device by any chance?

gleaming lake
#

I have remote access to the interface but can't see if light turn on

vapid field
#

@polar kelp im on a mac on a safari right now. why?

polar kelp
#

Does it change state permanently when you switch it in /states, then cesco?

#

Chris: because Iโ€™ve seen some relading behavior on ios...

vapid field
#

@polar kelp it happens on every device i own with every browser maybe (just checking this) even on ios with the app.

polar kelp
#

It could be a permission thing...

#

How are you running hass?

vapid field
#

on a raspi manually installed, no hassio, no dockerthingies...

polar kelp
#

Check that the user running hass can write to <conf dir>/.storage

vapid field
#

this is true. lemme check this twice

polar kelp
#

And .storage/lovelace specifically

gleaming lake
#

@polar kelp
Click on icon: turn on only if state is off, icon doesn't change. Then is stuck. To turn off i have to change the state from dev tools. Every time i click on icon it day "light turned on". This issue show only with one sonoff and one switch. Others work fine. So basically Yes, the state change is permanent

vapid field
#

yes, the user hass is running CAN access .storage as well as the lovelave

polar kelp
#

Then Iโ€™m out of ideas at the moment.

#

Cesco: I have no ide what you sre trying to say. You say the light turna on but not off, and also that it turn off but not on. I do not understand from what you said if it behaves the same in lovelace as in /states.

gleaming lake
#

๐Ÿ˜ญ i'll try again:

vapid field
#

editing using the ui seems to work fine, but after few seconds a reload kicks in who loads the whole front new. even the tab u was is is changed to the 1st one. time till reload from 15sec up to 2 mins.

polar kelp
#

Ah. I see. Does your browser log show anything?

#

Are you using custom plugins?

vapid field
#

donno where to get the log of safari, but if it may help: there r no warning etc.

polar kelp
#

Cesco: Iโ€™d guess yours is a hardware problem. Either the sonoff isnโ€™t getting the command, or it isnโ€™t sending the new state back to hass.

vapid field
#

no pluginns

gleaming lake
#

@polar kelp

  1. switch state is off
  2. click on icon: light turns on (message is "light on")
  3. icon doesn't change
  4. click another time to turn off
  5. nothing happen (message is "light on" again)
  6. to turn off the switch i have to set the state in the dev tools
polar kelp
#

Thank you. Now I understand.

vapid field
#

i tried to dig in to the js loadet by the browser, found (hopefully) the corresponding files to it and found out there a lot of timeout=120 settings into. is it possible that those have to do with it?

#

i changed that in one of the file to =1 just to see what will happen - but as expected: nothing

#

but to be honest i even didnt find out wich module will loadet after clicking on the 3 vertical dot (for editing mode)

gleaming lake
#

@polar kelp thank you Thomas. if was an hw problem, it shouldn't turn on or off in dev tools too, isn't it? i manage all sonoff with mqtt, but other devices are working

polar kelp
#

In /dev-state you can tell hss that โ€this is how it isโ€ regardless of wether thatโ€™s true or not, and hass wonโ€™t know any better until it gets the next update from the mqtt broker. Until then itโ€™ll assume you know.

burnt patrol
#

Hey I tried to get the tap_action: toggle working in an entities_filter card to no avail. Any ideas? I tried all kinds of formating but maybe I am missing something.. Saw that it should be tap_action:

kind shellBOT
burnt patrol
#
  • type: entity-filter
    title: What's On?
    show_header_toggle: true
    entities:
    - switch.siren
    state_filter:
    - "on"
    card:
    type: glance
    title: What's On?
    show_state: false
    tap_action:
    action: toggle
raven nacelle
#

@burnt patrol your tap_action indentation is incorrect. It should be for an entity

polar kelp
#

It should be for the card fรถr glance

raven nacelle
polar kelp
#

Am I wrong? Brb

#

I am wrong

burnt patrol
#

I tried this... - type: entity-filter
title: What's On?
show_header_toggle: true
entities:
- switch.siren
tap_action:
action: toggle

raven nacelle
#

.format @burnt patrol

kind shellBOT
#
:information_source:
Format Code:

@burnt patrol 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

polar kelp
#

Try```yaml

  • entity: switch.siren
    tap_action: ...
burnt patrol
#

Ill give that a shot

raven nacelle
#

oh...on the entity-filter card, we don't have tap_action

burnt patrol
#

oh ok got it. not wonder! was hoping to be able to quickly shut off lights using this card.

vapid field
#

@polar kelp do u see the problem?

polar kelp
#

No, sorry. Donโ€™t think I have any more ideas without a browser log

vapid field
#

k. how to i get these?

polar kelp
#

No idea for safari

vapid field
#

chrome, ff, safari... choose your weapon...

#

got all

polar kelp
#

@burnt patrol @raven nacelle entities should fall through to the card, so entities of state-filter have the same properties as for glance in this case.

#

Chrome then. Command+shift+j on mac

vapid field
#

k. gimme a min

#

could this be right? opens a window showing all downloads the past 2394875 years...

#

alt+cmd+j is the correct one. so lemme see...

#

[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
[Violation] Forced reflow while executing JavaScript took 34ms

#

this is all i got, and it comes from reloading the page... so no issues visible according to the problem.

winter wasp
#

anyone using the mini-media-player custom card? it seemed to stop working for me in the latest HA version

raven nacelle
#

Try changing the import to import { LitElement, html } from 'https://unpkg.com/@polymer/lit-element@0.6.3/lit-element.js?module';

#

@winter wasp

#

@polar kelp I just tried - type: entities title: Information show_header_toggle: false entities: - sensor.morning_commute - sensor.alok_to_home tap_action: action: call-service service: sensor.google_travel_sensor_update service_data: entity_id: sensor.alok_to_home

#

and it did not work

polar kelp
#

Error or just doesnโ€™t work?

raven nacelle
#

mapping values not allowed

#

and frontend did not show

#

I always thought tap_action was only supported on few cards

polar kelp
#

Wait. Type: entities?

raven nacelle
#

yes

#

wouldn't it be the same argument

polar kelp
#

Derek had a glance card

vapid field
#

@polar kelp kicked out of internet. seems that chrome doesnt make the reloads, i keep watching that. need to go now. thanks so far. cu

kind shellBOT
mild veldt
#

shut up, bot

#

@raven nacelle you service and service_data in your example need to be a part of tap_action

burnt patrol
#

Yes mine was a glance card

raven nacelle
#

@mild veldt - sensor.alok_to_home tap_action: action: call-service service: sensor.google_travel_sensor_update service_data: entity_id: sensor.alok_to_home?

#

doesn't work either

burnt patrol
#

It was actually both an entities filter and glance card.

raven nacelle
burnt patrol
#

@raven nacelle I will try that now

glossy birch
#

@mild veldt the @kind shell doesn't show mercy! watch out! ๐Ÿ˜›

vapid field
#

I'm new to this and try to use lovelace, but I dont understand how I get it to work. It say " Create a new file <config>/ui-lovelace.yaml and add the following content." but I dont know where to create the file.

raven nacelle
#

you don't have to use yaml mode. You can edit the config in the UI

#

the file is created in your config directory (same place where you have configuration.yaml). Also, note that you only need to use the file, if you are using yaml mode

vapid field
#

I did that, but I get 404: Not Found when I load the webpage

glossy birch
#

@vapid field are you using hassio? the <config> is the configuration directory - the directory that has the configuration.yaml file

winter wasp
raven nacelle
#

yeah and that may be a better long term fix

vapid field
#

Sorry, it was a stupid typo ๐Ÿ˜ณ I have problem with yalm and yaml ๐Ÿ˜œ

mild veldt
#

@glossy birch meh

glossy birch
#

grabs ๐Ÿฟ

tepid raft
#

has anyone written a script to almost reverse the love UI config into groups? with the old UI, my groups i built for the UI also paired nicely with alexa / google home, but i don't want to have to keep track of both groups and the new UI to keep them in sync

#

i might write a script if nobody has yet

burnt patrol
#

Ok got it working! that took some playing with!

#

``

glossy birch
#

@tepid raft i wrote it. It is on the web.

burnt patrol
#

- type: entity-filter entities: - entity: light.bath_main tap_action: action: toggle show_state: false state_filter: - "on" card: type: glance title: What's On? entities: - light.bath_main

glossy birch
burnt patrol
#

This allows me to have a list of lights that only show the lights currently on and with single click turn off and it dissapears

vapid field
#

hey all! I created file in config/www/card-tools.js, added: resources: - url: /local/card-tools.js type: js, to ui-lovelace.yaml, refrshed and restarte hassio, but still get error: custom element card dont exist. how do i install it correct?

tepid raft
#

nice!

#

@glossy birch which one is it? the only ones i see are converters for your old UI to lovelace

glossy birch
#

There is one on my name. If you scroll up in love lace a couple of weeks ago, I posted that code as well. It is not a very hard script. Extremely easy to write.

tepid raft
#

is it on your github?

glossy birch
#

I am on my mobile and hence canโ€™t share more details.

#

Let me share the link

tepid raft
#

np - thanks for the help

glossy birch
tepid raft
#

ah yeah, i think i used that when switching to lovelace, but now i kind of want the opposite of what that does

#

i want to be able to maintain my lovelace UI myself but then have a script create 'groups' based on the entitiy cards

blazing nacelle
glossy birch
#

What do@you do after creating groups?

vapid field
#

do i need install custom_updater to get working card-tool.js?

blazing nacelle
#

next = text

tepid raft
#

Well previously I used groups to generate my UI, but now that i'm using lovelace, I want to basically auto-generate groups based on my UI.

mild veldt
#

@tepid raft but why? what do you do with the groups?

tepid raft
#

when alexa / google home discovers my devices, it uses the groups to determine rooms without me having to set them up myself

#

so i can say 'alexa turn off downstairs' and all devices in the downstairs group will be turned off

mild veldt
#

once we have areas, that will be a thing of the past ๐Ÿ˜‰

tepid raft
#

ah nice

tepid raft
#

oooo

polar kelp
#

@sinful quest First of all, are you sure you're in auto and not storage mode?

sinful quest
#

I'm not even sure what you mean by that

polar kelp
#

If you click the three dots and choose UI Editor, what does it say?

#

*"Configure UI"

#

I have a translated version..

sinful quest
#

and then under raw?

#

if i click configure UI it just puts a pencil under everything

polar kelp
#

No warning message or anything first?

sinful quest
#

nope

polar kelp
#

Then you are already in "storage mode".

#

That means the UI is not automatically generated.

#

So what probably happened is that you got into storage mode in some earlier version, where the generator didn't honor the hidden: attribute, and since then all your entities are locked in.

sinful quest
#

ok

polar kelp
#

If you wish to go back to Auto mode, you can remove the file <config>/.storage/lovelace. That will remove any edits you made to the interface, but will also mean that new entities pop up.

#

And hidden ones won't.

sinful quest
#

ok i see

#

so after i move to storage mode, it no longer will update if I make changes to the configuartion.yaml?

polar kelp
#

Correct.

winter wasp
#

there's no way to use a different lovelace config per user yet, right?

sinful quest
#

in storage mode how do I edit the lovelace ui? there is .yaml somewhere or only through the lovelace ui editor?

polar kelp
#

Only through the UI editor

sinful quest
#

okay, i see where I went wrong. Many assumptions on my part.

#

1- i thought customize.yaml still fully influenced lovelace ui. Seems like only partially.

polar kelp
#

One point of lovelace is to decouple the front and backend.
Groups, for example, won't affect lovelace except for in the initial auto generation step.

sinful quest
#

wouldn't hidden be part of the front end?

polar kelp
#

There should be better ways to hide it from the frontend, such as... removing it from the frontend, or not adding it in the first place.

sinful quest
#

ok, i take it someones working on it. I know how to deal with it now. thank you very much for the help

calm rock
fringe prism
#

There is a weird issue with the published lit-element v0.6.5 on unpkg where it imports dependencies from localhost:5000, so anything depending on it is basically broken @calm rock

calm rock
#

ok, thanks for the info

vagrant ivy
#

Lovelace isn't loading at all for me. Where is the best place to look at logs? Nothing is showing on <ip>/dev-info

raven nacelle
#

was it working before?

vagrant ivy
#

On v0.84, yes.

raven nacelle
#

so it should work

#

the problem is probably elsewhere

vagrant ivy
#

I don't think there were any, either. That's why I'm stumped. Can't seem to find any errors, logs, or traces.

raven nacelle
#

so there is no frontend right now? How do you know HA is loaded?

vagrant ivy
#

It's the old front end

#

and everything "works"... meaning I can switch switches and see badge state changes.

raven nacelle
#

what do you see when you try the new LL?

vagrant ivy
#

The same.

raven nacelle
#

then what is not loading?

vagrant ivy
#

The LL interface.

raven nacelle
#

what does your URL read?

vagrant ivy
#

http://<ip>/lovelace/default_view

raven nacelle
#

that is lovelace

vagrant ivy
#

It most definately isn't.

wheat current
#

Are you using any custom cards with broken dependencies?

raven nacelle
#

well, based on the URL, it is MOST DEFINITELY lovelace

vagrant ivy
#

The widgets don't remotely match the config file.

raven nacelle
#

you are mostly in storage mode

#

please check the docs for the different modes....if you are using the yaml file, you need to be in YAML mode

vagrant ivy
#

hmm... okay.

#

@raven nacelle Really appreciate pointing the way for me.

#

That was it. When I redid the config file I left off the yaml mode tag.

charred frigate
#

to expand on the above - basically what I need is a card that could potentially display attribute values of an entity - if one exists

placid pivot
#

Might be able to do what you want (I haven't played with it that much)

charred frigate
#

@placid pivot thanks I have found that. TBH I'd rather go as stock as possible for my first iteration of Lovelace. But if it can't be helped and it all boils down to using custom for what I want to achieve I'll definitely use the monster-card as a last resort. ๐Ÿ˜€ ๐Ÿ˜€ ๐Ÿ˜€

mild veldt
#

@charred frigate as dev on core, I would 100% recommend using custom cards when they fit your needs. The devs who create them are awesome and put a lot of work into them.

charred frigate
#

Can help be requested here in this channel for custom cards? Or one must address the problem towards each separate GitHub?

#

Not for bugs of course. But for setup/usage issues

mild veldt
#

I don't know of one besides entity-attributes-card that would fit your bill though. picture-elements allows you to build really whatever you want though

#

you can ask those questions here

charred frigate
#

Thank you. I'll check it out. Looks really helpful. ๐Ÿ˜

vapid field
#

I have problem with iframe card, it is to big for mobile app. It shoes only a piece of weather radar, and I can not see the other parths. Screenshot: https://imgur.com/a/8fjA3vF. How can I make it smaller? Tried with aspect ratio, width, height.

karmic vessel
#

Welcome to iframes. That's why they never really took off in websites because without special coding on both ends can't really make it fit fit easily

polar kelp
#

Also they're terrible from a security standpoint.

vapid field
#

Aha thanks for explanation

fleet portal
#

I see lots of posts about custom cards not working since 0.85...
I saw there was supposedly some fix in 0.85.1 if understand correct...

#

but I can't seem to get mine to work

#

is there a particular fix instruction you recommend to follow (using custom button-card, media_player)
I moved from the yaml file to the stored version and it worked for a while - not sure if / how to set the links to the custom files now that its no longer in yaml file...)

polar kelp
#

#cardgate is unrelated to Home Assistant, really, and can't be fixed by updating hass. It was an external source of javascript packages which many cards use that unexpectedly stopped working somehow.
Make sure you have the latest version of the card, many have been updated to fix.
If yours doesn't, you can try looking at the source for the card for a line mentioning "unpkg" and a version number preceded by a ^. Remove the ^ and try again.
Some people experience a different problem (that seems somehow related, but I haven't broken it down yet) where the browser log says something about "localhost" and "forbidden" or something. That I have no fix for.
After any change, make sure to invalidate your cache by adding ?v=0.01 or something after the url in your resources section. If that's already there, just increment the number or change it randomly.

fringe prism
#

As I wrote last night @polar kelp, there is an issue with the unpkg published lit-element v 0.6.5 where it attempts to import a few dependencies of localhost:5000; This is probably a result of a broken build step on unpkgs part at some point.
You can see the problem in the source file here: https://unpkg.com/@polymer/lit-element@0.6.5/lit-element.js?module=

#

It is not present in later versions of lit-element on unpkg

#

Without having checked the changelog I bet you could bump your local custom cards unpkg import of lit-element to 0.7.0 to fix #cardgate

charred frigate
#

hello - lovelace beginner here I am trying to figure out how to use certain elements and more specifically the custom:monster-card in order to have my switches next to their respective battery levels in a card. But I am certainly getting lost somewhere along the way and misunderstanding certain concepts.

#

This is what I have so far:

      - type: custom:monster-card
        card:
          type: glance
        filter:
          include:
            - entity_id: switch.*
            - attributes: battery_level```
#

if anyone would be willing to throw some advice I'd appreciate it

#

Essentially I understand the concept of filtering but not how this element handles the concept of "what to show"

polar kelp
#

attributes filter is a bit special in that it requires an object. E.g.```yaml
include:

  • attributes:
    battery_level: "< 50"
    ``` will include all entities that has a battery_level attribute with a value less than 50.
charred frigate
#

Yes but will it display said attribute if it is not the state of the entity?

muted saddle
#

how do you add custom elements nowdays?

#

with the gui configurator

#

i get : Custom element doesn't exist: slider-entity-row.

#

i have downloaded the js file and put it in the correct place

potent fjord
#
  • type: entity-button
    entity: light.makuuhuone
    tap_action: toggle
#

why doesnt this work ? tapping doesnt do anything ?

muted saddle
#

@polar kelp you deserve a freaking medal for your lovelace cards ๐Ÿ˜„

polar kelp
#

You're too kind.

potent fjord
#

leothlon, you cant add resources line through GUI editor

muted saddle
#

@potent fjord yea i found it after a while ๐Ÿ˜ƒ thanks

potent fjord
#

i had same question few days a go ๐Ÿ˜„

muted saddle
#

thomas, if i have feature ideas, should i post that on github or?

potent fjord
#

but why doesnt my entity button work :/ i c it and all, it just doesnt work

muted saddle
#

i thought the raw editor was a one-time-thing for just when you go from yaml config to gui config

mild veldt
#

@potent fjord

- type: entity-button
  entity: light.makuuhuone
  tap_action: 
    action: toggle
potent fjord
#

thnx

muted saddle
#

@mild veldt i ment more for his custom lovelace elements

potent fjord
mild veldt
#

@muted saddle those would go to their respective repos

#

@potent fjord well someone should probably update that ๐Ÿ˜‰

potent fjord
#

ill do taht if i can

#

oh not github page

#

cant ๐Ÿ˜ƒ

polar kelp
#

@muted saddle An issue on github would work great

potent fjord
#

ah ok ๐Ÿ˜ƒ

mild veldt
#

you got this ๐Ÿ˜‰

potent fjord
#

im afraid to change it ๐Ÿ˜„

polar kelp
#

There's an entire team of reviewers who'll catch any errors you won't make anyway.

potent fjord
#

๐Ÿ˜ƒ my first pull ever

polar kelp
#

๐ŸŽ‰

potent fjord
#

that was faaaast ๐Ÿ˜ƒ

polar kelp
#

Make sure to sign the CLA, though.

#

Oh. It's done

#

My first PR went four weeks without a comment... so I took the chance to show how it's supposed to be done ๐Ÿ˜‰

hollow otter
#

So pardon my ignorance, but how can I switch back to Auto-gen after I've switched to the raw config editor?

#

I tried to just copy paste my old ui-lovelace.yaml into it, but it's not functioning right I'm guessing some syntax has changed as many of my tap-actions aren't working, so until I have the time to fix it I just want to switch back to Auto-Gen

prime flume
#

Any reason why a (not very new) mdi icon would not be available? Is the included iconset limited (can't find any docs, except those stating I should be able to use every icon from mdi available)

raven nacelle
#

yes, the MDI icons are not updated in realtime

wheat current
#

every icon that are in the version we are using* ๐Ÿ˜›

raven nacelle
#

dunno what is the latest version?

wheat current
#

3.0.92 I think

raven nacelle
#

3.3.92

wheat current
#

oh ๐Ÿ˜›

raven nacelle
#

we are still in dark ages ๐Ÿ˜‰

wheat current
#

๐Ÿคท The day I start touching UI it will be broken far beyond repair ๐Ÿคฃ
@mild veldt can confirm that

prime flume
#

Okay, I can create a PR this weekend. Want to get started on some frontend development again anyaway.

#

Lol, my local master branch is 1183 commits behind remote.... ๐Ÿ™ƒ

raven nacelle
#

Time to get back in the game

mild veldt
#

@wheat current can confirm. UIs hate him

violet talon
#

is there a way to display entities vertically?

#

I'd like my alarm sensors stacked next to my alarm keypad

#

they don't fit on a tablet screen when they're above the keypad

mild veldt
#

I don't know of anything besides the actual entities card, but you realize that the width would be the same for each card, right?

weak flume
#

is tap_action for picture-glance not working?

#

I would really like to have to long press or see more-info on my garage door opener

main meteor
#

Flickering screen? My screen appears reloading all the time and disappears and coming back. Sometimes itโ€™s even stays grey or white. Like every 10-30s. Bug?

mild veldt
#

@weak flume

#

~share

kind shellBOT
weak flume
#

chopped off the image code but you get the idea

#

do they all have to be formatted the same?

#

nope that doesnt do it either

lean wraith
#

custom

mild veldt
#

@lean wraith ?

charred frigate
#

@polar kelp are you available? ๐Ÿ˜ƒ

polar kelp
#

Yes

#

But on mobile. Expect typos.

charred frigate
#

oh nvm then you're proly out I'd hate to take that away from you!

#

We can talk once you're more comfortable

#

๐Ÿ˜‰

polar kelp
#

No itโ€™s fine. Iโ€™m sitting with my kids while they fall asleep.

charred frigate
#

well I've been meaning to understand how I can (perhaps) take advantage of the mostner-card in order to display an entity next to an attribute which is not its state

#

for example a switch that has a state of on/off to have its name next to it's battery_level

#

from your earlier message I understand how filtering works:

#
thomaslovenToday at 2:46 PM
attributes filter is a bit special in that it requires an object. E.g.
include:
  - attributes:
      battery_level: "< 50"
 will include all entities that has a battery_level attribute with a value less than 50.```
#

but not how I get it to show that value

weak flume
#

@mild veldt oh man i just saw the variables and assumed it was for entities. Ty for pointing that out.

polar kelp
#

Monster card canโ€™t do that.

mild veldt
#

@charred frigate your card inside monster-card would need to be able to do that, not monster-card

#

card-ception

polar kelp
#

I donโ€™t know if thereโ€™s any card that can... Iโ€™d make a template sensor instead.

mild veldt
charred frigate
#

yeah that was my second guess found that on the forums

#

@mild veldt yes I implemented that last night per your instructions , and it's good ... but doesn't look quite as I would like

mild veldt
#

could probably fork that and clean it up

charred frigate
#

reminds me of excel MS Excel ๐Ÿ˜›

mild veldt
#

really just need to remove the card shadow and table styling

#

maybe card-modder could do that?!?

polar kelp
#

@hollow otter Canโ€™t see that anyone answered you yet; if you remive <config>/.storage/kovelace youโ€™ll get back to auto mode.

mild veldt
#

and a restart

#

...wait...is that true...?

#

I'm questioning myself on that one

polar kelp
#

No restart needed

mild veldt
#

๐Ÿ‘

polar kelp
#

@mild veldt your name, while fabulous, is very hard to type for pinging. Is that why you chose it?

mild veldt
#

no, it's because i'm fabulous

polar kelp
#

Kind of like IIIdefconIII. Never know if itโ€™s a capital i or a small L at the start.

mild veldt
#

there, are you happy ?!? now I'm 1/2 as fabulous ๐Ÿ˜ข

polar kelp
#

Nooo! I didnโ€™t mean it!

#

Besides typng @tri or anything works as well. (Or just @, really, because it shows the most recently active people, and that almost always includes you...)

mild veldt
#

i've killed off one sparkle

#

or am I a sparkle pirate...? i'm not sure

weak flume
#

@mild veldt โค

fallen seal
#

been looking at the default lovelace file (now I've finally found it) and I've still absolutely zero idea how it results in 3 columns.
I going to use a custom card

vapid field
#

How do I display the value of a sensor and nothing else on a card? Can't get rid of the 'eye' symbol on the glance card...

polar kelp
#

Set the icon to mdi:doesnotexist or something, perhaps?

mild veldt
#

@fallen seal that is just how lovelace is rendered

#

what are you trying to accomplish?

main meteor
#

Is card-modder with issues in the latest 0.86 beta?

mild veldt
#

you'll need to be more specific than that

main meteor
#

Applying this CSS used to work in 0.85 but now after upgrade to 0.86 beta its not

#
              background-image: url("/local/cardbackK.png")
              background-repeat: no-repeat
              background-color: rgba(50,50,50,0.3)
              background-size: 100% 70px
              border-radius: 20px
#              border: solid 1px rgba(100,100,100,0.3)
              box-shadow: 3px 3px rgba(0,0,0,0.4)````
#

Just did an upgrade and no changes to the lovelace

polar kelp
#

Does none of it work or just some. What card are you trying to mod?

main meteor
#

None works except the std weather-forcast, there i get the CSS

#

Im modding the entity card

#

example:

vapid field
#

Hi all, I am trying to set up lovelace and have a beginners question. I turned it on in settings and my UI kind of changed. But I don't even have luvelace-ui.yaml. Does that mean that lovelace works with configuration.yaml or what? Am I going to stop using groups.yaml etc. when I completely switch to lovelace?

fallen seal
#

@mild veldt two columns. 1st will contain my alarm panel, second contains a glance card showing sensor status above another showing fire alarm status.

wheat current
#

Look at the stack cards

mild veldt
#

@vapid field it is auto-generated base on the entities you have and supplemented by groups.yaml

#

@fallen seal you'll want to use stacks as @wheat current said and set your view to display as a panel

fallen seal
#

@mild veldt , @wheat current sorted. Thanks for the pointers. with the view set as panel and the cards inside that I've got the exact layout I wanted for the security panel.
Ta

polar kelp
lapis oriole
#

@polar kelp ๐Ÿ‘๐Ÿ‘ Thanks!!

mild veldt
#

@polar kelp added the link to all my card repos ๐Ÿ˜‰

warm mulch
#

ok...challenging question:
I want to have 2 dashboards. One at the entrance, one in the living kitchen. Each on a different format (portrait by the door / landscape in the living area)
Can HA run 2 separate instances of Lovelace?

polar kelp
#

No

warm mulch
#

damn

polar kelp
#

That was easy. Next

mild veldt
#

that was an easy question, lol

warm mulch
#

alternatives?

polar kelp
#

Sure

warm mulch
#

๐Ÿ˜„

mild veldt
#

@warm mulch actually, you could pull this off with the same instance

warm mulch
#

make both dashboards landscape ๐Ÿ˜„

polar kelp
#

One alternative just off the top of my head is to use a kiosk plugin and do any navigation between pages you want using navigate with tap_action.

mild veldt
#

custom-compact-header can show/hide tabs based on the device

polar kelp
#

Oh right. It can do that.

#

That's even better

warm mulch
#

@polar kelp that was the plan.
@mild veldt excellent!!

#

I was thinking of running fully kiosk

#

wow. custom-compact-header is a cool thing.

mild veldt
#

indeed

warm mulch
#

hat's off to the dev responsible.

#

ok. I'm back to my yamls. Y'all have a nice day. ๐Ÿ˜ƒ

#

oh one other quick question... I tried brainstorming it earlier. Resulted in a brain fart.
Navigation via floorplan, to a 3d room view...
What's an intuitive nav back to 'home'?...without using an icon or (yuck) tabs?
Tabs are so very 2010.

raven nacelle
#

I always wondered....why do we have such a big header. That space can be better utilized

timid burrow
#

yes I use mayker's compact-custom-header to fix that

mild veldt
#

Need more UI devs ๐Ÿ˜ƒ

gentle tide
#

I really need more inspiration for floorplans created with the picture-elements card. I've spent far too much time on mine to not like it.

charred frigate
#

at last I was able to achieve what I needed (beta state) : https://imgur.com/a/9RY1P39
@mild veldt thanks for the advice and guidance and @polar kelp thanks for the monster-card (mostly) and your time as well! ๐Ÿ˜ƒ

raven nacelle
#

Why not simply use a glance card? May be I am missing something

charred frigate
#

yes all these things have a main state of on/off or open/close since they are either sensors or switches and from conversations I had in here , if I wanted to display the (conditional below < 45%) battery_level which is an attribute then there was no element that would do that stock or custom

#

so I had to create custom template sensors for all those devices as a solution I found on the forum suggested

#

and then the monster card really helped to display those sensors because it supports cool filtering

#

@raven nacelle ๐Ÿ˜ƒ

#

my only question(s) would be if a) I am missing something and b) if I am overburdaining the system which relies on a measly Rpi3 by implementing so many sensors

half osprey
timid burrow
#

That is sweet!! Awesome!

warm mulch
#

Can anyone tell me why my living room picture loads on the mac, but on my mobile it just shows a broken image link?
I tried logging out/in. No dice.

polar kelp
#

On the phone, go to the url of the image directly and see what happens.

warm mulch
#

hmm

#

can't load LL at all in Chrome on the phone

main meteor
#

Any update to the modder card in 0.86 beta?

polar kelp
#

Only that noone else (including me) don't seem to have any problems.

earnest elm
#

Hello, I am trying to get started with lovelace but the basic example is failing:

title: My Awesome Home
views:
    # View tab title.
  - title: Example
    cards:
        # The markdown card will render markdown text.
      - type: markdown
        title: Lovelace
        content: >
          Welcome to your **Lovelace UI**.
#

Error: Not passing an entity ID to a service to target all entities is deprecated. Use instead: entity_id: "all"

#

Nevermind these were old errors but still unable to load the lovelace UI

warm mulch
#

@polar kelp the living room pic loads, when I point the browser directly at it. But still no love when I try to navigate to the card which should show it

potent fjord
#

@earnest elm no tabs used there?

#

Or second title remove maybe?

#

Or not :)

earnest elm
#

found out issue, ๐Ÿ˜ฉ

#

I had whitespace in the beginning of file name, so it was never loaded

main meteor
#

@polar kelp Any idea in why its not working for me? I get the issue after upgrading wo any changes to the code on multiple devices.

main meteor
#

@polar kelp Did you try my code?

inner latch
#

Hello ! Good morning

dreamy flint
#

Good evening

inner latch
#

Good evening

prime nacelle
#

Is there an easy way to get the list of entities that Lovelace shows as unused?

potent fjord
#

is it possible with monster card ?

prime nacelle
#

I mean as text

warm mulch
#

hi guys.
Can anyone look at my picture-elements card code?
I'm trying to use a state_image, and it's not working out for me

edit: new question, same topic...
How can I overlay a picture (element) with the same dimensions as the container (picture-elements), without shifting position?

polar kelp
#

I can't even see the link

thin solstice
wheat current
#

.monster-card @slow wave

slow wave
#

ooooh @wheat current

wheat current
#

.monster_card

#

I give up...

slow wave
#

.mnotstre_racd

#

better ?

wheat current
#

.lmgtfy Lovelace monster card

slow wave
#

Not standards, so custom component still right ? ๐Ÿ˜„

wheat current
#

Yes

slow wave
#

I'll give it a crack

wheat current
#

I give up on commands

thin solstice
#

~lmgtfy lovelace monster card

#

Might need the @ also. At least that's the way it looks in #botspam

wheat current
#

Not needed, the bot is offline ATM

thin solstice
#

Bad bot

wheat current
#

I blame windows updates...

#

@glossy birch ^^

tribal cosmos
#

is there a way in the lovelace ui to just make a card awlays include all automations? (dynamic)

slow wave
#

@tribal cosmos that sounds like my almost exact question just a few minutes ago ๐Ÿ˜„

tribal cosmos
#

@slow wave hold on while i face palm a minute

#

i need to learn to scroll, haha

#

yeah, exactly

glossy birch
#

Bot down?

slow wave
#

@wheat current Any idea if the shopping list card might be integrated with wunderlist at some point ?

wheat current
#

I don't, @mild veldt might if he is online ๐Ÿ˜‰

mild veldt
#

@slow wave not until the backend is refactored to have a domain for tasks

slow wave
#

@mild veldt thanks! I was hoping someone would make a frontend to wunderlist, but that might come as a custom component before the shopping list then ๐Ÿ˜„

mild veldt
#

Does Wunderlist component have services to add/remove items?

slow wave
#

@mild veldt not sure, just saw wunderlist was added recently

tribal cosmos
#

ok, so i have to change/add something to get monster_card to work?

mild veldt
slow wave
#

@mild veldt that would be good enough for me though, as my wife could add stuff on the fridge tablet that I can read on my phone ๐Ÿ˜„

mild veldt
#

I have dreams of moving task lists outside calendar domain and standardizing their options, bit that's a ways off

#

@slow wave I would take the existing shopping list card I made in core and refactor it to call your services instead of the websocket commands it does now

tribal cosmos
#

woo! monster-card is working

mild veldt
#

On this note; what is holding you back from using the internal lists?

thin solstice
#

Was going to give you a link @tribal cosmos, but I guess you figured it out. ๐Ÿ˜

mild veldt
#

As I'm working multiple list support right now

tribal cosmos
#

yup. thanks all the same

slow wave
#

@mild veldt I would like to be able to continue to use wunderlist as that is what we are currently using, so that was why I was wondering ๐Ÿ˜„

mild veldt
#

I'm asking, what features would make the HA list compete with Wunderlist for you?

slow wave
#

@mild veldt That I was able to reach it from wherever I am without exposing HA to the web atm, currently HA is running only on the LAN

mild veldt
#

So possibly via nabu casa?

slow wave
#

@mild veldt indeed, that would be interesting

mild veldt
#

Might lend itself to GA / Alexa integration as well

slow wave
#

@mild veldt that would be fricking awesome actually, I just got a google mini and would love to be able to say "google, remind me to buy cucumbers

#

and get it on the fridge and in a list that I could reach from my phone while on the go

#

@tribal cosmos what does your code look like ? my monster-card won't work ๐Ÿ˜„

tribal cosmos
#

what error do you get?

#

or is it just a blank page?

slow wave
#

oh, I see the error it's triggering on is the custom component itself

tribal cosmos
#

looks like a typo of ? instead of > ?

#

nvm, i'm dumb... no <> tags in yaml

#

lol

slow wave
#

yeah, I don't get what it triggering on ๐Ÿ˜„

#

fixed it...

#

it was my indentations

#

as always

#

๐Ÿ˜„

tribal cosmos
#

what do you use to edit yaml files?

#

i absolutely love using vscode, it helps a lot with indentation, too (but won't stop me from being an idiot still if i want to)

placid pivot
#

notepad++

tribal cosmos
#

that was my goto for a long time

#

you should honestly give vscode a chance, much more robust

dreamy flint
#

+1 for visual studio

pearl ridge
#

vscode is quite amazing, especially once you start integrating it towards gitor other platforms ๐Ÿ˜‰ And now that they actually got multiple "projects" or root folders available, it makes it even better. Just need to get the way to do it a little better, and they will be better on that part than most other editors ๐Ÿ˜„

#

And hey ^^

tribal cosmos
#

so, i love lovelace, but sometimes still want to glance at /states real quick. I was trying to make it a tab under lovelace using iframes, but it is just 1 column and a lot to scroll through. is there an easier way?

#

and aspect_ratio only seems to grow the iframe card vertically

violet talon
#

Is it too late to give a shout out for vim as a yaml editor?

potent fjord
#

can someone explain what the digits added after url means ? (:7:1) /local/custom-weather-card-chart.js:7:1 Uncaught SyntaxError: Unexpected token <

#

is syntaxerror in that js file or in my config ?

polar kelp
#

Line number and column.

potent fjord
#

aaah ok thnx

potent fjord
#

right, thnx ๐Ÿ˜ƒ

#

hmm .. i dont see the problem, i used git to clone files, so i presume they are raw

#

aha, it cant find icons ..

#

where should man talk about custom plugins ?

#

what would be the room for it ๐Ÿ˜ƒ

polar kelp
#

This

potent fjord
#

heh no, im such a noob ๐Ÿ˜ƒ

tight finch
#

does anyone know how to have one panel with one card auto adjust the size of the card based on both width and height?

#

basically like panel: true

polar kelp
#

Can't. The best you can do is set aspect ratio on some cards.

tight finch
#

but taking into consideration max of both

polar kelp
#

The height of a browser window has always been hard to determine for some reason.

tight finch
#

ugh

#

i have a floor plan that never fits the screen... it's either that:

#

wide... and then it scrolss down

#

or if I don't use panel: true, it uses 25% of the screen (pic size 1000 px)

polar kelp
#

Yeah. Best you can do is adapt the aspect ratio of the image you use to fit the screen you wish to display it on.

tight finch
#

ok... thanks a lot...

polar kelp
#

sorry

#

I know your pain

tight finch
#

especially if it's a floor plan you've been crafting for few days ๐Ÿ˜ƒ

polar kelp
#

hm... perhaps that could be solveable with a plugin...

full schooner
#

Hi, I'm trying to use custom:button-card to invoke service_call

#

I'm trying to pass service_data, but call always failed and I don't see anything in the log

#

e.g.

#
  • entity: fan.office_fan
    type: "custom:button-card"
    name: "Fan - Med"
    tap_action:
    action: call-service
    service: fan.turn_on
    service_data:
    - entity_id: fan.office_fan
    - speed: medium
polar kelp
#

The one by kuuji? It has completely different syntax. Check the examples on github.

full schooner
#

yes kuuji

#

hmm

#

let me look

calm rock
#

hi , after updating hassio to 085.1 from 83 , my lovelace screens have changed, some are missing, and others with errors , should i go back to my snapshot and do something else before the update to 0.85 ?, tks

full schooner
#

@polar kelp following the example of the volume I'm getting Entity Not found

polar kelp
#

That's progress

#

@calm rock That update would put you in auto mode. If you wish to use your old configuration you need to manually activate yaml mode.

#

Or copy it into the gui editor

calm rock
#

@polar kelp , ok if i do manual from the top right menu , nothing changed, prob, i need to copy

#

will try that , tks

full schooner
#

hmm, it seem like my problem was it was in glance

polar kelp
#

Yaml mode is activated in configure.yaml

full schooner
#

@polar kelp , thanks you solved my problem ๐Ÿ˜€

calm rock
#

@polar kelp , any place or on the homeassistant section ?

polar kelp
calm rock
#

yes i red that, but is not specific where, so i guess any place should do . .

polar kelp
#

yes

calm rock
#

@polar kelp ,tks, this version also seams to have changes on mqtt lights ( platform not found message ?ยฟ) , so need to dig into it , as it is not allowing me to restart .

calm rock
#

@polar kelp , all working fine now, thankyou

polar kelp
#

Great!

calm rock
#

i try not to be far behind the latest version , as then i know is not easy to catch breaking changes , but sometimes, cant ..

fickle oracle
#

Hi, is it possible to add a custom card when we are in UI mode ? I mean keep the ability to modify the UI directly from the interface and using custom cards at the same time ?

#

Or is it absolutly necessary to swith in yaml mode to use custom cards ?

mild veldt
#

@fickle oracle use raw editor on the UI to add it to your resources

modest coral
#

Getting a strange issue after making the switch to Lovelace! Anyone got any idea what might be causing this blank icon to show? https://imgur.com/a/yWbrKqS

#

Okay everyone ignore me, it was much easier than I thought ๐Ÿ˜‚

fickle oracle
#

@mild veldt But the syntax is different from yaml isn't it ?

mild veldt
#

No

#

It's yaml

fickle oracle
#

mhhh OK, I understand, I initially edit the file "config\.storage\lovelace" with my text editor.... So we have to use only the raw editor from the UI...

mild veldt
#

general rule of thumb is to never edit files in .storage directly

#

yes, raw editor. which will hopefully become more feature rich over time

fickle oracle
#

Nice.
May be in the future we could be able to add custom card directly from the UI like we do for the standard cards configuration ?

#

dreaming about the future :D

prime umbra
#

you can add custom cards from UI

mild veldt
#

@fickle oracle I don't get it...I just explained to you that you don't have to leave the UI to do this

fickle oracle
#

I mean without editing the yaml : you put the custom card in a directory (a kind of repository for custom cards) , then all the custom cards are listed directly in the UI , just like the default cards

mild veldt
#

such functionality is planned

fickle oracle
#

I was a little disappointed for my first use of the lovelace UI (not in yaml mode) but with some explanation I see that everything still evolve in the right way , thank you ๐Ÿ˜ƒ

mild veldt
#

๐Ÿคท

cedar girder
#

I remember that with the old system i was able to use Custom UI to colour entities depending on their state, is this also possible with lovelace ?

#

for example, ive got "entities" list with battery status of all my zwave devices, i would like ones with low battery to be red

#

is it feasible in lovelace?

vapid field
#

hello all,
I would like to displaz entitys name on the picture-element card

#

cant find it in gooogle

#

can anyone help me with this?

muted saddle
#

If i'm looking to put some cheap 7" tablets on the walls, is ha dashboard still the best way to go? I want different layouts in different places, so if i'd go with lovelace id have to create an extra view for each display?
Or can you somehow make a view show different things based on what device is watching it?

polar kelp
#

Making different views is probably easier.

#

... I should add device id to state-switch-card...

#

Ask again tomorrow!

cobalt oar
#

Hi there,
I inadvertently hit the "configure" button.
How can I go back to the previous auto config ?

muted saddle
#

@polar kelp its just if i have like 5-7 wallpanels i'd rather nog have that manny views in my lovelace :/
Damn i need to get better at creating gui stuff :P

polar kelp
#

@cobalt oar delete <config dir>/.storage/lovelace

cobalt oar
#

@polar kelp thanks ! Sorry I can't find it by myself ;-)

polar kelp
#

Itโ€™s not obvious or even documented. Thereโ€™s hopefully a gui method of going back to auto coming in the next release.

fringe prism
#

For those of you maintaining custom cards and publish a tracker.json for the cards, I created a small utility to automate the tracker.json file. I mostly extracted what I kept as a script in my simple-thermostat package and published it as a generic package that you can easily configure. Its rough around the edges, only supports stuff hosted on github and requires you to use a package.json, but after setting this up with tooling for release management it becomes a lot easier to maintain your cards as you create new versions.

https://github.com/nervetattoo/tracker-json

crimson fable
#

whats the best way to have some overview with some large things you can click on to have some kind of drill-down?

#

those tabs on top to switch between pages don't work very well :/

polar kelp
#

picture with tap_action set to navigate so you get into a more detailed view

crimson fable
#

uuh yes thats what i'm looking for

crimson fable
#

how can I integrate the navigation action into my custom lovelace card?

crimson fable
#

oh its just using the history api

#

will lovelace continue to be avaliable at /lovelace/foo ?

split granite
#

Yes

signal bay
#

Hey guys, on theme change, my first three elements on my home page don't tend to switch themes

#

Even with backend-selected on. Refreshing the page, or navigating between tabs changes it, but it otherwise won't happen automatically

#

It's like the div#columns doesn't update for some reason

warm mulch
#

I've got a question for you guys...
Implementing dark-sky-weather-card, in the console, I get:
"dark-sky-weather-card.js?v=7.1:69 Uncaught (in promise) TypeError: Cannot read property 'state' of undefined at html.forecast.map.daily (dark-sky-weather-card.js?v=7.1:69)"

The HA log is a bit less verbose, with:
"http://192.168.178.28:8123/lovelace/0:0:0 Uncaught "

Any pointers?

crimson fable
#

I'm experiencing slowdowns using lovelace on my phone

#

it takes almost a full second to navigate to another view

mild veldt
#

@warm mulch do you properly have the dark_sky component setup?

warm mulch
#

I hope so...I did a search here in the chat and saw that you asked that question on Wednesday @2:43 when someone else asked about darksky

mild veldt
#

๐Ÿคฃ

warm mulch
#

I have ds sensors declared in my config. They output correctly when I view entities

#

it seems to be the card itself.
But how would I have gone about setting up the ds component, if I'd done it correctly?

mild veldt
#

you need the weather component, not the sensor

warm mulch
#

shiz

#

you should teach that one to the bot...on mention of darksky, dark sky, dark_sky, dark_skies, or any other variant thereof:
"Do you properly have the dark_sky component setup?"

potent fjord
#

is there examples somwhere how to use css with picture-entity card ?

#

would like to round edges, change text colors and icon etc

warm mulch
#

@mild veldt I'm moving along.... now the error is in 228

Uncaught (in promise) TypeError: Cannot read property 'state' of undefined at HTMLElement.get current [as current] (dark-sky-weather-card.js?v=7.1:228)

#

this isn't a card that works solely with hass.io, is it? If so, then I've identified the issue.

#

I ask because calls that begin with "this._hass..." seem to be dumping. "this" indeed contains no defined attribute for "hass"

mild veldt
#

There is no such thing as hassio specific components

warm mulch
#

ok...then I'm still stumped.

potent fjord
#

should custom-card-modder work with picture-entity card ?

#
  • type: custom:card-modder
    style:
    border-radius: 20px
    border: solid 1px rgba(100,100,100,0.3)
    color: "#999999"
    box-shadow: 3px 3px rgba(0,0,0,0.4)
    card:
    type: picture-entity
    entity: group.autokatos_valaistus
    image: /local/carport.jpg
    tap_action:
    action: toggle
#

cant see why this aint working :/

#

while parsing a block mapping
in "/home/homeassistant/.homeassistant/ui-lovelace.yaml", line 47, column 7
expected <block end>, but found '-'
in "/home/homeassistant/.homeassistant/ui-lovelace.yaml", line 68, column 7

split granite
#

Neither can we, because you forgot to format it ๐Ÿ˜‰

#

~format @potent fjord

kind shellBOT
#
:information_source:
Format Code:

@potent fjord 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

potent fjord
#

ah sry

#
    - type: custom:card-modder
      style:
        border-radius: 20px
        border: solid 1px rgba(100,100,100,0.3)
        color: "#999999"
        box-shadow: 3px 3px rgba(0,0,0,0.4)
      card:
        type: picture-entity
        entity: group.autokatos_valaistus
        image: /local/carport.jpg
        tap_action:
          action: toggle
split granite
#

Is that first line matching the indent in your config, if not please edit and fix

potent fjord
#

yeah, pasted wrong

#

ยดยดยด

#

bummer ๐Ÿ˜„

split granite
#

~edit

kind shellBOT
split granite
#

Also, what lines match lines 47 and 68?

potent fjord
#

line 68 is allready next cards type: line

#

line 47 is the first line of the code i pasted

split granite
#

That suggests that the problem is bigger than that section then

#

Can you share the whole config

#

~share

kind shellBOT
potent fjord
#

sure

#

like this ? never done this before

split granite
#

Like that

#

Lines 19 onwards, the indenting is wrong

#

They should line up with the indenting for line 7

potent fjord
#

ah i c it now

#

works now, tyvm ๐Ÿ˜ƒ @split granite

polar kelp
muted saddle
#

Holy shit thats amazing!

#

Definetly gonna check that out!

#

Any info on how we see what browser id a certain device have?

polar kelp
#

Read the very last line

#

(not the code sample)

#

Is it understandable, or could I make it clearer?

karmic vessel
#

thats awesome!

#

I've been wishing for an easy way to show/hide stuff based on user, i've not given family access to the panel yet because i don't want them messing with everything

potent fjord
#

@polar kelp can you change text color with card-modder ?

polar kelp
#

Most often, yes.

#

Not all texts, and not on all custom cards.

potent fjord
#

been trying to find how to do it, no luck. Trying to change picture-entity card

#

link in github card-modder to ha-styles.js doesnt lead to anything

polar kelp
#

That's one exception. The text color there can't be changed.

potent fjord
#

oh ok, good to know so i wont spend another 3hours ๐Ÿ˜„

#

been learning a lot tho, not wasted time

polar kelp
#

I'll change the link. Thanks!

potent fjord
#

same goes for official docs in picture-entity page

polar kelp
#

I'll fix that too then.

potent fjord
#

๐Ÿ˜ƒ would have done that myself but i dont know where to point it

polar kelp
#

Change .js to .ts

#

You mean on the fronted docs page, right? Or is there a link on the picture-entity page too?

potent fjord
#

yes sry, mixed those

muted saddle
#

@polar kelp i get error "YAML Error: TypeError: Cannot read property 'startsWith' of undefined" when i try your

- type: custom:state-switch
  entity: browser
  states:
    '9c2aaf6f-ed26e3c1':
      type: markdown
      content: >
        Desktop
    'c8a4981c-d69c5e3c':
      type: markdown
      content: >
        Mobile
muted saddle
#

oh and btw, i have card-tools installed

polar kelp
#

Do you have anything after that which could be misinterpreted as the next state?

muted saddle
#

nop, i created a new card, and in the raw i just pasted that

polar kelp
#

Then you shouldn't have the dash, should you?

#

(just guessing)

muted saddle
#

ofc not ๐Ÿ˜› early morning brain.. thanks

#

now i could get my browser id, but when i changed your demo id to my real id the card is empty :S

#

wierdly if i have some random states and no default i get my browser id shown, if i use that as a state without default i get enpty card, so it can match it correct, but does not show what it should

polar kelp
#

Empty card as in "nothing" or empty card as in "a white box"?

muted saddle
#

my broser id is 3de426a8-a239b862
but if i do

type: 'custom:state-switch'
entity: browser
states:
  3de426a8-a239b862:
    type: markdown
    content: pc

i get empty card

#

nothing,

#

i dont see the card at all

polar kelp
#

Yeah.. that's my fault. A moment

#

Try the new version now.

muted saddle
#

same thing, i dont need to restart homeassistant right? just use ?v=x.x and then change this number for every new version right?

#

oh wait, now it worked

robust barn
#

Hi whats the way to put image behind "weblink" -
type: entities
title: WEB ืกืคื•ื˜ื™ืคื™ื™
entities:
- type: weblink
name: WEB ืกืคื•ื˜ื™ืคื™ื™
icon: mdi:link
url: https://open.spotify.com/browse/featured

viral sorrel
#

is there any way to make the lovelace yaml more manageable? I have a lot of difficulty finding what I'm looking for in mine :/

polar kelp
#

The entire family of !include functions work.

#

There's also node anchors and lovelace-gen, which lets you use jinja to simplify repetitive tasks.

viral sorrel
#

for the lovelace config? I thought that was specifically unavailable? Or maybe I misunderstood

polar kelp
#

Due to an awesome simple idea from Frenck which pretty much solved every problem in the world, they were put back.

#

And there to stay

viral sorrel
#

Frenck just keeps on giving ๐Ÿ˜›

#

is there a discussion of this with an example? not really sure what it would look like in practice for the lovelace yaml file.. I was thinking of splitting the views into seperate files

viral sorrel
#

that is brilliant! thanks.. wow.. there are a lot of resources there ๐Ÿ˜›

#

how old is this feature? It needs to be mentioned on the podcast

foggy tendon
#

Any news about circle-sensor-card not anymore working? Where to get a new working release?

viral sorrel
#

is there a way to use monster card to only show binary sensors that have been triggered in the last 10 minutes?

placid pivot
#

@foggy tendon go into the code and fix it. The unpkg line remove the ^

#

Question about ipanel if I put it to an internal ip would that still work when I view HA from an external IP (want to put my data graphs in ha but don't want to Port forward)

#

I put in an issue with the fix on the circle sensor github

foggy tendon
#

@placid pivot already did it but the card still doesn't work also after many clear cache

placid pivot
#

Where you define the resource add/update the v=x

foggy tendon
#

Actually I have v=1.2.0

placid pivot
#

Yeah just update that so your browser thinks there is a new version and doesn't cache

foggy tendon
#

What I must put to update that?

placid pivot
#

Just change it to v=1.2.1

#

Then your browser will see it's not the same and get the new one

foggy tendon
#

Ok I think already did it.. i put 2.2.0 but always not working

#

BTW I'll try again

vapid field
raven nacelle
#

no, we don't have a color picker card

#

yet

jolly shale
#

Hi all, there is a way to put 33 gauge charts (batteries and miflora) in a little card? In this moment I've all of them in a page but it would be usefully for me to see them together, not scrolling page.

vapid field
#

@raven nacelle So what's the best way to input a hex value and send it to my ESP?

#

In lovelace

raven nacelle
vapid field
#

I want to have a way to change a color from my dashboard

brave raven
#

guys, i would really love it if anyone would help, I am trying to add a Picture entity with a dynamic picture that changes once awhile, the image is a html link taken from an attribute

#

if possible how can I write that in lovelace for it to change automatically as soon as the html in the Entity changes?

raven nacelle
karmic vessel
#

hmmm where can i edit the integrations zone at?

#

nvm the file haha

#

where is the home zone radius defined?

brave raven
#

No :( state won't work, you see i have a twitch sensor which gets me the streamers info whether they are streaming or not, it also gets their image and post it in a html form. I would like to show this streamer as a picture entity with their picture, but sometimes they change their picture and so the html will change

mild veldt
karmic vessel
#

Haha I didn't read far enough

#

Ok well I'll do that

karmic vessel
#

Can't override the default from the UI eh? Has to be done though a file

#

Totally didn't realize I was in the Lovelace channel haha. Sorry guys rofl

brave raven
#

well XD i am still stuck if anyone could help

mild veldt
#

@brave raven my twitch badges have pictures. Have you tried state-icon?

brave raven
#

i am not sure exactly what you mean by badges but i think yes, So the thing is the twitch entity is perfect but i want to display the twitch entity as a Picture element where the huge picture is the streamer's profile picture (or the stream if they are streaming) while the details displays their name and "streaming"

#

so if i used {{ states.sensor.STREAMERNAME.attributes.entity_picture }} it outputs the html for their profile picture but Entity picture doesn't like that ๐Ÿ˜ฆ .

strange finch
vapid field
#

hi, today I updated to 0.86.0b0 and some components are broken such as:

local/custom-lovelace/card-modder.js?v=1c480b:63:0 NotSupportedError: Operation is not supported

mortal cape
#

I don't know if it would change things but there's an 0b1

#

0b2 is on the way

vapid field
#

I am using hassio not seeing those yet

#

this worked on latest 0.85

mortal cape
#

hassio ha up --version=0.86.0b1

vapid field
#

not sure how to do that from ubuntu

#

sudo docker homeassistant ...but then I have no hassio command

mortal cape
#

the custom cli commands...you need one of the ssh addons or the ide addon

vapid field
#

ok

foggy tendon
#

Is the gauge card moddable by card-modder?

polar kelp
#

Not at the moment. But that should be fixed in 0.86.

foggy tendon
#

๐Ÿ‘Œ

mortal cape
#

@polar kelp you have a card that changes its background image?

polar kelp
#

Yes.

#

Well... depends what you mean. I have a demo with one, but I don't use it in my setup...

mortal cape
#

I was just trying to see how that was done and if it could be applied to background:

#

Per view

#

@polar kelp found it...or the card modder...close enough

magic walrus
#

Hi! Is there a way to force lovelace through a yaml config?

polar kelp
#

You mean use yaml instead of the gui editor?

magic walrus
#

No I love the GUI editor! The cookie(i guess) with the preference doesn't get stored on my browser, so every time I login again I get the old UI

#

No hass bug; It has something to do with my browser; I use RoyalTSX to manage HASS.

polar kelp
#

It uses Local Storage.

magic walrus
#

ahh okay

#

So I guess I'll have to wait until it works in RoyalTSX then. no problemo!

polar kelp
#

However, from the next release Lovelace will be the default interface.

magic walrus
#

Awesome! ๐Ÿค“ ๐Ÿค—

fiery temple
#

im not sure, people saying @secrets on lovelace is only working in yaml mode, but i dont use yaml mode and in my radarr upcoming media card i have !secret defined in the yaml, and the custom cards just seems to work

#

what does this mean, i still use yaml mode somehow, while its not in configuration.yaml ? i edit cards with the new storage method

#

@polar kelp maybe you have a answer on this cause you said it would only work in yaml mode ๐Ÿ˜ƒ

mild veldt
#

@fiery temple that's not Lovelace

fiery temple
#

yes it is

mild veldt
#

That just your sensor configuration

#

No...it's not

fiery temple
mild veldt
#

Configuration.yaml if for your backend

#

It is not for Lovelace

fiery temple
#

ok but i dont have yaml mode in confurgation so why is the secret working?

mild veldt
#

I don't know you're trying to show me

fiery temple
#

that im using lovelace xD

mild veldt
#

Storage mode for Lovelace has nothing to do with how your backend configuration works

fiery temple
#

ah ok

#

i misunderstood that then

#

and peopel did say !secret only work on yaml mode after i believe it was 0.85 update

mild veldt
#

Secret in your Lovelace configuration

fiery temple
#

could you express that? my native language isnt english

prime umbra
#

you using !secret in configuration.yaml and thats backend

fiery temple
#

ahh

#

so it works on backend

#

but no on lovelace card entires?

#

is that correct/

mild veldt
#

In storage mode for Lovelace, when you use the UI editor, that is your Lovelace configuration. You cannot use secret there

fiery temple
#

and packages (YAML) files are also backend cause there normally stored in the big configuration file? right?

mild veldt
#

Looks like your use the configurator addon which while accessed through the UI is not what we mean by UI editor

fiery temple
#

or do i sound stupig

prime umbra
#

lovelace-ui.yaml, sorage etc.. is frontend

fiery temple
#

not using configrator addon no

#

so what i just said is correct? last few lines?

#

i think i understand now, thanks much

#

i can use secrets in yaml files, just not on the UI

#

thats very good to know so i can change things back to secret and upload to github again

#

have a great night/day all

mild veldt
#

yes. you are safe to use secret in any yaml files

fiery temple
#

not in the ui-lovelace.yaml xD

#

but as im not using that anymore ๐Ÿ˜ƒ

mild veldt
#

You can use secret in ui-lovelace as you would be in YAML mode if you were using that

sturdy bough
#

Whats the point of using !secrets in lovelace, that is a frontend used only for showing data?

wheat current
#

Yes, but things like iframe cards can contain basicauth credentials

sturdy bough
#

Ah right, so they can be translated in clear text passwords in the html... understood.

true lily
#

Hi there! Is there a way to use ressources in lovelace storage mode? Like for custom cards? Thanks!

polar kelp
#

You can add them as usual through the raw editor

true lily
#

thanks for the quick reply, i tried that and the code is automatically removed. I added: ```resources:

  • url: /local/power-wheel-card.js?v=1
    type: module```
polar kelp
#

That's a bug that's fixed in 0.85.1.

true lily
#

๐Ÿ‘ obviously i missed that

restive lance
#

any one here have a timer exposed in the frontend ?

fiery temple
#

ok cool, its quit now, maybe i can try it once more :P
is it possible to set default language to english with lovelace as custom and a custom theme always for all users? kinda get sick of having to reslect those everythime i clear cache..

vapid field
#

hey everyone, anyone ever had the issue with entity-buttons randomly resizing on clicking it?

fiery temple
#

ha nope dont have that issue

mild veldt
vapid field
#

oh i see

#

thanks for linking

potent fjord
#

how do you stretch background image, i used compact-custom-header and now my background image doesnt fill whole background

vapid field
#

Hi, I am trying to migrate my HADashboard to Lovelace
Main issue I am having is getting the layout and aligment as the one of HADashboard.
I am trying to use https://github.com/jeradM/grid-layout for that, but I am far away yet to getting the same I had in HADashobard