forked from tanzilli/ledpanel-utils
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·108 lines (94 loc) · 2.59 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="js/jquery.mobile-1.4.4.min.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script>
$(document).ready(function() {
$("#button-send").click(function() {
$.ajax({
url: "send_message",
data: {
message: $("#text-basic").val()
},
success: function( data ) {
},
error: function () {
}
});
});
$("#button-off").click(function() {
$.ajax({
url: "send_message",
data: {
message: ""
},
success: function( data ) {
},
error: function () {
}
});
});
$(".color-slider").on('change',function() {
$.ajax({
url: "set_color",
data: {
red: $("#slider-red").val(),
green: $("#slider-green").val(),
blue: $("#slider-blue").val()
},
success: function( data ) {
},
error: function () {
}
});
});
$("#delay-slider").on('change',function() {
$.ajax({
url: "set_sliding_delay",
data: {
delay: $("#delay-slider").val()
},
success: function( data ) {
},
error: function () {
}
});
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Led Panel</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<div class="ui-body ui-body-a ui-corner-all">
<h3>Sliding message</h3>
<label for="text-basic">Message:</label>
<input type="text" name="text-basic" id="text-basic" value="LedPanel">
<button class="ui-btn ui-btn-inline" id="button-send">Send</button>
<button class="ui-btn ui-btn-inline" id="button-off">Off</button>
<label for="delay-slider">Delay:</label>
<input type="range" name="delay-slider" id="delay-slider" min="0" max="100" value="0">
</div>
<div class="ui-body ui-body-a ui-corner-all">
<h3>Color setting</h3>
<label for="slider-red">Red:</label>
<input class="color-slider" type="range" name="slider-red" id="slider-red" min="0" max="15" value="1">
<label for="slider-green">Green:</label>
<input class="color-slider" type="range" name="slider-green" id="slider-green" min="0" max="15" value="1">
<label for="slider-blue">Blue:</label>
<input class="color-slider" type="range" name="slider-blue" id="slider-blue" min="0" max="15" value="1">
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>www.acmesystems.it</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>