Changing program skin and texts

 

Changing program skin and texts is currently not available on Linux and Mac versions of ISL Light.

 

There is a possibility to customize program skin and texts, with certain limitations. ISL Light GUI supports customization of all bitmaps and all texts that are translatable (in ISL Light 3.2.0a all but text in settings). Please note that the skin engine does not support positioning of controls. Keep in mind that this is the first version that supports GUI customization and the procedure is not user-friendly, but it shall be improved in the future.


Important: Please note that in its current form, this customization procedure is not intended for the novice users. 


Please download the following ZIP file: original_skin.zip

Extract the ZIP file to a certain location, e.g. c:\myskin.

This file contains a few files, but they can be divided into three main sections:

  1. skin_data.txt - (this file contains instructions on how to draw bitmaps to a GUI)
  2. custom_texts.ini - (this file contains custom texts that will be used in a customized GUI - when a text is defined within this file, the original translation is ignored)
  3. <various bitmap files> - (images that are used by skin_data.txt)

 

Editing skin_data.txt

Skinning a particular dialog in ISL Light involves these two steps:

  1. define (load) textire files
  2. list BitBlt commands that will make the final dialog surface

 

Textures

A texture is loaded using the command texture.

texture [id_of_texture] [file_name.bmp] [width_i],[height_i] [width_s],[height_s]

 

String id_of_texture will define this texture in all BitBlt commands and file_name.bmp must exist in the skin zip package. Parameters width_i and height_i define width and height of smallest image/sprite in bitmap file in case the bitmap defines image list. Parameters width_s and height_s define offset that is used depending on drawn item state - e.g. buttons can be normal, focused, selected, pressed or disabled and those states are drawn with the help of parameters width_s and height_s. Special keywords Width and Height can be used - they define full width and height of a bitmap.

 

Examples:

#normal buttons that are drawn depending on state can
#use the definition below
texture 200 btn-ctrl-dsk-small.bmp Width/5,Height Width/5,0

 

#Texture for titlebar will use the syntax below.
#Three states define Client, Desk and generic dialog titlebar.
texture 1 titlebar.bmp Width/3,Height Width/3,0

 

#Icons in titlebar do not define special states, but the icons
#are stored in image list
texture 101 ik-exit.bmp Width/4,Height 0,0

 

BitBlt commands

Final look of a dialog is defined through a series (a batch) of Blt commands. Later commands can over-paint previous commands.

Blt [destination_dialog_control_batch] [id_of_texture] [Bit|Stretch|Center|Alpha] [destination_coordinates] [source_coordinates]

Some additional keywords can be used with BitBlt commands - bmWidth and bmHeight define texture's width and height, Width and Height define dialog/control's width and height.

 

Command Alias can be used to copy current batch of BitBlt commands of a particular dialog/control to a new batch.

 

You can use the define command to make the modification of the skin easier - you only modify a value in one place and it reflects where ever it is used later on, e.g.:

define BOFF 9
define TOP_OFF 28
Blt nca-dlg-norm 2 Stretch Width-BOFF,TOP_OFF,BOFF,Height-BOFF-TOP_OFF bmWidth-BOFF,0,BOFF,bmHeight-BOFF

 

Parameter destination_coordinates contains x, y and width and height of the destination rectangle. Parameter source_coordinates contains x, y of the source rectangle. With Stretch block transfer width and height are also mandatory.

 

A batch definition for a dialog must be separated into two parts - a part that will draw the non-client area (the batch name must start with nca-) and a batch that will draw the client area (name must start with ca-).

 

The best way to start is to extract the contents of the default skin.zip and make simple changes to certain bitmaps, just to see how it all works. Then you can change certain entries in the skin_data.txt file and see the effects of those changes.

Please note: You need to keep the original image format of the bitmap files, e.g. 32-bit color depth - be careful when making and saving your changes!

When you wish to see the effects of your changes, please continue to Testing and using skin customization below.

 

Editing custom_texts.ini

First you should obtain the language files for the ISL Light and for all the plugins. You should start ISL Light Desk and obtain a session code. Then look into the following files:

• $HOME\Application Data\ISL Online Cache\ISL Light Desk\y\translations\LangAll.ini - language file for the ISL Light main program, $HOME represents user's home directory, e.g. C:\Documents and Settings\john, y is an integer number that represents the program instance - if you only have one ISL Light Desk running at the moment, it should be 1)

• $HOME\Application Data\ISL Online Cache\ISL Plugins\desktop_x_y_z_win32.trans - language file for the desktop sharing plugin, x, y and z represent the plugin version number, e.g. desktop_1_2_0b_win32.trans)

• $HOME\Application Data\ISL Online Cache\ISL Plugins\file_transfer_x_y_z_win32.trans - language file for the file transfer plugin

• $HOME\Application Data\ISL Online Cache\ISL Plugins\audio_x_y_z_win32.trans - language file for the audio plugin

• $HOME\Application Data\ISL Online Cache\ISL Plugins\video_x_y_z_win32.trans - language file for the video plugin

• $HOME\Application Data\ISL Online Cache\ISL Plugins\recording_x_y_z_win32.trans - language file for the recording plugin

Now you can add certain entries into the custom_texts.ini using the same format as the files above.

Important: You must specify the desired alias for English language and for any additional language that you need to. If the alias is not specified for English language, it will be ignored!

For example, let us say you want to change the following text

 dsk_dis_IDC_DESCRIPTION_TEXT=<b>Get the session code</b> and tell it to the client.

in ISL Light Desk to

 dsk_dis_IDC_DESCRIPTION_TEXT=<b>Get mycompany support code</b> and tell it to the client.

Your custom_texts.ini file would look like this:

[en]
dsk_dis_IDC_DESCRIPTION_TEXT=<b>Get mycompany support code</b> and tell it to the client.

 

If you wish to change ISL Light Desk and ISL Light Client window title, you would use:

[en]
generic_TITLE_DESK=MyCompany Desk
generic_TITLE_CLIENT=MyCompany Client

 

If you wish to change all ISL Light texts to MyCompany quickly (without having to browse through all language files and check which aliases need to be changed), you can use this trick:

[light]
change=MyCompany
 

Testing and using skin customization

You can test your skin customization through a special command line argument that is used to specify the custom skin location:

 --skin-dir <path>

Please refer to the Command line arguments chapter for more information on how to use them.

E.g. if you have extracted the default skin.zip file to c:\myskin:

ISLLightDesk.exe --skin-dir c:\myskin

 

When you are happy with your customization, you need to create a ZIP file that contains all the needed files in c:\myskin directory (flat structure, no folders - i.e. skin_data.txt, custom_texts.ini and all needed bitmap files) - let us say you name that ZIP file custom_skin.zip.

 

Server licence users: The procedure for server licence differs from the procedure for hosted service users - please continue to this topic


Hosted service users need to send an e-mail to support@islonline.com with the following format (do not forget to attach the custom_skin.zip file!):

subject: Hosted service - customize skin and texts <your company name>

body: Please customize ISL Light GUI skin and texts for our company. Our account is <your ISL Online account e-mail>.

attachment: <custom_skin.zip>

We shall create a new customization for you and reply to your e-mail with the instructions on how to use it as soon as possible.


Was this article helpful?