Hello, I’m trying to create an UI for my Netro Sprinkler, but the result is very odd and awful.
Any help in formatting it? I would like to create a table with text, buttons and input_numbers.
##################################
# IRRIGAZIONE
##################################
- badges: []
panel: true
visible: true
path: irrigazione
title: Irrigazione
entities:
- sensor.centralina_irrigazione
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: markdown
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.DeviceName }}
- card:
entity: sensor.centralina_irrigazione
image: '${states[''sensor.centralina_irrigazione''].attributes.StatusImage}'
type: 'custom:hui-image-element'
style:
top: 45%
left: 35%
width: 5%
height: 5%
transform: translate(0%,2%)
entities:
- sensor.centralina_irrigazione
type: 'custom:config-template-card'
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: markdown
content: "Zona"
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone1Name }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone2Name }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone3Name }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone4Name }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone5Name }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone6Name }}
- type: vertical-stack
cards:
- type: markdown
content: "Innaffiata"
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone1Watered }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone2Watered }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone3Watered }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone4Watered }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone5Watered }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone6Watered }}
- type: vertical-stack
cards:
- type: markdown
content: "Prossimo ciclo"
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone1Next }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone2Next }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone3Next }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone4Next }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone5Next }}
- type: markdown
style: |
ha-card {
height: 70px
}
padding: '0px'
content: >-
{{ states['sensor.centralina_irrigazione'].attributes.Zone6Next }}
- type: vertical-stack
cards:
- type: markdown
content: "Minuti"
- entities:
- entity: input_number.minuti_zona_1
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- entities:
- entity: input_number.minuti_zona_2
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- entities:
- entity: input_number.minuti_zona_3
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- entities:
- entity: input_number.minuti_zona_4
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- entities:
- entity: input_number.minuti_zona_5
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- entities:
- entity: input_number.minuti_zona_6
style: |
ha-card {
height: 70px
}
padding: '0px'
type: entities
- type: 'custom:config-template-card'
entities:
- input_number.minuti_zona_1
- input_number.minuti_zona_2
- input_number.minuti_zona_3
- input_number.minuti_zona_4
- input_number.minuti_zona_5
- input_number.minuti_zona_6
card:
type: vertical-stack
cards:
- type: markdown
content: "Innaffia"
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
data_template:
zona: 1
minuti: >
[[[ return states['input_number.minuti_zona_1'].state | 0; ]]]
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
service_data:
zona: 2
minuti: >
[[[ return states['input_number.minuti_zona_2'].state | 0; ]]]
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
service_data:
zona: 3
minuti: >
[[[ return states['input_number.minuti_zona_3'].state | 0; ]]]
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
service_data:
zona: 4
minuti: >
[[[ return states['input_number.minuti_zona_4'].state | 0; ]]]
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
service_data:
zona: 5
minuti: >
[[[ return states['input_number.minuti_zona_5'].state | 0; ]]]
- type: 'custom:button-card'
style: |
ha-card {
height: 70px
}
padding: '0px'
icon: 'mdi:water-pump'
icon_height: 40px
tap_action:
action: call-service
service: script.water_a_zone
service_data:
zona: 6
minuti: >
[[[ return states['input_number.minuti_zona_6'].state | 0; ]]]
