Сделай сам или как кастомизировать телефон Snom. Часть 1 цвета, шрифт, фон

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

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

    Согласитесь, что большинство заказчиков предпочтёт вместо обычного (как у всех) телефона 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>


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

    Продолжение следует…
    Snom Technology GmbH
    Snom. German Engineered. First in VoIP.

    Comments 6

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

        А как у Snom с тем, чего ждешь от телефона: стабильностью и неглючностью?


        Цветной экран можно пережить, глюки бы не хотелось «переживать».

          0
          Добрый день! Скажу так, он вам быстрее надоест, чем сломается. На сегодняшний день мы имеем статистику, по миру, 0.01% брака по телефонам.
            0

            Это вы про физическую надежность. Я не знаю, как их делают, может, и правда не китайцы по заказу немцев (хотя чаще в России марки, звучащие по-немецки — это кривоватый российский проект на базе китайской референс-модели, еще и выпускаемый не по-дорогому — т.е. ровно в режиме «пипл схавает», да еще с немецким-то именем).


            Я про софтовую стабильность и безглючностью. Даже просто SIP не все вендоры осиливают сделать беспроблемно работающим, а у вас еще и развитая сервисная часть в устройствах. Купишь партию в контору, и прыгай потом с «особенностями» смайлик?

              0
              Я про физическую и программную надежность. ПО на unix и прежде чем попасть в релиз новой версии ПО, наши инженеры, с присущей немецкой дотошностью, все тестирует по много раз.
              Немного истории, Snom был основан в Берлине более 20 лет назад, так там и находится, и за это время ни куда не переезжал. Кроме того, это не секрет, что дизайн, разработка ПО и контроль качество — немецкое, сборка осуществляется на заводе VTech в Гонконге. На сегодня Snom не сильно известен на российском рынке, тем не менее, мы одни из первых, кто изобрёл SIP-телефон и занимаем лидирующие позиции в Европе.
              Надеюсь и в России мы сможем добиться таких же результатов, так как цена\качество очень сильно привлекательны. По цене немного дороже китайских вендоров, вы получаете действительно качественный продукт. Как доказательство моих слов — 3 года международной гарантии на все устройства snom. Мало кто из вендоров SIP-телефонов дает такую гарантию.

        Only users with full accounts can post comments. Log in, please.