502 lines
21 KiB
HTML
502 lines
21 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);
|
|||
|
// 设置超时逻辑
|
|||
|
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(str);
|
|||
|
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);
|
|||
|
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(str);
|
|||
|
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);
|
|||
|
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(str);
|
|||
|
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);
|
|||
|
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(str);
|
|||
|
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);
|
|||
|
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(str);
|
|||
|
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);
|
|||
|
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(str);
|
|||
|
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>
|