Optimize WebUI dashboard data

[proddy]

I've been looking into ways to make the display of the EMS data more intuitive. In v3.5.x there is a list of Devices in a table and when one is selected a long single-page list of device values are listed. Scrolling down you'll loose the context of what you're looking at so I'd like to keep the Device 'sticky' somewhere on the screen.

First option I tried is that when you click on a Device, the table is reduced to only show you the device and the data is shown below in a scrollable box. The problem with this method is that it may confuse users.

I think a better solution is to use panes, so the table is always visible and when an EMS device is selected the information is shown in a scrollable panel on the left. And that panel can be closed.

[proddy]

My PR contains a working version of panes. So you get to see all the devices plus the data without losing context when scrolling. I stole the concept from Ubiquiti's Unifi interface, thinking a 12B USD company with thousands of engineers must be smart.

EMS-ESP Web now looks like this:

Note: it hasn't been fully optimized for mobile devices yet.

@MichaelDvP @bbqkees let me know what you think.

EMS-ESP-3_6_0-dev_11-ESP32_4M.zip

[MichaelDvP]

Each version have some advantages and some disadvantages. Here we have more lines, but shorter. Longer names and longer text-values are cut, we need an extra click to show the full information (nice idea to open the dialog also for values to show all).
Im missing the number of entities in the device list, to check if a device have entities i need a click to open the side pane.

The version before, shrinking the device list to the selected one and show entities full width shows less entities and needs a click more to change the device. But it shows full entitiy names and values. I like it a bit more. But in mobile landscape it completly cuts the entities.

[proddy]

The device values window is indeed smaller and a fixed width. I can look into whether that popup window can be dynamic and adjust to a % of the window when the browser window is resized so it can show more data. Would that help?

I purposely removed showing the # entities in the Devices list, from a usability point of view. Earlier versions of EMS-ESP we built to show technical data to IOT developer & nerds (like us!). But now it's becoming more of a commodity product for all types of users and some data is not needed or can be hidden. For example, a user wants to buy a S32, plug it in and see the devices it finds and look into the information. They're less interested in the number of entities it finds, which would always be static anyway, I didn't think it was important enough to show on the main dashboard. It also made the mobile version look cramped.

[MichaelDvP]

Would that help?

That would be perfect. A minimum fixed width and wider on wide screens.

BTW: There seems to be a bug in deviceValueDialog for entities without command. They show the value grayed out, but after clicking a command value, this do not work anymore, showing also a strange format text.

[MichaelDvP]

Aha, writable is not set back to false here:
https://github.com/proddy/EMS-ESP32/blob/c57a5c04d667942e7f2a61b9606ff6792ccc523a/interface/src/project/DashboardDevices.tsx#L439-L441
better set:
setSelectedDeviceValueWriteable(me.admin && dv.c !== undefined && !hasMask(dv.id, DeviceEntityMask.DV_READONLY));

[proddy]

thanks, will fix. I'm working on the resizable window now. Getting it to look nice on mobiles is hard, but I'll check in what I've done so far.

[proddy]

I made some changes. It's still not perfect on a mobile in portrait but good enough for me. let me know what you think @MichaelDvP

oh, and I switch the name/type around in the table. A user wants to look at details from their device so the name is more important that the type

[MichaelDvP]

Looks very good. Also mobile: Tried with tablet and phone. Phone landscape is not perfect because the device list already scrolls and the popup in less height.

[MichaelDvP]

A user wants to look at details from their device so the name is more important that the type

For users with multiple devices, like 3 mixers for hcs and dhw name and type are not clear. Maybe think about custom device names, or add, depending on device-id, the circuit to the name (e.g. "MM100 (hc1)"). But i think optional custom names are better.

[proddy]

A user wants to look at details from their device so the name is more important that the type

For users with multiple devices, like 3 mixers for hcs and dhw name and type are not clear. Maybe think about custom device names, or add, depending on device-id, the circuit to the name (e.g. "MM100 (hc1)"). But i think optional custom names are better.

I agree. I'll create a new issue for customizing the device name

[proddy]

merged

[bbqkees]

i did some more tests with the new UI.
On desktop it renders quite ok but on mobile this new scrolling does not really work well yet. See below:

if the device name is too long, the pane does not use the whole width and the view get's distorted.

[proddy]

Thanks @bbqkees . It's in easy fix, I'll add back the truncate.

[proddy]

fixed in my dev-alova branch and will merge soon