Skip to content

Commit f002295

Browse files
con-f-usecon-f-use
committed
Extend led pattern capabilities
1 parent aa0cef6 commit f002295

File tree

3 files changed

+38
-44
lines changed

3 files changed

+38
-44
lines changed

‎esp82xx‎

Submodule esp82xx updated 1 file

‎web/page/index.html‎

Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
<html>
2-
<!-- Copyright (C) 2015 <>< Charles Lohr, see LICENSE file for more info. -->
3-
<head>
4-
<title>{{PAGE_TITLE}}</title>
1+
<html><head><title>{{PAGE_TITLE}}</title>
52
<script language="javascript" type="text/javascript" src={{PAGE_JQUERYFL}}></script>
63
<script language="javascript" type="text/javascript" src=menuinterface.js></script>
74
{{PAGE_SCRIPT}}
@@ -15,42 +12,37 @@
1512
.dragandrophandler { border:2px dotted #0B85A1; color:#92AAB0;vertical-align:middle;padding:10px 10px 10 10px;margin-bottom:10px;font-size:200%;}
1613
.unsaved-input { border: 2px solid pink; border-radius: 7px; }
1714
</style>
18-
</head>
19-
<body>
20-
<h2>{{PAGE_HEADING}}</h2>
21-
<hr>
15+
</head><body>
2216

23-
<table id="MainMenu">
17+
<h2>{{PAGE_HEADING}}</h2><hr>
2418

25-
<tbody>
19+
<table id="MainMenu"><tbody>
2620

2721
<tr><td width=1>
2822
<input type=submit onclick="ShowHideEvent( 'Introduction' );" value="Introduction"></td><td>
29-
<div id=Introduction class="collapsible">
30-
<table border=1><tr><td>
31-
<p>{{PAGE_INFO}}</p>
32-
</div></td></tr></table></td></tr>
23+
<div id=Introduction class="collapsible"><table border=1><tr><td><p>{{PAGE_INFO}}</p></td></tr></table></div>
24+
</td></tr>
3325

34-
35-
<tr><td width=1>
36-
<input type=submit onclick="ShowHideEvent( 'LEDs' ); KickLEDs();" value="LEDs"></td><td>
26+
<tr><td width=1><input type=submit onclick="ShowHideEvent( 'LEDs' ); KickLEDs();" value="LEDs"></td><td>
3727
<div id=LEDs class="collapsible">
3828
<table width=100% border=1><tr><td id=LEDCanvasHolder><CANVAS id=LEDCanvas width=512 height=100></CANVAS></td>
3929
<td><input type=button onclick="ToggleLEDPause();" id=LEDPauseButton value="|| / >"></td></tr></table>
40-
<input type=color id=LEDColor>&nbsp;&nbsp;&nbsp;Pattern/Range: <input type=text id=LEDSelect value=1-4>
41-
&nbsp;&nbsp;&nbsp;#LEDs: <input type=number min=0 value=4 id=LEDNum><input type=button value="Set Color" id=LEDCbtn><input type=button value="Set Pattern (Work in Progress)" id=LEDPbtn>
42-
<p style="font-size:70%;font-style: italic">Patterns can include individual LEDS or ranges of LEDs separated by commata, e.g. "1-3,7,20-35". You can also select colors by clicking inside the color display. If you set a pattern, use a low positive integer.</p>
43-
</div></td></tr>
44-
45-
46-
</tbody>
47-
</table>
30+
Select LEDs/Pattern: <input type=text id=LEDSelect value=1-4> <br>
31+
#LEDs: <input type=number min=0 value=4 id=LEDNum style="width:5.5em;">
32+
<input type=color id=LEDColor> <input type=button value="Set Color" id=LEDCbtn> <input type=button value="Set Pattern" id=LEDPbtn>
33+
<p style="font-size:70%;font-style: italic">Patterns can include individual LEDs or ranges of LEDs separated by commata, e.g. "1-3,7,20-35".
34+
You can select colors via the color-picker or by clicking a color inside the color display.
35+
If you set a pattern, use a low positive integer.
36+
"#LEDs" is the total number of LEDs connected to the esp8266 and must be provided.</p>
37+
</div>
38+
</td></tr>
39+
40+
</tbody></table>
4841

4942
<font size=-2>
5043
<p>Copyright (C) 2015-2016 &lt&gt&lt Charles Lohr, See LICENSE file for more info.</p>
51-
<p id=version><font size=-2>{{VERSSTR}}</font></p>
52-
<p><a href={{PROJECT_URL}}><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QTI1MDRGRDUyREUxMUUyOTMxM0QzQThENTMyMjYwNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QTI1MDRGRTUyREUxMUUyOTMxM0QzQThENTMyMjYwNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdBMjUwNEZCNTJERTExRTI5MzEzRDNBOEQ1MzIyNjA1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdBMjUwNEZDNTJERTExRTI5MzEzRDNBOEQ1MzIyNjA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ri2cwgAAAUFJREFUeNqM0slKA0EQxvFywLi8gygiUQYi8exJcQXFt/CaF1GCBvUBfAG9iYqKBLxqIAmCeHDHiyCIGy7/hm+kM5oZC36ZUF3dXdPTZr8jhzWc4g1PqCqXs4Rowyo+sI8CZqSgnBtbUW1DZFRwhZGETdzYNXY15ydce5foQmfCAu3oVq2bYy16r2OM4Q4VrKOMXtWcI495jKIDW8rZEg60wxC+UkSveIhiwM8kNpUct/SIajbUtb1iVsnKPzq4UO0cHgNvwOIn2ySiGjfnM9ABZb0O0uJEz6y+hi3iSMm8bl6z9t3rDqvWzVlwf0K8Y0oD/VhG3Zt4pls6qJppzRmI2irhHn1eq2VvgaqX78GNNmk4mB1dpAnlHmLtmz7brS5R5q9rWlJre3iJLbCtsSJak0451MHW8Cw1HVgYL/4WYAC89WouVF+p+wAAAABJRU5ErkJggg==" style="height: 1em;" alt="github-logo">{{PROJECT_NAME}}</a></p>
44+
<p><a href={{PROJECT_URL}}><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3QTI1MDRGRDUyREUxMUUyOTMxM0QzQThENTMyMjYwNSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3QTI1MDRGRTUyREUxMUUyOTMxM0QzQThENTMyMjYwNSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjdBMjUwNEZCNTJERTExRTI5MzEzRDNBOEQ1MzIyNjA1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjdBMjUwNEZDNTJERTExRTI5MzEzRDNBOEQ1MzIyNjA1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ri2cwgAAAUFJREFUeNqM0slKA0EQxvFywLi8gygiUQYi8exJcQXFt/CaF1GCBvUBfAG9iYqKBLxqIAmCeHDHiyCIGy7/hm+kM5oZC36ZUF3dXdPTZr8jhzWc4g1PqCqXs4Rowyo+sI8CZqSgnBtbUW1DZFRwhZGETdzYNXY15ydce5foQmfCAu3oVq2bYy16r2OM4Q4VrKOMXtWcI495jKIDW8rZEg60wxC+UkSveIhiwM8kNpUct/SIajbUtb1iVsnKPzq4UO0cHgNvwOIn2ySiGjfnM9ABZb0O0uJEz6y+hi3iSMm8bl6z9t3rDqvWzVlwf0K8Y0oD/VhG3Zt4pls6qJppzRmI2irhHn1eq2VvgaqX78GNNmk4mB1dpAnlHmLtmz7brS5R5q9rWlJre3iJLbCtsSJak0451MHW8Cw1HVgYL/4WYAC89WouVF+p+wAAAABJRU5ErkJggg==" style="height: 1em;" alt="github-logo">{{PROJECT_NAME}}</a> - {{VERSSTR}}</p>
5345
</font>
5446
<div id=SystemMessage>...</div>
55-
</body>
56-
</html>
47+
48+
</body></html>

‎web/page/main.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,9 @@ function KickLEDs()
4949
// Set LED color via Button
5050
$('#LEDCbtn').click( function(e) {
5151
var val = $('#LEDSelect').val();
52-
if( ! val.match(/^\d+(-\d+)?(,\d+(-\d+)?)*$/) ) {
53-
$('#LEDSelect').css( "background-color", "#ff0000");
54-
return false;
52+
if( ! val.match(/^\d+(-\d+)?(#[a-zA-Z0-9]{6,6})?(,\d+(-\d+)?(#[a-zA-Z0-9]{6,6})?)*$/) ) {
53+
$('#LEDSelect').css( "background-color", "#ff0000");
54+
return false;
5555
}
5656
$('#LEDSelect').css( "background-color", "#ffffff");
5757
var numLEDs = parseInt( $('#LEDNum').val() );
@@ -60,17 +60,19 @@ function KickLEDs()
6060
var color = document.getElementById('LEDColor').value;
6161
color = color.replace('#','');
6262
for(var i=0; i<toks.length; ++i) {
63-
var range = toks[i].split("-");
64-
if( range.length == 1 ) {
65-
var idx = parseInt(toks[i]);
66-
if(idx<=numLEDs) leds[idx] = color;
67-
} else {
68-
var min = parseInt(range[0]);
69-
var max = parseInt(range[1]);
70-
if( min > max ) { var tmp=min; min=max; max=tmp; }
71-
for(var j=min; j<=max && j<=numLEDs; ++j)
72-
leds[j] = color;
73-
}
63+
var colsplt = toks[i].split("#");
64+
var rangesplt = colsplt[0].split("-");
65+
if( colsplt.length > 1 ) color = colsplt[1];
66+
if( rangesplt.length < 2 ) {
67+
var idx = parseInt(rangesplt[0]);
68+
if(idx<=numLEDs) leds[idx] = color;
69+
} else {
70+
var min = parseInt(rangesplt[0]);
71+
var max = parseInt(rangesplt[1]);
72+
if( min > max ) { var tmp=min; min=max; max=tmp; }
73+
for(var j=min; j<=max && j<=numLEDs; ++j)
74+
leds[j] = color;
75+
}
7476
}
7577

7678
var qStr = new Uint8Array(3*numLEDs+3);

0 commit comments

Comments
 (0)