pixel plugin improvements, new ui

This commit is contained in:
2018-09-17 22:40:39 +02:00
parent ad8ba61986
commit ba7b1f3dde
9 changed files with 12539 additions and 46 deletions

View File

@@ -1,35 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.3.1.min.js"></script>
<script src="script.js"></script>
<title>ESP Kit</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-32x32.png">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<h1>Sprocket Config</h1>
<button class="js-restart">Restart</button>
<br>
<br>
<fieldset>
<legend>Network</legend>
<form action="/config" method="post">
<input type="hidden" name="fileName" value="/config.json">
<textarea name="config" class="js-config" rows="20" cols="50"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</fieldset>
<fieldset>
<legend>NeoPixel Config</legend>
<form action="/config" method="post">
<input type="hidden" name="fileName" value="/pixelConfig.json">
<textarea name="config" class="js-config" rows="20" cols="50"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</fieldset>
<body class="sui">
<div class="content">
<form class="param-control container collapsible open" action="#" method="POST">
<span class="heading">Pixels</span>
<div class="content">
<ul>
<li class="form-row ParamColor"
data-name="color"
data-topic="pixels/color"
data-label="Color">
</li>
<li class="form-row ParamColor"
data-name="color"
data-topic="pixels/color2"
data-label="Color 2">
</li>
<!-- data-entries='[{"text": "Color", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Wipe", "value": "3"}, {"text": "Scanner", "value": "4"}, {"text": "Fade", "value": "5"}]' -->
<li class="form-row ParamSelect"
data-label="Pattern"
data-name="pattern"
data-topic="pixels/pattern"
data-default="0"
data-entries='[{"text": "None", "value": "0"}, {"text": "Rainbow", "value": "1"}, {"text": "TheaterChase", "value": "2"}, {"text": "Fade", "value": "5"}]'
></li>
<!-- <li class="form-row ParamSlider"
data-name="totalSteps"
data-min="1"
data-max="255"
data-value="255"
data-topic="pixels/totalSteps"
data-label="Total Steps">
</li> -->
<li class="form-row ParamSlider"
data-name="brightness"
data-min="0"
data-max="255"
data-value="64"
data-topic="pixels/brightness"
data-label="Brightness">
</li>
</ul>
</div>
</form>
<div class="settings container collapsible">
<span class="heading">Settings</span>
<div class="content">
<h2>Network</h2>
<div class="Form" data-fileName="/config.json" data-name="configForm" data-from="/config.json" data-endpoint="/config"></div>
<h2>NeoPixel</h2>
<div class="Form" data-fileName="/pixelConfig.json" data-name="configForm" data-from="/pixelConfig.json" data-endpoint="/config"></div>
</div>
</div>
<div class="settings container collapsible">
<span class="heading">System</span>
<div class="content">
<div><label>Heap: </label><span class="js-heap"></span><span>&nbsp;bytes</span><br><br></div>
<button class="js-restart">Restart</button>
</div>
</div>
</div>
</body>
</html>