Child pages
  • UI Customization

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

English

Table of 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.

Code Block
titleExample
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.


Info
titleMonochrome 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


Info
titleMonochrome 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

Code Block
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".

Code Block
<?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.

Info
titleColor 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:

Code Block
tar -cvf icons.tar colored

This should keep the folder structure intact and correctly extract all files and folders when provisioned.

Info
titleSince firmware version 10.1.53.0

You can find the new subfolders "Dark", "Colorful" and "Industrial" inside the colored folder. These folders are containing the icons for the new added themes. The old subfolders are still containing the icons for the default color theme "Light", which has no additional folder. Furthermore the custom images will now be extracted to a different location on the phone than before ("/snom/html/custom_image_upload") to avoid overwriting original icons. To save space on the phone only the exchanged icons should be added to the new tar file. You can do this by using the "–newer" option to add only files that are newer than the date that is given in the option. From the /bmp folder execute (but insert the right date instead of the template):

Code Block
tar -cvf icons.tar colored --newer='YYYY-MM-DD'


This is the current icon directory structure:

Code Block
titleIcon Directory Structure
collapsetrue
├── call_icons
│   ├── 18x18
│   ├── 24x24
│   ├── 36x36
│   └── 48x48
├── call_overlay
│   ├── 36x36
│   ├── 48x48
│   ├── 60x60
│   ├── 72x72
│   ├── 84x84
│   └── 96x96
├── circle_overlays
│   ├── 36x36
│   ├── 48x48
│   ├── 60x60
│   ├── 72x72
│   ├── 84x84
│   └── 96x96
├── contact_state_icons
│   ├── 18x18
│   ├── 24x24
│   ├── 36x36
│   └── 48x48
├── contact_state_overlays
│   ├── 36x36
│   └── 48x48
├── contact_type_icons
│   ├── 18x18
│   ├── 24x24
│   ├── 36x36
│   └── 48x48
├── error_icons
│   ├── 18x18
│   ├── 24x24
│   ├── 36x36
│   ├── 48x48
│   ├── 60x60
│   ├── 72x72
│   ├── 84x84
│   └── 96x96
├── extraicontype_icons
│   └── 18x18
├── fkey_icons
│   ├── 18x18
│   └── 24x24
├── icontype_icons
│   ├── 24x24
│   ├── 36x18
│   └── 36x36
├── identity_state_icons
│   ├── 18x18
│   ├── 24x24
│   ├── 36x36
│   └── 48x48
├── input_info_images
├── other_images
├── settings_window_icons
│   └── 24x24
├── theme_colorful
│   ├── call_icons -> ../call_icons
│   ├── call_overlay -> ../call_overlay
│   ├── circle_overlays -> ../circle_overlays
│   ├── contact_state_icons -> ../contact_state_icons
│   ├── contact_state_overlays -> ../contact_state_overlays
│   ├── contact_type_icons -> ../contact_type_icons
│   ├── error_icons
│   │   ├── 18x18
│   │   ├── 24x24
│   │   ├── 36x36
│   │   ├── 48x48
│   │   ├── 60x60
│   │   ├── 72x72
│   │   ├── 84x84
│   │   └── 96x96
│   ├── extraicontype_icons
│   │   └── 18x18
│   ├── fkey_icons
│   │   ├── 18x18
│   │   └── 24x24
│   ├── icontype_icons
│   │   ├── 24x24
│   │   ├── 36x18
│   │   └── 36x36
│   ├── identity_state_icons -> ../identity_state_icons
│   ├── input_info_images
│   ├── other_images
│   ├── settings_window_icons
│   │   └── 24x24
│   └── titlebar_icons
│       └── 18x18
├── theme_dark
│   ├── call_icons -> ../call_icons
│   ├── call_overlay -> ../call_overlay
│   ├── circle_overlays -> ../circle_overlays
│   ├── contact_state_icons -> ../contact_state_icons
│   ├── contact_state_overlays -> ../contact_state_overlays
│   ├── contact_type_icons -> ../contact_type_icons
│   ├── error_icons
│   │   ├── 18x18
│   │   ├── 24x24
│   │   ├── 36x36
│   │   ├── 48x48
│   │   ├── 60x60
│   │   ├── 72x72
│   │   ├── 84x84
│   │   └── 96x96
│   ├── extraicontype_icons
│   │   └── 18x18
│   ├── fkey_icons
│   │   ├── 18x18
│   │   └── 24x24
│   ├── icontype_icons
│   │   ├── 24x24
│   │   ├── 36x18
│   │   └── 36x36
│   ├── identity_state_icons -> ../identity_state_icons
│   ├── input_info_images
│   ├── other_images
│   ├── settings_window_icons
│   │   └── 24x24
│   └── titlebar_icons
│       └── 18x18
├── theme_industrial
│   ├── call_icons -> ../call_icons
│   ├── call_overlay -> ../call_overlay
│   ├── circle_overlays -> ../circle_overlays
│   ├── contact_state_icons -> ../contact_state_icons
│   ├── contact_state_overlays -> ../contact_state_overlays
│   ├── contact_type_icons -> ../contact_type_icons
│   ├── error_icons
│   │   ├── 18x18
│   │   ├── 24x24
│   │   ├── 36x36
│   │   ├── 48x48
│   │   ├── 60x60
│   │   ├── 72x72
│   │   ├── 84x84
│   │   └── 96x96
│   ├── extraicontype_icons
│   │   └── 18x18
│   ├── fkey_icons
│   │   ├── 18x18
│   │   └── 24x24
│   ├── icontype_icons
│   │   ├── 24x24
│   │   ├── 36x18
│   │   └── 36x36
│   ├── identity_state_icons -> ../identity_state_icons
│   ├── input_info_images
│   ├── other_images
│   ├── settings_window_icons
│   │   └── 24x24
│   └── titlebar_icons
│       └── 18x18
└── titlebar_icons
    └── 18x18


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.

Code Block
<?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

Code Block
before 10.1.51.0:

<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>

since 10.1.51.0:

<context_key_icon_type idx="0">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="1">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="2">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="3">VALIDVALUE</context_key_icon_type>


Info
titleSetting 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


The complete list of Icons can be found here Phone Interface Icons

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

Replacing Icons & Images on Line Keys

The icons in the Label Panel Display and SmartLabel 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 → Line Keys → Key → Icon

or by modifying the setting value

Code Block
<fkey_icon_type idx="0">VALIDVALUE</fkey_icon_type>
<fkey_icon_type idx="1">VALIDVALUE</fkey_icon_type>
<fkey_icon_type idx="2">VALIDVALUE</fkey_icon_type>
<fkey_icon_type idx="3">VALIDVALUE</fkey_icon_type>
<fkey_icon_type idx="4">VALIDVALUE</fkey_icon_type>
<fkey_icon_type idx="5">VALIDVALUE</fkey_icon_type>
[...]

Examples

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

Code Block
<text_softkey>VALIDVALUE</text_softkey>


since 10.1.51.0:

<context_key_text>VALIDVALUE</context_key_text>


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


Info
titleMonochrome 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.

Expand


Code Block
linenumberstrue
<?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.

Info
titleMonochrome 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

Expand
titleBefore 10.1.51.0


Code Block
titleSettings XML
linenumberstrue
<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>



Expand
titleSince 10.1.51.0


Code Block
titleSettings XML
linenumberstrue
<settings>
<phone-settings e="2">
<context_key idx="0">
 <initialization>
  <variable name='label' value='Housekeeping'/>
  <variable name='icon' value='kIconTypeFkeyHousekeeping'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="110011" when="on press"/>
 </action>
</context_key>
<context_key idx="1"2>
 <initialization>
  <variable name='label' value='Room Service'/>
  <variable name='icon' value='kIconTypeFkeyRoomService'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="220022" when="on press"/>
 </action>
</context_key>
<context_key idx="2">
 <initialization>
  <variable name='label' value='Valet'/>
  <variable name='icon' value='kIconTypeFkeyValet'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="330033" when="on press"/>
 </action>
</context_key>
<context_key idx="3">
 <initialization>
  <variable name='label' value='Front Desk'/>
  <variable name='icon' value='kIconTypeFkeyFrontDesk'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="440044" when="on press"/>
 </action>
</context_key>
</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:

Code Block
<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.

Code Block
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:

Code Block
<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.

Info
titleFirmware 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:

Code Block
<background_color>242 242 242 0</background_color>


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



Info
titleFirmware 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...

Expand


Phone model

Resolution

Examples
D335 / D735 / D765
320 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...

    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.

Code Block
linenumberstrue
<?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

Code Block
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.

Code Block
<?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

Code Block
<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>


Info

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

Expand


Code Block
linenumberstrue
<?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


Expand


Code Block
linenumberstrue
<?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>



Use the Predefined Themes (Since 10.1.53.0)

Starting with firmware version 10.1.53.0 there are 4 predefined themes on the phone. You can switch between the themes by changing the setting ui_theme. The themes are named "Light", "Dark", "Colorful" and "Industrial". "Light" is the default theme and corresponds to the old appearance of the phone and the other themes are new. The difference between the themes are their color settings and their icons including the background image.

Theme Light (Default):

Theme Dark:

Theme Colorful:

Theme Industrial:


Include Page
Howto Footer - en
Howto Footer - en

...

German

Pagetitle
Anpassung der Benutzeroberfläche
Anpassung der Benutzeroberfläche

Table of Contents




Ab der Firmware-Version 10.1.21.0 kann die Benutzeroberfläche der Telefone vollständig angepasst werden. Die Farb- und Transparenzwerte aller Elemente der Benutzeroberfläche sowie alle sichtbaren Symbole und Bilder sind änderbar. Diese umfangreichen Konfigurationsoptionen ermöglichen es Ihnen wiederum, Ihre eigenen benutzerdefinierten Designs zu erstellen, die zu Ihrem Unternehmen und Ihrer Markenidentität passen.

Hier sind zwei Beispiele dafür, was möglich ist:



Die Anpassung der Benutzeroberfläche gliedert sich in vier Hauptteile:

  1. Icons & Bilder
  2. Farben & Transparenz
  3. XML-Layout
  4. Schriftart & Sprache



Icons & Bilder

Benutzerdefinierte Symbole und Bilder sind ein wesentlicher Bestandteil des Anpassungs Möglichkeiten und snom-Telefone ermöglichen es, diese alle zu modifizieren und zu ändern.

Quelldateien

Code Block
titleBeispiel
snomD385-10.1.42.14-SIP-r.bin requires snomD385-10.1.42.14-customizing.tar.gz


Wenn die customizing.tar.gz heruntergeladen und entpackt wurde, sollte sie wie folgt aussehen. Der tatsächliche Inhalt der Dateien hängt vom Telefon und der Firmware-Version ab.


Ersetzen von Icons & Bildern durch manuellen Upload

Für Test- oder Vorschauzwecke sowie kleinere Installationen unterstützen die Telefone den Upload von benutzerdefinierten Bildern über die Weboberfläche. Eine allgemeine Beschreibung, wie das funktioniert, finden Sie hier.

Ersetzen von Symbolen und Bildern mittels Provisionierung

Für langfristige Lösungen und große Installationen wird empfohlen, die Bereitstellung der Bilddateien über xml und tar-Datei zu starten. Eine detaillierte Beschreibung, wie diese Methode funktioniert, finden Sie hier. Nachfolgend finden Sie eine kurze Zusammenfassung, was bei Geräten mit Farb- und Monochrom-Display zu tun ist.

Ändern und provisionieren von Icons auf Geräten mit monochromer Anzeige

Die Symbole auf monochromen Geräten werden nicht in normalen Bilddateien wie .png oder.jpg gespeichert, sondern sind Bitmap-Schriften, die alle in der Benutzeroberfläche verwendeten Symbole enthalten. Im Benutzdefinierten Bereich der Unicode-Tabelle ab U+EB00 sind die snom-Icons definiert und können direkt mit Tools wie Font Forge bearbeitet werden.

Wenn Sie die Bitmap-Schriftartendatei mit Font Forge öffnen, sollte eine Liste der Symbole angezeigt werden, die derzeit verwendet werden. Der tatsächliche Inhalt der Dateien hängt vom Telefon und der Firmware-Version ab.


Info
titleMonochrome Icon Spezifikation D305, D315, D345, D385, D385, D745, D785, D3, D77

Kontextsensitive Tasten Icons 17x17 - Grundlinie x → 0 / y → -2

Titelleisten Icons 17x17 - Grundlinie x → 0 / y → -2

Beschriftungsfeld Icons 17x17 - Grundlinie x → 0 / y → -2

Maximale Größe der Icons 32x32


Info
titleMonochrome Icon Spezifikation D120, D710, D712, D712, D715, D725

Kontextsensitive Tasten Icons 7x7 - Grundlinie x → 0 / y → 0

Titelleisten Icons 7x7 - Grundlinie x → 0 / y → 0

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

Maximale Größe der Icons 32x32


Wenn Sie die Dateien aus Font Forge exportieren, verwenden Sie bitte die folgenden Einstellungen:


Nachdem Sie die Dateien exportiert haben, erstellen Sie eine tar-Datei welche die neu erstellte Datei enthält (mit dem Namen der Datei , die ersetzt werden soll).

Code Block
tar -cvf fonts.tar fontfile.bdf


Der letzte Schritt besteht dann darin, die tar-Datei in die Einstellungen Ihrer Provisionierungsdatei aufzunehmen, wobei der Typ (Type) auf "font" gesetzt ist.

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

Ändern und provisionieren von Icons auf Geräten mit Farbdisplay

Die Icons und Bilder auf Geräten mit Farbdisplay speichern ihre Icons im PNG-Format. Dies ermöglicht eine einfache Bearbeitung in nahezu allen gängigen Bildbearbeitungsprogrammen.
Es wird jedoch empfohlen, die png-Dateien nach der Bearbeitung mit Tools wie optipng, pngquant oder pngcrush zu optimieren und zu speichern, um redundante Informationen zu entfernen.

Info
titleSpezifikation der Farb-Icons

Kontextsensitive Tasten Icons 24x24px

SmartLabel Icons 24x24px & 18x18px

Titelleisten Icons 18x18px

Menu Icons 18x18px

Anrufbildschirm Icons 18x18px - 48x48px

Dateiformat: PNG


Der Name des neu erstellten / geänderten Icons muss mit dem Namen und der Position des Icons übereinstimmen, das er ersetzen soll, da sonst die Änderungen nicht übernommen werden. Beim Speichern aller Dateigrößen sollten Farbprofile und Exif-Informationen verworfen werden.

Bei der Erstellung einer Tar-Datei für Farbdisplay-Telefone ist zu beachten, dass die Ordnerstruktur und die Xml nicht identisch sind mit derjenigen für Geräte mit monochromer Anzeige.

Navigieren Sie zum Ordner /bmp der customizing.tar, welche auf der zugehörigen Firmware-Release Seite zu finden  war. Führen Sie von diesem Ordner folgendendes aus:

Code Block
tar -cvf icons.tar colored


Info
titleSince firmware version 10.1.53.0

Ab der  Firmwareversion 10.1.53.0 gibt es im "colored"-Ordner die zusätzlichen Unterordner "Dark", "Colorful" und "Industrial" für die neuen Themes. Diese Unterordner enthalten die Icons für die neuen Themes. Die bisherigen Ordner enthalten die Bilder des Standard Themes "Light", der aus Gründen der Rückwärtskompatibilität als einziger Theme keinen eigenen Unterordner besitzt. Außerdem überschreiben die provisionierten Bilder nun nicht mehr die Originalbilder, sondern sie werden in einem anderen speziellen Verzeichnis auf dem Telefon entpackt ("/snom/html/custom_image_upload"). Um Speicherplatz zu sparen sollten nur die ausgetauschten Bilder zu dem neuen tar-Archiv dazugefügt werden. Das kann man mit der tar-Option "-- newer" erreichen. Damit werden nur die Dateien dazugefügt die aktueller sind als das angegebene Datum.

Aus dem Verzeichnis /bmp führe dafür folgenden Befehl aus (das Datum muss entsprechend ersetzt werden):

Code Block
tar -cvf icons.tar colored --newer='YYYY-MM-DD'


Die aktuell Ordnerstruktur für die Icons sieht so aus:

Code Block
titleIcon-Ordnerstruktur
collapsetrue


Dies sollte die Ordnerstruktur intakt halten und bei der Bereitstellung alle Dateien und Ordner korrekt extrahieren. Die XML-Einstellungsdatei muss auf den Typ "gui" eingestellt sein, damit das Telefon die aktuellen UI-Icons durch die neu erstellten ersetzen kann.

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

Ersetzen von Icons und Bildern auf kontextsensitiven Tasten

Die Icons im Ruhebildschirm, die im kontextsensitiven Tastenbereich angezeigt werden, können vollständig angepasst werden, um jedes Icon oder Bild zu laden, unabhängig davon, welche Funktion konfiguriert ist.Dies kann erreicht werden, indem Sie entweder das Icon in der Telefon-Benutzeroberfläche ändern Einstellungen → Präferenzen → Funktionstasten → Kontextsensitive Tasten → (gewünschte) Taste → Symbol

oder durch folgende Änderung des Einstellwertes:

Code Block
Vor 10.1.51.0:

<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>

Seit 10.1.51.0:

<context_key_icon_type idx="0">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="1">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="2">VALIDVALUE</context_key_icon_type>
<context_key_icon_type idx="3">VALIDVALUE</context_key_icon_type>


Info
titleEinstellungswerte

Diese Einstellung unterstützt das Laden von Symbolen von einer externen URL für Telefonen mit Farbdisplay zusätzlich zu den Namen, die unter Einstellungen → Präfernzen → Funktionstasten → kontextsensitive Tasten → (gewünschte) Taste → Symbol

Auf der linken Seite sie die standard Symbole der kontextsensitive Tasten, während die Icons auf der rechten Seite über die Telefon-Benutzeroberfläche geändert wurden.

Ausblenden der Beschriftung / der Icons bei kontextsensitiven Tasten

Es ist möglich, das Label für die kontextsensitiven Tasten auszublenden, indem Sie die folgende Einstellung auf OFF setzen.

Code Block
<text_softkey>VALIDVALUE</text_softkey>


Info
Auf Telefonen mit Farbdisplay führt dies dazu, dass der Beschriftungstext für alle kontextsensitiven Tasten ausgeblendet wird.



Info
titleTelefone mit Monochrome-Display

Das Verhalten auf monochromen Geräten ist unterschiedlich. Die Einstellung schaltet zwischen dem reinen Symbol und der reinen Textansicht um.


Verwendung von benutzerdefinierten Icons in XML-Dateien

Um benutzerdefinierte Icons in XML-Dateien zu verwenden, können Icon-Namen verwendet werden, um diese direkt hinzuzufügen oder zu ersetzen.

Expand


Code Block
linenumberstrue
<?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>



Das obige XML sollte Ihnen die folgenden Ergebnisse liefern.

Info
titleTelefone mit Monochrome-Display

Telefone mit einem primären monochromen Display unterstützen das Laden von Symbolen oder Bildern von einer externen URL nicht. Diese Geräte unterstützen nur das Laden der vorhandenen Icons auf das Telefon über den Icon Namen

Verwendung benutzerdefinierter Icons und Labels in XML-Definitionen

XML-Definitionen unterstützen die Anzeige benutzerdefinierter Icons und Labels, wenn sie sowohl für monochrome als auch für farbige Telefone konfiguriert sind. Nachfolgend finden Sie ein Beispiel für eine Einstellungsdatei, in der das Telefon als Hotelzimmertelefon mit vier Kurzwahlen eingerichtet ist, die über ein benutzerdefiniertes Icon und ein eigenes Label verfügen.

Expand
titleVor 10.1.51.0


Code Block
titleEinstellungs XML
linenumberstrue
<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>



Expand
titleSeit 10.1.51.0


Code Block
titleEinstellungs XML
linenumberstrue
<settings>
<phone-settings e="2">
<context_key idx="0">
 <initialization>
  <variable name='label' value='Housekeeping'/>
  <variable name='icon' value='kIconTypeFkeyHousekeeping'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="110011" when="on press"/>
 </action>
</context_key>
<context_key idx="1"2>
 <initialization>
  <variable name='label' value='Room Service'/>
  <variable name='icon' value='kIconTypeFkeyRoomService'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="220022" when="on press"/>
 </action>
</context_key>
<context_key idx="2">
 <initialization>
  <variable name='label' value='Valet'/>
  <variable name='icon' value='kIconTypeFkeyValet'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="330033" when="on press"/>
 </action>
</context_key>
<context_key idx="3">
 <initialization>
  <variable name='label' value='Front Desk'/>
  <variable name='icon' value='kIconTypeFkeyFrontDesk'/>
  <identity value='1'/>
 </initialization>
 <action>
  <dial target="440044" when="on press"/>
 </action>
</context_key>
</phone-settings>
</settings>




Ersetzen von Icons auf monochromen Displays

Anzeigen von Icons mittels Unicode-Zeichen

Alle Telefone mit monochromer Anzeige zeigen Icons auf der monochromen Anzeige an, indem sie eine Schriftart laden, die einen Satz von Icons in einem bestimmten Unicode-Bereich enthält. Das bedeutet, dass es möglich ist, Icons und Text in einer Label-Einstellung oder einem Xml-Tag zu kombinieren. Eine detaillierte Anleitung dazu finden Sie hier.

Verwendung von Icon-Namen anstelle von Unicode-Zeichen



Ersetzen des Account Icons durch ein benutzerdefiniertes Foto

Das standardmäßige Account Icon kann aktualisiert werden, um ein benutzerdefiniertes Foto auf unterschiedliche Weise anzuzeigen.


Jede Methode hat eine eigene Priorität und wird überschrieben, wenn eine Methode konfiguriert wird, die eine höhere Priorität hat.

  1. Bildinformationen, die über vCard gesendet werden, z.B. Broadsoft

  2. Bild, das als user_pic konfiguriert ist.

  3. Bild aus dem lokalen Verzeichnis Kontakt, der mit der konfigurierten Identität übereinstimmt.

Bildinformationen über vCard

Wenn das snom-Telefon eine vCard mit einer URL zu einer gültigen Bild-URL erhält, verwendet es automatisch das in der vCard gelieferte Bild und zeigt es im Ruhe- und Anrufbildschirm an. Dies ist derzeit nur möglich, wenn eine gültige XMPP-ID für den Servertyp Broadsoft konfiguriert ist.

Bildinformationen über user_pic

Alle Farbtelefone unterstützen das Laden und Anzeigen eines Benutzerbildes von einer gültigen Bild-URL, die dann im Ruhezustand und im Anrufbildschirm angezeigt wird. Dies kann durch die folgende Konfiguration erreicht werden:

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


Wenn das Telefon erfolgreich ein Bild von der in der Einstellung konfigurierten URL beziehen kann, sendet es bei jedem SIP Invite, der auf das Bild zeigt, einen Header, so dass der angerufene Teilnehmer das Benutzerbild vom eingehenden Anruf angezeigt bekommt.

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

Bildinformationen aus dem lokalen Verzeichnis

Die snom Telefone mit Farbdisplay unterstützen auch einen rein kosmetischen Ansatz zum Hinzufügen eines Benutzerbildes. Dieses Verfahren kann verwendet werden, um mehrere verschiedene Benutzer lokal am Telefon zu unterscheiden, ohne identifizierende Fotoinformationen in einem Anruf zu senden. Eine detaillierte Beschreibung dieser Funktion finden Sie hier. Eine kurze Beschreibung finden Sie unten.

Suchen Sie in der Webschnittstelle nach Identität → Foto → Choose File, wählen Sie ein Bild aus und drücken Sie Übernehmen. Sobald das Bild korrekt geladen ist, wird es im Ruhezustand für diese spezielle Identität angezeigt.

Alternativ kann dies auch wie folgt geschehen

  1. Erstellen oder Provisionieren Sie einen Kontakt in Ihrem lokalen Verzeichnis, der Ihrer lokalen Identität entspricht. Die Nummer dieses Kontakts muss im Format user_name@user_host sein, z.B. 10042389@snom.com
  2. Hinzufügen / Bereitstellen eines Fotos für diesen Kontakt
  3. Das Telefon stimmt nun automatisch mit dem erstellten Kontakt mit einer beliebigen konfigurierten Identität überein, und wenn der Wert in der Einstellung user_name und user_host einer beliebigen Identität korrekt mit der Nummer des erstellten Kontakts übereinstimmt, zeigt das Telefon das Bild vom Kontakt im Ruhezustand an.


Ersetzen des Hintergrundbildes über die Einstellungen (Settings)

Im folgenden Beispiel wurde der Hintergrund des Telefons mit einem Bild versehen, indem die URL des Bildes übergeben wurde, wo das Telefon das Bild finden kann.

Dies geschah durch Ändern der Einstellung:

Code Block
<custom_bg_image_url>VALIDVALUE</custom_bg_image_url>


In dieser Einstellung muss eine erreichbare gültige URL zu einem Bild eingestellt werden. Sobald die Einstellung geändert wird, wird das Hintergrundbild ersetzt.

Sie können diese Einstellung entweder über die Provisionierung ändern,

  • indem Sie das Tag <custom_bg_image_url> mit einem gültigen Wert zu Ihrer Xml-Datei hinzufügen oder
  • indem Sie es manuell über WUI → Preferences → Appearance ändern.


 


Wenn diese Einstellung leer ist oder die URL oder das Bild falsch ist, wird das standardmäßige Hintergrundbild des Telefons verwendet.

Info
titleFirmware Version < 10.1.33.33

Um das Hintergrundbild vor der Version 10.1.33.33 sehen zu können, musste die Hintergrundfarbe auf vollständig transparent gesetzt werden.

Dies war notwendig, da sich das Hintergrundbild auf der Ebene unterhalb der Standardhintergrundfarbe befindet. Dies kann erreicht werden, indem entweder ein Alpha-Wert von 0 für die Hintergrundfarbe bereitgestellt wird:
(dies ist die 4te Zahl ganz rechts)

Code Block
<background_color>242 242 242 0</background_color>


oder durch manuelles Bearbeiten des Alpha-Wertes der Einstellung im Web-Interface:



Info
titleFirmware Version >= 10.1.33.33

Ab der Firmware-Version 10.1.33.33 wird die Transparenz der Hintergrundfarbe automatisch an das auf dem Telefon angezeigte Hintergrundbild angepasst (Meist einen Wert von 80). Sie wird jedoch nicht vollständig transparent sein. Um volle Transparenz zu erreichen, muss die Einstellung <background_color> noch einen Alpha-Wert von 0 haben.


Spezifikationen für Hintergrundbilder

Damit das Hintergrundbild richtig dargestellt werden kann, muss es in png, jpg, gif, bmp oder tga gespeichert werden. Wir empfehlen dringend, .png-Dateien zu verwenden und diese mit "Optipng" zu optimieren, um die Dateigröße zu reduzieren und die Leistung des Telefons damit zu verbessern.


Um eine Auswahl an Bildern im jeweiligen Format verschiedener Telefonmodelle zu finden...

Expand


Telefonmodell

Bildgröße in Pixel

Beispielbilder
D335 / D735 / D765320 x 240

D375 / D385 / D785480 x 272

D717

FW >= 10.1.41.1

426x240

FW < 10.1.41.1

So bereiten Sie Bilder für das D717-Display vor




Farben & Transparenz

Ab Firmware-Version 10 kann die Benutzeroberfläche des Farbtelefons in Bezug auf Farbe & Transparenz vollständig angepasst werden. Dies ermöglicht es, die Benutzeroberfläche auf perfekte Lesbarkeit, Klarheit, Farbwünsche und die weitere Übernahme z.B. der Corporate Identity eines Unternehmens auf das Telefon einzustellen.















Neue Einstellungsparameter für die GUI-Anpassung

Zugehörige Einstellungen

  • Um eine ausführliche Liste von Einstellungen zu sehen...

    Expand


    Name der EinstellungGültige WerteStandardwertBeschreibung
    titlebar_text_colorEine Gruppe von 4 Zahlen, jeweils >=0 and <=255.
    rot grün blau alpha
    (ein Alpha-Wert von 255 bedeutet vollständig sichtbar was ein Hintergrundbild komplett versteckt, während 0 vollständig transparent bedeutet was ein Hintergrundbild komplett sichtbar macht.)
    51 51 51 255Steuert die Farbe und Deckkraft des Textes in der Titelleiste, z.B. Datum, Uhrzeit, Titel, etc.
    text_color51 51 51 255Steuert die Farbe und Deckkraft des Haupttextes, z.B. Menü, Leerlauf und alle anderen Bildschirme Haupttext.
    subtext_color123 124 126 255Steuert die Farbe und Deckkraft des Subtexts, z.B. Menü, Leerlauf und alle anderen Subtexte der Bildschirme.
    extratext_color123 124 126 255Steuert die Farbe und Deckkraft der ersten Textzeile, die ganz rechts in einem Menü angezeigt wird, z.B. Datum und Uhrzeit der Anrufhistorie.
    extratext2_color123 124 126 255Steuert die Farbe und Deckkraft der zweiten Textzeile, die ganz rechts in einem Menü angezeigt wird, z.B. Datum und Uhrzeit der Anrufhistorie.
    titlebar_background_color226 226 226 255Steuert die Farbe und Deckkraft des Hintergrunds der Titelleiste.
    background_color242 242 242 255Steuert die Farbe und Deckkraft des Hintergrunds in jedem Bildschirm.
    fkey_background_color242 242 242 255Steuert die Farbe und Deckkraft des kontextsensitiven Tastenhintergrunds.
    fkey_pressed_background_color61 133 198 255Steuert die Farbe und Deckkraft des kontextsensitiven Tastenhintergrunds, wenn eine Taste gedrückt wird.
    fkey_separator_color182 183 184 255Steuert die Farbe und Deckkraft der kontextsensitiven Tastentrennungslinie.
    fkey_label_color123 124 126 255Steuert die Farbe und Deckkraft des Textes, der im kontextsensitiven Tastenbereich verwendet wird.
    fkey_pressed_label_color242 242 242 255Steuert die Farbe und Deckkraft des Textes, der im kontextsensitiven Tastenbereich verwendet wird, wenn eine Taste gedrückt wird.
    selected_line_background_color255 255 255 255Steuert die Farbe und Deckkraft des Hintergrunds der Auswahllinie, z.B. in Menüs oder jedem Bildschirm mit wählbaren Elementen.
    selected_line_indicator_color61 133 198 255Steuert die Farbe und Deckkraft des Indikators ganz links neben einer ausgewählten Zeile, z.B. in Menüs oder jedem Bildschirm mit wählbaren Elementen.
    selected_line_text_color61 133 198 255Steuert die Farbe und Deckkraft von Text in einer ausgewählten Zeile, z.B. in Menüs oder jedem Bildschirm mit wählbaren Elementen. Steuert auch die Farbe des aktuellen Zeichens, während Sie durch die verschiedenen Optionen in einem Eingabefenster blättern.
    line_background_color242 242 242 0Steuert die Farbe und Deckkraft des Hintergrunds für jede Menü- oder Menüpunktzeile oder jedes Element in einer Liste.
    line_separator_color226 226 226 255Steuert die Farbe und Deckkraft der Trennlinie zwischen Menüs oder Menüpunkten und wird nur angezeigt, wenn mehr als ein wählbares Element verfügbar ist.
    scrollbar_color182 183 184 255Steuert die Farbe und Deckkraft der Bildlaufleiste, die auf jedem Bildschirm angezeigt wird.
    cursor_color61 133 198 255

    Steuert die Farbe und Deckkraft des Cursors, der auf Bildschirmen mit einer Eingabe angezeigt wird.

    status_msgs_background_color242 242 242 255Steuert die Farbe und Deckkraft des Hintergrunds für Statusmeldungen, die in den Ruhe- und Anrufbildschirmen erscheinen. Dieser Wert wird auch auf den Hintergrund des Lautstärke-Überlagerungsfensters angewendet.
    status_msgs_border_color182 183 184 255Steuert die Farbe und Deckkraft des Rahmens für Statusmeldungen, die auf dem Ruhe- und Anrufbildschirm angezeigt werden. Dieser Wert wird auch auf den Rand des Lautstärke-Überlagerungsfensters angewendet.
    smartlabel_background_color242 242 242 255Steuert die Farbe und Deckkraft des SmartLabel-Hintergrunds.
    smartlabel_pressed_background_color61 133 198 255Steuert die Farbe und Deckkraft des SmartLabel-Hintergrunds, wenn eine Funktionstaste gedrückt wird.
    smartlabel_separator_color182 183 184 255Steuert die Farbe und Deckkraft der Trennlinie zwischen den einzelnen SmartLabel-Funktionstasten.
    smartlabel_label_color123 124 126 255Steuert die Farbe und Deckkraft des im SmartLabel verwendeten Textes.
    smartlabel_pressed_label_color242 242 242 255Steuert die Farbe und Deckkraft des im SmartLabel verwendeten Textes, wenn eine Funktionstaste gedrückt wird.





Sie können den Wert für jede Einstellung über die Web-Benutzeroberfläche (WUI) (ab 10.1.25.0) oder durch Einfügen der Parameter in Ihre Konfigurationsdatei für die automatische Bereitstellung festlegen.


FW: 10.1.25.0FW: 10.1.42.10

Neue Registerkarte Darstellung in den Telefoneinstellungen



XML Layout

Hintergrund einer Textzeile auf monochromen Geräten invertieren

Durch Hinzufügen des XML-Tags <InvertColor> zu einem <MenuItem> mit dem Wert 1 wird der Hintergrund der Zeile sowie alle Elemente innerhalb der Zeile invertiert.

Code Block
languagexml
linenumberstrue
<?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>



Schriftart & Sprache

Ersetzen der Schriftart in der Benutzeroberfläche mittels Provisionierung


Die Schriften auf allen snom-Telefonen sind frei anpassbar und können über Provisionierung geändert werden. Bitte beachten Sie, dass es bei der Darstellung von Text zu Inkonsistenzen kommen kann, wenn der aktuell verwendete TrueType-Font oder Bitmap-Font durch einen benutzerdefinierten ersetzt wird, da die Benutzeroberfläche für einen bestimmten TrueType-Font optimiert ist.

Um eine Schriftart zu ersetzen, muss eine tar-Datei erstellt werden, die die neue Schriftart enthält, die nach der der alten Schriftart benannt ist, die ersetzt werden soll.

Code Block
tar -cvf fonts.tar fontfile.ttf

Diese Tar-Datei muss dann in Ihrer XML-Datei referenziert werden, damit sie beim Neustart des Telefons richtig geladen wird.

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

Ersetzen einer Sprache durch die entsprechenden Übersetzungen mittels Provisionierung

Jede Sprache und ihre Übersetzungen können über die Bereitstellung der spezifischen Sprachdateien geändert werden. Diese Methode wird empfohlen, wenn Sie an vielen Übersetzungen größere Änderungen vornehmen und die spezifischen Übersetzungen auf bestimmte Telefonmodelle anwenden möchten.

Erstellen

Eine detailliertere Erklärung dazu finden Sie hier.

Ersetzen einzelner Übersetzungen mittels Provisionierung

Jeder Text auf dem Telefon kann über die Einstellungen angepasst werden. Ähnlich wie bei der Bereitstellung von regulären Einstellungen können die Tasten-Übersetzungen in den Einstellungen bereitgestellt und dynamisch aktualisiert werden. Diese Methode wird empfohlen, wenn Sie bestimmte Texte optimieren wollen, ohne ständig die gesamte Sprache von Version zu Version pflegen zu müssen. Eine detaillierte Beschreibung dieser Funktion finden Sie hier.

Maskieren von Identitätsinformationen im Ruhebildschirm / Anrufbildschirm und für Ziele der Anrufweiterleitung

Die identitätsrelevanten Informationen im Ruhebildschirm / Anrufbildschirm und für Anrufweiterleitungsziele können durch Ändern der folgenden Einstellungen ausgeblendet werden:

Code Block
<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>


Info

Der Aufrufbildschirm zeigt die Werte von user_idle_text und user_idle_number an und ersetzt sie, verwendet sie aber nicht wirklich für den Anrufablauf. Diese Einstellungen haben eine rein kosmetische Wirkung und beeinflussen den SIP-Flow in keiner Weise.


Standardansicht



mit geändertem user_idle_text



mit geänderter user_idle_number



mit geänderter user_idle_cfwd

Erstellen eines eigenen Farbschemas

Da jedes Element in der Benutzeroberfläche angepasst werden kann, ist es möglich, komplette Designs zu erstellen, die das Telefon von seinem ursprünglichen Look & Feel in eine optisch neue Benutzeroberfläche verwandeln.


Dunkles Design (Dark Theme)



  • Um die XML Einstellungsdatei zu sehen...

    Expand


    Code Block
    languagexml
    linenumberstrue
    <?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> 







Buntes Design (Colorful Theme)


  • Um die XML Einstellungsdatei zu sehen...

    Expand


    Code Block
    languagexml
    linenumberstrue
    <?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>



Benutzung der vordefinierten Themes (seit 10.1.53.0)

Beginnend mit der Firmware-Version 10.1.53.0 gibt es 4 vordefinierte Themes auf dem Telefon. Zwischen diesen Themes kann man wechseln, indem man den Wert des Settings ui_theme ändert. Es gibt die Themes "Light", "Dark", "Colorful" und "Industrial". Der "Light" Theme ist der Standard-Theme und er entspricht dem bisherigen Aussehen des Telefones. Die anderen Themes sind neu. Die Unterschiede zwischen den Themes bestehen in deren Farb-Settings und den benutzten Bildern, einschließlich der des Hintergrundbildes.

Theme Light (Standard):

Theme Dark:

Theme Colorful:

Theme Industrial:

Include Page
Howto Footer - de
Howto Footer - de

...