H5 JS and UI Interaction

Overview

This chapter covers interaction between JS and UI elements

How to Use

In your project’s layout folder, create ui.js and index.html with the following content:

1
function main() {
2
    ui.layout("index", "index.html");
3
}
4

5
main();

This displays index.html in a simple UI

H5 Calls EC Functions

Create a new iOS standalone project — default examples are included

EC H5 Predefined Functions

Is Automation Service Running isServiceOk

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.isServiceOk(function (resp) {
4
    // resp = true if the automation service is running
5
});

Start Script start

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.start(function (resp) {
4
    // resp = true on success
5
});

Stop Script stopTask

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.stopTask(function (resp) {
4
    // resp = true on success
5
});

Is Script Running isScriptRunning

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.isScriptRunning(function (resp) {
4
    // resp = true if the script is running
5
});

Get UI Config getConfig

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.getConfig("key", function (resp) {
4
    console.log(resp)
5
});

Remove UI Config removeConfig

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.removeConfig("key", function (resp) {
4
    console.log(resp)
5
});

Save UI Config saveConfig

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.saveConfig("key", "data", function (resp) {
4
    console.log(resp)
5
});

Get All UI Config getAllConfig

1
// Called from H5, not from the script
2
// Async callback
3
window.ec.getAllConfig(function (resp) {
4
    console.log(resp)
5
});

Pause and Resume

Pause/Resume setScriptPause

1
function pause() {
2
    // setScriptPause
3
    // {"pause":true,"timeout":3330} — pause:true = pause, false = resume
4
    // timeout: when pause=true, milliseconds; >0 auto-resume after that time, 0 = wait for user to resume
5
    window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
6
        checkPause()
7
    });
8
}
9

10
function checkPause() {
11
    window.ec.isScriptPause(function (resp) {
12
        alert("isScriptPause " + resp)
13
    });
14
}

Pause State isScriptPause

1
function checkPause() {
2
    window.ec.isScriptPause(function (resp) {
3
        // resp = true if paused
4
        alert("isScriptPause " + resp)
5
    });
6
}

Start Debug Server

startDebugServer Start Debug Server

Packaged apps can also start the debug server for IDE connection
@return boolean true = success, false = failure

1
function main() {
2
    logd(ui.startDebugServer())
3
}
4

5
main();

Extend H5 Features

registeH5Function Inject Extension Function into H5

Inject a JS function into the web page so H5 can call it for script/HTML interoperability
@param funcName injected function name
@param callback callback — see common example
@return boolean true = success, false = failure

1
 // Injection in ui.js
2
function main() {
3
    // Register a new extension in the UI
4
    ui.registeH5Function("customFunction", function (data) {
5
        logd("h5 call-> " + data);
6
        // Data returned to the web page
7
        return new Date().toString()
8
    })
9
    ui.layout("main", "main.html");
10
}
11

12
main();

Calling from the web page

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>Title</title>
6
</head>
7
<body>
8
<button onclick="test()">Test Extension Function</button>
9
<script>
10
    function test() {
11
        // Call the extension injected from ui.js
12
        window.ec.call('customFunction',
13
                JSON.stringify({'action': '111'}),
14
                function (resp) {
15
                    console.log("ddd " + resp)
16
                });
17

18
    }
19
</script>
20
</body>
21
</html>