Expand device support to input_number

[kesm]

Hi,

I would like to use input_number entity from Home Assistant in device view but I have an error when I try to add it :

input_boolean entities are ok but not input_number

[neilimixamo]

Hi, the "device" card was designed to handle entities with two states (switch, input_boolean, etc). Could you elaborate on how you intend to use the "input_number" entity? Is it meant to indicate an active state based on specific numerical values, or simply a shortcut card to access this entity?

[kesm]

I was thinking of an implementation like in mushroom :
https://github.com/piitaya/lovelace-mushroom/blob/main/docs/cards/number.md

The number is displayed and we can change the value like for the light card. But if it's too complicated just a shortcut card to access the entity will be enough

[neilimixamo]

Ok, I see, here is a "helper" template card you can experiment with. Don't hesitate to share your feedback.

quick_look_mobile/templates/cards/helper (v2.0.0).yaml

helper:
  template:
    - basic_card
    - badge_battery
  variables:
    entity:
    name:
    label_on:  #can be changed
    label_off: #can be changed
    battery:
  styles:
    card:
      - background-color: |
          [[[
            if (variables.entity && states[variables.entity].state != 0) {
              return 'var(--cover-background-active)';
            } 
            return 'var(--cover-background-inactive)';
          ]]]
  custom_fields:
    slider_visible:
      card:
        type: custom:my-slider-v2
        vertical: false
        flipped: false
        entity: |
            [[[
              if (variables.entity) {
                return variables.entity;
              } else {
                return '';
              }
            ]]]
        intermediate: false
        styles:
          card:
            - display: block
            - position: absolute
            - height: 100%
            - width: 100%
            - background-color: transparent
            - border-radius: 27px
            - box-shadow: none
            - bottom: 0vh
            - left: 0vw
          container:
            - width: 100%
            - height: 100%
            - position: absolute
            - bottom: 0vh
            - right: 0vw
            - overflow: hidden
            - border-radius: 27px
          track:
            - width: 100%
            - height: 100%
            - position: absolute
            - bottom: 0vh
            - right: 0vw
            - border-radius: 27px
            - background-color:  |
                [[[
                  if (variables.entity) {
                    var state = states[variables.entity].state;

                    if (state != 0) {
                      return 'var(--cover-slider-track-active)';
                    } 
                  }
                  return 'var(--cover-slider-track-inactive)';
                ]]]
          progress:
            - height: 100%
            - background:  |
                [[[
                  if (variables.entity) {
                    var state = states[variables.entity].state;

                    if (state != 0) {
                      return 'var(--cover-background-active)';
                    } 
                  }
                  return 'var(--cover-background-inactive)';
                ]]]
            - border-radius: 27px 0px 0px 27px
          thumb:
            - width: 0px
    icon:
      card:
        icon: |
          [[[
            if (variables.entity) {
              if (variables.icon ) {
                return variables.icon;
              } else {
                  return '';
              }
            } else {
                return 'mdi:help';
            }
          ]]]
        styles:
          card:
            - overflow: visible
            - background-color: |
                [[[
                  if (variables.entity && (states[variables.entity].state != 0 )) {
                    return 'var(--cover-icon-background-active)';
                  } else {
                    return 'var(--cover-icon-background-inactive)';
                  }
                ]]]
          icon:
            #- margin-top: 1vh
            - color: |
                [[[
                  if (variables.entity && (states[variables.entity].state != 0 )) {
                    return 'var(--cover-icon-active)';
                } else {
                    return 'var(--cover-icon-inactive)';
                }
                ]]]
        tap_action:
          action: call-service
          service: cover.toggle
          service_data:
            entity_id: '[[[ return variables.entity ]]]'
        custom_fields:
          badge:
            type: custom:button-card # calls for the 'badge_battery' template
    name:
      card:
        label:  |
          [[[
            if (variables.entity) {
              if (states[variables.entity].state === 'unavailable' || states[variables.entity].state === 'unknown') {
                return "Unavailable";
              } else if (variables.label) {
                return variables.label;
              } else {
                var state = states[variables.entity].state;
                return state + " " + states[variables.entity].attributes.unit_of_measurement;
              }
            } else {
              return "Label";
            }                
          ]]]

[kesm]

I added the file to quick_look_mobile/templates/cards

but I still have an error displayed (I tried to restart HA and refresh page from HA menu).

Here is my config in 6.1_devices_favorites (v2.0.2).yaml

            template: device
            variables:
              entity: input_number.temp_bureau
              name: Temp Bureau
              battery: 
              expand_to: 
              label_on: 
              label_off: 

[neilimixamo]

Sorry, i forgot to mention that you need to specify "helper" instead of "device" as template

            template: helper
            variables:
              entity: input_number.temp_bureau
              name: Temp Bureau
              battery: 
              expand_to: 

[kesm]

Thanks, it's working better now but I have a undefined value displayed next to the current number :

ideally I would like to be able to add an unit, but don't display undefined if nothing is set

[neilimixamo]

Unit has to be added in the input_number settings . The easiest way to hide "unavailable" when no unit is needed is to add a blank space as the unit 😉 but i can update the template to handle this specific case

[kesm]

You're right, thank you for the quick fix!

Could be better to have a real management of empty units but it's ok for me right now, I close the issue.