Custom Functions

[Topiatic]

First time poster, new to HA, loving Floorplan, and comfortable with coding and configuration files; but...

Full Disclosure: Javascript is my coding nemesis.

I'm trying to implement a custom function using copy/paste script from the examples available. I used the light example to get the RGB colour of a light onto a floorplan and it worked marvelously, huge thanks to its author. But I have many lights, and re-using code like that is bad form. I then went to the ring example and copy/pasted/modified it into the yaml file (using UI Raw Editor) and it failed altogether without any log output.

I think the Functions: entry is fine because I got it to work, how I got it to work though... I started trying to see if I could get some kind of output from the custom function using floorplan.text_set:. I did this, service_data: '${JSON.stringify(functions.getRGBColor(entity), null, 10)}'. I did this just to see if it would throw an error before implementing it into floorplan.text_set; shockingly, to me, the function worked as expected and the light behaves as it should in HA Floorplan.

This is the Custom Functions script:

          functions: |
            >
            return {

              getRGBColor: (entity) => {
                var element = [
                  `${entity.entity_id}`,
                  'stop2',
                ];
  
                var color = 'rgb(0, 0, 0)';
  
                var opacity = 0;
  
                if (entity.state === 'on') {
                  if (entity.attributes.color_temp) {
                    var rgb = util.color.miredToRGB(entity.attributes.color_temp);
                    color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                    opacity = 1;
                  }
                  else if (entity.attributes.rgb_color) {
                    var rgb = entity.attributes.rgb_color;
                    color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                    opacity = 1;
                  }
                };
  
                var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;
  
                return {
                  element: element,
                  style: style,
                };

              },
            };

This (taken from the ring example)...

service_data: ${functions.getRGBColor(entity)}

and this...

service_data: '${functions.getRGBColor(entity)}'

do not work. But this does...

service_data: '${JSON.stringify(functions.getRGBColor(entity), null, 10)}'

Like WTF?

I'll thank you in advance for any and all help, greatly appreciated.

[OzGav]

@exetico ??

[exetico]

I'm currently having a few days off, but I'll check the topic in one of the upcoming days 😊.

[Topiatic]

If you're away then stay away, I can respect that and appreciate that you'd even look at this to help me out when you're available.

[exetico]

Hi, I almost forgot this, but I'm trying to clear out old discussion entries in my mailbox. :)

First: Thank you for raising a question, where I'd actually have a proper example, even though it's a more advance function! It looks like you've already touched the Usage > Custom Functions part of our docs.

I noticed you're talking about text_set´, but trying to return styles, where I'd normally use style_set`. I'm not sure why? Maybe just to make it at clear as possible, as you're able to render out the text, while debugging? 😄

Next: Personally I use functions as part of one key, like this (dummy example in my notes):

  - service: floorplan.text_set
    service_data:
      element: "sensor.hallway"
      text: |
        > /* Use this function for both entities, to secure updates on both */
        const textValue = functions.controlEntity1And2FunctionSimple(entities, "sensor.aqara_sensor2_temperature", "light.spotlys_gang")
        return textValue;

So I've extended your example, with lots of other things, just so I had something to work with, and test if I was wrong or not, in some, or all of the cases.

config:
  console_log_level: info
  defaults:
    hover_action: hover-info
    tap_action: more-info
  image: /local/floorplan/floorplan1.svg?v=1.1.14
  log_level: info
  functions: |
    >
      return {
        getRGBColor: (entity) => {
          try{
            const element = [
              'sensor.bob1test',
            ];
    
            let color = 'rgb(0, 0, 0)';
            let opacity = 0;
    
            if (entity.state === 'on') {
              let rgb = null;
              if("color_temp" in entity.attributes) rgb = entity.attributes.color_temp;
              if("rgb_color" in entity.attributes) rgb = entity.attributes.rgb_color;
              if(rgb){
                color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                opacity = 1;
              }
            };
    
            const style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;

            console.info("Text in return:", style);
            console.info("Element ref. in return:", element);
            console.log("config", config);
            console.log("element", element);
            return {
              element: element,
              text: style,
            };
          }
          catch(e){
            console.info("Error in custom function", e);
            return {
              element, text: ''
            };
          }
  
        },
        getSimple: (entity) => {
          return entity.state === 'on' ? {
            element: 'sensor.bob1test', text: 'bob dummy val text ON'
          } : {element: 'sensor.bob1test', text: 'bob dummy val text OFF'}; 
        },
        getCrazySimple: (entity) => {
          return 'bob ok?';
        },
      }
  rules:
    - element: sensor.bob1test # So I have something to toggle the state..
      entity: light.ledstrip1_light
      state_action:
        action: call-service
        service: floorplan.text_set
        #service_data: ${JSON.stringify(functions.getRGBColor(entity), null, 10)}
        service_data: ${JSON.stringify(functions.getRGBColor(entity))}
        #service_data: ${functions.getRGBColor(entity), null, 20}
        #service_data: ${JSON.stringify(functions.getSimple(entity), null, 30)}
        #service_data:
        #  element: 'sensor.bob1test'
        #  # I know this will render the two keys returned by the dummy function, but that's just for my testing
        #  #text: '${JSON.stringify(functions.getCrazySimple(entity), null, 10)}'
        #  #text: '${functions.getCrazySimple(entity), null, 10}'
        #  #text: '${functions.getCrazySimple(entity)}'
        #  #text: ${functions.getCrazySimple(entity), null, 10}
        #  #text: ${functions.getCrazySimple(entity)}
        #  # This is how I normally use a function, simplified ofc.
        #  #text: |
        #  #  >
        #  #    const textValue = functions.getCrazySimple(entity)
        #  #    return textValue;
        ##service_data: 'Nothing...'
      tap_action: toggle
  stylesheet: /local/floorplan/floorplan1_main.css?v=1.1.14
full_height: true
type: custom:floorplan-card

I'm pretty sure it's related to how we break down the value, and how we evaluates it. As you've pushed the function into a string, it becomes a static property, instead of live-functions (i can't bring up the proper term right now).
Therefore, some of the logics are being parsed "longer down the tree". In this case, it actually make things works as you'd hope for.

A bit odd, but, a great workaround for your case.

I think it's simple as that. The step where your custom function are executed, are closer to the sun, and does have the proper things exposed. 🌞

I'd like to break it down at some point. Just to see where in the steps, you're actually making things even better.

To be clear, you're doing a workaround, which we've not really though of. But, I'd like things to work, as you expect it to work, without stringifying it.

Please open a feature request, with a reference to this discussion. I'd like to both check out: the source code, why it's "actually working", and possibly, see if I can implement something to smooth this out.

Thank you for bringing this to the table 😄.

[Topiatic]

Thank you for taking the time to get back to me, greatly appreciated.

I noticed you're talking about text_set´, but trying to return styles, where I'd normally use style_set`. I'm not sure why? Maybe just to make it at clear as possible, as you're able to render out the text, while debugging? 😄

text_set was just to try and output the return value into a <tspan> because I didn't know another way, but I see now from your example that return console.info(value); is the way to go. However, if I'd known that I would not have blindly stumbled onto a solution for myself.

Next: Personally I use functions as part of one key, like this (dummy example in my notes):

That worked perfectly, thank you for the example. But I still would have expected it to work as shown in the 'Ring Example'.

Please open a feature request, with a reference to this discussion.

To be honest a lot of what you wrote is above my skill level and I'm not sure what 'feature' I'd be requesting as this already seems to be a feature of HA-Floorplan. If you could clarify that I'll be glad to put in the request.

Anyways at this point I've gone to YAML-mode, cleaned up my configuration and SVG files quite a bit referencing the amazing examples in the 'Share your Floorplan' thread in the HA Community Forum, and I came to realise that I did not actually need to reference the function more than once 🙄 . It's been a great learning experience. I've even gone ahead and created a simple control panel styled after the Control4 interface with multiple popups (layers) using HA-Floorplan, the scalable flexibility is phenomenal.

I'll post here my current configuration down to where I call the function in case it can be helpful in any way. Again, thank you very much for taking the time to review my issue... I was ready to give it a bump before leaving it alone.

  # Floorplan View
  - title: Floor Plan
    path: floorplan
    icon: mdi:floor-plan
    type: panel
    subview: true
    badges: []
    cards:
      - type: custom:floorplan-card
        full_height: true
        config:
          image: /local/bartos/floorplan/floorplan_basic.svg
          stylesheet: /local/bartos/floorplan/floorplan_basic.css
          console_log_level: info
          # log_level: info
          defaults:
            hover_action: hover-info
            hover_info_filter: *hover_filter
            tap_action: more-info
          startup_action:
            ## Set the Default Button States
            - service: floorplan.class_set
              service_data:
                element: button_main
                class: button-on
            - service: floorplan.style_set
              service_data:
                element: camera.main_porch_1_camera_1
                style: "fill: none"
          functions: |
            >
            return {

              /* Return 'element' & 'style' with Light Colour Values */
              getRGBColor: (entity) => {
              
              //  var elements = [
              //  `${entity.entity_id}`,
              //  `${entity.entity_id}.gradient_color_0`,
            //  ];

              var color = 'rgb(125, 125, 125)';
              var opacity = 0;

              if (entity.state === 'on') {
                if (entity.attributes.color_temp) {
                  var rgb = util.color.miredToRGB(entity.attributes.color_temp);
                  color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                  opacity = 1;
                }
                else if (entity.attributes.rgb_color) {
                  var rgb = entity.attributes.rgb_color;
                  color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
                  opacity = 1;
                }
              }
              var style = `fill: ${color}; stop-color: ${color}; stop-opacity: ${opacity};`;

              return {
                elements: elements,
                style: style,
              };
              },
            };
          rules:
            ## Button - Display Main Floor
            - element: button_main
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    element: main
                    class: layer-visible
                - service: floorplan.class_set
                  service_data:
                    element: button_main
                    class: button-on
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - button_basement
                    class: button-off
            ## Button - Display Basement Floor
            - element: button_basement
              tap_action:
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - main
                    class: layer-hidden
                - service: floorplan.class_set
                  service_data:
                    element: button_basement
                    class: button-on
                - service: floorplan.class_set
                  service_data:
                    elements:
                      - button_main
                    class: button-off
            ## Set Controls & Colour States for Lights
            - entities:
                - light.main_livingarea_1_lamp_1
                # - light.main_porch_1_light_1
                - light.basement_bedroom_1_ceiling_1
                - light.basement_bedroom_1_ceiling_2
                - light.basement_bedroom_1_ceiling_3
                - light.basement_bedroom_1_lamp_1
              tap_action: toggle
              double_tap_action: more-info
              state_action:
                service: floorplan.style_set
                service_data: |
                  > return functions.getRGBColor(entity)
                ### This ^ Works ###

                # service_data: ${JSON.stringify(functions.getRGBColor(entity))}
                ### This ^ Works ###

                # service_data: ${functions.getRGBColor(entity)}
                ### This ^ Fails - but seems to be how it is used in the 'Ring Example' ###

[zen2]

About functions usage, I personnaly separate javascript code from main yaml to another yaml file that contain all functions that i need:

YAML

functions: !include functions.yaml

- entities:
  - light.1
  - light.2
  - light.3
  tap_action: toggle
  hold_action: more-info
  state_action:
  - service: floorplan.style_set
    service_data: ${functions.style_light(entity)}

 entities:
  - sensor.room0_temperature
  - sensor.room1_temperature
  tap_action: more-info
  hover_action: hover-info
  state_action:
  - service: floorplan.text_set
    service_data: '${entity.state === "unavailable" ? "NA" : entity.state}°'
  - service: floorplan.style_set
    service_data: ${functions.style_temperature(entity)}

- entities:
  - sensor.room1_humidity
  - sensor.room2_humidity
  tap_action: more-info
  hover_action: hover-info
  state_action:
  - service: floorplan.text_set
    service_data: '${entity.state === "unavailable" ? "NA" : entity.state}%'
  - service: floorplan.style_set
    service_data: ${functions.style_humidity(entity)}

note: more-info for lights bring the color and temperature light popup

function.yaml

|
  >
  return {

    style_light: (entity) => {
      var color = `#000000`;
      var opacity = 0.4;
      if (entity.state === 'on') {
        if (entity.attributes.rgb_color) {
          var rgb = entity.attributes.rgb_color;
          color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
          if (entity.attributes.brightness) {
            opacity = 0.4 + 0.6 * entity.attributes.brightness / 254 ;
          }
          else {
            opacity = 1 ;
          }
        }
        else if (entity.attributes.color_temp) {
          var rgb = util.color.miredToRGB(entity.attributes.color_temp);
          color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
          if (entity.attributes.brightness) {
            opacity = 0.4 + 0.6 * entity.attributes.brightness / 254 ;
          }
          else {
            opacity = 1 ;
          }
        }
        else if (entity.attributes.brightness) {
          color = `#FFE9AF`;
          opacity = 0.4 + 0.6 * entity.attributes.brightness / 254 ;
        }
        else {
          color = `#FFE9AF`;
          opacity = 1 ;
        }
      }
      return `fill: ${color}; opacity: ${opacity}`;
    },
       var b = color3[2];
      }
      return `fill: rgb(${r}, ${g}, ${b})`;
    },

    style_temperature: (entity) => {
      var temp = parseFloat(entity.state.replace("°", ""));
      var temp1 = 10.0 ;
      var temp2 = 21.0 ;
      var temp3 = 32.0 ;
      var color1 = [036, 074, 255];
      var color2 = [100, 205, 00];
      var color3 = [240, 000, 000];
      if ( temp < temp1 ) {
        var r = color1[0];
        var g = color1[1];
        var b = color1[2];
      }
      else if ( temp >= temp1 & temp < temp2 ) {
        var r = Math.floor(color1[0] + ((color2[0] - color1[0]) * ( (temp - temp1) / (temp2 - temp1) )));
        var g = Math.floor(color1[1] + ((color2[1] - color1[1]) * ( (temp - temp1) / (temp2 - temp1) )));
        var b = Math.floor(color1[2] + ((color2[2] - color1[2]) * ( (temp - temp1) / (temp2 - temp1) )));
      }
      else if ( temp >= temp2 & temp < temp3 ) {
        var r = Math.floor(color2[0] + ((color3[0] - color2[0]) * ( (temp - temp2) / (temp3 - temp2) )));
        var g = Math.floor(color2[1] + ((color3[1] - color2[1]) * ( (temp - temp2) / (temp3 - temp2) )));
        var b = Math.floor(color2[2] + ((color3[2] - color2[2]) * ( (temp - temp2) / (temp3 - temp2) )));
      }
      else {
        var r = color3[0];
        var g = color3[1];
        var b = color3[2];
      }
      return `fill: rgb(${r}, ${g}, ${b})`;
    },

    style_humidity: (entity) => {
      var humid = parseFloat(entity.state.replace("%", ""));
      var humid1 = 35.0 ;
      var humid2 = 50.0 ;
      var humid3 = 65.0 ;
      var color1 = [255, 000, 000];
      var color2 = [000, 180, 000];
      var color3 = [000, 000, 255];
      if ( humid < humid1 ) {
        var r = color1[0];
        var g = color1[1];
        var b = color1[2];
      }
      else if ( humid >= humid1 & humid < humid2 ) {
        var r = Math.floor(color1[0] + ((color2[0] - color1[0]) * ( (humid - humid1) / (humid2 - humid1) )));
        var g = Math.floor(color1[1] + ((color2[1] - color1[1]) * ( (humid - humid1) / (humid2 - humid1) )));
        var b = Math.floor(color1[2] + ((color2[2] - color1[2]) * ( (humid - humid1) / (humid2 - humid1) )));
      }
      else if ( humid >= humid2 & humid < humid3 ) {
        var r = Math.floor(color2[0] + ((color3[0] - color2[0]) * ( (humid - humid2) / (humid3 - humid2) )));
        var g = Math.floor(color2[1] + ((color3[1] - color2[1]) * ( (humid - humid2) / (humid3 - humid2) )));
        var b = Math.floor(color2[2] + ((color3[2] - color2[2]) * ( (humid - humid2) / (humid3 - humid2) )));
      }
      else {
        var r = color3[0];
        var g = color3[1];
        var b = color3[2];
      }
      return `fill: rgb(${r}, ${g}, ${b})`;
    }

  };

[smaddock]

Would it be possible to use the lib-structure mentioned here for user-defined functions (UDFs)? I don’t know how the HACS installer works and what gets overwritten on updates, but maybe exclude anything that starts with udf_ or have a separate userlib directory? That would also help if we wanted to use a 3rd-party Javascript library.

[smaddock]

For example, I'm currently trying to use a third-party JS library.

• If I add it as a resource at /config/lovelace/resources, I get the error that it's not defined, I'm guessing because it's not loaded before floorplan.js is loaded?
• If I try to add an import to my Floorplan YAML script, I get the error that import can only be used at the top level.
• I finally got it working by adding it to configuration.yaml per these instructions

[smaddock]

I take that back, even with adding it to configuration.yaml, it’s not consistently loading before floorplan.js.

[OzGav]

Sounds like you are hitting a HA limitation here?

[smaddock]

Yes, which is why I was wondering if there’s a floorplan workaround. I suppose I could try pasting the whole library under functions, and call it with functions.lib.

[OzGav]

You can only try. Will be interesting to see if (a) it works and (b) if it is still fast enough.