Now, while fonts can be scaled nicely since the dawn of time, this is not the case for some other UI graphic items, such as icons.
Icons
QLC+ 4 has a whole set of 32x32 pixel PNG icons, and if you ever had the chance to see the UI on a 4K display, well, it looks bad.
Even though antialiasing does the job, a tiny icon cannot be scaled and still look good on high DPI displays.
So, I wanted a solution valid for any screen resolution, even future ones. Therefore I adopted SVG.
I've read a number of web design articles talking about PNG vs SVG and while there are different opinions, it seems PNG is still the dominant format for the web.
Well, here's what I got from my readings:
- websites must load as fast as they can, and rendering a PNG picture is way faster than SVG, also because sometimes you can leverage hardware accelerations
- the web world changes so rapidly that when a new resolution standard takes place, it is probably time to redesign the whole website
- they realized there was something not right about icons/symbols, so more and more websites now use symbol fonts like FontAwesome.
In this way they actually leverage existing formats (Truetype/ODF/WOFF) to achieve vector graphics in web browsers.
While the above is mostly related to the web world, the story might be different for standalone applications.
An application doesn't suffer from load time constrains nor to space taken on your hard disk.
Plus, on modern PCs you can't really tell the difference between the rendering time of a PNG picture vs a SVG picture.
So, it seemed to me the most appropriate choice was to adopt SVG for every UI element in QLC+ 5.
Here's a comparison picture between the QLC+ 4 icons vs the QLC+ 5 icons.
So, similar to websites, I adopted FontAwesome too, to cover those needs where I didn't really need a dedicated SVG icon.
FontAwesome, as the name says, is truly an awesome project! I even helped the FontAwesome 5 crowdfunding campaign on Kickstarter, and I do own the PRO version, even if I do not plan to use it for QLC+ 5.
In one single file there are more than 600 icons made by professionals, and one by one I started using a bunch of them. (example: the zoom symbols)
One other item to be solved was the QLC+ logo! Over time, and because of bitmap graphics, the QLC+ logo has been scaled to a wide variety of resolutions.
The logo light bulb has been taken from an icon set made by Jojo Mendoza, a talented graphics designer. So I contacted him and asked for the icon "source" file.
We agreed on a purchase of the icon set, so I more than happily paid him for a couple of sets and he sent me the Adobe Illustrator files he used to render his icons.
So after a bit of tweaking and adjusting, I've been able to come up with a good looking SVG version of the QLC+ logo as well! (which is the one used in the actions menu of QLC+ 5)
Since I really like Jojo's style, I used some more of his icons for other elements of the UI, such as show items lock/unlock, file open/save/save as, etc
Gobos
Things were going smoothly and I'm pretty happy of how the QLC+ 5 UI is shaping up...and then the 3D preview came...
Quite soon, while coding the 3D preview with Eric, we realized how badly gobos were looking in the light projection.
Gobo pictures have been one of my ideas during the QLC+ 4 enhancement. At that time, 64x64 pixel PNG pictures seemed like a reasonable choice to me.
So, more than 900 pictures of that size were collected over the years.
Unfortunately, when projected on the floor in 3D, all the tiny defects and aliasing issues come out and they look really awful.
So I started another HUGE activity of revisiting all the gobo pictures in the library and turn them into SVG too.
See the difference ?
- there are 1080 fixtures in the QLC+ library
- there are 2592 references to SVG gobos and 726 references to PNG gobos
- you have a 78% chance to hit a SVG gobo in the 3D preview
The nice thing of SVG gobos is that we decided to rasterize them to a 512x512 pixel texture, but if in the future we want more accuracy, we can increase the texture size without the need to touch any gobo picture at all!
This parameter might be even exposed up to the UI, so that if you have a monster graphic card, you can have super high res gobos.
DPI
Last but not least, the whole QLC+ 5 UI is based on DPIs and not pixels. When QLC+ 5 starts, it detects the DPIs of your display and calculate a magic "scale factor" that is used all over the UI. The reference size is that buttons should have the size of a finger. Furthermore, if you move a context (=window) on another display, QLC+ 5 will adapt the UI items of that context to the new display DPIs.
In this way I can achieve 2 things:
- have a single parameter to scale the whole UI
- adapt to any display resolution, especially on tablets or touchscreens in general
Isn't that cool ?
