Tùy biến webview

Tổng quan

Đây là trợ giúp nhanh về cách tùy biến một webview. Để ví dụ chúng ta sẽ chỉnh sửa gui-tet (OSD Webview - giao diện hiển thị trên màn hình)

Kỹ năng cần thiết: phát triển web Front-end (html, css, javascript).

Những thứ quan trọng khác trước khi bắt đầu:

Tìm hiểu về Webview
Cách bật chế độ debug

File WGP

Mỗi ứng dụng webview được định nghĩa bằng một file .wgp. File này có thể nằm ở bất kỳ đâu trong thư mục /localresources/custom. Dưới đây là file gui-tet.wgp in trong thư mục /osd.

{
  "wg_type": 1,
  "name": "GUI tet 2018 Mau tuat",
  "htmlfile": "gui-tet.html",
  "htmlfile_settings": "gui-with-scoring-settings.html",
  "htmlfile_remotecontrol":  "gui-with-scoring-controller.html",
  "thumbnailfile": "gui-tet.png"
}

Trong file này có các tham số:

wg_type: Kiểu webview app: 0-cửa sổ chính; 1-OSD (giao diện trên cửa sổ video); 2-nền; 3-ứng dụng khác. Trong file này, giá trị là 1 vì đó là OSD.
name: tên hiển thị trong cửa sổ chọn gói webview
htmlfile: file html chính để hiển thị
htmlfile_settings: file html với tư cách cửa sổ thiết lập cấu hình
htmlfile_remotecontrol: file html với tư cách là cửa sổ điều khiển cho màn hình hiển thị (điều khiển từ xa từ điện thoại).
thumbnailfile: ảnh để xem trước trong cửa sổ chọn gói webview

Bắt đầu như thế nào

Sao chép fiel .wgp và .html gốc (trong ví dụ này là gui-tet.wgp và gui-tet.html), và đổi tên thành my-gui.wgp and my-gui.html
Sửa file my-gui.wgp, thay giá trị của tham số "name" thành "My-gui", giá trị của "htmlfile" thành "my-gui.html". Lưu file lại.
Mở menu Webview => choose webview package. Trong cửa sổ này chọn My-Gui.
Dùng menu Webview => on-screen display => open debug để mở cửa sổ debug. Cửa sổ debug rất tiện lợi vì chỉnh sửa sẽ thấy kết quả ngay, nhưng kết quả này không được lưu lại. Bạn phải chỉnh sửa file html mới có thay đổi vĩnh viễn.
Dùng phần mềm soạn thảo như Vscode, notepad,... để sửa file html, javascript, css.
Dùng menu Webview => on-screen display => refresh để tải lại trang, xem những thay đổi mà bạn đã sửa.

Xem video dưới đây để có hướng dẫn từng bước:

Trở lại ...