Lovelace frustrations

Configuration Frontend
1

I don’t usually do this but I feel I need to vent about the transition to the current Lovelace storage method.

When I upgraded to 0.84.x, I figured I would go with the GUI method for Lovelace rather than sticking with YAML simply because I get the feeling that GUI is going to push YAML aside in the near future. That seemed fine at first given that my Lovelace screens all still looked the same.

Where things are not so nice is once I try playing around with custom-cards. Since custom-cards need so much code entered it doesn’t seem possible / sane to try and do it in the GUI Editor, so I go to Raw Config Editor… Well…in there I find that the automatic conversion from my old ui-lovelace.yaml file has been butchered to the point that my code no longer follows the layout shown in the docs.

Now for example, this:

resources:
  - url: /local/custom_ui/tracker-card.js?v=0.1.5
    type: js

…become this:

resources:
    url: /local/custom_ui/tracker-card.js?v=0.1.5
  - type: js

where the ‘-’ symbols are all messed around. But it gets worse. That was just the first few lines. With the rest of my near 1000 lines of code, the code for each GUI element (say a media_player) would be all upside-down, with the lines that were previously at the top of that section, being at the bottom. If I try to add new code in the Raw Config Editor and follow the rules of the docs, just like I did in my old YAML days, I get Lovelace syntax errors and can’t save. Thats because all the '-'s are in the wrong place.

So yesterday I copied all the ‘messed up’ lovelace code out of the Raw Config Editor and pasted it into the Hassio Cloud9 IDE and spent 3 hours re-configuring the '-'s to match the rules in the Lovelace docs. Now if I add extra entities and paste it back into the Raw Editor, it is happy and accepts my alterations… Hit save, all seems good…until I restart HA and go back in there and find that it has been jumbled up again… try at add more code, NO, the '-'s don’t suit the syntax rules. This is CRAZY!

My current solution is to keep a clean version of the Lovelace code in a file, make changes there and paste it back into the Raw Editor. This is not going to work long term.

On top of this, how the f@#! do you create nested vertical-stacks and horizontal-stacks using the GUI Editor? No matter what I try, it rejects the syntax. I really feel like the YAML method was better simply because HA didn’t mess with what I typed in. I really want the GUI editor to work as I think it is the way of the future for this project, however its current implementation is far from where it needs to be. Custom-cards are awesome but I feel there needs to be a simple way of pasting them in without them causing dramas with the rest of the GUI. Say if they can be containerized some how.

Is it just me having trouble with Lovelace getting jumbled up since 0.84 or what? How is everyone else dealing with adding GUI elements manually?

2 Likes
2

1000% not just you. I HATE that is mangles it and you’re 100% right it is a nightmare doing anything like stacks.

I am doing exactly the same as you. I still have the old ui-lovelace.yaml that I maintain and I copy and paste into the raw editor every friggin time I make a change.

Could not agree with you more. It seems to me like a rush change when they abandoned making lovelace the default in 0.85 and they cobbled this abortion together then…

3

Ok cool. I was starting to think it was just me given that a quick forum search didn’t bring up other peoples rants… and I hate ranting on forums like this, I just don’t do it. HA is awesome but this latest change has made configuring the GUI a nightmare.

4

I went the same path, I thought it was me because i’m pretty new to HA and lovecace and not a programmer at all. So i’m glad to read that is is not me. I was at the point to switch to yaml mode but I think a will use your trick of maintaning a seperate structured file which i can copy into the Raw editor.

5

Why you all prefer this, over continuing with yaml and wait until gui works as expected? (just curious l

6

I guess because I wanted to see what the GUI editor could do. If we stick with YAML mode, how will we really know otherwise? I guess I didn’t want to be ‘left behind’ in the old world when the future is a GUI editor.

Can we swap back now that we have gone for the GUI mode? Is it easy to switch back and forth and test things along the way?

7

You can use yaml mode and then reimport again but I don’t see much point in doing that and not much different to cut/paste now… They will keep updating the GUI and I don’t plan on going back and forth.

8

Hi, I was waiting for a wysiwyg interface since a long time !

What I initially though :
When lovelace become the new default UI, ui-lovelace.yaml disappear and configuration.yaml become the only file to add devices to the interface.
Separate the declaration of the devices from the UI is not a bad idea, but…

In reality at this time it is a little complex to understand. If I understand clearly there are 3 modes in lovelace :

  • UI mode
    • Autogenerated
    • Static
  • yaml mode

UI mode is nice but I was surprised that it doesn’t generate a real yaml : you can’t edit the file directly : you have to use the “raw config editor” from the UI to find a correct yaml file…
So it’s possible to add Custom Cards using the “raw config editor” :

So at that time the idea could be to

  • regenerate a fresh lovelace config :
    • suppress “config.storage\lovelace”
    • reboot
    • Go to your lovelace URL and click on the “…” on the top right , then “configure UI” -> “take control”
      Now your lovelace UI is fresh and static
  • add your custom cards :
    • Now edit the yaml of lovelace directly in the UI : click on the “…” on the top right , then “configure UI” -> “raw config editor” and add custom cards to your resources

This way of working is just to complex…
There should be only a yaml file for lovelace,Then the possibilities to :

  • edit it outside the frontend , directly with text editor
  • import an unused entity by drag & drop in the UI (or move an entity by drag & drop)
  • It should be possible to add or duplicate custom cards directly from the UI mode (with a preview)
  • …
9

Is there some reference indicating how to turn lovelace off?
I’m just not liking the big graphical cards, I prefer having a straight list of switches.
For example I can’t now seem to make the Bose cards go away or the Ecobee cards go away. Don’t need the huge gauges.

10

Yep… it’s just you. :slight_smile:
Seriously, I went the same path earlier and have switched back to hand creating/editing my own .yamls. I am just more comfortable formatting and logic flow writing in my own style that makes sense in my own mind.

11

You can go to dev tools in the side panel down the bottom press I Then in the right hand window there is a button t make states the default and to load the states page.

However, if lovelace does not look how you want it to that is because of the cards you are using. Lovelace can look identical to states unless you change things so you have obviously changed things how you DON’T like them - but that’s on you, not lovelace.

12

Sorry my error may be that I don’t even know that the cards I’m seeing are or are not Lovelace :slight_smile:

I haven’t changed anything whatsoever but the default view looks like (don’t even know where I would change Lovelace just looking for the off button):

image
image1511×1089 80 KB

13

Click the three dots in the top right corner. There you can enter the edit more for the UI.

Check this link for instructions:

14

So the media player… that is a default one and you can delete it by removing that entity/card. The thermostat - I thought that was one you would have had to have added but you can delete that as well. As per other post here, you can edit the GUI to your liking easily.

It may be that you are using auto-generated Lovelace in which case you must take control to be able to edit it.

15

Not sure why but the front end seems to randomly show the list format (as I want) or the card format for ecobee and media player. It’s a surprise which will be the format when I open the front end. Not consistent. Also, skybell is sometimes there and sometimes not. Unclear if that’s more of a web service reliability problem on the part of Skybell.

Here’s my groups.yaml I think the only thing I should see is the first default group, all the others shoudl not be visible right?:

default_view:
  view: true
  entities:
    - group.living
    - group.harmony
    - group.kitchen
    - group.office
    - group.power
    - group.bedroom
    - group.family
    - group.ecobee
    - group.cameras
    - group.vacation

family:
  name: Family
  entities:
    - device_tracker.a4d931a3f10c
    - device_tracker.b4f1dae9a8e6
    - device_tracker.ble_2c41a1f5e47e
    - device_tracker.ble_f1c6df09fb53
    - device_tracker.ble_ec0c64f4fab1

cameras:
  - camera.front_door

bose:
  name: Bose
  entities:
    - media_player.bose_left
    - media_player.bose_right

office:
  name: Office
  entities:
    - light.office
    - light.vestibule
    - light.hue_color_lamp_1
    - switch.wake_on_lan
    - group.bose
    - light.hue_lightstrip_plus_1
    - switch.monitor
    - switch.guitar

vacation:
  name: Vacation
  entities:
    - input_boolean.vacation_mode

ecobee:
  name: Ecobee
  entities:
    - climate.upstairs
    - climate.downstairs
    - climate.attic

power:
  name: Power
  entities:
    - scene.shutdown
    - scene.startup

bedroom:
  name: Bedroom
  entities:
    - light.hue_color_lamp_7
    - light.hue_color_downlight_1

kitchen:
  name: Kitchen
  entities:
    - light.ge_14294_dimmer_1_level
    - light.ge_14294_dimmer_2_level
    - light.ge_14294_dimmer_3_level

living:
  name: Living Room
  entities:
    - light.ge_14294_dimmer_4_level
    - light.ge_14294_dimmer_5_level
#    - switch.christmas_tree
#    - switch.christmas_lights

harmony:
  name: Harmony
  control: hidden
  entities:
    - scene.movie_lights
    - script.pause_the_show
    - script.mute_the_sound
    - script.switch_the_speakers
    - script.volume_up
    - script.volume_down
    - switch.subwoofer