Many of us really enjoy having something customized for us! It gives us a sense of 'ownership' that allows us to stand out from the 'gray mass'. Same chairs, tables, computers, etc. Just like everyone else!
Sometimes, even a small detail like a company logo on an ordinary pen makes us feel it is special and therefore more valuable.
Agree that most clients would prefer a phone that is associated with something special/personal instead of an ordinary (like everyone else) Snom phone. I’m sure that if you are a telephony solutions provider, you would also agree to associate your company with the provider of this 'special' in the eyes of the client.
Many of you know that Snom can offer very different levels of customization for desktop phones: from very complex hardware and software changes that require time for development to the simplest changes available to everyone out of the box, absolutely for free. This last one is what we want to tell you about today.
The menu firmware of our phones is built on XML and allows you to perform flexible UI customization of the following parameters (brief list):
- background image
- font and color
- icons
- language
- ringtone
- key assignments
- and much more
In this, the 1st part of our article, we will discuss how to change the visual representation of the Snom phone. We will talk about a few points:
- Changing the color scheme
- Changing fonts
- Uploading a background image
- Theme examples
In the 2nd part of our article (which will be released soon), we will talk about the other customization possibilities. So, don't 'switch channels'.
1. Changing the color scheme
Starting with firmware version 10, the phone's color interface can be completely changed in terms of color and transparency. This allows you to customize the user interface for perfect readability, clarity, color preferences, and further modifications, such as the company's branding.
To make it easier to understand, there is a scheme for describing color settings:
Colors are customized using RGB values
Name
Allowed values
Default values
titlebar_text_color
Description
Group of 4
Group of 4
numbers, each >=0 and <=255.
red, green, blue, alpha (alpha value 255 means fully
visible, and 0 means completely transparent).
51 51 51 255
Controls the color and transparency of the text in
the header line, for example, "Date", "Time",
"Title", etc.
text_color
51 51 51
255
Controls the color and transparency of
the main text, for example, "Menu", "Standby", and
all other main text screens.
subtext_color
123 124 126 255
Controls the color and transparency of
subtext, for example, "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 in the menu, such as call history, date, and
time.
extratext2_color
123 124 126
255
Controls the color and transparency of the second
line of text displayed on the right in the menu, such as call history, date, and
time.
titlebar_background_color
226 226 226
255
Controls the color and transparency of the background
of the header line
background_color
242 242 242
255
Controls the color and transparency of the background on
each screen.
fkey_background_color
242 242 242
255
Controls the color and transparency of
contextual buttons.
fkey_pressed_background_color
61 133 198
255
Controls the color and transparency of the background
contextual keys when pressed.
fkey_separator_color
182 183 184
255
Controls the color and transparency of
separator lines of contextual buttons
fkey_label_color
123 124 126
255
Controls the color and transparency of the text
used in contextual buttons
fkey_pressed_label_color
242 242 242
255
Controls the color and transparency of the text
used in contextual 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 the color and transparency of
indicator to the left of the selected line, for example, in the Menu or any screen with
selected items
selected_line_text_color
61 133 198
255
Controls the color and transparency of the text in
highlighted line, for example, in the Menu or any screen with selected items.
Also controls the color of the current symbol when cycling through
different options in the input window
line_background_color
242 242 242
0
Controls the color and transparency of the background for
each line of the Menu or menu item, or any list item.
line_separator_color
226 226 226
255
Controls the color and transparency of
the separator line between menu or menu items, shown only
when more than one selectable item is available.
scrollbar_color
182 183 184
255
Controls the color and transparency of the scroll bar
displayed on any screen.
cursor_color
61 133 198
255
Controls the color and transparency of the cursor,
displayed on screens with input signals.
status_msgs_background_color
242 242 242
255
Controls the color and transparency of the background for
of status messages that appear on waiting and call screens. This value also applies to the background
of 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 waiting and call screens. This value also applies to the border
of 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 the function key is pressed.
smartlabel_separator_color
182 183 184
255
Controls the color and transparency of the line
that separates each SmartLabel function key.
smartlabel_label_color
123 124 126
255
Controls the color and transparency of the text
used in SmartLabel.
smartlabel_pressed_label_color
242 242 242
255
Controls the color and transparency of the text
used in SmartLabel when the function key is pressed.
Now that we know where and what everything is, we can go to the phone's web interface in the Setup/Preferences, then the second tab Appearance:
Here you can change the values, and if you click on the question mark, you will be directed to a description page that also includes a note on how to set this value when using an XML file for configuration. For example, for our first line "Text Color":
2. Changing Fonts
Fonts on all snom phones are freely customizable and can be changed via auto-provisioning. Remember that if the currently used TrueType or raster font is replaced with a custom one, there may be certain discrepancies in text rendering, as the user interface is optimized for one specific TrueType font.
To replace any font, you need to create a tar file containing the new font, which must be named exactly the same as the old font that will be replaced.
"tar -cvf fonts.tar fontfile.ttf"
Then, you need to provide a link to this tar file in the xml file so that it is properly loaded when the phone restarts.
More information on which fonts are pre-installed can be found on our
Thus, you can upload your own font to the phone.
3. Uploading a Background Image
We will demonstrate how to correctly upload a background and what settings are important.
You can upload a background image through the Web Interface → Preferences → Appearance:
In this parameter, the available image URL must be set. Once this parameter is changed, the background image will be replaced.
Alternatively, you can change this setting using auto-provisioning by adding the tag with a valid value to your xml file.
If this parameter is empty or the image URL is incorrect, the default background image of the phone will be used.
Important: if you are using software prior to version 10.1.33.33, you need to set the background plan color value to fully transparent.
This is necessary because the background image is located on a layer below the standard 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, the background transparency color automatically adjusts to the background image displayed on the phone. However, it will not be completely transparent. To achieve full transparency, the setting must 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 strongly 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. Example theme configuration
1. “Dark Theme”:
View
43 49 56 255
242 242 242 255
43 49 56 255
242 242 242 255
224 224 224 255
158 158 158 255
158 158 158 255
43 49 56 255
61 133 198 255
70 90 120 255
224 224 224 255
242 242 242 255
242 242 242 0
50 60 80 255
61 133 198 255
61 133 198 255
70 90 120 255
70 90 120 255
61 133 198 255
43 49 56 255
70 90 120 255
43 49 56 255
61 133 198 255
70 90 120 255
224 224 224 255
242 242 242 2552. "Colorful Theme":
View
http://192.168.0.1/background.png
0 0 0 0
242 242 242 255
43 49 56 40
242 242 242 255
224 224 224 255
224 224 224 255
224 224 224 255
43 49 56 40
43 49 56 140
0 0 0 0
224 224 224 255
224 224 224 255
0 0 0 0
43 49 56 40
61 133 198 255
61 133 198 255
0 0 0 0
61 133 198 255
61 133 198 255
61 133 198 255
61 133 198 255
43 49 56 40
43 49 56 140
0 0 0 0
242 242 242 255
242 242 242 255We hope this topic helps you understand manual customization.
To be continued…
Source: habr.com
