question

danielhalmschlager avatar image
danielhalmschlager asked

Ordering of VRM widgets on mobile

I see that the layout of the advanced page changes depending on screen width.
With big screens (e.g., Laptop) there are three columns and the widgets can be rearranged.

On narrow screens (smartphones), though, there is only a single column and the widgets cannot be arranged.

While I generally think this makes sense (in order to avoid mistakenly dragging around widgets via touch gestures), I see one big issue:
The order only seems to be defined by the first time a widget is added, and cannot be changed later.
This is really annoying... I have my widgets set up nicely on the desktop, but on mobile, the one I usually want to look at first is last in the order.

This was also stated by ranger-rocko in a comment to an answer to this question:
https://community.victronenergy.com/questions/94812/when-did-android-vrm-widgets-become-non-movable.html
"One final bit of info on the Androids, if I remove a widget that is already showing and then re-enable it, it is placed in the same order that it was before disabling it. If I add a widget that has never been enabled, the new one gets placed at the end of all widgets and it too is immovable."


I think the correct solution would be to also take the order from the 2D-grid on large devices, and apply this to mobile, somehow like this desktop layout:

-----A----- (one wide widget)
-----B-----
C1 ---C2--- (one narrow, one two-column widget)
D1  D2  D3  (three narrow widgets)
-----E-----

should just be converted to this on mobile:

A
B
C1
C2
D1
D2
D3
E


Until the correct ordering on mobile is fixed, is there any workaround to reset the "remembered" order how the widgets were added so that I can build the correct order of my widgets on mobile by the adding order?

VRM
1 comment
2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

Alain Ross avatar image Alain Ross commented ·
Same advice here, love the VRM option on Laptop, but frustrating on smartphone, have to scroll down before seeing what I want...Will be a great update, thanks!!
0 Likes 0 ·
10 Answers
kevgermany avatar image
kevgermany answered ·

Would be really good to see that implemented. It's a pain at the moment.

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

danielhalmschlager avatar image
danielhalmschlager answered ·

I just wanted to bring this up one more time. Since @Teun Lassche seems not to be active here anymore, is there anyone else present who is involved in development of the VRM Web UI?

Is there any way how to change (and/or reset) the widget order for mobile / narrow devices?


The way it is now is really annoying, as I also have to scroll all the time to get to what I actually want to look at.

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

billf avatar image
billf answered ·

I will add one more voice/vote on some way to organize widgets on mobile, or any kind of workaround. I had hoped maybe requesting the desktop version of the site, while on mobile would work, but it delivers the same widget order.

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

danielhalmschlager avatar image
danielhalmschlager answered ·

I found a workaround for this.

Today was the VRM webinar, and I enjoy the work that has been done, especially the native widgets.

Unfortunately, I was not able to attend live to ask about re-ordering the widgets in the mobile view.
While there have been quite a few questions about customizing the Dashboard view, the only question regarding the Advanced view was how to copy layouts between different installations.

But some of the points mentioned in the Webinar (VRM API, and also this copying) sparked my interest, and I started to open my browsers dev tools and look at how the ordering of the widgets is technically done. And I was able to figure out a workaround:

  1. Make notes/screenshot of preferred widget layout on desktop
  2. Delete/disable all widgets
  3. Refresh page in the browser
  4. Add the first widget you want to appear in the mobile view.
  5. Refresh page in browser again
  6. Repeat steps 4. and 5. for each widget (in the order you want them to appear on mobile)
  7. Arrange all widgets how you like them on Desktop.

Custom widgets seem to always be shown after default widgets on mobile.


Some background info I managed to find out:

The client gets the information about the widgets through the `active-widgets` endpoint of the VRM API. This returns an object, part of which is an array of all available widgets (including info if they are active and where they should be located on the desktop grid).

The desktop uses the grid properties for ordering/placement, whereas the mobile version just uses the order in which they are returned from the list.

When changing the active widgets or reordering, etc. the client sends this information (also an object with the list of active widgets, etc.) to the `settings` endpoint, but – and I think this is the important part – keeps this list in the order in which the widgets have been retrieved from the `active-widgets` endpoint. The server side returns active widgets first in the list, followed by inactive widgets in – I think – some default order. So by refreshing in between adding widgets, the client has to re-fetch the (now re-ordered) list of widgets and thus one can create the ordering they like.

Alternatively, one can also just send the JSON object in the order they prefer directly to the `settings` endpoint (e.g. with some API debug tool, curl, or the browser dev tools).


2 comments
2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

Alain Ross avatar image Alain Ross commented ·
Unfortunately doesn't work for me, try several time, & the phone application always put widget in the same order... still waiting for Victron to upgrade the phone VRM app with a finger slide Widget option, will be so convenient & user friendly in my humble opinion !!
0 Likes 0 ·
Show more comments
dmccook avatar image
dmccook answered ·

Hey Victron, I really hope you can fix this soon.

If the phone version simply copied the order from the wide screen devices as suggested above that would be great. PLEASE

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

larsea-dk avatar image
larsea-dk answered ·

Do you also experience issue with turn on and off widgets in the advanced? I cannot turn on/off on the mobile version, must be done on laptop. It did work in the past.

I use the mobile version a lot more and really think the mobile VRM is a great tool.

BR,

Lars

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

philippe-rigollet avatar image
philippe-rigollet answered ·

Adding my voice so the order on phone is based on activated rather than creation order.
To reorder we would just need to deactivate all (causing a reset of the list) and then we could reactivate in the desired order

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

just-dance avatar image
just-dance answered ·

Also requesting the ability to create a custom order sequence of widgets.

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

mesteve avatar image
mesteve answered ·

Still asking…

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.

Guy Stewart (Victron Community Manager) avatar image
Guy Stewart (Victron Community Manager) answered ·

Hi all,

A long standing ticket - I've asked the VRM team to have another look.

2 |3000
Toggle Comment visibility. Current Visibility: Viewable by all users

Up to 8 attachments (including images) can be used with a maximum of 190.8 MiB each and 286.6 MiB total.