305 lines
13 KiB
HTML
305 lines
13 KiB
HTML
<!--
|
||
* @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"><返回</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);
|
||
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) {
|
||
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);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + str + "}";
|
||
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) {
|
||
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);
|
||
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) {
|
||
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>
|