GateWay/public/web/screen_main.html

502 lines
21 KiB
HTML
Raw Normal View History

2024-11-13 11:26:59 +08:00
<!--
* @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>&copy;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>