This is a quickstart on how to customize a webview app. As an example, we will customize gui-tet (OSD webview app).
Other important things to read before start:
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.
"name": "GUI tet 2018 Mau tuat",
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
- Copy original .wgp file and .html file (in example gui-tet.wgp and gui-tet.html) as my-gui.wgp and my-gui.html
- Edit my-gui.wgp, change the value of parameter "name" to "My-gui", value of "htmlfile" to "my-gui.html". Save.
- Open menu Webview => choose webview package. Choose My-gui and click OK.
- 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).
- Use menu Webview => on-screen display => refresh to reload the code you has edited.
Watch this video for step by step instructions: