mirror of
https://github.com/ADElectronics/RTL00_WEB_WS2812.git
synced 2025-07-31 20:31:07 +00:00
173 lines
4.6 KiB
HTML
173 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>
|