Pioneer UI

History

Pioneer has a custom UI system. Its interface is very loosely based on GTK+. It works ok for what it does but, like so many things in Pioneer, it proves extremely difficult to use for anything other than the limited use cases it was designed for and resists modification.

In mid-2011 it was recognised that the current system had reached its limits and a fundamental change was required. After some investigation libRocket was chosen as a likely candidate to replace the home-grown GUI and a large amount of work was undertaken to integrate it into Pioneer.

One of the key reasons for choosing libRocket was that interfaces are defined using a subset of HTML and CSS. These languages are widely known and understood so it did not seem ridiculous to use them for our own UIs, making it easier for contributors to modify and extend the UI without needing to modify the engine. There's a lot of potential this way for Lua modules to offer their own UI without too much extra work.

Unfortunately the regular CSS box model is primarily designed for document formatting rather than UI layout. Real web browsers get around this by using JavaScript to shore up the deficiencies in CSS, but obviously that's not an option here. Recent work in CSS has produced "flexboxes" which allow more traditional UI-style layouts. libRocket does not yet support flexboxes however, and attempts to implement it in libRocket were thwarted by its fundamental assumption of their only being one way to do layout.

More study might yield a greater understanding of libRocket's layout engine and from there a clear direction on how to proceed with an implementation of flexboxes, but one of the main reasons for switching away from a custom UI system was to reduce the amount of external code that needed to be developed and maintained. Fully understanding libRocket's layout engine could take weeks, time perhaps better spent on a different UI system (Pioneer's own system or a third-party system).

Regardless of whether or not the current Pioneer UI or libRocket is abandoned, the work on libRocket has been very useful to help us determine exactly what features we want from our UI. This document attempts to list and discuss those requirements.

Requirements

Draw to physical screen dimensions

Pioneer currently uses a virtual 800x600 screen for the UI, which is then stretched to the actual window size. This makes things look stretched on high-res displays and disproportionate on wide-screen displays.

The UI should use the entire available screen space at native resolution.

Position by fractional width/height

Following on from this, since UI code cannot know the current dimensions of the screen, all positioning should be done by fraction of width/height away from an edge.

Preserve aspect ratio when scaling

When scaling an image or other region, aspect ratio must be preserved. Scaling should not be done naively in both dimensions.

more to come...