-
Notifications
You must be signed in to change notification settings - Fork 2
/
blog2.html
108 lines (97 loc) · 4.1 KB
/
blog2.html
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
// This example is for the latest version of the blog...Web Sockets Web Page Part 3
// it assumes that you have set up a theme using the online JQUERY theme software and have made changes
// to the Node-Red node - remove these comments before using.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Display</title>
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="themes/pete.min.css" />
</head>
<script type="text/javascript">
var server = window.location.hostname;
var topics = {};
var wsUriC = "ws://"+server+":1880/myapp";
var ws;
var light0='<img src="icons/light0.png" alt="someimage" />';
var light1='<img src="icons/light1.png" alt="someimage" />';
function gIcon(imName)
{
return '<img style="width:32px; height:32px; vertical-align:middle" src="icons/'+imName+'.png">'
}
function wsConnectC() {
console.log("connect",wsUriC);
ws = new WebSocket(wsUriC);
ws.onmessage = function(msg) {
var line = "";
console.log(msg.data);
var fromPage=JSON.parse(msg.data);
if (fromPage.my_input!=null) {
if (fromPage.my_input!="")
$("#info1").html(fromPage.my_input);
else
$("#info1").html("Nothing entered");
}
if (fromPage.my_slider!=null) $("#info2").html(fromPage.my_slider+"c");
if (fromPage.my_switch!=null) $("#info3").html(fromPage.my_switch);
if (fromPage.my_slider!=null) $("#my_slider").val(fromPage.my_slider).slider("refresh");
if (fromPage.my_switch!=null) $("#my_switch").val(fromPage.my_switch).flipswitch("refresh");
if (fromPage.my_switch!=null) {
if (fromPage.my_switch=="on")
$("#image_holder").html(gIcon("light1"));
else
$("#image_holder").html(gIcon("light0")); }
}
ws.onopen = function() {
$("#status").html("connected");
console.log("connected");
}
ws.onclose = function() {
$("#status").html("not connected");
setTimeout(wsConnectC,1000);
}
}
function sendMessage(){
// send message back to page
var toPage='{"my_input":"'+$("#my_input").val()+'","my_slider":"'+$("#my_slider").val()+'","my_switch":"'+$("#my_switch").val()+'"}';
ws.send(toPage);
} // end sendMessage
</script>
<body onload="wsConnectC();" onunload="ws.disconnect;">
<div data-role="page" id="one" data-theme="a">
<div data-role="header" data-position="inline">
<h2>Websockets Test Page</h2>
</div>
<div data-role="content" data-theme="a">
<h2>Temperature Display</h2>
<div id="status">status unknown</div>
<input id="my_input" placeholder="Type something"/>
<div id="info1">!Empty!</div>
<hr/>
<div data-role="collapsible">
<h4>Hello</h4>
werlkj werlkjw erlkwje rwlekjr wer jkl
</div>
<div id="info2">0</div>
<hr/>
<div id="info3">0</div>
<hr/>
<label for="my_slider">Input slider:</label>
<input type="range" id="my_slider" value="60" min="0" max="100" data-theme="a" onMouseRelease="sendMessage()"/>
<select name="my_switch" id="my_switch" data-role="flipswitch" onchange="sendMessage()" data-theme="a">
<option value="off">Off</option>
<option value="on">On</option>
</select> <span id="image_holder"></span><br/>
<input type="button" data-inline="true" value="Update the lot" onClick="sendMessage()" />
<input type="button" data-inline="true" value="Single Msg test" onClick='ws.send("{\"my_input\":\"Just this\"}")' />
<a href="#two">Get page 2</a>
</div>
</div>
<div data-role="page" id="two" data-theme="a">
Hello there
</div>
</body>
</html>