Created a card inspired by this… 
https://community.home-assistant.io/t/new-integration-grunbeck-softliq/157478/44
type: picture-elements
image: /local/water_soft.jpg
elements:
- type: state-label
entity: sensor.water_softener_water_current_flow
style:
top: 10%
left: 70%
color: white
- type: conditional
conditions:
- entity: sensor.water_softener_state
state: Online
elements:
- type: state-label
entity: sensor.water_softener_state
style:
top: 25%
left: 38%
color: green
font-weight: bold
font-size: 150%
- type: conditional
conditions:
- entity: sensor.water_softener_state
state: Offline
elements:
- type: state-label
entity: sensor.water_softener_state
style:
top: 25%
left: 38%
color: red
font-weight: bold
font-size: 150%
- type: state-label
entity: sensor.water_softener_today_water_usage
style:
top: 28%
left: 77%
text-align: left
color: rgb(0,0,0)
font-size: 100%
font-weight: normal
prefix: 'Used today: '
- type: state-label
entity: sensor.water_softener_water_usage_daily_average
style:
top: 34%
left: 77%
text-align: left
color: rgb(0,0,0)
font-size: 100%
font-weight: normal
prefix: 'Daily average: '
- type: state-label
entity: sensor.water_softener_available_water
style:
top: 48.3%
left: 77%
color: rgb(0,0,0)
font-size: 100%
font-weight: normal
prefix: 'Water level: '
- type: state-label
entity: sensor.water_softener_salt_level
style:
top: 63.5%
left: 77%
color: rgb(0,0,0)
font-size: 100%
font-weight: normal
prefix: 'Salt level: '
- type: state-label
entity: sensor.water_softener_out_of_salt_date
style:
top: 67.5%
left: 77%
color: rgb(0,0,0)
font-size: 100%
font-weight: normal
prefix: 'Empty: '
- type: image
style:
top: 48.4%
left: 50%
width: 19%
aspect_ratio: 50%
entity: sensor.water_softener_water_level_image
state_image:
image_0: /local/circ_blue_0.png
image_25: /local/circ_blue_25.png
image_50: /local/circ_blue_50.png
image_75: /local/circ_blue_75.png
image_100: /local/circ_blue_100.png
- type: image
style:
top: 65.8%
left: 50%
width: 19%
aspect_ratio: 50%
entity: sensor.water_softener_salt_level_image
state_image:
image_0: /local/circ_grey_0.png
image_25: /local/circ_grey_25.png
image_50: /local/circ_grey_50.png
image_75: /local/circ_grey_75.png
image_100: /local/circ_grey_100.png