/www/wwwroot/cloud.lincq.cn/代码整理/结合esp8266写的灯光控制界面.jsdocument.title = '篮子灯控制台';
document.querySelector('.control-area').innerHTML = `
`;
loading(true);
const colorAll = [
'#000000', '#673AB7', '#ec1c23', '#ff00ff', '#ff7e26', '#009688', '#22b14b', '#2196f3', '#3f47cc', '#a349a4',
'#ffffff', '#795548', '#b87957', '#feaec9', '#ffc80d', '#ffeb3b', '#b5e61d', '#99d9ea', '#7092be', '#c8bfe7'
],
// _domain_ = 'http://wifiled.lincq.cn/';
// _domain_ = 'http://192.168.137.240/';
_domain_ = './';
var html = '', rgbVal, global_rgbVal = [0,0,0], global_rgbValb = [0,0,0], btnColorId = 'btnColor0', interval = undefined, es, esJSON = "";
for(var i = 0; i < colorAll.length; i++) {
rgbVal = color_HEX_to_DEC(colorAll[i]).toString();
html += '';
}
document.querySelector('.color-select').innerHTML = html;
var cl = document.querySelector('.color-light');
var clh = cl.clientHeight;
var ledh = document.querySelector('.color-light>.color-light-h');
var ledhb = document.querySelector('.color-light>.color-light-b>#bfb');
ledh.style.height = '0%';
ledhb.innerText = '0%';
function bfb_icon() {
var jia = document.querySelector('.icon-bfb-jia');
var jian = document.querySelector('.icon-bfb-jian');
if(Number(ledhb.innerText.replace("%", "")) <= 30) {
jia.classList = "icon-bfb-jia";
jian.classList = "icon-bfb-jian icon-bfb-active";
}else{
jia.classList = "icon-bfb-jia icon-bfb-active";
jian.classList = "icon-bfb-jian";
}
}
cl.ontouchstart = function(event) {
fun_interval(false);
ledh.style.transition = 'height 0ms';
var YStart = event.touches[0].pageY, YM = 0, YML = 0, deg;
var ledh_val, rledh_val;
document.ontouchmove = function(eventM) {
YM = YStart - eventM.touches[0].pageY - YML;
YML = YStart - eventM.touches[0].pageY;
ledh_val = Number(ledh.style.height.replace("%", "")) / 100 * clh;
rledh_val = (Number(ledh_val + YM) / clh * 100 > 100) ? 100 : (Number(ledh_val + YM) / clh * 100);
rledh_val = rledh_val < 0 ? 0 : rledh_val;
ledh.style.height = rledh_val + "%";
ledhb.innerText = Math.round(rledh_val) + "%";
rgbp(rledh_val);
bfb_icon();
};
document.ontouchend = function() {
ledh.style.transition = 'height 600ms';
connect(global_rgbValb[0], global_rgbValb[1], global_rgbValb[2]);
fun_interval(true);
document.ontouchmove = undefined;
document.ontouchend = undefined;
};
};
cl.onmousedown = function(event) {
fun_interval(false);
ledh.style.transition = 'height 0ms';
var YStart = event.pageY, YM = 0, YML = 0;
var ledh_val, rledh_val;
document.onmousemove = function(eventM) {
YM = YStart - eventM.pageY - YML;
YML = YStart - eventM.pageY;
ledh_val = Number(ledh.style.height.replace("%", "")) / 100 * clh;
rledh_val = (Number(ledh_val + YM) / clh * 100 > 100) ? 100 : (Number(ledh_val + YM) / clh * 100);
rledh_val = rledh_val < 0 ? 0 : rledh_val;
ledh.style.height = rledh_val + "%";
ledhb.innerText = Math.round(rledh_val) + "%";
rgbp(rledh_val);
bfb_icon();
};
document.onmouseup = function() {
ledh.style.transition = 'height 600ms';
connect(global_rgbValb[0], global_rgbValb[1], global_rgbValb[2]);
fun_interval(true);
document.onmousemove = undefined;
document.onmouseup = undefined;
};
};
function rgbp(p) {
p /= 100;
global_rgbValb[0] = parseInt(global_rgbVal[0] * p);
global_rgbValb[1] = parseInt(global_rgbVal[1] * p);
global_rgbValb[2] = parseInt(global_rgbVal[2] * p);
return global_rgbValb;
}
function color_active_remove() {
var btnColor = document.querySelectorAll('button[id^=btnColor]');
for(var i = 0; i < btnColor.length; i++) {
btnColor[i].children[0].classList = "icon-taiyang";
btnColor[i].style.transform = 'scale(1)';
}
}
var led_rgb = (rgb, id) => {
rgb = rgb.split(",");
if(JSON.stringify(global_rgbVal) == JSON.stringify(rgb)) return;
fun_interval(false);
global_rgbVal = rgb;
rgb = rgbp(ledh.style.height.replace("%", ""));
var r = rgb[0] ? rgb[0] : '';
var g = rgb[1] ? rgb[1] : '';
var b = rgb[2] ? rgb[2] : '';
color_active_remove();
document.querySelector('#'+id).children[0].classList = "icon-taiyang icon-taiyang-show";
document.querySelector('#'+id).style.transform = 'scale(1.2)';
btnColorId = id;
connect(r, g, b);
fun_interval(true);
};
function connect(r, g, b) {
var xhr = new XMLHttpRequest();
xhr.open("GET", _domain_ + "rgb?r="+r+"&g="+g+"&b="+b+"&global_rgbVal="+global_rgbVal+"&rgb_light="+Math.round(ledh.style.height.replace("%", ""))+"&btn_color_id="+btnColorId);
xhr.timeout = 2000;
xhr.send();
}
function load_status() {
if(typeof(EventSource) !== "undefined") {
es = new EventSource(_domain_ + 'status');
es.onmessage = function(event) {
var data = JSON.parse(event.data);
if(esJSON !== JSON.stringify(data)) {
btnColorId = data['btn_color_id'];
global_rgbVal = data['RGB'];
rgbp(data['rgb_light']);
ledh.style.height = data['rgb_light'] + "%";
ledhb.innerText = data['rgb_light'] + "%";
bfb_icon();
color_active_remove();
document.querySelector('#'+btnColorId).children[0].classList = "icon-taiyang icon-taiyang-show";
document.querySelector('#'+btnColorId).style.transform = 'scale(1.2)';
esJSON = JSON.stringify(data);
loading(false);
}
};
}else{
console.log("该浏览器不支持");
}
}
function loading(showHide) {
var _loading_ = document.querySelector('.loading');
var controlBody = document.querySelector('.control-body');
if(showHide == true) {
if(_loading_.style.display == 'block') return;
_loading_.style.display = 'block';
controlBody.style.filter = 'blur(10px)';
controlBody.style.WebkitFilter = 'blur(10px)';
}else{
if(_loading_.style.display == 'none') return;
_loading_.style.display = 'none';
controlBody.style.filter = 'none';
controlBody.style.WebkitFilter = 'none';
}
}
function fun_interval(val) {
try {
window.clearTimeout(interval);
} catch(e) {};
if(val == true) {
interval = setTimeout(function() {
load_status();
}, 2000);
}else{
es.close();
}
}
// 将 十六进制颜色 转换为 rgb值
function color_HEX_to_DEC(CHEX) {
var rgb = [];
CHEX = CHEX.replace("#", "");
var rgbs = CHEX.split("");
if(CHEX.length == 3) {
rgb[0] = Math.pow(parseInt(rgbs[0], 16), 2);
rgb[1] = Math.pow(parseInt(rgbs[1], 16), 2);
rgb[2] = Math.pow(parseInt(rgbs[2], 16), 2);
}else if(CHEX.length == 6 || CHEX.length == 8){
for(var i = 0; i < CHEX.length / 2; i++) {
rgbdec = parseInt((rgbs[i*2]) + (rgbs[i*2+1]), 16);
if(i < 3) {
rgb[i] = rgbdec;
}else{
rgb[i] = Math.floor(rgbdec / 255 * 100) / 100;
}
}
}
return rgb;
}
load_status();