Break functions into separate yaml file for re-useability

[RogerSelwyn]

I'm planning on doing multiple floorplans for different buildings. I don't really want to build that into one massive floorplan on in one Lovelace View. For my first floorplan I've been trying to break out re-useable item into separate yaml files. In the most part I've achieved this using various types of include. The below shows my current structure for a single View.. Ideally I'd like to move the Functions out so they can be re-used. Is this feasible, I can't figure out the correct yaml.

title: Downstairs
path: downstairs
panel: true
theme: floorplan-tutorial
badges: []
cards:
  - type: horizontal-stack
    cards:
      - type: custom:floorplan-card
        full_height: true
        config:
          defaults:
            tap_action: more-info
            hover_action: hover-info
            hover_info_filter: !include hover_filter.yaml
          image: /local/floorplan/downstairs_optimised.svg
          stylesheet: /local/floorplan/downstairs.css
          functions: |
            >
            return {
        
              overlayStyle: (entity) => {
                ...
              },
              
              bMod: (entityTime, entitySun) => {
                ...
              }
            };
          rules: !include_dir_merge_list downstairs/
            
      - !include general/batteries.yaml
      - !include general/weather.yaml
      - !include general/media.yaml

[exetico]

Hi,

Have you checked this?
https://youtu.be/7AU5i-WUUxw

From 4:57~ or so 😊.

Else I'll try and create a sample pack, at some point.

[RogerSelwyn]

Thanks, I can see how you have broken out the views, which is the same as in my code above (well my code is slightly different, but you should be able to see I have some of the cards included in the same way).

What I can't see is how to break out the Functions key, because the content of that isn't yaml, it is javascript and the ui editor doesn't seem to like me creating a file with just that content in, and I don't think you can do a include for something that isn't part of a list.

interesting video though, because I ought to VS Code for editing, I use it a lot for integration development, but haven't for this work as yet.

[perlchamp]

hi,
maybe too late: i would like to see the content of your downstairs folder

Many thanks in advance!

So long
Pc

[RogerSelwyn]

SVG and CSS are not posted, but the yaml is here - https://github.com/RogerSelwyn/Home_Assistant_Config/tree/master/custom/lovelace

[perlchamp]

Thank you. You're welcome.
I think i did the same, but doesn't work (the 'big' file works instead)...
here is the directory :

Here is the doku.yaml:

and here is a file from rules-directory:

My system is up-to-date.

Any ideas, Roger?
Many thanks in advance!

So long
Pc

[Trzinka]

Hi perlchamp

Try this:

            - entity: sensor.esp_8266_ip50_lichtstaerke_wz
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state) + " lux" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp
              tap_action: false

            - entity: sensor.esp_8266_ip50_luftdruck_wz
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state) + " hPa" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp
              tap_action: false

            - entity: sensor.esp_8266_ip50_luftfeuchtigkeit_wz
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state) + " %" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp
              tap_action: false

            - entity: sensor.esp_8266_ip50_temperatur_wz
              state_action:
                - service: floorplan.text_set
                  service_data: >-
                    ${(entity.state !== undefined) ? Math.round(entity.state) + " °C" : "unknown"}
                - service: floorplan.class_set
                  service_data:
                    class: static-temp
              tap_action: false

[perlchamp]

Hi Robert,
thanks, but:
what is the goal of that?
What does it prevent, what does it force? I don't understand, yet.
The values are displayed correctly in my floorplan.
What does static-temp?
Why to set a new class ?
Please some reasons, which are behind that...
I did see that in your examples somewhere, but can't remember where ?
What does your answer refer to?

So long
Pc

[Trzinka]

Hi.

Now I really don't know what you expect from us?

• Do you expect us to make a floor plan for you?
• Do you expect an explanation of individual items, not to read the instructions?
• Do you expect you to do something your own way and seek help from us where the mistake is or how to proceed?

In short, I offered you help to learn how to make a floor plan card (I warned you that you need some prior knowledge), I calibrated you on the path to follow (I warned you that you will need time and will).

I really tried to help you start making your floor plan card (maybe even too much) but I see that you are looking for some shortcuts!

To conclude: I give up!

[perlchamp]

Hello Robert,
This is explicitly about breaking yaml code.
I tried your code, but even that doesn't break the code. Since you didn't mention anything in your answer, I took the liberty of asking this question. Maybe you missunderstood...
Everything is working as it should for me:

This works fine, too:

This is, when all states are 'on'. The dots are there, because these sensors are offline...:

you can see here:

• open or tilted windows
• opened doors
• closed roller shutters
• when a heater is on
• when LED strips light up
• when ceiling lights are on
• the power consumption of individual devices

for the drawing i need 6 hours...

So long
Pc

[perlchamp]

i want to share this (maybe this could be helpfull for somebody):
as you know, i use a dot in the text-object in my svg-file, cause if i'm working with/on it in inkscape, i want to see, where is the anker of the text-object.

does not work for me :

does work for me:

so long
Pc

[RogerSelwyn]

Sorry, no idea

[perlchamp]

Ok.
what is, if you break your yaml at the 'defaults:' -section. These two additional (standard) lines shouldn't bother you...

[perlchamp]

the question is still unanswered:
is there a way to break the floorplan yaml-file at the rules ? i want to 'outsource' the rules like i did in the configuration.yaml:
configuration.yaml:

...
sensor: !include_dir_merge_list sensoren/
template: !include_dir_merge_list templates/
scrape:  !include scrapes.yaml
...

this is not possible in floorplan.yaml:
rules: !include_dir_merge_list rules/

i want to have the rules per room (-> per file) in a folder
IS THAT POSSIBLE ?
if not, why not?

Many thanks in advance !

[exetico]

Please limit the options of errors, while doing this.

Start with a single folder, with a single rule. If that works, add another rule, and keep repeating, If it works with two rules, in two different files, you know that the solution itself work, but that you're fighting with a formatting issue, unrelated to how I recommend you, to split our your configuration (floorplan rules) 😄.

A single rule looks like this:

name: Temperatur Loft
element: sensor-attic
entities:
  - sensor.aqara_sensor1_temperature
state_action:
  - service: floorplan.text_set
    service_data: '${entity.state ? Math.round(entity.state * 10) / 10 + "°" : "unknown"}'

It's located here:

I can't spot any issues with your rules: !include_dir_list include/-like line.

You're stating that it doesn't work, however:

1. Please limit your case to one rule, or maybe two
2. Check if things works, after you've moved one or two rules, one in each file, possibly in the same folder, or even subfolders, if you like
3. Report back what Home Assistant reports

You must be facing a formatting issue, or similar.

Just a input, not related to this:
Personally I keep my YAML files outside my www folder. There's no reason to store them there. Having them in another folder, but not within the www folder keeps them a bit more secure. I know, there's possibly nothing critical about exposing them in the www folder, but... better safe than sorry. 😄

[perlchamp]

ok, thank you. I will do this ... and report.

[perlchamp]

Personally I keep my YAML files outside my www folder. There's no reason to store them there. Having them in another folder, but not within the www folder keeps them a bit more secure.

now i have the ha-floorplan folder in the same directory as the configuration.yaml, but how to refer?
in the dashboard -> raw editor i did try:

config: /config/ha-floorplan/home.yaml
config: config/ha-floorplan/home.yaml
config: /ha-floorplan/home.yaml
config: ha-floorplan/home.yaml

nothing matched, got the error:

[perlchamp]

I'm now a little bit nervous. I had a dashboard with a doku floorplan. Didn't touch that. Now there the same error:

custom element doesn't exist: floorplan-card

The only thing in my mind is, that maybe the ressource in
/hacsfiles/ha-floorplan/floorplan.js?hacstag=1883234941048

will not be found or something else, cause i did remove it in another folder, and them back again.
WHAT to do now ?
Both floorplans are with the same error, one of them i didn't touch.

And yes, i did reload ha and clear all the caches the way i did before...

[perlchamp]

Solution for the "doesn't-exist-floorplan-card":
removed all the floorplan files to the original directory (/local/community/ha-floorplan)
Now both dashboard will displayed

in other directories both won't displayed.

[perlchamp]

Report:
no, no, no, it doesn't work

Explanation:
i use two home.yaml files (home.yaml and _home.yaml) and rename them, when needed (home.yaml to __home.yaml and _home.yaml to home.yaml)

This is the content of the 'big' home.yaml named '_home.yaml':

image: /local/community/ha-floorplan/_grundriss_wg4-ha29.svg
stylesheet: /local/community/ha-floorplan/home.css
cache: false
log_level: info
console_log_level: info

defaults:
  hover_action: hover-info
  tap_action: more-info

rules:
  # WOHNEN RAUMWERTE #
  - entity: sensor.esp_8266_ip50_temperatur_wz
    element: sensor.esp_8266_ip50_temperatur_wz
    state_action:
      - service: floorplan.text_set
        service_data: '${entity.state ? entity.state + " °C" : "--"}'
...

and this the content of the testing one, named home.yaml :

image: /local/community/ha-floorplan/_grundriss_wg4-ha29.svg
stylesheet: /local/community/ha-floorplan/home.css
cache: true
log_level: info
console_log_level: info

defaults:
  hover_action: hover-info
  tap_action: more-info

rules: !include_dir_list rules/
#rules: !include_dir_list /rules
#rules: !include_dir_list /rules/
#rules: !include_dir_merge_list rules/
#rules: !include_dir_merge_list /rules
#rules: !include_dir_merge_list /rules/

You see, i did try everything, and after a change i always did restart home assistant...

This is the directory:

You can see, where i placed the rules folder. Its content, as you can see, only contains one file:
The content of rules_wz_temperatur.yaml:

name: Temperatur-WZ
entities: sensor.esp_8266_ip50_temperatur_wz
element: sensor.esp_8266_ip50_temperatur_wz
state_action:
  - service: floorplan.text_set
    service_data: '${entity.state ? entity.state + " °C" : "--"}'

The values are the same as in the 'big' yaml-file which works !
The name value i coppied from the overview-dashboard (Klick on the entity -> gear-symbol-> klick into name field -> after klick it will displayed 'Temperatur-WZ', so i took this name).
More 'less' doesn't go.
To compare, here is the part of the big yaml-file:

rules:
  # WOHNEN RAUMWERTE #
  - entity: sensor.esp_8266_ip50_temperatur_wz
    element: sensor.esp_8266_ip50_temperatur_wz
    state_action:
      - service: floorplan.text_set
        service_data: '${entity.state ? entity.state + " °C" : "--"}'

So, please, take the time to read every letter. It didn't work, it doesn't work, will it work ?
I use ha-os up-to-date. You maybe use docker or something else?
The breaking doesn't work. The big file does!

[EDIT]
i found a way for more 'less':
in the home.yaml i replaced this
rules: !include_dir_list rules/
with this:
rules: !include rules.yaml

i tried both variants... 1:

# WOHNEN RAUMWERTE #
name: Temperatur-WZ
entities: sensor.esp_8266_ip50_temperatur_wz
element: sensor.esp_8266_ip50_temperatur_wz
state_action:
  - service: floorplan.text_set
    service_data: '${entity.state ? entity.state + " °C" : "--"}'

2nd:

  # WOHNEN RAUMWERTE #
  - entity: sensor.esp_8266_ip50_temperatur_wz
    element: sensor.esp_8266_ip50_temperatur_wz
    state_action:
      - service: floorplan.text_set
        service_data: '${entity.state ? entity.state + " °C" : "--"}'

after every adjustment i restarted HA and clear the caches...
THE BREAKING DOES NOT WORK !
Is your system up-to-date?, cause the doku is this not !
And your video ~5.00 don't deliver any answer for this problem !
Did you test it?
If you have a working system, then please share the directory and the content of the files which are important !
Or is there a add-on that has to be installed ?
Or one, that must not be installed ?

Many thank in advance !
[/edit]

[EDIT 2]
i did found an error...
the content was wrong, i had:

name: Temperatur-WZ
element: sensor.esp_8266_ip50_temperatur_wz
entities: sensor.esp_8266_ip50_temperatur_wz
state_action:
  - service: floorplan.text_set
    service_data: '${entity.state ? entity.state + " °C" : "--"}'

now i have:

name: Temperatur-WZ
element: sensor.esp_8266_ip50_temperatur_wz
entities:
  - sensor.esp_8266_ip50_temperatur_wz
state_action:
  - service: floorplan.text_set
    service_data: '${entity.state ? entity.state + " °C" : "--"}'

... but didn't solve the problem... it does not work !
[/edit 2]

[exetico]

Yes, my system is up to date, and follow the latest standard... I have provided a full example, on how I've splittes my YAML, and it do work just fine.

As I understand that you're struggling to get it working, I'll see if I can find some time tomorrow, and create a minimal example-payload.

Also:
Why haven't you provided the thrown error from HA, as I requested?

And please stop creating new answers, over and over again, as requested before. Use the same thread, where we have a ongoing discussion – not a new answer.

[perlchamp]

THAT would be great. It doesn't have tomorrow or this weekend. This, mine issue, is not critical. One variant works (the 'big' file), so... please if you won't forget it, that would be enough for the moment.

[perlchamp]

@exetico :
if you create a minimal example-payload, then please take a standard entity like 'weather.forecast_home'. I hope you will find some time in the near future.
Many thanks in advance!

[exetico]

@perlchamp: Please take a look at #323 (comment), and answer in that thread, if you have any inputs.

[perlchamp]

It's STILL unanswered...

[OzGav]

Seriously we aren’t your minions. We do this in our SPARE time.

[perlchamp]

...said the man who linked - as s e r i o u s answer - to a jinja-template-site although the template that caused the problem was a javascript shorthanded one, lol.

And as I mentioned before, I didn't put a gun on your chest to help me.
If the other person wants really to help seriously, however, THAN I expect not to be fed with standard answers, and I expect that you read my thread to the end, and not already publish an answer (which does not match the problem) after the first detected keyword.

If you feel like a minion by helping others than maybe you have a big problem per se...
A functioning example is always welcome.

Have a nice day !

[perlchamp]

[exetico]

Hi,

Please do follow my guidance on how to use GitHub Communities. You're making new answers often, instead of posting new comments, to a existing answer. That's not how it's done. I've tried to point that out a few times.

Here's a image to illustrate that:

You're making noise, by not following the way it's meant to be, and it's very hard to get a chance, on what's actually a answer; and what's just a comment.

Please try and do so :-) That's much appreciated. Thanks!

[exetico]

Here's a way to separate rules into multiple files. Note that you'd place one rule in each file, in the example.

This is not how you're able to break multiple functions, into separate files. I think you're able to adapt below solution, but I've not tested that.

Your dashboard needs to be in YAML mode, for this to work.

I've loaded case7 with the following yaml:

  - title: Case7
    badges: []
    cards:
      - !include ../www/floorplan/discussions/case7/case7.yaml

And here's case7:

case7.zip

Here's the content of case7:

.
├── case7.css
├── case7.svg
├── case7.yaml
└── my_floorplan_rules
    ├── action_buttons
    │   └── reload_on_click.yaml
    ├── rooms
    │   └── livingroom
    │       └── lights
    │           └── primary-light.yaml
    └── strings_to_display
        ├── intro_text.yaml
        ├── time_info_1.yaml
        └── time_info_another.yaml

7 directories, 8 files

This is tested on my latest Ha instance in Docker, and HAOS.

As you can see, the case7 are located deep within the www folder. Personally I do not recommend to expose your YAML files in the www-folder, but this is just to keep all things in one place.

By opening case7.yaml, you'll find the following:

type: vertical-stack
cards:
  - type: markdown
    content: >-
      **Question**: How do I separate YAML files?

      [Reference](https://github.com/ExperienceLovelace/ha-floorplan/discussions/323)
    title: Case 7
  - type: custom:floorplan-card
    full_height: false
    config:
      stylesheet: /local/floorplan/discussions/case7/case7.css
      image: /local/floorplan/discussions/case7/case7.svg
      console_log_level: debug
      defaults:
        hover_action: hover-info
        tap_action: more-info
      rules: !include_dir_list my_floorplan_rules

Here I'm pointing to my_floorplan_rules as my folder with rules. Note that I have plenty of sub-folders, and multiple rules inside a given folder. But always only a single rule, inside each file.

This is standard YAML handling, but I understand that it can be complex to figure out. So here's a full demo.

I hope to find time to walk through this in a video, at some point.

See the other answers for more content: #323 (reply in thread)

[perlchamp]

Why did you use THIS reply and not the way i should do ?
Thank you, but this is not, what i was asking for.
My situation:
i have a home.yaml in the floorplan folder (see the pictures above and see the doku...). And in this yaml i want to break/outsource the rules. I NEVER talked about the raw-configuration-editor and dashboard-yaml-code. But there is:

views:
  - title: Home
    config:
      show_side_bar: false
      show_app_header: false
    type: sidebar
    cards:
      - type: custom:floorplan-card
        full_height: true
        config: /local/community/ha-floorplan/home.yaml   ######## configuration-file. That's the way the doku said...

read the comments in the code !

Everything is now in one thread, the way you wanted, and in this thread I had described my problem with pictures and code. And yet I get another answer that does not affect my problem.
Why are you doing that all the time?

Again:
In the home.yaml (!), the rules are to be accommodated in external files. And the !Include-instructions don't work there. This is a bug?!

home.yaml:

image: /local/community/ha-floorplan/_grundriss_wg4-ha31.svg
stylesheet: /local/community/ha-floorplan/home.css
cache: false
log_level: info
console_log_level: info

defaults:
  hover_action: hover-info
  tap_action: more-info

rules: ######## here no !include does work TRY IT !  Take a standard entity, that everybody has, and send a solving code (!include)
  # WOHNEN RAUMWERTE #
  - entity: sensor.esp_8266_ip50_temperatur_wz
    element: sensor.esp_8266_ip50_temperatur_wz
    state_action:
      - service: floorplan.text_set
        service_data: '${entity.state ? entity.state + " °C" : "--"}'

Read the comments in the code !

Many thanks in advance.

[exetico]

Have you even read my reply, and checked my file?

I'm now stepping out of the service-mode, and won't provide more details for you. This is the third time I explain how you're splitting out the rules, with a single file, in each file. I took my time to make a full example for you, and even, explained how you could use the example with rules splitted up, made cause you requested it.

I'd also like to mention that you cannot use !include, and another in-line rule, in the same level.

I added a comment om how I used the example, thats why I'm talking about the top level configuration, too.

Have a good one. Good luck with your floor planning. If you're not planning to change the way you communicate, and are disrespectful, every time people try and help you, please note that it could lead to limited post rights.

As a last input for you: You keep repeats !include, and not !include_dir_list, as I have used in case7, made for you, on your request.

I made a new answer, as this could possibly be the answer of the actual question, raised by another user.

[perlchamp]

It's unbelievable !
Do you think my time is not costly?
Do you think, I don't read dokus before opening a thread?
Do you think, it take no time to explain the situation, making pictures and writing code?
You always link to the doku, but your examples don't match this!
Yes it's - felt - the tenth time to ask the SAME !
But if you don't read the hole thread and don't take a look to the pictures, than the result is time-wasting posts, which didn't solve anything. You can tell me tousends of times, that 2+2 is 4 and that's right. But I'm asking for what is 1+1...

In the dashboard i have included the config file (doku-like) via !include-statement. LAST line in the code below!
home.yaml:

views:
  - title: Home
    config:
      show_side_bar: false
      show_app_header: false
    type: sidebar
    cards:
      - type: custom:floorplan-card
        full_height: true
        config: /local/community/ha-floorplan/home.yaml

The content of the home.yaml is:

image: /local/community/ha-floorplan/_grundriss_wg4-ha31.svg
stylesheet: /local/community/ha-floorplan/home.css
cache: false
log_level: info
console_log_level: info

defaults:
  hover_action: hover-info
  tap_action: more-info

rules:
  ...entities, etc. BUT THIS should be in an external file (one rule, one file)

i did try:

image: /local/community/ha-floorplan/_grundriss_wg4-ha31.svg
stylesheet: /local/community/ha-floorplan/home.css
cache: true
log_level: info
console_log_level: info

defaults:
  hover_action: hover-info
  tap_action: more-info

rules: !include_dir_list rules/
#rules: !include_dir_list /rules
#rules: !include_dir_list /rules/
#rules: !include_dir_merge_list rules/
#rules: !include_dir_merge_list /rules
#rules: !include_dir_merge_list /rules/

All the comment-lines i did try PER SE ! One after on, restarting HA, than the next one, restarting HA and so on.
AND NO !include-statement didn't work!
So it's a bug !

Have a nice day !

[perlchamp]

here is the answer i've been waiting for:
in a nutshell, and got to the point

[perlchamp]

here is the answer i've been waiting for:
in a nutshell, and got to the point