How to modify the yaml so that the display of the state id displayed -> On is green and red if -> Off

Configuration Frontend
1

Capture
Capture410×426 15.5 KB

here is an extract from the yaml

  • entity: sensor.red_wks
    name: Red.WKS
    states:
    -id: 4
    entity_index: 4
    exposure: 80
    ypos: 5
    styles:
  • font-size: 1em;

I tried all that (x4) but it doesn’t work:
- id: 4
entity_index: 4
xpos: 80
ypos: 5
styles:
- font-size: 1em;
- font-weight: normal;
- fill: |
[[[
let entity = { state: “On” };
let value = entity.sensor.ups_wks;
console.log(value);
if (value == On) return “#ffa500”; // Orange
else if (value < 8000) return “#ffff00”; // jaune
else return “#00ff00”; // vert
]]]

- id: 4
  entity_index: 4
  xpos: 80
  ypos: 5
  styles:
    - font-size: 1em;
    - color: |
        {% if 
        is_state('binary_sensor.red_wks', 'On') %}
          green
        {% else %}
          red
        {% endif %}

- id: 4
  entity_index: 4
  xpos: 80
  ypos: 5
  styles:
    - font-size: 1em;
  text_template: |
    {% if is_state('sensor.red_wks', 'On') %}
      <span style="color: green;">On</span>
    {% else %}
      <span style="color: red;">Off</span>
    {% endif %}
  show_state: false
  show_unit: false

- id: 4
  entity_index: 4
  xpos: 80
  ypos: 5
  styles:
    - font-size: 1em;
  card_mod:
    style: |
      :host {
          --horseshoe-color: {% if is_state('sensor.red_wks', 'on') %} green {% else %} red {% endif %};
      }
2

Please read: How to help us help you - or How to ask a good question - Configuration - Home Assistant Community

Post your YAML in code tags. The forum editor screws up the formatting of YAML to make it unreadable.

3

Continuing the discussion from How to modify the yaml so that the display of the state id displayed -> On is green and red if -> Off:

type: custom:flex-horseshoe-card
entities:

  • entity: sensor.temperature_chauffe_eau_temperature
    decimals: 1
    icon: mdi:temperature-celsius
    area: Chauffe eau
  • entity: sensor.pzem1_pzem_004t_v3_power
    decimals: 0
    name: Pu.ECS
  • entity: sensor.test_outside_light_level
    decimals: 0
    name: Sun Lux
  • entity: sensor.red_wks
    name: Red.WKS
  • entity: sensor.ups_wks
    name: UPS.WKS
    styles: null
    show:
    scale_tickmarks: true
    layout:
    hlines:
    • id: 0
      xpos: 50
      ypos: 38
      length: 40
      styles:
      • stroke: var(–primary-text-color);
      • stroke-width: 5;
      • opacity: 0.9;
      • stroke-linecap: round;
        color: “#fcfc74”
        vlines:
    • id: 0
      xpos: 50
      ypos: 58
      length: 20
      styles:
      • stroke: var(–primary-text-color);
      • opacity: 0.5;
      • stroke-width: 2;
      • stroke-linecap: round;
        states:
    • id: 0
      entity_index: 0
      xpos: 50
      ypos: 30
      styles:
      • font-size: 3em;
      • opacity: 0.9;
    • id: 1
      entity_index: 1
      xpos: 46
      ypos: 54
      styles:
      • font-size: 1.5em;
      • text-anchor: end;
    • id: 2
      entity_index: 2
      xpos: 54
      ypos: 54
      styles:
      • font-size: 1.5em;
      • text-anchor: start;
    • id: 3
      entity_index: 3
      xpos: 1
      ypos: 5
      styles:
      • text-anchor: start;
      • font-size: 1em;
    • id: 4
      entity_index: 4
      xpos: 80
      ypos: 5
      styles:
      • font-size: 1em;
      • color: |
        {% if
        is_state(‘binary_sensor.red_wks’, ‘On’) %}
        green
        {% else %}
        red
        {% endif %}
        names:
    • id: 0
      entity_index: 1
      xpos: 46
      ypos: 62
      styles:
      • font-size: 0.8em;
      • text-anchor: end;
      • opacity: 0.7;
    • id: 1
      entity_index: 2
      xpos: 54
      ypos: 62
      styles:
      • font-size: 0.8em;
      • text-anchor: start;
      • opacity: 0.7;
    • id: 2
      entity_index: 3
      xpos: 0
      ypos: 10
      styles:
      • font-size: 0.8em;
      • text-anchor: start;
      • opacity: 0.7;
    • id: 3
      entity_index: 4
      xpos: 76
      ypos: 10
      styles:
      • font-size: 0.8em;
      • text-anchor: start;
      • opacity: 0.7;
        areas:
    • id: 0
      entity_index: 0
      xpos: 50
      ypos: 100
      styles:
      • font-size: 1.2em;
      • opacity: 1.5;
        horseshoe_state:
        color: “#96f261”
        horseshoe_scale:
        min: null
        max: 65
        color: “#96f261”
        width: 3
        color_stops:
        “35”: “#96f261”
        “40”: “#FFE9B9”
        “45”: “#FFDA8A”
        “50”: “#FFBF37”
        “55”: “#FFB414”
        “58”: “#FFAD12”
        “37.5”: “#FF9C0B”
        “42.5”: “#FFE8C06”
        “47.5”: “#FFCB5B”
        “52.5”: “#ffb414”
4

Please format your code, you still haven’t formatted it properly.

5

Suggest to rename the thread - add a “horseshoe” word.