numberbox-card

NumberBox for input sliders and number entities

Inspired from simple thermostat

Installation

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

OR install using HACS and add this (if in YAML mode):

lovelace:
  resources:
    - url: /hacsfiles/numberbox-card/numberbox-card.js
      type: module

The above configuration can be managed directly in the Configuration -> Lovelace Dashboards -> Resources panel when not using YAML mode, or added by clicking the "Add to lovelace" button on the HACS dashboard after installing the plugin.

Configuration

Advanced Config for climate/fan/input_datetime etc

type: entities
entities:
  - type: custom:numberbox-card
    entity: climate.heating
    icon: mdi:fire
    state: temperature
    service: climate.set_temperature
    param: temperature
    service_params:
      entity_id: climate.heating
      hvac_mode: heat
    min: 0
    max: 30
    step: 0.5
    speed: 500

type: entities
entities:
  - type: custom:numberbox-card
    entity: fan.smartfan_fan
    icon: mdi:fan
    state: percentage
    service: fan.set_percentage
    param: percentage
    min: 0
    max: 100
    step: 20

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_datetime.timer_time
    service: input_datetime.set_datetime
    param: time
    unit: time
    step: 60


# Timer duration change
type: entities
entities:
  - type: custom:numberbox-card
    entity: timer.heating
    icon: mdi:fire
    service: timer.start
    param: duration
    state: duration
    min: 0
    max: 999999
    step: 60
    unit: time

type: entities
entities:
  - type: custom:numberbox-card
    entity: climate.downstairs_heating
    icon: mdi:fire
    service: climate.set_temperature
    param: temperature
    state: temperature
    min: 0
    max: 30
    step: 0.5
    toggle_entity: switch.downstairs_heater
    secondary_info: >
      Mode:<b style="color:red"> %climate.downstairs_heating:attributes:hvac_action </b><br />
      Current temp:<b style="color:green"> %climate.downstairs_heating:attributes:current_temperature </b>
      %switch.downstairs_power:last_changed

Examples

Configurations:

type: entities
title: Example
show_header_toggle: false
entities:
  - entity: input_number.my_slider
    secondary_info: last-changed
  
  - entity: input_number.my_slider
    type: 'custom:numberbox-card'
    icon: 'mdi:timelapse'
    secondary_info: last-changed
    unit: S

  - entity: input_number.my_slider
    type: 'custom:numberbox-card'
    unit: time

  - entity: input_number.my_slider
    type: 'custom:numberbox-card'
    icon_plus: 'mdi:chevron-up'
    icon_minus: 'mdi:chevron-down'
    card_mod:
      style: |
        .cur-num{font-size:25px !important}
        .cur-num.upd{color:green}
        .cur-unit{color:orange; font-size:100% !important; opacity:1 !important}
        .grid-left{color:red}
        .grid-right{color:blue}
        .cur-box ha-icon{transform:scale(2)}
card_mod:
  style: |
    #states{padding:8px 10px !important}

- type: custom:numberbox-card
  entity: input_number.my_slider
  name: My Title
  icon: 'mdi:fire'
  border: true
  card_mod:
    style: |
      ha-card .cur-num {
         color: green;
       }  

type: horizontal-stack
cards:
  - type: custom:numberbox-card
    border: true
    entity: number.office_temp
    name: false
    card_mod:
        style: >
          .body{display:block!important}
          .body::after{text-align:center;font-size:10px;content:"Temperature";display:block!important}
  - type: custom:numberbox-card
    border: true
    entity: number.office_timer
    unit: time
    name: false
    card_mod:
        style: >
          .body{display:block!important}
          .body::after{text-align:center;font-size:10px;content:"Minutes";display:block!important}

It is also possible to add this using + Add Card UI and choose Custom: Numberbox Card