Main UI: Using var() function in ternary operator

Add-ons UIs
1

What is correct way of using these?

- component: f7-gauge
  config:
    size: 110
    min: 1
    max: 100
    bgColor: "=(Number.parseFloat(items[props.itemPrefix + props.cpu_temp].state) >= 90) ? var(--accent-color-2) : \
    (Number.parseFloat(items[props.itemPrefix + props.cpu_temp].state) >= 80) ? var(--accent-color-3) : \
    (Number.parseFloat(items[props.itemPrefix + props.cpu_temp].state) >= 70) ? var(--accent-color-4) : \
    var(--card-color)"

var() above doesn’t return any value, though in least complex cases it works well. It seems that I don’t quite understand the sequence of operations performed when calculating ternary operators. Or it’s just a syntax mistake…

Those vars declared in Page layout if it matters:

config:
  style:
    --card-border-radius: 10px
    --card-color: "#181818"
    --card-color-sub: "#121212"
    --card-color-sup: "#1e1e1e"
    --text-color: "#FCFCFC"
    --text-color-sub: "#F3F3F3"
    --accent-color-1: "#8f704b"   # brown
    --accent-color-2: "#daae6d"   # yellow-orange
    --accent-color-3: "#89e3f6"   # sky-blue
    --accent-color-4: "#4d9e9b"   # mint
    --accent-color-5: "#44786a"   # navy
    --accent-color-6: "#3a4e93"   # violet
    --accent-color-7: "#b957ce"   # magenta
2

This is how I have mine working

    - component: f7-block
      config:
        style:
          --cell-green: rgba(165,236,176,255)
          --cell-red: rgba(255,156,151,255)
          --cell-yellow: rgba(254,229,128,255)
          background-color: '=(Number.parseFloat(items.SunSynk_vac_L1_L2.state) >10) ?
            "var(--cell-green)" : "var(--cell-red)"'
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%

I think that you have to have each option in "" and the full expression in ' ' ?

3

It worked, although there is one unpleasant side effect: formatting a singlequoted multi-line is not particularly supported in built-in IDE (I tried YAML “>” symbol). However, this is not significant.

4

For the record: There is no requirement to put the ternary expression into quotes. The quotes around the expression are one way to satisfy the YAML format issue that :[space] outside of a string is always interpreted as a key-value definition and so cannot follow on the same line as another key-value definition. So,

yamlkey: =test ? ifTrue : ifFalse

will always result in an error because the parser gets confused by the :[space] in the ternary expression. If you put the entire expression inside "..." then the parser knows it is a string and doesn’t make the key-value mistake.

Any other option that removes the space after the colon in the expression will also fix the issue. For readability, my preference is just (...) around each section:

yamlkey: =(test)?(ifTrue):(ifFalse)