[alejandro]

WARNING! SOME ASSEMBLY REQUIRED!
NOTE: Now Fully Functional On New Multi-Builds!
If you are impatient or hate building things, you will probably hate this thread. Sorry!
***Building this is easy anyway...***

****





"Screaming Oranges" original concept: Anyone want to make a WPS like this?

"Screaming Oranges2" changes: some of the buttons have been redone to better match the look of the wps more (I always felt the original "play" status buttons looked a bit off, so I changed those to something I considered more in style with the look of the wps). The battery level in the original only had four pictorial levels, that has now been changed to 10 levels so as to provide a better/more accurate visual reference. The wps code has been rewritten for the placement of the new buttons, so the old wps code is not compatible with version 2.0 buttons. Last but not least, a whole bunch of color versions are now available.


The following is a picture taken off from my desktop, using Rockbox Multi-Simulator. Hence you see two sections, the screen of the H3xx player, and under that (the green background with the black font) the screen of the remote (well, if you had a remote, that's what would show). I suggest you download that nice little program. It makes testing out the different color schemes much MUCH easier since everything is tested on your pc, thus avoiding the hassle of constantly having to plug your player in and out of the USB port to test whether you like what you made or not. You can download the simulator here:
Simulator for testing Multifonts WPS
I am unsure as to whether I should post instructions on how to use it, since it works just like having rockbox on your H3xx. If you have any problems testing this out, let me know, and I will help!

Now, as I said, let's take a look at the layout:


At the top right of the screen we have the artist, under that is the album name, then track number in playlist, and track name under it. (If the player is locked, you will see a semi-transparent lock icon appear at top right of screen, you will see what I mean...)

Under track name is file type with avg bitrate in kbps to the right.

Then we have playtime position with total track time to the right, with a blue progress bar under it (the color can be picked to your liking).

The "55" is the battery percentage level remaining, with the blue bar under it giving an approximate visual reference of said percentage (the color can be picked to your liking). There are ten levels to this battery bar, instead of the commonly used four.

The "-33" is the volume level, with the "green leaf bars" providing a visual reference of said level (in the picture, the bars are "coconut," but the color can be picked to your liking!).

Inside the three bubbles we have play status at left (play, pause, ffwd, rwd), shuffle status in middle (123 means no shuffle, 312 means shuffle), and to the right we have repeat status (horizontal bars means no repeat, then repeat all, repeat 1, etc). The colors of all these buttons can be picked to your liking.

To the left of the three-bubbles we have the date with current time of day beneath it.

At the bottom left we have info that displays what plays next: next artist name on upper right of that box with next track name below it.

And of course, upper left of screen displays album art if it is available.

INSTRUCTIONS:
How to put together your own WPS using the parts provided

IMPORTANT NOTICE: You need a multi-font build, such as Norbusan's or Darky's, in order for this WPS to work correctly. The clock also has been updated for the new parser code.
If you see the message: "FIX DATE! FIX TIME!" It means that you need to go to the settings menu and set the appropriate date and time, which aren't set automatically when you put the new builds on your H3xx player.

Last Norbu MULTI build tested and working: rb-np-multi-070516-1

Last Darky build tested and working: rb-db-20070807-14224


STEP 1: MAKE A FOLDER CALLED "CUSTOM"
In your computer, simply create a new folder anywhere you please and call it custom. Create four folders inside the one you just created and title them like this:
backdrops
fonts
themes
wps

Open the wps folder, create another folder inside it, and title that new folder oranges2 and leave it open.

STEP 2: CHOOSING A SCREEN
First, let's take a look at this screen again for reference:



Choosing a screen is daunting, since there are so many screens, so just go and peruse and find one you enjoy, then download that particular pack! The particular screen above is called apple banana - blackberry apple. It is part of the Paradise Blends 01 Pack.
The nomenclature of the screens follows a simple rule: the first section, in this case apple banana refers to the background color, the second section following the dash, in this case blackberry apple refers to the foreground color (the "windows" upon which information is displayed).

Once you have downloaded the file containing your screen, open the file and look for the directory containing your screen. If you forgot what yours was called, the thumbnails in this thread are also included within the corresponding Blend Packs you download so that you can peruse through them for reference. The name of the directories first start out with the name of the background color. When you go inside one of those, you will see many directories all beginning with the name of the background color but ending with the names of the different foreground colors. Find the name of your screen, open that directory, and copy the three files in there to the oranges2 folder you created in Step 1. In our example, I would download and open the Paradise Blends 01 directory. There are three sub-directories here: apple banana, apple coconut, and apple double, I opened the apple banana directory because this corresponds to the background (you always look for the background name first), then the apple banana - blackberry apple directory to find three files. You need to copy ALL three files for whatever screen you choose, remember that!

There should be THREE files in your oranges2 folder for now:
bckgrnd
lockoff
lockon

It is very important that you keep the name of the foreground color in mind because this lead us to...

STEP 3: CHOOSING BUTTONS
In post #11 you will find all the parts you need to build up on the screen you chose. Now that you have a screen you like, you must download the Buttons file found in post #11 (first link there, the .rar file is called "Essentials"). Remember how I said to keep in mind the foreground color of the screen you picked? Well, once you have downloaded the Buttons file, you will see that all the folders are called "[color name here] front." This is because the buttons had to be made for each foreground color (I tried to do one global set of transparent buttons, but that didn't work too well since the transparency wasn't perfect, thus I had to make a set for each screen color front).

Anyhow, I wanted to use blue buttons with the above screen, so, under the Buttons directory, I looked for blackberry apple front because this corresponds to the foreground name of my screen (apple banana - blackberry apple). Once there, I looked for the blueberry directory for blue buttons. Whatever buttons you choose, copy ALL of those files to the oranges2 folder you created in Step 1.

Your folder should now have the TWENTY-SEVEN** following items (in alphabetical order):
batt01
batt02
batt03
batt04
batt05
batt06
batt07
batt08
batt09
batt10
battadapter
battunknown
bckgrnd
clffwd
clpause
clplay
clrrwd
cmshuoff
cmshuon
crrepeata2b
crrepeatall
crrepeatoff
crrepeatone
crrepeatshu
lockoff
lockon
progbar

**This will be 28 if you include the file called "noalbumart.bmp" which is the default picture displayed on the upper left corner of the screen when no album art is available. The file is already mentioned in the wps code, and the bitmap pic itself can be downloaded and picked from the packs in Post #11. If you don't want anything to be displayed, simply don't bother putting the "noalbumart" bitmap file with the rest of the buttons. Nothing will show because there is nothing to load.

STEP 4: CHOOSING VOLUME COLOR
The volume color can also be picked to your liking. In our example, the bars were coconut in color, thus we go once more to the Buttons directory you just visited and look for a directory called Volume (if you arrange your folders in alphabetical order, it should be the last one you see). Open the Volume directory to find all the sixteen color variations for the volume bars. I picked coconut as my choice. Whatever you choose, copy ALL NINE files inside to the oranges2 folder you created in Step 1.

Your folder should now have the THIRTY-SIX** following items (in alphabetical order):
batt01
batt02
batt03
batt04
batt05
batt06
batt07
batt08
batt09
batt10
battadapter
battunknown
bckgrnd
clffwd
clpause
clplay
clrrwd
cmshuoff
cmshuon
crrepeata2b
crrepeatall
crrepeatoff
crrepeatone
crrepeatshu
lockoff
lockon
progbar
vol0
vol1
vol2
vol3
vol4
vol5
vol6
vol7
vol8

**This will be 37 if you include the file called "noalbumart.bmp" which is the default picture displayed on the upper left corner of the screen when no album art is available. The file is already mentioned in the wps code, and the bitmap pic itself can be downloaded and picked from the packs in Post #11 (first link there, the .rar file is called "Essentials"). If you don't want anything to be displayed, simply don't bother putting the "noalbumart" bitmap file with the rest of the buttons. Nothing will show because there is nothing to load.

STEP 5: CHOOSING TEXT COLOR FOR WPS AND FOR MENU SCREEN
Well, if you have done the above steps, you have already downloaded the WPS code and misc file from post #11 (first link there, the .rar file is called "Essentials"). The necessary files are in that download

Once you have downloaded this file, open it up. Inside the WPS code and misc directory you will find the following four directories:
(1) Screaming Oranges (similar to the one you created, to be used as reference for what files are necessary)
(2) Theme Menu Font Colors
(3) WPS Text Colors
(4) Xtra Oranges To Go

The directory Screaming Oranges is to be used as reference for what your own custom folder should look like because it contains all the folders and files needed for this WPS to work in Rockbox.

The directory titled WPS Text Colors contains more WPS code files just like the one inside the wps directory inside the Screaming Oranges directory you just downloaded. The only difference is that the files under the WPS Text Colors directory are already pre-coded to display the text color in 16 different color options. This is crucial since black text doesn't work well in all the screens, so I made clone wps files with different color options for the text so that you can choose the one that fits your screen best. As you can see, coconut text works really well with the foreground of the particular screen I have been using as reference. Whichever color version you choose, copy this file to the wps folder you created in Step 01. However, do not place it inside the oranges2 folder but one directory above that. In other words, inside your wps folder but outside the oranges2 folder. Simply put, when you open your wps directory, you should INSTANTLY see the wps code file and the oranges2 folder. Get it? Good!

The directory titled Theme Menu Font Colors contains more theme configuration code files just like the one inside the themes directory inside the Screaming Oranges directory. The only difference is that the files under the Theme Menu Font Colors directory are already pre-coded to display the menu font color in 16 different color options. This is crucial since black text doesn't work well with all the backdrops, so I made clone theme configuration files with different color options for the font so that you can choose the font that fits your backdrop best. Whichever color version you choose, copy this file to the themes folder you created in Step 01. We're almost done!

STEP 6: CHOOSING BACKDROP AND PREPARING FOR ROCKBOX
Download the "Backdrops" from the second link provided in post #11 (the .rar file is called "Backdrops"). After you have finished downloading, open the file, peruse through the different screens, choose one, and COPY IT to the backdrops folder in your custom directory that you created in Step 01.

Your backdrops folder should have one file now:
bckdrp2

The fonts folder in your custom folder is empty. Return to the WPS code and misc directory. Look for the fonts folder in the Screaming Oranges directory and copy-and-paste all its contents unto your fonts folder. You should have all SIX fonts on there now.

OPTIONAL: Return to the WPS code and misc directory. We have the Xtra Oranges To Go folder. This folder has one purpose only: to allow you to have more than one customized Screaming Oranges theme available at your disposal. Inside you will find folders titled "2a" to "2i". These folders contain files exactly the same as those in your custom folder, except they contain slightly different names and their corresponding changes in the code.

Simply follow all these instructions while remembering to use the corresponding files with your extra theme. Follow this whole tutorial step by step but remember to keep in mind the 2a, 2b, 2c, etc when choosing the wps code and theme config, etc.






YOU ARE DONE CUSTOMIZING EVERYTHING!


STEP 7: MOVING TO YOUR H3xx
Return to the custom directory. Inside you ought to see your four sub-directories:
1. backdrops
2. fonts
3. themes
4. wps

Copy these four folders to your rockbox directory in you player (do this by connecting your player via USB to your PC. Open the .rockbox directory in your player. Simply copy-and-paste the four folders directly into here and, if you get prompted with the "this folder already contains... etc etc etc" just allow the action. This doesn't affect any other WPS's already existing in your H3xx player. This step is crucial since it moves the necessary fonts and other miscellaneous files needed to get the WPS looking its best.

STEP 8: ENJOY
Self-explanatory! =D
Just remember to load the theme file thru Rockbox and it will load up everything that is necessary and set it up for you.

NOTE: You can always go back and repeat certain steps if you want to change a thing or two. Also, once you get used to how this works, you can begin to customize the buttons even further by choosing specific colors for each button. In other words, you can make the progress bar be green while the battery bar is red and the play status buttons are white. heck, you can even have a rainbow volume meter by choosing the color of each volume bar independently! In order to do all this, just replace the single corresponding file with the color of your choice by following the guidelines on picking the right button that is compatible with the foreground for your screen. I made the names of the buttons simple enough to understand what their function is, so that shouldn't be a problem.