23.06.2020 13:32
AndreySkolota 6 1100 Источник
Многим из нас очень нравится, когда какая-либо вещь сделана под нас! Когда мы ощущаем некий «уровень собственности», который нам позволяет выделяться на фоне «серой массы». Одни и те же стулья, столы, компьютеры и т.д. Всё как у всех!

Порой даже такая мелочь, как логотип компании на обычной ручке, позволяет нам ощущать её особенной и потому более ценной.

Согласитесь, что большинство заказчиков предпочтёт вместо обычного (как у всех) телефона Snom, телефон, который ассоциируется у них с чем-то особенным/личным. Уверен, что если вы являетесь поставщиком решений по телефонии, вы также согласились бы ассоциировать вашу компанию с поставщиком этого «особенного» в глазах заказчика.

Многие из вас знают, что Snom может предложить очень разные уровни кастомизации настольных телефонов: от очень сложных аппаратных и программных изменений, которые требуют время на разработку, до самых простых, которые доступны всем из «коробки», абсолютно бесплатно. Именно о последнем мы хотим вам рассказать сегодня.

image

Прошивка меню наших телефонов построена на XML и позволяет вам производить гибкую кастомизацию UI следующих параметров (краткий список):

  • фоновое изображение
  • шрифт и цвет
  • иконки
  • язык
  • мелодии звонков
  • назначение клавиш
  • и многое другое

В этой, 1-й части нашей статьи, мы расскажем о том, как можно изменить визуальное представление телефонна Snom. Поговрим о нескольких пунктах:

  1. Изменение цветовой гаммы
  2. Изменение шрифтов
  3. Загрузка фонового изображения
  4. Примеры тем

Во 2-й части нашей статьи (которая скоро выйдет) мы поговорим об остальных возможностях кастомизции. Так-что не «переключайтесь».

1. Изменение цветовой гаммы


Начиная с версии прошивки 10, цветной интерфейс телефона может быть полностью изменен в отношении цвета и прозрачности. Это позволяет настроить пользовательский интерфейс для идеальной разборчивости, четкости, цветовых предпочтений и дальнейшего изменения, например, фирменного стиля компании.

Для того, чтобы было проще разобраться существует схема описания настройки цветов:



Цвета настраиваются с помощью RGB значений

Наименование

Допустимые значения

Значения по
умолчанию

Описание

titlebar_text_color

Группа из 4-х
чисел, каждое >=0 и <=255.


красный, зеленый, синий, альфа (значение альфа 255 означает полностью
видимый, а 0 — полностью прозрачный).

51 51 51 255

Управляет цветом и прозрачностью текста в
строке заголовка, например, «Дата», «Время»,
«Название» и др.

text_color

51 51 51
255

Управляет цветом и прозрачностью
основного текста, например, «Меню», «Режим ожидания» и
всех остальных экранов основного текста.

subtext_color

123 124 126 255

Управляет цветом и прозрачностью
подтекста, например, «Меню», «Режим ожидание» и всех
других подтекстовых экранов.

extratext_color

123 124 126
255

Управляет цветом и прозрачностью первой
строки текста, отображаемой справа в меню, например, история вызовов, дата и
время.

extratext2_color

123 124 126
255

Управляет цветом и прозрачностью второй
строки текста, отображаемой справа в меню, например, история вызовов, дата и
время.

titlebar_background_color

226 226 226
255

Управляет цветом и прозрачностью фона
строки заголовка

background_color

242 242 242
255

Управляет цветом и прозрачностью фона на
каждом экране.

fkey_background_color

242 242 242
255

Управляет цветом и прозрачностью
контекстно-зависимых кнопок.

fkey_pressed_background_color

61 133 198
255

Управляет цветом и прозрачностью фона
контекстно-зависимых клавиш при нажатии.

fkey_separator_color

182 183 184
255

Управляет цветом и прозрачностью
разделительных линий контекстно-зависимых кнопок

fkey_label_color

123 124 126
255

Управляет цветом и прозрачностью текста,
используемого в контекстно-зависимых кнопках

fkey_pressed_label_color

242 242 242
255

Управляет цветом и прозрачностью текста,
используемого в контекстно-зависимых кнопках при нажатии

selected_line_background_color

255 255 255
255

Управляет цветом и прозрачностью фона
выбранной линии, например, в Меню или любом экране с выбираемыми элементами

selected_line_indicator_color

61 133 198
255

Управляет цветом и прозрачностью
индикатора слева от выбранной линии, например, в Меню или любом экране с
выбранными элементами

selected_line_text_color

61 133 198
255

Управляет цветом и прозрачностью текста в
выделенной строке, например, в Меню или любом экране с выбранными элементами.
Также управляет цветом текущего символа при цикличном прохождении через
различные опции в окне ввода

line_background_color

242 242 242
0

Управляет цветом и прозрачностью фона для
каждой строки Меню или пункта меню, или любого пункта списка.

line_separator_color

226 226 226
255

Управляет цветом и прозрачностью
разделительной линии между меню или пунктами меню и показывается только
тогда, когда доступно более чем один выбранный элемент.

scrollbar_color

182 183 184
255

Управляет цветом и прозрачностью полосы
прокрутки, отображаемой на любом экране.

cursor_color

61 133 198
255

Управляет цветом и прозрачностью курсора,
отображаемого на экранах с помощью входного сигнала.

status_msgs_background_color

242 242 242
255

Управляет цветом и прозрачностью фона для
сообщений о состоянии, которые появляются на экранах ожидания и вызова. Это значение также применяется к фону
изменения громкости.

status_msgs_border_color

182 183 184
255

Управляет цветом и прозрачностью границы
для сообщений о состоянии, которые появляются на экранах ожидания и вызова. Это значение также применяется к границе
изменения громкости.

smartlabel_background_color

242 242 242
255

Управляет цветом и прозрачностью фона SmartLabel.

smartlabel_pressed_background_color

61 133 198
255

Управляет цветом и прозрачностью фона SmartLabel при нажатии функциональной клавиши.

smartlabel_separator_color

182 183 184
255

Управляет цветом и прозрачностью линии
разделителя между каждой функциональной клавишей SmartLabel.

smartlabel_label_color

123 124 126
255

Управляет цветом и прозрачностью текста,
используемого в SmartLabel.

smartlabel_pressed_label_color

242 242 242
255

Управляет цветом и прозрачностью текста,
используемого в SmartLabel, при нажатии функциональной клавиши.





Теперь, когда мы знаем где и что находится мы можем перейти в веб-интерфейс телефона в раздел 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>


Надеемся, эта тема поможет разобраться с вопросом ручной кастомизации.

Продолжение следует…