button-card

type: custom:button-card
show_state: false
show_icon: false
show_name: false
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
styles:
  card:
    - padding: 10px
    - border-radius: 16px
    - box-shadow: var(--ha-card-box-shadow)
    - background: var(--card-background-color)
  name:
    - justify-self: center
    - padding-bottom: 30px
  custom_fields:
    svg:
      - width: 100%
      - height: 100%
      - justify-self: center
      - padding: 4px 0 8px 0

custom_fields:
  svg: |
    [[[
      // ==== TVŮJ SEZNAM SENZORŮ SHORA DOLŮ ====
      const sensors = [
        'sensor.shellyplus1_a8032ab6a734_temperature',
        'sensor.shellyplus1_a8032ab6a734_temperature_2',
        'sensor.shellyplus1_a8032ab6a734_temperature_3',
        'sensor.shellyplus1_a8032ab6a734_temperature_5',
        'sensor.shellyplus1_a8032ab6a734_temperature_4',
      ];

      // ==== NAČTENÍ HODNOT ====
      const getState = id => parseFloat(hass.states[id]?.state);
      const temps = sensors.map(getState);
      const safe = v => Number.isFinite(v);

      // ==== BARVA PODLE TEPLOTY ====
      const color = (t) => {
        if (!safe(t)) return '#777';
        let hue, light;

        if (t <= 40) {
          const frac = (t - 20) / 20;
          hue = 240 - 180 * frac; // 240→60 (modrá→žlutá)
          light = 50 + 10 * frac;
        } else if (t <= 50) {
          const frac = (t - 40) / 10;
          hue = 60 - 30 * frac;   // 60→30 (žlutá→oranžová)
          light = 55 - 5 * frac;
        } else if (t <= 60) {
          const frac = (t - 50) / 10;
          hue = 30 - 20 * frac;   // 30→10 (oranžová→světle červená)
          light = 55 + 10 * frac;
        } else {
          const frac = (t - 60) / 20;
          hue = 10 - 10 * frac;   // 10→0 (světle červená→sytě červená)
          light = 65 - 10 * frac; // 65→55
        }
        return `hsl(${hue}, 90%, ${light}%)`;
      };

      // ==== ROZMĚRY A VYKRESLENÍ ====
      const W = 160, H = 340;
      const pad = 14;
      const bodyW = W - 2*pad;
      const capR = 28;
      const yTop = capR;
      const yBottom = H - capR;
      const bodyH = H - 2*capR;
      const bands = temps.length;
      const bandH = bodyH / bands;

      const band = (y, t) =>
        `<rect x="${pad}" y="${y}" width="${bodyW}" height="${bandH}"
               rx="18" ry="18" fill="${color(t)}" />`;

      const label = (y, t) => {
        const txt = safe(t) ? `${t.toFixed(0)}°C` : '–';
        return `<text x="${W/2}" y="${y + bandH/2}"
                      font-size="16" text-anchor="middle"
                      dominant-baseline="middle" fill="#fff"
                      style="paint-order: stroke; stroke: #000; stroke-width: 2px; stroke-linejoin: round;">
                  ${txt}
                </text>`;
      };

      const outline = `
        <ellipse cx="${W/2}" cy="${yTop}"    rx="${bodyW/2}" ry="${capR}" fill="none" stroke="#444" stroke-width="3"/>
        <rect    x="${pad}"  y="${yTop}"      width="${bodyW}" height="${bodyH}" fill="none" stroke="#444" stroke-width="3"/>
        <ellipse cx="${W/2}" cy="${yBottom}" rx="${bodyW/2}" ry="${capR}" fill="none" stroke="#444" stroke-width="3"/>
      `;

      let bandsSvg = '', labelsSvg = '';
      for (let i = 0; i < bands; i++) {
        const y = yTop + i * bandH;
        bandsSvg  += band(y, temps[i]);
        labelsSvg += label(y, temps[i]);
      }

      return `<svg viewBox="0 0 ${W} ${H}" width="100%" height="100%">
        ${bandsSvg}
        ${outline}
        ${labelsSvg}
      </svg>`;
    ]]]