[FEATURE REQUEST] Tool Tips on Web UI buttons

[edrikk]

Updating as although this item started as a feature request, the majority of the items are implementation limited due to the limited functionality the web server provides.

Renamed the ticket to focus on the one item that appears to be a bug/not working:

#220 (comment)

• Why an up arrow appears within the "Remote Lock" row?
• Why pressing it shows log warning "Lock remotes does not support open"

Original text of this ticket is left below for context of first few replies.

---

Hi, I just wanted to document this feature request in support of the Web UI's usability. It's a collection of thoughts after my initial install of this firmware:

• Adding a hover over tool tip on each of the buttons with a quick word on what it does would be extremely helpful.
  e.g. Open Door, Close Door, etc.
  Right now there are buttons that are hard to understand their meaning. e.g. Up Arrow for "Lock Remotes" - and the various squares which mean different things.. For example the one for the door means stop the door movement, a quick explanation of what "safe mode boot" does/doesn't do, etc would be helpful.

• Reworking the wordings in the left most column might help as well... e.g. "Lock Remotes" should probably just be "Lock/Unlock garage door" - that's the result from a User's point of view.

• Not sure what "Client ID" is or does, but should that be in the table? It looks like it can be changed, but a tooltip explaining why/what it does would be great...

Cheers,

[PaulWieland]

Its covered in the docs...

[edrikk]

Cool - yeah for sure.
Suggesting that putting some of that in the UI (self contained firmware in a way) might help new users -- and not having to go to the docs...

PS. Unless I'm missing it, I don't think the docs say what the up arrow for "lock remotes" does either :)

[PaulWieland]

I don't think the feature you are asking for is supported by ESP Home.

[rlowens]

• Adding a hover over tool tip on each of the buttons with a quick word on what it does would be extremely helpful.

Not possible in ESPHome currently. The web server UI isn't really configurable like that. Feel free to suggest or code that in https://github.com/esphome/feature-requests/issues My search over the last hour hasn't found that as a previous suggestion.

There is the ability to use custom css and js, but I don't think that helps us put descriptions on specific items in the table.

I suppose we could hack in description entries by creating them as template binary sensors, marking them internal so they don't get shown to Home Assistant, and enable showing internal items on the web server UI. But it seems pretty hacky. You can't specify the order of items in the web server UI (yet), so they would have to be alphabetically ordered, like "Lock remotes: when locked, this disables any wireless remotes."

e.g. "Lock Remotes" should probably just be "Lock/Unlock garage door" - that's the result from a User's point of view.

It DOES NOT lock the garage door - it can still be operated via other methods (the wired wall panel, the web server UI, Home Assistant and anything connected via that, the ratgdo's dry contact inputs, maybe another method I'm missing).

PS. Unless I'm missing it, I don't think the docs say what the up arrow for "lock remotes" does either :)

Good point. Anyone know why this up arrow appears here?

Clicking it results in this log entry:

('Lock remotes' Does not support Open.)

Probably an error in the code for the ratgdo lock?

[edrikk]

Thanks - agree with all the statements.
Hacking things just to get that in doesn't help much for sure. Maybe just a link on the page to the docs might be sufficient?

[PaulWieland]

The link is on the ESP Web Tools installation / flasher page.

[edrikk]

Yes - I mean within the local device's Web UI - unless the esphome framework is quite limited in what it allows/how it draws the page so can't be put in a 'proper' place on the page.

Just trying to think like someone who is not as intimately aware (who is likely the one that would like the link actually) - even if they saw it as part of web tools install, they probably won't remember that they did 2 months later.

As another workflow, I flashed the bin directly from mqtt firmware. After that I adopted and have been flashing using esphome. I had no idea that the link was there. I actually never used the old or new web flasher for esphome version...

[rlowens]

I mean within the local device's Web UI - unless the esphome framework is quite limited in what it allows/how it draws the page so can't be put in a 'proper' place on the page.

It is not possible to add a link to the documentation with ESPHome's current web server component. As least not in any way I can think of. Unless that's something that can be done with a custom js or css file (I'm no web programming expert).

[edrikk]

Ok thanks. Unfortunate how limited the component seems to be.
Understood though. Do you guys prefer if I close this request or just leave it open just in case/for the future?

[rlowens]

Maybe just rename it to be about the broken "up arrow" button on the Remote Lock?

[rlowens]

Well, I have found a way to add more information to the ESPHome web server UI, using a custom web server. Here's what the KAUF PLF10 plug https://github.com/KaufHA/PLF10 looks like:

...

This is accomplished with compiling with KAUF's custom web server included in https://github.com/KaufHA/common

The custom text is at https://github.com/KaufHA/common/blob/8daf46725d69334b4314f86b7e298b52d6c7e832/esphome-webserver/v2/esp-app.ts#L189

So, we could fork esphome/web_server ourselves and modify that file to put our own link and descriptive text at the top of the web server UI.

[edrikk]

Will leave it to you guys to decide if the effort is worthwhile vs upstream maintainability. If not worthwhile, absolutely makes sense.

The homekit fork has altered web server for sure... Displaying QR codes etc for homekit onboarding as example: ratgdo/homekit-ratgdo@73860af

[marcone]

Its covered in the docs...

The docs don't seem to mention that nonfunctional up-arrow:

Am I missing something?

[PaulWieland]

yes, you were mislead by the change in the issue title. The original title was [FEATURE REQUEST] Tool Tips on Web UI buttons