html-node-views/example-full-screen.html at main · UniversalDevicesInc/html-node-views · 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
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    /* To support Light and Dark Modes*/
    :root {
        color-scheme: light dark;
    }
    /* Full width Slider */
    input {
      width: 100%
    }
    /* Container Padding */
    div {
      padding-right: 5px;
      padding-left: 5px;
    }
    body {
      /* This is the standard Favorites tile color, this can be removed if no background is desired*/
      background-color: #B0B1B133;
    }
    p {
      font-size: 14px;
    }
    html * {
      /* Prevent Text size adjustments in Safari (iOS Web View) on screen rotation*/
      -webkit-text-size-adjust: none; /* Never autoresize text */
    }
    </style>
    <script>
        <!-- Receives json messages from IoX Client -->
        function newMessage(jsonString) {
            console.log('newMessage received');
            let json = JSON.parse(jsonString);
            <!-- statusUpdate-->
            let statusUpdate = json["statusUpdate"];
            if (statusUpdate != undefined) {
                updateStatus(statusUpdate);
                return;
            }
            <!-- getObservedAddresses -->
            let getObservedAddresses = json["getObservedAddresses"];
            if (getObservedAddresses != undefined){
                setObservedAddresses(getObservedAddresses);
                return;
            }
            <!-- nodeUpdate -->
            let nodeUpdate = json["nodeUpdate"];
            if (nodeUpdate != undefined){
                updateNode(nodeUpdate);
                return;
            }
            console.log('could not match newMessage Type');
        }

        <!-- Sends json message to IoX client -->
        function publishMessage(jsonString) {
              console.log('publishMessage');
              try {
                  <!-- iOS -->
                  if (window.webkit != undefined) {
                      webkit.messageHandlers.postToUdm.postMessage(jsonString);
                  }
                  <!-- Android -->
                  if (window.androidInterface != undefined) {
                      androidInterface.postToUdm(jsonString);
                  }
                  <!-- TODO Add other Clients such as browser -->
              } catch(err) {
                  console.log('error');
              }
        }

        <!-- Send command to IoX -->
        function sendCommand(address, cmd, params) {
              console.log('sendCommand called');
              let obj = {"sendCommand": {"address": address , "cmd": cmd, "p": params }};
              <!-- Multiple Params would be let obj = {"address": "ZB25235_001_1" , "cmd": "DON", "p": [{'pId': '', 'value': this.value, 'uom': '51'}, {'pId': 'OL', 'value': '100', 'uom': '51'}] }; -->
              let jsonString = JSON.stringify(obj);
              publishMessage(jsonString);
        }


        <!-- Process Status Update. For multiple nodes switch(address) -->
        function updateStatus(json){
            let address = json["address"];
            let status = json["status_id"];
            let statusName = json["status_name"];
            let value = json["value"];
            let formatted = json["formatted"];
            switch(status){
            case "ST":
                var slider = document.getElementById("mySlider");
                slider.value = value;
                var statuslabel = document.getElementById("statuslabel");
                statuslabel.innerHTML = "Current Status: " + formatted;
                break;
            case "OL":
                var myelement = document.getElementById("onLevelLabel");
                myelement.innerHTML = "On Level: " + formatted;
                break;
            default:
                break;
            }
        }

        <!-- Process Node Update. For multiple nodes switch(address) -->
        function updateNode(json){
            let address = json["address"];
            let name = json["name"];
            let enabled = json["enabled"];
            var myelement = document.getElementById("nodeName");
            myelement.innerHTML = name;
        }

        <!-- Process Observed Addresses Request -->
        function setObservedAddresses(json){
            <!-- This is the Address of the node attached by the client. There is no need to request observation of this address as the Client will automatically observe if not null.  If other addresses are to be observed they are requested here -->
            let address = json["address"];
            let obj = {"setObservedAddresses": []};
            let jsonString = JSON.stringify(obj);
            publishMessage(jsonString);
        }

    </script>

    </head>
    <body>
    <div class="namecontainer">
        <p id="nodeName">-</p>
    </div>
    <div class="slidecontainer">
      <p id="statuslabel">-</p>
      <input id="mySlider" type="range" min="1" max="100" value="0" onchange="sendCommand('', 'DON', [{'pId': '', 'value': this.value, 'uom': '51'}])">
    </div>
    <div class="buttoncontainer">
      <button type="submit" class="style" onclick="sendCommand('', 'DOF', [])"><i>Off</i></button>
    </div>
    <div class="onlevelcontainer">
        <p id="onLevelLabel">-</p>
    </div>

    </body>
    </html>