Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature may not be available in some browsers.
type: custom:fluid-level-background-card
card:
show_state: true
show_name: false
camera_view: auto
fit_mode: cover
type: picture-entity
image: /local/wassertank/OilTank.png
entity: sensor.zisterne
name: Zisterne
entity: sensor.zisterne
fill_entity: sensor.zisterne
background_color:
- 61
- 110
- 62
severity:
- value: 20
color: red
- value: 25
color: yellow
- value: 40
color: blue
full_value: 100
grid_options:
rows: 5
columns: 9
type: picture-elements
elements:
- type: custom:fluid-level-background-card
entity: sensor.zisterne
style:
z-index: 1
top: 50%
left: 50%
transform: translate(-50%, -50%)
width: 100%
height: 100%
card_mod:
style: |
ha-card {
text-align: center;
--ha-card-border-color: transparent !important;
box-shadow: none !important;
background: none !important;
border-radius: 50px;
overflow: hidden;
}
#container, .container {
width: 23.3% !important;
height: 70% !important;
position: relative !important;
border-radius: 14px !important;
margin-left: 38.2%;
margin-top: 8%;
# transform: translate(150%, -50%);
opacity: 0.9;
overflow: hidden;
}
level_color:
- 82
- 171
- 255
severity:
- color:
- 255
- 71
- 71
value: 0
- color:
- 112
- 200
- 255
value: 20
- color:
- 56
- 179
- 255
value: 50
- color:
- 0
- 145
- 255
value: 80
fill_entity: input_boolean.water_tank_filling
full_value: "110"
card:
type: custom:card-templater
card:
type: entity
entity: sensor.zisterne
title_template: "{{states(''sensor.zisterne'')|round(0)}}% "
show_header_toggle: false
show_name: false
name: Water
icon: mdi:water
position:
value: "off"
card_mod:
style: |
ha-card {
--ha-card-header-font-size: 14px;
height: 225px !important;
}
.card-header {
justify-content: center !important;
}
.name {
overflow: unset !important;
}
title: Water Tank Level
image: /local/wassertank/guage.jpg
card_mod:
style:
hui-image $: |
img {
z-index: 1 !important;
position: relative !important;
right: 0px;
top: 0px;
width: 100% !important;
opacity: 1
}