#frontend-archived

1 messages · Page 100 of 1

sinful fulcrum
#

1 sec

#

Used it for the zwave and zha domain entities

#

That way I don’t have to update them

#

And I split the zha one between offline and online devices so the offline ones stay at the top

odd light
#

you must have a lot of entities

#

nice

sinful fulcrum
#

I do

mild veldt
#

@summer eagle the top left card has a link to the creator's configuration

summer eagle
#

cheers

manic obsidian
#

any of you running HA on RPI? If so, is lovelace (and cards, plugins, etc.) impacting performance?

mild veldt
#

all the work is done by the browser for the most part

manic obsidian
#

so, rpi (I only have a 16GB card) should not be impacted?

charred star
#

In the old UI there was an option for controlling the group toggle behavior. all
(boolean)(Optional)Set this to true if the group state should only turn on if all grouped entities are on.

#

Is there a way to control that in Lovelace?

#

It seems that the Lovelace default behavior is equivalent to setting all: true. I would like to reverse this.

raven nacelle
#

Use show_header_toggle: false

charred star
#

But then I would not be able to turn off all the light groups that are on.

#

I would like for the group toggle switch (parent) to change states to 'On' when any of the child switches is 'On".

warm stone
#

Is there a way to state the size for a picture glance card? My camera images are coming through making the card full res (2048x1520) and they are just huge

smoky mulch
#

@warm stone use aspect ratio as stated in the documentation for picture glaNCE

#

picture-glance

mild veldt
#

@charred star are you using a light group?

smoky mulch
warm stone
#

aspect ratio according to picture card docs is

aspect_ratio
(string)(Optional)Forces the height of the image to be a ratio of the width. You may enter a value such as: 16x9, 16:9, 1.78.

So thought that meant 16x9, 4x3 etc not scale 25% etc like mentioned in other cards.

smoky mulch
#

if that doesn't work then you'll have to use one of the custom cards to change it

charred star
#

@mild veldt It looks like HA converted my group to an entities card. How do I define the light group? I tried changing the card type to "light" and I get an error stating that I must use and entity from the light domain.

mild veldt
#

I'm talking about your actual group

#

@charred star if your group is all lights, put it in a light group. That is a component not a card

charred star
#

Ahh let me try that. Didnt know there was a special component for lights

woven echo
#

I'm trying to use the custom:mini-media-player card. I've downloaded the card, copied it into my config/www directory, and updated my ui-lovelace.yaml. I've also tried changing type: module to type: js. I've tried clearing my cache and restarting home assistant. I still get Custom element doesn't exist: mini-media-player.

charred star
#

@mild veldt So... I can confirm that using the light-group entities has the behavior I want. However, all my lights are controlled through Sonoff switches and those are outside of the light domain. I had to create a separate light-switch entity for each of my switches and then I was able to create the light groups. This was a lot of work and turning the ligths on/off seems a bit sluggish. I guess that now I have to toggle light group > toggle light-switch > toggle switch. The old UI did what I wanted with the default group card 😦

#

Thanks for the helping me get this working though 😃

mild veldt
#

@woven echo double check that your physical path and path in your config match 100%

#

also try to navigate to the file in your browser

#

@woven echo what mode are you in for lovelace? yaml or storage?

woven echo
#

storage

#

I've tried switching to yaml mode but then my whole config disappears

mild veldt
#

so why are you touching your ui-lovelace.yaml file?

#

that's for yaml mode only

woven echo
#

is there a way to use custom cards in storage mode?

mild veldt
#

if you're trying to add resources in storage mode, use the raw config editor

#

top right menu > configure ui > top right menu > raw config editor

#

add a resources section

#

and you're golden

woven echo
#

ahh, that's the part I missed. thanks

lone anvil
#

Is there a place holder "entity" for glance cards? I want 2 items in the first row and 3 in the second. Instead of 3 in the first and 2 in the second.

lone anvil
#

Is it possible to use "special" characters in a title name on an entity in the Lovelace UI?

split granite
#

Should work, if it doesn't you'll know quickly enough 😉

lone anvil
split granite
#

That's the documentation standards, not what's valid in Lovelace...

lone anvil
#

But it works!

#

😛

#

Don't deny me my moment of victory.

split granite
#

🤦 🤣

trail bane
#

Hey All, anyone had much luck filtering available states from the thermostat card, I remember seeing it once but can't find it again.

white fern
#

Hello, is there easy way to do floor plan in full screen in hassio 0.86.2?

split granite
#

~faq @white fern

kind shellBOT
split granite
#

Home Assistant is the software you're running, Hass.io is the installer you used

white fern
#

im sorry, im new with Home Assistant

#

@split granite and how can i use Panel Mode please?

split granite
#

See the docs I linked to, they show you how

white fern
#

@split granite thanks a lot! 😃

odd light
#

quick question, how do I use the state filter in a glance card? I'm using the new ui editor

#

I want to have motion sensors only appear when they detect motion

#

this isn't working,:
type: glance
entities:

  • binary_sensor.livingroom_motion
    state_filter:
  • 'on'
#

says
Your config is not supported by the UI editor:
Expected a value of type undefined for state_filter but received ["on"].
Falling back to YAML editor.

sinful fulcrum
#

you need to use entity-filter cards in the glance card

jagged cargo
#

I have a yeelight which i can set different colors etc, which lovelace card would i use for this?

sinful fulcrum
#

@odd light try this:

- type: entity-filter
  entities:
    - binary_sensor.livingroom_motion
  state_filter:
    - on
  card: 
    type: glance

I haven't tested it

odd light
#

got it

#

yeah I figured it out

sinful fulcrum
#

cool

naive ruin
#

With 0.86, where can i configure Lovelace to load custom card ?

sinful fulcrum
# 
If you are using the GUI editor for Lovelace, you can add the resources section using the Raw config editor, which you reach by entering Edit mode and then clicking the three dots in the top right corner.
#

@naive ruin ^^^

naive ruin
#

Thanks, when adding a ressources, need to reload HA ? @sinful fulcrum

sinful fulcrum
#

Just the page afaik

split granite
#

Lovelace doesn't require HA to be restarted

#

You have to restart HA the first time you create www/, but as far as Lovelace itself goes, just refresh/reload the page

naive ruin
#

Ok thanks

sturdy bough
#

anyone knows how to have iframe card taller? I can't find a way to specify it's height

viral root
#

why the automation group toggle (on/off) goes off when i reload the default view? latest HA version

tight olive
#

I'm running 0.86.3, how can I keep the contents of the main page, but make it a different tab/view?

#

I have very little configured right now

#

or is there a way for me to show what's currently on the default view, before I make changes to the views?

#

I think I may have figured it out

#

Is it possible to setup a view tied to a user?

split granite
#

Not yet

#

User specific views, and rights, is coming at some point

tight olive
#

ok, thanks. I did see something like an add-on that might help, but I was looking to see if it was just part of HA yet. Thanks for the info. I'll keep an eye on it for the future

mild veldt
reef citrus
#

Hey guys. I'm using homeassistant 0.85.1 with lovelace. No errors in logs . Using history_graph so I can plot two sensors on a graph together over past 48 hours (sensor.isp_upload and sensor.isp_download). Graph shows up on the front end as 'ISP Speed Unknown" but when I click on it, it looks great and plots both sensors. How do I specify what graphed metric to show on the front end instead of 'Unknown' ?

tight olive
#

@mild veldt thanks, I'll take a look at that

mild veldt
#

@sturdy bough you'll have to play with the aspect_ratio

signal marlin
#

Hello,

since the update to 0.86.3 i have a lot of Entity not available:<entity name> on my frontend, i checked the pinned message for illegal characters, but dont see anything that should cause the problem,

i have multiple sensors, automations, device_trackers which give the error, but not all, about 99% of my config works...

raven nacelle
#

@signal marlin You can check the entity names in states

mild veldt
#

@reef citrus sounds like your sensor is not conforming to the standards for units_of_measurement? Is it listed when you look in states ?

signal marlin
#

the automation for example are in the folder in /config but not in states

mild veldt
#

@signal marlin then your problem is not the frontend, but rather that you automations did not load. Check info dev logs

sturdy bough
#

I have a "widget" from windy.com that is 650x450.
When rendered in lovelace in an iframe, is like 496x246 that is a different aspect ratio

mild veldt
sturdy bough
#

ah

#

understood

#

i'll try

#

i did try it before asking here, without success

#

but i noticed i was using "aspect_radio" 😦

signal marlin
#

info does not tell me what wrong with this particular automation. most of my automations work and show up after the update

maybe one of you can take a look?

https://pastebin.com/Yz3sKb22

#

check config does not show any errors

#

Got, it the error was in the file for some reason, i deleted it and recreated it and now it shows up again

silver dome
#

Hi guys! I'm looking into re-enabling the default panel I switched to the personalized one already and I'd like to go back to the default one, is this possible? Thanks

mild veldt
#

@silver dome delete ./storage/lovelace

reef citrus
#

@mild veldt no, it is not. It is my own custom sensor. The sensors are just 2 floats that are plotted on a history_graph

mild veldt
#

set unit_of_measurement

reef citrus
#

@mild veldt it's set to mbps, but how will it show up on the card BEFORE I click on it to view the graph? Surely there would be an option as well to specify what to show on the card? Otherwise which of the plotted sensors will it know to show?

jagged cargo
#

so when i have saved some custom card js to my www folder, how in the front end gui do i now add that custom card?

#

brb

craggy isle
#

I got a quick question about Lovelace, when I switch to the Lovelace UI, can I get rid of my group.yaml files? Does Lovelace still use them?

strong furnace
#

Does someone use Fully Kiosk Browser on an Android tablet and has issues with lovelace? Since I upgraded to 0.86 the website gets stuck, the entities do not refresh and I cannot scroll the page. When I swipe from the left to access Fully's menu and load the start page again, HA is responsive again. I have set javascript_version: latest and my tablet runs Android Pie (9.0) with the latest WebView (almost identical to Chromium)

mild veldt
#

@craggy isle the autogenerator will use your group.yaml to do the initial generation. Once that is done and you take control of your UI, in terms of rendering the UI they are not necessary. But if you want to stay in automated mode, you'll want to keep it around. Doesn't really hurt you to keep it around, so I wouldn't remove it for now

#

@reef citrus I don't follow

craggy isle
#

@mild veldt Ok, and do you recommend taking control by the UI or the yaml mode?

mild veldt
#

well as I've made lots of the UI editors I of course recommend UI 😉

craggy isle
#

hehe, good, thanks!

split granite
#

IMO there's little to no reason for anybody new to Lovelace to go YAML mode - the built in editor is great, and only getting better

craggy isle
#

I asked because I am trying to hide my alert card on my first view. Before Lovelace, the alert section would show when there is a active alert. Now, with Lovelace, it show all my alert as idle

split granite
#

Conditional card

# 
      - type: entity-filter
        entities:
          - entity: alert.garage_door_l
            name: Garage door, bike
          - entity: alert.garage_door_r
            name: Garage door, car
        show_empty: false
        state_filter:
          - 'on'
        card:
          type: entities
          title: Alerts```
craggy isle
#

@split granite thanks, this is exactly what I am playing with right now!

split granite
#

That's one of mine

craggy isle
#

Now I just need to find how to put the Alarm control back in a round button at the top

split granite
#

Badge

#

Check the views page

craggy isle
#

@split granite yes, I still need to do a lot more research on Lovelace, I did not check it out during the development and now I think I should have

loud thistle
#

Just added a new cert expiry sensor to my config (now that my router is fed by a script and should always have a vaild cert) and wondered why it did not show up. It sits inside unused entities.... why?

#

Aaaand as Nr2: I kept auto configure active till about 1 minute ago. Now I switched to manual and wonder how to get back. ^^

elder pendant
#

Is there a specific house floorplan builder that people are using to make those neat looking cards?

split granite
#

I think he, and a few others, worked from the floorplan from their builder/architect/developer

tight finch
#

sweet home 3d is good

lavish lily
#

has anyone any good examples for lovelace with themes at hand?

flint musk
#

hello is there a way to call mqtt from a lovelace card?

#

i tried hass.temp1.callService('mqtt.publish', 'ledstrip/office', {state: 'ON'})

#

says invalid service

elder pendant
#

@tight finch pretty nice so far, thanks!

mild veldt
#

@lavish lily have you looked at the demos?

#

@loud thistle things don't get automatically added in storage/manual mode. To get back to auto mode remove .storage/lovelace

silver dome
#

@mild veldt Thank you! (about how to reset lovelace)

loud thistle
#

@mild veldt tried that and yes, it looks good, but the warning when switching did not show up anymore, so I wondered a bit. But in auto mode which I used before the sensor still does not show up.

mild veldt
#

@loud thistle in auto mode, after a restart you may need to clear cache to see new entities, I believe

loud thistle
#

Hmm... That I have to try ^^

#

Ok.. works ... Thx ^^

lavish lily
#

@mild veldt yes. although I must confess, I didn't check for themes

#

will do that ...

thorny verge
#

@flint musk Create a script and call the script from the lovelace card

eternal belfry
#

I'm trying to edit the lovelace ui using "Cofigure UI" on the top right but it's complaining it's in yaml mode. How do I disable yaml mode?

mild veldt
eternal belfry
#

@mild veldt yeah but that tells you how to enable yaml mode. To disable it do I just remove the top 2 lines?

mild veldt
#

yes

mystic root
#

Hey Lovelace channel...question. I am trying to set up a history graph for a temperature sensor and getting back "entities need to be an array" with this as my input:

#

Entities need to be an array
{
"type": "history-graph",
"entities": "sensor.master_br_motion_temperature",
"name": "Bedroom Temp"
}

#

what array is it looking for, I am not seeing much on this and am just cutting my teeth on lovelace

raven nacelle
# 
  entities:
    - sensor.master_br_motion_temperature```
mystic root
#

before you yell at me ......i know, I didnt format the paste right....I forgot

raven nacelle
mystic root
#

but I am editing the card directly through the UI, it's formatting it on it's own.....or am I not picking up what your putting down?

winter hollow
#

@mystic root there is an edit button for when you forget to format 😉

mystic root
#

So, I'm in the card configuration, when I type the configuration on the top line, it inputs the code below it with the formatting. Toggle editor is grayed out and non-selectable.

winter hollow
#

And history graph doesnt have a UI yet, so you should enter the yaml like in the docs

mystic root
#

I guess I will play with other cards for now and trying to come through some others examples to find my gap...(obviously between my ears right now)

winter hollow
#

Except for the first -

mystic root
#

well that might be my issue @winter hollow I tried adding the card since it is a selectable option.

mild veldt
#

@mystic root just change your yaml

  type: history-graph
  entities: 
    - sensor.master_br_motion_temperature
  name: Bedroom Temp
mystic root
#

I will do it the manual way, I was trying it live through the UI adding it as a card since it is an option, thanks for the help

winter hollow
#

Yeah, that still works?

mild veldt
#

you can do it from the UI

mystic root
#

@mild veldt DOAH...that worked, for some reason when I was hitting enter, it would skip to the next line, copying and pasting did the trick

#

"would - "wouldn't"

torpid cypress
#

has anyone got an example history graph lovelace config they can send? None of my graphs are showing

split granite
# 
    - type: history-graph
      title: Sun
      entities:
        - entity: sensor.sun_elevation
          name: Elevation
torpid cypress
#

sweet, thanks!

#

does that work on the config UI?

split granite
#

It will, but maybe not as pasted there

#

I think you have to strip the leading - from the type line

green bough
#

I updated to .86, but the dashboard is broken. I had groups in the old UI, but cant find how to re-add my groups

#

i can add the group by adding an entity but then there is only 1 switch

#

I just want this in lovelace: image

mild veldt
#

@green bough so you have groups.yaml and on boot the the auto generated doesn't show what you had?

#

also, you can't do that for links in discord unfortunately

green bough
#

i have groups in groups.yaml

#

but they dont show up in lovelace

mild veldt
#

nothing at all?

green bough
#

just an empty page

hoary temple
mild veldt
#

@green bough any errors in the browser console or in info ? Also, did you do anything special during the upgrade; i.e. use a migrator, setup yaml mode?

#

@hoary temple follow the link to the author's repo in the top-left card

green bough
#

i just did pip3 install --upgrade homeassistant

#

and restarted

mild veldt
#

try clearing your browser cache

green bough
#

no errors in console or log from ha

hoary temple
#

thanks

green bough
#

cache isn't changing

#

anything

mild veldt
#

try a private session in your browser to be sure you cleared the cache

green bough
#

yes i did that in chrome

mild veldt
#

and still no errors seen?

green bough
#

no

mild veldt
#

goto states and go to navigate back to States UI

#

and see if that displays still

green bough
#

states ui works fine

undone depot
#

Tried to add a few buttons to control Kodi and this happens when playing something. http://imgur.com/gallery/JCCEoaP xD
Expected? Can the auto icon change be disabled?

mild veldt
#

@green bough are you able to click the top right menu and configure UI and add cards/views?

green bough
#

yes

mild veldt
#

let's try this. delete ./storage/lovelace. restart homeassistant and then clear cache again once it is back up

green bough
#

restarting...

mild veldt
#

@undone depot what are you using for your buttons?

green bough
#

and is back 😃

mild veldt
#

🎉

green bough
#

but if i edit the ui manually, new groups dont get added?

mild veldt
#

correct

#

they will be in the "unused entities" view found in the menu

#

we'll likely add a way to toggle between or at least replace the unused entities with an auto view in a future release

mental crystal
#

for: minutes: 0 is no longer supported with lovelace, for a state trigger change in an automation?

green bough
#

so from now on, if i add a light to a group or remove one, i also have to do this in lovelace

mild veldt
mental crystal
#

I have, I see that time changed to time_pattern, but the trigger here is state. is it considered the same breaking change?

#

because instead of trigger: time for me, the trigger is state, so Im not sure what is the related change

mild veldt
#

@green bough lovelace is explicit in what you want to view. Are you adding to a group for reasons beyond display?

green bough
#

also for turning off all lights that are in a group

#

or on

mild veldt
#

well first off, I would recommend adding your lights to light groups, and not just groups. then they would be just part of that control group of lights

mental crystal
#

Thanks I will

green bough
#

whats the difference with a normal group and a ligth group

mild veldt
green bough
#

can i also add a switch to a light group?

mild veldt
#

groups have traditionally been used as a hack to control the UI and not necessarily for the state machine

undone depot
#

I'm using a glance card for the kodi buttons

mild veldt
#

a light group is all about the badkend and translates well to being displayed in the frontend

green bough
#

thanks, will dive more into it

mortal cape
#

anyone have an example of using card-modder with a stack?

mild veldt
#

@undone depot I see. Sounds like a bug if you've overridden the icon, but to get around it, just use a stateless entity and then in your service_data call, specify the entity_id

prime nacelle
#

So, how to install a custom card is not documented?

mortal cape
#

@prime nacelle it is.

mild veldt
#

carefully

mortal cape
prime nacelle
#

@mortal cape That's great!

mortal cape
#

the "plugins" name kind of throws me every time

mild veldt
#

@polar kelp do you think your wiki should be part of the official docs?

mortal cape
#

oh i see...plugins includes custom cards

polar kelp
#

Plugins is my name for it. I suppose it should actually be called "resources"...

#

@mild veldt Parts of it definitely should... I suppose

prime nacelle
#

Okay, I found it. Never thought to click the dots a second time, that's hard to discover ...

mild veldt
#

Or at the very least a link to the wiki from the official docs

mortal cape
#

@polar kelp since you're here, do you have an example of using card-modder with a stack?

raven nacelle
#

Can we not use call-service to call python_script? I have the following that does not work in LL hold_action: action: call-service service: python_script.set_state service_data: entity_id: 'device_tracker.meta_rashmi' set_state: 'home'

#

the same works in services services

glossy birch
#

@raven nacelle looks like it is not indented properly...

#

shouldn't the service: part be under action: like 2 spaces indented?

mild veldt
#

yes

polar kelp
#

@mortal cape You have to card-mod every card in the stack separately

raven nacelle
#

ok...I see what you are saying...let me check

mortal cape
#

ok thanks, that's what I was wondering. Having it above all worked for some but not all modifications

undone depot
#

Thanks iantrich, that worked great. Also yes I've overriden the icon on all buttons. But also the icon disappears from the entities card in the top as well but I guess it's because I've overridden the icon for the entity.

polar kelp
#

It probably works for things starting with --

mortal cape
#

yep

polar kelp
#

I'll do my best to introduce a --card-corner-radius or something after the feature freeze, btw. Then all cards can be given rounded corners via the theme.

hoary temple
#

Anyone know how to scale the light card with a horizontal stack? I'm trying to use 4 light cards in one horizontal stack but because of how large the light cards get it doesn't look very nice

  • type: horizontal-stack
    cards:
    - type: light
    entity: light.room_top_1
    - type: light
    entity: light.room_top_2
    - type: light
    entity: light.room_side
    - type: light
    entity: light.underlight
polar kelp
#

And card-modder will lose 90% of it's user base...

raven nacelle
#

ok hold_action: action: call-service service: python_script.set_state service_data: entity_id: 'device_tracker.meta_rashmi' set_state: 'home' works

#

@hoary temple Yeah, unfortunately, some cards don't scale very well (yet)

glossy birch
#

~yaml @raven nacelle 😛

kind shellBOT
glossy birch
#

LOL

prime nacelle
#

@mortal cape thanks, it is working now 👍

hoary temple
#

@raven nacelle do you suggest for now I just separate it 2x2?

raven nacelle
#

yes, 2x2 should look fine

glossy birch
#

@raven nacelle finally migrated everything to LL now

hoary temple
#

is there a way I can optimize this code to use -entities rather than multiple lines?

  • type: horizontal-stack
    cards:
    - type: light
    entity: light.room_top_1
    - type: light
    entity: light.room_top_2
    • type: horizontal-stack
      cards:
      • type: light
        entity: light.room_side
      • type: light
        entity: light.hue_lightstrip_plus_1_2
raven nacelle
#

told you it was not that difficult @glossy birch

glossy birch
#

it wasn't - thanks to my jinja scripts 😃

#

just a pain to re-organize all of it

raven nacelle
#

@hoary temple Unfortunately, no...you need type: light for each light entity

alpine nova
#

Hello all!

#

I'm running HassOS 0.86.3 on an RPi3+. I have been running lovelace as my default interface for a while now in yaml mode. Is there a way to change OUT of yaml mode? I have tried removing the "lovelace: mode: yaml" lines from my configuration file, and renaming ui-lovelace.yaml. Neither of those allows me to use the Configure UI option.

polar kelp
#

This, people! This is how you ask a question! (Here's my exact setup,. Here's what I want to do. Here's what I tried. Here's what happened instead)

#

Removing mode: yaml and restarting really should do it. What interface do you get? The one from your ui-lovelace.yaml?

alpine nova
#

@polar kelp , Yes, it did default to the ui-lovelace.yaml that I had in place.

polar kelp
#

And you restarted Home Assistant?

alpine nova
#

I will uncommenting the lovelace: line from my config file. Yes, I restarted after commenting out the lines in the config and after renaming the ui-lovelace.yaml.

#

Restarting now... will let you know the results.

#

@polar kelp , No changes after adding "lovelace:" back into my config.

#

Still defaulting to my previous ui-lovelace.yaml layout.

polar kelp
#

And if you change something in it?

#

Anything in the Home Assistant log?

civic stream
#

I'm still a bit confused regarding groups with lovelace. I had many groups defined in groups.yaml, but as far as I understand, that file is no longer used, but the groups defined there still exist because they were generated when i updated HA. But how do I create/remove groups now when the groups.yaml isn't used anymore?

#

I made new groups for lights using the light group function, but the old groups are of course still there.

elder pendant
#

Groups are still used for automations, you just have to approach it differently from the frontend

alpine nova
#

@polar kelp I get this in the log Error executing query: (sqlite3.DatabaseError) database disk image is malformed [SQL: 'INSERT INTO events (event_type, event_data, origin, time_fired, created, context_id, context_user_id) VALUES (?, ?, ?, ?, ?, ?, ?)'] [parameters: ('service_registered', '{"domain": "recorder", "service": "purge"}', 'LOCAL', '2019-01-28 20:43:42.463207', '2019-01-28 20:44:38.054954', '157ca0c53af34e89affafd376f9e8019', None)] (Background on this error at: http://sqlalche.me/e/4xp6)

civic stream
#

Villhellm: Is groups.yaml still used?

alpine nova
#

making changes to backup-ui-lovelace.yaml to see if they reflect in the HA page.

elder pendant
#

For backend control, as far as I know, groups.yaml is still the preferred method.

alpine nova
#

@polar kelp Evidently making a change to the renamed ui-lovelace.yaml made the difference because my UI got really ugly 😁 I've got some cleaning up to do.

glossy birch
#

it took me 2 minutes to generate new lovelace UI from my existing code

civic stream
#

Hm, ok. But I'm pretty satisfied with my UI, mostly thinking of how to remove old created groups 😃

#

Don't understand exactly what you mean by generate lovelace UI?

glossy birch
#

the yaml code that goes into the ui-lovelace.yaml file.

civic stream
#

Ah, ok!

solid minnow
#

I went through the site and the pinned notes but don't see this basic Q. How is it that I enable Lovelace? I read the docs, and Git issues and it seems like once I create a ui-lovelace.yaml file in config and restart HA it should automatically load. It's not doing anything, and I feel like I need to add something in configuation.yaml

civic stream
#

If you have the latest HA release, it's automatic

solid minnow
#

I believe I do, I installed it via docker. Lemme find out where the version # is.

#

Ah seems I don't. 0.65.5. Quite a bit out-dated.

civic stream
#

Yep

#

If you recreate with the latest docker image, it will automatically convert to lovelace

solid minnow
#

Thanks - New to container station (Using a NAS). Assumed it would have auto pulled the latest. Forcing it too now. Simple fix.

civic stream
#

Those are the best fixes

mild veldt
#

From 0.65 to 0.85... @solid minnow expect breaking changes...

split granite
#

Lots of them

solid minnow
#

Hahaa thanks for the call out. It's a fresh install, thankfully.

#

So perhaps this'll fix a lot of the bugs I was battling.

#

Fixed a lot of my issues, including the 'small drop down' from above. Thank you guys.

thorn stag
#

I have a fancy bulb that can shine in very many colours, prior to locelace I could change the colour, but with lovelace I can only chnage the brightness...am I missing something?

sand parcel
#

Hello Everyone,
I am having trouble using the custom card-modder with the Lovelace UI Editor. I probably read something wrong or missing a step. Any help would be appreciated.
Running HomeAssistant: 0.86.3 on Ubuntu: 18.04.

I created a <config directory>/www/plugins folder and added card-modder.js and card-tools.js (copied the data from github page in raw mode). I then opened the Raw Config Editor and added the following resource section to my config.

title: HomeAssistant
resources:
  - url: /local/plugins/card-tools.js?v=1
    type: js
  - url: /local/plugins/card-modder.js?v=1
    type: js
views:

I did a ctrl+F5 in the browser and restarted homeAssistant for good measure. When I attempt to add a - type: custom:card-modder element I recieve the following message in the editor, TypeError: type is undefined.

#

@thorn stag are you using the light card with Phillips Hue, I noticed the light card doesn't do color, but if you place your lights in an entity card you can still change the color.

elder pendant
#

Did you put the card name in single quotes? type: 'custom:card-modder '

sand parcel
#

if you add a badge with multipe lights you can contral the color of multiple lights at once.

thorn stag
#

@sand parcel - will give it a try - thanks

sand parcel
#

@elder pendant no, but I just tried with single quotes and got the same error.

elder pendant
#

Any useful error information in the console?

thorn stag
#

@sand parcel - It worked, not quite as elegant as the light card, but it will do the job - thanks

sand parcel
#

no prob

#

@elder pendant the quotes helped, the bit of sample code I pasted in also started with a - and it shouldn't when using the editor. Now I am getting card config incorrect.....so I just have to work through that. Thanks, the bit about the quotes helped with my roadblock.

#

😃 got it working thanks again, I knew it would be something silly.

next aurora
#

Is there a way w/ Lovelace GUI edit mode to add custom cards ?

tired quail
#

pre-lovelace i had group.all_lights in my default_view and it auto updated to include all the lights when i added new ones, is there a way to do this in lovelace or do i need to manually add the entities each time i add a new light?

sinful fulcrum
#

There is

#

1 sec

#

I used that to replace the zwave and zha domain entities panels

#

even lets me split zha between offline and online

tired quail
#

score

#

thanks

sinful fulcrum
#

np

#

Thank the author 😃

#

he has a ton of cool stuff

mild veldt
wary dust
#

Hey

#

I have a super dialed in Lovelace setup

#

I'm afraid upgrading HA will break this

#

Anyone experience this?

elder pendant
#

Aside from some entities possibly changing ids that you have to fix you should be fine. Most people are having problems because they weren't using lovelace yet

#

If you have a lot of groups/automations if might be a pain to fix all the ids

wary dust
#

Is it possible to downgrade if necessary?

#

Oh? What's changing for IDs?

elder pendant
#

It just depends on the platform you use and how it gets it's id, some of them changed the way they are generated

wary dust
#

Interesting

#

That's less than ideal, I'll dive in with both feet and see what breaks I guess 😃

#

It's the HA way

elder pendant
#

That's the spirit

wary dust
#

Is it possible to downgrade if necessary?

elder pendant
#

I know it is, but I've never done it personally

wary dust
#

Ok, time to dive in >:D

#

Uhhh what's a remote

elder pendant
#

Like a remote control, for your TV

wary dust
#

I have a new entity called remote.bedroom

elder pendant
#

Do you have a roku tv or something?

wary dust
#

Oooh

#

Yep I have a roku in there

#

neat!

elder pendant
#

If it's a TV you can control the power now

wary dust
#

No dice there. Does it work over HDMI CEC?

elder pendant
#

No clue

timber maple
#

Hi folks. Just upgraded and jumped on the lovelace train

#

things seem ok for now - however

#

When I try to use the "configure ui" menu option and hit the "take control" button, I'm met with a dialogue that says " saving failed: not supported". The logs don't indicate much of anything.

wary dust
#

Hmmm

#

Are your permissions in order?

#

It might be trying to create a file but not have permissions to do so

elder pendant
#

Any useful information in your browser's development console?

timber maple
#

hmm

#

I hven't tinkered with permissions so much. I'm a Windows boy treafing carefully on my little RasPi install - permissions always end in tears

#

@elder pendant - where might I find that?

elder pendant
#

Linux permissions are so much simpler than windows though

timber maple
#

oh - you mean the JS console?

elder pendant
#

Yeah

timber maple
#

is there a way to add a screensho here?

#

showing my noob badge

elder pendant
timber maple
#

{message: "Not supported", code: "error"}
code: "error"
message: "Not supported"
proto: Object
saveConfig @ 8ee9235….chunk.js:5609
async function (async)
saveConfig @ 8ee9235….chunk.js:5609
_saveConfig @ 496caa1….chunk.js:125
handleEvent @ app-3b4bb4ed.js:137
EventPart._boundHandleEvent.e @ app-3b4bb4ed.js:137

elder pendant
#

What browser are you using?

timber maple
#

chrome 71.0.....

elder pendant
#

Hmm... those errors are pretty non-descript

timber maple
#

yeah, thats what I thought 😃

elder pendant
#

Anytime there is an error saving something my gut reaction is also permissions based

timber maple
#

I have noticed a lovelace.yaml file from mid december

#

I'm going to remove that and reboot, just to see if that was an issue

elder pendant
#

back it up first

timber maple
#

hmm.. was also a :
lovelace:
mode: yaml

#

in my config file...

elder pendant
#

Oh yeah you were in yaml mode

#

take those things out if you want the gui editor

timber maple
#

BINGO!

#

there we go 😃

#

I have "edit"s and "+" symbols everywhere

elder pendant
#

Sounds like GUI editing 😃

timber maple
#

thanks folks - sometimes you just need to talk it through. Plus - I'm still in holiday mode 😃

#

doesn't it just!

mild veldt
elder pendant
#

I can highly recommend that card 😃

mild veldt
#

just not in firefox 😉

jagged cargo
#

Hi, hoping this is something simple, i want to use custom card color-picker. So i have followed instructions https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins .. I have put both color-picker.js and card-tools.js files inside www/lovelace folder.. I am using the gui editor, how do i now add color-picker to the actual UI now. When I click + icon, i don't see color-picker or a custom option ..

elder pendant
#

You have to use the raw editor to add the resource and card

#

At the very bottom of the 3rd step on that page it tells you

jagged cargo
#

I just want color-picker, so i will have the URL point to card-picker. can I leave out views: ?

#

think after i do the first custom card it will click in my head and the rest will be simple

elder pendant
#

views: should already be there if you have anything setup in lovelace

#

You need to add

resources:
  - type: module
    url: /local/color-picker.js?v=0
#

Er not sure what your type is, but that's an example

jagged cargo
#

ah, i think i kept editing a card using raw editor

#

and not the whole page

elder pendant
#

make sure you restart home assistant after you added the files to the www directory

jagged cargo
#

think I got it, the part i was missing/didn't know how to do was in the raw config under the cards: section add - type: 'custom:xxxx' so that is how you add a custom card 😛 lesson learnt

mortal cape
#

@jagged cargo you can also add a new card with the + button, and then choose "skip" in the bottom right corner of all the card choices

wary dust
#

@mild veldt Thank you!

#

I feel like lovelace should auto-populate custom cards from an approved repo or something

#

There's so many great custom cards but no good directory for them

#

Unless there is and I just don't know abou tit

mild veldt
wary dust
#

Well there we are!

mild veldt
#

hopefully we'll have some sort of built-in store in the future, however

wary dust
#

'store' but not for money, I assume?

mild veldt
#

no, like the add-on store for hassio

burnt bone
#

Can anyone tell me where I can make a floor plan for a picture card that looks like those in the new demo page?

nimble dirge
burnt bone
#

@nimble dirge Thanks

nimble dirge
#

no worries

sterile hemlock
#

Anyone know what would cause lovelace to display a loop? When I go to lovelace it displays the sidebar again inside where the ui should be and just whitespace inside of that.

mental crystal
#

How can I apply customization of some entities as I could with the previous UI? where I had a customize section with icons or friendly-name ?

polar kelp
#

customize: in configuration.yaml still works.

#

But you can also set icon: and name: in most lovelace cards. That way you can have e.g. the same switch in two places in the UI, with different name or icon.

mental crystal
#

Is it possible to set the icon and name on the entity, from the UI?

#

because I find only how to do it on the card itself

polar kelp
#

Do you mean http://<your HA>/config/customize?

mental crystal
#

Ha. Yes. Thanks :)
Im so used to just work with yamls that I didnt even realize that menu exist. Thanks!

thorn sapphire
#

@raven nacelle Hi , first of all many thanks for the great demo site. It's been a great help so far. I'm currently copying your nice harmony / entertainment card. One thing i cannot figure out and that is the picture / icon of the harmony activity. Can you please give me a hint where to find this in your config?

vapid field
#

how do I add a custom card when I havent created a ui-lovelace.yaml file? Ive only used the GUI editor since 0.86 was released

polar kelp
vapid field
#

thanks

dawn cobalt
#

Morning! I have a question regarding Lovelace and the Bluenight Theme. I noticed that when I'm using the Bluenight theme, cards that have Entity Buttons don't seem to change colors when state changes. But if I change to the default theme and push the button, the icon changes to Yellow when ON.

#

Is that an issue with the Bluenight theme causing the icon to not turn yellow when ON?

polar kelp
dawn cobalt
#

Nice! Thanks Thomas!

polar kelp
#

You're welcome. Seems like an easy fix.

dawn cobalt
#

yep! that worked for me. thanks again

vapid field
#

hmm,. cant seem to get this working. I get these in log: :8123/local/entur-card.js?v=3:7:1 Uncaught SyntaxError: Unexpected token <

#

Custom element doesnt exist: entur-card.

polar kelp
vapid field
#

Ok, did that now:p the card doesnt show up now, but I get this: Uncaught TypeError: Cannot read property 'attributes' of undefined

#

w00t, got it working 😃

polar kelp
#

Your entity: was wrong, right?

vapid field
#

I had this from the example: - entities:
- destination: Studentersamfundet
entity: sensor.entur_halstein_gard
icon: 'mdi:bus'
name: Halstein Gård
- destination: Halstein Gård
entity: sensor.entur_studentersamfundet
icon: 'mdi:bus'
name: Studentersamfundet
title: Busstider
type: 'custom:entur-card'

#

that gave error, while this worked:

#
  • type: custom:entur-card
    title: Togtider
    entities:
    - destination: Drammen
    entity: sensor.transport_hokksund_stasjon_platform_3
    icon: 'mdi:train'
    name: Hokksund
    - destination: Hokksund
    entity: sensor.transport_drammen_stasjon_platform_4
    icon: 'mdi:train'
    name: Drammen
polar kelp
#

~share

kind shellBOT
winter leaf
#

There it was.

polar kelp
#

I cheated in #botspam 😉

vapid field
#

ok 😛

winter leaf
#

I thought I did to 😂

vapid field
#

@polar kelp The card works, but every time I restart HA docker, I need to enter config mode for GUI for it to show up, is this normal?

polar kelp
#

@vapid field That's very odd. Never heard of it before... It's not enough to wait for a while?

#

Btw, for short snippets like yours I suppose it's better with

#

~format

kind shellBOT
#
:information_source:
Format Code:

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

violet talon
#

I'm using storage mode. what's the deal with the custom updater and tracker? Can I use both as long as I create a ui-lovelace.yaml even though I'm still using storage mode? or can I only use the tracker card? I'm a little confused as to which parts I'm supposed to be using

old karma
#

The custom updater checks and loads the *.js files and edits the ui-lovelace.yaml resources with the new version numbers.
Not sure if this works, but after update you have to edit the version numbers with UI Raw editor by hand.

sterile hemlock
#

Is there not a git or issue tracker for lovelace so I can see if my issue has occured before?

thorny verge
#

@polar kelp Hey Thomas, finally got a chance to test the custom card-loader, and it's working great!
One question, and this is not-nitpicking, it is great as is, just wondering, for a split second I get the red error, "still waiting for vertical-stack-in-card", then it disappears. Any way to get rid of that?

ornate mason
vernal dawn
#

yes

#

almost

ornate mason
#

If only the 17track preamble in the friendly name wasn't so long. :/

old karma
sterile hemlock
#

@old karma Thanks

raven nacelle
#

refresh browser @sterile hemlock

sterile hemlock
#

I did that. Also cleared and disabled cache.

raven nacelle
#

Ok....looks like you have some custom panel that has Lovelace in it

#

it is not a lovelace issue....something to do with how you have configured that panel

sterile hemlock
#

Yeah, from when it wasn't default. It's in my iframe list... Makes sense that would muck things up since iframe entries create an endpoint url. Never thought of that. I've removed it and restarting.

ornate mason
sterile hemlock
#

@raven nacelle That did the trick. This is what happens when you beta test things and forget to clean up afterwards. Thanks!!!

raven nacelle
ornate mason
#

@raven nacelle That's what I'm using, but so far I've only been able to figure out how to show them as entities, which is not great for 17Track, as all friendly names have "Seventeentrack package" prefixed, meaning only the first two or three letters of the package name is visible.

#

list-card wont take the result of auto-entities as input.

glossy birch
ornate mason
raven nacelle
glossy birch
#

yes, it is - love the fact that you can add tap-actions: and allows you to have additional styles...etc

#

will look at the media player

frosty pelican
#

hmm auto entities looks really cool, but if we want to hide the card we need to utilize conditional card?

glossy birch
#

I used conditional cards, auto entities?

frosty pelican
#

I have 7 entity-filter/monster cards on my home page id like to see if i can consolidate but i like how each one is hidden when its empty

glossy birch
#

@frosty pelican cool. thanks! will look at that too!

frosty pelican
#

yea im also looking at Folding Entities one too that is demoed in that link

#

they look like a neat combo to simplify things

simple knot
#

Hey guys, I have a basic question. Now that lovelace.yaml file is not there, where do I add custom cards?

latent tide
#

Go to configure UI. Then click on the three dots again and select Raw config editor.

simple knot
#

Im talking about custom cards where you have to import the js file

#

The instruction tells me to add a line to the ui-lovelace.yaml file to include the js file

latent tide
#

Me too. You copy the custom js file to the /config/www folder then add a resources: section at the top of the Raw Config Editor for lovelace...

simple knot
#

Ah ok. Got it. Thanks

#

It can be included anywhere in that file right?

latent tide
#

I have always put mine at the top. So I'm not entirely sure about that.

simple knot
#

Top between the title and views?

latent tide
#

I have mine above the title even.

simple knot
#

Got it

#

Thanks for the help mate. @latent tide Appreciate it 😃

latent tide
#

You're welcome....👌

snow wren
#

Hello, is there a way to remove the dimmer slider on a light card? Light doesn't have a dimmer so no need to show it

thorny verge
#

Use an entity card for just on off

snow wren
#

Sure I do that with all the switches, this was kind of like the primary light in the living area so liked having it stand out

#

I'll check out picture entity

mild veldt
blazing hamlet
#

Howdy
it's possible to add a secondary_info to a glance entity ?

signal bay
#

Hey guys, changing the theme doesn't update the theme of cards until a refresh, or the side drawer is open and closed. Can anyone share some insight into why this might be happening?

thorny verge
#

@snow wren Check out picture-elements card too.

polar kelp
mortal jewel
#

I tried to use windy option in my lovelace window

#

But after starting the windy tab it only shows red window with windy.com written

#

I m unable to run the windy tab as a running screen

#

How to use windy ?

simple knot
#

Hey, is there any place that people show off their lovelace setups? I'd like to get some inspiration

#

🤔

split granite
#

The answer is here 😉

polar kelp
split granite
#

There's also a link to Awesome HA in the pinned messages

simple knot
#

Yeah, I've seen the demo site. Looking for something beyond that since people are using custom cards.

split granite
#

Beyond that, you can find many people's configs via the cookbook page on the main HA site

simple knot
#

The cookbook looks good. Thanks!

thorny verge
#

Is there a way to do 'or' conditions in a conditional-card?

potent fjord
#

where were example cards again ?

#

why isnt this working :

#

doh, how did you paste formattted code again

split granite
#

~format

kind shellBOT
#
:information_source:
Format Code:

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

split granite
#

~share

kind shellBOT
potent fjord
#

aaah thnx

torpid cypress
#

i made some changes on lovelace on the UI, i restarted my hassio device, and it all reverted back to the original setup? Is there a method of saving which i missed?

potent fjord
# 
      - type: picture-elements
        image: /local/bedroom.jpg
        elements:
          - type: state-icon
            tap_action:
              action: toggle
        entity: light.keittio
        style:
          top: 50%
          left: 50%
#

just wanted to try this, but dont get anything, not even error 😄

old karma
vapid field
#

Hi guys! My problem is very similar. i just wanted to add a custom card, but when I copied js file into /www folder HA says still "Custom element doesn't found"

raven nacelle
#

did you include the file in your config?

vapid field
#

of course

#
  • url: /local/simple-thermostat.min.js?v=1
#

it looks like the file is not found even though

#

how can I check if that file is ecen reachable from the browser

#

even*

raven nacelle
#

double check the permissions

potent fjord
#

how did you copy file ?

vapid field
#

by wget

potent fjord
#

did you wget RAW file ?

vapid field
#

I'm using hassbian and am a homeassistant user, so permissions looks fine

raven nacelle
#

don't assume....check everything and make sure you have the raw file as @potent fjord suggested

potent fjord
#

check your .js does it contain actual file or weppage

vapid field
#

good suggestion will check

#

give me a sec

potent fjord
#

i did this mistake with wget

raven nacelle
#

we have all made that mistake at some point 😉

potent fjord
#

its so easy 😃

#

thats when i learned what RAW file means 😃

thin spade
#

How can I make the size of the picture element card bigger?
I tried using a larger background image but size stays the same.

potent fjord
#

dont know, i dont get any picture on my config 😄

vapid field
#

So I think I tested everything and copied it again and it didn't work

#

can you check the file size for me?

#

mine is: 28709 Jan 29 22:38 simple-thermostat.min.js

potent fjord
#

i have same js in use, and did get it using wget too

#

same size yes

vapid field
#

yeah, that should be good... so I think the problem can be somewhere how the URL is resolved

#

permissions are fine

potent fjord
# 
resources:
  - url: /local/simple-thermostat.min.js?v=1.0.1
    type: module
#

and like this ?

vapid field
#

yes

potent fjord
#

weird

vapid field
#

resources:

  • url: /local/simple-thermostat.min.js?v=1.0.1
    type: module

title: Control Centre
views:

  • title: Home
    icon: 'mdi:home-outline'
    cards:

    Climate

    • type: custom:simple-thermostat
      entity: climate.bedroom
split granite
#

~format @vapid field

kind shellBOT
#
:information_source:
Format Code:

@cloud geyser 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

vapid field
# 
resources:
  - url: /local/simple-thermostat.min.js?v=1.0.1
    type: module

title: Control Centre
views:
  - title: Home
    icon: 'mdi:home-outline'
    cards:

      # Climate
      - type: custom:simple-thermostat
        entity: climate.bedroom
#

should I get something when I type the URL manually in the browser address?

potent fjord
#

check out what it says on the info page in hass

#

should give some more info

vapid field
#

I'm stupid! I didn't restored HA after I added the resource line... Didn't know I have to.

#

now it works

potent fjord
#

ah heh ok 😄

vapid field
#

thanks for help!

potent fjord
#

😃

vapid field
#

@potent fjord DO you know how quickly increase the size of the "Mode" field on that card?

#

Cuz my "Schedule" or "Manual" modes are cut off

#

so I see only "Sche"

#

okay, I found it.

mossy gale
#

what is the best way to add a binary sensor via into the UI, I am adding all my doors and windows together in a view. Using 0.86.3

#

sorry if its a dumb question, i wanted to add it via UI,, but if needed I will add via Raw Config Editor

raven nacelle
#

depends on what you are looking for. You can use any of the cards listed on the website (e.g., entities) to list your sensors

thin spade
#

How can I make the size of the picture element card bigger?
I tried using a larger background image but size stays the same.

mossy gale
#

I just opened Entities actually and thought ah ha

#

i just want to show open/closed for doors and windows nothing more fancy

#

i was looking in Sensors which is what threw me to start

raven nacelle
#

@thin spade THe size of the card is constrained by the overall layout (three columns). You can use panel mode if you want a larger image

mossy gale
#

perfect, that done the job thanks

signal bay
#

@mossy gale You could just use the entities card.

mossy gale
#

yes thats what i have done thanks

#

i wasnt thinking very hard 😃

thin spade
#

So I can only change that for all the views? not 1 view?

signal bay
#

@thin spade You can use panel for as many views as you'd like

thin spade
#

got it! 😃 thx

mossy gale
#

the images change for each location (always Simpsons styled though 😃 )

#

been using HA for 9 months or so now, and I am stunned at the amazing changes during that short space of time, especially Lovelace and the new UI

thin spade
#

how do I prevent it from resizing to the full width?

raven nacelle
#

I am not using the UI editor, so cannot confirm what is going on

thin spade
#

ok

#

I don't know how else to easily find the positions where I want to have an entitity on the image.

raven nacelle
#

you can use any image editor to find the positions or there is a custom card floating around

mild veldt
#

I've also confirmed that is indeed a bug it appears

#

The inability to edit a card while in panel mode, that is

slender pond
#

Is it possible to make media querys in lovelace?

gilded veldt
#

how does one setup hassio to see devices like printers etc if they are connected to the local network or disconnected
can anyone assist
?

mild veldt
#

@slender pond you'll have to make some custom cards, but yes

raven nacelle
#

@slender pond Actually you can use a picture-elements card in a panel mode and get very close to that

slender pond
#

Im probs abour 70% of the way through creating in with vue but now wondering if theres too many limitations by going via api but im stumped if i go local or if i go external

mild veldt
#

@raven nacelle is probably right about picture elements but would probably not scale well and would require making a phone view and a larger view

raven nacelle
#

I tried my floorplan in panel mode and it worked fine on all devices

#

for all picture elements, you need to use transform: none for elements to work well across devices

tepid locust
#

man lovelace is awsome, after redoing my config I was able to get rid of a lot of entries in the groups file and the customization file

solid minnow
#

What would be my simplest method to just have a card that shows all media_players that have a state of 'playing'? mini-media-player or something even easier?

tepid locust
#

Does the state of the media player say playing when it's playing?

solid minnow
#

Yep

tepid locust
solid minnow
#

Where are you saving the YAML it's giving you? in customize.yaml or in the raw editor?

#

I guess it's same either way. I ask because I'm getting custom element doesn't exist for mini-media-player

tepid locust
#

you have to install the custom card for mini media player, it should work with regular media player component

light saddle
#

hey all quick general question just started trying to figure out lovelace. My question is ui-lovelace.yaml contail all the code for the interface. because for some reason what i see on the frontend and what is in the ui-lovelace.yaml is two different things. Any help in the right direction would be appreciated

solid minnow
#

Installing card is just downloading the JS and placing it in config/www yea?

tepid locust
#

yes, check the github for more specific instructions

solid minnow
#

I feel like I need to include the lovelace.yaml somewhere.

resources:
  - url: /local/mini-media-player-bundle.js?v=0.9.8
    type: module

I put this inside of it....

#

Yea I'll play around.

#

Thanks again!

tepid locust
#

are you editing the file manually?

#

the ui-lovelace file?

solid minnow
#

Yea.

tepid locust
#

@light saddle if you want to change the yaml you need to enable yaml mode otherwise the lovelace file is stored as json in the .storage directory and should be edited through the UI

#

@solid minnow did you enable yaml mode in your config? if not see my post above

solid minnow
#

Ahhh, so I should be throwing all of this in the raw config editor in the UI, then.

tepid locust
#

yes unless you want to use yaml mode

solid minnow
#

Sure enough, viola.

#

I must be used to the OG HA too much. I am way over complicating some of this stuff.

#

Lovelace is nice.

tepid locust
#

there should be three dots in the top right corner you click that and click raw editor andd add it in there (the rescources bit) once thats done you should be able to add mini media player just like any other card I believe

#

be warned I do not use the UI editor so I am not too familiar with it, I know more about using yaml mode. dont blame me if your computer explodes

#

lovelace is great, if you want to see what I have done with it and what custom cards I have made use of check out my github

#

~sinker1345

kind shellBOT
solid minnow
#

One dumb question - How often do you have to actually restart? I feel like I need to do it whenever I modify config.yaml but when I came back everyone told me you don't have to restart it nearly as much anymore.

tepid locust
solid minnow
#

I'll def check out your github - once I get my sensors etc setup I'll be full onto custom. I loved some of the ones I saw.

light saddle
#

@tepid locust i cant seem to add just the entry in the raw config editor either. says invalid?? been trying to mess with lovelace mini graph wth no luck

solid minnow
#

Like the one guy who had a visualization of the house and each sensor/settings.

tepid locust
#

lovelace does ot require a restart when editing the UI, edits to config.yaml still require a restart

solid minnow
#

Got it, so I was right. Nice.

tepid locust
#

@silver escarp what are you trying to add can you paste a link to your code?

#

I have found it is much faster as most of my day to day work on HA is refining the UI. I dont add components daily.

light saddle
#

@tepid locust whats the best way to paste code in discord??

raven nacelle
#

~format

kind shellBOT
#
:information_source:
Format Code:

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

tepid locust
light saddle
#

'''

# 
resources:
  - url: /local/mini-graph-card.js?v=0.0.7
    type: module

just trying to add this reference. have added to ui-lovelace.yaml but I dont think that is the right spot??

tepid locust
#

did you enable yaml mode for lovelace in your config?

light saddle
#

@tepid locust forgive me for being a newb. but I clicked on the three dots on the top right. clicked configure UI

#

@tepid locust for being such a newbie i am not sure straight up code is the way for me to go hahha

tepid locust
#

Click on three dots in top right corner, select ConfigureUI. Click 3 dots again and click on Raw Editor and add the resources to the top there. got that from a thread on the forums

#

no problem, just need to know how your setup is configured to give proper advice 😛

light saddle
#

@tepid locust so i did that but it gives me this error when i click save
Your config is not valid: TypeError: Expected a value of type [object] for views but received undefined.

tepid locust
#

did you add that to the very top of the file in raw editor mode? you have to click the three dots twice apparently

drowsy summit
#

when splitting up ui-lovelace.yaml using includes, how do you set the order of the tabs/views? using yaml mode

light saddle
#

@tepid locust well an editor comes up with a white screen and says "edit config" at the top

tepid locust
#

and you added the code you pasted to the top?

light saddle
#

ya with resources: at the top

#

@tepid locust but when i use the raw editor it is blank

tepid locust
#

im not sure how else to go about troubleshooting this then, I dont use storage and cant view the editor screens for it since I am in yaml mode. I wish I could be more help but im at a loss. hopefully someone here who is more familiar with the other lovelace editing modes can help

solid minnow
#

sinker, you use Spotify component?

tepid locust
#

you pasted it in the raw editor and saved it right

#

no I do not

light saddle
#

@tepid locust I think it was a cache thing. i just tried incognito mode in chrome and it seems to show me code

tepid locust
#

when in doubt with lovelace ctrl+f5 (for chrome anyway) 😃

mild veldt
#

@raven nacelle for something like what @slender pond posted though, the actual format of display changes based on your screen size

raven nacelle
#

true....it may not be a perfect replacement, but it sure is significantly easier compared to using all the APIs and all

mild veldt
#

@solid minnow there are a lot of good resources in the pinned messages

#

@raven nacelle agreed

raven nacelle
#

honestly, that screenshot, while beautiful to look at, was not very functional

solid minnow
#

Ahh you're right iantrich - I thought there was, but when I checked earlier I swear it showed as blank to me which seemed off. Perfect.

light saddle
#

dumb question but how is everyone adding a custom card using the GUI. I click add. then it shows me the screen to pick a card if i want. I hit "skip" and then paste in my code but I am getting error Cannot read property 'startsWith' of undefine

#

scratch that I figured it out. there is so much to learn. I never know if i need to indent. dont indent. etc

fiery violet
#

I'm using the new lovelace web gui. I am trying to add a floorplan to it using a picture element card. But, it only shows up as a small rescaled picture? The actual image width is 1500px. I have added the panel: true line to the card configuration, but it is still not resizing?

mild veldt
#

@fiery violet try clearing your cache

fiery violet
#

I tried that, plus opened in a private tab as well. Also, tried Chrome and Firefox.

#

Been googling and the only thing that I've found others doing is adding the panel line. I am thinking of switching to using the yaml file for lovelace instead, this might work better?

mild veldt
#

no

#

open raw config editor and share what you have

#

~share

kind shellBOT
mild veldt
#

did you add panel: true to the card or the view?

#

it is an option for the view

fiery violet
#

Added to the card

#

Ah. Added to the raw config editor and it works

#

Removed from card

mild veldt
#

yeah, need to add that to the UI editor for the view still

#

note to self

fiery violet
#

Cool. Thanks for that.

mild veldt
copper mural
#

Anyone know which card I'll better choose to view multiline-sensors?

polar kelp
copper mural
#

I'll try one of them. Dont really understand the markdown-card tho. Can you explain it a bit? Should it work?

#

Seems like tho, as you state a carrige return in the text and it is on a new line underneeth.

#

Is it a js or module?

#

When include as resource.

#

But my lovelace just crash while try using it (as js) :/

polar kelp
#

It should be included as js

#

I believe it should work. I've seen other people use it for skolmaten.se for example.

copper mural
#

But its something in the code in the js I think. I dont get that red square. It cant even load the page.

polar kelp
#

What does your home assistant log say?

#

or your browser log?

copper mural
#

<host>....123/local/lovelace/card-tools.js?v=0.1:42:9 Uncaught TypeError: Cannot read property 'shadowRoot' of null

#

uhm

#

thats not the right card anyhow.

#

mapping values are not allowed here in "/config/lovelace/schoolfood.yaml", line 13, column 15

polar kelp
#

That error is almost always due to bad indentation

#

the c in content should be exactly in line with the t in type

copper mural
#

Your're right. Sorry.

#

Now I get the red square. I check more.

#

Seems to work now. Thanks alot for a lovely card 😃

atomic glacier
#

Okay. I got this working, BIG thanks to @polar kelp but not completely the way I would like…yet. Live camera feeds as background image. Just using random input_ select.state for images for now. Would like to have PIR detection designate the camera feed displayed. I know this has been done kind of with the custom : surveillance-card, but would like help if anyone has an idea of how to accomplish or a shove in the right direction...Thanks!

craggy cave
#

Hi all, I have just updated to 86.3 and the lovelace ui wont load. Gets stuck on the spinning circle. Any ideas? No sig logs and chacked for extra "_" in the entities etc.

lavish lily
#

what does the homeassistant log say? @craggy cave

kind shellBOT
polar kelp
#

@robust mulch You can probably do it with a template sensor

#

Or maybe not, since the entities are dynamic, I guess...

robust mulch
#

I tried with a template sensor, but I haven't succeeded probably because of the dynamic entities.
probably it should be done within the component.

split granite
#

Didn't I just answer that 😉

#

You asked in #botspam after all

polar kelp
#

If the component could do it (via a setting perhaps) that would be best, or maybe just expose the package name as an attribute.

vapid field
#

Is it some how possible to have the header toggle button of a card only allow switch off but not on/toggle?

#

I would like to switch all my lights off by these buttons but not on

azure sapphire
#

hi! A question... Iam trying to play with lovelace abit and everything is by default centered and not drawn over the whole pane... I found the pane: true setting, but it does not change anything. Any tips on how I can use the full pane-width with my cards?

split granite
#

panel not pane 😉

drowsy summit
#

it should be panel: true

#

jinx

split granite
#

🤣

azure sapphire
#

yeye it is panel: true in my config

#

😄

split granite
#

If you've set panel: true then you get a single full window card

#

But, only if you set it on the view

drowsy summit
#

and then lovelace still kinda screws with the way things are distributed within that card. you may wanna look at custom layout card to get more granular control

azure sapphire
#

right now its below the title of the first view

split granite
#

I suggest you re-read the docs 😉

azure sapphire
#

works now. well I did read them.. I just understood em wrong 😃

snow wren
#

@polar kelp re: entity-button, that's perfect. Thanks!

polar kelp
#

There's plans to add support for non-dimable lamps to the light card as well, btw.

snow wren
#

Sweet, glad to hear it. Is the entity-button card forces to all caps?

#

forced*

polar kelp
#

I think so

robust mulch
#

@polar kelp the package name is in the friendly_name attributes, but still contains the text I want to avoid.
I saw that I can change the friendly_name, so if I can create an automation that scan for each sensor that start with "sensor.seventeentrack_package*" and if the friendly name contains 'Seventeentrack Package: ' remove it an maintain the rest of the text, could be the solution

dire helm
# 
title: Scenes
entities:
  - entity: scene.film
    tap_action:
      action: call-service
      service: scene.turn_on
      service_data: scene.film```
#

Also, dear awesome community, is there a way to enlarge the icons?

solid minnow
# 
  - type: entity-button
    name: Turn Off Away
    tap_action:
      action: call-service
      service: climate.set_away_mode
      service_data:
        entity_id: climate.living_room
        away_mode: false
    entity: script.turn_off_away

Is this the proper way to make an entity button?

mild rock
#

hey all, is it possible to set a custom width to a glance card?

thin granite
#

I've heared something about font awsome being available as alternative to mdi, but I cant find anything in the docs?

prime umbra
thin granite
#

cool, thanks

solid minnow
#

Can someone show me their Raw Config Editor example what just a button (entity to 'do something on click' or a switch) on a page would look like? When I try to emulate it I end up with another tab, somehow, that's blank.

#

For instance

  - type: entity-button
    name: Turn Off Lights
    tap_action:
      action: call-service
      service: script.turn_on
      service_data:
        entity_id: script.turn_off_lights
    entity: script.turn_off_lights

just makes an "Unnamed View" tab with no details. I assume it has to do with my indentation but unsure.

polar kelp
#

Indentation.

winter hollow
#

it should be in cards of a view

polar kelp
#

Two more spaces before every line.

#

Maybe even four, depending on what's above it.

kind shellBOT
solid minnow
#

Whoops. Didn't realize iit was that long.

polar kelp
#

Your card has to go in the cards: section.

solid minnow
#

Your cards comment gave me what I need, yea. I get how Lovelace is expecting the format more now. Perfecto.

#

Second question

type: entity-button
name: Turn Off Away
tap_action:
  action: call-service
  service: climate.set_away_mode
  service_data:
    entity_id: climate.living_room
    away_mode: false
entity: script.turn_off_away

This is resolving to "Invalid Entity" but this is the name of the entity climate.living_room which makes me feel like I'm missing something. Any thoughts?

Put Entity on the top level and now it's just informing me that script doesn't exist. Is that script not the declared button above it? Am I conflicting uses?

raven nacelle
#

you need the script to be present for the entity button to work

solid minnow
#

I think that's what's confusing me. Isn't the script what I am identifying above with the tap_action?

raven nacelle
#

no...frontend is completely separate from the backend

glossy birch
#

anyone able to break ui-lovelace.yaml into multiple files? it is growing like crazy already!

raven nacelle
#

you need to define the script in your configuration

solid minnow
#

Ahhhh, so I'd have to create a script for every button I want to 'do something' on the front-end? it can't change states?

raven nacelle
#

yes, you can now have include in lovelace @glossy birch

glossy birch
#

cool - let me try @raven nacelle

mortal cape
#

with picture elements, is there a way to make state-icon or state-label invisible?

#

or do I need to use card-modder for that

raven nacelle
#

You can use some css styling @mortal cape

mortal cape
#

oh style: ?

raven nacelle
#

yes

surreal haven
#

Just starting with Lovelace and keep getting "Custom element doesn't exist" . I have the custom cards in www folder, restarted, am on 0.86.4, any tips ?

raven nacelle
#

did you include the file?

mortal cape
solid minnow
#

I'm thinking of switching to YAML mode vs Raw Config - Any real downside of this besides the UI validation in real-time?

surreal haven
#

for the "simple-thermostat"

#

there seems to be different opinions on needing quotes or not, but have tried both regardless

sudden lion
mortal cape
#

@surreal haven resources should start above everything I think

surreal haven
#

hmm

mortal cape
#

you have them in a view

surreal haven
#

that was it!

#

could have sworn I saw it like this somewhere

mortal cape
#

mmm...I haven't seen it like that anywhere until you 😄

sudden lion
#

If you've seen it like that doesnt mean its working 😄

mortal cape
#

positioning things in picture elements suuuucks...I can do this though

surreal haven
#

also true :> thanks all ❤

#

still kinda miss the old thermostat style, the boring simple one worked for me, that seems gone now

winter hollow
#

Put a climate entity in entities card

surreal haven
#

oh wow! great

#

so helpful

#

the reloading with a refresh is so nice, even cooler would be hot-reloading haha

mild veldt
#

@surreal haven use the UI editor and it will

stoic solstice
#

My UI editor just says "Not supported" :/

#

But that's an issue for another day

winter hollow
#

Because you are in yaml mode?

steel valley
#

just to be clear - HA uses Lovelace by default right?

raven nacelle
#

yes

#

starting 0.86

steel valley
#

hrm maybe things are all gunked up because I had an old version of HA installed on this PI that I just blindly updated 3 times in a row to get up to date

mild veldt
#

@steel valley be sure to clear your browser cached

steel valley
#

an entities card can't have it's own icon?

#

say if I wanted a card for bedroom stuff

#

also when I enable YAML mode, can I clear groups.yaml ?

mortal cape
#

@mild veldt I made an giant roku remote. way too big

mild veldt
#

Good work

agile ginkgo
#

Can I reset the UI and make it regenerate somehow?

#

I guess you have to manually delete the config file

mild veldt
#

remove ./storage/lovelace

mortal cape
#

Sat down and looked at it again. Thing is ridiculous

#

ok on mobile though

mild veldt
#

why put it in its own view?

#

i've been using thomas' popup-card with my roku-card with a lot of success

#

takes up no space until i need it

next aurora
#

So I setup lovelace using horizontal and vertical stacks in a It’s 4 x 5 matrix. It’s looks looks great on my desktop but on iOS it’s all messed up. Is there anything I can do about this ?

thorn matrix
#

In picture-elements is there anyway to hide state-label base on condition like state-filter where condition like :
not-state :

  • home - office
mild veldt
#

@next aurora if you're using stacks, they are what they are. you could create/hide items on iOS use thomasloven's state-switch

thorn matrix
#

So the issue i have 2 source of location , GPS and BLE(Room Level) and and i want to control which sensor to show base on that
If am home show ble sensor.if ble sensor not_home show gps

#

@mild veldt

#

I am teying to avoid Template sensor and checking if there another way

mild veldt
#

actually, i haven't tried it but you should be able to use the conditional card in picture-elements

#

would be custom:conditional-card

#

let me I try, I think that's true

#

hmm, not working. I could have sworn that worked at somepoint. Maybe we broke it as it was never intended to do that

thorn matrix
#

Oh man 😦

mild veldt
#

no, I swear I used to have a picture-elements card that did this. @polar kelp was the one who figured out it could be done...hui-conditional-card doesn't work either

#

I'm sure thomas will remember

#

@thorn matrix nevermind. I had a typo. It totally works

#

🎉

blissful kernel
#

I started splitting up my giant ui-lovelace.yaml file today using !include. I noticed that if I misspell the file name or provide the wrong path the whole Lovelace UI fails to load and HA defaults to the states UI.
Is that the expected behavior?

mild veldt
#

@thorn matrix you'll want to use type: custom:hui-conditional-card

thorn matrix
#

Do i have to download any custom js

mild veldt
#

rule of the thumb is hui-<regular card type>-card

#

no

thorn matrix
#

Awesome thank much man!

mild veldt
#

you can use any card, row or custom card in picture-elements

#

@blissful kernel no, but you could always just use the UI editor and never have to worry about that again

#

I don't know if it will make the next release, but bram has really enhanced the Raw config editor as well on the frontend

blissful kernel
#

I don't want to use the UI editor, I am a control freak... I like knowing where everything is... Lol

mild veldt
#

I mean, it would be right where you see it visually...but to each their own

blissful kernel
#

I really like having it in text files, use git for version control and host them in GitHub.

mild veldt
#

that's still possible when using the UI if you really want it. When you want to update github, open Raw config editor, copy yaml and paste into old ui-lovelace file

#

or you could do version control on your .storage/lovelace which is the same thing, just in json instead of yaml

trail stream
#

Can anyone point me to a simple yanl file to display a temp sensor?

split granite
trail stream
#

...

#

...

#
  • type: sensor
    entity: sensor.temperature
    name: TEMP
#

...

split granite
#

~edit @trail stream

kind shellBOT
trail stream
#

Anything else needed in the yaml file to make this display?

split granite
#

No, not if you've put it in a view

#

And, obviously, it goes in ui-lovelace.yaml, not configuration.yaml or anywhere else

trail stream
#

ugh....

split granite
trail stream
#

view:
title: ugh
type: sensor
entity: sensor.temperature
name: TEMP

split granite
#

~format @trail stream

kind shellBOT
#
:information_source:
Format Code:

@trail stream 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

split granite
#

Those are the quotes to the left of the 1⃣ key on many keyboards

#

You might be better off not using YAML mode and using the UI editor

trail stream
#

I think I'm using yaml mode.

split granite
#

See the link I posted about YAML mode - if you are you'll have those lines in configuration.yaml

trail stream
#

I'm just having trouble finding an example simple enough for me to understand

#

lovelace:
mode: yaml

#

Yep. It's there.

split granite
#

it's not simple though 😉

#

1500 lines...

trail stream
#

I'm looking for somethign 5 lines or less

#

I just want 1 number printed on the screen

#

no charts, no pictures, no cats

split granite
#

Just a number... use a glance card

trail stream
split granite
#

None of the stock cards are really designed to display a raw state like that though

trail stream
#

That's the only example file I could find that made any sense but I was unable to modify it to print a number

split granite
#

If the YAML is tricky, I'd honestly recommend you move to UI editing

trail stream
#

I think I missing the minimum requirements

#

views:
title: ugh
type: sensor
entity: sensor.temperature
name: TEMP

split granite
#

I think you're missing formatting your posts

trail stream
#

is there somethign else needed in this yaml file?

split granite
#

Can't tell, you're posting unformatted messes

#

I'll say it again though - stop messing about with the YAML, move to GUI mode. It'll be a lot easier for you

trail stream
# 
views:
title: ugh
type: sensor
entity: sensor.temperature
name: TEMP
split granite
#

The formatting there is totally off

#

~yaml @trail stream

kind shellBOT
split granite
# 
views:
  - title: Overview
    id: overview
    cards:
      - type: picture-glance
        title: "The house"
#

There's a snippet out of mine

trail stream
#

tada! Thank you!

# 
 - title: Overview
    id: overview
    cards:
      - type: sensor
        title: "The house"
        entity: sensor.temperature
agile ginkgo
#

https://pastebin.com/0eScKyp1 Tapping/clicking on Auto Bathroom Light brings up the info dialog instead of toggling as expected/specified. What am I doing wrong?

trail stream
#

Now I can sleep.

agile ginkgo
#

action: call-service doesn't seem to work either

#

gonna go back to an Entity Button until I figure this out. Takes up way too much screen space...

#

also doesn't show the state of it

lunar trench
#

So, how does one migrate from Lovelace Yaml mode to the "new" non-Yaml mode?

#

And also, is it possible to run Lovelace custom cards without yaml mode?

split granite
#

And yes

lunar trench
#

❤

errant plover
#

Should I be able to apply a theme to a panel view?

stoic solstice
#

Not sure if this is a lovelace question or not but are there any smaller media control cards? For example spotify and chromecast shows an image of what's playing. I don't want that.

old karma
old saffron
#

Hi All

solid minnow
#

In the past I feel like I remember all new sensors/switches automatically being added to the front-end. I do see the "Unused Entities" tab, but am I mis-remembering or is there a way I can re-enable that?

old saffron
#

Can someone point me in the right direction on how to turn an entity attribute into a sensor?

polar kelp
old saffron
#

thanks

polar kelp
#

@solid minnow entities are automatically added in auto mode only

#

If you have made any manual edits to your interface in the GUI editor, you can go back to auto mode by deleting the file <config>/.storage/loveace, which will remove all your customizations.

solid minnow
#

Thanks for that!

#

That is exactly what I needed.

stoic solstice
#

@old karma Thanks! That looks like what i want. Now i need to find the config dir and how to use this without a ui-lovelace.yaml file

gray quiver
#

Hi guys - anyone know if there is a card to display the contents of a group - eg group.all_devices

polar kelp
#

the custom ones auto-entities or group-card can do that

gray quiver
#

is there a better install guide ?

jovial kestrel
#

When using the iframe card, my CCTV image is zoomed in to the top left hand corner, making the card unusable. Is there a way to fit the complete image within the card?

gray quiver
#

I have worked it out nvm

#

or maybe not....

#

I have the ui-lovelace.yaml file