Many of us really like it when any thing is made for us! When we feel a certain “level of ownership”, which allows us to stand out against the background of the “gray mass”. The same chairs, tables, computers, etc. Everything is like everyone else!
Sometimes even such a trifle as a company logo on an ordinary pen allows us to feel special and therefore more valuable.
Agree that most customers will prefer, instead of the usual (like everyone else) Snom phone, a phone that they associate with something special / personal. I am sure that if you are a provider of telephony solutions, you would also agree to associate your company with the provider of this "special" in the eyes of the customer.
Many of you know that Snom can offer very different levels of desktop phone customization, from very complex hardware and software changes that take time to develop, to the simplest ones that are available to everyone out of the box, absolutely free. It is about the latter that we want to tell you today.
The menu firmware of our phones is built on XML and allows you to make flexible customization of the UI of the following parameters (short list):
- background image
- font and color
- Icons
- language
- ring tones
- key assignment
- and more
In this, part 1 of our article, we will talk about how you can change the visual representation of the phone on Snom. Let's talk about a few things:
- Changing colors
- Changing fonts
- Loading a background image
- Topic Examples
In the 2nd part of our article (coming soon) we will talk about the rest of the customization options. So don't switch.
1. Changing colors
Starting with firmware version 10, the color interface of the phone can be completely changed in terms of color and transparency. This allows you to customize the user interface for perfect legibility, legibility, color preferences and further change, for example, the corporate identity of the company.
In order to make it easier to understand, there is a scheme for describing the color settings:
Colors are configured using RGB values
Name
Valid values
Values by
Default
Description
titlebar_text_color
Group of 4
numbers, each >=0 and <=255.
red, green, blue, alpha (alpha value 255 means completely
visible and 0 is completely transparent).
51 51 51 255
Controls the color and transparency of text in
title bar, e.g. "Date", "Time",
"Name", etc.
text_color
51 51 51
255
Controls color and transparency
body text such as "Menu", "Standby" and
all other body text screens.
subtext_color
123 124 126 255
Controls color and transparency
subtext, such as "Menu", "Standby" and all
other subtext screens.
extratext_color
123 124 126
255
Controls the color and transparency of the first
line of text displayed on the right side of the menu, such as call history, date, and
the time.
extratext2_color
123 124 126
255
Controls the color and transparency of the second
line of text displayed on the right side of the menu, such as call history, date, and
the time.
titlebar_background_color
226 226 226
255
Controls the color and transparency of the background
header lines
background_color
242 242 242
255
Controls the color and transparency of the background on
every screen.
fkey_background_color
242 242 242
255
Controls color and transparency
context sensitive buttons.
fkey_pressed_background_color
61 133 198
255
Controls the color and transparency of the background
context sensitive keys when pressed.
fkey_separator_color
182 183 184
255
Controls color and transparency
separating lines of context-sensitive buttons
fkey_label_color
123 124 126
255
Controls the color and transparency of text,
used in context sensitive buttons
fkey_pressed_label_color
242 242 242
255
Controls the color and transparency of text,
used in context sensitive buttons when pressed
selected_line_background_color
255 255 255
255
Controls the color and transparency of the background
selected line, for example in the Menu or any screen with selectable items
selected_line_indicator_color
61 133 198
255
Controls color and transparency
indicator to the left of the selected line, for example, in the Menu or any screen with
selected elements
selected_line_text_color
61 133 198
255
Controls the color and transparency of text in
selected line, for example, in the Menu or any screen with selected items.
Also controls the color of the current character when cycling through
various options in the input window
line_background_color
242 242 242
0
Controls the color and transparency of the background for
each menu line or menu item, or any list item.
line_separator_color
226 226 226
255
Controls color and transparency
dividing line between menus or menu items and is only shown
when more than one selected element is available.
scrollbar_color
182 183 184
255
Controls the color and transparency of the stripe
scrollbar displayed on any screen.
cursor_color
61 133 198
255
Controls the color and transparency of the cursor,
displayed on the screens using the input signal.
status_msgs_background_color
242 242 242
255
Controls the color and transparency of the background for
status messages that appear on the idle and calling screens. This value also applies to the background
volume changes.
status_msgs_border_color
182 183 184
255
Controls the color and transparency of the border
for status messages that appear on the idle and calling screens. This value also applies to the border
volume changes.
smartlabel_background_color
242 242 242
255
Controls the color and transparency of the SmartLabel background.
smartlabel_pressed_background_color
61 133 198
255
Controls the color and transparency of the SmartLabel background when a function key is pressed.
smartlabel_separator_color
182 183 184
255
Controls the color and transparency of the line
separator between each SmartLabel function key.
smartlabel_label_color
123 124 126
255
Controls the color and transparency of text,
used in SmartLabel.
smartlabel_pressed_label_color
242 242 242
255
Controls the color and transparency of text,
used in SmartLabel when a function key is pressed.
Now that we know where and what is located, we can go to the phone's web interface to the section Setup/Preferences, then the second tab Appearance:
Here you can change the values, and if you click on the question mark, you will be taken to a page with a description, where, among other things, there is a note on how to specify this value if you use an XML file for configuration. For example, for our first line "Text Color":
2. Change fonts
Fonts on all snom phones are freely configurable and can be changed using auto-provisioning. Be aware that if the currently used TrueType or bitmap font is changed to a custom font, certain inconsistencies may occur when rendering text because the user interface is optimized for one particular TrueType font.
To replace any font, you need to create a tar file containing the new font, named exactly the same as the old font that will be replaced.
"tar -cvf fonts.tar fontfile.ttf"
This tar file must then be referenced in the xml file so that it loads correctly when the phone is rebooted.
<?xml version="1.0" encoding="utf-8" ?>
<settings>
<uploads>
<file url="http://192.168.23.54:8080/fonts.tar" type="font" />
</uploads>
</settings>
More details about which fonts are preinstalled can be found on our website.
This way you can upload your own font to your phone.
3. Loading a background image
Using an example, we will show how to load the background correctly and what settings matter.
You can upload a background image through the Web interface → Preferences → Appearance:
This parameter must be set to an accessible image URL. As soon as the setting is changed, the background image will be replaced.
Or you can change this setting with auto provisioning by adding the tag with actual value to your xml file.
If this parameter is empty or the image URL is incorrect, then the phone's default background image will be used.
It's important: If you are using software prior to version 10.1.33.33, you must set the background color value to fully transparent.
This is necessary because the background image is located on the layer below the default background color. This can be achieved by setting the alpha value to 0 for the background color.
Starting from firmware version 10.1.33.33, background color transparency automatically adapts to the background image displayed on the phone. However, it will not be completely transparent. To achieve complete transparency, the setting should still have an alpha value of 0.
For the background image to display correctly, it must be saved in png, jpg, gif, bmp, or tga format. We highly recommend using .png files and optimizing them with "" to reduce file size and improve performance.
Image size depending on the model:
Model
Resolution
D375 / D385 / D785
480 x 272
D335 / D735 / D765
320 x 240
D717
426 x 240
4. Theme configuration example
1. "Dark Theme":
See
<?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>2. "Colorful Theme":
See
<?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>We hope this topic will help you deal with the issue of manual customization.
To be continued ...
Source: habr.com