An introduction to creating your own skins can be found in our skin design tutorial
The Skin ‘Net(_l).INI’ File
Each INI file must contain an [All] section that includes a “version” key indicating the current version number (at present, V1.0). Only those INI files with a known skin version number are valid under cFosSpeed. Using the “name” key, a skin can be given a name that will show up in the context menu. In addition, a corresponding bitmap must be provided under “background”. The “transparentcolor=x,y,z” key is used to define a color as transparent, where x,y, and z specify the amount of red, green and blue to be used respectively. The shape of the window is composed of all pixels in the background bitmap which are not transparent, meaning that such a window does not necessarily have to be rectangular.
It should further be mentioned that the transparent color chosen does apply to all other bitmaps as well. These are then simply superimposed onto the background in such a fashion that it still shows through from under all pixels with transparent color.
Just as for individual sections, the parameter “alpha_val” can be specified for the background image to determine the general level of opacity (see explanation below). Note that starting with Windows 2000 this is fully supported, while older operating systems still support it in part. For the latter, the behavior under Windows 2000+ can be emulated within certain limits by entering “trans_emu=1”. In addition, you can also have the status window faded in and out by entering “blend_time” or “blend_out_time”, respectively (see also “activearea” further below).
Composite background images: You can specify multiple background bitmaps by using “background2”, “background3”, … INI file keys. They are all blended over the first background image. After all background bitmaps are loaded, an optional alpha mask bitmap, specified by “background_mask” is used. Its alpha channel is copied into the background bitmap. Thereby you can stencil out a shape after all background bitmaps are loaded. Pixels in the mask bitmap with alpha = 255 are ignored. If the mask bitmap has no alpha channel the values for green are used instead.
Color transformation can be specified by using sequentially numbered “transform” keys (transform1=, transform2=, …). Each key must have two HSV values defining a color interval for the original color plus another two HSV values designating the color interval for the target color. If a pixel’s color value falls within the orginal color interval defined for transform1, it is altered by linear interpolation to a color value within the corresponding target-color interval. Otherwise, it is checked if that same pixel’s color value does instead lie within the original color interval specified for transform2, then for transform3, and so forth. An example: “transform1=0,0,0,359,255,255,120,0,0,240,255,255” transforms all color values to green hues. H (Hue) is between 0 and 360 degrees, values for S and V fall within 0 to 255. Transformations can be specified either in the [All] section or in individual disp-sections, which will then overwrite values in the [All] section. Entering “transform1=none” will deactivate a transformation listed under [All] for the respective section.
Now, the methods for displaying a connection’s parameters can be added to the INI file by creating a different “[dispX]”-section for each method. Note that in this context, “X” can be any text (duplicate names are not allowed). While the respective window is being loaded, all methods are then processed in ascending order as they appear in the INI file. Thus, graphical elements defined later inside the file have higher priority in the sense that they could be used to overlay (in part or full) the area covered by previous ones. In effect, this means you could have a graphical element painted over those of lesser priority as long as it is activated, while it would remain transparent if deactivated.
Each disp-section must at least include the following keys:
| value=param | Designates which parameter is to be displayed by this method. A minus sign at the start of this entry means the parameter will not be set to a variable but instead to the exact value following the “-“. |
| method=m | Specifies the method used to display this parameter. |
| rect=x1,y1,x2,y2 | Defines the rectangle (in pixels) relative to the upper left corner of the window onto which the method will be drawn. Values for x1 and y1 define the rectangle’s upper left corner, those for x2 and y2 its lower right corner. |
| enabled=x | 1=this section is active, 0=deactivated. Default is 1. |
In addition, each disp-section may contain the following optional keys:
| print_allowed=v | : 0=display this section only if windows is displayed on screen, 1=always display the section. Default is 1. |
| alpha_val=v | Alpha value with a range of 0 to 255, with 0=(fully) transparent and 255=(fully) opaque. Even if the bitmap has no alpha channel, an alpha value can be specified here that will apply to all pixels. If the bitmap does however have its own alpha channel, it is scaled with this value before blending, which means a bitmap could, for instance, be made more transparent in this fashion. Default is 255. |
| force_blit=v | If v=1 the bitmap is always blitted, ie. alpha blending is turned off. Default is 0. |
Note that transparency color does also play a role for alpha blending in that pixels in this color will not be shown (exactly as without alpha blending). Bitmaps with their own alpha channel can either be 32-bit PNGs, 32-bit BMPs (in uncompressed BI_RGB or in BI_BITFIELDS formats) or 32-bit TGAs (as RLEs with Colormaptype=0, Imagetype 2 or 10). Non-transparent images can be of the formats GIF, JPG, BMP, PNG and TGA.
Icon Skins:
You can also create a skin, which is displayed as a taskbar icon, instead of a normal window. The skin must be 16×16 pixels (ie. the size of the small icon). Set icon=1 in the [All] section. All skin features, including alpha blending are supported. On systems older than Windows XP icon skins are treated as normal window skins.
Methods
method=TEXT
The parameter is to be displayed as text. All letters must be part of a bitmap in the respective skin directory.
The following options for the TEXT method are available as keys in the respective disp-section:
| style= | n=normal, h=hexadecimal, t=time format, e=space-saving electronic format (e.g., 4k7) and d=decimal. K, M, G, or T are automatically put after a decimal number with 4-6, 7-9, 10-12, or 13+ digits, respectively. If none of these are used, unitchar=x designates what measuring unit is to follow the number. Default is an empty space. The decimals=n parameter denotes how many digits are shown after the comma. |
| digits= | Number of digits. |
| flags= | b=blank (if the value is 0), r=right-aligned, z=right-aligned with zero-padding, n=no seperator characters ( ‘ and : ) for the time format, i=use fontbitmaps from right to left if you use several fontbitmaps (see explanation below). |
| fillchar= | Character to be used for z-flag padding (s. above) instead of ‘0’. |
| format= | b=bottom, m=middle, t=top, l=left, c=centered, r=right. |
| div= | Divisor, value by which the parameter is divided. Default is 1. |
The following parameters are used to define fonts:
| fontbitmap= | Bitmap filename. |
| frameheight= | Character frame height in pixels. |
| framewidth= | Character frame width in pixels. |
| fontbitmapchars= | All characters in the same order that their respective frames are found in the bitmap file. |
| default_char_width= | See explanation below for variable character spacing. |
| char_width= | See explanation below for variable character spacing. |
The font bitmap contains – from top to bottom – all characers specified in the “fontbitmapchars” key. Entering “fontbitmap2=…”, “fontbitmap3=…” permits use of more than one font bitmap. In this case, the frames of the first bitmap are used for the first character in the text, the frames of the second bitmap for the second character, and so on (moving from left to right). This does, for instance, allow for the creation of color gradients across several characters.
Variable spacing between characters: When blitting characters the whole frame as specified by the fontbitmap and the frameheight and framewidth parameter is always used. However you can change the offset in pixels to advance to the right after the character is blitted (ie. where the next character is displayed). First you can specify a default offset by the parameter default_char_width. If you don’t specify a value for default_char_width the parameter framewidth is taken. In addition, you can specify a char_width= parameter for all characters which don’t have the default width. The char_width parameter is a list of letter:width pairs, where letter is one of the letters of fontbitmapchars and width is a positive or negative offset to advance after this character is blitted, e.g. char_width=A:5 B:3 W:7.
Font sections: You can put the above font related parameters in an extra section in the SKIN.INI file and reuse them for different TEXT sections. In this case refer to the font section by the font= parameter. For example, if you put all parameters of a certain small font into a section named [smallfont], you can refer to this font in all TEXT sections by the font=smallfont parameter.
You can also use fonts provided by the System:
| fontname= | Name of the Font e.g., Times New Roman. |
| fontcolor=r, g, b | Color in red, green, blue. |
| fontweight= | normal or bold. |
| fontsize=n | Size of the font in pixel. |
| shadow_x=n | n Number of pixel the shadow is offset horizontally. |
| shadow_y=n | n Number of pixel the shadow is offset vertically. |
| shadow_color=r, g, b | Color of the shadow in red, green, blue, usually a grey tone. |
| outline= | 0 = off, 1 = draw the same text one pixel left, above, right, below normal text to increase visibility on transparent surfaces. |
| outline_color=r, g, b | Color of the outline in red, green, blue, usually a grey tone. |
method=ANIMATION
The parameter (numbers only) can be used to select one frame from a bitmap with multiple frames. Just suppose you want to have a paramter displayed that can assume values from 0 to 9. In that case, you can create a bitmap with 10 frames (e.g., 10 positions on some sort of display device like a thermometer). Now, depending on the parameter, this method lets you have a specific bitmap frame displayed in the status window at any given time.
| bitmap= | Bitmap filename. Individual frames are listed from top to bottom. Frame size is determined by the rectangle in which they are to be displayed within the status window. As always, bitmaps are rendered according to what transparency color has been chosen. |
| offset= | Offset, value added to the parameter. Default is 0. |
| div= | Divisor, value by which the parameter is divided after adding the offset value. Default is 1. |
| mod=n | Remainder of the division by n. The modulus can be determined only after the division by the denominator has been executed. This way, it is possible to first scale a parameter and then sort out and display specific individual digits from the numerator. An example: link_timer div 60 mod 60 will yield the minutes, which can then be displayed separately. |
| min= max= |
Minimum and maximum for the resulting parameter after the aforementioned operations have been performed. Default is 0 |
| frames= | Number of frames in the bitmap used for the range between minimum and maximum. |
| break1, frames2, break2, frames3= |
It is further possible to divide the range between minimum and maximum by break1 and break2 into up to three subcategories. This way, you can define how many of a bitmap’s frames are to be put into each of these ranges by using the frames, frames2 and frames3 keys, respectively. In effect, this allows display of a paramter as up to three value ranges each with a different number of frames. Values for break1 and break2 must be integers. Additionally, the following must apply: min <= break1 <= break2 <= max . |
method=SLIDER
ANIMATION with smooth transitions.
In addition to the parameters described for ANIMATION above, the following settings are available:
| scale= | Multiplier with which the parameter is factored before animation. This would, for instance, make it possible to multiply the value (0 or 1) of an LED by 10. Once that LED is turned on (i.e., switches its value from 0 to 1), it would then progress through 10 different brightness levels, each lasting n milliseconds as specified by the updatetime parameter (s. below). |
| stepsize, stepsize2, stepsize3= |
Size of the intervals at which the parameter is to transition from one value to the next, depending on the animation’s value range. |
| updatetime= | Number of milliseconds that are to pass before transitioning between two consecutive values. Let’s assume, you were to enter scale=10, stepsize=1 and updatetime=100 for the LED mentioned above. This means that when the LED switches from 0 to 1, the parameter would go from 0 to 10 within 1 second and would be animated accordingly. Just as described under ANIMATION above, the value can be recalculated prior to scaling, by setting “mod” and “div”. |
| start= | Value this method is initialized with. Default is 0. |
method=MOTION
Display similar to that of an animated GIF.
| bitmap= | Bitmap filename.The number of frames is determined by the size of the bitmap and that of the rectangle. |
| min= max= |
Minimum and maximum within which the parameter must fall for frames to be displayed. As soon as the parameter variable no longer remains within this range, the animation will stop. Default for min/max are approximately +/- 2 billion. |
| updatetime=n | Milliseconds per frame. As long as the parameter stays within the value range, a new frame in the appropriate transparency color is drawn at the position defined by the rectangle every n milliseconds – moving from top to bottom, starting with frame 1. |
| idleframe= | 0=none, 1=an idle frame is shown whenever the parameter exceeds max or drops below min. One way to make good use of this would be to define the idle frame as fully transparent (i.e., invisible). |
| pause=n | If n=0, there is no pause. If n is greater than 0, a pause of n milliseconds is made after the image sequence has concluded. While paused, the last frame is shown. However, in case an idle frame has been defined, the next frame following the idle frame (usually frame 1) is shown instead. |
| pauseframe= | Frame shown while animation is paused. This is a departure from standard behavior during pauses discussed immediately above. |
method=HISTORY
Display of history values.
| updatetime= | Number of milliseconds before history changes are scheduled. In the meantime, the arithmetic mean is calculated. |
| updateinterval= | Number of steps through which the history is to continue without assuming new values. Note that in this case, the value for inactivevalue is deployed. Default is 1. This is primarily intended for the sort of history whose graphical objects extend over several history elements. |
| inactivevalue= | See above. Default is 0. |
| historysize=n | Number of history values. Negative numbers indicate history elements will be drawn in opposite order. |
| max= | Maximum value. |
| maxadjusttime= | Number of milliseconds that all history values need to stay below maximum before the maximum itself is adjusted. If the current maximum is ever exceeded, it will be updated immediately. 0 means no adjustment (i.e., a fixed maximum). |
| minmax= | Minimum value below which the dynamic maximum can never drop. |
| maxsteps=x1,x2,…xN | Fixed values the dynamically adjusted maximum may assume (i.e., between which it can switch freely). |
| hdisp1..hdispN= | Methods (section names) for history values 1 to N (i.e., initial to most recent). History values are always processed from original to most recent, which allows newer values to be drawn over older ones. This also makes it possible that each history value can be shown by its own display method (such as ANIMATION). For example, this permits the creation of graphics with bars that come in different colors or widths. Another use would be to generate “graphics” that are not rectangular. However, the main area of application for this method will likely be the CPS rate. |
| maxdisp1, maxdisp2 | Display methods (section names) for the current history maximum. If a “-” sign is put before the disp-section name, the maximum will be drawn before displaying the history, otherwise after it. If a maxsteps list is being used, an index of current maximum values on the list (starting with 0) is shown rather than the actual maximum. In this fashion, each fixed maximum value can be assigned its own frame using, for example, the ANIMATION method. |
You can also use the history method to draw a line graph. In this case the hdisp1..N values are ignored. you need to specify the following parameters:
| rect=left, top, right, bottom | The rectangle used for the graph in the background surface. |
| line_size=n | Thickness of the line in pixels. |
| line_color=r, g, b | The color of the line. |
| line_cap=0..3 | How the end of the line is drawn: 0=flat, 1=square, 2=round, 3=triangle. |
| zero_blank=1 | Don’t draw line if value is zero. |
method=DELTA
Display for value differences (i.e., value changes over time).
| disp= | Method (section name) for displaying the value difference. |
| invert= | 0=normal, 1=leading sign is inverted (i.e., multiplied by -1). |
| start= | Initial value for calculating the first difference. |
| updatetime= | Number of milliseconds before a new value difference is calculated. |
method=ACTIVEAREA
This method is not used to display parameters but to define active areas for user interaction on the status window, which is also why there is no “value” key. An active area may assume four different states: inactive (meaning the mouse cursor is not on the area), mouse-over (the mouse cursor does rest on the area), clicked (the user is currently keeping the left mouse-button pressed ontop of part of the active area), and stand-by. Stand-by state can be canceled by another left-click.
| bitmap= | Filename of the optional bitmap. It may contain up to four different frames, one for each state. The shape of the area is determined according to the transparency color used, either by the rectangle or by the frame for the mouse-over state. Frames must be listed in the bitmap in the following order (from left to right): inactive, clicked, mouse-over, and stand-by. |
| regions= | Number of regions used for checking if the mouse cursor does currently rest on the area. 0=only the “rect”, 1=only the region derived from the mouse-over frame, 2=the region for the inactive frame if the area is inactive; otherwise the region for mouse-over is used. 3=as under 2, but the stand-by frame is used in stand-by state. Default is 1. |
| action= | exec (meaning execution of a program or display of a URL by mouse-click), sync (synchronizes the computer clock with ISDN time), disconnect (closes a connection on this COM port), minimize (closes a window), none (no action, which can be used for areas intended solely for information purposes), and toggle (switches individual disp-sections on or off). spdcmd sends a command, like SPD or CFO with the target parameter as arguments. change_skin selects a new skin. |
| parameters= |
Command line parameters for action=exec Directory shortcuts: For Windows XP, all shortcuts point to the same directory (C:\Program Files\cFosSpeed). |
| directory= | Working directory for the executable program under action=exec. |
| flags= | h=hidden (meaning the window of the program to be executed will not be shown), w=wait (defers execution of the program until connected online with the Dial-Up network), i=interactive (asks for confirmation to disconnect, connect to a URL, or execute a program), c=use the cFos directory as working directory for action=exec. |
| blend_time=n | Blend time (in milliseconds) between mouse-over and inactive frames. n=0 results in an switch rather than smooth blend over. Default is 0. |
| blend_in=n blend_out=m |
Initial alpha values n and m for blending purposes. For the frame you want blended in, the alpha channel is run up from n to the general alpha value. For the frame you want faded out, the alpha channel is gradually decreased from m to 0. Default is n=0, m=255. |
method=ACTIVATE
Used to activate other disp-sections subject to specific values.
| min= | Minimum value from which onward the respective disp-sections are activated. |
| max= | Maximum value up to which the respective disp-sections are to remain active. |
| target= | List of disp-sections to be activated with each entry separated by commas. If the value falls within the range between min and max, the sections are activated, otherwisedeactivated. |
| catch_mouse= | 1=mouse movements and clicks are not reported to subsequent ACTIVEAREAs (in the following disp-sections) if value is not within min and max, 0=default. |
method=FADER
Changes alpha_val of other sections according to specific values.
| min= | Minimum value of the parameter. |
| max= | Maximum value of the parameter. |
| min_alpha= | Minimum value of the targets alpha_val. |
| max_alpha= | Maximum value of the targets alpha_val. |
| start_alpha= | Initial alpha value. Default is min_alpha. |
| blend_time= | Number of milliseconds for full fading between min_alpha and max_alpha. |
| invert= | 1 = fade out, default is 0 = fade in. |
| target= | List of disp-sections to be faded with each entry separated by comma. |
Displaying Parameters for cFosSpeed
| open | 0, network port closed, 1 port open |
| rx/tx_speed | receive/transmit speed (0-100%) |
| total_rx_speed/total_tx_speed | total receive/transmit speed (0-100%) for all computers in local network |
| rx_scale/tx_scale | maximum (as determined so far, long-term) CPS rate for receive/transmit |
| curr_rx_scale/curr_tx_scale | maximum (as determined by last transfer) CPS rate for receive/transmit |
| cps | maximum of rx_cps and tx_cps |
| rx_cps | receive CPS rate |
| tx_cps | transmit CPS rate |
| rx/tx_cnt | packet count for received/transmitted packet |
| rx_data_cnt | packet count for packets (empty) TCP ACKs) |
| rx/tx_bytes | number of bytes received/transmitted |
| ping_time | ping time in msec. |
| tx_shape_effect | values from 0-9, indicating the advantages gained by transmit shaping |
| tx_shape_fast | packet count of high prioritized packets |
| rx_shape_level | values from 0-100%, performance gain by receiver shaping |
| tx_shape_level | values from 0-100%, performance gain by transmit shaping |
| tcp_cnt | number of current TCP connections |
| udp_cnt | number of current UDP connections |
| tcp_udp_cnt | number of current TCP and UDP connections (sum) |
| ping_val | 0=unknown, 1=ping time is low (good), 2=ping time is OK, 3=ping time is high |
| latency | 0=low latency is off, 1=low latency is on |
| latency_mode | 1=low latency mode, 2=normal mode |
| expired | 1 if license is expired, 0 otherwise |
| budget_level | value in range 0-100 % which indicates how much of the current budget is used. |
| slotn_name | Name for slot n (n can be 1-10) |
| slotn_speed | Rx, Tx or Rx+Tx speed for slot n, 0-100% (n can be 1-10) |
| variance | variance between measured ping times |
| variance_certainty | certainty of variance value being accurate |
| variance_index | processed variance values (to simplify display): 0: no data available 1-10: low (1) to high (10) variance, low certainty of this value 11-20: low (11) to high (20) variance, medium certainty 21-30: low (21) to high (30) variance, high certainty 31-40: low (31) to high (40) variance, very high certainty |
| msg_avail | 1 = new message(s) from cFosSpeed, 0 = no message |
Importing cFosSpeed Skins
Once you have downloaded a new cFosSpeed skin, you can switch to it as follows:
-
- Go to the cFosSpeed directory and create a new subdirectory with the name you wish to give that skin (e.g., c:\cfosspeed\c64\).
-
- Copy all new skin files to this directory. Please note that any set of skin files must contain a skin.ini file in addition to a number of *.bmp files.
-
- Now you can choose the desired skin in the cFosSpeed context menu under “Window settings -> COMx or NETx -> Select skin”.
Some Final Words on Skin Design and Testing
Test mode can be activated by setting the test_allowed=1 key in the [All] section of the CFOSSPEED.INI file. This will bring up the “Test skin” option in the context menu, which allows you to run a skin simulation on the status window.
To avoid problems with bitmap and INI file caching, we recommend you remove cFos from memory after making any changes to the bitmap or INI files. This can be done by entering CFOSDW.EXE -d, CFOSDNT.EXE -d, or CFOSSPEED.EXE -d, respectively, into the command line. All you have to do then is simply use CFOSDW.EXE, CFOSDNT.EXE or CFOSSPEED.EXE to relaunch the program.
Important: Please, make sure to take a look at our standard skin files – SKIN.INI, MON_SKIN.INI, and NET.INI! There you will find tons of examples in addition to some nifty tricks and tweaks used by our graphics artist.