After a few months of working on and off, I finally finished my next Rockbox theme: Themify. Themify does a lot of things I haven’t done yet in Rockbox, I really tried to push myself to create something cool and unique and I think the results definitely speak for themselves! This time, I decided to make a post here going over some of these features and generally looking into the code a bit more for those who are interested in that kind of thing.

UI Re-colouring

Of course, the main feature of Themify is the ability to completely colour-customise the interface to your taste. This is done by taking full advantage of Rockbox’s built in colour settings. Many theme tags support using these user-set default colours, and there’s even ways to make bitmap images be drawn with these too. The goal of Themify was to take these to the extreme

Transparency

One feature of Rockbox theming that has fascinated me for a while is transparent bitmaps. With regular bitmaps, a form of transparent masking is supported (and used fairly often), however Rockbox also supports true transparent bitmaps. I could only find a handful of themes that used this feature in albeit tiny amounts, it’s quite costly in terms of resources, but I felt that the iPod could handle it in larger scales. For Themify, transparent elements provide a vital accent colour for the interface. And thanks to some changes to background drawing, I was able to use it in plenty of places.

The Backgrounds

In recent years, background image switching has become a core part of modern themes. This utilises a layer drawn in the background, where logic is used to display different images per screen. This works great, however even with the best compression you can achieve, each image will come in at around 80Kbs. While this isn’t much, over 5 or 6 images it can begin to threaten the file size of your theme over Rockbox’s theme site’s limits. Instead of taking the standard approach, I decided to try drawing the background elements using theme tags. This involved drawing rectangles in many places and using images to make up for rounded parts, accents and so on. This saved an incredible amount of space and let me use transparent bitmaps far more frivolously.

1-bit Bitmaps

One massive space savings was made with icons and other re-coloured UI images. Converting them to 1-bit Bitmaps gave the same result as regular bitmaps, but at a fraction of the size and effort to load. Without this one decision, I don’t think Themify would have performed as well as it did.

Adaptive UI

To keep a clean, consistent UI, I aimed to create various dynamic features that would give users the information they need when it’s needed, and hide it when not. The main place you can see this is with my icon bar for lossless audio, shuffle and repeat indicators. This uses a rather large amount of basic logic to decide what positions icons should be drawn in and when, and the result is well integrated into theme. I think you’d hardly notice what it’s doing unless you knew.

#An example of the logic for one icon positions
%?and(%if(%ps, =, 1),%if(%mm, =, 1),%or(%if(%fc, !=, 4),%if(%fc, !=, 5),%if(%fc, !=, 7),%if(%fc, !=, 11),%if(%fc, !=, 13)))<%xd(statusextra,3)>
%?and(%if(%ps, !=, 1),%if(%mm, >, 1),%or(%if(%fc, !=, 4),%if(%fc, !=, 5),%if(%fc, !=, 7),%if(%fc, !=, 11),%if(%fc, !=, 13)))<%xd(statusextra,3)>
%?and(%if(%ps, !=, 1),%if(%mm, =, 1),%or(%if(%fc, =, 4),%if(%fc, =, 5),%if(%fc, =, 7),%if(%fc, =, 11),%if(%fc, =, 13)))<%xd(statusextra,3)>

I also added automatic line splitting to the song title text and playlist position indicator. The song title is a bit imperfect, I detect the length of the title, and if it fits the necessary parameters then it will be displayed in two lines. I intended for this feature to be smarter, splitting the text in a way that respected words and didnt chop them up, however Rockbox theme files are unable to detect space characters, stopping this feature in it’s tracks.

The Lockscreen

Easily my favourite feature, Themify’s lockscreen is my most impressive yet. Using a full screen transparent bitmap for the background, it looks stunning. I also added the largest analog clock attempted in Rockbox to date. Using the newer image loading logic, I was able to keep at least the hour hand’s code small. I had to compromise with the minute hands since they couldn’t be 1-bit bitmaps, and to have 60 individual hands produced a massive file size. I kept the logic as small as I could however, so the result isn’t actually half bad, especially compared to other attempts at this feature.

#--- Lockscreen Clock ---#
%Vl(Lockscreen,15,40,160,160,-)
%xd(HourHands,%cl)
#
%Vl(Lockscreen,89,40,86,86,-)
%?and(%if(%cM, >=, 0),%if(%cM, <, 5))<%xd(MinuteHands,1)>
%?and(%if(%cM, >=, 5),%if(%cM, <, 10))<%xd(MinuteHands,2)>
%?and(%if(%cM, >=, 10),%if(%cM, <, 15))<%xd(MinuteHands,3)>
%?and(%if(%cM, >=, 15),%if(%cM, <, 20))<%xd(MinuteHands,4)>
%Vl(Lockscreen,89,114,86,86,-)
%?and(%if(%cM, >=, 20),%if(%cM, <, 25))<%xd(MinuteHands,5)>
#... and so on 

This implementation also features a fix for an issue that has long plagued Lockscreen designs. When the song switches to the next, if a Lockscreen is open, it will refresh the menu the Lockscreen is drawn over. This creates a glitchy mess, and stops this feature from being any more than a neat tech demo. However, I finally fixed this (literally just before I launched the theme) by drawing a viewport over the main menu whenever a song changes, effectively refreshing the Lockscreen effect.

Final Thoughts

Overall, I’m quite happy and proud of this theme’s outcome. I hope many people will find joy in being able to change their colour scheme to fit themselves, or however they feel, whenever they want. If you enjoy Themify, feel free to send some feedback or suggest improvements in the github discussions!