Integration & performance issues with tab set interface

[MayaPosch]

I have recently integrated RmlUi into my NymphCast project to evaluate it for displaying a GUI, much like with other 'smart TV' software solutions. You can see the initialisation and SDL2-based render loop in sdl_renderer.cpp:

Init: https://github.com/MayaPosch/NymphCast/blob/0df2e91fbf37ec1a852789c05da5fe9e169a8ade/src/server/ffplay/sdl_renderer.cpp#L115 SDL loop: https://github.com/MayaPosch/NymphCast/blob/0df2e91fbf37ec1a852789c05da5fe9e169a8ade/src/server/ffplay/sdl_renderer.cpp#L479

The issues that I'm running into are that the response from the GUI is very slow. Opening the debugger takes seconds at least, and I'm not sure that reloading the document (line 178) is working at all. Perhaps ironically, the detection of Ctrl+c in the same SDL event loop to shutdown the software is detected flawlessly each time, making me think that the problem is with RmlUi somehow.

With regards to the tab set itself, the C++ documentation (https://mikke89.github.io/RmlUiDoc/pages/cpp_manual/element_packages/tab_set.html) seems to cover only the basics, so I'm not sure whether I am missing something in terms of tab placement.

E.g.:

• Can the tabs be placed on the left or right side?
• How are they placed on the bottom?
• How does one switch between tabs (panels)?

You can see the current WIP RML file here: https://github.com/MayaPosch/NymphCast/blob/master/src/server/assets/index.rml

Any assistance with this matter would be most appreciated. I have looked at many GUI solutions that work with SDL2 and I'd very much like to use RmlUi not only for this GUI, but also for other parts of the project due to the flexibility and tight integration compared to using an HTML/CSS rendering engine.

Thank you very much :)

[mikke89]

Hi and welcome! I'm very happy you find the library interesting, and I hope it'll work out well for you.

Regarding the performance issues, is this on a desktop computer or something else? On desktops it should easily run without any noticeable delay except in rare circumstances. Can you try to run a profiler on it? Are you able to run the included sample applications, how do they do in terms of performance? You could also try to make a dummy render interface which does nothing, and see if that speeds things up, if so there could be a problem with the render interface implementation.

For the tab set, the main thing to take away is that the elements don't do any layouting themselves, it is all determined by normal RCSS layouting rules. It does however change the element tree a bit. So to place things left/right/bottom, you could use absolute positioning or eg. float: left on the tabs and panels elements. I guess CSS can sometimes be a bit awkward for this kind of layout but anything should be possible :)

Switching between panels occur when a tab is clicked, otherwise you can do it using the C++ API on ElementTabSet. I see now that these are not documented, I'll add them to the documentation asap.

    /// Retrieve the number of tabs in the tabset.
    /// @return The number of tabs.
    int GetNumTabs();

    /// Sets the currently active (visible) tab index.
    /// @param[in] tab_index Index of the tab to display.
    void SetActiveTab(int tab_index);

    /// Get the current active tab index.
    /// @return The index of the active tab.
    int GetActiveTab() const;

Hope it helps, let me know how it goes.

[MayaPosch]

Thank you for your response.

I'm testing the software inside a Manjaro Linux VM, so that should be fast enough I'd hope.

I'll run a few more tools from the Valgrind suite and see what comes up. I'll also check out the samples. Feel free to point out any obvious mistakes I made in my implementation in the meantime :)

[mikke89]

Ah, I've had trouble with VMs myself. If the OpenGL backend reverts to software rendering things can get really slow, check any logs to see if this is happening. Natively it should be a whole lot faster.

Your integration is looking good so far, I don't see anything obviously wrong. It looks like the renderer doesn't support transforms yet, but that could always come later if you need it at all. I'm not very familiar with SDL, but can't OpenGL calls directly be used to create the textures? I don't know if this matters in terms of performance. Anyway, you've got a good start there!

[MayaPosch]

I re-ran the current NymphCast server build with RmlUi support in a Linux Mint VM with 3D acceleration enabled. It seems a bit faster, but I'm getting a weird flickering effect with the icons and text of the tabs & panels flickering in and out of view above the actual tabs and panels. The panel contents also does not get replaced when switching between tabs, but just overlaps.

Opening the debugger works, but still takes 10-15 seconds, same before anything responds to pressing the 'Outlines' button.

I'll see what the samples do in this same VM.

[MayaPosch]

Couple of updates:

• VirtualBox VMs even with 3D acceleration enabled do not seem to work.
• In VB VM with Linux Mint (20.1) with 3D acceleration misses the top image (above the tab set). The tab set and active panel is rendered (flickering heavily) into this top section above the tab set as well.
• Valgrind segfaults in vmwgfx_dri.so when trying to start Memcheck or Helgrind.

Interestingly, when running the same code and RML on a Raspberry Pi 3 SBC (running RPi OS), these rendering glitches are not present and the top image is also present. Only issues that I can see here are:

• When switching panels the contents of the old panel aren't replaced. This might be an issue with my render loop.
• The cursor is flickering rapidly.

[mikke89]

Thanks for diving into this. I can't really help you with the VM issues, as my experience here is quite limited. Maybe try playing with the OpenGL profile (prefer core profile) and version being used? I would encourage to try things natively before using a VM, I am sure many issues can arise from the VM/driver itself.

Switching panels: Hm, the example you posted earlier is working fine for me when switching tabs. Make sure you are calling Context::Update at some time after the input is submitted but before the next render. Just to be clear, the other panels aren't really replaced, they are merely hidden with display: none.

Cursor flickering: The library does not interact at all with the system cursor, so this would be an issue somewhere on the client side.

[barotto]

For testing under VirtualBox I ended up implementing a SDL based software renderer for my project. Chasing UI glitches in an OpenGL accelerated VM environment is pointless as VM OGL drivers are usually garbage tier.

[mikke89]

Closing this for now due to inactivity and no actionable issues.

Feel free to re-open for follow-up questions. We also have a gitter chat for general discussion and questions.