Thanks! I will have a look at it!
Itās the Welcome Card With Weather but slightly changed things to make it only display the weather, i did exactly the same with mine. You can take the code to get the same result.
custom_card_paddy_welcome_with_weather:
template:
- ulm_custom_card_paddy_welcome_language_variables
show_icon: false
show_name: false
show_label: false
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-columns: 1fr
- grid-template-rows: min-content min-content
- row-gap: 1px
card:
- height: 70px
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
custom_fields:
item2:
card:
type: weather-forecast
tap_action:
action: none
entity: "[[[ return variables.ulm_custom_card_paddy_welcome_weather_provider; ]]]"
show_forecast: false
name: ""
card_mod:
style: |
ha-card.type-weather-forecast {
border-radius: 14px;
box-shadow: none;
margin-top: -25px;
}
ha-card.type-weather-forecast .state {
text-align: left;
font-size: 18px;
font-weight: bolder;
margin-top: 2px;
}
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;
}
How do you do the 2/2 for presence detection?
Just using the chip_presence_detection:
- type: 'custom:button-card'
template: chip_presence_detection
variables:
ulm_chip_presence_counter_residents: sensor.people_presence
ulm_chip_presence_counter_guests: sensor.my_guests_counter
And these are my sensors (I hardcoded the guests for 2, this way means there is 2 people home out of two:
people_presence:
friendly_name: People Presence
value_template: >-
{{ states.person|selectattr('state','equalto','home')|list|length }}
my_guests_counter:
friendly_name: Guests Presence
value_template: >-
{{ 2 | int }}
And this is the chip template:
chip_presence_detection:
template: chips
triggers_update:
- "[[[ return variables.ulm_chip_presence_counter_residents; ]]]"
- "[[[ return variables.ulm_chip_presence_counter_guests; ]]]"
label: |
[[[
var guests = states[variables.ulm_chip_presence_counter_guests].state ? ' / ' + states[variables.ulm_chip_presence_counter_guests].state : '';
return 'š ' + states[variables.ulm_chip_presence_counter_residents].state + guests;
]]]
Did you ever work the issue?
If so, would you mind sharing the template/yaml?
Edit: never mind, my bad, saw that your where working on it now on Github. Keep up the great work!
It is still under active development. But any help is appreciated.
More info can be found in the pull request
Hi Bavo. Saw your contribution in Github! Awesome work!
If I could, I would help out coding, but I canāt code
Where did you do those changes? I want to use that card for thermostats also, but I canāt figure it outā¦
@vandenbogerd I made a new custom card for climate entities. It change the icon/color depending on the state etc. You just have to set your climate entity in the card config and be sure it use the same climate attributes as mine heating system (Vicareā¦). Give me a day and I will upload it + the scripts for increase/decrease the temperature, I just need to find the time for uploading all my custom cards (Sonos, Vicare, TV, STB and PlayStation).
A vacuum card with buttons for
- Return home
- Open/close vacuum Ā«garage doorĀ»
- Zones to clean
- Exit garage
Iām really enjoying learning lovelace, but Iām also new to designing dashboards. Is there a collection of examples somewhere? Preferably ones designed for desktop, as well as mobile? Not just pictures (although those are needed, in order to visualize), but also the yaml, to understand how everything fits together?
As an example, I truly love this dashboard, and while I donāt want to copy it, Iād like to know how to do something similar. But Iāve got no idea where to start with it.
Also adjusted the default battery template so that an alarm is displayed when the battery falls below a certain threshold.
Very nice! Do you have the code for this?
Possible to toggle a chip template when i tap on it?
Struggling to get this to workā¦
- type: 'custom:button-card'
template: chip_icon_state
variables:
ulm_chip_icon_state_icon: 'š”'
ulm_chip_icon_state_entity: light.kallare_taklampor
tap_action:
action: toggle
entity: light.kallare_taklampor
triggers_update: light.kallare_taklampor
Try:
action: call-service
service: light.toggle
service_data:
entity_id: your entity
Have you tried
hi, can you post your configuration?
Thank you.
Havenāt cleaned up the code yet but this is what Iāve got at the moment. I couldnāt decide on names or icons for the zones, so they could be easily switched to template: widget_icon and do icons later on if I feel like it. I used the custom aircon card as a starting point.
Card:
- type: custom:button-card
template: custom_card_vacuum_with_buttons
variables:
entity: vacuum.roborock_s7
name: Britt
Templates:
widget_name:
tap_action:
action: toggle
show_icon: false
show_name: true
styles:
grid:
- grid-template-areas: '"n"'
card:
- box-shadow: none
- padding: 0px
- background-color: rgba(var(--color-theme),0.05)
- border-radius: 14px
- place-self: center
- height: 42px
name:
- font-weight: bold
- font-size: 14px
icon:
- color: rgba(var(--color-theme),0.9)
size: 20px
color: var(--google-grey)
custom_card_vacuum:
template:
- ulm_language_variables
tap_action:
action: more-info
icon: |
[[[
return 'mdi:robot-vacuum';
]]]
label: |-
[[[
return states['input_number.areal_stovsugd'].state + ' mĀ²';
]]]
custom_card_vacuum_with_buttons:
variables:
name: null
styles:
grid:
- grid-template-areas: '"item1" "item2" "item3"'
- grid-template-columns: 1fr
- grid-template-rows: min-content 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: custom:button-card
template: list_items_favorite
custom_fields:
item1:
card:
type: custom:button-card
template:
- icon_info
- custom_card_vacuum
tap_action:
action: more-info
name: |
[[[
if (variables.name == null) {
return variables.entity;
}
return variables.name;
]]]
entity: '[[[ return variables.entity ]]]'
item2:
card:
type: horizontal-stack
cards:
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: docked
- entity: '[[[ return variables.entity ]]]'
state_not: charging
card:
type: custom:button-card
template: widget_icon
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsuger_parker
icon: mdi:home-variant
state:
- operator: template
value: >-
[[[ return
states['input_boolean.stovsuger_parker'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
- type: conditional
conditions:
- entity: '[[[ return variables.entity ]]]'
state_not: 'off'
card:
type: custom:button-card
template: widget_icon
tap_action:
action: call-service
service: switch.toggle
service_data:
entity_id: switch.roberto_luke
icon: hass:garage
state:
- operator: template
value: >-
[[[ return states['switch.roberto_luke'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item2:
card:
type: custom:button-card
template: list_items
custom_fields:
item1:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsug_kjokken
name: KjĆøkken
state:
- operator: template
value: >-
[[[ return states['input_boolean.stovsug_kjokken'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item2:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsug_spisestue
name: Spisestue
state:
- operator: template
value: >-
[[[ return states['input_boolean.stovsug_spisestue'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item3:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsug_tv_stue
name: TV-stue
state:
- operator: template
value: >-
[[[ return states['input_boolean.stovsug_tv_stue'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item3:
card:
type: custom:button-card
template: list_items
custom_fields:
item1:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.2_etg
name: 2. etg
state:
- operator: template
value: >-
[[[ return states['input_boolean.2_etg'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item2:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsug_1_etg
name: 1. etg
state:
- operator: template
value: >-
[[[ return states['input_boolean.stovsug_1_etg'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
item3:
card:
type: custom:button-card
template: widget_name
tap_action:
action: call-service
service: input_boolean.toggle
service_data:
entity_id: input_boolean.stovsuger_kom_frem
name: Kom frem
state:
- operator: template
value: >-
[[[ return states['input_boolean.stovsuger_kom_frem'].state ==
'on' ]]]
styles:
card:
- background-color: >-
rgba(var(--color-background-blue),var(--opacity-bg))
Thanks - I hadnāt seen that section of the docs. But I probably shouldāve been more clear. Itās not the layout that I was really asking about. Itās the āmaking-it-look-goodā part.
From what Iāve seen, a lot of folks seem to have the ability to bring things together with a nice appearance. Iām not one of them.
It would be awesome to be able to take some of my dashboards to that next level.