GateWay/public/web/screen_par.html

305 lines
13 KiB
HTML
Raw Permalink Normal View History

2024-11-13 11:26:59 +08:00
<!--
* @Descripttion:
* @version:
* @Author: Eugene
* @Date: 2022-05-23 09:31:25
* @LastEditors: Andy
* @LastEditTime: 2024-03-23 18:41:30
-->
<!DOCTYPE html>
<html lang="en">
<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">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=0.01, maximum-scale=1, user-scalable=yes" />
<title>屏幕参数</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/common.css">
<link rel="prefetch" href="content_pattern1.html">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/MQTT_port.js"></script>
<script src="js/jsonid.js"></script>
</head>
<body>
<div class="contain">
<header>
<span><a href="screen_main.html">&lt;返回</a></span>
</header>
<div class="box">
<!-- <form action="content.html" method="post"> -->
<ul>
<li>
<label>屏幕模板:</label>
<select id="template">
<option selected="selected" value="0">自定义</option>
<option value="1">伸缩屏</option>
<option value="2">大屏</option>
<option value="3">小屏</option>
</select>
</li>
<li>
<label>OE极性</label>
<select id="oe_polarity">
<option value="0">0</option>
<option selected="selected" value="1">1</option>
</select>
</li>
<li>
<label>DATA极性</label>
<select id="data_polarity">
<option value="0">0</option>
<option selected="selected" value="1">1</option>
</select>
</li>
<li>
<label>屏宽:</label>
<input type="number" name="screenwidth" placeholder="请输入数值" id="sw">
</li>
<li>
<label>屏高:</label>
<input type="number" name="screenheight" placeholder="请输入数值" id="sh">
</li>
<!-- <li>
<label>色彩:</label>
<input type="radio" name="screencolor" id="mono" checked="checked" value="mono"><label
for="mono">单色</label>
<input type="radio" name="screencolor" id="two-color" value="two-color"><label
for="two-color">双色</label>
</li> -->
<li>
<label>屏幕旋转:</label>
<select name="screenrotate" id="srt">
<option selected="selected" value="0">0度</option>
<option value="90">90度</option>
<option value="180">180度</option>
<option value="270">270度</option>
</select>
</li>
</ul>
<button name="submit" id="read">读取</button><br>
<input type="submit" id="set" value="设置"></button>
<!-- </form> -->
</div>
</div>
<footer>
<ul>
<li><a href="screen_main.html">首页</a></li>
<li><a class="active" href="screen_par.html">屏参</a></li>
<li><a href="screen_program.html">节目管理</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<div style="height:80px" hidden="hidden"></div>
</footer>
</div>
<div id="result_prompt_txt" class="toast">
<span>结果内容</span>
</div>
<script>
json_id = localStorage.getItem("json_id");
var screen_par_reply_parse_fun;
/*********************************************************屏幕参数页面数据提交->读取数据**************************************************/
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 item_init(obj) {
document.getElementById('sw').value = obj.screen_p.w
document.getElementById('sh').value = obj.screen_p.h
document.getElementById('oe_polarity').value = obj.screen_p.oe
document.getElementById('data_polarity').value = obj.screen_p.data
// if (obj.screen_p.oe == 0 && obj.screen_p.data == 1) {
// document.getElementById('two-color').checked = "checked"
// } else {
// document.getElementById('mono').checked = "checked"
// }
document.getElementById('srt').value = obj.screen_p.screen_angle
}
function screen_par_reply_parse(json_str) {
let json = jQuery.parseJSON(json_str);
if ("screen_p" in json.led_protocol) {
item_init(json.led_protocol);
result_prompt_display(2, "获取屏幕参数成功");
}
else if ("screen_ok" in json.led_protocol) {
del_all_icon();
result_prompt_display(2, "设置屏幕参数成功");
}
}
screen_par_reply_parse_fun = screen_par_reply_parse;
function get_screen_parameter() {
var screen_start = {};
// screen_start.jsonid = json_id;
screen_start = new Object()
screen_start.get_screen = 1;
var str = JSON.stringify(screen_start);
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
2024-11-13 11:26:59 +08:00
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');
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
screen_par_reply_parse(xhr.responseText);
} else {
result_prompt_display(2, "获取屏幕参数失败");
}
}
}
}
else {
MQTT_send(str);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
$(function () {
if (/xazn/.test(navigator.userAgent)||/uni-app/.test(navigator.userAgent)) {
// 在App中
document.addEventListener("UniAppJSBridgeReady", function () {
get_screen_parameter();
$('#read').on('click', function () {
get_screen_parameter();
})
});
} else {
get_screen_parameter();
$('#read').on('click', function () {
get_screen_parameter();
})
}
})
// $(function () {
// get_screen_parameter();
// $('#read').on('click', function () {
// get_screen_parameter();
// })
// })
$("#template").on("change", function () {
if (document.getElementById("template").value == "1") {
document.getElementById('sw').value = 64;
document.getElementById('sh').value = 32;
// document.getElementById('mono').checked = "checked";
document.getElementById('srt').value = 270;
}
else if (document.getElementById("template").value == "2") {
document.getElementById('sw').value = 64;
document.getElementById('sh').value = 32;
// document.getElementById('mono').checked = "checked";
document.getElementById('srt').value = 180;
}
else if (document.getElementById("template").value == "3") {
document.getElementById('sw').value = 64;
document.getElementById('sh').value = 16;
// document.getElementById('mono').checked = "checked";
document.getElementById('srt').value = 0;
}
})
/*********************************************************屏幕参数页面数据提交->设置数据**************************************************/
function del_all_icon() {
let manage = {};
// manage.jsonid = json_id;
manage = new Object()
manage.pro_manage = new Object();
manage.pro_manage.type = 2;
manage.pro_manage.data = -1;
var str = JSON.stringify(manage);
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
2024-11-13 11:26:59 +08:00
if (MQTT_MODE == 0) {
var xhr = new XMLHttpRequest();
xhr.open('post', baseHost + '/communication', true);
xhr.setRequestHeader('content-type', 'application/json');
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("删除全部节目");
}
}
}
}
else {
MQTT_send(str);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
$('#set').on('click', function () {
// var flag = confirm("更改屏参后会清空节目");
if (1) {
var screen_width = parseInt($('#sw').val())
var screen_height = parseInt($('#sh').val())
var oecolor = $("input[type='radio']:checked").val()
var screen_angle = parseInt($('#srt').val())
var screen = {}
// screen.jsonid = json_id;
screen = new Object()
screen.screen_p = new Object()
//获取屏幕宽度、高度
screen.screen_p.w = screen_width
screen.screen_p.h = screen_height
/*mono单色 two-color双色
*如果oecolor==momo 输出oe极性为1 另一个值则为0
*/
// if (oecolor === "mono") {
// screen.screen_p.oe = 1
// screen.screen_p.data = 0
// } else {
// screen.screen_p.oe = 0
// screen.screen_p.data = 1
// }
screen.screen_p.oe = parseInt($('#oe_polarity').val())
screen.screen_p.data = parseInt($('#data_polarity').val())
screen.screen_p.screen_angle = screen_angle;
let str = JSON.stringify(screen);
2025-03-26 17:10:39 +08:00
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
2024-11-13 11:26:59 +08:00
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');
2025-03-26 17:10:39 +08:00
xhr.send(send_string);
2024-11-13 11:26:59 +08:00
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
screen_par_reply_parse(xhr.responseText);
} else {
result_prompt_display(2, "设置失败");
}
}
}
}
else {
MQTT_send(str);
}
json_id++;
localStorage.setItem("json_id", json_id);
}
})
</script>
</body>
</html>