mirror of
https://github.com/ADElectronics/RTL00_WEB_WS2812.git
synced 2025-07-31 20:31:07 +00:00
pre-first-release
This commit is contained in:
ADElectronics
parent
c6c5eeed6f
commit
9e39a46764
76 changed files with 190786 additions and 90598 deletions
|
|
@ -1,17 +1,27 @@
|
|||
body {font-family: Arial;}
|
||||
|
||||
.hblockcont {
|
||||
text-align:center;
|
||||
align:center;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: block;
|
||||
border: 0px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.on, .off {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.range {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
height: 45px;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
|
@ -49,6 +59,57 @@ fieldset {
|
|||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #00cc99;
|
||||
border: none;
|
||||
color: black;
|
||||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
margin: 4px 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select {
|
||||
//background-color:#00cc99;
|
||||
width: 180px;
|
||||
padding: 5px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.inputtext {
|
||||
width: 180px;
|
||||
font-size: 16px;
|
||||
border: 1px solid #ccc;
|
||||
text-align: center;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/html/html_tables.asp */
|
||||
|
||||
table {
|
||||
font-family: arial, sans-serif;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.td1st {
|
||||
border: 0px solid #dddddd;
|
||||
text-align: left;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 0px solid #dddddd;
|
||||
text-align: right;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* http://dimox.name/custom-checkboxes-and-radio-buttons-using-css-only/ */
|
||||
|
||||
.checkbox + label {
|
||||
|
|
|
|||
|
|
@ -38,6 +38,22 @@ function openFilterSettings(chkbx)
|
|||
sendFilterState(chkbx.name, chkbx.checked);
|
||||
}
|
||||
|
||||
function changeOnOff(field)
|
||||
{
|
||||
if (field.className === 'off')
|
||||
{
|
||||
sendFilterParam('ws_isenable', "1");
|
||||
field.src = 'on.gif';
|
||||
field.className = 'on';
|
||||
}
|
||||
else
|
||||
{
|
||||
sendFilterParam('ws_isenable', "0");
|
||||
field.src = 'off.gif';
|
||||
field.className = 'off';
|
||||
}
|
||||
}
|
||||
|
||||
function setFormValues(form, cfg)
|
||||
{
|
||||
var name, field;
|
||||
|
|
@ -55,6 +71,19 @@ function setFormValues(form, cfg)
|
|||
field.checked = cfg[name] === '1' ? true : false;
|
||||
openFilterSettings(field);
|
||||
}
|
||||
else if (field.type === 'image')
|
||||
{
|
||||
if (cfg[name] == '1')
|
||||
{
|
||||
field.src = 'on.gif';
|
||||
field.className = 'on';
|
||||
}
|
||||
else
|
||||
{
|
||||
field.src = 'off.gif';
|
||||
field.className = 'off';
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
field.value = cfg[name];
|
||||
|
|
@ -78,6 +107,65 @@ function sendFilterState(filtName, en)
|
|||
xhr.send(params);
|
||||
}
|
||||
|
||||
function sendHSV(HSV)
|
||||
{
|
||||
var xhr = new XMLHttpRequest();
|
||||
var hue = Math.round(255 * HSV.h);
|
||||
var sat = Math.round(255 * HSV.s);
|
||||
var val = Math.round(255 * HSV.v);
|
||||
|
||||
var params = 'ws_filt_const_hue=' + encodeURIComponent(hue) +
|
||||
'&ws_filt_const_sat=' + encodeURIComponent(sat) +
|
||||
'&ws_filt_const_value=' + encodeURIComponent(val) +
|
||||
'&ws_filt_const_update=' + encodeURIComponent('1');
|
||||
xhr.open("POST", '/index.html', true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
||||
xhr.onreadystatechange = function () {
|
||||
|
||||
};
|
||||
xhr.send(params);
|
||||
}
|
||||
|
||||
function loadHSV(picker, HSV)
|
||||
{
|
||||
var hue = HSV[0] / 255;
|
||||
var sat = HSV[1] / 255;
|
||||
var val = HSV[2] / 255;
|
||||
|
||||
var rgb = hsvToRgb(hue, sat, val);
|
||||
var hex = '#' + byteToHex(rgb[0]) + byteToHex(rgb[1]) + byteToHex(rgb[2]);
|
||||
|
||||
picker.setColorByHex(hex);
|
||||
}
|
||||
|
||||
function byteToHex(d)
|
||||
{
|
||||
var hex = d.toString(16);
|
||||
hex = "00".substr(0, 2 - hex.length) + hex;
|
||||
return hex;
|
||||
}
|
||||
|
||||
function hsvToRgb(h, s, v) {
|
||||
var r, g, b;
|
||||
|
||||
var i = Math.floor(h * 6);
|
||||
var f = h * 6 - i;
|
||||
var p = v * (1 - s);
|
||||
var q = v * (1 - f * s);
|
||||
var t = v * (1 - (1 - f) * s);
|
||||
|
||||
switch (i % 6) {
|
||||
case 0: r = v, g = t, b = p; break;
|
||||
case 1: r = q, g = v, b = p; break;
|
||||
case 2: r = p, g = v, b = t; break;
|
||||
case 3: r = p, g = q, b = v; break;
|
||||
case 4: r = t, g = p, b = v; break;
|
||||
case 5: r = v, g = p, b = q; break;
|
||||
}
|
||||
|
||||
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
||||
}
|
||||
|
||||
function sendFilterParam(filtParam, val)
|
||||
{
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
|
|
|||
|
|
@ -1,94 +1,256 @@
|
|||
<!DOCTYPE html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link href="elements.css" rel="stylesheet">
|
||||
<style></style>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<title>Глупая гирлянда</title>
|
||||
<link href="elements.css" rel="stylesheet">
|
||||
<style></style>
|
||||
</head>
|
||||
<body>
|
||||
<p align="center">Ãëóïàÿ ãèðëÿíäà</p>
|
||||
|
||||
<div class="tab" align="center">
|
||||
<button class="tablinks" onclick="openTab(event, 0)">Ôèëüòðû</button>
|
||||
<button class="tablinks" onclick="openTab(event, 1)">?</button>
|
||||
<button class="tablinks" onclick="openTab(event, 2)">Íàñòðîéêè</button>
|
||||
<div class="hblockcont">
|
||||
<input type="image" src="off.gif" class='off' name='ws_isenable' onclick="changeOnOff(this)" />
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tab" align="center">
|
||||
<button class="tablinks" onclick="openTab(event, 0)">Режим работы</button>
|
||||
<button class="tablinks" onclick="openTab(event, 1)">Настройки Wi-Fi</button>
|
||||
</div>
|
||||
<div id="0" class="tabcontent" align="center">
|
||||
<form method="post">
|
||||
<fieldset>
|
||||
<input type="checkbox" class="checkbox" id="filt0" name='ws_filt_rbw_enbl' onclick="openFilterSettings(this)" />
|
||||
<label for="filt0">Ðàäóãà</label>
|
||||
<label for="filt0">Радуга</label>
|
||||
<input type="checkbox" class="checkbox" id="filt1" name='ws_filt_const_enbl' onclick="openFilterSettings(this)" />
|
||||
<label for="filt1">Îòòåíîê</label>
|
||||
<label for="filt1">Оттенок</label>
|
||||
<input type="checkbox" class="checkbox" id="filt2" name='ws_filt_fd_enbl' onclick="openFilterSettings(this)" />
|
||||
<label for="filt2">Âûöâåòàíèå</label>
|
||||
<label for="filt2">Выцветание</label>
|
||||
<input type="checkbox" class="checkbox" id="filt3" name='ws_filt_wave_enbl' onclick="openFilterSettings(this)" />
|
||||
<label for="filt3">Âîëíà</label>
|
||||
<label for="filt3">Волна</label>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<div id="filt0" class="filtercontent">
|
||||
<h4 align="center">Ðàäóãà</h4>
|
||||
Ðàçìåñòèòü ïîëíóþ ðàäóãó íà ïèêñåëÿõ, åä. :<br>
|
||||
<input type="range" class="range" step="1" min="10" name='ws_filt_rbw_huesteps' max="400" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Ñêîðîñòü ñìåíû îòòåíêà:<br>
|
||||
<h4 align="center">Радуга</h4>
|
||||
Разместить полную радугу на пикселях, ед. :<br>
|
||||
<input type="range" class="range" step="1" min="10" name='ws_filt_rbw_huesteps' max="~ws_striplen~" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Скорость смены оттенка:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_rbw_cyclesteps' max="10" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
</div>
|
||||
|
||||
<div id="filt1" class="filtercontent">
|
||||
<h4 align="center">Îòòåíîê</h4>
|
||||
<h4 align="center">Оттенок</h4>
|
||||
<canvas id="picker"></canvas><br>
|
||||
<input id="color" value="#54aedb">
|
||||
<input id="color" value="#007fff">
|
||||
</div>
|
||||
|
||||
<div id="filt2" class="filtercontent">
|
||||
<h4 align="center">Âûöâåòàíèå</h4>
|
||||
Ñêîðîñòü ñìåíû ÿðêîñòè:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_fd_cyclesteps' max="254" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Ìèíèìàëüíàÿ ÿðêîñòü:<br>
|
||||
<h4 align="center">Выцветание</h4>
|
||||
Скорость смены яркости:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_fd_cyclesteps' max="127" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Минимальная яркость:<br>
|
||||
<input type="range" class="range" min="0" name='ws_filt_fd_min' max="254" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Ìàêñèìàëüíàÿ ÿðêîñòü:<br>
|
||||
Максимальная яркость:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_fd_max' max="255" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
Øàíñ ñðàáàòûâàíèÿ:<br>
|
||||
<!--
|
||||
Шанс срабатывания:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_fd_chance' onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<div id="filt3" class="filtercontent">
|
||||
<h4 align="center">Âîëíà</h4>
|
||||
<h4 align="center">Волна</h4>
|
||||
Скорость:<br>
|
||||
<input type="range" class="range" min="1" name='ws_filt_wave_step' max="10" onchange="sendFilterParam(this.name, this.value)" /><br>
|
||||
Длина волны :<br>
|
||||
<input type="range" class="range" step="1" min="10" max="128" name='ws_filt_wave_wavesteps' max="~ws_striplen~" onchange="sendFilterParam(this.name, this.value)"/><br>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="1" class="tabcontent" align="center">
|
||||
<h3>Íè÷åãî</h3>
|
||||
<form method="post">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="td1st">Режим Wi-Fi</td>
|
||||
<td>
|
||||
<select class="select" name='wifi_mode'>
|
||||
<option value='1'>Клиент</option>
|
||||
<option value='2'>Точка доступа</option>
|
||||
<option value='3'>Клиент + Точка доступа</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">IEEE PHY</td>
|
||||
<td>
|
||||
<select class="select" name='wifi_bgn'>
|
||||
<option value='1'>802.11b</option>
|
||||
<option value='3'>802.11g</option>
|
||||
<option value='11'>802.11n</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">Мощность передачи</td>
|
||||
<td>
|
||||
<select class="select" name='wifi_txpow'>
|
||||
<option value='0'>100%</option>
|
||||
<option value='1'>75%</option>
|
||||
<option value='2'>50%</option>
|
||||
<option value='3'>25%</option>
|
||||
<option value='4'>12.5%</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td1st"><b>Настройки клиента:</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">SSID</td>
|
||||
<td>
|
||||
<input name="wifi_st_ssid" class="inputtext" maxlength='31' value='~wifi_st_ssid~'/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">Пароль</td>
|
||||
<td>
|
||||
<input name="wifi_st_psw" class="inputtext" maxlength='63' value='~wifi_st_psw~' />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">Аутентификация</td>
|
||||
<td>
|
||||
<select class="select" name='wifi_st_auth'>
|
||||
<option value='0'>Open</option>
|
||||
<option value='1'>WEP PSK</option>
|
||||
<option value='2'>WEP Shared</option>
|
||||
<option value='3'>WPA TKIP</option>
|
||||
<option value='4'>WPA AES</option>
|
||||
<option value='5'>WPA2 TKIP</option>
|
||||
<option value='6'>WPA2 AES</option>
|
||||
<option value='7'>WPA2 Mixed</option>
|
||||
<option value='8'>WPA2/WPA AES</option>
|
||||
<option value='9'>Unknown</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">IP</td>
|
||||
<td>
|
||||
<input name="wifi_st_ip" class="inputtext" maxlength='31' value='~wifi_st_ip~' />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="td1st"><b>Настройки точки доступа:</b></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">SSID</td>
|
||||
<td>
|
||||
<input name="wifi_ap_ssid" class="inputtext" maxlength='31' value='~wifi_ap_ssid~' />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">Пароль</td>
|
||||
<td>
|
||||
<input name="wifi_ap_psw" class="inputtext" maxlength='63' value='~wifi_ap_psw~' />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">Аутентификация</td>
|
||||
<td>
|
||||
<select class="select" name='wifi_ap_auth'>
|
||||
<option value='0'>Open</option>
|
||||
<option value='1'>WPA_WPA2_PSK</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="td1st">IP</td>
|
||||
<td>
|
||||
<input name="wifi_ap_ip" class="inputtext" maxlength='31' value='~wifi_ap_ip~' />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>
|
||||
<input type='hidden' name='wifi_newcfg' value='0xffff' />
|
||||
<button class="button">Применить...</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="2" class="tabcontent">
|
||||
<h3>Íàñòðîéêè</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="html5kellycolorpicker.min.js"></script>
|
||||
<script src="colorpicker.min.js"></script>
|
||||
<script src="elements.js"></script>
|
||||
<script type="text/javascript">
|
||||
/* https://github.com/NC22/HTML5-Color-Picker/wiki/Документация */
|
||||
var colorPickerT = new KellyColorPicker(
|
||||
{
|
||||
place: 'picker',
|
||||
input: 'color',
|
||||
size: 300,
|
||||
});
|
||||
|
||||
var onchange = function (self)
|
||||
{
|
||||
var hsv = colorPickerT.getCurColorHsv();
|
||||
sendHSV(hsv);
|
||||
};
|
||||
//colorPickerT.addUserEvent("change", onchange);
|
||||
colorPickerT.addUserEvent("mouseuph", onchange);
|
||||
colorPickerT.addUserEvent("mouseupsv", onchange);
|
||||
|
||||
new KellyColorPicker({place : 'picker', input : 'color', size : 300});
|
||||
|
||||
var cfg =
|
||||
{
|
||||
ws_filt_rbw_enbl: "~ws_filt_rbw_enbl~",
|
||||
ws_filt_flick_enbl: "~ws_filt_flick_enbl~",
|
||||
ws_filt_fd_enbl: "~ws_filt_fd_enbl~",
|
||||
ws_filt_rbw_huesteps: "~ws_filt_rbw_huesteps~",
|
||||
ws_filt_rbw_cyclesteps: "~ws_filt_rbw_cyclesteps~",
|
||||
ws_filt_fd_cyclesteps: "~ws_filt_fd_cyclesteps~",
|
||||
ws_filt_fd_min: "~ws_filt_fd_min~",
|
||||
ws_filt_fd_max: "~ws_filt_fd_max~",
|
||||
ws_filt_fd_chance: "~ws_filt_fd_chance~"
|
||||
}
|
||||
setFormValues(document.forms[0], cfg);
|
||||
var cfg_f0 =
|
||||
{
|
||||
ws_isenable: "~ws_isenable~",
|
||||
}
|
||||
setFormValues(document.getElementsByName("ws_isenable"), cfg_f0);
|
||||
|
||||
var cfg_f1 =
|
||||
{
|
||||
ws_filt_rbw_enbl: "~ws_filt_rbw_enbl~",
|
||||
ws_filt_rbw_huesteps: "~ws_filt_rbw_huesteps~",
|
||||
ws_filt_rbw_cyclesteps: "~ws_filt_rbw_cyclesteps~",
|
||||
|
||||
ws_filt_fd_enbl: "~ws_filt_fd_enbl~",
|
||||
ws_filt_fd_cyclesteps: "~ws_filt_fd_cyclesteps~",
|
||||
ws_filt_fd_min: "~ws_filt_fd_min~",
|
||||
ws_filt_fd_max: "~ws_filt_fd_max~",
|
||||
//ws_filt_fd_chance: "~ws_filt_fd_chance~",
|
||||
|
||||
ws_filt_wave_enbl: "~ws_filt_wave_enbl~",
|
||||
ws_filt_wave_step: "~ws_filt_wave_step~",
|
||||
ws_filt_wave_wavesteps: "~ws_filt_wave_wavesteps~"
|
||||
}
|
||||
setFormValues(document.forms[0], cfg_f1);
|
||||
|
||||
var cfg_f2 =
|
||||
{
|
||||
wifi_mode: "~wifi_mode~",
|
||||
wifi_bgn: "~wifi_bgn~",
|
||||
wifi_txpow: "~wifi_txpow~",
|
||||
wifi_st_ssid: "~wifi_st_ssid~",
|
||||
wifi_st_psw: "~wifi_st_psw~",
|
||||
wifi_st_auth: "~wifi_st_auth~",
|
||||
wifi_st_ip: "~wifi_st_ip~",
|
||||
wifi_ap_ssid: "~wifi_ap_ssid~",
|
||||
wifi_ap_psw: "~wifi_ap_psw~",
|
||||
wifi_ap_auth: "~wifi_ap_auth~",
|
||||
wifi_ap_ip: "~wifi_ap_ip~"
|
||||
}
|
||||
setFormValues(document.forms[1], cfg_f2);
|
||||
|
||||
var cfg_hsv =
|
||||
{
|
||||
ws_filt_const_hue: "~ws_filt_const_hue~",
|
||||
ws_filt_const_sat: "~ws_filt_const_sat~",
|
||||
ws_filt_const_value: "~ws_filt_const_value~"
|
||||
}
|
||||
loadHSV(colorPickerT, cfg_hsv);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
Firmware/RTLGDB/WEBFiles/off.gif
Normal file
BIN
Firmware/RTLGDB/WEBFiles/off.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
Firmware/RTLGDB/WEBFiles/on.gif
Normal file
BIN
Firmware/RTLGDB/WEBFiles/on.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue