Addon: Input Number with + and - buttons to replace slider

htmltiger · October 17, 2020, 9:13pm

Here is the first plugin I have created, it is pretty basic and has room for improvements but it works.

This is for those who would like to make small adjustments using up/down buttons.

example

gregorymartin · October 18, 2020, 3:16am

Your timing is impeccable, I posted this question earlier today!

htmltiger · October 18, 2020, 3:46am

I spent hours searching for the similar and could not find a single one so created and learned a lot.
Sharing it so others can use the same

gregorymartin · October 18, 2020, 5:28am

It is great nice work! I just tested it out and it is very much what I was looking for. I will spend more time with it and see if I can contribute. One enhancement I would suggest would be to adjust how it displays when added as a row in an entities card. Currently, it shows up with its own border nested in the table. Not sure how complicated that is to handle?

htmltiger · October 18, 2020, 3:02pm

Added option to remove borders
border: false
example

gregorymartin · October 18, 2020, 8:49pm

Awesome, looks good!

RetroTim · October 21, 2020, 4:24pm

This is awesome!

This makes it much easier to change input_numbers on a wall-mounted tablet.

Only thing is I had to manually add the repository to HACS. Not a problem, but a lot of people could miss this because of that.

Sparki · October 30, 2020, 12:48am

Sorry guys, I am lost trying to install this. noob

HACS > Frontend > click the + button (bottom)

search for ‘numberbox-card’ = nothing
search for ‘number’ two things that I would expect to come up do appear.

or can I please has a noob manual on how to add manually?

Thanks

htmltiger · October 30, 2020, 1:40am

It should be added in the next update of HACS
for now you can add it manualy from HACS > Frontend > … (three dots on the top) and custom repo
add under Lovelace this url
https://github.com/htmltiger/numberbox-card

Sparki · October 30, 2020, 2:10am

Perfect, Thanks

chrisgrou · January 23, 2021, 7:09am

Great addon. I’m trying to include it in my water boiler/heater ‘card’:
waterheater
Would you happen to know how I can apply a style to the text (eg. small-caps) with card-mod?
ha-card and :host don’t seem to work and that’s about all the CSS I know

htmltiger · January 23, 2021, 3:00pm

type: entities
entities:
  - entity: input_number.living_ac_timer
    type: 'custom:numberbox-card'
    style: |
      .grid-left{font-variant: small-caps}

this only seems to work when under type: entities so the height will increase for a single entry

Edit:

type: entities
entities:
  - entity: input_number.living_ac_timer
    type: 'custom:numberbox-card'
    style: |
      .grid-left{font-variant: small-caps}
style: |
  #states{padding:4px 10px !important}

this should fix the height

gregorymartin · January 23, 2021, 3:49pm

What card are you using for your scheduled time?

chrisgrou · January 23, 2021, 8:03pm

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)

terryhonn · January 23, 2021, 8:39pm

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!

chrisgrou · January 23, 2021, 9:27pm

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;
  }

terryhonn · January 23, 2021, 10:32pm

Thank you!

Abscondo · February 10, 2021, 12:56pm

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?

htmltiger · February 10, 2021, 3:36pm

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

Abscondo · February 10, 2021, 4:22pm

Sorry, I should have found the issue on Github. Impressive response time btw

Issue resolved through.

Installed updated card. Reset cache. No change.
Updated from 2021.1.5 to 2021.2.2. Reset cache. Solved.