sensor-sync-api/javascript/ssync-demo.html at main · nim-artificial-intelligence/sensor-sync-api · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ssync.js Sample</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

    <!-- include ssync.js API -->
    <script src="ssync.js"></script>

</head>

<body>
    <div class="container">
        <h1>See Source Code</h1>
        <br>

        <!-- log text area -->
        <div class="form-group">
            <label for="log">Log:</label>
            <textarea class="form-control" rows="10" id="log" enabled="false"></textarea>
        </div>

        <!-- form containing our ui controls -->
        <div class="form-group">
            <label for="ip">Communication IP address</label>
            <table>
                <tr>
                    <td style="width:80%">
                        <!-- input field for the IP address to use. Script will take it from there. -->
                        <input type="text" class="form-control" id="ip" name="ip" value="192.168.2.49">
                    </td>
                    <td style="padding-left:4px">
                        <button class="btn btn-primary" type="button" onclick="on_read_config();">read
                            config</button>
                    </td>
                    <td style="padding-left:4px">
                        <!-- button. onclick calls script function below that calls activate_sensor-->
                        <button class="btn btn-info" type="button" onclick="on_set_sensor();">Set Sensor 1</button>
                    </td>
                    <td style="padding-left:4px">
                        <!-- button. onclick calls script function below that calls reset_sensor -->
                        <button class="btn btn-danger" type="button" onclick="on_reset_sensor();">Reset Sensor
                            1</button>
                    </td>
                </tr>
            </table>
        </div>

        <script>
            // log text that can be HTML to the log area
            function log(maybe_html) {
                var el = document.createElement('html');    // create a temp invisible html element

                // HTML to text conversion, part 1
                // set the element's inner HTML, so we can later retrieve its innerText
                el.innerHTML = maybe_html;

                // append inner text (converted HTML) to log area and scroll down to keep
                // latest text visible
                var x = document.getElementById("log");
                x.value = x.value + el.innerText.trim() + '\n';
                x.scrollTop = x.scrollHeight;
            }

            // on_read_config: called when the `read config` button is pressed (see its onclick attribure)
            function on_read_config() {
                // use the ip address from the HTML field - could have been changed by user
                var ip = document.getElementById("ip").value;
                set_ssync_ip(ip);

                // read the config. on success, log its ip, mac, sensor states
                read_config().
                    then(data => log('\n' +
                        'ip: ' + data.ip + '\n' +
                        'mac: ' + data.mac + '\n' +
                        'sensor states: ' + data.sensors + '\n')
                    // on error, log it
                    ).catch((err) => log("Error:" + err.toString()));
            }

            // on_set_sensor: called when the `Set Sensor 1` button is pressed (see its onclick attribure)
            function on_set_sensor() {
                // use the ip address from the HTML field - could have been changed by user
                var ip = document.getElementById("ip").value;
                set_ssync_ip(ip);
                // activate sensor 1, log success and error
                activate_sensor(1).then(data => log(data)).catch((err) => log("Error:" + err.toString()));
            }

            // on_resset_sensor: called when the `Reset Sensor 1` button is pressed (see its onclick attribure)
            function on_reset_sensor() {
                // use the ip address from the HTML field - could have been changed by user
                var ip = document.getElementById("ip").value;
                set_ssync_ip(ip);
                reset_sensor(1).then(data => log(data)).catch((err) => log("Error:" + err.toString()));
            }

            // just a demo function: do stuff in order
            async function foo() {
                log('the following happens in order');
                // just activate
                await activate_sensor(1);

                // activate sensor and log result to console
                await reset_sensor(1).then(result_html => log(result_html));

                // activate sensor and log result to console, catch and log error
                await activate_sensor(1)
                    .then(result_html => log(result_html))
                    .catch(function (err) {
                        log('Fetch Error :-S', err);
                    });

                await read_config().then((data) => {
                    log('\n' +
                        'ip: ' + data.ip + '\n' +
                        'mac: ' + data.mac + '\n' +
                        'sensor states: ' + data.sensors + '\n');
                    console.log(data);
                }
                );
                log('finished');
            }
            foo();   // call demo foo immediately after loading the page
        </script>
</body>

</html>