Порой даже такая мелочь, как логотип компании на обычной ручке, позволяет нам ощущать её особенной и потому более ценной.
Согласитесь, что большинство заказчиков предпочтёт вместо обычного (как у всех) телефона Snom, телефон, который ассоциируется у них с чем-то особенным/личным. Уверен, что если вы являетесь поставщиком решений по телефонии, вы также согласились бы ассоциировать вашу компанию с поставщиком этого «особенного» в глазах заказчика.
Многие из вас знают, что Snom может предложить очень разные уровни кастомизации настольных телефонов: от очень сложных аппаратных и программных изменений, которые требуют время на разработку, до самых простых, которые доступны всем из «коробки», абсолютно бесплатно. Именно о последнем мы хотим вам рассказать сегодня.
Прошивка меню наших телефонов построена на XML и позволяет вам производить гибкую кастомизацию UI следующих параметров (краткий список):
- фоновое изображение
- шрифт и цвет
- иконки
- язык
- мелодии звонков
- назначение клавиш
- и многое другое
В этой, 1-й части нашей статьи, мы расскажем о том, как можно изменить визуальное представление телефонна Snom. Поговрим о нескольких пунктах:
- Изменение цветовой гаммы
- Изменение шрифтов
- Загрузка фонового изображения
- Примеры тем
Во 2-й части нашей статьи (которая скоро выйдет) мы поговорим об остальных возможностях кастомизции. Так-что не «переключайтесь».
1. Изменение цветовой гаммы
Начиная с версии прошивки 10, цветной интерфейс телефона может быть полностью изменен в отношении цвета и прозрачности. Это позволяет настроить пользовательский интерфейс для идеальной разборчивости, четкости, цветовых предпочтений и дальнейшего изменения, например, фирменного стиля компании.
Для того, чтобы было проще разобраться существует схема описания настройки цветов:
| Наименование |
Допустимые значения |
Значения по |
Описание |
| titlebar_text_color |
Группа из 4-х красный, зеленый, синий, альфа (значение альфа 255 означает полностью |
51 51 51 255 |
Управляет цветом и прозрачностью текста в |
| text_color |
51 51 51 |
Управляет цветом и прозрачностью |
|
| subtext_color |
123 124 126 255 |
Управляет цветом и прозрачностью |
|
| extratext_color |
123 124 126 |
Управляет цветом и прозрачностью первой |
|
| extratext2_color |
123 124 126 |
Управляет цветом и прозрачностью второй |
|
| titlebar_background_color |
226 226 226 |
Управляет цветом и прозрачностью фона |
|
| background_color |
242 242 242 |
Управляет цветом и прозрачностью фона на |
|
| fkey_background_color |
242 242 242 |
Управляет цветом и прозрачностью |
|
| fkey_pressed_background_color |
61 133 198 |
Управляет цветом и прозрачностью фона |
|
| fkey_separator_color |
182 183 184 |
Управляет цветом и прозрачностью |
|
| fkey_label_color |
123 124 126 |
Управляет цветом и прозрачностью текста, |
|
| fkey_pressed_label_color |
242 242 242 |
Управляет цветом и прозрачностью текста, |
|
| selected_line_background_color |
255 255 255 |
Управляет цветом и прозрачностью фона |
|
| selected_line_indicator_color |
61 133 198 |
Управляет цветом и прозрачностью |
|
| selected_line_text_color |
61 133 198 |
Управляет цветом и прозрачностью текста в |
|
| line_background_color |
242 242 242 |
Управляет цветом и прозрачностью фона для |
|
| line_separator_color |
226 226 226 |
Управляет цветом и прозрачностью |
|
| scrollbar_color |
182 183 184 |
Управляет цветом и прозрачностью полосы |
|
| cursor_color |
61 133 198 |
Управляет цветом и прозрачностью курсора, |
|
| status_msgs_background_color |
242 242 242 |
Управляет цветом и прозрачностью фона для |
|
| status_msgs_border_color |
182 183 184 |
Управляет цветом и прозрачностью границы |
|
| smartlabel_background_color |
242 242 242 |
Управляет цветом и прозрачностью фона SmartLabel. |
|
| smartlabel_pressed_background_color |
61 133 198 |
Управляет цветом и прозрачностью фона SmartLabel при нажатии функциональной клавиши. |
|
| smartlabel_separator_color |
182 183 184 |
Управляет цветом и прозрачностью линии |
|
| smartlabel_label_color |
123 124 126 |
Управляет цветом и прозрачностью текста, |
|
| smartlabel_pressed_label_color |
242 242 242 |
Управляет цветом и прозрачностью текста, |
Теперь, когда мы знаем где и что находится мы можем перейти в веб-интерфейс телефона в раздел Setup/Preferences, далее вторая закладка Appearance:
Здесь можно изменять значения, а если нажать на вопросительный знак, то вы попадете на страницу с описанием, где в том числе есть заметка, как указать данное значение, если использовать XML-файл для конфигурации. Например для нашей первой строки «Text Color»:
2. Изменение шрифтов
Шрифты на всех телефонах snom свободно настраиваются и могут быть изменены с помощью автопровижинга. Помните, что если текущий используемый TrueType или растровый шрифт заменен на пользовательский, при визуализации текста могут возникнуть определенные несоответствия, поскольку пользовательский интерфейс оптимизирован для одного конкретного шрифта TrueType.
Чтобы заменить любой шрифт, необходимо создать tar-файл, содержащий новый шрифт, названный должно полностью совпадать со старым шрифтом, который будет заменен.
«tar -cvf fonts.tar fontfile.ttf»
Затем на этот tar-файл нужно дать ссылку в xml-файле, чтобы он правильно загружался при перезагрузке телефона.
<?xml version="1.0" encoding="utf-8" ?>
<settings>
<uploads>
<file url="http://192.168.23.54:8080/fonts.tar" type="font" />
</uploads>
</settings>Более подробно, какие шрифты предустановлены, можно найти у нас на wiki
Таким образом вы можете загрузить свой собственны шрифт в телефон.
3. Загрузка фонового изображения
На примере покажем, как загрузить правильно фон и какие настройки имеют значение.
Загрузить фоновое изображение можно через Веб-интерфейс → Preferences → Appearance:
В этом параметре должен быть установлен доступный URL-адрес изображения. Как только параметр будет изменен, фоновое изображение будет заменено.
Или вы можете изменить эту настройку с помощью автопровижинга, добавив тег <custom_bg_image_url> с действительным значением в ваш xml-файл.
Если этот параметр пустой или URL-адрес изображения неверны, то будет использоваться фоновое изображение телефона по умолчанию.
Важно: если вы используете программное обеспечение до версии 10.1.33.33, необходимо установить значение цвета фонового плана на полностью прозрачный.
Это необходимо сделать, так как фоновое изображение расположено на слое под стандартным цветом фона. Этого можно добиться путем установки альфа-значения 0 для цвета фона.
Начиная с версии прошивки 10.1.33.33, цветовая прозрачность фона автоматически адаптируется к отображаемому на телефоне фоновому изображению. Однако она не будет полностью прозрачной. Для достижения полной прозрачности настройка <background_color> все равно должна иметь альфа-значение 0.
Для правильного отображения фонового изображения его необходимо сохранить в формате png, jpg, gif, bmp или tga. Мы настоятельно рекомендуем использовать файлы .png и оптимизировать их с помощью "optipng", чтобы уменьшить размер файла и повысить производительность.
Размер изображения в завсимости от модели:
| Модель | Разрешение |
|---|---|
| D375/ D385/ D785 | 480 x 272 |
| D335/ D735/ D765 | 320 x 240 |
| D717 | 426 x 240 |
4. Пример конфигурации тем
1. «Dark Theme»:
<?xml version="1.0" encoding="utf-8"?>
<settings>
<phone-settings>
<!-- When the background image is set, it automatically applies alpha changes to all elements.
Therefore it has to be listed at the beginning, so that all styles afterwards correctly apply-->
<custom_bg_image_url perm=""></custom_bg_image_url>
<!-- Background color is set to be not transparent because no background image is configured -->
<background_color perm="">43 49 56 255</background_color>
<titlebar_text_color perm="">242 242 242 255</titlebar_text_color>
<titlebar_background_color perm="">43 49 56 255</titlebar_background_color>
<text_color perm="">242 242 242 255</text_color>
<subtext_color perm="">224 224 224 255</subtext_color>
<extratext_color perm="">158 158 158 255</extratext_color>
<extratext2_color perm="">158 158 158 255</extratext2_color>
<fkey_background_color perm="">43 49 56 255</fkey_background_color>
<fkey_pressed_background_color perm="">61 133 198 255</fkey_pressed_background_color>
<fkey_separator_color perm="">70 90 120 255</fkey_separator_color>
<fkey_label_color perm="">224 224 224 255</fkey_label_color>
<fkey_pressed_label_color perm="">242 242 242 255</fkey_pressed_label_color>
<line_background_color perm="">242 242 242 0</line_background_color>
<selected_line_background_color perm="">50 60 80 255</selected_line_background_color>
<selected_line_indicator_color perm="">61 133 198 255</selected_line_indicator_color>
<selected_line_text_color perm="">61 133 198 255</selected_line_text_color>
<line_separator_color perm="">70 90 120 255</line_separator_color>
<scrollbar_color perm="">70 90 120 255</scrollbar_color>
<cursor_color perm="">61 133 198 255</cursor_color>
<status_msgs_background_color perm="">43 49 56 255</status_msgs_background_color>
<status_msgs_border_color perm="">70 90 120 255</status_msgs_border_color>
<!-- Settings for SmartLabel -->
<smartlabel_background_color perm="">43 49 56 255</smartlabel_background_color>
<smartlabel_pressed_background_color perm="">61 133 198 255</smartlabel_pressed_background_color>
<smartlabel_separator_color perm="">70 90 120 255</smartlabel_separator_color>
<smartlabel_label_color perm="">224 224 224 255</smartlabel_label_color>
<smartlabel_pressed_label_color perm="">242 242 242 255</smartlabel_pressed_label_color>
</phone-settings>
</settings>2. «Colorful Theme»:
<?xml version="1.0" encoding="utf-8"?>
<settings>
<phone-settings>
<!-- When the background image is set, it automatically applies alpha changes to all elements.
Therefore it has to be configured at the beginning so that all styles afterwards correctly apply-->
<custom_bg_image_url perm="">http://192.168.0.1/background.png</custom_bg_image_url>
<!-- Background color has to be transparent because a background image is configured -->
<background_color perm="">0 0 0 0</background_color>
<titlebar_text_color perm="">242 242 242 255</titlebar_text_color>
<titlebar_background_color perm="">43 49 56 40</titlebar_background_color>
<text_color perm="">242 242 242 255</text_color>
<subtext_color perm="">224 224 224 255</subtext_color>
<extratext_color perm="">224 224 224 255</extratext_color>
<extratext2_color perm="">224 224 224 255</extratext2_color>
<fkey_background_color perm="">43 49 56 40</fkey_background_color>
<fkey_pressed_background_color perm="">43 49 56 140</fkey_pressed_background_color>
<fkey_separator_color perm="">0 0 0 0</fkey_separator_color>
<fkey_label_color perm="">224 224 224 255</fkey_label_color>
<fkey_pressed_label_color perm="">224 224 224 255</fkey_pressed_label_color>
<line_background_color perm="">0 0 0 0</line_background_color>
<selected_line_background_color perm="">43 49 56 40</selected_line_background_color>
<selected_line_indicator_color perm="">61 133 198 255</selected_line_indicator_color>
<selected_line_text_color perm="">61 133 198 255</selected_line_text_color>
<line_separator_color perm="">0 0 0 0</line_separator_color>
<scrollbar_color perm="">61 133 198 255</scrollbar_color>
<cursor_color perm="">61 133 198 255</cursor_color>
<status_msgs_background_color perm="">61 133 198 255</status_msgs_background_color>
<status_msgs_border_color perm="">61 133 198 255</status_msgs_border_color>
<!-- Settings for SmartLabel -->
<smartlabel_background_color perm="">43 49 56 40</smartlabel_background_color>
<smartlabel_pressed_background_color perm="">43 49 56 140</smartlabel_pressed_background_color>
<smartlabel_separator_color perm="">0 0 0 0</smartlabel_separator_color>
<smartlabel_label_color perm="">242 242 242 255</smartlabel_label_color>
<smartlabel_pressed_label_color perm="">242 242 242 255</smartlabel_pressed_label_color>
</phone-settings>
</settings>Надеемся, эта тема поможет разобраться с вопросом ручной кастомизации.
Продолжение следует…
