could you tell me how you transformed current date to day number and day name?
Great work @Mattias_Persson
I’ve just been reading through your template.yaml file looking at part about the greeting message where it shows God morgon etc
I’m doing similar but my messages are slightly longer and go off the sidebar, do you know if it’s possible to force a line break so it’s on 2 lines within this template.
Thanks
I have my sensor.
- platform: template
sensors:
pretty_date:
friendly_name: Data di oggi
value_template: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
{% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ day }} {{ arr_months[month-1] }} {{ year }}
attribute_templates:
week_day: >-
{% set today = states("sensor.date") %}
{% set arr_week_days = ["Domenica", "Lunedì", "Martedì", "Mercoledì", "Giovedì", "Venerdì", "Sabato"] %}
{% set week_day = as_timestamp(today) | timestamp_custom('%w') | int %}
{{ arr_week_days[week_day] }}
day: >-
{% set today = states("sensor.date") %}
{% set day = as_timestamp(today) | timestamp_custom('%d') | round %}
{{ day }}
month_num: >-
{% set today = states("sensor.date") %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | round %}
{{ month }}
month_name: >-
{% set today = states("sensor.date") %}
{% set arr_months = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"] %}
{% set month = as_timestamp(today) | timestamp_custom('%m') | int %}
{{ arr_months[month-1] }}
year: >-
{% set today = states("sensor.date") %}
{% set year = as_timestamp(today) | timestamp_custom('%Y') | int %}
{{ year }}
2 Likes
Thank you a lot!
Howdy, Can you show how you set up your sensors?
Thanks.
This is the sensor I used for the calendar card. I use it by fetching states or attributes
Thanks. Sorry just saw that above
In working with the button_card_templates, how do you override some of the styles in the “base” or custom:button_card templates? I cannot seem to figure it out. I can change what is there, but I cannot add anything extra.
Hello, first I want to say thank you for this lovely UI!
At the moment, I am trying to bring the Corona Footer back (Germany). I want to get my data through this URL: Data
Which delivers me this code:
{
"objectIdFieldName": "ObjectId",
"uniqueIdField": {
"name": "ObjectId",
"isSystemMaintained": true
},
"globalIdFieldName": "",
"fields": [
{
"name": "AdmUnitId",
"type": "esriFieldTypeInteger",
"alias": "AdmUnitId",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "BundeslandId",
"type": "esriFieldTypeInteger",
"alias": "BundeslandId",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzFall",
"type": "esriFieldTypeInteger",
"alias": "AnzFall",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzTodesfall",
"type": "esriFieldTypeInteger",
"alias": "AnzTodesfall",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzFallNeu",
"type": "esriFieldTypeInteger",
"alias": "AnzFallNeu",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzTodesfallNeu",
"type": "esriFieldTypeInteger",
"alias": "AnzTodesfallNeu",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzFall7T",
"type": "esriFieldTypeInteger",
"alias": "AnzFall7T",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzGenesen",
"type": "esriFieldTypeInteger",
"alias": "AnzGenesen",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzGenesenNeu",
"type": "esriFieldTypeInteger",
"alias": "AnzGenesenNeu",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzAktiv",
"type": "esriFieldTypeInteger",
"alias": "AnzAktiv",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "AnzAktivNeu",
"type": "esriFieldTypeInteger",
"alias": "AnzAktivNeu",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
},
{
"name": "Inz7T",
"type": "esriFieldTypeDouble",
"alias": "Inz7T",
"sqlType": "sqlTypeFloat",
"domain": null,
"defaultValue": null
},
{
"name": "ObjectId",
"type": "esriFieldTypeOID",
"alias": "ObjectId",
"sqlType": "sqlTypeInteger",
"domain": null,
"defaultValue": null
}
],
"features": [
{
"attributes": {
"AdmUnitId": 0,
"BundeslandId": 0,
"AnzFall": 7297320,
"AnzTodesfall": 112925,
"AnzFallNeu": 58912,
"AnzTodesfallNeu": 346,
"AnzFall7T": 215078,
"AnzGenesen": 6581800,
"AnzGenesenNeu": 49900,
"AnzAktiv": 602600,
"AnzAktivNeu": 8700,
"Inz7T": 258.6,
"ObjectId": 101
}
},
{
"attributes": {
"AdmUnitId": 8127,
"BundeslandId": 8,
"AnzFall": 19455,
"AnzTodesfall": 286,
"AnzFallNeu": 78,
"AnzTodesfallNeu": 0,
"AnzFall7T": 434,
"AnzGenesen": 18500,
"AnzGenesenNeu": 100,
"AnzAktiv": 700,
"AnzAktivNeu": 0,
"Inz7T": 219.3,
"ObjectId": 355
}
}
]
}
Is there a way that I can display “AnzFallNeu”, “AnzTodesfallNeu” and “AnzGenesen” from the first attributes section and “Inz7T” from the second one in the footer?
I guess I have to get it in here somehow, don’t I?
state_display: >
[[[
if (entity && entity.attributes.embedCode != undefined) {
let data = entity.attributes.embedCode,
total = data.match(/Totalt[^,]*?(\d+)[^,]*?(\d+)[^,]*?(\d+)/),
spacer = ' <font color="#2f3436">|</font> ';
return `
<ha-icon icon="mdi:virus"></ha-icon> <b>Coronavirus</b>${spacer}
<ha-icon icon="mdi:chart-bar"></ha-icon> <b>${(parseFloat(total[1]) / 10327589 * 100).toFixed(2)}%</b> av Sverige${spacer}
<ha-icon icon="mdi:emoticon-sad"></ha-icon> <b>${total[1]}</b> fall${spacer}
<ha-icon icon="mdi:grave-stone"></ha-icon> <b>${total[3]}</b> avlidna${spacer}
<ha-icon icon="mdi:map-marker-radius"></ha-icon> <b>${data.match(/Skåne[^,]*?(\d+)/)[1]}</b> fall i Skåne
`;
}
]]]
I tried now pretty much everything but can’t get it to work. Can somebody help me? Thanks!
Hi @Mattias_Persson - thanks for that lovely theme.
To all.
Following situation: I have shelly switches for the lights and a few of the bulbs are IKEA tradfri.
Do anybody know - is it possible to tap on a card for toggle the light (shelly switch) and if I hold on for the dimmer/colour settings (light card).
But that means two different in one card?
Thanks for any info.
Sascha
Wouldn’t that just be two separate actions. One tap and one hold on the same button. Each would call a different service/pop up.
Yes - two actions. Any example for that?
see my method.
Hope to give something back
Hi,
thank you 
.
all works but the picture from the devices dosent show correcty:
what size have your pictures?
the size of pex81’s buttons takes places of 4 normal small ones. shizing should be fine if you place it without a grid.
could you please share your code for the max/min sensors? thanks in advance, these buttons look gorgeous!
oki thank you. With this works fine.
Sorry but I use this site to take the weather data with a command line sensor with json value and from the attributes I take the minimum and maximum.
- platform: command_line
name: Meteo
command: 'curl -sSL http://api.meteonetwork.it/v3/data-realtime/mls032 -H "Authorization: Bearer my_api_key" | jq ''{"station_code":.[].station_code,"place":.[].place,"area":.[].area,"altitude":.[].altitude,"temperature":.[].temperature,"smlp":.[].smlp,"rh":.[].rh,"wind_speed":.[].wind_speed,"wind_direction":.[].wind_direction,"wind_gust":.[].wind_gust,"rain_rate":.[].rain_rate,"daily_rain":.[].daily_rain,"dew_point":.[].dew_point,"current_tmin":.[].current_tmin,"current_tmed":.[].current_tmed,"current_tmax":.[].current_tmax,"current_rhmin":.[].current_rhmin,"current_rhmed":.[].current_rhmed,"current_rhmax":.[].current_rhmax,"current_wgustmax":.[].current_wgustmax,"current_wspeedmed":.[].current_wspeedmed,"current_wspeedmax":.[].current_wspeedmax,"name":.[].name}'''
value_template: "{{ value_json.temperature }}"
json_attributes:
- station_code
- place
- area
- altitude
- temperature
- smlp
- rh
- wind_speed
- wind_direction
- wind_gust
- rain_rate
- daily_rain
- dew_point
- current_tmin
- current_tmed
- current_tmax
- current_rhmin
- current_rhmed
- current_rhmax
- current_wgustmax
- current_wspeedmed
- current_wspeedmax
- name
2 Likes
I fixed it so that you can adjust the size of your entity_picture with the size: 70% and I added an icon for the same when in Charging
widget_custom_fields:
show_icon: false
show_state: false
show_name: false
aspect_ratio: 1/1
show_entity_picture: true
tap_action:
action: none
styles:
custom_fields:
circle:
- top: 0%
- width: 100%
- position: absolute
custom_fields:
circle: >
[[[
if (entity.state > 20) {
let input = entity.state,
radius = 20.5,
color = 'green',
circumference = radius * 2 * Math.PI,
dasharray = circumference,
dashoffset = circumference - input / 100 * circumference;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" stroke="gray" stroke-opacity="50%" stroke-width="4.5" fill="none" />
<circle cx="25" cy="25" r="${radius}" stroke="${color}" stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-linecap="round" stroke-width="4.5" fill="none" style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
`;
} if (entity.state > 10) {
let input = entity.state,
radius = 20.5,
color = 'orange',
circumference = radius * 2 * Math.PI,
dasharray = circumference,
dashoffset = circumference - input / 100 * circumference;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" stroke="gray" stroke-opacity="50%" stroke-width="4.5" fill="none" />
<circle cx="25" cy="25" r="${radius}" stroke="${color}" stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-linecap="round" stroke-width="4.5" fill="none" fill-opacity="0.3" style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
</svg>
`;
} else {
let input = entity.state,
radius = 20.5,
color = 'red',
circumference = radius * 2 * Math.PI,
dasharray = circumference,
dashoffset = circumference - input / 100 * circumference;
return `
<svg viewBox="0 0 50 50">
<circle cx="25" cy="25" r="${radius}" stroke="gray" stroke-opacity="50%" stroke-width="4.5" fill="none" />
<circle cx="25" cy="25" r="${radius}" stroke="${color}" stroke-dashoffset="${dashoffset}" stroke-dasharray="${dasharray}" stroke-linecap="round" stroke-width="4.5" fill="none" fill-opacity="0.3" style="transform: rotate(-90deg); transform-origin: 50% 50%;" />
</svg>
`;
}
]]]
widget_phone:
variables:
entity_phone: ''
entity_phone_battery_state: ''
entity_picture_iphone: ''
entity_watch: ''
entity_picture_watch: ''
entity_ipad: ''
entity_picture_ipad: ''
entity_other: ''
entity_phone_battery_state: ''
entity_picture_other: ''
aspect_ratio: 1/1
show_icon: false
show_name: false
show_state: false
show_label: false
styles:
grid:
- grid-template-areas: |
"iphone iwatch"
"ipad other"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: repeat(2, 1fr)
- gap: 2%
card:
- padding: 5%
- color: >
[[[
if (states['sun.sun'].state == 'below_horizon'){
return 'rgba(0, 0, 0, 0.6)';
} else {
return 'rgba(255, 255, 255, 0.3)';
}
]]]
custom_fields:
iphone:
iwatch:
ipad:
other:
custom_fields:
iphone:
card:
type: custom:button-card
entity: '[[[ return variables.entity_phone ]]]'
template: widget_custom_fields
icon: phu:apple-iphone
size: 70%
entity_picture: '[[[ return variables.entity_picture_iphone ]]]'
styles:
custom_fields:
icon:
- top: 0%
- left: 25%
- width: 50%
- position: absolute
- z-index: 100
custom_fields:
icon: >
[[[
if (states[variables.entity_phone_battery_state].state == 'Charging'){
return `<ha-icon icon="mdi:flash" style="width: 20px; height: 20px;"></ha-icon>`
} else {
return " ";
}
]]]
iwatch:
card:
type: custom:button-card
entity: '[[[ return variables.entity_watch ]]]'
template: widget_custom_fields
icon: phu:apple-ipad-pro
size: 70%
entity_picture: '[[[ return variables.entity_picture_watch ]]]'
styles:
custom_fields:
icon:
- top: 0%
- left: 25%
- width: 50%
- position: absolute
- z-index: 100
custom_fields:
icon: >
[[[
if (states[variables.entity_watch].attributes.battery_status == 'Charging'){
return `<ha-icon icon="mdi:flash" style="width: 20px; height: 20px;"></ha-icon>`
} else {
return " ";
}
]]]
ipad:
card:
type: custom:button-card
entity: '[[[ return variables.entity_ipad ]]]'
template: widget_custom_fields
icon: phu:apple-ipad-pro
size: 70%
entity_picture: '[[[ return variables.entity_picture_ipad ]]]'
styles:
custom_fields:
icon:
- top: 0%
- left: 25%
- width: 50%
- position: absolute
- z-index: 100
custom_fields:
icon: >
[[[
if (states[variables.entity_ipad_battery_state].state == 'Charging'){
return `<ha-icon icon="mdi:flash" style="width: 20px; height: 20px;"></ha-icon>`
} else {
return " ";
}
]]]
other:
card:
type: custom:button-card
entity: '[[[ return variables.entity_other ]]]'
template: widget_custom_fields
icon: phu:apple-iphone
size: 70%
entity_picture: '[[[ return variables.entity_picture_other ]]]'
styles:
custom_fields:
icon:
- top: 0%
- left: 25%
- width: 50%
- position: absolute
- z-index: 100
custom_fields:
icon: >
[[[
if (states[variables.entity_other_battery_state].state == 'Charging'){
return `<ha-icon icon="mdi:flash" style="width: 20px; height: 20px;"></ha-icon>`
} else {
return " ";
}
]]]
- type: custom:button-card
template:
- base
- widget_phone
variables:
# iPhone 13mini
entity_phone: sensor.ipex_battery_level
entity_phone_battery_state: sensor.ipex_battery_state
entity_picture_iphone: /local/apple/i12.png
# iWatch
entity_watch: sensor.apple_watch_di_giuseppe_battery_state
entity_picture_watch: /local/apple/watch.png
# iPad
entity_ipad: sensor.icompare_battery_level
entity_ipad_battery_state: sensor.icompare_battery_state
entity_picture_ipad: /local/apple/ipad.png
# iPhone 6s
entity_other: sensor.ipex6s_battery_level
entity_other_battery_state: sensor.ipex6s_battery_state
entity_picture_other: /local/apple/6s.png
9 Likes