Ah ah youāre right !
Here is the code I use :
- type: custom:button-card
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "'item1 item1' 'item2 item2' 'item3 item3'"
- grid-template-columns: 1fr 1fr
- grid-template-rows: "min-content min-content min-content"
- row-gap: 5px
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 10px
custom_fields:
item1:
card:
type: custom:button-card
template: card_title
name: Salon
label: '[[[ return "Il fait actuellement " + states["sensor.netatmo_air_quality_jouffroy_temperature"].state + "Ā°C dans le salon." ]]]'
item2:
card:
type: custom:button-card
template: list_2_items
custom_fields:
item1:
card:
type: custom:button-card
template: card_generic
entity: sensor.netatmo_air_quality_jouffroy_noise
icon: "mdi:volume-high"
styles:
icon:
- color: "rgba(var(--color-pink),0.8)"
img_cell:
- background-color: "rgba(var(--color-pink),.05)"
card:
- box-shadow: none
item2:
card:
type: custom:button-card
template: card_generic
entity: sensor.netatmo_air_quality_jouffroy_co2
icon: "mdi:molecule-co2"
styles:
icon:
- color: "rgba(var(--color-green),0.8)"
img_cell:
- background-color: "rgba(var(--color-green),.05)"
card:
- box-shadow: none
item3:
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: card_graph
variables:
ulm_card_graph_color: "var(--google-red)"
ulm_card_graph_name: TempƩrature
ulm_card_graph_entity: sensor.netatmo_air_quality_jouffroy_temperature
- type: custom:button-card
template: card_graph
variables:
ulm_card_graph_color: "var(--google-blue)"
ulm_card_graph_name: HumiditƩ
ulm_card_graph_entity: sensor.netatmo_air_quality_jouffroy_humidity
Iām nowhere near being a professional developer, Iām just having fun with it ; iām pretty sure the code isnāt great at all !
@chintito4ever Iām using the Netatmo Healthy Home Coach, that works pretty great !@madir Here you go
8 Likes
Thank you for sharing this. Does Netatmo api allow data streaming in real time? Is noise sensor live or it updates periodically?
LRvdLinden
February 6, 2022, 8:40am
1406
Thats nice!
Do you have the template and ui card code?
Hi guys,
I donāt know why itās not working. Consider a card for irrigation:input_number.iu_zone_1_run_time to hold the runtime and associated it to the slider. Moving the slider does not update the value ā¦
Much appreciated!
Follows the code to set the data for the custom_card:
- type: "custom:button-card"
template: custom_card_irrigation
entity: binary_sensor.irrigation_unlimited_c2_z1
variables:
ulm_card_irrigation_valve_name: Zone 1
ulm_card_irrigation_valve: binary_sensor.irrigation_unlimited_c2_z1
ulm_card_irrigation_timer: input_number.iu_zone_1_run_time
ulm_card_irrigation_timer_sensor: sensor.rt_zone1
ulm_card_irrigation_iutoggle: irrigation_unlimited.toggle
ulm_card_irrigation_iustartservice: irrigation_unlimited.manual_run
ulm_card_irrigation_iucancelservice: irrigation_unlimited.cancel
The piece that gets the data is here (part of my custom_card):@rgc99 ) irrigation implementation https://github.com/rgc99
item2: # timer button
card:
type: "custom:button-card"
template: "icon_info_line" #"widget_icon"
tap_action:
action: "none" #"more-info"
entity: "[[[ return variables.ulm_card_irrigation_timer ]]]"
label:
"[[[ return states[variables.ulm_card_irrigation_timer_sensor].state + ' ' + states[variables.ulm_card_irrigation_timer_sensor].attributes.unit_of_measurement\
\ ]]]"
item3: # slider
card:
type: "custom:my-slider"
template:
- "icon_info"
- "yellow_slider"
entity: "[[[ return variables.ulm_card_irrigation_timer ]]]"
hide_state: false
radius: "16px"
height: "42px"
mainSliderColor: >-
[[[
if (entity.state == "unavailable"){
return "rgba(var(--color-grey),1)";
}
return "rgba(var(--color-yellow),1)";
]]]
secondarySliderColor: >-
[[[
if (entity.state == "unavailable"){
return "rgba(var(--color-grey),0.2)";
}
return "rgba(var(--color-yellow),0.2)";
]]]
mainSliderColorOff: "rgba(var(--color-theme),0.05)"
secondarySliderColorOff: "rgba(var(--color-theme),0.05)"
thumbHorizontalPadding: "0px"
thumbVerticalPadding: "0px"
thumbWidth: "2px"
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
}
1 Like
Absolutely love this theme, but Iām getting some strange behaviour with light groups where the slider jumps to a different value (sometimes higher or lower) before showing the value I set it to about a second later. This doesnāt happen for the single light cards.
This is the card setup and group Iāve defined in my configurations.yaml:
- platform: group
name: Ceiling Lights
entities:
- light.main
- light.dressing_area
- type: "custom:button-card"
template: card_light
entity: light.ceiling_lights
variables:
ulm_card_light_enable_slider: true
ulm_card_light_enable_color: true
ulm_card_light_force_background_color: true
ulm_card_light_icon: mdi:ceiling-light-multiple
Has anyone come across this before?
pedolsky
February 7, 2022, 5:59am
1409
Unfortunately, every slider I have tried so far reacts like this.
1 Like
cgtobi
February 7, 2022, 9:43am
1410
It is not live data. The sensor updates about every 5 mintues.
hi all, is there a way i can make an update to the code in VSstudio (HASS addon) and then just reload the dash and see the update, i used to be able to do this with the old manual instalation however im now using the default HACS install and i have to restart the server after every small change
version 0.0.4 installed via HACS
basbrus
February 7, 2022, 10:08am
1412
Go to your dashboard, type ācā on your keyboard and reload the UI-minimalist-integration in this pop-up
. Than you can renew your dashboard and all changes should be applied (except from some cache errors that sometimes will happen)
klidberg
February 7, 2022, 10:09am
1413
In my browser I get this.
But it works on my phone.
- type: horizontal-stack
cards:
- type: "custom:button-card"
template: custom_card_welcome_scenes
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
custom_card_welcome_scenes:
template:
- "ulm_custom_card_paddy_welcome_language_variables"
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3' 'item4'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "var(--border-radius)"
- box-shadow: "var(--box-shadow)"
- padding: "12px"
custom_fields:
item1:
card:
type: "markdown"
content: >
[[[
let time = states[variables.ulm_custom_card_paddy_welcome_time].state;
let welcome = '';
if (time > '18:00'){
welcome = variables.ulm_custom_card_paddy_welcome_evening;
} else if (time > '12:00'){
welcome = variables.ulm_custom_card_paddy_welcome_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_custom_card_paddy_welcome_morning;
} else {
welcome = variables.ulm_custom_card_paddy_welcome_hello;
}
return welcome + ',<br>' + user.name + '!';
]]]
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
font-size: 30px;
text-align: left;
cursor: default;
}
item2:
card:
type: "custom:button-card"
template: card_title_welcome
name: Scenes
item3:
card:
type: "custom:button-card"
template:
- card_scenes
variables:
entity_1: "scene.candle_flicker"
entity_2: "scene.all_off"
entity_3: "scene.bed_time"
entity_4: "scene.movie_night"
entity_5: "scene.romantic"
name_1: "Candle"
name_2: "All Off"
name_3: "Bed Time"
name_4: "Movie Night"
name_5: "Romantic"
icon_1: "mdi:candelabra-fire"
icon_2: "mdi:lightbulb-group-off"
icon_3: "mdi:weather-night"
icon_4: "mdi:movie-open-check-outline"
icon_5: "mdi:candle"
color_icon_1: "yellow"
color_icon_2: "blue"
color_icon_3: "purple"
color_icon_4: "green"
color_icon_5: "red"
color_bg_1: "yellow"
color_bg_2: "blue"
color_bg_3: "purple"
color_bg_4: "green"
color_bg_5: "red"
item4:
card:
type: "custom:button-card"
template:
- "ulm_custom_card_paddy_welcome_language_variables"
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: "'item1'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
card:
- border-radius: "none"
- box-shadow: "none"
- padding: "12px"
custom_fields:
item1:
card:
type: "weather-forecast"
entity: "[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]"
show_forecast: false
card_mod:
style: |
ha-card.type-weather-forecast {
border-radius: 14px;
box-shadow: none;
}
ha-card.type-weather-forecast .state {
text-align: left;
font-size: 14px;
font-weight: bolder;
}
ha-card.type-weather-forecast .name {
text-align: left;
font-size: 14px;
}
ha-card.type-weather-forecast .temp-attribute {
text-align: right;
}
ha-card.type-weather-forecast .temp {
text-align: right;
font-size: medium;
font-weight: bolder;
margin-right: 16px;
}
ha-card.type-weather-forecast .temp span {
text-align: right;
font-size: medium;
font-weight: bolder;
}
ha-card.type-weather-forecast .attribute {
text-align: right;
font-size: smaller;
}
### TITLE ###
card_title_welcome:
tap_action:
action: "none"
show_icon: false
show_label: true
show_name: true
styles:
card:
- background-color: "rgba(0,0,0,0)"
- box-shadow: "none"
- height: "auto"
- width: "auto"
- margin-top: "-25px"
- margin-left: "16px"
- margin-bottom: "-20px"
grid:
- grid-template-areas: "'n' 'l'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
name:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1.5rem"
label:
- justify-self: "start"
- font-weight: "bold"
- font-size: "1rem"
- opacity: "0.4"
Also when I use the custom card I just get a empty page on my wifes iPhone 13 Pro Max. Any ideas?
basbrus
February 7, 2022, 10:14am
1414
I guess you did not specify a weather entity as the error asks for a entity in the part where the weather info should be showed.
- type: "custom:button-card"
template: custom_card_welcome_scenes
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
ulm_custom_card_paddy_welcome_weather_provider: weather.<Your_Provider>
1 Like
Thank you for the reply, just tried it (simply changed one of the card titles) and then did what you suggested but no change still
also that reload just maps to this in the configuration menu right? i have tried that aswell with no success
basbrus
February 7, 2022, 10:20am
1416
That should work the same. I donāt use the VSCode add-on but VSCode directly on my PC. There I need to make sure I have saved the changes in VSCode. Than reload the integration, either by typing c or go to the server page. Than I need also reload the dashboard with the 3-dots in the upper right corner of the dashboard.
klidberg
February 7, 2022, 10:34am
1417
That did the trick! What if I donāt want to show the weather?
ok, thanksā¦ is it possible though to increase the update time to a smaller intervall or to actively trigger the update on the event the slider moves?
basbrus
February 7, 2022, 10:45am
1419
Remove this part from your custom_card file.
to:
styles:
grid:
- grid-template-areas: "'item1' 'item2' 'item3'"
- grid-template-columns: "1fr"
- grid-template-rows: "min-content min-content"
- row-gap: "12px"
1 Like
cgtobi
February 7, 2022, 11:28am
1421
No, for two reasons. This would quickly exceed the API limits and because the devices themself donāt report their state more often as far as I know.
Hmm before i used to just be able to refresh the page but seems i have to press the three dots and reload, working now thank you!!
