Child pages
  • GUI - Customization


Contents

Starting with firmware version 10.1.21.0, the graphical user interface on the phones can be completely customized. It is now possible to change every element of the user interface. The colour and transparency values of all user interface elements, as well as all visible icons can be modified, replaced and hidden, if desired. These extensive configuration options in turn allow you to create your own custom Themes that fit your company and brand identity.


Examples of what is possible:




Personal background image

In the first example of the "Dream Tree Hotels", the background colour of the screen has been exchanged by an image. This can be easily done by providing the URL to the server where the phone can find the image. 

<custom_bg_image_url perm="PERMISSIONFLAG">VALIDVALUE</custom_bg_image_url>

Correct Path to Background Image: 

  • To setup your own background image on the phone, a reachable valid URL to an image has to be set in this setting. 
    As soon as the setting is changed, the background image will be replaced. 

  • You can change this setting via setting URL or over WUI → Preferences→ Appearance.

     


  • If this setting is empty or the URL or the image is wrong, then the default phone background image will be used.

  • Example: http://<IP>/alternate_background.png 
                    (http://192.168.1.1/alternate_background.png)

    The image needs to be stored on a Webserver, because we use a HTTP Request for the download.

Backgrund colour to be set to invisible

To see the Background Image, you currently have to set the standard background Color to zero, because the background pictures are located in the background layer of the standard background colour.

e.g. background_color=242 242 242 0 

 

Starting from firmware version 10.1.33.33, the background color transparency will adopt automatically to the background image shown on the phone.

Image specifications

The background image has to be saved in PNG format, and needs to fit the size of the screen.

Phone model

File type

Image size in pixel

Example image
D735.png320 x 240

D765.png320 x 240

D785.png480 x 272

D375.png480 x 272

D385.png480 x 272

D717.png426x240
Starting from FW: 10.1.41.1

The following article applies before this point: How to prepare images for the D717 display


Change colours and transparencies of other GUI elements

In order to ensure a perfect visibility of all information displayed on the screen, and to furthermore adopt e.g. the corporate identity of a company, you can now also change the colours of all other GUI elements. 














Image 1: New settings parameters for GUI customisation

Related Settings

Setting nameValid valuesDefault valueDescription
titlebar_text_colorA group of 4 numbers, each >=0 and <=255.
red green blue alpha
(an alpha value of 255 means fully visible while 0 means fully transparent)
51 51 51 255Controls the color and opacity of the text in the titlebar e.g. Date, Time, Title, etc.
text_color51 51 51 255Controls the color and opacity of the main text e.g. Menu, Idle, and all other screens main text
subtext_color123 124 126 255Controls the color and opacity of the subtext e.g. Menu, Idle, and all other screens subtext
extratext_color123 124 126 255Controls the color and opacity of the first row of text displayed on the very right in a Menu e.g. Call History Date & Time
extratext2_color123 124 126 255Controls the color and opacity of the second row of text displayed on the very right in a Menu e.g. Call History Date & Time
titlebar_background_color226 226 226 255Controls the color and opacity of the titlebar background
background_color242 242 242 255Controls the color and opacity of the background in every screen
fkey_background_color242 242 242 255Controls the color and opacity of the context-sensitive key background
fkey_pressed_background_color61 133 198 255Controls the color and opacity of the context-sensitive key background when a key is being pressed
fkey_separator_color182 183 184 255Controls the color and opacity of the context-sensitive key separator line
fkey_label_color123 124 126 255Controls the color and opacity of the text used in the context-sensitive key area
fkey_pressed_label_color242 242 242 255Controls the color and opacity of the text used in the context-sensitive key area when a key is being pressed
selected_line_background_color255 255 255 255Controls the color and opacity of the select line background e.g. in Menus or any screen with selectable Items
selected_line_indicator_color61 133 198 255Controls the color and opacity of the indicator at the very left of a selected line e.g. in Menus or any screen with selectable Items
selected_line_text_color61 133 198 255Controls the color and opacity of text in a selected line e.g. in Menus or any screen with selectable Items. Also controls the color of the current character while cycling through the different options in an input window
line_background_color242 242 242 0Controls the color and opacity of the background for every Menus or Menu Items line or any Item in a list
line_separator_color226 226 226 255Controls the color and opacity of the separator line between Menus or Menu Items and is only shown when more than one one selectable Item is available
scrollbar_color182 183 184 255Controls the color and opacity of the scrollbar shown in any screen
cursor_color61 133 198 255Controls the color and opacity of the cursor shown in screens with an input
status_msgs_background_color242 242 242 255Controls the color and opacity of the background for status messages which appear in the idle and call screens. This value is also applied to the background of the Volume Overlay.
status_msgs_border_color182 183 184 255Controls the color and opacity of the border for status messages which appear in the idle and call screens. This value is also applied to the border of the Volume Overlay.
smartlabel_background_color242 242 242 255Controls the color and opacity of the SmartLabel background
smartlabel_pressed_background_color61 133 198 255Controls the color and opacity of the SmartLabel background when a function key is pressed
smartlabel_separator_color182 183 184 255Controls the color and opacity of the separator line between each SmartLabel Function Key
smartlabel_label_color123 124 126 255Controls the color and opacity of Text used in the SmartLabel
smartlabel_pressed_label_color242 242 242 255Controls the color and opacity of Text used in the SmartLabel when a Function Key is pressed

You can define the value to each setting by using the web user interface (WUI) (from 10.1.25.0 onwards), or by including the parameters into your auto-provisioning configuration file.


FW: 10.1.25.0FW: 10.1.42.10


Image 2: New tab Appearance in the phone preferences


Creating your own color theme

Since every element in the user interface can be customized, it is possible to create complete themes that transform the phone from its original look & feel to a visually new user interface.

Dark Theme

<?xml version="1.0" encoding="utf-8"?>
<settings>
<phone-settings>
  <!-- When the background image is set, it automatically applies alpha changes to all elements. 
  Therefore it has to be listed at the beginning, so that all styles afterwards correctly apply-->
  <custom_bg_image_url perm=""></custom_bg_image_url>
  <!-- Background color is set to be not transparent because no background image is configured -->
  <background_color perm="">43 49 56 255</background_color> 
  <titlebar_text_color perm="">242 242 242 255</titlebar_text_color>
  <titlebar_background_color perm="">43 49 56 255</titlebar_background_color>
  <text_color perm="">242 242 242 255</text_color>
  <subtext_color perm="">224 224 224 255</subtext_color>
  <extratext_color perm="">158 158 158 255</extratext_color>
  <extratext2_color perm="">158 158 158 255</extratext2_color>
  <fkey_background_color perm="">43 49 56 255</fkey_background_color>
  <fkey_pressed_background_color perm="">61 133 198 255</fkey_pressed_background_color>
  <fkey_separator_color perm="">70 90 120 255</fkey_separator_color>
  <fkey_label_color perm="">224 224 224 255</fkey_label_color>
  <fkey_pressed_label_color perm="">242 242 242 255</fkey_pressed_label_color>
  <line_background_color perm="">242 242 242 0</line_background_color>
  <selected_line_background_color perm="">50 60 80 255</selected_line_background_color>
  <selected_line_indicator_color perm="">61 133 198 255</selected_line_indicator_color>
  <selected_line_text_color perm="">61 133 198 255</selected_line_text_color>
  <line_separator_color perm="">70 90 120 255</line_separator_color>
  <scrollbar_color perm="">70 90 120 255</scrollbar_color>
  <cursor_color perm="">61 133 198 255</cursor_color>
  <status_msgs_background_color perm="">43 49 56 255</status_msgs_background_color>
  <status_msgs_border_color perm="">70 90 120 255</status_msgs_border_color>
  <!-- Settings for SmartLabel -->
  <smartlabel_background_color perm="">43 49 56 255</smartlabel_background_color>
  <smartlabel_pressed_background_color perm="">61 133 198 255</smartlabel_pressed_background_color>
  <smartlabel_separator_color perm="">70 90 120 255</smartlabel_separator_color>
  <smartlabel_label_color perm="">224 224 224 255</smartlabel_label_color>
  <smartlabel_pressed_label_color perm="">242 242 242 255</smartlabel_pressed_label_color>
</phone-settings>
</settings>


Colorful Theme



<?xml version="1.0" encoding="utf-8"?>
<settings>
<phone-settings>
  <!-- When the background image is set, it automatically applies alpha changes to all elements. 
  Therefore it has to be configured at the beginning so that all styles afterwards correctly apply-->
  <custom_bg_image_url perm="">http://192.168.0.1/background.png</custom_bg_image_url>
  <!-- Background color has to be transparent because a background image is configured -->
  <background_color perm="">0 0 0 0</background_color>
  <titlebar_text_color perm="">242 242 242 255</titlebar_text_color>
  <titlebar_background_color perm="">43 49 56 40</titlebar_background_color>
  <text_color perm="">242 242 242 255</text_color>
  <subtext_color perm="">224 224 224 255</subtext_color>
  <extratext_color perm="">224 224 224 255</extratext_color>
  <extratext2_color perm="">224 224 224 255</extratext2_color>
  <fkey_background_color perm="">43 49 56 40</fkey_background_color>
  <fkey_pressed_background_color perm="">43 49 56 140</fkey_pressed_background_color>
  <fkey_separator_color perm="">0 0 0 0</fkey_separator_color>
  <fkey_label_color perm="">224 224 224 255</fkey_label_color>
  <fkey_pressed_label_color perm="">224 224 224 255</fkey_pressed_label_color>
  <line_background_color perm="">0 0 0 0</line_background_color>
  <selected_line_background_color perm="">43 49 56 40</selected_line_background_color>
  <selected_line_indicator_color perm="">61 133 198 255</selected_line_indicator_color>
  <selected_line_text_color perm="">61 133 198 255</selected_line_text_color>
  <line_separator_color perm="">0 0 0 0</line_separator_color>
  <scrollbar_color perm="">61 133 198 255</scrollbar_color>
  <cursor_color perm="">61 133 198 255</cursor_color>
  <status_msgs_background_color perm="">61 133 198 255</status_msgs_background_color>
  <status_msgs_border_color perm="">61 133 198 255</status_msgs_border_color>
  <!-- Settings for SmartLabel -->
  <smartlabel_background_color perm="">43 49 56 40</smartlabel_background_color>
  <smartlabel_pressed_background_color perm="">43 49 56 140</smartlabel_pressed_background_color>
  <smartlabel_separator_color perm="">0 0 0 0</smartlabel_separator_color>
  <smartlabel_label_color perm="">242 242 242 255</smartlabel_label_color>
  <smartlabel_pressed_label_color perm="">242 242 242 255</smartlabel_pressed_label_color>
</phone-settings>
</settings>


Industrial Theme



<?xml version="1.0" encoding="utf-8"?>
<settings>
<phone-settings>
  <!-- When the background image is set, it automatically applies alpha changes to all elements. 
  Therefore it has to be configured at the beginning so that all styles afterwards correctly apply-->
  <custom_bg_image_url perm="">http://192.168.0.1/background.png</custom_bg_image_url>
  <!-- Background color has to be transparent because a background image is configured -->
  <background_color perm="">0 0 0 0</background_color>
  <titlebar_text_color perm="">242 242 242 255</titlebar_text_color>
  <titlebar_background_color perm="">43 49 56 40</titlebar_background_color>
  <text_color perm="">242 242 242 255</text_color>
  <subtext_color perm="">224 224 224 255</subtext_color>
  <extratext_color perm="">224 224 224 255</extratext_color>
  <extratext2_color perm="">224 224 224 255</extratext2_color>
  <fkey_background_color perm="">43 49 56 40</fkey_background_color>
  <fkey_pressed_background_color perm="">43 49 56 140</fkey_pressed_background_color>
  <fkey_separator_color perm="">0 0 0 0</fkey_separator_color>
  <fkey_label_color perm="">224 224 224 255</fkey_label_color>
  <fkey_pressed_label_color perm="">224 224 224 255</fkey_pressed_label_color>
  <line_background_color perm="">0 0 0 0</line_background_color>
  <selected_line_background_color perm="">43 49 56 40</selected_line_background_color>
  <selected_line_indicator_color perm="">61 133 198 255</selected_line_indicator_color>
  <selected_line_text_color perm="">61 133 198 255</selected_line_text_color>
  <line_separator_color perm="">0 0 0 0</line_separator_color>
  <scrollbar_color perm="">61 133 198 255</scrollbar_color>
  <cursor_color perm="">61 133 198 255</cursor_color>
  <status_msgs_background_color perm="">61 133 198 255</status_msgs_background_color>
  <status_msgs_border_color perm="">61 133 198 255</status_msgs_border_color>
  <!-- Settings for SmartLabel -->
  <smartlabel_background_color perm="">43 49 56 40</smartlabel_background_color>
  <smartlabel_pressed_background_color perm="">43 49 56 140</smartlabel_pressed_background_color>
  <smartlabel_separator_color perm="">0 0 0 0</smartlabel_separator_color>
  <smartlabel_label_color perm="">242 242 242 255</smartlabel_label_color>
  <smartlabel_pressed_label_color perm="">242 242 242 255</smartlabel_pressed_label_color>
</phone-settings>
</settings>



Related Links: