Rockbox Technical Forums

Support and General Use => Theming and Appearance Customization => Topic started by: daniel.weck on May 30, 2012, 09:54:33 AM

Title: [OptimalInfo] Theme: Toshiba Gigabeat F/X/S, Sansa Fuze+, Samsung YP-R0
Post by: daniel.weck on May 30, 2012, 09:54:33 AM
Dear Rockbox'ers,

This is a follow-up from the Sansa Fuze theme, upon which this one is based:
http://forums.rockbox.org/index.php/topic,34471.0.html

I tried several themes from the gallery, but I could not find one that I enjoyed using on a daily basis. So I created my own, and I have now released it in the Rockbox gallery. The "source" is actually on Google Code as well, where it will be kept up to date.

Source code on GitHub:
https://github.com/danielweck/Rockbox-theme-OptimalInfo

Gallery link (Toshiba Gigabeat F/X):
http://themes.rockbox.org/index.php?themeid=1627&target=gigabeatfx
BIG font:
http://themes.rockbox.org/index.php?themeid=1628&target=gigabeatfx

Gallery link (Toshiba Gigabeat S):
http://themes.rockbox.org/index.php?themeid=1627&target=gigabeats
BIG font:
http://themes.rockbox.org/index.php?themeid=1628&target=gigabeats

Gallery link (Sansa Fuze+):
http://themes.rockbox.org/index.php?themeid=1627&target=sansafuzeplus
BIG font:
http://themes.rockbox.org/index.php?themeid=1628&target=sansafuzeplus

Gallery link (Samsung YP-R0):
http://themes.rockbox.org/index.php?themeid=1627&target=samsungypr0
BIG font:
http://themes.rockbox.org/index.php?themeid=1628&target=samsungypr0

Quote
OptimalInfo is a high-contrast coloured theme with minimalist graphics, which displays an optimal amount of information using an easy-to-read 9-line layout (or 10 lines + 2 extra blank spacing for taller displays) based on a legible font. Layout tricks such as alternating line text, as well as separate screens for volume and seek controls, are used to maximise usability whilst reserving screen real estate for high-priority information.

The small-font 10-line layout (+ 2 blank lines) is composed of:

1) a red-ish heading at the top, alternating between the date/time and the battery level
2) the track number (out of total playlist items)
3) track title
4) track album
5) track artist
6) full file path (dimmed)
7) audio codec details (dimmed)
BLANK
8) next track information
BLANK
9) playback progress information (current time / track duration) (percentage, remaining time only in dedicated "seeking - rewind/fast-forward" screen)
10) progress bar

Additionally, there are discrete vertical volume level indicators on either side of the screen (live peak meters for the left and right audio channels).


The main screen, paused (note the white highlight to indicate the playback state):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx-1/wps-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-1.png)

The main screen, playing (note the stereo peak meters)(also note that coincidentally, the red-ish heading at the top is displaying the battery level instead of the date/time):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx-1/1-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-2.png)

A separate screen is displayed when the volume level is changing:

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx-1/2-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-3.png)

A separate screen is displayed during seeking (rewind, fast-forward):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx-1/3-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-4.png)

The menu style is in keeping with the "while playing screen", nothing fancy (note that the image background is actually not used in the WPS, a similar gradient is drawn instead):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx-1/menu-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-5.png)


The 9-line layout (large font) is composed of:

1) a red-ish heading at the top, alternating between the date/time and the battery level
2) the track number (out of total playlist items)
3) track title
4) track album
5) track artist
6) full file path (dimmed)
7) audio codec details (dimmed)
8) playback progress information (current time / track duration) (percentage, remaining time only in dedicated "seeking - rewind/fast-forward" screen)
9) progress bar


(Note: I find the huge font "35-Nimbus.fnt" very usable in practice, as I don't mind horizontal text scrolling)

The main screen, paused (note the white highlight to indicate the playback state):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx/wps-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-1.png)

A separate screen is displayed when the volume level is changing:

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx/1-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-2.png)

A separate screen is displayed during seeking (rewind, fast-forward):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx/2-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-3.png)

The menu style is in keeping with the "while playing screen", nothing fancy (note that the image background is actually not used in the WPS, a similar gradient is drawn instead):

(http://themes.rockbox.org/themes/240x320/optimalinfo_toshibagigabeatfx/menu-Rockbox_OptimalInfo_ToshibaGigabeatFX_Screen-4.png)

I hope you enjoy it as much as I do!
Cheers, Daniel

Note about porting to other devices from the Sansa Fuze theme:

Porting the theme to other devices should be quite easy. Simply pick a font that enables 9 lines of text to fit within the vertical screen space, and adjust the pixel width of the viewports in the WPS (main, volume control, seeking). For example, if your device's display is 240 pixels wide instead of 220px, add the difference (20px) to the width specified in the WPS.

To port OptimalInfo to the Toshiba Gigabeat F/X platform using the large font, I had to tweak a couple of other things, for example the playback information above the progress bar is shifted below, centred, and reduced (only "time/total"). I also implemented similar alterations in the dedicated "seek" screen (rewind / fast-forward), by splitting the information onto several lines.
Title: Re: [OptimalInfo] Theme: Toshiba Gigabeat F/X/S, Sansa Fuze+, Samsung YP-R0
Post by: daniel.weck on March 06, 2015, 12:53:22 PM

FYI, I moved the source code to GitHub:
https://github.com/danielweck/Rockbox-theme-OptimalInfo

I need to figure-out why the scrolling text is all messed up in more recent versions of Rockbox
(not sure what revision broke my design, it must have been some time ago!)