509 lines
22 KiB
HTML
509 lines
22 KiB
HTML
<!--
|
||
* @Descripttion:
|
||
* @version:
|
||
* @Author: Baron
|
||
* @Date: 2022-07-06 10:00:11
|
||
* @LastEditors: Andy
|
||
* @LastEditTime: 2024-06-25 11:46:20
|
||
-->
|
||
<!DOCTYPE html>
|
||
<html lang="en" manifest="demo.appcache">
|
||
|
||
<head>
|
||
<script type="text/javascript" src="js/webView.js"></script>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="max-age" content="31536000">
|
||
<meta http-equiv="Pragma" content="public">
|
||
<meta http-equiv="Cache-control" content="public">
|
||
<meta http-equiv="Cache" content="public">
|
||
<title>我的LED屏</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<!-- <link rel="stylesheet" href="css/common.css"> -->
|
||
<link rel="stylesheet" href="css/content.css">
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1, minimum-scale=0.01, maximum-scale=1, user-scalable=yes" />
|
||
<link rel="prefetch" href="screen_program.html">
|
||
<link rel="prefetch" href="screen_par.html">
|
||
<script src="js/jquery-3.4.1.min.js"></script>
|
||
<script src="js/MQTT_port.js"></script>
|
||
<!-- <script src="js/utils.js"></script> -->
|
||
<script> src = "js/jsonid.js"</script>
|
||
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> -->
|
||
|
||
</head>
|
||
|
||
<body>
|
||
<div class="contain">
|
||
<!-- 屏幕参数设置头部 -->
|
||
<!-- <header>
|
||
<div class="screen">
|
||
<ul class="tag">
|
||
<li>
|
||
<a href="content.html"><img src="img/content.png"/><span>内容编辑</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="screen_pro.html"><img src="img/setting.png" alt=""><span>功能设置</span></a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</header> -->
|
||
<!-- <hr/> -->
|
||
<!-- 屏幕中部区域 -->
|
||
<div class="keys_div">
|
||
<article class="midart">
|
||
<ul class="tag_control">
|
||
<li class="control_li" onclick="location.href='screen_par.html'">
|
||
<img src="img/compicon.png" /><span>屏参</span>
|
||
</li>
|
||
<li class="control_li" onclick="location.href='screen_program.html' ">
|
||
<img src="img/compicon.png" /><span>节目</span>
|
||
</li>
|
||
<li class="control_li" id="luminance">
|
||
<img src="img/ld.png" /><span>屏幕亮度</span>
|
||
</li>
|
||
<li class="control_li" onclick="location.href='screen_virtual.html' ">
|
||
<img src="img/compicon.png" /><span>虚拟遥控器</span>
|
||
</li>
|
||
<li class="control_li" id="start">
|
||
<img src="img/compicon.png" /><span>开启屏幕</span>
|
||
</li>
|
||
<li class="control_li" id="close">
|
||
<img src="img/compicon.png" /><span>关闭屏幕</span>
|
||
</li>
|
||
<li class="control_li" id="clear">
|
||
<img src="img/compicon.png" /><span>清除屏幕</span>
|
||
</li>
|
||
<li class="control_li" id="other">
|
||
<img src="img/compicon.png" /><span>开机参数</span>
|
||
</li>
|
||
<li class="control_li">
|
||
<a onclick="navigateToVueHome()">
|
||
<img src="img/compicon.png" /><span>返回主页</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</article>
|
||
</div>
|
||
|
||
<div class="version">
|
||
<p id="version">版本号 V1.0.0</p>
|
||
</div>
|
||
|
||
<!-- 添加节目弹窗 开始 -->
|
||
<div class="ground" id="Ground"></div>
|
||
<div class="my_contain" id="popup">
|
||
<div class="screen_box">
|
||
<h1>亮度设置</h1>
|
||
<div id="my_luminance" class="my_luminance">
|
||
<select id="luminance_select">
|
||
<option value="1">1%</option>
|
||
<option value="3">3%</option>
|
||
<option value="5">5%</option>
|
||
<option value="10">10%</option>
|
||
<option value="15">15%</option>
|
||
<option value="20">20%</option>
|
||
<option value="30">30%</option>
|
||
<option value="40">40%</option>
|
||
<option value="50">50%</option>
|
||
<option value="60">60%</option>
|
||
<option value="70">70%</option>
|
||
<option value="80">80%</option>
|
||
<option value="90">90%</option>
|
||
<option selected value="100">100%</option>
|
||
</select>
|
||
</div>
|
||
<button name="submit" id="new_program">确定</button><br>
|
||
<button name="cancel" id="cancel">返回</button>
|
||
</div>
|
||
</div>
|
||
<div class="my_contain my_contain2" id="power_on">
|
||
<div class="screen_box">
|
||
<h1>开机参数</h1>
|
||
<div class="card_item">
|
||
<p>开机界面</p>
|
||
<div class="data_div">
|
||
<select id="power_on1">
|
||
<option selected value=1>开启</option>
|
||
<option value=0>关闭</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="card_item">
|
||
<p>重置开关</p>
|
||
<div class="data_div">
|
||
<select id="power_on2">
|
||
<option selected value=1>开启</option>
|
||
<option value=0>关闭</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<button name="submit" id="confirm2">确定</button><br>
|
||
<button name="cancel" id="cancel2">返回</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 添加节目弹窗 end -->
|
||
|
||
<!-- <footer>
|
||
<div class="logo">
|
||
<img src="img/logo.png" alt="">
|
||
</div>
|
||
<p>©copyright 2022</p>
|
||
</footer> -->
|
||
|
||
<div id="result_prompt_txt" class="toast">
|
||
<span>结果内容</span>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
json_id = localStorage.getItem("json_id");
|
||
var cmd_reply_parse_fun;
|
||
$(function () {
|
||
var baseHost = document.location.origin
|
||
//mode 提示消息显示模式(0关闭 1显示 3显示特定时间) txt显示内容
|
||
function result_prompt_display(mode, txt) {
|
||
document.getElementById("result_prompt_txt").getElementsByTagName("span")[0].innerHTML = txt;
|
||
if (mode == 0) {
|
||
$("#result_prompt_txt").css("display", "none");
|
||
} else if (mode == 1) {
|
||
$("#result_prompt_txt").css("display", "flex");
|
||
} else {
|
||
$("#result_prompt_txt").css("display", "flex");
|
||
setTimeout(function () {
|
||
$("#result_prompt_txt").css("display", "none");
|
||
}, 500);
|
||
}
|
||
}
|
||
function cmd_reply_parse(json_str) {
|
||
result_prompt_display(0, "");
|
||
let json = jQuery.parseJSON(json_str);
|
||
if ("cmd_ok" in json.led_protocol) {
|
||
switch (json.led_protocol.cmd_ok.type) {
|
||
case 1:
|
||
result_prompt_display(2, "屏幕操作成功");
|
||
break;
|
||
case 2:
|
||
result_prompt_display(2, "亮度设置成功");
|
||
break;
|
||
case 3:
|
||
result_prompt_display(2, "开机参数设置成功");
|
||
break;
|
||
}
|
||
}
|
||
else if ("cmd" in json.led_protocol) {
|
||
switch (json.led_protocol.cmd.type) {
|
||
case 2:
|
||
luminance_init(json);
|
||
break;
|
||
case 3:
|
||
power_on_init(json);
|
||
break;
|
||
case 4:
|
||
version_init(json);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
cmd_reply_parse_fun = cmd_reply_parse;
|
||
function get_cmd_function(_type) {
|
||
var screen_start = {}
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = new Object()
|
||
screen_start.get_cmd = new Object()
|
||
screen_start.get_cmd.type = _type
|
||
var str = JSON.stringify(screen_start);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
|
||
// 设置超时逻辑
|
||
var timeoutId = setTimeout(function () {
|
||
result_prompt_display(2, "数据获取失败");
|
||
}, 10000); // 10秒超时
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "数据获取失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
json_id++;
|
||
localStorage.setItem("json_id", json_id);
|
||
}
|
||
|
||
/*********************************************************亮度滑动条**************************************************/
|
||
/*点击弹出按钮*/
|
||
function popBox() {
|
||
//stop();
|
||
document.getElementById("popup").style.display = "block";
|
||
document.getElementById("Ground").style.display = "block";
|
||
};
|
||
/*点击关闭弹窗*/
|
||
function closeBox() {
|
||
//move();
|
||
document.getElementById("popup").style.display = "none";
|
||
document.getElementById("Ground").style.display = "none";
|
||
}
|
||
|
||
/*点击弹出按钮*/
|
||
function power_on_popBox() {
|
||
//stop();
|
||
document.getElementById("power_on").style.display = "block";
|
||
document.getElementById("Ground").style.display = "block";
|
||
};
|
||
/*点击关闭弹窗*/
|
||
function power_on_closeBox() {
|
||
//move();
|
||
document.getElementById("power_on").style.display = "none";
|
||
document.getElementById("Ground").style.display = "none";
|
||
}
|
||
|
||
function luminance_init(obj) {
|
||
document.getElementById('luminance_select').value = obj.led_protocol.cmd.data1
|
||
}
|
||
|
||
function power_on_init(obj) {
|
||
document.getElementById('power_on1').value = obj.led_protocol.cmd.data1
|
||
document.getElementById('power_on2').value = obj.led_protocol.cmd.data2
|
||
}
|
||
$('#other').on('click', function () {
|
||
power_on_popBox();
|
||
get_cmd_function(3);
|
||
})
|
||
$('#cancel2').on('click', function () {
|
||
power_on_closeBox();
|
||
})
|
||
$('#confirm2').on('click', function () {
|
||
var screen_start = {}
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = new Object()
|
||
screen_start.cmd = new Object()
|
||
screen_start.cmd.type = 3
|
||
screen_start.cmd.data1 = parseInt($('#power_on1').find('option:selected').val());
|
||
screen_start.cmd.data2 = parseInt($('#power_on2').find('option:selected').val());
|
||
screen_start.cmd.data3 = 0;
|
||
var str = JSON.stringify(screen_start);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "开机参数设置失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
json_id++;
|
||
localStorage.setItem("json_id", json_id);
|
||
})
|
||
$('#luminance').on('click', function () {
|
||
popBox();
|
||
get_cmd_function(2);
|
||
})
|
||
$('#cancel').on('click', function () {
|
||
closeBox();
|
||
})
|
||
$('#new_program').on('click', function () {
|
||
var screen_start = {};
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = new Object()
|
||
screen_start.cmd = new Object();
|
||
screen_start.cmd.type = 2;
|
||
screen_start.cmd.data1 = parseInt($('#luminance_select').find('option:selected').val());
|
||
screen_start.cmd.data2 = 0;
|
||
screen_start.cmd.data3 = 0;
|
||
var str = JSON.stringify(screen_start);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "亮度设置失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
json_id++;
|
||
localStorage.setItem("json_id", json_id);
|
||
})
|
||
|
||
function luminance_refresh() {
|
||
var val = $('#luminance_select').find('option:selected').val();
|
||
$('.my_luminance').append("<style>.my_luminance::before{width: " + val + "%;}</style>");
|
||
}
|
||
window.setInterval(luminance_refresh, 100);
|
||
|
||
function version_init(obj) {
|
||
document.getElementById('version').innerHTML = "版本号 V" + obj.led_protocol.cmd.data1 + "." + obj.led_protocol.cmd.data2 +
|
||
"." + obj.led_protocol.cmd.data3
|
||
}
|
||
|
||
// $(function () {
|
||
// get_cmd_function(4);
|
||
// })
|
||
$(function () {
|
||
if (/xazn/.test(navigator.userAgent)||/uni-app/.test(navigator.userAgent)) {
|
||
// 在App中
|
||
document.addEventListener("UniAppJSBridgeReady", function () {
|
||
get_cmd_function(4);
|
||
});
|
||
} else {
|
||
get_cmd_function(4);
|
||
}
|
||
})
|
||
/*********************************************************屏幕操作指令**************************************************/
|
||
/*1.开启屏幕
|
||
*当type=1时，data1的值为1表示关闭屏幕、值为2表示开启屏幕、值为3时清除屏幕
|
||
*/
|
||
$('#start').on('click', function () {
|
||
var screen_start = {};
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = 102;
|
||
screen_start = new Object()
|
||
screen_start.cmd = new Object();
|
||
screen_start.cmd.type = 1;
|
||
screen_start.cmd.data1 = 2;
|
||
screen_start.cmd.data2 = 0;
|
||
screen_start.cmd.data3 = 0;
|
||
var str = JSON.stringify(screen_start);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "开启屏幕失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
json_id++;
|
||
localStorage.setItem("json_id", json_id);
|
||
})
|
||
//关闭屏幕
|
||
$('#close').on('click', function () {
|
||
var screen_close = {};
|
||
// screen_close.jsonid = json_id;
|
||
screen_close = new Object()
|
||
screen_close.cmd = new Object();
|
||
screen_close.cmd.type = 1;
|
||
screen_close.cmd.data1 = 1;
|
||
screen_close.cmd.data2 = 0;
|
||
screen_close.cmd.data3 = 0;
|
||
var str = JSON.stringify(screen_close);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "关闭屏幕失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
json_id++;
|
||
localStorage.setItem("json_id", json_id);
|
||
return false
|
||
})
|
||
|
||
//清除屏幕
|
||
$('#clear').on('click', function () {
|
||
var flag = confirm("更改屏参后会清空节目")
|
||
if (flag == 1) {
|
||
var screen_clear = {};
|
||
// screen_clear.jsonid = json_id;
|
||
screen_clear = new Object()
|
||
screen_clear.cmd = new Object();
|
||
screen_clear.cmd.type = 1;
|
||
screen_clear.cmd.data1 = 3;
|
||
screen_clear.cmd.data2 = 0;
|
||
screen_clear.cmd.data3 = 0;
|
||
var str = JSON.stringify(screen_clear);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
console.log(str);
|
||
result_prompt_display(1, "发送中...");
|
||
if (MQTT_MODE == 0) {
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.open('POST', baseHost + '/communication', true);
|
||
xhr.setRequestHeader('content-type', 'application/json');
|
||
xhr.send(send_string);
|
||
xhr.onreadystatechange = function () {
|
||
if (xhr.readyState == 4) {
|
||
if (xhr.status == 200) {
|
||
cmd_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "清除屏幕失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
}
|
||
return false
|
||
})
|
||
})
|
||
function navigateToVueHome() {
|
||
window.location.href='../';
|
||
}
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |