VVM500 Picture Elements

type: picture-elements
image:
  media_content_id: media-source://media_source/local/images/1x1.png
  media_content_type: image/png
  metadata:
    title: 1x1.png
    thumbnail: null
    media_class: image
    children_media_class: null
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://media_source
      - media_content_type: ""
        media_content_id: media-source://media_source/local/images
elements:
  # =================================================================
  # ZONE 1: UDELUFT & UDE-ENHED (BUNDEN)
  # =================================================================

  # Udetemperatur (BT1) - Ved luftindtag venstre bund
  - type: state-label
    title: Udetemperatur (BT1) - Ved luftindtag venstre bund
    entity: sensor.vvm_500_outdoor_temperature
    style:
      top: 93%
      left: 10%
      text-align: center
      font-weight: bold

  # ANIMERET BLÆSER
  - type: state-icon
    title: Blæser
    entity: binary_sensor.vvm_fan
    icon: mdi:fan
    style:
      top: 88%
      left: 28%
      transform: scale(2)
      opacity: 0.9
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity, 'on') %} animation: spin 2s linear infinite; {% endif %}
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

  # Fordamper Temp (BT16) - I den nederste veksler
  - type: state-label
    title: Fordamper Temp (BT16)
    entity: sensor.vvm_500_evaporator_eb101_bt16
    style:
      top: 94%
      left: 43%

  # Kondensator Temp / Væskelinje (BT15) - I den øverste veksler (varm side)
  - type: state-label
    title: Kondensator Temp (BT15)
    entity: sensor.vvm_500_liquid_line_eb101_bt15
    style:
      top: 86.5%
      left: 58%

  # ANIMERET KOMPRESSOR
  - type: state-icon
    title: Kompressor
    entity: binary_sensor.vvm_compressor
    icon: mdi:turbine
    style:
      top: 69.4%
      left: 71.7%
      transform: scale(3)
      opacity: 0.9
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity, 'on') %} animation: spin 1s linear infinite; {% endif %}
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

  # Kompressor Frekvens - Lige over kompressoren
  - type: state-label
    entity: sensor.vvm_500_current_compressor_frequency_eb101
    style:
      top: 74%
      left: 90%

  # Ekspansionsventil (EEV) - Ved timeglasset til venstre
  - type: state-label
    entity: sensor.vvm_eev_percentage
    style:
      top: 74%
      left: 15%

  # Driftsikoner
  # Varmt Vand
  - type: conditional
    conditions:
      - entity: binary_sensor.vvm_500_hot_water_mode
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.vvm_500_hot_water_mode
        style:
          top: 30%
          left: 25%
          transform: scale(2.3)
  # Varme
  - type: conditional
    conditions:
      - entity: binary_sensor.vvm_500_heating_mode
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.vvm_500_heating_mode
        style:
          top: 30%
          left: 25%
          transform: scale(2.3)
  # Afrimning
  - type: conditional
    conditions:
      - entity: binary_sensor.vvm_500_defrost_mode
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.vvm_500_defrost_mode
        style:
          top: 30%
          left: 25%
          transform: scale(2.3)
  # OFF
  - type: conditional
    conditions:
      - entity: binary_sensor.vvm_idle
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.vvm_idle
        style:
          top: 30%
          left: 25%
          transform: scale(2.3)

  # =================================================================
  # ZONE 2: RØRFØRING MELLEM UDE/INDE
  # =================================================================

  # Fremløb FRA udedel (BT12) - På det varme rør der går op
  - type: state-label
    entity: sensor.vvm_500_supply_line_eb101_bt12
    style:
      top: 57.5%
      left: 72%

  # Retur TIL udedel (EB101-BT3) - På det kolde rør der går ned
  - type: state-label
    entity: sensor.vvm_500_return_line_eb101_bt3
    style:
      top: 57.5%
      left: 24%

  # --- PUMPE A: GP12 (Ladepumpe - Grøn cirkel på diagram) ---
  - type: state-icon
    entity: binary_sensor.vvm_ladepumpe
    icon: mdi:pump
    style:
      top: 46.4%
      left: 21%
      opacity: 0.9
      transform: scale(1.2)
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity, 'on') %} animation: spin 3s linear infinite; {% endif %}
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

  # --- PUMPE B: GP1 (Varmebærerpumpe - Rød cirkel på diagram) ---
  - type: state-icon
    entity: binary_sensor.vvm_500_pump_heating_medium_eb100_gp1
    icon: mdi:pump
    style:
      top: 46.4%
      left: 65%
      opacity: 0.9
      transform: scale(1.2)
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity, 'on') %} animation: spin 3s linear infinite; {% endif %}
        }
        @keyframes spin { 100% { transform: rotate(360deg); } }

  # =================================================================
  # ZONE 3: VVM 500 TANK & VARMEKREDS (TOPPEN)
  # =================================================================

  # Indendørstemperatur
  - type: state-label
    style:
      left: 33.5%
      top: 13.5%
      font-weight: bold
    entity: sensor.ws2900_v2_01_18_indoor_temperature
    title: Indendørs temperatur

  # Placeres inde i VVM-tanken (midten) hvor varmelegemet sidder.
  - type: state-label
    entity: sensor.vvm_500_power_internal_add_heat
    style:
      top: 33%
      left: 42%
      text-align: right

  # Varmt vand
  - type: state-label
    style:
      left: 69.9%
      top: 22%
      font-weight: bold
    entity: sensor.vvm_500_hot_water_temp
    title: Varmt vand

  # Varmt Vand Indstilling
  - type: state-label
    entity: sensor.vvm_varmt_vand_indstilling
    style:
      top: 9%
      left: 68%

  # =================================================================
  # STYRING: VARMT VAND BOOST (Dropdown Menu)
  # =================================================================
  # Vi bruger 'custom:hui-element' til at indsætte en interaktiv række.
  - type: custom:hui-element
    card_type: entities
    entities:
      - entity: select.vvm_500_hot_water_boost
        name: "Luksus"
        icon: mdi:NONE
    style:
      top: 73%
      left: 43.5%
      width: 50%
      z-index: 200
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
        }
        #states {
          # Fjerner unødig luft (padding) inde i kortet
          padding: 0 !important;
        }

  # Varmt Vand Top (BT7)
  - type: state-label
    entity: sensor.vvm_500_hot_water_top_bt7
    style:
      top: 25%
      left: 42%
      text-align: right

  # Varmt Vand Ladning (BT6)
  - type: state-label
    entity: sensor.vvm_500_hot_water_charging_bt6
    style:
      top: 41%
      left: 42%
      text-align: right

  # Buffer Top (BT63)
  - type: state-label
    entity: sensor.vvm_500_add_heat_bt63
    style:
      top: 29%
      left: 86%
      text-align: right

  # Buffer Bund / Retur (BT3)
  - type: state-label
    entity: sensor.vvm_500_return_line_bt3
    style:
      top: 36%
      left: 86%
      text-align: right

  # Fremløb til Huset (BT2)
  - type: state-label
    entity: sensor.vvm_500_calculated_supply_climate_system_1
    style:
      top: 8.5%
      left: 45%
      text-align: center

  # Returløb fra Huset (BT3)
  - type: state-label
    entity: sensor.vvm_500_return_line_bt3
    style:
      top: 6.5%
      left: 21%
      text-align: center

  # Background Image
  - type: image
    style:
      top: 50%
      left: 50%
      width: 70%
      mix-blend-mode: lighten
      filter: invert(1)
    image:
      media_content_id: media-source://image_upload/e863fd9bbff2dc1e258c7168909dc6a2
      media_content_type: image/png
      metadata:
        title: VVM500 Diagram.png
        thumbnail: /api/image/serve/e863fd9bbff2dc1e258c7168909dc6a2/256x256
        media_class: image
        navigateIds:
          - media_content_type: app
            media_content_id: media-source://image_upload
    title: Baggrundsbillede