Skinning 101

blind_phantom · Post by **blind_phantom** » Mon Jul 31, 2006 4:16 pm

--------------
Skinning 101
--------------
Here is a step-by-step tutorial on how to create a notifier for POP Peeper.
by: blind_phantom
--------------
Requirements
--------------
POP Peeper v3.x [update to be sure]
Notification Skin Plugin v3.0.0.1
--------------
Images
--------------
Right-click and save these images, you will need them to create your skin.

--------------
Step 1: Creating the folder
Create a folder in C:\Program Files\POP Peeper\Plugins\Skins (or where ever you have you POP Peeper setup) titled "Tutorial". This will be your working folder. Put all the above images in that folder.

Step 2: Creating the .ini
Create a file titled "tutorial.ini" by right clicking and selecting New>Text Document; rename the document to "tutorial.ini". This is where we will put the code to bring together all the image files so POP Peeper can read them. Open tutorial.ini and copy and paste the following code:

Code: Select all

############################################
[INFO]
############################################

Skin_Name   = Tutorial
Skin_Info   = 
Skin_Author = 
Skin_Mail   = 
Skin_Web    = 
Skin_Dim    = 329 x 98

Skin_Name is needed for every skin, in this case it is Tutorial. Everything else you can input for yourself. The skin_dim is 329 x 98, or the size of the overall skin (not needed).

Step 3: Constants
Under INFO, you will need to paste this code:

Code: Select all

############################################
[CONSTANTS]
############################################

# Control Types
  _TYPE_Window  = 0
  _TYPE_Button  = 1
  _TYPE_Editbox = 2
  _TYPE_Static  = 3

# System Button Commands
  _IDOK = 1
  _IDCANCEL = 2

# App-defined Constants
  _CMD_OPENPP     = 10
  _CMD_CLIENT     = 11
  _CMD_DISMISS    = 12
  _CMD_RELOADSKIN = 25

############################################
[VARIABLES]
############################################

%NumNewMsg%   = number of new messages
%Account1%    = Account Name for first account with new messages
%NumNewAct1%  = Number of New Messages for first account
%Account2%    = Account Name for second account with new messages
%NumNewAct2%  = Number of New Messages for second account
# etc.

This is for POP Peeper, we come back to this later.

Step 4: Main
Copy the following code again into tutorial.ini:

Code: Select all

############################################
[MAIN]
############################################

  Bitmap = form.gif
  BmpTrans = 0 255 0

  Slider_Enabled = 1
  Slider_Speed   = 10
  Slider_Timer   = 10
  Slider_Delay   = 300000


  FontName = Tahoma
  FontColor = 255 255 255
  FontSize = 8

Bitmap probably one of the most important values. This is what will be used as your "background" or base image to what you will put all your other controls on-top of. Our base image is titled "form.gif". GIF, JPG, and BMP are accepted file formats. I recommend to use GIF or JPG to keep the file size down, but if you are using transparencies, go with GIF first, BMP second. To make a background transparent, fill your background a solid color (I find 0 255 0, or green, works best), and then set your BmpTrans to that color. More on this later.

This is also where you used to adjust the slider (what makes the notifier "pop-up"), but since you can control that yourself in the plugin, its really not needed to know what this stuff does. But here is an explanation of what everything means anyway:

Slider_Enabled = 1 enables slider, 0 disables
Slider_Speed = pixels-per-timer (see below)
Slider_Timer = how fast to move the window in milliseconds
Slider_Delay = pause in milliseconds for window

FontName, FontColor, and FontSize are all the default font settings that will be used. Tahoma is the default pre-Windows XP font, so it will do nicely. FontColor is a RGB number, just go into MS Paint and find the color you want with the color picker. 255 255 255 is white.

Step 5: Controls and Bitmap
Now for the meat of the code. Copy and paste this header:

Code: Select all

############################################
# CONTROLS
############################################

By the way, if you are really nit-picky about organizing your code, anything after # is commented out (not used). It's actually good idea usually, but this is really simple coding and it is not really needed to comment everything.

The first control we will code will be the POP Peeper logo.

Code: Select all

[popIcon]
  Type = _TYPE_Static
  Pos = 6 6 
  Bitmap = icon.gif
  BmpTrans = 0 255 0

The [popIcon] is very important. Every control needs a unique name or you will have problems. Type is also important, since this is an image, it is _TYPE_Static. For other controls, different Types will be used. Pos is position from the upper-left hand corner of the base image (X Y coordinates) in pixels. Bitmap is the image (in our case icon.gif) and BmpTrans is just like before. Since the background is 0 255 0 in icon.gif, BmpTrans will now make it transparent. Sometimes you will have a "halo" around your image of the left over color. Just go into MS Paint and go over the edges and make sure everything is one color. BmpTrans is not needed if you do not need a transparency. GIF, JPG, and BMP are supported.

Step 6: Text
This control will now just place text onto the base image. Here is the following code:

Code: Select all

[titleBar]
  Type = _TYPE_Static
  Pos = 25 6
  Size = 150 150
  Label = POP Peeper - New Message

Again, Type is _TYPE_Static, and position is X Y coordinates. Size is kinda funny, It's needed, but just make it a large number; too small will cut off words, too large, well, does nothing right now. Label is what you want your text to say, in this case "POP Peeper - New Message"

Step 7: Variables
Here is where we will code the variables that tell you from who the message is from, what account, and what the subject is.

Code: Select all

[msgFromVar]
  Type = _TYPE_Static
  Pos = 172 32
  Size = 145 100
  Label = %Msg_From_1%
  FontColor = 0 0 0

[msgActVar]
  Type= _TYPE_Static
  Pos = 172 54
  Size = 145 200
  Label = %Msg_Account_1%
  FontColor = 0 0 0

[msgSubVar]
  Type = _TYPE_Static
  Pos = 172 75
  Size = 145 100
  Label = %Msg_Subject_1%
  FontColor = 0 0 0

Size is now important. The text box is only 145 pixels long, so we don’t want the text exceeding that amount. Label here is what will be displayed. The % is from the Variables (another important variable is %NumNewMsg%, which is total new messages). Here we wanted the font to be not white, but black. So we used the FontColor command (0 0 0 is black).

Step 8: Buttons
The final step, add the buttons. Buttons can also use BmpTrans, but we are not going to. The first button we are going to add is the close button.

Code: Select all

[btnClose]
  Type = _TYPE_Button
  Pos = 307 6
  Command = _CMD_DISMISS
  Bitmap = x.gif
  Bitmap2 = x_2.gif

Type now is _TYPE_Button, since we are making a button. Command depends on what you want the button to do. We got the command from Constants up above. Bitmap is what image you want to use for the button. POP Peeper has a nifty "button-depressor" that is on automatically. In other words, if you use an image for a button, POP Peeper will make it "button-like" when you click it, depressing the image. But since that doesn't look very good for this image, we use a second bitmap, Bitmap2, so that when you click the button, it uses the second image. Comment out Bitmap2 sometime to see what I mean (#bitmap2). Almost done, we just need to add buttons to open your email client, and to open POP Peeper.

Code: Select all

[btnOpenPOP]
  Type = _TYPE_Button
  Pos = 10 35
  Size = 100 20
  Label = Open POP Peeper
  FontColor = 0 0 0
  Command = _CMD_OPENPP

[btnOpenClient]
  Type = _TYPE_Button
  Pos = 10 65
  Size = 100 20
  Label = Open Email Client
  FontColor = 0 0 0
  Command = _CMD_CLIENT

If bitmap is not used, then POP Peeper draws a simple button for you. Usually, its pretty ugly, but it feels right at home here. Type is still _TYPE_Button, but this time, Size is the dimensions of the button (X Y). Label is what the button says. The Command changes this now, OPENPP and CLIENT.

Final Code

Code: Select all


############################################
[INFO]
############################################

Skin_Name   = Tutorial
Skin_Info   =
Skin_Author =
Skin_Mail   =
Skin_Web    =
Skin_Dim    = 329 x 98 


############################################
[CONSTANTS]
############################################

# Control Types
  _TYPE_Window  = 0
  _TYPE_Button  = 1
  _TYPE_Editbox = 2
  _TYPE_Static  = 3

# System Button Commands
  _IDOK = 1
  _IDCANCEL = 2

# App-defined Constants
  _CMD_OPENPP     = 10
  _CMD_CLIENT     = 11
  _CMD_DISMISS    = 12
  _CMD_RELOADSKIN = 25

############################################
[VARIABLES]
############################################

%NumNewMsg%   = number of new messages
%Account1%    = Account Name for first account with new messages
%NumNewAct1%  = Number of New Messages for first account
%Account2%    = Account Name for second account with new messages
%NumNewAct2%  = Number of New Messages for second account
# etc. 


############################################
[MAIN]
############################################

  Bitmap = form.gif
  BmpTrans = 0 255 0

  Slider_Enabled = 1
  Slider_Speed   = 10
  Slider_Timer   = 10
  Slider_Delay   = 300000


  FontName = Tahoma
  FontColor = 255 255 255
  FontSize = 8 


############################################
# CONTROLS
############################################ 


[popIcon]
  Type = _TYPE_Static
  Pos = 6 6
  Bitmap = icon.gif
  BmpTrans = 0 255 0 


[titleBar]
  Type = _TYPE_Static
  Pos = 25 6
  Size = 150 150
  Label = POP Peeper - New Message 


[msgFromVar]
  Type = _TYPE_Static
  Pos = 172 32
  Size = 145 100
  Label = %Msg_From_1%
  FontColor = 0 0 0

[msgActVar]
  Type= _TYPE_Static
  Pos = 172 54
  Size = 145 200
  Label = %Msg_Account_1%
  FontColor = 0 0 0

[msgSubVar]
  Type = _TYPE_Static
  Pos = 172 75
  Size = 145 100
  Label = %Msg_Subject_1%
  FontColor = 0 0 0


[btnClose]
  Type = _TYPE_Button
  Pos = 307 6
  Command = _CMD_DISMISS
  Bitmap = x.gif
  Bitmap2 = x_2.gif


[btnOpenPOP]
  Type = _TYPE_Button
  Pos = 10 35
  Size = 100 20
  Label = Open POP Peeper
  FontColor = 0 0 0
  Command = _CMD_OPENPP

[btnOpenClient]
  Type = _TYPE_Button
  Pos = 10 65
  Size = 100 20
  Label = Open Email Client
  FontColor = 0 0 0
  Command = _CMD_CLIENT

Test
Now just go into settings and test out your new skin. Everything should be working perfectly. Enjoy.

masterbrianssub · Post by **masterbrianssub** » Mon Jul 31, 2006 6:36 pm

Your the best Phantom. Thanks so much.
This will give me something to do this evening.
I will try my best at it.

masterbrianssub · Post by **masterbrianssub** » Mon Jul 31, 2006 7:43 pm

OK I have the "Folder" make along with the images titled "Tutorial".
Now, How do I create a "File" to put all the codes in and does this file go in the same "Folder" as the "Tutorial"?

Right now I have make 2 diff. "folders" one containing the images, and the other a folder, then in that folder a wordpad document containing the codes. I know this is wrong.

blind_phantom · Post by **blind_phantom** » Mon Jul 31, 2006 8:14 pm

Ahh, im sorry, ill clearify that in the tutorial.

masterbrianssub · Post by **masterbrianssub** » Mon Jul 31, 2006 8:26 pm

Thanks, I was about to go

I have the folder made with the 3 peeper images, I just don't know how to make that other file to put the codes in, and then when I get an image I want to make, I will have to learn how to insert it all together so peeper codes it, etc...

Faldo · Post by **Faldo** » Wed Aug 02, 2006 5:53 pm

This tutorial is going to come in handy. Thanks blind_phantom.
I need a little guidance on changing the background color of the Type = _TYPE_Button. By default it is gray. Do I have to add my own button image or can I add something to the button code to change the background color to the buttons.

Faldo · Post by **Faldo** » Wed Aug 02, 2006 9:19 pm

$\:D/$ I think I'm on the right path as I am new to coding. Anyway, what I did was created buttons 100x20 with imaging software and added them as bitmaps into the tutorial. ini under the [btnOpenPOP] and [btnOpenClient]. I must say the buttons don't look too bad as I'm trying to blend them with the seafoam background on the main image. Let me know if this is the correct way of editing the ini.

blind_phantom · Post by **blind_phantom** » Wed Aug 02, 2006 10:19 pm

Ya, i was thinking about that when i was doing this skin/tutorial because the button's grey was not the exact grey i wanted, but in the end i didnt change the color. But i do recommend doing your own buttons instead of using the default (like the close button in the tutorial) because it looks better usually. There is no command in the .ini that i can see that would change the buttons color

Faldo · Post by **Faldo** » Wed Aug 02, 2006 11:52 pm

Yes, I see. As I practice placement, measuring and blending to the base image it seems to get easier. X and Y is the hardest part for me. Once that is attained it's pretty easy. Thanks again blind_phantom!

blind_phantom · Post by **blind_phantom** » Wed Aug 02, 2006 11:56 pm

remember, X Y coordinates start from the top-left hand corner of things. i find it helps to look in MS Paint or Photoshop and see about where something goes and then line it up. i use trial and error tho to get things just right

Faldo · Post by **Faldo** » Thu Aug 03, 2006 7:17 am

What helps me is showing a grid and enlarging the area being worked on. Also merging the layers one on top of the other for some blending and placement effects. Not always the best choice, though.

Faldo · Post by **Faldo** » Thu Aug 03, 2006 10:10 am

############################################
[MAIN]
############################################

Bitmap = formqv6.gif
BmpTrans = 0 255 0

Slider_Enabled = 1
Slider_Speed = 10
Slider_Timer = 10
Slider_Delay = 300000

It may be that richanddana is not coding the main background image into the ini.

blind_phantom · Post by **blind_phantom** » Thu Aug 03, 2006 2:15 pm

that was a great catch Faldo. i forgot that imageshack renames thier files when you upload them. im going to host them on another server. Thank you!

Faldo · Post by **Faldo** » Thu Aug 03, 2006 2:23 pm

Good to Go, blind_phantom..... Ciao!

Faldo · Post by **Faldo** » Fri Aug 11, 2006 9:34 am

What does the "BmpTrans"=? for the main background image do? I try using it with gifs or bmp images. Is it supposed to be a blending code for it to blend with the desktop when it notifies? In the tutorial it mentions "To make a background transparent, fill your background a solid color (I find 0 255 0, or green, works best), and then set your BmpTrans to that color". Not sure I understand and why does green work best? I've been experimenting with different RGB values for BmpTrans, but I'm not noticing any difference.

blind_phantom · Post by **blind_phantom** » Fri Aug 11, 2006 2:12 pm

POP Peeper's BmpTrans is like the green-screen effect in Hollywood. Everything that is of the color you select, gets "erased". I choose green because i use little green in my skins, so there is no mix-up (same for Hollywood, they use green or blue because we dont contain much blue or green pigment in our skin). why green or blue? because green, blue, and red are "pure colors" in the RGB scheme. Heres some examples:

this is with no BmpTrans.

here is when BmpTrans = 255 000 000 (or red)

this is when BmpTrans = 000 255 000 (or green)

BmpTrans = 000 000 255 (or blue)

Which brings up an interesting point. Jeff, not sure if you have noticed this, but when using BmpTrans, it "erases" everything in front of the background also. Im not sure if i want txt, buttons, or anything else hanging off, but its still something i didnt notice before.

Faldo · Post by **Faldo** » Fri Aug 11, 2006 2:55 pm

I get it and Thanks for the graphics. This example shows what BmpTrans on the main or background image does quite clearly. I'm guessing this could be applied separately to buttons, title bars, etc. On your example, when you used "BmpTrans = 000 255 000 (or green)", I've noticed that the green in the monitor icon was still there. Is this because the taskbar graphic is separate from the main background image and if you wished you could add the BmpTrans= ??? to the taskbar graphic? Thanks,

Post by **Jeff** » Fri Aug 11, 2006 5:35 pm

blind_phantom -- your images didn't display for me, but apparently they did for Faldo.

[edit]Must have been a temporary issue, I see them now.[/edit]

Jeff, not sure if you have noticed this, but when using BmpTrans, it "erases" everything in front of the background also. Im not sure if i want txt, buttons, or anything else hanging off, but its still something i didnt notice before.

Something I had never tried before either (or I've since forgot). I don't see it as an issue -- the only time it would pose a potential problem is when displaying variable text. With known text or buttons, you could plop down a background to the exact position/size just so it doesn't get erased, which could make for an interesting effect. In fact, the ThunderBird Skin does this.

blind_phantom · Post by **blind_phantom** » Fri Aug 11, 2006 6:59 pm

Faldo - the taskbar icon that has the green is my wireless manager. BmpTrans only applies to the skin itself (the background and everything "above" it) and to different labels in the skin (buttons, bitmaps). I dont know about the POP Peeper icons, and how they cycle/change.

Jeff - ya, i guess it could be a problem, but then you have the size parameter to help with that (i was never really sure why it was there, but i guess this is a use).

Faldo · Post by **Faldo** » Fri Aug 11, 2006 7:17 pm

Understood, thanks...

Esumsoft Forums

Skinning 101

Skinning 101

[URL=http://www.sendsmile.com][IMG]http://pretticons.com/s/e

BmpTrans= ???