mirror of
https://github.com/ADElectronics/RTL00_WEB_WS2812.git
synced 2025-02-13 22:05:17 +00:00
174 lines
4.6 KiB
HTML
174 lines
4.6 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="us">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>Lamp</title>
|
|||
|
|
<link href="jquery-ui.min.css" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
body
|
|||
|
|
{
|
|||
|
|
font-family: "Trebuchet MS", sans-serif;
|
|||
|
|
margin: 50px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body onload="InitPage()">
|
|||
|
|
|
|||
|
|
<h2 class="demoHeaders">Режим работы</h2>
|
|||
|
|
<form>
|
|||
|
|
<div id="radioset">
|
|||
|
|
<input type="radio" id="radio1" name="radio" onChange="SelectedMode(0)"><label for="radio1">Фильтры</label>
|
|||
|
|
<input type="radio" id="radio2" name="radio" onChange="SelectedMode(1)"><label for="radio2">Оттенок</label>
|
|||
|
|
<input type="radio" id="radio3" name="radio" onChange="SelectedMode(2)"><label for="radio3">ТЕСТ</label>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<form>
|
|||
|
|
<div id="mode_filters">
|
|||
|
|
<!-- Меню доступных фильтров -->
|
|||
|
|
<h2 class="demoHeaders">Доступные фильтры-модификаторы вывода цвета:</h2>
|
|||
|
|
<fieldset>
|
|||
|
|
<div id="controlgroup">
|
|||
|
|
<input type="checkbox" id="filt_rainbow_en" onChange="SelectedFilter('filt_rainbow_settings', this)">
|
|||
|
|
<label for="filt_rainbow_en">Радуга</label>
|
|||
|
|
<input type="checkbox" id="filt_fade_en" onChange="SelectedFilter('filt_fade_settings', this)">
|
|||
|
|
<label for="filt_fade_en">Выцветание</label>
|
|||
|
|
<input type="checkbox" id="filt_flicker_en" onChange="SelectedFilter('filt_flicker_settings', this)">
|
|||
|
|
<label for="filt_flicker_en">Мигание</label>
|
|||
|
|
</div>
|
|||
|
|
</fieldset>
|
|||
|
|
|
|||
|
|
<!-- Радуга -->
|
|||
|
|
<div id="filt_rainbow_settings">
|
|||
|
|
<h2 class="demoHeaders">Параметры радуги</h2>
|
|||
|
|
<fieldset>
|
|||
|
|
<h3>Скорость</h3>
|
|||
|
|
<div id="slider"></div>
|
|||
|
|
<h3>Угол</h3>
|
|||
|
|
<div id="slider_a"></div>
|
|||
|
|
</fieldset>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Выцветание -->
|
|||
|
|
<div id="filt_fade_settings">
|
|||
|
|
<h2 class="demoHeaders">Параметры выцветания</h2>
|
|||
|
|
<fieldset>
|
|||
|
|
<h3>Скорость</h3>
|
|||
|
|
<div id="slider_sp"></div>
|
|||
|
|
<h3>Мин. и макс. яркость</h3>
|
|||
|
|
<div id="slider_min_max"></div>
|
|||
|
|
</fieldset>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Мигание -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="mode_singlecolor">
|
|||
|
|
<h2 class="demoHeaders">Оттенок</h2>
|
|||
|
|
<input type="text" value="#ff8800" data-wheelcolorpicker="" data-wcp-cssclass="color-block" data-wcp-autoresize="false" data-wcp-layout="block">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="mode_test">
|
|||
|
|
<h2 class="demoHeaders">ТЕСТ</h2>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<script src="jquery-3.2.1.min.js"></script>
|
|||
|
|
<script src="jquery-ui.min.js"></script>
|
|||
|
|
|
|||
|
|
<script src="jquery.wheelcolorpicker-3.0.3.min.js" type="text/javascript"></script>
|
|||
|
|
<link href="jquery.wheelcolorpicker.css" rel="stylesheet" type="text/css">
|
|||
|
|
|
|||
|
|
<style type="text/css">
|
|||
|
|
.color-block {
|
|||
|
|
width: 400px;
|
|||
|
|
height: 250px;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
$( "#slider" ).slider({
|
|||
|
|
value: 10
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$( "#slider_sp" ).slider({
|
|||
|
|
value: 10
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$( "#slider_a" ).slider({
|
|||
|
|
value: 0
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$( "#slider_min_max" ).slider({
|
|||
|
|
range: true,
|
|||
|
|
values: [ 10, 90 ]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$( "#controlgroup" ).controlgroup();
|
|||
|
|
|
|||
|
|
$( "#radioset" ).buttonset();
|
|||
|
|
|
|||
|
|
function InitPage()
|
|||
|
|
{
|
|||
|
|
document.getElementById("filt_fade_en").checked = true;
|
|||
|
|
document.getElementById("filt_rainbow_en").checked = true;
|
|||
|
|
|
|||
|
|
document.getElementById("filt_fade_en").click();
|
|||
|
|
document.getElementById("filt_rainbow_en").click();
|
|||
|
|
|
|||
|
|
SelectedMode(255);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SelectedMode(a)
|
|||
|
|
{
|
|||
|
|
if (a == "0")
|
|||
|
|
{
|
|||
|
|
document.getElementById("mode_filters").style.display='block';
|
|||
|
|
document.getElementById("mode_singlecolor").style.display='none';
|
|||
|
|
document.getElementById("mode_test").style.display='none';
|
|||
|
|
}
|
|||
|
|
else if (a == "1")
|
|||
|
|
{
|
|||
|
|
document.getElementById("mode_filters").style.display='none';
|
|||
|
|
document.getElementById("mode_singlecolor").style.display='block';
|
|||
|
|
document.getElementById("mode_test").style.display='none';
|
|||
|
|
}
|
|||
|
|
else if (a == "2")
|
|||
|
|
{
|
|||
|
|
document.getElementById("mode_filters").style.display='none';
|
|||
|
|
document.getElementById("mode_singlecolor").style.display='none';
|
|||
|
|
document.getElementById("mode_test").style.display='block';
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
document.getElementById("mode_filters").style.display='none';
|
|||
|
|
document.getElementById("mode_singlecolor").style.display='none';
|
|||
|
|
document.getElementById("mode_test").style.display='none';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function SelectedFilter(a, b)
|
|||
|
|
{
|
|||
|
|
if (b.checked == "0")
|
|||
|
|
{
|
|||
|
|
document.getElementById(a).style.display='none';
|
|||
|
|
}
|
|||
|
|
else
|
|||
|
|
{
|
|||
|
|
document.getElementById(a).style.display='block';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function NewColor(a)
|
|||
|
|
{
|
|||
|
|
alert(a);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|