Use of Javascript function

Hi everyone !

I’m trying to use JavaScript functions within my Lovelace Cards to calculate color values related to temperature.

I found out out to use Javascript code within a button-card like this :

color_type: card
entity: sensor.temp02_temperature
label: |
  [[[
    var temp = states['sensor.temp01_temperature'].attributes.temperature;
    return Math.round(temp * 10) / 10 + '°C';
  ]]]
name: température
show_label: true
styles:
  card:
    - background-color: |
        [[[ 
          return "purple";
        ]]]
  name:
    - font-weight: bold
tap_action:
  action: more-info
type: 'custom:button-card'

This code runs fine and I have a lovely purple custom card…

Now, I’m trying to write a function that I would like to use in place of this line :

return "purple";

So I create a file colors.js that is loaded as Lovelace resource and in this file, I have this code :

function setCustomColor() {
    return "purple";
}

So I replace (have a reboot of HA) return "purple"; by setCustomColor(): in my card definition and I get an error related to the fact that it can’t find this function


One can see in the screen capture above that the module is correctly loaded with the page and the function does exist in the module. However I have a ButtonCardJSTemplateError: ReferenceError

Does anyone have an idea about what I’m doing wrong? Thank in advance for your help!
Sylvain

hey, did you ever figure this out? I’m looking to utilise this methodology with a function also

Haven’t really tested this myself, but this might be interesting GitHub - iantrich/config-template-card: 📝 Templatable Lovelace Configurations