My Lovelace Plugins

[Mariusthvdb (Marius)]

@thomasloven

This started as a way to split the lovelace-ui.yaml file into more manageable pieces (which I later found out could be done by using the normal !include directive). Then it grew into something much more.

To use the tool, you run it in your config directory, and it will take the file lovelace/main.yaml and automatically generate lovelace-ui.yaml from it. In the most basic form it will just be a copy, but if your file contains !inclued filename the contents of the file filename will be inserted at that point.

HI,

Please allow me this total Lovelace noob question. since you’re the first and only person I found writing about one of my Lovelace worries: how to manage this huge ui-lovelace.yaml…

I have that in /config/.

how do I proceed to have the includes? I can’t call the

views:
  - !include view_Home.yaml
  - !include view_Lights.yaml

from within ui-lovelace.yaml directly, !include isnt allowed

with the above in /config/lovelace/main.yaml,

the !include /lovelace/view_home.yaml is not found and hence not displayed

How do I point HA to the /lovelace directory? In configuration.yaml?

[Vlavonvidden]

If I may respond: You don’t use includes in ui-lovelace.yaml, but in /config/lovelace/main.yaml (or other files in this folder).

The tool will generate ui-lovelace.yaml which will still be a huge file, but at least with this method you have the opportunity to split your “source files”, which is very convenient.

[Mariusthvdb (Marius)]

@Vlavonvidden

If I may respond: You don’t use includes in ui-lovelace.yaml , but in /config/lovelace/main.yaml (or other files in this folder).

The tool will generate ui-lovelace.yaml which will still be a huge file, but at least with this method you have the opportunity to split your “source files”, which is very convenient.

Thanks, I understand that, and already have a ui-lovelace.yaml…
now trying to manually split that into the
/config/lovelace/main.yaml

question:

• how does HA know where to look for the config/lovelace/main.yaml file
  is that a setting in configuration.yaml?
• If i have this main.yaml and use !include view-Home.yaml, where does this file go? Also in config/lovelace/ ?
• what is the id: for?
  Cause thats what I tried now, and it still doesn’t see the files…

[Vlavonvidden]

• how does HA know where to look for the config/lovelace/main.yaml file
  is that a setting in configuration.yaml?
  -> I think it’s a setting of the plugin, that might be hardcoded. Don’t take my word for it though.

• If i have this main.yaml and use !include view-Home.yaml, where does this file go? Also in config/lovelace/ ?
  -> Yes, you can put your files in the same folder. You might also put them in subfolders but I haven’t tried that yet. Here’s a screen of my /config/lovelace folder:
  

  

And inside _main.yaml (among other things):

• what is the id: for?
  -> Not sure what you mean here, sorry

[klogg]

Can someone please tell me how to include these custom cards in the tracker card?
Thanks.

[Mariusthvdb (Marius)]

@Vlavonvidden

how does HA know where to look for the config/lovelace/main.yaml file
is that a setting in configuration.yaml?
-> I think it’s a setting of the plugin, that might be hardcoded. Don’t take my word for it though.

thank you!
i have the 2nd and 3rd alright, so its a matter of getting the 1st step: how to have HA know where to look for the main.yaml.
The py script only creates the ui-lovelace.yaml, and sets nothing in configuration.yaml or other files ( I tested that)

must be configurable in configuration.yaml (at least, for users not having set Lovelace as default yet)
Or is it set in the resources section of the ui-lovelace.yaml? Can you have a look in either of these files please

[Vlavonvidden]

To me, it does not seem that you can configure where to look for main.yaml. The location seem to be defined in the script itself:

Question though: Why not put main.yaml where it should be, in /congig/lovelace/ ?

[Mariusthvdb (Marius)]

That’s where I have it…

[Faecon (Jo)]

I get this error : Custom element doesn’t exist: card-modder. What is wrong ?
card-modder is in HA/www/custom_ui

resources:
  - url: /local/mini-media-player.js?v=0.9.4
    type: module
  - url: /local/slider-entity-row.js?v=2d9e00
    type: js
  - url: /local/custom_ui/state-card-custom-ui-dbg-es5.html
    type: html
  - url: /local/ext-weblink.js?v=0.3.2
    type: js
  - url: /local/card-modder.js?v=1c480b
    type: module
  - url: /local/useful-markdown-card.js?v=54a046
    type: js
  - url: /local/fold-entity-row.js?v=9fbaab
    type: js  
  - url: /local/tracker-card.js?v=0.1.5
    type: js
  - url: /local/column-card.js?v=e7fb09
    type: js               
  - url: /local/button-card.js
    type: module
    
title: "   "
views:
  - title: Test
    icon: mdi:home-variant
    background: center / cover no-repeat url("/local/back.png") fixed
    cards:  
     - type: custom:card-modder
       style:                 
         background-image: url("/local/cardbackK.png")
         background-repeat: no-repeat
         background-color: rgba(0,0,0,0.0)
         background-size: 100% 68px
         border-radius: 20px
         border: solid 1px rgba(100,100,100,0.3)
         color: grey
         box-shadow: 3px 3px rgba(0,0,0,0.6)      
       card:          
         type: glance
         title: Temperaturen      
         column_width: calc(100% / 6)
         entities:
           - sensor.fibaro_system_fgms001zw5_motion_sensor_temperature
           - sensor.fibaro_system_fgms001zw5_motion_sensor_temperature_2

[petro]

If its in www/custom_ui you need to specify that in your path. Local is www.

  - url: /local/custom_ui/card-modder.js?v=1c480b
    type: module

[Faecon (Jo)]

@petro

www/custom_ui

how stupid can I be

[petro]

We’ve all done it. Sometimes those custom cards have to be place into specific folders because someone hardcoded the paths. I wouldn’t worry about it.

[thomasloven (Thomas Lovén)]

The actual answer to your worries about the huge ui-lovelace file is actually to have a bit of patience until the GUI editor is available. A beta version is scheduled to be released this week (possibly within hours). Once that function is finished, there should be no need to edit ui-lovelace.yaml manually at all.

If you still wish to edit it manually, you don’t even need lovelace-gen to be able to use !include. The tool was created at a time when it was said that !include support was going to disappear, but the plans have changed, and the support will stay.

That said, there may still be other reasons for advanced users to use lovelace-gen, and if you feel the need then it is as @Vlavonvidden says; lovelace-gen will overwrite ui-lovelace.yaml, and you should not touch that file manually if you use the tool.

For how to make it do it’s thing, please refer to the README file on github.

@Mariusthvdb

The py script only creates the ui-lovelace.yaml, and sets nothing in configuration.yaml or other files ( I tested that)

That’s all it’s supposed to do. What did you expect it to set, and why?

[Mariusthvdb (Marius)]

All I want is to make a more manageable ui-lovelace.yaml, and have it use the includes I set in /lovelace/main.yaml

Right now I have a functioning ui-lovelace, a folder /config/lovelace, and in it a main.yaml and several view-files.yaml.

my lovelace frontend doesn’t show these files and only shows what’s in the ui-lovelace.

What doI need to add to have it display the files referenced in Main.yaml.

I won’t touch the lovelace-gen tool any more…
thanks!

btw I did read the readme, but it is about the lovelace-gen… but that is not really explicit abut how to structure the files manually of course

[Vlavonvidden]

What doI need to add to have it display the files referenced in Main.yaml.

I’m not sure what is your end goal to be honest. If I understand correctly, you want to create several view_files that will be used in ui-lovelace, right ?

If so, you must use the script with main.yaml where you reference your view_files, and the content will be included in ui-lovelace.yaml.

I’m sure you know that, but you also must use the command lovelace_gen in order for the tool to generate the ui file:

I hope that will help you solve the issue you’re facing. The tool is very useful !

[Mariusthvdb (Marius)]

@Vlavonvidden

’m not sure what is your end goal to be honest. If I understand correctly, you want to create several view_files that will be used in ui-lovelace , right ?

right. just like we did with the groups before in regular yaml. Not have a huge file, but nicely organize that. We use the group: !include_dir_merge_named groups for that in configuration.yaml

@Vlavonvidden

If so, you must use the script with main.yaml where you reference your view_files , and the content will be included in ui-lovelace.yaml .

Are you saying I need to first create all these files in Main.yaml, and then the tool creates the ui-lovelace out of that? If so, I completely misunderstood the instructions…

I had 2 of these view_groups.yaml in folder /config/lovelace, ran the script and an ui-lovelace.yaml was made with the content of these view-groups, so the other way round…

[Vlavonvidden]

Are you saying I need to first create all these files in Main.yaml

Yes (well you need to include them).

and then the tool creates the ui-lovelace out of that?

Yes as well.

I had 2 of these view_groups.yaml in folder /config/lovelace, ran the script and an ui-lovelace.yaml was made with the content of these view-groups, so the other way round

That is the correct way to use the tool.

Allow me to explain the way I use it, so we’ll hopefully be on the same page.

• I created a file call main.yaml in /congifg/lovelace/.
• In the same folder, I created several view_file.yaml.
• I referenced each one of them in main.yaml using ! include view_file.yaml.
• Then, I ran the script using the command I mentionned earlier.

→ Result: ui-lovelace.yaml is created. I never edit this file since it’s auto generated.

I hope my explanations are clear enough

[thomasloven (Thomas Lovén)]

You are supposed to create the directory lovelace/, the file lovelace/main.yaml and any other files you wish to include in lovelace/whatever.yaml.

When you run the tool, the file ui-lovelace.yaml will be overwritten with the contents of lovelace/main.yaml and also any files that are included in lovelace/main.yaml.

If it’s not too much bother, could you please let me know what you thought would happen, so that I may improve the doumentation? Thank you!

[klogg]

Seriously.
Someone must know.
All I want to know is where, if anywhere, is the .json that I need to include in order to have these cards appear in the tracker card?

If I missed it in the docs then I apologise

@klogg

Can someone please tell me how to include these custom cards in the tracker card?
Thanks.

[Mariusthvdb (Marius)]

Thanks!
One more question please before I start reconfiguring…
If I have all my files in the /lovelace/ folder and everything referenced in the /lovelace/main.yaml, and run the tool so it creates the ui-lovelace.yaml, wouldn’t that leave me with twice the code?
A set of manageable separate files with all the code, and 1 huge ui-lovelace.yaml, with all that same code? Mind you, my ui-lovelace.yaml is already 4000 lines, and I havent even started adding all the whistle and bells…