Зроби сам або як кастомізувати телефон Snom. Частина 1 кольору, шрифт, фон

Багатьом з нас дуже подобається, коли будь-яка річ зроблена під нас! Коли ми відчуваємо якийсь «рівень власності», який дозволяє виділятися на тлі «сірої маси». Одні й самі стільці, столи, комп'ютери тощо. Як у всіх!

Деколи навіть така дрібниця, як логотип компанії на звичайній ручці, дозволяє нам відчувати її особливою і тому ціннішою.

Погодьтеся, що більшість замовників віддасть перевагу замість звичайного (як у всіх) телефону Snom, телефону, який асоціюється у них з чимось особливим/особистим. Впевнений, що якщо ви є постачальником телефонних рішень, ви також погодилися б асоціювати вашу компанію з постачальником цього «особливого» в очах замовника.

Багато хто з вас знає, що Snom може запропонувати дуже різні рівні кастомізації настільних телефонів: від дуже складних апаратних та програмних змін, які вимагають час на розробку, до найпростіших, які доступні всім з «коробки» абсолютно безкоштовно. Саме про останні ми хочемо вам розповісти сьогодні.

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

• фонове зображення
• шрифт та колір
• іконки
• мова
• мелодії дзвінків
• призначення клавіш
• і багато іншого

У цій частині нашої статті ми розповімо про те, як можна змінити візуальне уявлення телефону Snom. Поговоримо про кілька пунктів:

1. Зміна колірної гами
2. Зміна шрифтів
3. Завантаження фонового зображення
4. Приклади тем

У другій частині нашої статті (яка скоро вийде) ми поговоримо про інші можливості кастомізації. Так-що не «перемикайтеся».

1. Зміна колірної гами

Починаючи з версії 10, кольоровий інтерфейс телефону може бути повністю змінений щодо кольору і прозорості. Це дозволяє налаштувати інтерфейс для ідеальної розбірливості, чіткості, колірних переваг і подальшої зміни, наприклад, фірмового стилю компанії.

Для того, щоб було простіше розібратися, існує схема опису налаштування кольорів:

Кольори настроюються за допомогою RGB значень

Найменування

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

Значення по
замовчуванням

Опис

titlebar_text_color

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

червоний, зелений, синій, альфа (значення альфа 255 означає повністю
видимий, а 0 – повністю прозорий).

51 51 51 255

Керує кольором та прозорістю тексту в
рядку заголовка, наприклад, «Дата», «Час»,
«Назва» та ін.

колір_тексту

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

Керує кольором та прозорістю фону
рядки заголовка

Колір фону

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, при натисканні функціональної кнопки.

Тепер, коли ми знаємо де і що знаходиться, ми можемо перейти в веб-інтерфейс телефону в розділ Налаштування/налаштування, далі друга закладка Зовнішній вигляд:

Тут можна змінювати значення, а якщо натиснути на знак питання, то ви потрапите на сторінку з описом, де в тому числі є замітка, як вказати дане значення, якщо використовувати 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>

Докладніше, які шрифти встановлено, можна знайти у нас на вики
Таким чином ви можете завантажити свій власний шрифт у телефон.

3. Завантаження фонового зображення

На прикладі покажемо, як правильно завантажити фон і які настройки мають значення.

Завантажити фонове зображення можна через веб-інтерфейс → переваги → Зовнішній вигляд:

У цьому параметрі має бути встановлена ​​доступна URL-адреса зображення. Як тільки параметр буде змінено, фонове зображення буде замінено.

Або ви можете змінити це налаштування за допомогою автопровіжингу, додавши тег з дійсним значенням у ваш xml-файл.

Якщо цей параметр порожній або URL-адреса зображення неправильні, фонове зображення телефону буде використовуватися за промовчанням.

Важливо: якщо ви використовуєте програмне забезпечення до версії 10.1.33.33, необхідно встановити значення кольору фонового плану повністю прозорим.

Це потрібно зробити, оскільки фонове зображення розташоване на шарі під стандартним кольором фону. Цього можна досягти шляхом встановлення альфа-значення 0 для кольору тла.

Починаючи з версії мікропрограми 10.1.33.33, колірна прозорість фону автоматично адаптується до фонового зображення, що відображається на телефоні. Однак вона не буде повністю прозорою. Для досягнення повної прозорості налаштування однаково повинна мати альфа-значення 0.

Для правильного відображення фонового зображення необхідно зберегти у форматі png, jpg, gif, bmp або tga. Ми настійно рекомендуємо використовувати файли .png та оптимізувати їх за допомогою "вибір", щоб зменшити розмір файлу та підвищити продуктивність."

Розмір зображення в залежності від моделі:

Модель
Роздільна здатність

D375/ D385/ D785
480 х 272

D335/ D735/ D765
320 х 240

D717
426 х 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>

Сподіваємося, ця тема допоможе розібратися із питанням ручної кастомізації.

Далі буде ...

Джерело: habr.com