Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Nhiều người trong chúng ta thực sự thích thú khi có thứ gì đó được tạo ra cho mình! Khi chúng ta cảm nhận được một “mức độ sở hữu” nhất định, điều này cho phép chúng ta nổi bật giữa nền “khối màu xám”. Những chiếc ghế, bàn, máy tính giống nhau, v.v. Mọi thứ đều giống như những người khác!

Đôi khi, ngay cả một điều nhỏ nhặt như logo công ty trên một chiếc bút thông thường cũng khiến nó trở nên đặc biệt và do đó có giá trị hơn.

Đồng ý rằng hầu hết khách hàng sẽ thích điện thoại Snom thay vì điện thoại thông thường (giống như những người khác), một chiếc điện thoại mà họ liên tưởng đến điều gì đó đặc biệt/cá nhân. Tôi chắc chắn rằng nếu bạn là nhà cung cấp giải pháp điện thoại, bạn cũng sẽ đồng ý liên kết công ty của mình với nhà cung cấp dịch vụ “đặc biệt” này trong mắt khách hàng.

Nhiều người trong số các bạn biết rằng Snom có ​​thể cung cấp các cấp độ tùy chỉnh điện thoại để bàn rất khác nhau: từ những thay đổi phần cứng và phần mềm rất phức tạp đòi hỏi thời gian phát triển cho đến những thay đổi rất đơn giản có sẵn cho tất cả mọi người, hoàn toàn miễn phí. Đó là điều sau mà chúng tôi muốn nói với bạn ngày hôm nay.

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Phần sụn menu của điện thoại của chúng tôi được xây dựng trên XML và cho phép bạn tùy chỉnh linh hoạt giao diện người dùng của các tham số sau (danh sách ngắn):

  • hình nền
  • phông chữ và màu sắc
  • biểu tượng
  • ngôn ngư
  • nhạc chuông
  • gán phím
  • và nhiều hơn nữa

Trong phần đầu tiên của bài viết này, chúng tôi sẽ nói về cách bạn có thể thay đổi giao diện trực quan của điện thoại Snom của mình. Hãy nói về một vài điểm:

  1. Thay đổi bảng màu
  2. Thay đổi phông chữ
  3. Đang tải hình nền
  4. Ví dụ chủ đề

Trong Phần 2 của bài viết (sắp ra mắt), chúng tôi sẽ nói về phần còn lại của các tùy chọn tùy chỉnh. Vì thế đừng “chuyển đổi”.

1. Thay đổi cách phối màu

Bắt đầu từ phiên bản firmware 10, giao diện màu của điện thoại có thể được thay đổi hoàn toàn về màu sắc và độ trong suốt. Điều này cho phép bạn tùy chỉnh giao diện người dùng để có mức độ dễ đọc, rõ ràng, tùy chọn màu sắc lý tưởng và các thay đổi khác, chẳng hạn như nhận dạng công ty của công ty.

Để dễ hiểu hơn, có sơ đồ mô tả cài đặt màu sắc:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Màu sắc được điều chỉnh bằng giá trị RGB

Tên

Giá trị hợp lệ

Giá trị theo
vỡ nợ

Описание

thanh tiêu đề_text_color

Nhóm 4 người
các số, mỗi số >=0 và <=255.

đỏ, xanh, màu lam, alpha (giá trị alpha 255 có nghĩa là hoàn toàn
hiển thị và 0 hoàn toàn trong suốt).

51 51 51 255

Kiểm soát màu sắc và độ trong suốt của văn bản trong
dòng tiêu đề, ví dụ: “Ngày”, “Thời gian”,
"Tên", v.v.

văn bản màu

51 51 51
255

Kiểm soát màu sắc và độ trong suốt
nội dung văn bản chẳng hạn như “Menu”, “Chế độ chờ” và
tất cả các màn hình văn bản chính khác.

văn bản phụ_color

123 124 126 255

Kiểm soát màu sắc và độ trong suốt
văn bản phụ, ví dụ: “Menu”, “Chế độ chờ” và tất cả
các màn hình văn bản phụ khác.

ngoại văn_màu

123 124 126
255

Kiểm soát màu sắc và độ trong suốt của lần đầu tiên
dòng văn bản hiển thị ở phía bên phải của menu, chẳng hạn như lịch sử cuộc gọi, ngày tháng và
thời gian.

ngoại văn2_color

123 124 126
255

Kiểm soát màu sắc và độ trong suốt của giây
dòng văn bản hiển thị ở phía bên phải của menu, chẳng hạn như lịch sử cuộc gọi, ngày tháng và
thời gian.

thanh tiêu đề_background_color

226 226 226
255

Kiểm soát màu nền và độ trong suốt
dòng tiêu đề

màu nền

242 242 242
255

Kiểm soát màu sắc và độ trong suốt của nền trên
mọi màn hình.

fkey_background_color

242 242 242
255

Kiểm soát màu sắc và độ trong suốt
các nút nhạy cảm với ngữ cảnh.

fkey_ép_background_color

61 133 198
255

Kiểm soát màu nền và độ trong suốt
các phím nhạy ngữ cảnh khi được nhấn.

fkey_separator_color

182 183 184
255

Kiểm soát màu sắc và độ trong suốt
Đường phân chia nút theo ngữ cảnh

fkey_label_color

123 124 126
255

Kiểm soát màu sắc và độ trong suốt của văn bản,
được sử dụng trong các nút nhạy cảm với ngữ cảnh

fkey_ép_label_color

242 242 242
255

Kiểm soát màu sắc và độ trong suốt của văn bản,
được sử dụng trong các nút nhạy cảm với ngữ cảnh khi được nhấp vào

đã chọn_line_background_color

255 255 255
255

Kiểm soát màu nền và độ trong suốt
dòng đã chọn, ví dụ như trong Menu hoặc bất kỳ màn hình có thể chọn nào

đã chọn_line_indicator_color

61 133 198
255

Kiểm soát màu sắc và độ trong suốt
chỉ báo ở bên trái của dòng đã chọn, ví dụ: trong Menu hoặc bất kỳ màn hình nào có
phần tử đã chọn

đã chọn_line_text_color

61 133 198
255

Kiểm soát màu sắc và độ trong suốt của văn bản trong
dòng đã chọn, ví dụ như trong Menu hoặc bất kỳ màn hình nào có các mục đã chọn.
Đồng thời kiểm soát màu của biểu tượng hiện tại khi nó chuyển qua
các tùy chọn khác nhau trong cửa sổ nhập liệu

dòng_background_color

242 242 242
0

Kiểm soát màu nền và độ trong suốt của
từng dòng của Menu hoặc mục menu hoặc bất kỳ mục danh sách nào.

dòng_dấu phân cách_color

226 226 226
255

Kiểm soát màu sắc và độ trong suốt
đường phân chia giữa các menu hoặc các mục menu và chỉ được hiển thị
khi có nhiều hơn một mục được chọn.

thanh cuộn_color

182 183 184
255

Kiểm soát màu sắc và độ trong suốt của sọc
cuộn hiển thị trên bất kỳ màn hình nào.

con trỏ_màu

61 133 198
255

Kiểm soát màu sắc và độ trong suốt của con trỏ,
hiển thị trên màn hình bằng tín hiệu đầu vào.

status_msgs_background_color

242 242 242
255

Kiểm soát màu nền và độ trong suốt của
thông báo trạng thái xuất hiện trên màn hình chờ và màn hình cuộc gọi. Giá trị này cũng áp dụng cho nền
thay đổi âm lượng.

status_msgs_border_color

182 183 184
255

Kiểm soát màu sắc và độ trong suốt của đường viền
để biết các thông báo trạng thái xuất hiện trên màn hình chờ và màn hình cuộc gọi. Giá trị này cũng áp dụng cho đường viền
thay đổi âm lượng.

nhãn thông minh_background_color

242 242 242
255

Kiểm soát màu nền và độ trong suốt của SmartLabel.

thông minh_ép_background_color

61 133 198
255

Kiểm soát màu nền và độ trong suốt của SmartLabel khi nhấn phím chức năng.

nhãn thông minh_separator_color

182 183 184
255

Kiểm soát màu sắc và độ trong suốt của đường kẻ
dấu phân cách giữa mỗi phím chức năng SmartLabel.

nhãn_nhãn_màu thông minh

123 124 126
255

Kiểm soát màu sắc và độ trong suốt của văn bản,
được sử dụng trong SmartLabel.

nhãn thông minh_ép_label_color

242 242 242
255

Kiểm soát màu sắc và độ trong suốt của văn bản,
được sử dụng trong SmartLabel khi bạn nhấn phím chức năng.

Bây giờ chúng ta đã biết vị trí và cái gì nằm ở đâu, chúng ta có thể truy cập giao diện web của điện thoại tới phần Thiết lập / Tùy chọn, sau đó là tab thứ hai Xuất hiện:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Tại đây, bạn có thể thay đổi các giá trị và nếu nhấp vào dấu chấm hỏi, bạn sẽ được đưa đến trang mô tả, tại đây cũng có ghi chú về cách chỉ định giá trị này nếu bạn sử dụng tệp XML để định cấu hình. Ví dụ: đối với dòng đầu tiên “Màu văn bản” của chúng tôi:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

2. Thay đổi phông chữ

Phông chữ trên tất cả điện thoại snom đều có thể tùy chỉnh tự do và có thể thay đổi bằng cách sử dụng tính năng tự động cấp phép. Xin lưu ý rằng nếu phông chữ TrueType hoặc bitmap hiện đang được sử dụng được thay thế bằng phông chữ tùy chỉnh thì có thể có một số điểm không nhất quán trong kết xuất văn bản do giao diện người dùng được tối ưu hóa cho một phông chữ TrueType cụ thể.

Để thay thế bất kỳ phông chữ nào, bạn phải tạo một tệp tar chứa phông chữ mới, phông chữ này phải được đặt tên giống hệt với phông chữ cũ sẽ được thay thế.

"tar -cvf phông chữ.tar fontfile.ttf"

Sau đó, tệp tar này cần được tham chiếu trong tệp xml để tải chính xác khi điện thoại được khởi động lại.

<?xml version="1.0" encoding="utf-8" ?>

<settings>

 <uploads>

  <file url="http://192.168.23.54:8080/fonts.tar" type="font" />

 </uploads>

</settings>

Bạn có thể tìm thêm thông tin chi tiết về những phông chữ được cài đặt sẵn trên trang web của chúng tôi. wiki
Bằng cách này bạn có thể tải phông chữ của riêng mình về điện thoại.

3. Tải ảnh nền lên

Bằng một ví dụ, chúng tôi sẽ chỉ ra cách tải nền chính xác và những cài đặt quan trọng.

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Bạn có thể tải ảnh nền lên qua giao diện Web → Sở thích (Preferences) Xuất hiện:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Cài đặt này phải được đặt thành URL hình ảnh có thể truy cập được. Khi cài đặt được thay đổi, hình nền sẽ được thay thế.

Hoặc bạn có thể thay đổi cài đặt này bằng cách sử dụng tính năng tự động cấp phép bằng cách thêm thẻ với giá trị hợp lệ vào tệp xml của bạn.

Nếu tham số này trống hoặc URL hình ảnh không chính xác, hình nền mặc định của điện thoại sẽ được sử dụng.

Điều quan trọng là: Nếu bạn đang sử dụng phần mềm trước phiên bản 10.1.33.33, bạn phải đặt giá trị màu nền thành trong suốt hoàn toàn.

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Điều này là cần thiết vì ảnh nền nằm ở một lớp bên dưới màu nền tiêu chuẩn. Điều này có thể đạt được bằng cách đặt giá trị alpha thành 0 cho màu nền.

Bắt đầu với phiên bản chương trình cơ sở 10.1.33.33, độ trong suốt của màu nền sẽ tự động điều chỉnh cho phù hợp với hình nền hiển thị trên điện thoại. Tuy nhiên, nó sẽ không hoàn toàn minh bạch. Để đạt được sự minh bạch hoàn toàn, hãy điều chỉnh vẫn phải có giá trị alpha là 0.

Để hiển thị hình nền chính xác, bạn phải lưu nó ở định dạng png, jpg, gif, bmp hoặc tga. Chúng tôi thực sự khuyên bạn nên sử dụng tệp .png và tối ưu hóa chúng bằng "sự lựa chọn" để giảm kích thước tệp và cải thiện hiệu suất.

Kích thước hình ảnh tùy theo model:

kiểu mẫu
giấy phép

D375/ D385/ D785
480 x 272

D335/ D735/ D765
320 x 240

D717
426 x 240

4. Ví dụ về cấu hình chủ đề

1. “Chủ đề đen tối”:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Xem

<?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. “Chủ đề đầy màu sắc”:

Tự làm hoặc cách tùy chỉnh điện thoại Snom của bạn. Phần 1 màu sắc, font chữ, nền

Xem

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

Chúng tôi hy vọng chủ đề này sẽ giúp bạn hiểu được vấn đề tùy chỉnh thủ công.

Để được tiếp tục ...

Nguồn: www.habr.com

Thêm một lời nhận xét