VRM Zoom Reset Button Placement

[guystewart (Guy Stewart (Victron Community Manager))]

@PetaJoule

VRM: Move "Reset Zoom" to another location - VictronEnergy

it’s a trivial task with great usability benefit. (petajoule asked • Aug 01 2020 at 9:42 AM) Unchanged to this very day.
And I really hope there is no discussion that the current implementation of the zoom button violates about any UI/UX best practice there is.

VRM advanced widgets use a library called highcharts, the location of the reset zoom button is drawn by highcharts. There is a method to draw the reset zoom button with some relative offset outside the chart area, but given the dynamic nature of the advanced page, on all screen sizes, all devices etc, setting. A fixed offset isn’t a simple thing and might make the situation worse for some other user.

I find personally the most issues on very small screens, because the button is relatively big. Almost never a problem for me on larger screen. So in those cases, I have just come to accept that if I am on small screen, the advanced widget page UX is not going to be optimal.

As more users move to smaller screens, there are many things in VRM that need to re-optimised, we have a project underway for this that may solve it.

[PetaJoule]

@guystewart

VRM advanced widgets use a library called highcharts, the location of the reset zoom button is drawn by highcharts. There is a method to draw the reset zoom button with some relative offset outside the chart area, but given the dynamic nature of the advanced page, on all screen sizes, all devices etc, setting. A fixed offset isn’t a simple thing and might make the situation worse for some other user.

The widgets already use settings and magnify pictograms. I see no reason why after a zoom there couldn’t appear a pictogram (striked through magnifier glass) to “reset zoom”. Complete outside the canvas, using highcharts builtins, trivial task.

or similar.

[nickdb (Nick)]

I am not sure if the library provides that capability. resetZoom allows for a position to be specified and an offset.

This seems to currently be: Align: Right (default) and offsets y by -10.

If a higher offset is used such as -30 or -40 it would move the reset button above the plot area.

Like so (from an example on their site):

I to find the positioning at times a little annoying, but it is not frequent enough to add it to the list of improvements.

[PetaJoule]

Better than nothing. That here is a relatively safe real estate in the widget:

So yeah, that offset might just do the trick.

[guystewart (Guy Stewart (Victron Community Manager))]

I’ll pass on the zoom fix to the developers so we can at least get it in beta for a while and see if it causes other problems or not