Skip navigation

Tag Archives: skin

A crucial question for all frontend developers is building both a clean and strong user interface.

This article will be usefull if you want to submit a new StreamPlug skin for a later integration.

A StreamPlug skin is made of several images that will be used by the player to render an interactive player controler. A C++ Class is then used to handle the skin’s controls positions/events.
We’ll first concern on the graphics involved, then we will see how they are used in the code

Final result:

Note:Streamplug player is required, you can download it here

We will be happy to see user submitted skins added to streamplug’s next releases, please send us a message !

STEP 1: Create a background set of images:

This part of the skin is divided in three parts as follow:

– Left part

– Middle 1 pixel part

– Right part

The 1 pixel part will be copied several times by the player when necessary to follow the skin ‘s width,
So that you can keep control’s and border’s integrity.
In this skin, both seek bar and volume bar are resized along with the skin, they should appear in the 1 pixel part.
Note that the background set is used to save static buttons.
Static Controls never need to be removed or hidden, so keeping them here is safe.

STEP 2 : Create a controls set of images:

Keep in mind these controls’ colors and sizes should respect the overall design

– Play button

– Pause button

An empty square must have been reserved in the background part to accept these 2 pictures

– Buffer image

This picture will be blitted on the background , accordingly to current streaming buffering state

– Seek button

This will be displayed in the seek bar and follow current media’s play position.

– Volume button

As for Seek button, this is a dragable control. It will overlay the volume bar.

– Volume label

One sample optionnal picture used in this skin to clarify the volume control’s position.

– Loop mode button

– Record button

STEP 4: Set absolute controls positions:

At this point we have all the graphics in hand but the player also needs to know the position of each element so that our flat bitmap becomes an interactive skin.
(For example, the pause button needs to be displayed at a very x,y coordinates on the skin, when the player is playing something.)

Here are some raw coordinates values for our black skin:

———————————————————————————-
Syntax:Element={x, y, width, height}//comments
———————————————————————————-
Back = {0 ,0 ,194 ,32} //size of the background’s left part
Play = {6 ,18 ,11 ,11} //position of the play-pause control
Stop = {21 ,17 ,10 ,10} //position of the stop control
Prev = {37 ,17 ,8 ,10} //position of the previous control
Next = {51 ,17 ,8 ,10} //position of the next control
Rec = {65,17 ,11 ,11} //position of the record
FullScren = {82 ,17 ,10 ,10} //position of the fullscreen control
Open = {100,16 ,11 ,11} //position of the open control
Buffer = {203,21 ,12 ,6} //position of the buffer control
PosBut = {5 ,5 ,19 ,8} //position of the seek cursor control (initial position)
VolBut = {128,19 ,11 ,8} //position of the volume cursor control (initial position)
LoopBut = {111,18 ,15 ,10} //position of the loop control
Vol = {130,14 ,47 ,6} //position of the volume label

STEP 5: Code and Release

This last and final part is up to us, that means you willl need to send us a mail if you want the dev team to take care of your request.

If we like your work, here’s a quick view of what’s done next :

The .bmp images files are converted to .h files with a batch script using bin2hc, then the new skin’s c++ class is added to the player’s core, including the new .h bitmaps.

This class is instanciated as the player launches, so changes have to be done here, as well as the skin selection parts of the code.

After a clean rebuild, the player can be launched and the new player can be used, as shown on top of this page for the black skin. 🙂

Advertisements