Child pages
  • UI Customization


Contents




Starting with firmware version 10.1.21.0, the user interface on the phones can be completely customized. The colour and transparency values of all user interface elements, as well as all visible icons and images are open for modification. These extensive configuration options in turn allow you to create your own custom Themes that fit your company and brand identity.



The customization of the UI is split into four major parts:

  1. Icons & Images
  2. Colors & Tranparency
  3. XML Layout
  4. Font & Language



Icons & images

Custom Icons and Images are an essential part of the customization process and the snom phones allow to modify and change all of them.

Source Files

All snom icons are available and bundled with every firmware release. The Customization files can be downloaded on the release specific pages found here. Please note that each release contains customization files specific to that release and phone. Using customization files that do not match the firmware or phone will lead to issues.

Example
snomD385-10.1.42.14-SIP-r.bin requires snomD385-10.1.42.14-customizing.tar.gz


When the customizing.tar.gz is downloaded and extracted it should look like this. The actual content of the files depends on the phone and firmware version.


Replacing Icons & Images via Manual Upload

For testing or previewing purposes, as well as smaller installations, the phones support the upload of custom images via web interface. A general description how this works can be found here.

Replacing Icons & Images via Provisioning

For longterm solutions and large installations it is recommended to start provisioning the image files via xml and tar file. A detailed description how this method works can be found here. Below you will find a short summary of what needs to be done for devices with a color as well as a monochrome display.

Modifying and Provisioning Icons on Devices with a Monochrome Display

The Icons on monochrome devices are not stored in regular image files such as .png or .jpg but are Bitmap fonts that include every icon used in the UI. In the private use area of the unicode table starting at U+EB00 the snom icons are defined and can be directly modified with tools such as "Font Forge".

Opening the Bitmap font file with Font Forge should show a list of icons that are currently in use. The actual content of the files depends on the phone and firmware version.


Monochrome Icon Specification D305, D315, D345, D385, D745, D785, D3, D7

Context-Sensitive Key Icons 17x17 - Baseline x → 0 / y → -2

Titlebar Icons 17x17 - Baseline x → 0 / y → -2

Label Panel Icons 17x17 - Baseline x → 0 / y → -2

Maximum Size of Icons 32x32

Monochrome Icon Specification D120, D710, D712, D715, D725

Context-Sensitive Key Icons 7x7 - Baseline x → 0 / y → 0

Titlebar Icons 7x7 - Baseline x → 0 / y → 0

SmartLabel Icons 7x7 - Baseline x → 0 / y → 0

Maximum Size of Icons 32x32


When exporting the files from Font Forge please utilize the following settings below


After having exported the files create a tar file containing the newly created file with the name of the file that is going to be replaced

tar -cvf fonts.tar fontfile.bdf


The final step is then to include the tar file in your settings provisioning file with the type set to "font".

<?xml version="1.0" encoding="utf-8" ?>
<settings>
 <uploads>
  <file url="http://192.168.23.54:8080/fonts.tar" type="font" />
 </uploads>
</settings>

Modifying and Provisioning Icons on Devices with a Color Display

The icons and images on devices with a color display store their icons in PNG format. This allows for easy editing in pretty much all current image editors. However it is advised to optimize the png files with tools such as optipng, pngquant or pngcrush after editing and saving them to remove any redundant information.

Color Icon Specification

Context-Sensitive Key Icons 24x24px

SmartLabel Icons 24x24px & 18x18px

Titlebar Icons 18x18px

Menu Icons 18x18px

Call Screen Icons 18x18px - 48x48px

File Format: PNG


The name of newly created / modified Icon has to match the name and location of the icon that it is going to replace otherwise the changes will not be applied. When saving all file size, color profile and exif information should be discarded.

When creating a tar file for color display phones please be advised that the folder structure and the xml are not identical to the one created for devices with a monochrome display.

Navigate to the /bmp folder of the customizing.tar that was included with the Firmware Release. From this folder execute:

tar -cvf icons.tar colored

This should keep the folder structure intact and correctly extract all files and folders when provisioned. The XML settings file has to have its type set to "gui" and thereby allowing the phone to replace the current UI Icons with the newly created ones.

<?xml version="1.0" encoding="utf-8" ?>
<settings>
 <uploads>
  <file url="http://192.168.23.54:8080/icons.tar" type="gui" />
 </uploads>
</settings>

Replacing Icons & Images on Context-Sensitive Keys

The icons in the idle screen that are displayed in the Context-Sensitive Keys Area can be fully customized to load any icon or image regardless of what function is configured. This can be achieved by either modifying the Icon in the phone user interface Settings Preferences Function Keys → Context-Sensitive Keys → Key → Icon

or by modifying the setting value for

<gui_fkey1_icon_type>VALIDVALUE</gui_fkey1_icon_type>
<gui_fkey2_icon_type>VALIDVALUE</gui_fkey2_icon_type>
<gui_fkey3_icon_type>VALIDVALUE</gui_fkey3_icon_type>
<gui_fkey4_icon_type>VALIDVALUE</gui_fkey4_icon_type>

Setting Values

The setting supports loading icons from an external URL for color phones in addition to the names that are listed under Settings → Preferences → Function Keys → Context-Sensitive Keys → Key → Icon

On the left are Context-Sensitive Keys with their default icons while on the right they were modified via phone user interface configuration.

Hiding the Label / Icons on Context-Sensitive Keys

It is possible to hide the Label for the Context-Sensitive Keys by configuring the following setting to OFF

<text_softkey>VALIDVALUE</text_softkey>


On Color phones the result is that the label text for all Context-Sensitive Keys is hidden.


Monochrome Display Phones

The behavior on monochrome devices is different. The setting will toggle between icon only and text only view.


Utilizing Custom Icons in XML files

In order to use custom icons in XML files, icon names can be used to directly add or replace icons in those.

 Click here to expand...
<?xml version="1.0" encoding="UTF-8"?>
<IPPhoneMenu line_height="60">
  <Title>Menu</Title>
  <!-- The maximum height of an image is defined by the line_height (all) or
  custom_line_height (one specific) menuitem or menu where it is located in.
  In this example one MenuItem custom line height was set to 80px -->
  <MenuItem custom_line_height="80">
    <Name>Custom Icon via URL</Name>
    <Icon>http://192.168.100.100/png/example.png</Icon>
    <URL>http://192.168.100.100/xml/example.xml</URL>
  </MenuItem>
  <MenuItem>
    <Name>Custom Icon via Name</Name>
    <IconType>$(icon_type_enum:kIconTypeContactStateUnknown)</IconType>
    <ExtraIconType>$(icon_type_enum:kIconTypePhoneNumberCategoryMobile)</ExtraIconType>
    <ExtraIconType2>$(icon_type_enum:kIconTypePhoneNumberCategoryHome)</ExtraIconType2>
    <URL>http://192.168.100.100/xml/example.xml</URL>
  </MenuItem>
  <SoftKeyItem>
    <Name>F1</Name>
    <Label>ExampleOne</Label>
    <Icon>kIconTypeFkeySearch</Icon>
    <SoftKey>F_CANCEL</SoftKey>
  </SoftKeyItem>
  <SoftKeyItem>
    <Name>F2</Name>
    <Icon>kIconTypeFkeyAdrBook</Icon>
    <Label>ExampleTwo</Label>
    <SoftKey></SoftKey>
  </SoftKeyItem>
  <SoftKeyItem>
    <Name>F3</Name>
    <Icon>kIconTypeFkeyDial</Icon>
    <Label>ExampleThree</Label>
    <SoftKey></SoftKey>
  </SoftKeyItem>
  <SoftKeyItem>
    <Name>F4</Name>
    <Icon>kIconTypeFkeyStatus</Icon>
    <Label>ExampleFour</Label>
    <SoftKey></SoftKey>
  </SoftKeyItem>
</IPPhoneMenu>

The XML above should show you the following results.

Monochrome Display Phones

Phones with a primary monochrome display do not support loading Icons or Images from an external URL. These devices only support loading the existing Icons on the phone via Icon Name

Utilizing Custom Icons & Labels in XML Definitions

XML Definitions support showing custom icons and labels when configured for both monochrome and color phones. Below is an example of a settings file where the phone is setup as a Hotel Room Phone with four Speed Dials that have a custom icon and label

 Click here to expand...
Settings XML
<settings>
<phone-settings e="2">
<gui_fkey1>
 <initialization>
  <variable name='label' value='Housekeeping'/>
  <variable name='icon' value='kIconTypeFkeyHousekeeping'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="110011" when="on press"/>
 </action>
</gui_fkey1>
<gui_fkey2>
 <initialization>
  <variable name='label' value='Room Service'/>
  <variable name='icon' value='kIconTypeFkeyRoomService'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="220022" when="on press"/>
 </action>
</gui_fkey2>
<gui_fkey3>
 <initialization>
  <variable name='label' value='Valet'/>
  <variable name='icon' value='kIconTypeFkeyValet'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="330033" when="on press"/>
 </action>
</gui_fkey3>
<gui_fkey4>
 <initialization>
  <variable name='label' value='Front Desk'/>
  <variable name='icon' value='kIconTypeFkeyFrontDesk'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="440044" when="on press"/>
 </action>
</gui_fkey4>
</phone-settings>
</settings>

Replacing Icons on Monochrome Displays

Showing Icons by utilizing unicode characters

All phones with a monochrome display show icons on the monochrome display by loading a font that contains a set of icons in a specific unicode area. This means that it is possible to combine Icons and text in a label setting or xml tag. Detailed Instructions on how to do this can be found here.

Utilizing Icon names instead of unicode characters


Replacing the Account Icon with a Custom Photo

The default Account Icon can be updated to show a Custom Photo in different ways.


Each method has a separate priority and is overwritten if a method is configured that has a higher priority.

  1. Picture information that is sent via vCard e.g. Broadsoft

  2. Picture that is configured for user_pic

  3. Picture from Local Directory Contact that matches configured Identity

Picture Information via vCard

If the snom phone receives a vCard containing a URL to a valid picture URL it will automatically utilize the supplied picture in the vCard and display it in the idle and call screen. This is currently only possible when a valid XMPP ID is configured for server type Broadsoft.

Picture Information via user_pic

All color phones support loading and displaying a user picture from a valid picture URL that is then displayed in the idle and call screen. This can be achieved by configuring:

<user_pic idx="INDEX">VALIDVALUE</user_pic>


If the phone can successfully fetch a picture from the url that was configured in the setting, it will send a header with every SIP Invite that points to the picture, so that the called party can display the user picture from the incoming call.

Call-Info: <http://192.168.23.54:8080/picture.png>;purpose=icon

Picture Information from Local Directory

The snom color phones also support a purely cosmetic approach to adding a user picture. This method can be utilized to differentiate several different users locally on the phone without sending any identifying photo information in a call. A detailed description of this feature can be found here. A quick description can be found below

In the web interface browse Identity Photo → Browse, select a picture and press Apply. As soon as the picture is correctly loaded it will be displayed in the idle screen for this specific identity.

Alternatively this can also be done by

  1. Create or Provision a contact in your local directory that matches your local identity. The number of that contact has to be in the format user_name@user_host e.g. 10042389@snom.com
  2. Add / Provision a photo for that contact
  3. The phone will now automatically match the created contact with any configured identity and if the value in the user_name and user_host setting of any identity correctly match the number of the created contact, the phone will display the picture from contact in the idle screen

Replacing the Background Image via Setting

In the following example the background of the phone has been changed with a new image by providing the URL to the server where the phone can find the image

This was done by modifying the setting:

<custom_bg_image_url>VALIDVALUE</custom_bg_image_url>


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 either change this setting via provisioning by adding the <custom_bg_image_url> tag with a valid value to your xml file or by changing it manually via 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.

Firmware Version < 10.1.33.33

In order to see the background image prior to version 10.1.33.33 the backgrund color has to be set to fully transparent.

This has to be done because the background image is located on the layer beneath the standard background color. It can be achieved by either provisioning an alpha value of 0 for the background color:

<background_color>242 242 242 0</background_color>

or by manually editing the alpha value of the setting in the web interface:


Firmware Version >= 10.1.33.33

Starting from firmware version 10.1.33.33, the background color transparency will adopt automatically to the background image shown on the phone. However it will not be fully transparent. In order to achieve full transparency the setting <background_color> still needs to have an alpha value of 0.

Background Image Specifications

In order for the the background image to be properly displayed it has to be saved in png, jpg, gif, bmp or tga. We strongly suggest to use .png files and optimize them with "optipng" in order to reduce file size and improve performance when drawing.


To find a selection of pictures in the respective format of different phone models...

 Click here to expand...


Phone model

Resolution

Examples
D735 / D765320 x 240

D375 / D385 / D785480 x 272

D717

FW >= 10.1.41.1

426x240

FW < 10.1.41.1

How to prepare images for the D717 display


Colors & Transparency

From Firmware Version 10 on, the color phone user interface can be fully modified in regards to Color & Transparency. This allows tuning the user interface for perfect legibility, clarity, color preference and to further adopt e.g. the corporate identity of a company to the phone.















New settings parameters for GUI customisation

Related Settings

  • To see a list of Settings...

     Click here to expand...


    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

New tab Appearance in the phone preferences



XML Layout

Invert Background of a text line on Monochrome Devices

By adding the XML tag <InvertColor> to a <MenuItem> with the value of 1, the background of the line is inverted as well as all elements inside the line.

<?xml version="1.0" encoding="UTF-8"?>
<IPPhoneMenu speedselect="off">
 <MenuItem name="A">
  <InvertColor>1</InvertColor>
 </MenuItem>
 <MenuItem name="Alice">
 </MenuItem>
 <MenuItem name="Alfred">
 </MenuItem>
 <MenuItem name="Andy">
 </MenuItem>
 <MenuItem name="B">
  <InvertColor>1</InvertColor>
 </MenuItem>
 <MenuItem name="Bob">
 </MenuItem>
 <MenuItem name="Barney">
 </MenuItem>
 <MenuItem name="Becky">
 </MenuItem>
</IPPhoneMenu>



Font & Language

Replacing the Font in the User Interface via Provisioning

The fonts on all snom phones are freely customizable and can be changed via provisioning. Please be aware that if the currently used TrueType Font or Bitmap Font is replaced with a custom one, certain inconsistencies might occur when Text is rendered, since the user interface is optimized for one specific TrueType font.

In order to replace any font a tar file has to be created containing the new font, named after the of the old font that is going to be replaced

tar -cvf fonts.tar fontfile.ttf

This tar file then needs to be referenced in your xml file so that it properly loads when the phone restarts.

<?xml version="1.0" encoding="utf-8" ?>
<settings>
 <uploads>
  <file url="http://192.168.23.54:8080/fonts.tar" type="font" />
 </uploads>
</settings>

Replacing a language with its translations via Provisioning

Any language and its translations can be changed via Provisioning of the specific language files. This method is recommended if you want to make major changes to a lot of translations and apply the specific translations to certain phone models.

Create

A more detailed explanation of this can be found here

Replacing individual translations via Provisioning

Any text on the phone can be customized via settings. Similar to the provisioning of regular settings, the translation keys can be provisioned in the settings and dynamically updated. This method is recommended if you want to optimize certain texts without having to constantly maintain the complete language from version to version. A detailed explanation of this feature can be found here

Masking Identity Information in the Idle / Call screen and for Call Forwarding Targets

The Identity relevant information in the Idle / Call screen and for Call Forwarding Targets can be masked by changing the following settings

<user_idle_text idx="INDEX">VALIDVALUE</user_idle_text>
<user_idle_number idx="INDEX">VALIDVALUE</user_idle_number>
<user_idle_cfwd idx="INDEX">VALIDVALUE</user_idle_cfwd>

The call screen will display and replace the values from user_idle_text and user_idle_number but not actually utilize these for the call flow. These settings have a purely cosmetic effect and don't affect the SIP Flow in any way.


Default view


with user_idle_text changed


with user_idle_number changed


with user_idle_cfwd changed



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

 Click here to expand...
<?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


 Click here to expand...
<?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>