Thank you very much @htmltiger !
I need to play with the padding a little bit, but you’ve really helped.
@gregorymartin it’s the Time Picker Card by @GeorgeSG:
GeorgeSG/lovelace-time-picker-card: 
Time Picker Card for Home Assistant’s Lovelace UI (github.com)
A bit off topic, perhaps, but I’m not a themer or css guru…could you tell me how you’re using the font-variant small-caps globally for your Lovelace font?
Thanks in advance!
I don’t know if it can be done globally, I do it per card or sometimes (case in point), per entity. Most times this is enough:
style: |
ha-card {
font-variant: small-caps;
}
Thank you!
I can’t seem to figure out why my numberbox-card suddenly won’t render correct on my phone. It’s correct everywhere else, only icons on all numberbox-cards affected. Reset the HA app on my phone as well as reset cache in two browsers used in case a change had just not taken effect through the browsers. Still no change.
Example through Chrome:
Same numberbox-card through companion app on Android:
Icon is there if I open the entity through companion app:
Nothing fancy in the code:
- entity: input_number.temperatur_stue
name: Stue Mill når hjemme
type: 'custom:numberbox-card'
- entity: input_number.temperatur_stue_borte
name: Stue Mill andre status
type: 'custom:numberbox-card'
- entity: input_number.temperatur_soverom
name: Soverom radiator når hjemme
type: 'custom:numberbox-card'
- entity: input_number.temperatur_soverom_borte
name: Soverom radiator andre status
type: 'custom:numberbox-card'
I also attempted to force the original mdi icon adding it through “icon:”, but that didn’t show anything either.
Anyone got ideas? Or similar issues?
I have just made some changes in state-badge so please update and see if that helps.
Also make sure you running home assistant version 2021.2.1 or newer as it may fix the issue
Sorry, I should have found the issue on Github. Impressive response time btw 
Issue resolved through.
@chrisgrou ,could you please share yours code? It looks awesome, something what I want for long time, but I have no idea where to start. Thx
I tried to remove some debug code, I hope I didn’t break anything.
The lovelace card is:
cards:
- type: entities
entities:
- entity: input_number.water_heater_duration
type: custom:numberbox-card
name: 'Duration:'
icon: false
speed: 250
border: false
style: |
.grid-left {
font-variant: small-caps;
font-size: 20px !important;
font-weight: 300 !important;
}
.cur-num {
font-size: 32px !important;
font-weight: 600 !important;
}
icon: mdi:water-boiler
title: Water Heater
style: |
#states {
padding: 10px 20px !important
}
ha-card {
font-variant: small-caps;
}
.card-header {
padding: 10px 8px !important;
}
- cards:
- color: var(--st-mode-background, var(--secondary-background-color))
color_type: card
entity: input_select.water_heater_state
show_icon: true
icon: mdi:power
name: 'Off'
state:
- color: '#8a8a8a'
spin: false
styles:
icon:
- color: white
name:
- color: white
value: 'Off'
- color: var(--st-mode-background, var(--secondary-background-color))
value: 'Off'
operator: '!='
styles:
icon:
- color: var(--secondary-text-color)
name:
- color: var(--secondary-text-color)
styles:
card:
- height: 50px
- color: var(--secondary-text-color)
name:
- font-size: 14px
- padding-bottom: 0px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.water_heater_state
option: 'Off'
type: custom:button-card
style: |
ha-card {
--st-font-size-xl: 60px;
--st-font-size-m: 16px;
--st-spacing: 4px;
font-variant: small-caps;
}
- color: var(--st-mode-background, var(--secondary-background-color))
color_type: card
entity: input_select.water_heater_state
show_icon: true
icon: mdi:fire
name: Heat
state:
- color: '#f05454'
styles:
icon:
- color: white
name:
- color: white
value: Heat
- color: var(--st-mode-background, var(--secondary-background-color))
value: Heat
operator: '!='
styles:
icon:
- color: var(--secondary-text-color)
name:
- color: var(--secondary-text-color)
styles:
card:
- height: 50px
- color: '#03a9f4'
name:
- font-size: 14px
- padding-bottom: 0px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.water_heater_state
option: Heat
type: custom:button-card
style: |
ha-card {
--st-font-size-xl: 60px;
--st-font-size-m: 16px;
--st-spacing: 4px;
font-variant: small-caps;
}
- color: var(--st-mode-background, var(--secondary-background-color))
color_type: card
entity: input_select.water_heater_state
show_icon: true
icon: mdi:alarm
name: Schedule
state:
- color: '#5eaaa8'
styles:
icon:
- color: white
name:
- color: white
value: Schedule
- color: var(--st-mode-background, var(--secondary-background-color))
value: Schedule
operator: '!='
styles:
icon:
- color: var(--secondary-text-color)
name:
- color: var(--secondary-text-color)
styles:
card:
- height: 50px
- color: '#03a9f4'
name:
- font-size: 14px
- padding-bottom: 0px
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.water_heater_state
option: Schedule
type: custom:button-card
style: |
ha-card {
--st-font-size-xl: 60px;
--st-font-size-m: 16px;
--st-spacing: 4px;
font-variant: small-caps;
}
type: horizontal-stack
styles:
card:
- '--keep-background': 'true'
- type: custom:time-picker-card
entity: input_datetime.water_heater_schedule_time
hour_mode: 24
hour_step: 1
minute_step: 1
second_step: 5
name: 'Scheduled to run at:'
layout:
embedded: false
name: inside
align_controls: center
hide:
name: false
icon: true
style: |
ha-card {
font-variant: small-caps;
font-size: 14px !important;
font-weight: 300 !important;
}
:host {
--tpc-elements-background-color: #5eaaa8 !important;
--tpc-text-color: white !important;
}
link_values: false
type: custom:stack-in-card
mode: vertical
keep:
background: true
border_radius: true
box_shadow: false
margin: true
outer_padding: true
The automations:
alias: '[Water heater] switch on from button'
description: ''
trigger:
- platform: state
entity_id: input_select.water_heater_state
to: Heat
condition: []
action:
- service: switch.turn_on
target:
entity_id:
- switch.water_heater
mode: single
alias: '[Water heater] switch off from button'
description: ''
trigger:
- platform: state
entity_id: input_select.water_heater_state
to: 'Off'
condition: []
action:
- service: switch.turn_off
target:
entity_id: switch.water_heater
mode: single
alias: '[Water heater] set mode to schedule from button'
description: ''
trigger:
- platform: time
at: input_datetime.water_heater_schedule_time
condition:
- condition: state
entity_id: input_select.water_heater_state
state: Schedule
action:
- service: input_select.select_option
target:
entity_id: input_select.water_heater_state
data:
option: Heat
mode: single
alias: '[Water heater] refresh button when device is on'
description: ''
trigger:
- platform: state
entity_id: switch.water_heater
from: 'off'
to: 'on'
condition: []
action:
- service: input_select.select_option
target:
entity_id: input_select.water_heater_state
data:
option: Heat
mode: single
alias: '[Water heater] heat water for specified time'
description: ''
trigger:
- platform: state
entity_id: switch.water_heater
from: 'off'
to: 'on'
condition: []
action:
- delay: '{{ states(''input_number.water_heater_duration'') | multiply(60) | int }}'
- service: switch.turn_off
target:
entity_id: switch.water_heater
mode: single
Helpers:
I crafted up this set of buttons using paper-buttons-row. They can increment or decrement the volume of my receiver by 1 or 5 dB, or mute / unmute it.
type: entities
entities:
- entity: input_number.livingroom_amp_volume
name: Volume
- type: custom:paper-buttons-row
buttons:
- icon: mdi:numeric-5-box-outline
tooltip: Volume down by 5
tap_action:
action: call-service
service: script.change_volume
service_data:
entity_id: input_number.livingroom_amp_volume
increment: -5
- icon: mdi:numeric-1-box-outline
tooltip: Volume down by 1
tap_action:
action: call-service
service: script.change_volume
service_data:
entity_id: input_number.livingroom_amp_volume
increment: -1
- icon: >-
{{ iif(is_state_attr('media_player.livingroom_amp', 'is_volume_muted',
true), 'mdi:volume-high', 'mdi:volume-mute') }}
tooltip: Mute / Unmute
tap_action:
action: call-service
service: script.toggle_mute
service_data:
entity_id: media_player.livingroom_amp
- icon: mdi:numeric-1-box
tooltip: Volume up by 1
tap_action:
action: call-service
service: script.change_volume
service_data:
entity_id: input_number.livingroom_amp_volume
increment: 1
- icon: mdi:numeric-5-box
tooltip: Volume up by 5
tap_action:
action: call-service
service: script.change_volume
service_data:
entity_id: input_number.livingroom_amp_volume
increment: 5
And the server-side scripts. I had to use scripts because I couldn’t get the template parameters to work properly with the paper-buttons-row card.
script:
toggle_mute:
alias: Toggle Mute
mode: queued
icon: mdi:volume-mute
fields:
entity_id:
name: Media Player
description: A media_player entity that can be muted and unmuted
required: true
selector:
entity:
domain: media_player
sequence:
- service: media_player.volume_mute
target:
entity_id: "{{ entity_id }}"
data:
is_volume_muted: "{{ not is_state_attr(entity_id, 'is_volume_muted', true) }}"
change_volume:
alias: Change Volume
mode: queued
icon: mdi:volume-high
fields:
entity_id:
name: Volume input_number
description: An input_number entity that corresponds to the volume of a media_player
required: true
selector:
entity:
domain: input_number
increment:
name: Increment
description: A integral value by which to adjust the volume
required: false
default: 1
selector:
number:
min: -10
max: 10
step: 1
unit_of_measurement: dB
mode: slider
sequence:
- service: input_number.set_value
target:
entity_id: "{{ entity_id }}"
data:
value: "{{ min(20, max(-80, (states(entity_id) | int) + (increment |int))) }}"
Hi I followed the instruction and saved the numberbox-card.js into config/www folder. But I am getting “Custom element doesn’t exist: numberbox-card” in the card.
- type: entities
entities:
- type: custom:numberbox-card
entity: timer.rodi_water
icon: mdi:fire
service: timer.start
param: duration
state: duration
min: 0
max: 999999
step: 60
unit: time
Have you done this?
Manually add numberbox-card.js
to your <config>/www/ folder and add the following to the configuration.yaml file:
lovelace:
resources:
- url: /local/numberbox-card.js?v=1
type: module
Yes I did.
Got the number box running but, got stuck a bit.
I use it to set a light on delay after sunset, but I would love to set the delay and then see in the seecondary info of the button the real time it is set to, but that sensor info I just cannot get to be displayed, so how? Please
This is what I have:
type: custom:numberbox-card
border: true
entity: input_number.auto_light_minutes
secondary_info: >-
Licht aan: <b style="color:green">
%sensor.auto_light_start:attributes:timestamp </b>
unit: time
Hi, great work.
Could I use the card to change timer duration without starting the timer with every change?
Here is my code from the examples:
type: custom:numberbox-card
card_mod:
style: |
ha-card {
background: none;
border: none;
box-shadow: none;
}
entity: timer.timer_welcomelight_std
name: false
icon: false
border: false
service: timer.start
param: duration
state: duration
min: 0
max: 3600
step: 300
unit: timehm
Thanks, Steffen
There is no service to change just the duration,
try something like this:
trigger:
- platform: state
entity_id: input_number.duration_in_seconds # this will trigger on any change of the input number
action:
- service: timer.start
entity_id: timer.your_timer_here
data:
duration: "{{ states('input_number.duration_in_seconds') }}"
- service: timer.cancel
entity_id: timer.your_timer_here # if you dont want the timer to start whenever you change the duration.
OK thank you, so I have to use a input_number helper for the numberbox-card and use the value if I start the timer from my script.
Hi,
this is my card:
type: custom:numberbox-card
entity: number.riro_kellervorrat_brot
name: Brot
icon: false
unit: ' Stück'
secondary_info: 'Letzter Kauf: %input_datetime.riro_kellervorrat_brot_letzter_kauf:state'
moreinfo: input_datetime.riro_kellervorrat_brot_letzter_kauf
border: true
“input_datetime.riro_kellervorrat_brot_letzter_kauf” is a date in format YYYY-MM-DD. Is it possible to format this in DD-MM-YYYY without using a template sensor?
- type: custom:numberbox-card
entity: input_number.keuken_vaatwas_ingevenaantalblokjes
service: script
icon: false
picture: false
border: false
name: false
card_mod:
style: |
:host {
padding-top: 35px;
padding-right: 4px;
}
can I run a script (service ?)
I want a “counter.keuken_vaatwas_vaatwasblokjes” increase or decrease by 1.
And can I have the same number as the counter in the middle ?
did you get it running? I’m having exactly the same issue (newbie, I guess…!)…
Thanks!
Installed the file in config/www (created the folder and pasted the file), and added the lines to configuration.yaml
lovelace:
resources:
- url: /local/numberbox-card.js?v=1
type: module
and getting the “custom element does not exist: numberbox-card”