-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
92 lines (84 loc) · 2.36 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Button Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<button id="mybutton" class="btn btn-success btn-lg">
<span class="ui-button-text">Turn On</span>
</button>
</div>
<br/>
<div align="center">
<div id="slider-vertical" style="height:200px;"></div>
<br/>
<div id="current">Ampere value:
<span class="current-value">0</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('#mybutton').click(function() {
if($("#mybutton span").text() == "Turn On"){
$.ajax({
url: 'control/on',
type: 'POST',
data: {'turnon':true}, // An object with the key 'submit' and value 'true;
success: function (result) {
console.log(result)
$("#mybutton").removeClass("btn-success")
$("#mybutton").addClass("btn-danger")
$("#mybutton span").text("Turn Off")
}
});
}
else{
$.ajax({
url: 'control/on',
type: 'POST',
data: {'turnon':false}, // An object with the key 'submit' and value$
success: function (result) {
console.log(result)
$("#mybutton").removeClass("btn-danger")
$("#mybutton").addClass("btn-success")
$("#mybutton span").text("Turn On")
}
});
}
});
var wsUri1 = "ws://10.10.1.17:8080/ws/slide";
var wsUri2 = "ws://10.10.1.17:8080/ws/current";
websocket1 = new WebSocket(wsUri1);
websocket2 = new WebSocket(wsUri2);
websocket2.onmessage = function(event) {
$("#current span").text(event.data)
}
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 1,
value: 0,
step: 0.1,
slide: function( event, ui ) {
websocket1.send(ui.value)
}
});
});
</script>
</body>
</html>