UI and Script Interoperability

Overview

How to Use

Create a standalone project in the IDE — interaction examples are included by default

H5 → ui.js → Script Call Flow

H5 File Content

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
    <link href="htmljs/bootstrap.min.css" rel="stylesheet">
7
    <script src="htmljs/bootstrap.min.js"></script>
8
    <script src="htmljs/jquery.min.js"></script>
9
</head>
10

11
<body>
12
<div class="alert alert-info" role="alert">
13
    Script Configuration
14
</div>
15
<div style="margin: 10px">
16
    <div class="form-check form-switch">
17
        <input class="form-check-input" type="checkbox" role="switch" id="autoService" disabled>
18
        <label class="form-check-label" for="autoService">Automation Service</label>
19
        <span class="badge text-bg-info bg-primary" onclick="refreshIsServiceOk()">Refresh</span>
20
        <p>Tap the agent app icon<br/>or use the activator to enable automation<br/>
21
            When **Automation Running** appears on the phone, you are ready
22
        </p>
23
    </div>
24
    <br/>
25
    <div class="input-group mb-3">
26
        <span class="input-group-text" id="username1">Name: </span>
27
        <input type="text" class="form-control" placeholder="" id="username" aria-label="username"
28
               aria-describedby="basic-addon1">
29
    </div>
30
    <div class="form-group">
31
        <label>Hobbies: </label>
32
        <label class="checkbox-inline">
33
            <input type="checkbox" name="aihao1" id="aihao1" value="1"> Gaming
34
        </label>
35
        <label class="checkbox-inline">
36
            <input type="checkbox" name="aihao2" id="aihao2" value="2"> Photography
37
        </label>
38
        <label class="checkbox-inline">
39
            <input type="checkbox" name="aihao3" id="aihao3" value="3"> Travel
40
        </label>
41
    </div>
42
    <br/>
43
    <div class="form-group">
44
        <label>Gender: </label>
45
        <label class="radio-inline">
46
            <input type="radio" value="1" name="sex"> Male
47
        </label>
48
        <label class="radio-inline">
49
            <input type="radio" value="2" name="sex"> Female
50
        </label>
51
        <label class="radio-inline">
52
            <input type="radio" value="3" name="sex"> Other
53
        </label>
54
    </div>
55
    <br/>
56
    <div class="input-group mb-3">
57
        <span class="input-group-text" id="basic-addon1">Feature </span>
58
        <select class="form-select" aria-label="" id="func">
59
            <option value="1">Feature 1</option>
60
            <option value="2">Feature 2</option>
61
            <option value="3">Feature 3</option>
62
        </select>
63
    </div>
64
    <div>
65
        <button type="button" class="btn btn-primary" onclick="saveParam()">Save Parameters</button>
66
        <button type="button" class="btn btn-success" onclick="start()">Run Script</button>
67
        <button type="button" class="btn btn-primary" onclick="pause()">Pause</button>
68
        <button type="button" class="btn btn-success" onclick="continueRun()">Resume</button>
69

70
    </div>
71
    <div>
72
        <button type="button" class="btn btn-success" onclick="h5calltest()">Test Script Injection</button>
73
    </div>
74
</div>
75
<script>
76
    function updateUserName(data) {
77
        $("#username").val(data)
78
    }
79
    // User click calls the h5calltest function injected in ui.js
80
    function h5calltest() {
81
        window.ec.call("h5calltest", "Data passed from H5")
82
    }
83

84
    function pause() {
85
        window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
86
            checkPause()
87
        });
88
    }
89

90
    function checkPause() {
91
        window.ec.isScriptPause(function (resp) {
92
            alert("isScriptPause " + resp)
93
        });
94
    }
95
    function continueRun() {
96
        window.ec.setScriptPause({"pause":false,"timeout":0},function (resp) {
97

98
        });
99
    }
100
    function refreshIsServiceOk() {
101
        window.ec.isServiceOk(function (resp) {
102
            if (resp) {
103
                $("#autoService").attr("checked", true)
104
            } else {
105
                $("#autoService").attr("checked", false)
106
            }
107
        })
108
    }
109

110
    function resetParam() {
111
        window.ec.isServiceOk(function (resp) {
112
            if (resp) {
113
                $("#autoService").attr("checked", true)
114
            } else {
115
                $("#autoService").attr("checked", false)
116
            }
117
        })
118
        // Read username
119
        window.ec.getConfig("uiconfig", function (resp) {
120
            if (resp == null || resp == undefined) {
121
                return
122
            }
123
            console.log("resp " + resp)
124
            let p = JSON.parse(resp)
125
            $("#username").val(p["username"])
126
            $("#func").val(p["func"])
127
            if (p["aihao1"]) {
128
                $("#aihao1").prop("checked", true)
129
            }
130
            if (p["aihao2"]) {
131
                $("#aihao2").prop("checked", true)
132
            }
133
            if (p["aihao3"]) {
134
                $("#aihao3").prop("checked", true)
135
            }
136
            $("input[type=radio][name='sex'][value='" + p["sex"] + "']").attr("checked", 'checked')
137
        })
138
    }
139

140
    function saveParam() {
141
        let username = $("#username").val()
142
        var aihao1 = $("#aihao1").prop("checked");
143
        var aihao2 = $("#aihao2").prop("checked");
144
        var aihao3 = $("#aihao3").prop("checked");
145
        let sex = $("input[name='sex']:checked").val();
146
        let func = $("#func").val()
147
        // Build JSON object
148
        let mp = {
149
            "username": username,
150
            "aihao1": aihao1,
151
            "aihao2": aihao2,
152
            "aihao3": aihao3,
153
            "sex": sex,
154
            "func": func
155
        }
156
        let j = JSON.stringify(mp)
157
        console.log("saveParam " + j)
158
        window.ec.saveConfig("uiconfig", j, function (resp) {
159
            if (resp) {
160
                alert("Saved successfully")
161
            } else {
162
                alert("Save failed")
163
            }
164
            console.log("Save result: " + resp)
165
        })
166
    }
167

168
    function start() {
169
        window.ec.start()
170
    }
171

172
    $(function () {
173
        resetParam()
174
    });
175
</script>
176
</body>
177
</html>

ui.js File Content

1
// ui.js file content
2
function main() {
3
    ui.layout("main", "index.html")
4
    uiRegToScript();
5
}
6

7
function uiRegToScript() {
8
    // // UI injects functions for the script to update the UI
9
    // // Direction: ui.js calls ui.registeFunctionToScript; the script calls callUIRegisteFunction at runtime
10
    // // Register a function callable from the JS script
11
    // // Script calls ui.js ui-hello -> H5 updateUserName function
12
    // ui.registeFunctionToScript("ui-hello", function (data) {
13
    // logd("UI hello " + data)
14
    // // Call into the H5 page
15
    // ui.evaluateJavaScript("updateUserName('" + data + "');")
16
    // return ""
17
    // })
18

19
    // H5 -> UI.JS h5calltest -> script js script-hello
20
    // Register a function for H5 to call
21
    ui.registeH5Function("h5calltest", function (data) {
22
        logd("h5calltest data: " + data)
23
        // Can call the script-injected script-hello function here
24
        let bb = ui.callScriptRegisteFunction("script-hello", data)
25
        logd("bb " + bb)
26
    })
27

28
}
29
main()

main.js Script Content

1
function main() {
2
    // Start writing your code here!!
3
    logd("Checking automation environment...")
4
    // If automation service is running
5
    regToUI()
6

7
    logd("Starting script...")
8

9
    // For loops, use script exit as the condition — do not use while(true)
10
    while (!isScriptExit()) {
11

12
        // Write your business logic here
13
        sleep(1000)
14
        logd(new Date())
15
    }
16
}
17

18
function regToUI() {
19
    // Examples below — see uiRegToScript in ui.js for details
20
    // Inject script-hello for UI.js to call
21
    registeScriptFunctionToUI("script-hello", function (data) {
22
        // If the script is not running, this function may not be reachable
23
        logd("Data from H5 " + data)
24
        return "script say hello"
25
    })
26

27
    // // Call the ui-hello function injected in UI.js
28
    // let result = callUIRegisteFunction("ui-hello", "my js data")
29
    // logd("Data returned from ui.js " + result)
30

31
    // Remove when no longer needed
32
    //removeAllScriptToUIfFunc();
33
    //removeAllUIToScriptFunc();
34

35
}
36

37
main();

Script → ui.js → H5 Call Flow

main.js Script Content

1
function main() {
2
    // Start writing your code here!!
3
    logd("Checking automation environment...")
4
    // If automation service is running
5
    regToUI()
6
    // For loops, use script exit as the condition — do not use while(true)
7
    while (!isScriptExit()) {
8

9
        // Write your business logic here
10
        sleep(1000)
11
        logd(new Date())
12
        // Call the ui-hello function injected in ui.js
13
        callUIRegisteFunction("ui-hello", "my js data:"+new Date())
14
    }
15
}
16

17
function regToUI() {
18
    // Examples below — see uiRegToScript in ui.js for details
19
    // Call the ui-hello function injected in UI.js
20
    let result = callUIRegisteFunction("ui-hello", "my js data")
21
    logd("Data returned from ui.js " + result)
22

23
    // Remove when no longer needed
24
    //removeAllScriptToUIfFunc();
25
    //removeAllUIToScriptFunc();
26

27
}
28

29
main();

ui.js Content

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

6
function uiRegToScript() {
7
    // UI injects functions for the script to update the UI
8
    // Direction: ui.js calls ui.registeFunctionToScript; the script calls callUIRegisteFunction at runtime
9
    // Register a function callable from the JS script
10
    // Script calls ui.js ui-hello -> H5 updateUserName function
11
    ui.registeFunctionToScript("ui-hello", function (data) {
12
        logd("UI hello " + data)
13
        // Call into the H5 page
14
        ui.evaluateJavaScript("updateUserName('" + data + "');")
15
        return ""
16
    })
17

18
}
19
main()

H5 File Content

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6
    <link href="htmljs/bootstrap.min.css" rel="stylesheet">
7
    <script src="htmljs/bootstrap.min.js"></script>
8
    <script src="htmljs/jquery.min.js"></script>
9
</head>
10

11
<body>
12
<div class="alert alert-info" role="alert">
13
    Script Configuration
14
</div>
15
<div style="margin: 10px">
16
    <div class="form-check form-switch">
17
        <input class="form-check-input" type="checkbox" role="switch" id="autoService" disabled>
18
        <label class="form-check-label" for="autoService">Automation Service</label>
19
        <span class="badge text-bg-info bg-primary" onclick="refreshIsServiceOk()">Refresh</span>
20
        <p>Tap the agent app icon<br/>or use the activator to enable automation<br/>
21
            When **Automation Running** appears on the phone, you are ready
22
        </p>
23
    </div>
24
    <br/>
25
    <div class="input-group mb-3">
26
        <span class="input-group-text" id="username1">Name: </span>
27
        <input type="text" class="form-control" placeholder="" id="username" aria-label="username"
28
               aria-describedby="basic-addon1">
29
    </div>
30
    <div class="form-group">
31
        <label>Hobbies: </label>
32
        <label class="checkbox-inline">
33
            <input type="checkbox" name="aihao1" id="aihao1" value="1"> Gaming
34
        </label>
35
        <label class="checkbox-inline">
36
            <input type="checkbox" name="aihao2" id="aihao2" value="2"> Photography
37
        </label>
38
        <label class="checkbox-inline">
39
            <input type="checkbox" name="aihao3" id="aihao3" value="3"> Travel
40
        </label>
41
    </div>
42
    <br/>
43
    <div class="form-group">
44
        <label>Gender: </label>
45
        <label class="radio-inline">
46
            <input type="radio" value="1" name="sex"> Male
47
        </label>
48
        <label class="radio-inline">
49
            <input type="radio" value="2" name="sex"> Female
50
        </label>
51
        <label class="radio-inline">
52
            <input type="radio" value="3" name="sex"> Other
53
        </label>
54
    </div>
55
    <br/>
56
    <div class="input-group mb-3">
57
        <span class="input-group-text" id="basic-addon1">Feature </span>
58
        <select class="form-select" aria-label="" id="func">
59
            <option value="1">Feature 1</option>
60
            <option value="2">Feature 2</option>
61
            <option value="3">Feature 3</option>
62
        </select>
63
    </div>
64
    <div>
65
        <button type="button" class="btn btn-primary" onclick="saveParam()">Save Parameters</button>
66
        <button type="button" class="btn btn-success" onclick="start()">Run Script</button>
67
        <button type="button" class="btn btn-primary" onclick="pause()">Pause</button>
68
        <button type="button" class="btn btn-success" onclick="continueRun()">Resume</button>
69

70
    </div>
71
    <div>
72
        <button type="button" class="btn btn-success" onclick="h5calltest()">Test Script Injection</button>
73
    </div>
74
</div>
75
<script>
76
    // ui.js callbacks update data through this function
77
    function updateUserName(data) {
78
        $("#username").val(data)
79
    }
80
    function h5calltest() {
81
        window.ec.call("h5calltest", "Data passed from H5")
82
    }
83

84
    function pause() {
85
        window.ec.setScriptPause({"pause": true, "timeout": 3330}, function (resp) {
86
            checkPause()
87
        });
88
    }
89

90
    function checkPause() {
91
        window.ec.isScriptPause(function (resp) {
92
            alert("isScriptPause " + resp)
93
        });
94
    }
95
    function continueRun() {
96
        window.ec.setScriptPause({"pause":false,"timeout":0},function (resp) {
97

98
        });
99
    }
100
    function refreshIsServiceOk() {
101
        window.ec.isServiceOk(function (resp) {
102
            if (resp) {
103
                $("#autoService").attr("checked", true)
104
            } else {
105
                $("#autoService").attr("checked", false)
106
            }
107
        })
108
    }
109

110
    function resetParam() {
111
        window.ec.isServiceOk(function (resp) {
112
            if (resp) {
113
                $("#autoService").attr("checked", true)
114
            } else {
115
                $("#autoService").attr("checked", false)
116
            }
117
        })
118
        // Read username
119
        window.ec.getConfig("uiconfig", function (resp) {
120
            if (resp == null || resp == undefined) {
121
                return
122
            }
123
            console.log("resp " + resp)
124
            let p = JSON.parse(resp)
125
            $("#username").val(p["username"])
126
            $("#func").val(p["func"])
127
            if (p["aihao1"]) {
128
                $("#aihao1").prop("checked", true)
129
            }
130
            if (p["aihao2"]) {
131
                $("#aihao2").prop("checked", true)
132
            }
133
            if (p["aihao3"]) {
134
                $("#aihao3").prop("checked", true)
135
            }
136
            $("input[type=radio][name='sex'][value='" + p["sex"] + "']").attr("checked", 'checked')
137
        })
138
    }
139

140
    function saveParam() {
141
        let username = $("#username").val()
142
        var aihao1 = $("#aihao1").prop("checked");
143
        var aihao2 = $("#aihao2").prop("checked");
144
        var aihao3 = $("#aihao3").prop("checked");
145
        let sex = $("input[name='sex']:checked").val();
146
        let func = $("#func").val()
147
        // Build JSON object
148
        let mp = {
149
            "username": username,
150
            "aihao1": aihao1,
151
            "aihao2": aihao2,
152
            "aihao3": aihao3,
153
            "sex": sex,
154
            "func": func
155
        }
156
        let j = JSON.stringify(mp)
157
        console.log("saveParam " + j)
158
        window.ec.saveConfig("uiconfig", j, function (resp) {
159
            if (resp) {
160
                alert("Saved successfully")
161
            } else {
162
                alert("Save failed")
163
            }
164
            console.log("Save result: " + resp)
165
        })
166
    }
167

168
    function start() {
169
        window.ec.start()
170
    }
171

172
    $(function () {
173
        resetParam()
174
    });
175
</script>
176
</body>
177
</html>

ui.js Available Functions

ui.registeFunctionToScript Inject Function for Script

Register a function for the script to call
Requires EC iOS standalone 5.10+
@param funcName function name
@param callback function callback
@return {boolean} true = success, false = failure

1
 // ui.js file
2
function main() {
3
    ui.registeFunctionToScript("ui-hello", function (data) {
4
        logd("ui hello call-> " + data);
5
        // Data returned to the web page
6
        return new Date().toString()
7
    })
8
    ui.layout("main", "main.html");
9
}
10

11
main();

ui.callScriptRegisteFunction Call Script-Registered Function

Call a function registered by the script
Requires EC iOS standalone 5.10+
@param funcName function name
@param data data
@return {string} returned data

1
 // ui.js file
2
function main() {
3
   // Call the script-injected script-hello function
4
    let a = ui.callScriptRegisteFunction("script-hello", "hello")
5
    logd(a)
6
}
7

8
main();

ui.evaluateJavaScript Call H5 Page JS Code

Execute JS code in the H5 page
Requires EC iOS standalone 5.10+
@param code JS code
@return {string} returned data

1
 // ui.js file
2
function main() {
3
    let code = 'alert("123")';
4
    ui.evaluateJavaScript(code)
5
}
6

7
main();

ui.removeFunctionToScript Remove UI Function Injected for Script

Remove a UI function injected for the script
Requires EC iOS standalone 5.10+
@param funcName function name
@return {boolean} true = success, false = failure

1
 // ui.js file
2
function main() {
3
    ui.removeFunctionToScript("ui-hello")
4
}
5

6
main();

ui.removeAllScriptToUIfFunc Remove All Script Functions Registered to UI

Remove all functions the script registered with the UI
Requires EC iOS standalone 5.10+
@return {boolean} true = success, false = failure

1
 // ui.js file
2
function main() {
3
    ui.removeAllScriptToUIfFunc()
4
}
5

6
main();

ui.removeAllUIToScriptFunc Remove All UI Functions Registered to Script

Remove all functions the UI registered with the script
Requires EC iOS standalone 5.10+
@return {boolean} true = success, false = failure

1
 // ui.js file
2
function main() {
3
    ui.removeAllUIToScriptFunc()
4
}
5

6
main();

Script Available Functions

registeScriptFunctionToUI Inject Function for UI

Register a function for the UI to use
Requires EC iOS standalone 5.10+
@param funcName function name
@param callback function callback
@return {boolean} true = success, false = failure

1
 // main.js file
2
function main() {
3
    registeScriptFunctionToUI("script-hello", function (data) {
4
        logd("script hello call-> " + data);
5
        // Data returned to the web page
6
        return new Date().toString()
7
    })
8
}
9
main();

callUIRegisteFunction Call UI Function Registered for Script

Call a function the UI registered for the script
Requires EC iOS standalone 5.10+
@param funcName function name
@param data data
@return {string} returned data

1
 // main.js file
2
function main() {
3
   // Call the ui-hello function injected from the script
4
    let a = callUIRegisteFunction("ui-hello", "hello")
5
    logd(a)
6
}
7

8
main();

removeFunctionToUI Remove Script Function Registered to UI

Remove a script function registered to the UI
Requires EC iOS standalone 5.10+
@param funcName function name
@return {boolean} true = success, false = failure

1
 // main.js file
2
function main() {
3
    removeFunctionToUI("script-hello")
4
}
5

6
main();

removeAllScriptToUIfFunc Remove All Script Functions Registered to UI

Remove all script functions registered to the UI
Requires EC iOS standalone 5.10+
@return {boolean} true = success, false = failure

1
 // main.js file
2
function main() {
3
  removeAllScriptToUIfFunc();
4
}
5

6
main();

removeAllUIToScriptFunc Remove All UI Functions Registered to Script

Remove all UI functions registered to the script
Requires EC iOS standalone 5.10+
@return {boolean} true = success, false = failure

1
 // main.js file
2
function main() {
3
  removeAllUIToScriptFunc();
4
}
5

6
main();