Back ...

Webview customization


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:

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:

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 copy-rename-gui-tet
  2. Edit my-gui.wgp, change the value of parameter "name" to "My-gui", value of "htmlfile" to "my-gui.html". Save. edit-gui-tet-wgp
  3. Open menu Webview => choose webview package. Choose My-gui and click OK. select-gui-tet
  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 ...