Mark van Renswoude
b39f3ba826
Added range customization (untested) Added static mode easing (untested)
94 lines
5.3 KiB
HTML
94 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="theme-color" content="#000000" />
|
|
<title>Stairs demo</title>
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
|
|
<script src="script.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="title">
|
|
<img src="loader.gif" class="loader" data-bind="attr: { 'style': 'visibility: ' + (loading() ? 'visible' : 'hidden') }" />
|
|
|
|
<div class="main"><span style="color:#ff0000;">T</span><span style="color:#ff1200;">h</span><span style="color:#ff2400;">e</span><span style="color:#ff3600;"> </span><span style="color:#ff4900;">A</span><span style="color:#ff5b00;">m</span><span style="color:#ff6d00;">a</span><span style="color:#ff7f00;">z</span><span style="color:#ff9100;">i</span><span style="color:#ffa400;">n</span><span style="color:#ffb600;">g</span><span style="color:#ffc800;"> </span><span style="color:#ffda00;">S</span><span style="color:#ffed00;">t</span><span style="color:#ffff00;">a</span><span style="color:#dbff00;">i</span><span style="color:#b6ff00;">r</span><span style="color:#92ff00;">s</span><span style="color:#6dff00;"> </span><span style="color:#49ff00;">L</span><span style="color:#24ff00;">i</span><span style="color:#00ff00;">g</span><span style="color:#00ff24;">h</span><span style="color:#00ff49;">t</span><span style="color:#00ff6d;">i</span><span style="color:#00ff92;">n</span><span style="color:#00ffb6;">g</span><span style="color:#00ffdb;"> </span><span style="color:#00ffff;">F</span><span style="color:#00dbff;">r</span><span style="color:#00b6ff;">o</span><span style="color:#0092ff;">n</span><span style="color:#006dff;">t</span><span style="color:#0049ff;">e</span><span style="color:#0024ff;">n</span><span style="color:#0000ff;">d</span></div>
|
|
<div class="sub">"Much web technology. Wow." <span class="quote">- No one, ever</span></div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="tabs">
|
|
<div class="tab" data-bind="css: { active: tab() == 'mode' }, click: setTab.bind(this, 'mode')">Mode</div>
|
|
<div class="tab" data-bind="css: { active: tab() == 'settings' }, click: setTab.bind(this, 'settings')">Settings</div>
|
|
<div class="tab" data-bind="css: { active: tab() == 'update' }, click: setTab.bind(this, 'update')">Update</div>
|
|
</div>
|
|
|
|
<!-- ko if:tab() == 'mode' -->
|
|
<div class="mode">
|
|
<div class="selection"><input type="radio" name="mode" value="Static" id="Static" data-bind="checked: mode" /><label for="Static">Static</label></div>
|
|
<div class="selection"><input type="radio" name="mode" value="Custom" id="Custom" data-bind="checked: mode" /><label for="Custom">Custom</label></div>
|
|
<div class="selection"><input type="radio" name="mode" value="Alternate" id="Alternate" data-bind="checked: mode" /><label for="Alternate">Alternating</label></div>
|
|
<!--
|
|
<div class="selection"><input type="radio" name="mode" value="Slide" id="Slide" data-bind="checked: mode" /><label for="Slide">Sliding</label></div>
|
|
-->
|
|
</div>
|
|
|
|
<div class="parameters" data-bind="visible: mode() == 'Static'" style="display: none">
|
|
<div class="parameter">
|
|
Brightness: <input type="range" min="0" max="4095" data-bind="value: static.brightness, valueUpdate: 'input'" /> <input type="number" min="0" max="4095" data-bind="value: static.brightness" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="parameters" data-bind="visible: mode() == 'Custom'" style="display: none">
|
|
<!-- ko foreach: custom.brightness -->
|
|
<div class="parameter">
|
|
Step <span data-bind="text: $root.custom.brightness().length - $index()"></span>: <input type="range" min="0" max="4095" data-bind="value: $data.value, valueUpdate: 'input'" /> <input type="number" min="0" max="4095" data-bind="value: $data.value" />
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
|
|
<div class="parameters" data-bind="visible: mode() == 'Alternate'" style="display: none">
|
|
<div class="parameter">
|
|
Interval: <input type="number" data-bind="value: alternate.interval" />
|
|
</div>
|
|
<div class="parameter">
|
|
Brightness: <input type="range" min="0" max="4095" data-bind="value: alternate.brightness, valueUpdate: 'input'" /> <input type="number" min="0" max="4095" data-bind="value: alternate.brightness" />
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="parameters" data-bind="visible: mode() == 'Slide'" style="display: none">
|
|
<div class="parameter">
|
|
Brightness: <input type="range" min="0" max="4095" data-bind="value: slide.brightness, valueUpdate: 'input'" /> <input type="number" min="0" max="4095" data-bind="value: slide.brightness" />
|
|
</div>
|
|
</div>
|
|
-->
|
|
<!-- /ko -->
|
|
|
|
|
|
<!-- ko if:tab() == 'settings' -->
|
|
<!-- /ko -->
|
|
|
|
|
|
<!-- ko if:tab() == 'update' -->
|
|
<div class="parameters">
|
|
<div class="parameter">
|
|
Host: <input type="text" data-bind="value: firmware.host" />
|
|
</div>
|
|
<div class="parameter">
|
|
Port: <input type="number" data-bind="value: firmware.port" min="1" max="65536" />
|
|
</div>
|
|
<div class="parameter">
|
|
Path: <input type="text" data-bind="value: firmware.path" />
|
|
</div>
|
|
|
|
<button data-bind="click: updateFirmware">Check for update</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
|
|
</body>
|
|
</html> |