WTH are there not better input fields for non-computer dashboards?

Hey everyone

So I was trying to make a mobile/table dashboard recently that required some various input from the user (I was trying to make an adjustable timer with a custom card). However, the only way to make an input text would be to have an input text (not great for things like timers), or an input datetime, which can work for timers. But the issue was that these are clunky things to use when you’re on mobile. The input text doesn’t look great and the input datetime needs you to manually type in the value for hours, minutes and seconds.

There’s great ways to input numbers for touch screens that are used everywhere online, but for some reason HA only has clunky feeling UI elements when it’s used on touch.

It’s not just text/numbers either, there’s not many nice ways to get input for a lot of things. I know not a lot of people will necessarily want input, but for some things like a tablet that guests can use to control things, it’s nice to have something that looks nice for them to use rather than a text box they’ve got to click on, then type the number, then close it, then open the next text box and so on.

Anyway, that’s pretty much the idea - I will also say that I tried to make this dashboard earlier in the year so it’s possible that things have changed since then, but I don’t think I’ve heard of anything about it

Hopefully others agree with it!

Can you share photos or drawings of what you have seen elsewhere and how it compares to Home Assistant?

Sure! So this is all just random things I’ve found, but for time, there’s this type of design that most people have on their phones already that could be useful for doing time related stuff specifically:

Or even something like this for numbers specifically, which would let us use the +/- keys to change the number without having to manually type it in:

jQuery-Plugin-To-Create-Increment-Decrement-Input-Spinners-handleCounter

Meanwhile, currently, this is what you have on HA mobile for time and numbers:


For these, I have to manually tap into each section to be able to type in a new number (which means for the time, I need to press into the 02 and 0 to be able to change it, which is a pain). Also if you remove the icon and name (for example, if you just want the inputs in a section), the input fields are still pushed all the way over to the right and it doesn’t look great:

image

This could also extend to other things as well, not just number/text/time inputs, but maybe for RGB - something that could go directly to the RGB colour choice might be good instead of going to the entity first, then going into the RGB settings (unless that’s something with my entity specifically - not sure if I’m missing something here?). Basically any kind of input users might have

2 Likes

Fair enough. You’ve got my vote

1 Like

Yes! I seem to remember I already voted on a similar WTH but this is definitely a pieve of mine. There is a custom frontend element ‘timepicker card’ on HACS but it’s limited to setting the time, it sets the date to today by default and to set the day you need to go to ‘more info’
I think the date and time picker of the Google Calendar app on Android is great. Something that emulates that would be awesome.

Meanwhile it is possible to use a custom:numberbox-card:
example

you can change the +/- icons, f.e.

icon_plus: mdi:plus-circle
icon_minus: mdi:minus-circle

Screenshot_2024-12-26_08-22-29