Back ...

Webview customization

Overview

This is a quickstart on how to customize a webview app. As an example, we will customize gui-tet (OSD webview app).

Required skills: Front-end web development (html, css, javascript).

Other important things to read before start:

• You might want to know what is Webview
• How to enable debug.

WGP file

Each webview apps is defined by a file .wgp file. .wgp file can be located any where in /localresources/custom. This is file gui-tet.wgp in folder /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"
}

There are parameters:

• wg_type: type of webview: 0-main window; 1-on-screen display; 2-Background; 3-App. In this file, it is 1 because it is an on-screen display component (it is interface on video window).
• name: display name in webview package selection
• htmlfile: html file to load as main app
• htmlfile_settings: html file to load as a setting window
• htmlfile_remotecontrol: html file to load as a remote control (can be open from mobile devices to control the main app)
• thumbnailfile: image file to show as preview in webview package selection

How to start

1. Copy original .wgp file and .html file (in example gui-tet.wgp and gui-tet.html) as my-gui.wgp and my-gui.html
2. Edit my-gui.wgp, change the value of parameter "name" to "My-gui", value of "htmlfile" to "my-gui.html". Save.
3. Open menu Webview => choose webview package. Choose My-gui and click OK.
4. Use menu Webview => on-screen display => open debug to open debug (what you edit in debug window won't be saved; you need to copy modification to html, css file).
5. Use program like Vscode to edit html, javascript, css
6. Use menu Webview => on-screen display => refresh to reload the code you has edited.

Watch this video for step by step instructions:

Back ...