Skip to main content

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:
function main() {
    ui.layout("index", "index.html");
}

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​

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

Start Script start​

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

Stop Script stopTask​

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

Is Script Running isScriptRunning​

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

Get UI Config getConfig​

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

Remove UI Config removeConfig​

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

Save UI Config saveConfig​

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

Get All UI Config getAllConfig​

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

Pause and Resume​

Pause/Resume setScriptPause​

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

function checkPause() {
    window.ec.isScriptPause(function (resp) {
        alert("isScriptPause " + resp)
    });
}

Pause State isScriptPause​

function checkPause() {
    window.ec.isScriptPause(function (resp) {
        // resp = true if paused
        alert("isScriptPause " + resp)
    });
}

Start Debug Server​

startDebugServer Start Debug Server​

  • Packaged apps can also start the debug server for IDE connection
  • @return boolean true = success, false = failure
function main() {
    logd(ui.startDebugServer())
}

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
 // Injection in ui.js
function main() {
    // Register a new extension in the UI
    ui.registeH5Function("customFunction", function (data) {
        logd("h5 call-> " + data);
        // Data returned to the web page
        return new Date().toString()
    })
    ui.layout("main", "main.html");
}

main();

Calling from the web page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="test()">Test Extension Function</button>
<script>
    function test() {
        // Call the extension injected from ui.js
        window.ec.call('customFunction',
                JSON.stringify({'action': '111'}),
                function (resp) {
                    console.log("ddd " + resp)
                });

    }
</script>
</body>
</html>