-
Notifications
You must be signed in to change notification settings - Fork 348
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Substantial refactoring of base library code. (#228)
* Added cycle flag to effects * added cycle flag to custom effects * initial code to separate segments and segment_runtimes * added functions to manage active segments * significant refactor of segment management * fixed active_segment pointer usage * fixed swap segment to allow completing the last frame * increased number of custom effects from 4 to 8 * refactor ws2812fx_webinterface example sketch * added setPixels() function. Co-authored-by: Keith Lord <[email protected]>
- Loading branch information
1 parent
0da073a
commit fc571c4
Showing
27 changed files
with
1,113 additions
and
761 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,97 +1,114 @@ | ||
#include <pgmspace.h> | ||
char index_html[] PROGMEM = R"=====( | ||
<!DOCTYPE html> | ||
<html lang='en'> | ||
<!doctype html> | ||
<html lang='en' dir='ltr'> | ||
<head> | ||
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> | ||
<meta name='viewport' content='width=device-width' /> | ||
<title>WS2812FX Ctrl</title> | ||
<meta name='viewport' content='width=device-width, initial-scale=1.0' /> | ||
<title>WS2812FX Control</title> | ||
<script type='text/javascript' src='main.js'></script> | ||
<style> | ||
* { | ||
font-family:sans-serif; | ||
margin:0; | ||
padding:0; | ||
} | ||
body { | ||
width:100%; | ||
max-width:675px; | ||
background-color:#202020; | ||
} | ||
h1 { | ||
width:65%; | ||
margin:25px 0 25px 25%; | ||
color:#454545; | ||
text-align:center; | ||
} | ||
#colorbar { | ||
float:left; | ||
} | ||
#controls { | ||
width:65%; | ||
display:inline-block; | ||
padding-left:5px; | ||
} | ||
ul { | ||
text-align:center; | ||
} | ||
ul#mode li { | ||
display:block; | ||
} | ||
ul#brightness li, ul#speed li, ul#auto li { | ||
display:inline-block; | ||
width:30%; | ||
} | ||
ul li a { | ||
display:block; | ||
margin:3px; | ||
padding:10px 5px; | ||
border:2px solid #454545; | ||
border-radius:5px; | ||
color:#454545; | ||
font-weight:bold; | ||
text-decoration:none; | ||
} | ||
ul li a.active { | ||
border:2px solid #909090; | ||
color:#909090; | ||
} | ||
body { | ||
font-family:Arial,sans-serif; | ||
margin:10px; | ||
padding:0; | ||
background-color:#202020; | ||
color:#909090; | ||
text-align:center; | ||
} | ||
.flex-row { | ||
display:flex; | ||
flex-direction:row; | ||
} | ||
.flex-row-wrap { | ||
display:flex; | ||
flex-direction:row; | ||
flex-wrap:wrap; | ||
} | ||
.flex-col { | ||
display:flex; | ||
flex-direction:column; | ||
align-items:center; | ||
} | ||
input[type='text'] { | ||
background-color: #d0d0d0; | ||
color:#404040; | ||
} | ||
ul { | ||
list-style-type: none; | ||
} | ||
ul li a { | ||
display:block; | ||
margin:3px; | ||
padding:10px; | ||
border:2px solid #404040; | ||
border-radius:5px; | ||
color:#909090; | ||
text-decoration:none; | ||
} | ||
ul#modes li a { | ||
min-width:220px; | ||
} | ||
ul.control li a { | ||
min-width:60px; | ||
min-height:24px; | ||
} | ||
ul.control { | ||
display:flex; | ||
flex-direction:row; | ||
justify-content: flex-end; | ||
align-items: center; | ||
padding: 0px; | ||
} | ||
ul li a.active { | ||
border:2px solid #909090; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<h1>WS2812FX Control</h1> | ||
<canvas id='colorbar' width='75' height='1080'></canvas> | ||
<div id='controls'> | ||
<ul id='mode'></ul> | ||
<ul id='brightness'> | ||
<li><a href='#' class='b' id='-'>☼</a></li> | ||
<li><a href='#' class='b' id='+'>☀</a></li> | ||
</ul> | ||
<ul id='speed'> | ||
<li><a href='#' class='s' id='-'>−</a></li> | ||
<li><a href='#' class='s' id='+'>+</a></li> | ||
</ul> | ||
<ul id='auto'> | ||
<li><a href='#' class='a' id='-'>■</a></li> | ||
<li><a href='#' class='a' id='+'>►</a></li> | ||
</ul> | ||
<div class='flex-row'> | ||
<div class='flex-col'> | ||
<div><canvas id='color-canvas' width='360' height='360'></canvas><br/></div> | ||
<div><input type='text' id='color-value' oninput='onColor(event, this.value)'/></div> | ||
<div> | ||
<ul class='control'> | ||
<li>Brightness:</li> | ||
<li><a href='#' onclick="onBrightness(event, '-')">☼</a></li> | ||
<li><a href='#' onclick="onBrightness(event, '+')">☀</a></li> | ||
</ul> | ||
<ul class='control'> | ||
<li>Speed:</li> | ||
<li><a href='#' onclick="onSpeed(event, '-')">−</a></li> | ||
<li><a href='#' onclick="onSpeed(event, '+')">+</a></li> | ||
</ul> | ||
<ul class='control'> | ||
<li>Auto cycle:</li> | ||
<li><a href='#' onclick="onAuto(event, '-')">■</a></li> | ||
<li><a href='#' onclick="onAuto(event, '+')">►</a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
<div> | ||
<ul id='modes' class='flex-row-wrap'> | ||
</div> | ||
</div> | ||
</body> | ||
</html> | ||
)====="; | ||
|
Oops, something went wrong.