forked from luxdvie/WS2812Controller
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.html
149 lines (135 loc) · 7.15 KB
/
app.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
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
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<title>WS2812</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="images/lights-favicon-32x32.ico">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
</style>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://code.jquery.com/ui/1.12.1/themes/excite-bike/jquery-ui.css" rel="stylesheet">
<link href="slider/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WS2812 Control</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="tab" href="#1a">Home</a></li>
<li class=""><a data-toggle="tab" href="#2a">Rainbow</a></li>
<li class=""><a data-toggle="tab" href="#4a">Fade 2 Colors</a></li>
<li class=""><a data-toggle="tab" href="#5a">Dance</a></li>
<li class=""><a data-toggle="tab" href="#6a">Starry Night</a></li>
<li class=""><a data-toggle="tab" href="#xmas1">Christmas Tree</a></li>
<li class=""><a data-toggle="tab" href="#xmas2">Christmas Iterate</a></li>
<li class=""><a data-toggle="tab" href="#3a">Admin</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Static Color!</h3>
<p> Use this mode to set static Color </p>
<button
class="jscolor {valueElement:StaticColor,value:'66ccff'} pull"
style="border:2px solid black">
Pick Color
</button>
<input style="display:none;" id="StaticColor">
<br><br>
<div style="width:100%;text-align:center;">
<button class="btn btn-success" type="button" onclick="StartStaticColor();"> Apply </button>
</div>
<br><br> Brightness: <input type="text" id="staticbrightness" name="staticbrightness" data-provide="slider" onchange="UpdateBrightness();" data-slider-min="1" data-slider-max="255" data-slider-step="1" data-slider-value="255" data-slider-tooltip="hide" >
</div> <!-- ./tab-pane Welcome -->
<div class="tab-pane" id="2a">
<div class="clearfix"> </div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-danger" onclick="StartRainbow();"> Start Rainbow </button>
<div class="col-xs-12">
<br><br> Speed <input type="text" id="rainbowspeed" name="rainbowspeed" data-provide="slider" onchange="UpdateRainbowSpeed();" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="10" data-slider-tooltip="hide" >
</div>
</div>
</div>
</div> <!-- ./tab-pane Rainbow-->
<div class="tab-pane" id="3a">
<div class="clearfix"> </div>
<div class="row">
<div class="col-xs-12">
<button class="btn btn-primary" onclick="Stop();"> Stop Strip </button>
<label>This option will turn off all LED's that are connected.</label>
</div>
<div class="clearfix"> </div>
<div class="col-xs-12">
<button class="btn btn-warning" onclick="Reboot();"> Reboot Raspberry Pi </button>
<label>Warning!! This option will reboot the device.</label>
</div>
<div class="clearfix"> </div>
<div class="col-xs-12">
<button class="btn btn-danger" onclick="PowerOff();"> Power off Raspberry Pi </button>
<label>Warning!! This option will turn off the device.</label>
</div>
</div>
</div> <!-- ./tab-pane Admin-->
<div class="tab-pane" id="4a">
<p> Use this mode to fade the strip between two colors </p>
<button
class="jscolor {valueElement:Fade2Colors1,value:'66ccff'} pull"
style="border:2px solid black">
Pick Color 1
</button>
<input style="display:none;" id="Fade2Colors1">
<input style="display:none;" id="Fade2Colors2">
<button
class="jscolor {valueElement:Fade2Colors2,value:'66ccff'} push"
style="border:2px solid black" onchange='console.log("here");'>
Pick Color 2
</button>
<br><br>
<div style="width:100%;text-align:center;">
<button class="btn btn-success" type="button" onclick="Start2Fade();"> Apply </button>
</div>
<br><br> Fade Speed: <input type="text" id="fadespeed" name="rainbowspeed" data-provide="slider" onchange="UpdateFadeSpeed();" data-slider-min="1" data-slider-max="100" data-slider-step="1" data-slider-value="10" data-slider-tooltip="hide" >
</div> <!-- ./tab-pane -->
<div class="tab-pane" id="5a">
<button class="btn btn-success" type="button" onclick="StartDancing();"> Start Dancing </button>
<br><br> Dance Brightness: <input type="text" id="dancebrightness" name="dancebrightness" data-provide="slider" onchange="UpdateDanceBrightness();" data-slider-min="1" data-slider-max="255" data-slider-step="1" data-slider-value="255" data-slider-tooltip="hide" >
</div> <!-- ./tab-pane -->
<div class="tab-pane" id="xmas1">
<button class="btn btn-success" type="button" onclick="StartXmas1();"> Start Christmas Mode 1 </button>
</div> <!-- ./tab-pane -->
<div class="tab-pane" id="xmas2">
<button class="btn btn-success" type="button" onclick="StartXmas2();"> Start Christmas Iterate </button>
</div> <!-- ./tab-pane -->
<div class="tab-pane" id="6a">
<button class="btn btn-success" type="button" onclick="StartTwinkling();"> Start Starry Night </button>
</div> <!-- ./tab-pane -->
</div> <!-- ./tab-content -->
</div> <!-- /.container -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js" ></script>
<script type="text/javascript" src="js/color.js"></script>
<script type="text/javascript" src="slider/js/bootstrap-slider.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>