自分で行うか、Snom 電話をカスタマイズする方法。 パート 1 色、フォント、背景

私たちの多くは、自分のために何かが作られると本当に嬉しいのです。 私たちが一定の「所有権のレベル」を感じるとき、それによって私たちは「灰色の塊」の背景から目立つことができます。 同じ椅子、テーブル、コンピューターなど。 すべてが他の人と同じです！

場合によっては、普通のペンに会社のロゴなどの小さなものがあるだけで、そのペンが特別なものに感じられ、より価値のあるものになることがあります。

ほとんどの顧客は、（他の人たちと同じように）通常の電話ではなく、何か特別/個人的なものを連想させる Snom 電話を好むことに同意します。 あなたがテレフォニー ソリューション プロバイダーであれば、顧客にとってこの「特別な」サービスを提供するプロバイダーと自社を結び付けることに同意するでしょう。

多くの人は、Snom が非常にさまざまなレベルのデスクトップ電話のカスタマイズを提供できることを知っています。開発時間が必要な非常に複雑なハードウェアとソフトウェアの変更から、誰でもすぐに完全に無料で利用できる非常に単純なものまでです。 今日お話ししたいのは後者です。

電話機のメニュー ファームウェアは XML に基づいて構築されており、次のパラメータ (短いリスト) の UI を柔軟にカスタマイズできます。

• 背景画像
• フォントと色
• アイコン
• 言語
• 着信音
• キーの割り当て
• そしてもっと

この記事の最初の部分では、Snom 電話の外観を変更する方法について説明します。 いくつかのポイントについてお話しましょう。

1. 色の変更
2. フォントの変更
3. 背景画像の読み込み
4. トピックの例

記事のパート 2 (近日公開予定) では、残りのカスタマイズ オプションについて説明します。 だから「切り替え」はしないでください。

1.配色を変更する

ファームウェア バージョン 10 以降、電話機のカラー インターフェイスは色と透明度の点で完全に変更できるようになりました。 これにより、ユーザー インターフェイスをカスタマイズして、理想的な読みやすさ、明瞭さ、色の設定、さらには会社のコーポレート アイデンティティなどの変更を行うことができます。

理解しやすくするために、色の設定を説明するためのスキームがあります。

色はRGB値を使用して調整されます

名前

有効な値

による価値観
ディフォルト

説明

タイトルバーのテキストの色

4人グループ
数値、それぞれ >=0 および <=255。

赤, グリーン, ブルー, アルファ (アルファ値 255 は完全を意味します
表示され、0 は完全に透明です)。

51 51 51 255

テキストの色と透明度を制御します。
タイトル行、たとえば、「日付」、「時刻」、
「名前」など

テキストの色

51 51 51
255

色と透明度を制御します
「メニュー」「スタンバイモード」などの本文
他のすべてのメインテキスト画面。

サブテキストの色

123 124 126 255

色と透明度を制御します
サブテキスト、たとえば「メニュー」、「スタンバイモード」など
他のサブテキスト画面。

エクストラテキストカラー

123 124 126
255

最初の色と透明度を制御します
メニューの右側に表示されるテキスト行（通話履歴、日付、メッセージなど）
時間。

エクストラテキスト2_カラー

123 124 126
255

XNUMX番目の色と透明度を制御します
メニューの右側に表示されるテキスト行（通話履歴、日付、メッセージなど）
時間。

タイトルバーの背景の色

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

テキストの色と透明度を制御します。
クリックされたときにコンテキスト依存ボタンで使用されます

選択されたラインの背景色

255 255 255
255

背景色と透明度を制御します
メニューや選択可能な画面などで選択された行

selected_line_indicator_color

61 133 198
255

色と透明度を制御します
たとえば、メニューやその他の画面で、選択した行の左側にあるインジケーター
選択された要素

selected_line_text_color

61 133 198
255

テキストの色と透明度を制御します。
選択された行、たとえばメニューや選択された項目のある画面など。
現在のシンボルが循環する際の色も制御します。
入力ウィンドウのさまざまなオプション

線の背景の色

242 242 242
0

背景色と透明度を制御します。
メニュー、メニュー項目、またはリスト項目の各行。

線区切り文字の色

226 226 226
255

色と透明度を制御します
メニューまたはメニュー項目間の分割線であり、のみ表示されます。
選択した項目が複数ある場合。

スクロールバーの色

182 183 184
255

ストライプの色と透明度を制御します
どの画面でもスクロール表示されます。

カーソルの色

61 133 198
255

カーソルの色と透明度を制御します。
入力信号を使用して画面に表示されます。

status_msgs_background_color

242 242 242
255

背景色と透明度を制御します。
アイドル画面と通話画面に表示されるステータス メッセージ。 この値は背景にも適用されます
音量が変化します。

status_msgs_border_color

182 183 184
255

境界線の色と透明度を制御します
アイドル画面と通話画面に表示されるステータス メッセージについては、 この値は境界線にも適用されます
音量が変化します。

スマートラベルの背景色

242 242 242
255

SmartLabel の背景色と透明度を制御します。

スマートラベル_プレス_背景_色

61 133 198
255

ファンクション キーが押されたときの SmartLabel の背景色と透明度を制御します。

スマートラベル_セパレーター_カラー

182 183 184
255

線の色と透明度を制御します
各 SmartLabel ファンクション キー間の区切り文字。

スマートラベル_ラベル_カラー

123 124 126
255

テキストの色と透明度を制御します。
SmartLabel で使用されます。

スマートラベル_プレス_ラベル_カラー

242 242 242
255

テキストの色と透明度を制御します。
SmartLabel でファンクション キーを押したときに使用されます。

どこに何があるかがわかったので、携帯電話の Web インターフェイスにアクセスしてセクションに移動します。 設定/設定、次に XNUMX 番目のタブ 外観:

ここで値を変更できます。疑問符をクリックすると説明ページが表示されます。このページには、構成に XML ファイルを使用する場合にこの値を指定する方法に関する注記もあります。 たとえば、最初の行「テキストの色」の場合:

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>

プリインストールされているフォントの詳細については、当社の Web サイトをご覧ください。 ウィキ
この方法で、独自のフォントを携帯電話にダウンロードできます。

3. 背景画像をアップロードする

例を使用して、背景を正しく読み込む方法と、どのような設定が重要かを示します。

Web インターフェースから背景画像をアップロードできます → 環境設定 → 外観:

この設定は、アクセス可能な画像 URL に設定する必要があります。 設定を変更すると、背景画像が置き換えられます。

または、タグを追加して自動プロビジョニングを使用してこの設定を変更することもできます有効な値を XML ファイルに追加します。

このパラメータが空の場合、または画像の URL が正しくない場合は、電話機のデフォルトの背景画像が使用されます。

それが重要だ注：バージョン 10.1.33.33 より前のソフトウェアを使用している場合は、背景色の値を完全に透明に設定する必要があります。

背景画像が標準の背景色の下のレイヤーに配置されているため、これが必要になります。 これは、背景色のアルファ値を 0 に設定することで実現できます。

ファームウェア バージョン 10.1.33.33 以降、背景色の透明度は電話機に表示される背景画像に自動的に適応します。 ただし、完全に透明になるわけではありません。 完全な透明度を実現するには、次のように調整します。 アルファ値は 0 のままである必要があります。

背景画像を正しく表示するには、png、jpg、gif、bmp、または tga 形式で保存する必要があります。 .png ファイルを使用し、「」で最適化することを強くお勧めします。オプト」を使用してファイルサイズを削減し、パフォーマンスを向上させます。

モデルに応じた画像サイズ:

モデル
許可証

D375/ D385/ D785
480 x 272

D335/ D735/ D765
320 x 240

D717
426 x 240

4. テーマ構成例

1.「ダークテーマ」:

見て

<?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.「カラフルなテーマ」:

見て

<?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