Custom-card "Welcome"¶
This is a custom-card to show a welcome message to the user. It comes in four different versions:
- welcome message (custom_card_paddy_welcome)
- welcome message + weather-forecast (custom_card_paddy_welcome_with_weather)
- welcome message + news (custom_card_paddy_welcome_with_news) [based on home-feed-card]
The card shows a time based message (good morning/afternoon/evening/hello) to the logged-in user with username. The second part of the card varies depending on what version you choose. Note, that you have different requirements depending on the version!
Credits¶
Author: Paddy0174 - 2021 Version: 1.0.0
Changelog¶
1.0.0
Initial releaseRequirements¶
This card needs the following to function correctly:
| Component / card | required | Note |
|---|---|---|
| lovelace-card-mod | yes | |
| a weather integration/provider | only for welcome-card-with-weather | See setup instructions for a HA weather integration |
| home-feed-card | only for welcome-card-with-news |
Usage¶
- type: custom:button-card
template: custom_card_paddy_welcome
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
- type: custom:button-card
template: custom_card_paddy_welcome_with_weather
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
ulm_custom_card_paddy_welcome_weather_provider: weather.accu_weather
- type: custom:button-card
template: custom_card_paddy_welcome_with_news
variables:
ulm_custom_card_paddy_welcome_time: sensor.time
ulm_custom_card_paddy_welcome_news_entities:
- entity: sensor.waste_collection_paper
content_template: "<b>{{display_name}}</b><br>{{state}}"
- entity: sensor.waste_collection_waste
content_template: "<b>{{display_name}}</b><br>{{state}}"
Variables¶
| Card type | Variable | Example | Required | Explanation |
|---|---|---|---|---|
| all | ulm_custom_card_paddy_welcome_time | sensor.time | yes | This is your Home Assistant sensor.time |
| _welcome_with_weather | ulm_custom_card_paddy_welcome_weather_provider | weather.accu_weather | yes | This is your weather provider |
| _welcome_with_news | ulm_custom_card_paddy_welcome_news_entities | entity: sensor.waste_collection_paper content_template: "<b>{{display_name}}</b><br>{{state}}" |
yes | A list of your entities to show in the news feed, see the note underneath. |
Note _welcome_with_news¶
This card is based on home-feed-card and needs a little different configuration in the variables. To allow almost all entities from HomeAssistant to show in the news, you're able to set all options that
home-feed-cardprovides. This makes it necessary, that you set these entities in a list. Let me show you an example:# normally you do this variables: ulm_variable: your_variable_entity # here you need to do a list variables: ulm_variable: - your_variable_entity_1 - your_variable_entity_2 # to use an option from home-feed-card variables: ulm_variable: - entity: your_variable_entity_1 content_template: "<b>{{ display_name }}</b><br>{{ state }}" - your_variable_entity_2You can find all available options and their description here.
I recommend to use a
content_templateto format the output for every news item, eg. like this:content_template: "<b>{{ display_name }}</b><br />{{ state }}"
Example¶
- type: custom:button-card
template: custom_card_paddy_welcome_with_news
variables:
ulm_custom_card_paddy_welcome_news_entities:
- entity: input_datetime.alarm_clock
content_template: "<b>{{display_name}}</b><br />{{state}}"
- entity: sensor.waste_collection_bio
content_template: "<b>{{display_name}}</b><br />{{state}}"
- entity: sensor.waste_collection_paper
content_template: "<b>{{display_name}}</b><br />{{state}}"
- entity: sensor.waste_collection_plastic
content_template: "<b>{{display_name}}</b><br />{{state}}"
Template code¶
Template Code
custom_card_paddy_welcome.yaml
---
custom_card_paddy_welcome:
template:
- "ulm_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"
- 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_evening;
} else if (time > '12:00'){
welcome = variables.ulm_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_morning;
} else {
welcome = variables.ulm_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;
}
custom_card_paddy_welcome_with_weather:
template:
- "ulm_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: "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_evening;
} else if (time > '12:00'){
welcome = variables.ulm_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_morning;
} else {
welcome = variables.ulm_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: "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;
}
custom_card_paddy_welcome_with_news:
template:
- "ulm_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: "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_evening;
} else if (time > '12:00'){
welcome = variables.ulm_afternoon;
} else if (time > '05:00'){
welcome = variables.ulm_morning;
} else {
welcome = variables.ulm_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:home-feed-card"
card_id: "main_feed"
show_empty: false
more_info_on_tap: true
state_color: false
compact_mode: true
max_item_count: 3
show_icons: true
entities: >
[[[
return variables.ulm_custom_card_paddy_welcome_news_entities;
]]]
card_mod:
style: |
ha-card {
border-radius: 14px;
box-shadow: none;
font-size: 14px;
text-align: left;
}
Custom configuration Example¶
Here is one example, on how you can extend this (actually every) card. In the end we have the welcome card extended by four buttons to have something like a header with a navigation.
- type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: custom_card_paddy_welcome
# here we override the styles to extend the welcome card with a second item
styles:
grid:
- grid-template-areas: '"item1" "item2"'
- grid-template-rows: min-content min-content
- row-gap: 12px
custom_fields:
# here we set up the second item and its contents
item2:
card:
type: horizontal-stack
cards:
- type: custom:button-card
template: edge
- type: custom:button-card
template: vertical_buttons
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/living
icon: "mdi:sofa"
name: Living
label: Livingroom
- type: custom:button-card
template: vertical_buttons
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/working
icon: "mdi:factory"
name: Working
label: Office
- type: custom:button-card
template: vertical_buttons
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/sleeping
icon: "mdi:bed-king-outline"
name: Sleeping
label: Bedroom
- type: custom:button-card
template: vertical_buttons
tap_action:
action: navigate
navigation_path: /ui-lovelace-minimalist/climate
icon: "mdi:air-conditioner"
name: Air Conditioning
label: Livingroom
- type: custom:button-card
template: edge
- type: custom:button-card
template: edge