Condition overview for a heat exchanger incl. heating system

Configuration Frontend
1

Hi together,

I would like to create an overview in Lovelace for my heating system very similar to this one:

https://www.loxforum.com/forum/german/software-konfiguration-programm-und-visualisierung/247707-ansteuerung-proxon-lüftungsanlage

I have already tried a little bit with the “Picture-Elements Card” but I am quite weak in HTML, CSS and Co. Maybe I have a completely wrong approach and you have a better idea?

For me it currently looks like here in the picture.

Proxon Home Assistant
Proxon Home Assistant1920×691 57.6 KB

What bothers me about it? I always come to limitations because I either lack the expertise or the tool does not give something else.
Example:
I now have the image of the heat exchanger in Lovelace. How do I get the picture of the hot water tank in there or the fan stages?
Or something else. How do I get a break in the temperature values?
So instead of: Exhaust air temperature 27,9°C
rather like this:

Exhaust air temperature
27,9 °C

Or what I also notice, the image does not scale correctly with the entity values.

Maybe someone can push me in the right direction.

Thanks a lot

Joe

2

Joe – I did the same thing and ended up doing it a bit differently, and it works very well for the conditional images, but just “ok” for the text resizing. (You can see that “Mode” and "Fans’ run into each other, which they don’t on the iPad on the fridge.) Here’s what I have:

image
image1900×1074 256 KB

The things I did:

  • For conditional images, I created one base image and then a set of identical overlay images with transparency everywhere except where they were different.
  • The overlay images then appear when sensors are true. For example, the warning triangle for the filter on the heat exchanger is a transparent png with just that triangle which is visible when the warning is on.
  • I have three images for the extract and supply fan (low/med/high) and a sensor that tells the UI which image to overlay.
  • I found the graphics were easy to do if I did the following: Create the whole thing in PowerPoint, copy/paste it into Apple’s Preview (as a PDF), save it as a png (each time with the same resolution), then simply use Apple’s Preview to delete all the parts I wanted to be transparent.

Base image:

base3_all_off
base3_all_off1933×1083 111 KB

Heat exchanger warning image:

base3_ftx_warning
base3_ftx_warning1933×1083 44.1 KB

High extract fan image:

base3_ftx_extract_high
base3_ftx_extract_high1933×1083 62.3 KB

Here is that code:

type: picture-elements
image: /local/heat_graphics2/base3_all_off.png
theme: light
elements:
  - entity: binary_sensor.alarm
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_heatpump_warning.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.ftx_extract_fan_mode
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      Low: /local/heat_graphics2/base3_ftx_extract_low.png
      Normal: /local/heat_graphics2/base3_ftx_extract_normal.png
      High: /local/heat_graphics2/base3_ftx_extract_high.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%

For the text, I had to be a bit careful of two things: size and position.

  • For the position it was important to experiment on whether it was best to specify the right/left or top/bottom positions for each item and the offset. Getting the right one really helped with the positioning when it moved.
  • For the size, I also had to play with that.

Here are some examples of my positioning:

  - entity: sensor.ftx_extract_temperature_filtered
    style:
      left: 79.5%
      top: 30%
      transform: translate(0%,-50%)
      font-size: 1.5vw
    type: state-label
  - entity: sensor.ftx_supply_temperature
    style:
      right: 36%
      top: 30%
      transform: translate(50%,-50%)
      font-size: 1.5vw
    type: state-label

Here’s my full configuration for showing our house heat pump, hot water, heat exchanger, and temperatures:

type: picture-elements
image: /local/heat_graphics2/base3_all_off.png
theme: light
elements:
  - entity: binary_sensor.pump_cold_circuit
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_brine_on.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: binary_sensor.compressor
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_compressor_on.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.heatpump_status_direct
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      Idle: /local/heat_graphics2/blank.png
      Water Heat Pumping: /local/heat_graphics2/base3_water_heat_on.png
      Floor Heat Pumping: /local/heat_graphics2/base3_floor_heat_on.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.ftx_supply_fan_mode
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      Low: /local/heat_graphics2/base3_ftx_supply_low.png
      Normal: /local/heat_graphics2/base3_ftx_supply_normal.png
      High: /local/heat_graphics2/base3_ftx_supply_high.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.ftx_extract_fan_mode
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      Low: /local/heat_graphics2/base3_ftx_extract_low.png
      Normal: /local/heat_graphics2/base3_ftx_extract_normal.png
      High: /local/heat_graphics2/base3_ftx_extract_high.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: binary_sensor.pump_radiator
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_floor_on.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.ftx_heater_on
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_ftx_electric_on.png
      'off': /local/heat_graphics2/blank.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: sensor.heatpump_heater_on
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_heat_pump_electric_on.png
      'off': /local/heat_graphics2/blank.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: binary_sensor.alarm
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_heatpump_warning.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: binary_sensor.ftx_alarm
    type: image
    image: /local/heat_graphics2/blank.png
    state_image:
      'on': /local/heat_graphics2/base3_ftx_warning.png
    style:
      left: 0%
      top: 0%
      transform: none
      width: 100%
  - entity: climate.room_temp_setpoint
    attribute: current_temperature
    style:
      left: 2%
      top: 50.5%
      transform: translate(0%, -50%)
      font-size: 1.5vw
      text-decoration: underline
    type: state-label
    prefix: 'Setpoint: '
    suffix: °C
  - entity: sensor.heatpump_status_direct
    type: state-label
    style:
      right: 46.5%
      top: 81%
      transform: translate(0%, -50%)
      font-size: 1vw
  - entity: sensor.brine_out_condenser
    style:
      right: 86%
      top: 58.8%
      font-size: 1.5vw
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.brine_in_evaporator
    style:
      right: 86%
      top: 70%
      font-size: 1.5vw
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.radiator_forward
    style:
      left: 83.5%
      top: 63.5%
      transform: translate(0%,-50%)
      font-size: 1.5vw
    type: state-label
  - entity: sensor.heating_setpoint
    style:
      left: 83.5%
      top: 67.5%
      transform: translate(0%,-50%)
      font-size: 1vw
    prefix: 'Target: '
    type: state-label
  - entity: sensor.heat_carrier_forwrd
    style:
      right: 45.7%
      top: 58.8%
      font-size: 1.5vw
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.heat_carrier_return
    style:
      right: 45.7%
      top: 70%
      font-size: 1.5vw
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.warm_water_1_top
    style:
      left: 73.8%
      top: 81.6%
      font-size: 1.5vw
    type: state-label
  - entity: sensor.hot_gas_compr
    style:
      right: 68%
      top: 58.8%
      font-size: 1.5vw
      transform: translate(0%,-50%)
    type: state-label
  - entity: sensor.heat_pump_outdoor_temperature_without_offset
    style:
      left: 7%
      top: 81%
      transform: translate(0%, -50%)
      font-size: 1vw
    type: state-label
    prefix: 'Outside: '
  - entity: sensor.add_heat_status
    style:
      left: 42%
      bottom: 45%
      font-size: 1.5vw
      transform: translate(-50%,50%)
    type: state-label
  - entity: sensor.ftx_humidity_filtered
    suffix: RH
    style:
      left: 79.5%
      top: 26.5%
      transform: translate(0%,-50%)
      font-size: 1.5vw
    type: state-label
  - entity: sensor.ftx_extract_temperature_filtered
    style:
      left: 79.5%
      top: 30%
      transform: translate(0%,-50%)
      font-size: 1.5vw
    type: state-label
  - entity: sensor.ftx_supply_temperature
    style:
      right: 36%
      top: 30%
      transform: translate(50%,-50%)
      font-size: 1.5vw
    type: state-label
  - entity: sensor.ftx_exhaust_temperature
    style:
      right: 94%
      top: 12.5%
      font-size: 1.5vw
      transform: translate(50%,-50%)
    type: state-label
  - entity: sensor.ftx_outdoor_temperature
    style:
      right: 94%
      top: 22.5%
      font-size: 1.5vw
      transform: translate(50%,-50%)
    type: state-label
  - entity: sensor.ftx_heater_active
    type: state-label
    style:
      left: 44%
      top: 30%
      font-size: 1.5vw
      transform: translate(-50%,-50%)
  - entity: sensor.ftx_heat_exchanger_active
    type: state-label
    style:
      left: 22%
      top: 18%
      font-size: 1.5vw
      transform: translate(-50%,-50%)
  - entity: sensor.ftx_extract_efficiency
    type: state-label
    style:
      left: 28%
      top: 26.5%
      font-size: 1vw
      transform: translate(-50%,-50%)
    suffix: ' eff'
  - entity: sensor.ftx_exhaust_efficiency
    type: state-label
    style:
      left: 28%
      top: 8.5%
      font-size: 1vw
      transform: translate(-50%,-50%)
    suffix: ' eff'
  - entity: sensor.ftx_supply_fan_speed_percent
    type: state-label
    style:
      left: 36.5%
      top: 30%
      font-size: 1.5vw
      transform: translate(-50%,-50%)
  - entity: sensor.ftx_extract_fan_speed_percent
    type: state-label
    style:
      left: 36.5%
      top: 5.7%
      font-size: 1.5vw
      transform: translate(-50%,-50%)
  - entity: sensor.kitchen_fan_status
    type: state-label
    style:
      left: 92.5%
      top: 54%
      transform: translate(0%,-50%)
      font-size: 1.5vw
  - entity: sensor.bathroom_humidity
    type: state-label
    suffix: RH
    style:
      left: 88.5%
      top: 40%
      transform: translate(0%,-50%)
      font-size: 1.5vw
  - entity: sensor.bathroom_temperature
    type: state-label
    style:
      left: 88.5%
      top: 43.5%
      transform: translate(0%,-50%)
      font-size: 1.5vw
  - entity: sensor.upstairs_humidity
    type: state-label
    suffix: RH
    style:
      left: 78%
      top: 42%
      font-size: 1.5vw
  - entity: sensor.upstairs_temperature
    type: state-label
    style:
      left: 69.5%
      top: 42%
      font-size: 1.5vw
  - entity: sensor.downstairs_humidity
    type: state-label
    suffix: RH
    style:
      left: 78%
      top: 54%
      font-size: 1.5vw
  - entity: sensor.downstairs_temperature
    type: state-label
    style:
      left: 69.5%
      top: 54%
      font-size: 1.5vw
  - entity: sensor.behind_house_temperature
    type: state-label
    style:
      right: 32.0%
      top: 54%
      font-size: 1.5vw
  - entity: sensor.behind_house_luminance
    type: state-label
    prefix: ☀️
    style:
      right: 0.5%
      top: 2%
      font-size: 1.5vw
  - entity: input_number.ftx_temperature_setpoint
    style:
      left: 19%
      top: 4%
      transform: translate(0%, -50%)
      font-size: 1.5vw
      text-decoration: underline
    type: state-label
    prefix: 'Setpoint: '
  - entity: input_select.ftx_active_user_mode
    type: state-label
    style:
      left: 19%
      top: 34.4%
      transform: translate(0%, -50%)
      font-size: 1.5vw
      text-decoration: underline
    prefix: 'Mode: '
  - entity: input_select.ftx_manual_fan_speed
    type: state-label
    style:
      left: 36.5%
      top: 34.4%
      transform: translate(-50%, -50%)
      font-size: 1.5vw
      text-decoration: underline
    prefix: 'Fans: '
  - entity: switch.ftx_eco_mode_enabled
    type: state-label
    style:
      left: 44%
      top: 34.4%
      transform: translate(-50%, -50%)
      font-size: 1.5vw
      text-decoration: underline
    prefix: 'Eco: '
1 Like
3

@dbs
Hi David,

thank you so much. That is a starting point for me. I will try this if I find some time to do so,… :slight_smile:

Thanks again.

Joe