BlueOnyx 5211R: New GUI (Development)

Posted by: mstauber Category: General

The last week we've been hard at work with some exciting development work: BlueOnyx gets a new GUI theme!

Current GUI State:

At this time all still supported versions of BlueOnyx (5209R, 5210R and 5211R) use a GUI theme called "Adminica". We introduced it back in 2014 when we released BlueOnyx 5207R and 5208R. Adminica has served us well over the last nine years, but it has its shortcomings. The standard "fixed" theme is too rigid and wastes space. The fluid theme is a bit of an eye sore and the mobile versions of both are usable, but only barely so. The whole positioning of elements in Adminica was done with the 960 Grid system, which since long has gone out of fashion. For good reasons.

Two years ago I already had started an attempt to modernize the theme of the GUI, but it didn't get that far and development of 5211R eventually took priority. About three weeks ago I started over with this and created a static HTML mock-up to test out how a specific new Theme would adapt to our specific needs. And the results were encouraging.

The new Theme:

The new theme is called "Elmer" and was created by Henceworks. It comes in a "dark" and a "light" mode and each of these have seven different color schemes. In BlueOnyx we will eventually support all of these just like we did with the various "Adminica" theme variants. Means: Under "Personal Profile" in the GUI each user can choose the variant that he (or she) prefers.

The "Elmer" theme uses CSS for positioning and from the ground up it is designed to deliver a great usability experience on all screen sizes - down to small mobile phone screens.

The last 10 days we spent a lot of work of starting to integrate the new theme into the existing GUI code of BlueOnyx 5211R. In our SVN this project has the working title BlueOnyx 5311R for the moment, although it will be released as regular BlueOnyx 5211R YUM update when done. We might even keep the product name of the resulting modernized BlueOnyx as 5211R.

The current goal is to keep the old Adminica theme usable, but to switch BlueOnyx 5211R to the new Elmer theme as a new default. If you or users don't like the new look or need more time to endear yourself to it, you should still be able to switch back again under "Personal Profile".

Here is a small three minute preview video of the current state of things on our development box:

Please note: This is currently in a VERY rough state and only in limited parts representative to the final state.

Current State of the Development:

To keep Adminica around AND allow Elmer to slip in via the backdoor, we renamed the old /usr/sausalito/ui/chorizo/ci4/app/Libraries/uifc directory that contains most GUI elements to /usr/sausalito/ui/chorizo/ci4/app/Libraries/uifc1. And most parts of the GUI that will use Elmer reside in /usr/sausalito/ui/chorizo/ci4/app/Libraries/uifc2. This allows for a relatively clean separation of "old" and "new".

There are several other GUI Classes (like "BxPage") and some GUI Helpers which require provisions for both Adminica and Elmer. These provisions have been added by now. The most work so far had to go into "BxPage" to integrate the basic HTML, CSS and Scripts of the Elmer theme and to allow BxPage to render the menus and other framing elements in all the right places and conforming to the new theme. Without breaking support for the old Adminica theme. That was quite a challenge, but is now completed.

Next the work on converting all UIFC elements was started. That's about 80 PHP Classes worth of code to render the various GUI elements such as "PagedBlocks" pages with and without tabs for the content, buttons, button container and (most importantly) our "ScrollList" Class had to be adapted to spit out DataTables that conform with the new Elmer theme. That is more or less done, minus about half of the buttons that we rarely use in the GUI anyway. Those get sorted next.

And then there are all the input fields, the input validation routines. Work on those hasn't started yet, but that will be tackled soon as well. The static HTML mock-up's "Add Vsite" page should give you a rough idea how the form fields will eventually look. Be sure to scroll down to the bottom of the "Basic Settings" tab and toggle the "Enforce Email Limits" radio button. Or flip the radio button of "MariaDB user and database" in the "Services and Features" tab.

But there is still a lot of work to do until the BlueOnyx 5311/5211R GUI will look that shiny.

Estimated Release Date:

About three weeks if nothing major comes in between. And this will be an all out effort almost around the clock - seven days a week. Means: It might take longer and we'll make no promise. It'll be released when we're done and happy with the results.

Want to help?

If you want to help to speed the development along, then perhaps consider a donation to the BlueOnyx project. It'll be much appreciated and serves as a morale booster to the code monkeys. :o)


  BlueOnyx is available free of charge. For all purposes, may they be personal, commercial, educational or whatever else you might want to use it for. However: Keeping BlueOnyx updated, adding new features to it and releasing updated ISO images is a lot of work. If you like BlueOnyx, then please consider donating something to the project. Thank you and enjoy using BlueOnyx!


What about BlueOnyx 5209R and 5210R?

We somewhat feared you'd ask that. BlueOnyx 5209R will go EOL in summer of 2024 and at this point of it's life-cycle it makes no sense to dedicate that much work and effort into it. As for BlueOnyx 5210R? That still has plenty of life in it and would sure benefit from getting the Elmer theme as well. Considering the technological differences between BlueOnyx 5210R and 5211R it would almost be easier to just make the 5211R GUI work on 5210R as well. A few diversifications and adaptions would be needed, but certainly less than trying to integrate Elmer almost from scratch into it. So let us put it this way: We're considering our options there and it is likely that the Elmer theme will become available for BlueOnyx 5210R as well. Hint: Donations could help to assure that.

Well, that's the big news for today. Back to coding!


Nov 14, 2023 Category: General Posted by: mstauber
Previous page: Development Next page: Mailing List