Creating skins for GetSmart - Before starting I'd like to mention that the current format of the skins' definitions, is not yet solid and will change. However, it shouldn't be to hard to convert it to a newer version. We've tried to make the skin system as dynamic as possible, without making it hard to implement, so, all you need is this help file, a text editor such as Notepad and a Bitmap editor such as Paintbrush. Basic rules - Every line must end with a ';'. Be careful to close any opened parenthesis. If you have to define a string it should be inside commas. Any line starting with // will be ignored (use it to put comments). If you need to use a comment with more than one line open it with /* and close it with */. Some of the things (regions, buttons) have specific meannings for GetSmart. You don't have to use everything, for example, every button do something specific, but you can just skip a button and not define it in your skin. All x & y coordinates are relative to the skin itself and not to the screen. (0,0) means the most top left point of your skin. If you use \ in a file name, you must put two. Example "newst\\test.bmp". Creating bitmaps - Every picture you'll use in your skin (background, buttons, track bars, progression) must be saved as a BMP file. Our transparent color is defined as RGB - 255,0,255. If you paint any area in your bitmap with this color it would be shown as transparent. If you want your window to be a circle, create a normal bitmap, draw a circle in it and fill everything else with that color. If you want your window to have a transparent "hole", just fill your "hole" with that color and it will be transparent. What does RGB - 255,0,255 means? Every color is defined from different amounts of Red, Green and Blue. 255,0,255 means: Red - 255, Green - 0, Blue - 255. It looks like an ugly pink color. You'll have to figure out in the bitmap editor you use how to define this color. Defining colors - In some parts you'll have to calculate an RGB value. Here's the formula to do it: R+B*256+G*65536 - the maximum value of each color can be 255. If you want a pure red color, you'll do: 255+0*256+0*65536=255 so you'll enter 255. If you want black just use 0. For white 255+255*256+255*65536=16777215 The header - Every skin must contain the following header: global{ skins=1; } skinlims 0{ bt=8; this is the maximum number of buttons you defined. tr=1; this is the maximum number of tracks you defined. pr=1; this is the maximum number of progression you defined. txt=22; this is the maximum number of texts you defined. type=0; this should be 0. rgn=4; this is the maximum number of regions you defined. } skin 0{ name "write here the name of your skin"; author "write your name here"; ver "0.026"; // here you should define the version of the skin system your skin is compatible with. Leave it at the current value (0.026). use "GetSmart, Download window"; // the intent use for this skin (leave this one for now) bpp 16; // Here you can define the recommended bits per pixel for your skin. (8 bit means 256 colors) date "write here the date in which you wrote your skin"; comment "if you want to put a comment write it here"; The body - Our skin is devided into five parts each defines a different item (regions(background bitmap), buttons, track bars, progrssions and texts). Regions (the background bitmaps) The regions are actually the background of the skin. The background can (and should) be created with more than one bitmap. Every Bitmap has its own attributes which define how it will show: Attributes: 1 - Shown at start. 2 - shown when window has the focus. 4 - shown when window doesn't have the focus. 1 means, that the bitmap is shown as the skin loads (for example in our skins the track bar is hidden until GetSmart figures out if the server supports resume so its attribute doesn't contain 1. 2 and 4 allow you to define different bitmaps for the skin when it's in the focus (in the foreground) and when it's not. You should combine these attributes to get the wanted result for example: If you want the bitmap to be shown at start , when the window is in focus and when it's not(which means always), you need to combine all the attributes together - 1+2+4=7. So your attribute is 7. If you want a bitmap to be shown at start and only when in focus - 1+2=3. ( this is useful for a title bar). Definition line: rgn ,<"fn">,,,,; rgn is the keyword and must be specified. - is the number of region. Every region must be defined as a number starting with 0. <"fn"> - This is the filename pointing to the bitmap. - the x coordinate of this region. - the y coordinate of this region. - this is the attribute (explained above). if your bitmap doesn't have any transparent areas, write 1 which will make things faster. otherwise put 0. Specific things for GetSmart - Rgn 3, has a special meanning. It should be specified has hidden at start, and GetSmart will automatically show it if the server support resume. It should be used to put the track bar in it, so only if the server can resume it will be shown. We also got a button which controls the rgn and can show/hide it. You don't have to use it, you can just not define this region. Example: rgn 0,"newst\\bk1.bmp",0,20,7,0; // will be shown at start when in focus and when not. rgn 1,"newst\\capt_in.bmp",0,0,3,0; // will be shown at start and when in focus(In focus title bar). rgn 2,"newst\\capt_out.bmp",0,0,5,0; // will be shown at start and whwn not in focus (out of focus title bar). rgn 3,"newst\\bk2.bmp",5,93,6,0; // not shown at start. Used to hide the track bar. Buttons - You have to define each button like the regions, but here you must also define for each button its states. Every button can have more than one states and every press of the mouse pointer on the button changes the state to the next one (this is only supported in specific buttons). for example the pause button has 3 states (pause, resume, done). You can specify a different button for every state. Definition line: bt ,,,, bt is the keyword and must be specified. the number of button starting from 0. the number of states. the x coordinate of the button. the y coordinate of the button. no meanning for now, must be specified as 0. After you've defined the button you have to define its states: Btsubstate { ,<"fn">,ov,push,<"o fn">,<"p fn">,; . . . ,<"fn">,ov,push,<"o fn">,<"p fn">,; } btsubstate is the keyword and must be specified. the button number which you define states for. the state which you currently define (for state 1, n should be 0). <"fn"> the filename to the bitmap of this button. - over attribute: When the mouse pointer is over a button you can set its reaction: 0 - no reaction. 1 - will highlight the button. 2 - will make an effect using the green color. - push attribute: When you press on a button you can set its reaction: 0 - no reaction. 1 - will show the button as pressed. 2 - will make an effect using the red color. <"o fn"> - no support yet, put "". <"p fn"> - no support yet, put "". if you don't want to specify a file name for the button but use an already defined button. This is used in check buttons (buttons which when you press them, they stay pressed, until you repress them to release). You define the first state normally and then when you define the second state, you may not want to define a new bitmap but use the same bitmap of the first state which would be shown as pressed. In those cases define here the state of the button which you want to use. The <"fn"> would be ignored in those cases. In all other cases this must be -1. Example: bt 0,1,275,7,0; // define a button with 1 state. btsubstate 0{ // define state for button 0. 0,"newst\\kill.bmp",1,1,"","",-1; // define state 1 (the first state is 0). }; // close the state define. This is a simple definition of a normal button with normal "over" and "pushed" attributes. Bt 1,3,176,135,0; // defines a button with 3 states. btsubstate 1{ // define state for button 1. 0,"newst\\pause.bmp",1,1,"","",-1; // define state 1 (the first state is 0). 1,"newst\\pause.bmp",1,1,"","",-1; // define state 2. 2,"newst\\done.bmp",1,1,"","",-1; // define state 3. }; This is a definition for a three state buttons. Each press on the button will show a different bitmap. All buttons have normal "over" and "pushed" attributes. bt 6,2,5,83,0; // defines a button with 2 states. btsubstate 6{ // define state for button 6. 0,"newst\\shape.bmp",1,1,"","",-1; // define state 1 normally. 1,"",0,0,"","",0; // define state 2 as state 1 pressed. }; This actually defines a check button which stays pressed when clicked and released after another click. Specific things for GetSmart - I will now describe what each button does in GetSmart. You can skip a button by not defining it: 0 - stop download and close window. 1 - minimize window. 2 - open the task manager. 3 - pause/resume/done This button can be defined using 3 different states or 1 state. 4 - open the console buffer. 5 - hide window. 6 - Show / hide region 3. This button can be defined using 2 different states or 1 state. 7 - This is not really a button, if you'll look in our internal skin, you'll see that on the right there are 4 bitmaps which indicates if the file is downloading, stopped, done or stopped due to an error. This button can have up to 4 states which indicates: 1 - download. 2 - stop. 3 - done. 4 - error. You should define it's "over" and "pushed" attributes to 0, since it's not a button, it shouldn't be pressed. It's defined in our skin as: bt 7,4,10,46,0; btsubstate 7{ 0,"TBDL",0,0,"","",-1; 1,"TBSTOP",0,0,"","",-1; 2,"SMDONE",0,0,"","",-1; 3,"SMERROR",0,0,"","",-1; }; Progression - There are two types of progressions: Round and straight. In our internal skin we use the straight type and in our external skin you can see a round type. Definition: pr ,"pr_fn",,,; the keyword. the number of the progression. <"pr_fn"> the filename of the bitmap. x coordinate. y coordinate. 1 - round progression. 2 - straight progression. Example for a round progression: pr 0,"newst\\R_prog.bmp",242,90,1; When the progression is 0%, your whole bitmap will be hidden. When the percentages grow, you bitmap will start to reveal until on 100% it will be fully shown. GetSmart only supports one progression, so if you'll define another one, it will not be shown. Track bars - There are two types of track bars: Horizontal and Vertical. The track bar is defined using two bitmaps, the background (the track itself) and the foreground which is the little tab that moves. Definition: tr ,<"bgfn">,,,<"fgfn">,,,,,,, ; the keyword. the number of the track bar. <"bgfn"> the filename of the track background bitmap. <"x"> the x coordinate of the track background. <"y"> the y coordinate of the track background. <"fgfn"> the filename of the bar bitmap. 1 - Horizontal track bar. 2 - Vertical track bar. , just put 0 in both. GetSmart will set those values by itself. In horizontal bars it should be 0, in Vertical bar, this will set the offset of the x coordinate. Use this value to set the x position of the bar relatively to the track. This can be negative or positive. same as above. For vertical bars put 0, for horizontal this will set the y coordinate of the bar. This can be negative or positive. the offset of the sperator lines. This can be negative or positive. The color of the seperator lines. Read in the beginning of the file how to calculate this color. Example: tr 0,"newst\\tr_bg1.bmp",9,108,"newst\\tr_fg1.bmp",1,0,0,0,-5,-1,0; This will create a Horizontal track bar. GetSmart only supports one track bar, so there's no point defining more than one. Texts - Here you define where the text will be shown on your skin. You can control the font, its size and color. Definition: txt ,,<"fnt">,,,,,,,,, ,,,; the keyword. the number of the text. If you want to use a font which you already defined, put here the number of txt which font you want to reuse. If this is the first definition or you want to use a new font, put -1. <"fnt"> the font's name as it's shown in Windows. Example: "MS Sans Serif" the height of the font (this actually controls the size). the width of the font. Can be 0 and windows will calculate this value according to the height. if you want this text to be shown on a button you've defined, put 1. Otherwise put 0. if you want the text to be on a button, this defines the button number. Otherwise its ignored. ,,, - this is the rectangular in which you allow the text to be shown. If you chose the text to be shown on a button this is a relative rectangular to the button's. the color of the text when the window is in the focus. This is an RGB color, read at the top of this help file how to calcualte it. The color of the text when the window isn't in focus. Again an RGB color. 0 - normal. 1 - use raster which means the text will be drawn with some effects in its colors. this actually defines what this text show: 0 - this is the title text. 1 - shows the URL. 2 - recv/size. Example: 34k/514k 3 - elapsed time. 4 - Average kb/s. 5 - estimated time until finished. 6 - current kb/s. 7 - current splits used. 8 - pause / resume. This will show the text "pause" or "resume". Will change automatically. 9 - The timeout value. 10 - the track bar current position. 20 - the status of the download. Example: txt 0,-1,"MS Sans Serif",15,0,0,0,5,4,190,20,30,30,1,0; This defines the position of the title text. We define a new font here. txt 13,0,"",15,0,1,3,2,0,-2,-2,0,0,1,8; This defines the "pause" / "resume" text location. It uses the font of txt 0, which was already defined as "MS Sans Serif". Its location is over button number 3. Its rect 2,0,-2,-2 means a bit right to the button. We also limit the end of the rect to be 2 pixels left from the end of the button (that's the -2,-2). Well, that's it. It's very easy to implement skins once you get the idea. For any questions on how to design skins you can email to: m507@usa.net. If you have questions specific to the skin system or some ideas email to: m508@usa.net. Last updated on 26/03/1999. Written by Ehud Shabtai.