Venus OS: modifying gui-v2

Question

question

mvader (Victron Energy) asked Nov 25, '23

Venus OS: modifying gui-v2

Hi all, this post is for two things:
1. to announce that gui-v2 source code is now public: https://github.com/victronenergy/gui-v2.
2. to start discussion/get feedback on how to allow modifications again.

In case you have not seen it yet, we're in the final stages of replacing the current GUI in Venus OS with a new one, called gui-v2. For more details, see https://bit.ly/gui-v2.

Modifying the UI is different with gui-v2. While gui-v1 in itself was not open source as a repo on for example Github, all the visible elements were taken care of in QML and those are non-compiled files that could be edited after obtaining root access to the GX device. This allowed for modifications. Small ones, but also large projects like Kevin Windrem's GuiMods.

In gui-v2, the QML files are still on the root fs and can be edited, but doing so only changes the version you see on screen. It won't change the version used remotely in a browser, ie. the WebAssembly version. That version is a compiled single binary, which is built at the time of the Venus OS release and cannot be rebuilt on the GX itself.

The WebAssembly version is hosted on the GX and served to a browsers over LAN and remotely over VRM. The browser downloads the precompiled binary (WASM file) and the runs it locally. Note that for VRM there is a caching mechanism in place; but done in such way that changing the WASM build on the GX will also make its way over VRM to be access remotely.

Building the WASM requires lots of tooling installed (Qt6, emscriptem), and then takes a while. To learn more, see the gui-v2 automated build, https://github.com/victronenergy/gui-v2/blob/main/.github/workflows/build-wasm.yml, a Github Action workflow as well as the how to build instructions in the gui-v2 Wiki: https://github.com/victronenergy/gui-v2/wiki/How-to-build-venus-gui-v2.

The level of modifications done on our current UI varies a lot:
Some commercial integrators install a quite different UI with a USB stick, which requires them to maintain a build process.
UI enhancements, like Kevin Windrem's GuiMods.
Add-ons that come together with installing other functionality onto Venus OS; like dbus-serialbattery, https://github.com/Louisvdw/dbus-serialbattery for example.

Victron is committed to make modifications possible again. But I have not yet seen a clear winning solution for how to do that. The team working on gui-v2 as well as myself are primarily busy with getting gui-v2 ready for prime time.

As a first step we've made gui-v2 open source: https://github.com/victronenergy/gui-v2/.

Some ideas that came up so far are:

Add a web browser component to gui-v2 (that part is easy, it exists in Qt); and make it show a webpage hosted on Venus OS, or possibly also web page on other devices in the system. Same can (relatively easily) be made available remotely just like we do with the Node-RED dashboard for example. First step would be a simple test, also to see how feasible it is wrt CPU and memory resources. Involved building Venus OS including the web component for Qt6 and then making small proof of concept.
Make gui-v2 dynamically load components: You can load QML and JavaScript resources from URLs (see https://doc.qt.io/qt-6/qtqml-documents-networktransparency.html) and for QML components, you can even build strings dynamically and then compile and instantiate them (see https://doc.qt.io/qt-6/qml-qtqml-qt.html#createQmlObject-method).
Do a full build of gui-v2, both the ARM as well as WASM build; and to get that mod, users need to install those (or script on GX downloads those). The disadvantage of this approach is that you cannot combine different modifications.

I am looking forward to hear your thoughts. I invite the community to share details of what you modify, and whether you have idea and skill to help us find a solution.

Venus OS gui-v2

2

2 |3000

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

Mark Maritz commented · Dec 08, 2023 at 05:16 PM

On Brief, can battery and fresh water decrease from top (clockwise) than the left? I would find that more intuitive.

0 ·

andrii-podanenko commented · Dec 11, 2023 at 03:00 PM

Thank you for making all of this work opensource

One small nitpick - to ensure MuseoSans font is used with full Unicode table in order for languages, like Ukrainian - fully supported

https://www.myfonts.com/collections/museo-sans-cyrillic-font-exljbris?gclid=CjwKCAiAg9urBhB_EiwAgw88mRx85P8W9z7NeCNu11YZ7J2rxqFxiEr-8RAnyR1AzAbPxgqqkGa1MBoCEbUQAvD_BwE

0 ·

Modifications Space

Node Red Space

Answer 1 · 2023-11-25T14:19:34Z

kurtinge answered · Nov 25, 2023 at 02:19 PM

Will this new gui have any impact on the MFD integration? I have B&G Zeus2 and needed to do some modifications to make it work with newer version of Venus (I rather do not want to destroy this functionality). Here's what I did to make it work in my old MFD:

Download version 1.7.0 (v2.x.y is not working with Zeus2), unzip the venus-html5-app.tar.gz, create a www folder and rename the dist folder to app and move the app folder to www, so it look like attached picture. Then zip the www folder to venus-data.zip and put the file on a SD card or USB stick and reboot.

1

2 |3000

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

mvader (Victron Energy) ♦♦ commented · Nov 25, 2023 at 03:32 PM

Hi, no effect on that. Totally different app. We are making some changes to mqtt, but with a bit of luck (fingers crossed), those won’t break that older version of the html5 app.

1 ·

Answer 2 · 2023-11-25T22:41:07Z

Just some random thoughts (no answers though):

The least amount effort for porting GuiMods, etc to gui-v2 would be to have a way to dynamically add QML pages to the compiled builds. Some of my mods actually add to an existing menu, for example, adding a new digital input type, or adding a switch to enable one of GuiMods functions (select a flow page from a list, enable/disable showing temps on the bottom of the flow page, etc.) In some cases, like adding a digital input type would require modifying an existing menu, not just linking to a new one. The additional selection could be added in a new menu somewhere, but then the stock digital input type selection menu would show (unknown) when the new type is selected.

I have not looked at all at Node-red but this may be a way to add functionality such as PackageManger that essentially has a set of menus unrelated to the stock user interface. It would require a custom dashboard and access to it via VRM would be essential since many system integrators manage systems remotely for their clients. I don't think Node-red would provide access on the local display of the GX device.

The web page approach would not be able to modify existing menus but would allow access to functions like PackageManager. Matthjis suggested the web page approach could possibly appear on the local display.

Regardless of the approach, supporting multiple packages all modifying or adding to the user interface is important. I can see any of these approaches providing one placeholder, but what happens when two or more modifications are incorporated in the same system and both want to hook into that placeholder?

A similar problem occurs when a modification package wishes to automatically reinstall itself following a firmware update. The suggested way is to create a /data/rc.local file. However doing so, removes any reinstall hooks created for other packages. My SetupHelper MODIFIES the existing rc.local file rather than replacing the existing one of its own. SetupHelper's scripts then manage reinstall of other packages it knows about. To make this easiest for everyone, maybe a directory somewhere in /data could be a drop box for reinstall scripts, QML hooks, etc that the OS scans during startup. Making the mechanism based on a file system would minimize interactions between multiple packages.

Answer 3 · 2023-11-28T08:24:35Z

dansonamission answered · Nov 28, 2023 at 08:24 AM

The ability to include a node-red dashboard would probably suffice for most. It must be easy to access, such as a button from one of the main pages or an extra button along the bottom. Victron (and others) could release some visual nodes that could be used on the dashboard to keep it looking similar.

2

2 |3000

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

Kevin Windrem commented · Nov 28, 2023 at 04:37 PM

As it stands right now, the node-red dashboard does not appear on the local or remote GUI. It's accessed via a web browser and also appears on VRM separate from Remote Console.

0 ·

dansonamission Kevin Windrem commented · Nov 29, 2023 at 12:35 PM

Yep, that's why it would be great to be able to include this as an option.

2 ·

Answer 4 · 2023-11-28T14:04:18Z

iainsommerville answered · Nov 28, 2023 at 02:04 PM

Our main requirement (for use on our electric boats) is to be able add one or more custom screens to the built-in display so having a mechanism to do this that is stable across releases (with some level of documentation) is the highest priority.

Having said that, remote access will be needed for support/debug so I think that options 1 or 2 would be of most interest to us since the remote access is going to be relatively infrequent, i.e. performance is less critical (for us).

1

2 |3000

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

iainsommerville commented · Nov 29, 2023 at 12:22 AM

Thinking about it, I do worry that option 3 would make modifications even more fragile, i.e. more susceptable to internal changes. I have seen how much work Kevin has to put into maintaining gui-mods today; I am not sure if maintaining modifications across all releases would be practical if it was any more complex (even for Kevin!)

0 ·

Answer 5 · 2023-12-05T07:14:57Z

dereppsteiner answered · Dec 05, 2023 at 07:14 AM

Hello Kevin,

how can i install your vers.2 ?

Your link ( https://bit.ly/gui-beta ) not working.

2

2 |3000

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

dansonamission commented · Dec 05, 2023 at 11:05 AM

That used to redirect to here https://docs.google.com/presentation/d/17HHthaPbB_WD6GWsnXqwGGZY2Mo-bLfy4gfYmPyVD7k/edit#slide=id.p

0 ·

mvader (Victron Energy) ♦♦ dansonamission commented · Dec 08, 2023 at 05:57 PM

Hi, the correct link to the slide deck is https://bit.ly/gui-v2

0 ·

Answer 6 · 2023-12-15T05:56:04Z

eappel answered · Dec 15, 2023 at 05:56 AM

Hi,

This runs quite well. I added 1-wire devices after the initial load.

While I can see the devices in the "Levels" pane can they be added to the "Brief" overview?

Eric

2 |3000

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

Answer 7 · 2023-12-21T10:57:28Z

schollex answered · Dec 21, 2023 at 10:57 AM

Hi,

I would appreciate to be able to disable the startup-animation => waiting for the animation to end really waste my lifetime.

I hope it's still possible to operate the web-GUI (Settings-page) via keyboard/cursors, this is much faster than using the mouse. So far, I didn't find out how.

Can Overview-page be set as startpage instead of Brief-page?

The clickable section within the Overview-page are very nice!

What are the bubbles for within the battery? Sorry, I don't like animation which want to pimp a view, but don't have objective indications.

It would be very nice to see power transmitted by Multiplus (Inverter/Charger within Overview-page) from AC to DC respectivly from DC to AC.

I really like the toggle-icons in the left-upper corner, leading to the summarized setup-page. Would you please add ESS-target to this page.

I'm missing Multiplus-submenus within the device-list.

Bye, Alex

2 |3000

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

Answer 8 · 2023-12-25T02:51:39Z

fenix answered · Dec 25, 2023 at 02:51 AM

two things i would like to see

1- the solar is the status "bulk" "abs" "off" etc...

2 - the possibility to switch the invertor "On" Off" "Eco"

3 -Solar yield in A

? - in the brief screen on the right side what is that value? in my case i see 226.4 A but i cannot understand that value

2 |3000

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

Answer 9 · 2024-01-21T20:09:36Z

beat answered · Jan 21 at 08:09 PM

Hi @mvader (Victron Energy)

First of all, I do really really highly appreciate your openess with your community and open-sourcing important parts of your software. Few companies outside of the 100%-open-source world have such open and constructive discussions. Kudos! And kudos for the design of GUIv2, as well as Kudos for GUIv1 extremely well-thought main information screen, as well as Kudos to @Kevin Windrem for GuiMods!

I'm still wondering why you guys at Victron chose Qt+non-ssl MQTT for GUI v2 over a lightweight web-based browser-javascript (+json-data-server backend) open-source GUI widgets library, similar to how VRM runs. This choice makes you have two build-chains, makes GUI mods hard, or impossible, and the remote GUI needs lots of code to even startup (and doesn't run on Firefox, on Linux at least, only on Chomium). Additionally, you can't leverage work on VRM GUI for embedded GUI. You can't have just one HTML+CSS+Javascript code for all platforms (embedded screen, remote browser, VRM-remote). You can't have a consistent styling, while you can style an open-source GUI browser widgets with just CSS.

Qt was designed for portable desktop applications, and is a heavy beast, as well for embedded as for remote web-based GUIs...

There must certainly have been a good reason to make this surprising choice, v.s. embedding a web-browser as display into the GXes with display ?

There are several great javascript widget libraries, and also the one you use for VRM that could have done the job easily, and a lightweight embedded browser with javascript would have been easier too ?

This is not to question your choice (the GUI has a great and modern look, and a few great usability enhancements) but to better understand the choice and the advantages you guys see in Qt GUIv2 over e.g. your VRM GUI or other more leightweight browser-based GUIs. Understanding the Why helps understanding the What and the How, and may help finding solutions for porting GuiMods and other GUI extensions we would love to be able to add to customize the GUI.. ;-)

I'm not sure if this thread is the right one to ask, didn't want to mix it with feedbacks on https://community.victronenergy.com/questions/249509/venus-os-v32034-available-for-testing.html , please feel free to move it where you think it's best.

5

2 |3000

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

mvader (Victron Energy) ♦♦ commented · Jan 21 at 08:25 PM

Hey @beat , thank you for your kind words! And no problem asking such questions. There might not always be the time to figure out or write the answer, but in this case there is, at least for a short one.

We tested running a UI in an embedded webbrowser, and it performed far far worse than a Qt solution, in this case gui-v2. That is the simple answer.

Myself I'm quite happy with the result. Its really fast, both when running locally as well as when in a browser.

But there are indeed some disadvantages; although I've not given up on those yet, especially when it concerns making modifications. And, gui-v1 is not totally going away, we'll need to keep it for the CCGX.

With regards to non-SSL MQTT: that is on the list to look into further.

0 ·

aaronsb mvader (Victron Energy) ♦♦ commented · Mar 14 at 03:54 PM

I appreciate this perspective. I'm just blue sky thinking here - what if VRM eventually aligned with the webassembly UI, and instead effort was put into the assembly toolchain, widgets, and experience there?

This could mean that you're not establishing a vnc session to view the remote gui for example. This could also align widget and graph development in vrm - someone who develops special graphs or interfaces for local UI could be loaded as a combination wasm wasi runtime modules.

Finally, taking this approach could give rise to a "marketplace" type of system for VRM. I don't even know if there would be value in this, but I could imagine a situation where open source/free/closed source/paid wasm/wasi runtimes could be distributed and managed here.

If it became possible to "simply" download a runtime from a managed configuration, or even from vrm and commanded to load locally, this would be a very nice addition to pushing updates to venus clients for example.

I know I'm basically saying, app store, with more words, but something to think about.

0 ·

aaronsb aaronsb commented · Mar 14 at 03:57 PM

Just to sketch on a napkin, imagine VRM with this sort of approach: https://www.qt.io/web-assembly-example-industrial-panel

0 ·

aaronsb aaronsb commented · Mar 14 at 04:07 PM

I would further point out that there is a possible encouragement for both open source and commercial model development, and a WASM qt runtime extension would help keep clear isolation between "products" from a qt licensing standpoint.

If VRM qt wasm is open source, the cost of toolchain and development is under open source principles.
If you are distributing enhancements free of charge, then that contributor can do so as well.
If you are commercially distributing an enhancement, you are supporting QT (a good thing!) with licensing, as well as selling your product.

This meshing of commercial and open source gives "both sides of the aisle" a chance to support each other.

0 ·

Kevin Windrem aaronsb commented · Mar 14 at 04:43 PM

There are actually FIVE GUIs (maybe more that I do not know of):

GUI V1
local gui v2
wasm gui v2
vrm
marine app

all requiring separate development efforts.

While the local and wasm gui v2 development has the same code base, each require a separate build and testing effort.

Combining some/all of the remote GUIs seems like a good thing to consider.

0 ·

Answer 10 · 2024-02-04T23:37:25Z

Kevin Windrem answered · Feb 04 at 11:37 PM

In my option the most critical numbers in the system are the power the inverter is providing. This is important because it represents the number at which the inverter will enter overload.

The inverter drill-down only shows AC input and AC output power and current. The inverter numbers are easily calculated by subtracting out from in.

In GuiMods, the inverter's gauge is based on the out - in value, and the details page shows the actual power provided by the inverter.

2 |3000

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

Answer 11 · 2024-02-17T12:42:30Z

andres Hs1 answered · Feb 17 at 12:42 PM

Hi @mvader (Victron Energy)
Thank you for the details and the good looking new GUI

Will it be possible to add additional items into the brief page?

and remove existing ones?

for example, it is nice to have the weather forecast, yet, this is far from correct, today the weather in HK was 23 C with a forecast of 19~22C, yet, the Cerbo was displaying a forecast of 10 C.

I would also like to be able to see some of the boat temp sensors displayed in the Brief. This was something extremely useful from the GuiMods from Kevin.

Thus, enabling the customization of the feeds to be displayed in the Brief page should be added to release roadmap.

Cheers

2 |3000

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

Answer 12 · 2024-02-17T13:34:03Z

kylebrockmann answered · Feb 17 at 01:34 PM

Hi @mvader (Victron Energy) ;

Any idea why tanks aren't working yet in spite of being in all the screenshots? I have seamless native Mopeka integration on the old gui and they are within the MQTT topics however the feature appears notably absent in qui v2.

Is this because you are developing your own tank sensor hardware and have shelved and frozen changes until such as time as an abstraction is available in venus core?

Are you open to pull requests on the core repository?

Kind Regards,
Kyle Hans Brockmann

1

2 |3000

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

kylebrockmann commented · Feb 17 at 01:39 PM

Please excuse me; v0.2.10 appears to be working just fine.

Forget I said anything.

2 ·

Answer 13 · 2024-03-20T15:30:41Z

Jeremy answered · Mar 20 at 03:30 PM

Hello @mvader (Victron Energy). New GUI is looking awesome!

Quick question regarding embedded web browser... Do you think plausible that we could display node-red dashboards in the GX Touch or Ekrano (i.e. as another view)? That would be a great feature, since this devices could control many other things via Node-Red.

2 |3000

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

Answer 14 · 2024-04-06T13:42:01Z

dpritt answered · Apr 06 at 01:42 PM

Love the new GUI, but I do have one small request, would it be possible to show the device name on the main screen at least. I have several systems and I have to check the IP address to see which I am in, live, test or boat's Cerbo GX.

2 |3000

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

Answer 15 · 2024-04-08T06:41:26Z

dune7 answered · Apr 08 at 06:41 AM

Hi @mvader (Victron Energy) ;

The new GUI is looking great.

Portrait remote console:

Will the new GUI be able to be viewed in portrait mode like the dashboard? This seems a fundamental question, but if more and more people live their lives on phones in portrait mode, turning off auto rotate lock and “rotate your phone to view the remote console” seems like two steps each time that could be eliminated for regular viewers of this valuable asset.

Thanks for all your hard work making our systems robust and feature rich.

2 |3000

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

Answer 16 · 2024-04-08T14:02:25Z

fguiot answered · Apr 08 at 02:02 PM

@mvader (Victron Energy) Could you include in the GUI a way to control all the switches/relays available at d-Bus level?

I see the page triggered by top left icon could be a good place to control all the relays.

That would be nice to have as even RemoteGPIO is currently not able to display it's own menus in Gui-V2, we could imagine users to configure it in the legacy GUI, and when all set use GuiV2.

2 |3000

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

Answer 17 · 2024-04-17T14:57:26Z

chrichri answered · Apr 17 at 02:57 PM

Hi,

when will the relay control for example (Tank pump) be added to the new GUI as it was build in to the Boat and Moterhome view?

2 |3000

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

Answer 18 · 2024-04-20T21:40:04Z

viccomhr answered · 6 days ago

Hello to all I simply can not install. All is installed but not possible to open .

Some help

2 |3000

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

Answer 19 · 2024-04-22T13:05:15Z

Karl Linne answered · 4 days ago

Hello,

I installed the latest beta on my cerbo gx and it rebooted all right.

I don't get the "use gui beta" entry in "display and language" and so can't get the new design.

Anything I misser?

Any help much appreciated

Karl

1

2 |3000

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

derrick thomas commented · 4 days ago

Gui v2 is not included in beta 3.31-xx release. This is an interim release addressing bug fixes. Once victron resumes 3.40-xx beta testing, gui v2 will be back.

1 ·

question