Themes are very simply a way to change the appearance of the Fleursoft DanceHUD. They are the colors and buttons you see on the Heads Up Display (HUD).
A theme is really a texture or picture and simply has a specific set of images inside that the DanceHUD uses to draw pretty pictures. The texture has a funny name to it - and we'll get to explaining the funny names in the section below on how you create a theme.
The DanceHUD comes with two themes all ready to go:
- A basic black and white theme - simple, clean and easy to understand. This is the texture named: ~FS Theme Basic
- A mostly-transparent theme of flowers and a green background - this theme is not as obvious - as the numbers for the menus are flowers and the whole theme is kind of transparent - you can see through it. This is the texture named: ~FS Theme Flowers/b=93,120,81,192
How do you use a theme?
When the DanceHUD is reset, it will automatically switch to using the ~FS Theme Basic - this is just in case you get a theme that makes the DanceHUD get all transparent or something confusing - you can always fix it with by just typing: /98reset
This also will bring up the little explanation of the buttons of the DanceHUD.
You can change the theme by going to the administrative menu (click A) and then clicking 'Set Theme'. You will get a little menu of the textures that are in the DanceHUD. Since it comes with two themes, you will see a list of at least two themes (maybe more). The menu will look something like:
#1 Back
#2 ~FS Theme Basic
#3 ~FS Theme Flowers/b=93,120,81,192
Let's click on the Flowers theme and wait a little bit. Your DanceHUD will change to look a little bit different - the theme will have been set. You can change the theme at any time you want - just get to the administrative menu (click 'A', or type '/98menu A') and click 'Set Theme' - then select the theme and tada.
My hope is to have a lot of different themes for the DanceHUD over some time. I'll make some up - it's pretty easy to create a Theme - and we'll cover that next in this little note.
My plan is to include more themes as part of the DanceHUD - so you have some theme choices. I will also provide a vendor for themes in my shop (once I have a shop... :-) where other themes will be made available from anyone who wants to contribute a DanceHUD theme.
I believe that themes are going to be a very fun area to see grow as the DanceHUD catches on. Themes give you the ability to really customize your DanceHUD with color and style - it's going to be fun to see what themes come along soon.
If you only wanted to know what a theme was and how to use them - then you can stop reading here.
How can I make a theme?
Creating a theme is actually pretty easy. There is a pattern that you follow of what images in a texture and that's about it. But the details matter - so let's go over them.
First up - you probably would like an example to get started. The website will have an example waiting for you in two formats: photoshop (psd) and png. Get a copy of the example theme as a starting place - but we'll walk through how to create a theme from scratch anyways.
The theme is a texture that has four different areas where the graphics are defined:
- All the user menu numbers, inventory and administrative menu buttons
- The mode of the DanceHUD (off, dancing, AO)
- Menu naviation buttons - top, scroll up, middle, scroll down, bottom and my favorite button: stop
- A little header graphic for the top of the DanceHUD
Let's start at the beginning - we need to create a graphic image that is 256 pixels wide and 512 pixels high. How come? Cause the uploaded image has to be a multiple of 2 (SL and OpenSim requires this) and that size is exactly the size of my existing themes.
The first area is where we have an image of the twelve buttons ranging from them all off - and then down the line turning on each button. The button 'bar' is 32 pixels high for each one. You will have a total of thirteen of these collections of button bars. The example theme shows you the pattern which you have to follow - the variations are what matter. The flower theme does not just highlight one number... it is additive - so that menu 1 has one flower, and menu 2 has two flowers that are highlighted. You can do this however you want your theme to look. The area will be clicked on and then the 'bar' for the selected menu is going to be drawn on the screen.
How do I create the buttons? I use layers in photoshop and created one button bar - 25 layers and a size of 32 pixels high and 256 pixels wide. Each number/item had its own layer and colors for each number - two for each menu item - so the number '1' had a grey color layer for the '1' and a white color layer for the '1'. I went across each of the menu items and did the same for all of them. Then I simply selected which layers to display (all gray for the first one, one white and all gray for the second one and so on) and exported the 32x256 images to a folder. Once I had all the different images - I assembled them into the theme image by just opening them, and copying and adding them each as a layer to the theme image file - just a matter of positioning them one under the other on the screen to line up nicely. Then I saved my theme (as I tend
to forget and eeps - have to start over again...)
Ok - buttons for menu numbers are all done.
Let's move on to the mode buttons. These are a little bit smaller and have the dimensions of 16 pixels high by 256 pixels wide. The left most 1/3rd is the 'Off' mode button, the middle 1/3rd is the 'Dance' mode button, and the right 1/3rd is the 'AO' mode button.
I created these buttons - the same way as I did the numbers buttons. Created a little 16 by 256 image, created a background layer (made it black) and six more layers - two for each button. Each text area had it's own grey and white versions. Then I just went across - highlight the 'Off' button and the other two off. Save the image and move over and do the same for the other two buttons - dance on, off and ao off... and finally ao on and off and dance off. Assemble them into the theme graphic and put them below the number buttons.
We have well over half the theme done now.
The buttons for menu scrolling and stopping dancing - these are the same size as the mode buttons - 16x256. I created another graphic and drew some buttons as big as I could to fit them in nicely. The buttons each have their own 1/6th of the area - I tend to center them as that's about where someone will want to click. Saved it - added it to the theme graphic...
And we're down to just one more graphic area in the theme - the title bar. This is another 16x256 graphic - you can put whatever you want there. The right 10% of this graphic is where the user clicks to rotate the DanceHUD up and out of the way. I put a lil underline there so everyone will know to click there. If you click on the other 90% of the title bar - then you get sent to the Fleursoft website.
Ok - we have the graphics part all in a pretty lil graphic almost ready to go. Save it (I tend to save in photoshop format so I can change the layers later on) and then export it as a png image. Why png? Because if you use transparency/opacity, it will be saved with the transparency so that you'll be able to see through the DanceHUD graphic images parts.
Next - upload the graphic and get it into the DanceHUD (edit, click the 'contents' tab and drag it in there).
Now - you can 'Set Theme' to your theme and... eeps - that's just not
quite right yet. If your graphic happened to have a black background
and white text - it probably looks pretty good - otherwise the menu
content in the middle - looks weird - black background and white text.
Eeps - I was duped! This isn't the theme I thought I created... Help!
Ah - now we get to a slightly different problem - the prims that have no graphics on them at all are 'painted' with a default color and the text is another default color and the highlighted menu item is a third default color. I'm betting you can guess what they might be:
Background color: Black (color numbers: 0,0,0)
Text color: White (color numbers: 255,255,255)
Highlighted color: Green (color numbers: 0,255,0)
How do you change those colors for your theme? It's very easy. Just rename your texture to have the colors specified. Huh? Well - I cheated here. Themes could have been much more difficult (notecard and texture and all) but I'm not one for difficult. I like easy peasy. So I made the name of the texture have the ability to specify the colors that should be used to draw the non-graphics parts of the theme.
The name of the texture has up to four parts you can use - one of which is always there... and they are all seperated with a '/' character. The parts are:
Name / background color / text color / highlighted color
But what should they be? I am lazy - I admit it. I did not put in LOTS of words to describe the colors, instead I put in a simple naming scheme for each area and the colors are simply Red,Green,Blue,Alpha in values of 0 to 255.
What are the abbreviated names?
b=###,###,###,### (for background color)
t=###,###,###,### (for text color)
h=###,###,###,### (for highlighted color)
The numbers are for Red,Green,Blue,Alpha - which are in a range of 0 to 255.
An example will help about now. Let's make a background color of red, a text color of green and a highlighted color of blue. The theme name would be something like this:
Fleur's theme/b=255,0,0/t=0,255,0/h=0,0,255
You can also shorten this where the trailing zeros don't need to be included in the name - so it could be as short as:
Fleur's theme/b=255/t=0,255/h=0,0,255
But what about the Alpha setting? Alpha is all about transparency. It's just another number that determine if you can see through the color or not. You add it to the end of the color and there it is. Solid is 255 for Alpha and completely see through is 0 (I wouldn't recommend it as you will NOT be able to see it at all).
Let's make the colors half transparent - so you can see through this theme some - but not completely. The alpha layer would be 128 for half way between 0 and 255. And that would look like this for the texture name:
Fleur's theme/b=255,0,0,128/t=0,255,0,128/h=0,0,255,128
Rename your theme as appropriate for what you want for background color, text color and highlight color (and the appropriate alpha level). Then 'Set Theme' and select your texture with the correct name and... Tada! It looks just like you imagined it would look :-)
Now you can understand why the second theme in the DanceHUD has it's funny name of: ~FS Theme Flowers/b=93,120,81,192
This is a texture of some images (you can double click it in the inventory of the DanceHUD and see the texture), and the background color is an interesting green color that is mostly transparent and matches the color of the graphics in the texture that are also transparent. This makes the whole DanceHUD look nice all together.
That's how you create a theme for the Fleursoft DanceHUD.
Ah - but what else should I know?
Themes (like anything) have intellectual property rights. You can decide that you never want to share your theme - and that's perfectly good - you made it, you can do whatever you want with it.
If you want to give it away to everyone - then you will need to decide how to license your DanceHUD theme. Maybe you just want to give it away to your friends - wonderful.
Knowing that there are lots of different license models is important for intellectual property rights. You can have no license (which is really the hardest as it's not clear what anyone else can do with your theme then), public domain (I give up all my rights to this theme) all the way to commercial (I own the rights to this theme and I am NOT going to share unless you pay me - then you can use it too).
A good way to share a theme would be to use the Creative Commons License for images (http://creativecommons.org/). I will be very glad to distribute your theme if you want to go this way (and likely other licensing models too).
During the beta period, any themes that are contributed will probably come along as part of the product. After the beta period ends, I will very likely remove contributed themes from the DanceHUD product and put them all in a vendor to make them available to anyone who would like to have more themes. The vendor for themes will be in my lil shop (which does not exist yet).
Every theme will have a notecard associated with it also so that your name/license/whatever can be included so that anyone who gets your DanceHUD theme will know that you created it. I do not want to be taking any credit for what you create.
If you would like to sell your theme - I'll probably have a vendor for sale DanceHUD themes.
I think this is how I'll handle DanceHUD themes.
I am open to suggestions as to how to handle themes and licensing.