GUI Performance Optimization

Community General Discussion
1

Hi there !

Enjoying OpenStageControl everyday a bit more :slight_smile:

Now that my project is taking form, I'd like to optimize the GUI performance and lower the latency I experience on panel refresh or widget recreation. Therefore I need your advise.

Basically I am using a low performance iPad 2 mini on purpose to detect anything that is not optimized in any aspects of the project. The GUI is made of full screen panels which are set to visible on / off through navigation buttons. When I press one button, the associated full-screen panel will be set to visible: true, and all other full-screen panels will be set to visible:false.

However, when I switch from one panel to the other, it seems like all widgets contained by the desired panel are being recreated, and this generates a latency depending on the amount of widgets. In my case, around a half-second to one second for around 50 widgets per full-screen panel. Only around 250ms latency on the Mac running as the OSC server, but still.

I'd like to get rid of that latency, or to reduce it at max. My guess is that setting panels to visible on / off is not the best way to achieve what I need, and I should try to avoid widget recreation as much as possible. So I believe there might be other solutions which bring better result.

I thought about having all panels and all widgets on one single big panel. Then navigation would be done by scrolling up and down. Which is by design not ideal since it takes more time to scroll to the bottom from the top and vice versa than pressing a button to get there, even with latency.

So I thought that maybe there is an option for a button to redirect to the right height of the panel, just like an HTML page for instance? Let's say Button 1 will route to 30% height of the panel, Button 2 to 60%, or to a specific tag, you name it...Would something like that be possible ?

The other idea I had is to "bring to front" the desired full-screen panel for it to show up. However, I am not sure that this is something scriptable, and if it makes sense. What do you think ?

Maybe my ideas are stupid, but I am most probably not the only one with the same use case. Panel activation via navigation buttons is very common. Any suggestions, ideas, code example, best practices are welcome ! :hugs:

Thank you very much for your suggestions. :sunglasses:

Cheers, Benoît

2

No suggestions so far, I guess the post was probably a bit too long. Let me further develop.
As you can see on the picture below, there are 2 navigations button on the left of the screen, which activates the associated panel.

Rec Panel
Rec Panel1944×1470 340 KB

Play Panel
Play Panel2046×1528 250 KB

Navigation buttons widget id starts with "nav_", so my script to set a panel to visible and hide the other is the following :

OnValue : if (value) set('nav_*', 0, {send: true})

Any ideas to make panels appear faster, then please post here. Thank you ! :hugs:

3

First of all, big sessions tends to be heavy, at some point it will always be a problem on old devices, o-s-c's focus on customizability and hackability involves some limitations in term of optimization I'm afraid.

The widgets are not fully recreated when their visibility changes, but the browser needs to recalculate a whole bunch of things when it happens and it's slower when there are a lot of elements in the page (even hidden).

Two things that might help:

  • prefer vertical/horizontal/grid layouts to using absolute positioning
  • use tabs instead of panels where possible, inactive are tabs hidden in a way that have a lesser impact on performance

Another approach is to use a custom module to generate the widget property and populate a container using the /EDIT command to keep the session as tight as possible (technically much more complicated though).

1 Like
4

Thank you Jean-Emmanuel for these precious informations.

The old iPad device will only be used for dev and test purpose. It is actually a great witness to make me understand what I do right or wrong, and what can be optimized.

I take your advises into consideration, and you raised my attention with the word "Tabs". Is it a widget, and if so, where can I find it? I run the latest 1.17 release but could not find anything related to it. Any further information about it will be much appreciated. This is most probably one of the way to go.

I read a bit about custom modules on the documentation and forum, and this is definitely a topic will have to dive into. Especially since I will need 2 or more tablets for my projects, and I understood that custom modules are the only way to achieve a proper multi-client system.

Thank you again for your support. Looking forward to learn more about the "Tabs" topic for now.

5

When right clicking on a container you can chose to add tabs to it instead of widgets, but a container cannot contain tabs and widgets at the same time, that's probably why you don't see it in the menu (try cutting all the widgets in a container and then right-clicking on it).

1 Like