1966 lines
111 KiB
HTML
1966 lines
111 KiB
HTML
<!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>模式1—节目内容编辑页面</title>
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/content.css">
|
||
<link rel="stylesheet" href="css/common.css">
|
||
<script src="js/MQTT_port.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="pro_mode_shade" id="Ground"></div>
|
||
<div class="pro_mode_window" id="popup">
|
||
<h2>请选择分区模式</h2>
|
||
<div class="pro_mode_btn" id="pro_mode_btn1" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode1_area">0</div>
|
||
<p>模式1</p>
|
||
</div>
|
||
<div class="pro_mode_btn" id="pro_mode_btn2" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode2_area">0</div>
|
||
<div class="pro_mode2_area">1</div>
|
||
<p>模式2(上下)</p>
|
||
</div>
|
||
<div class="pro_mode_btn" id="pro_mode_btn3" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode3_area">1</div>
|
||
<div class="pro_mode3_area">0</div>
|
||
<p>模式3(左右)</p>
|
||
</div>
|
||
<div class="pro_mode_btn" id="pro_mode_btn4" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode4_area">0</div>
|
||
<div class="pro_mode4_area">1</div>
|
||
<div class="pro_mode4_area">2</div>
|
||
<p>模式4(上中下)</p>
|
||
</div>
|
||
<div class="pro_mode_btn" id="pro_mode_btn5" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode5_area">0</div>
|
||
<div class="pro_mode5_area">1</div>
|
||
<div class="pro_mode5_area">2</div>
|
||
<div class="pro_mode5_area">3</div>
|
||
<p>模式5</p>
|
||
</div>
|
||
<div class="pro_mode_btn" id="pro_mode_btn6" onclick="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<div class="pro_mode6_area">1</div>
|
||
<div class="pro_mode6_area">0</div>
|
||
<div class="pro_mode6_area">3</div>
|
||
<div class="pro_mode6_area">2</div>
|
||
<p>模式6</p>
|
||
</div>
|
||
<button class="pro_mode_btn" id="pro_mode_cancel">取消</button>
|
||
</div>
|
||
<div class="contain">
|
||
<div class="canvas_item roof_dis">
|
||
<h1 id="preview" class="my_h1_style">画面预览</h1>
|
||
<canvas id="draft" style="display:none"></canvas>
|
||
<canvas id="tutorial" style="display:none"></canvas>
|
||
<div class="canvas_bg">
|
||
<canvas id="lattice"></canvas>
|
||
</div>
|
||
</div>
|
||
<div class="midart midart_2">
|
||
<div class="play_item_css">
|
||
<div class="select_pattern">
|
||
<h2 class="my_h1_style">节目参数</h2>
|
||
<strong id="mode_dis" class="my_h1_style">模式1 </strong>
|
||
<button id="submit">选择模式</button><br>
|
||
<label>节目时长</label><input id="time_s" type="number" value="10"><span>秒</span><br />
|
||
</div>
|
||
</div>
|
||
<div id="set_box">
|
||
<div id="play_item0" name="play_item" class="play_item_css">
|
||
<h1 class="my_h1_style">分区0</h1>
|
||
<fieldset class="my_fieldset">
|
||
<legend>项目选择</legend>
|
||
<label for="img_type">播放类型</label>
|
||
<div class="select">
|
||
<select name="play_item_type" id="play_item_type0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option selected value="0">文字</option>
|
||
<option value="1">图片</option>
|
||
</select>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="my_fieldset" name="img_par" id="img_par0">
|
||
<legend>图片参数</legend>
|
||
<label for="img_type">图片类型</label>
|
||
<div class="select">
|
||
<select name="img_type" id="img_type0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option selected value="0">注意安全</option>
|
||
<option value="1">禁止驶入</option>
|
||
<option value="2">上箭头</option>
|
||
<option value="3">左箭头</option>
|
||
<option value="4">右箭头</option>
|
||
<option value="5">左下箭头</option>
|
||
<option value="6">右下箭头</option>
|
||
<option value="7">向左</option>
|
||
<option value="8">向右</option>
|
||
<option value="22">限速15</option>
|
||
<option value="23">限速20</option>
|
||
<option value="9">限速30</option>
|
||
<option value="10">限速40</option>
|
||
<option value="11">限速50</option>
|
||
<option value="12">限速60</option>
|
||
<option value="13">限速70</option>
|
||
<option value="14">限速80</option>
|
||
<option value="15">限速90</option>
|
||
<option value="16">限速100</option>
|
||
<option value="17">限速110</option>
|
||
<option value="18">限速120</option>
|
||
<option value="24">解除限速20</option>
|
||
<option value="25">解除限速40</option>
|
||
<option value="26">解除限速60</option>
|
||
<option value="20">箭头向上</option>
|
||
<option value="21">箭头向下</option>
|
||
<option value="27">掉头</option>
|
||
<option value="28">检查</option>
|
||
<option value="29">减速让行</option>
|
||
<option value="30">禁止停车(停)</option>
|
||
<option value="31">禁止掉头</option>
|
||
<option value="32">禁止临时停车</option>
|
||
<option value="33">禁止鸣笛</option>
|
||
<option value="34">禁止停车(P)</option>
|
||
<option value="35">禁止右转</option>
|
||
<option value="36">禁止左转</option>
|
||
<option value="37">靠右行驶</option>
|
||
<option value="38">靠左行驶</option>
|
||
<option value="39">两侧道路变窄</option>
|
||
<option value="40">减速慢行</option>
|
||
<option value="41">前方事故</option>
|
||
<option value="42">前方施工</option>
|
||
<option value="43">停车</option>
|
||
<option value="44">向右转弯</option>
|
||
<option value="45">向左向右转弯</option>
|
||
<option value="46">向左转弯</option>
|
||
<option value="47">右侧道路变窄</option>
|
||
<option value="48">左侧道路变窄</option>
|
||
<option value="49">左右两侧绕行</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
<label for="img_size">图片尺寸</label>
|
||
<div class="select">
|
||
<select name="img_size" id="img_size0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option value="16">16x16</option>
|
||
<option selected value="32">32x32</option>
|
||
<option value="48">48x48</option>
|
||
<option value="64">64x64</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
<label for="icolor">图片颜色</label>
|
||
<div class="select">
|
||
<select name="icolor" id="icolor0" class="img_type_css" onchange="screen_preview_init()">
|
||
<option selected value="1">红色</option>
|
||
<option value="2">绿色</option>
|
||
<option value="3">黄色</option>
|
||
</select>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="my_fieldset" name="text_par" id="text_par0">
|
||
<legend>文字参数</legend>
|
||
<div name="textpara">
|
||
<label for="common_sentence">常用语句</label>
|
||
<div class="select">
|
||
<select name="common_sentence" class="img_type_css"
|
||
onchange="setTimeout(function () {screen_preview_init()}, 10);">
|
||
<option selected value="0">自定义</option>
|
||
<option value="1">公安交警正在巡逻</option>
|
||
<option value="2">公安交警停车检查</option>
|
||
<option value="3">前方事故减速慢行</option>
|
||
<option value="4">警察临检请您配合</option>
|
||
<option value="5">交警临检请您配合</option>
|
||
<option value="6">《《《《《</option>
|
||
<option value="7">》》》》》</option>
|
||
<option value="8">禁止停车</option>
|
||
<option value="9">交通管制禁止通行</option>
|
||
<option value="10">公安检查靠边停车</option>
|
||
<option value="11">前方事故道路封闭</option>
|
||
<option value="12">禁止掉头</option>
|
||
<option value="13">雨雪天气注意安全</option>
|
||
<option value="14">大雾天气减速慢行</option>
|
||
<option value="15">靠右停车接受检查</option>
|
||
<option value="16">警察临检靠边停车</option>
|
||
</select>
|
||
</div>
|
||
<form class="bd">
|
||
<textarea id="screen_info0" name="screen_info" maxlength="20" placeholder="请输入展示信息"
|
||
cols="20" rows="5" onkeyup="screen_preview_init()"></textarea>
|
||
</form>
|
||
</div>
|
||
<div class="select">
|
||
<select name="font" id="font0" class="font" onchange="screen_preview_init()">
|
||
<option selected value="1">宋体(中)</option>
|
||
<option value="3">黑体(中)</option>
|
||
<option value="2">仿宋(中)</option>
|
||
<option value="4">楷体(中)</option>
|
||
</select>
|
||
</div>
|
||
<div class="select">
|
||
<select name="font_e" id="font_e0" class="font">
|
||
<option selected value="5">圆角(英)</option>
|
||
<option value="6">打字(英)</option>
|
||
<option value="7">长黑(英)</option>
|
||
<option value="8">白斜(英)</option>
|
||
<option value="9">线形(英)</option>
|
||
<option value="10">方斜(英)</option>
|
||
<option value="11">歌德(英)</option>
|
||
<option value="12">黑正(英)</option>
|
||
<option value="13">美术(英)</option>
|
||
<option value="14">手写(英)</option>
|
||
<option value="15">正圆(英)</option>
|
||
<option value="16">时钟(英)</option>
|
||
</select>
|
||
</div>
|
||
<div class="select">
|
||
<select name="fontsize" id="fontsize0" class="fontsize" onchange="screen_preview_init()">
|
||
<option selected value="16">16px</option>
|
||
<option value="24">24px</option>
|
||
<option value="32">32px</option>
|
||
<option value="48">48px</option>
|
||
<option value="64">64px</option>
|
||
</select>
|
||
</div>
|
||
<div class="select">
|
||
<select name="fcolor" id="fcolor0" onchange="screen_preview_init()">
|
||
<option selected value="1">红色</option>
|
||
<option value="2">绿色</option>
|
||
<option value="3">黄色</option>
|
||
</select>
|
||
</div>
|
||
<div class="select">
|
||
<select name="txt_style" id="txt_style0" onchange="screen_preview_init()">
|
||
<option value="1">加粗</option>
|
||
<option selected value="0">不加粗</option>
|
||
</select>
|
||
</div>
|
||
<div class="select">
|
||
<select name="stretch_act" id="stretch_act0" onchange="screen_preview_init()">
|
||
<option value="0">不拉伸</option>
|
||
<option value="1">横向拉伸</option>
|
||
<option value="2">纵向拉伸</option>
|
||
</select>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="my_fieldset">
|
||
<legend>显示参数</legend>
|
||
<div class="animation_style">
|
||
<table>
|
||
<tr>
|
||
<td><label>动画特效</label></td>
|
||
<td>
|
||
<select name="tx" id="tx0" class="tx" onchange="screen_preview_init()">
|
||
<option selected value="1">立即显示</option>
|
||
<option value="2">左移</option>
|
||
<option value="3">右移</option>
|
||
<option value="4">上移</option>
|
||
<option value="5">下移</option>
|
||
<option value="6">连续左移</option>
|
||
<option value="7">闪烁换页</option>
|
||
<option value="8" name="radar_animation" id="radar_animation0">数据监测</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><label>速度</label></td>
|
||
<td>
|
||
<select name="speed" id="speed0" class="speed" onchange="screen_preview_init()">
|
||
<option value="5">1X</option>
|
||
<option value="4">2X</option>
|
||
<option value="3">3X</option>
|
||
<option value="2">4X</option>
|
||
<option selected value="1">5X</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><label>停留时间</label></td>
|
||
<td><select name="stay" id="stay0" class="stay" onchange="screen_preview_init()">
|
||
<option value="0">不停顿</option>
|
||
<option value="100">100毫秒</option>
|
||
<option value="500">500毫秒</option>
|
||
<option value="1000">1秒</option>
|
||
<option value="2000">2秒</option>
|
||
<option selected value="3000">3秒</option>
|
||
<option value="4000">4秒</option>
|
||
<option value="5000">5秒</option>
|
||
<option value="6000">6秒</option>
|
||
<option value="8000">8秒</option>
|
||
<option value="10000">10秒</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><label>水平对齐</label></td>
|
||
<td><select name="h-align" id="h-align0" class="h-align"
|
||
onchange="screen_preview_init()">
|
||
<option value="1">居左对齐</option>
|
||
<option value="2">水平居中</option>
|
||
<option value="3">居右对齐</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td><label>垂直对齐</label></td>
|
||
<td><select name="v-align" id="v-align0" class="v-align"
|
||
onchange="screen_preview_init()">
|
||
<option value="1">顶部对齐</option>
|
||
<option value="2">垂直居中</option>
|
||
<option value="3">底部对齐</option>
|
||
</select>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="my_fieldset" name="radar_par" id="radar_par0">
|
||
<legend>数据监测设置</legend>
|
||
<label>数据来源</label>
|
||
<div class="select">
|
||
<select name="data_source" id="data_source0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option selected value="1">雷达速度</option>
|
||
<option value="2">温度</option>
|
||
<option value="3">湿度</option>
|
||
<option value="4">车牌识别</option>
|
||
</select>
|
||
</div><br>
|
||
<label>数据特效</label>
|
||
<div class="select">
|
||
<select name="data_tx" id="data_tx0" class="img_type_css" onchange="screen_preview_init()">
|
||
<option selected value="1">立即显示</option>
|
||
<option value="2">左移</option>
|
||
<option value="3">右移</option>
|
||
<option value="4">上移</option>
|
||
<option value="5">下移</option>
|
||
<option value="6">连续左移</option>
|
||
<option value="7">闪烁换页</option>
|
||
</select>
|
||
</div><br>
|
||
<label>报警阈值</label>
|
||
<div class="select">
|
||
<input name="speed_threshold" id="speed_threshold0" value="0" type="number">
|
||
</div><br>
|
||
<label>报警颜色</label>
|
||
<div class="select">
|
||
<select name="greater_color" id="greater_color0" class="img_type_css">
|
||
<option selected value="1">红色</option>
|
||
<option value="2">绿色</option>
|
||
<option value="3">黄色</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
<label>正常颜色</label>
|
||
<div class="select">
|
||
<select name="less_color" id="less_color0" class="img_type_css">
|
||
<option value="1">红色</option>
|
||
<option selected value="2">绿色</option>
|
||
<option value="3">黄色</option>
|
||
</select>
|
||
</div><br>
|
||
<div name="data_display">
|
||
|
||
<label>整数位数</label>
|
||
<div class="select">
|
||
<select name="significant_digit" id="significant_digit0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option value="1">1位</option>
|
||
<option value="2">2位</option>
|
||
<option selected value="3">3位</option>
|
||
<option value="4">4位</option>
|
||
<option value="5">5位</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
<label>小数位数</label>
|
||
<div class="select">
|
||
<select name="decimal_digit" id="decimal_digit0" class="img_type_css"
|
||
onchange="screen_preview_init()">
|
||
<option selected value="0">0位</option>
|
||
<option value="1">1位</option>
|
||
<option value="2">2位</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
<label>节能息屏</label>
|
||
<div class="select">
|
||
<select name="close_display" id="close_display0" class="img_type_css">
|
||
<option selected value="0">从不</option>
|
||
<option value="3">3秒后</option>
|
||
</select>
|
||
</div>
|
||
<br>
|
||
</div>
|
||
|
||
</fieldset>
|
||
<fieldset class="my_fieldset_div">
|
||
<legend>高级参数</legend>
|
||
<div class="my_fieldset_div2">
|
||
<div>
|
||
<label name="label_x">X：</label><input name="area_X" id="area_X0" type="number" value=0
|
||
onkeyup="screen_preview_init()">
|
||
<label>PX</label>
|
||
</div>
|
||
<div>
|
||
<label name="label_w">宽：</label><input name="area_W" id="area_W0" type="number" value=0
|
||
onkeyup="screen_preview_init()">
|
||
<label>PX</label>
|
||
</div>
|
||
<div>
|
||
<label name="label_y">Y：</label><input name="area_Y" id="area_Y0" type="number" value=0
|
||
onkeyup="screen_preview_init()">
|
||
<label>PX</label>
|
||
</div>
|
||
<div>
|
||
<label name="label_h">高：</label><input name="area_H" id="area_H0" type="number" value=0
|
||
onkeyup="screen_preview_init()">
|
||
<label>PX</label>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="content_btn">
|
||
<button id="content_read">读取</button>
|
||
<button id="btn_set">设置</button>
|
||
</div>
|
||
</div>
|
||
<footer>
|
||
<ul>
|
||
<li><a href="screen_main.html">首页</a></li>
|
||
<li><a href="screen_par.html">屏参</a></li>
|
||
<li><a class="active" href="screen_program.html">节目管理</a></li>
|
||
<li><a href="#">联系我们</a></li>
|
||
</ul>
|
||
<div style="height:80px" hidden="hidden"></div>
|
||
</footer>
|
||
</div>
|
||
<div class="toast">
|
||
<span>数据不能为空</span>
|
||
</div>
|
||
<div id='a' class="toast">
|
||
<span>设置中...</span>
|
||
</div>
|
||
<div id='b' class="toast">
|
||
<span>设置节目成功</span>
|
||
</div>
|
||
<div id='c' class="toast">
|
||
<span>设置节目失败</span>
|
||
</div>
|
||
<div id="result_prompt_txt" class="toast">
|
||
<span>结果内容</span>
|
||
</div>
|
||
<script src="js/jquery-3.4.1.min.js"></script>
|
||
<script type="text/javascript">
|
||
var content_pattern_reply_parse_fun;
|
||
|
||
var mode_buf = [1, 1, 2, 2, 3, 4, 4];
|
||
var len = 1; //卡片个数
|
||
var searchParams = new URLSearchParams(location.search);
|
||
var pro_num = searchParams.get("pro_num"); //节目编号
|
||
console.log("节目编号=" + pro_num)
|
||
var pro_note = searchParams.get("note"); //节目备注
|
||
console.log("节目备注=" + pro_note)
|
||
var baseHost = document.location.origin
|
||
var speed_threshold = 0; //速度阈值
|
||
var temp_threshold = 0; //温度阈值
|
||
var humi_threshold = 0; //湿度阈值
|
||
var pro_mode = 1;
|
||
var screen_w = 32; //屏幕宽度
|
||
var screen_h = 64; //屏幕高度
|
||
var angle = 0; //屏幕角度
|
||
var area_percentage_buf = [
|
||
// x, y, w, h
|
||
[
|
||
[0, 0, 1, 1]
|
||
], //模式0(无效)
|
||
[
|
||
[0, 0, 1, 1]
|
||
], //模式1(一个分区)
|
||
[
|
||
[0, 0, 1, 0.5],
|
||
[0, 0.5, 1, 0.5]
|
||
], //模式2(两个分区)
|
||
[
|
||
[0, 0, 0.5, 1],
|
||
[0.5, 0, 0.5, 1]
|
||
], //模式3(两个分区)
|
||
[
|
||
[0, 0, 1, 0.33],
|
||
[0, 0.33, 1, 0.33],
|
||
[0, 0.66, 1, 0.33]
|
||
], //模式4(三个分区)
|
||
[
|
||
[0, 0, 1, 0.25],
|
||
[0, 0.25, 1, 0.25],
|
||
[0, 0.5, 1, 0.25],
|
||
[0, 0.75, 1, 0.25]
|
||
], //模式5(四个分区)
|
||
[
|
||
[0, 0, 0.5, 0.5],
|
||
[0.5, 0, 0.5, 0.5],
|
||
[0, 0.5, 0.5, 0.5],
|
||
[0.5, 0.5, 0.5, 0.5]
|
||
], //模式6(四个分区)
|
||
]; //节目分区百分比数组(下标1:模式;下标2:分区号;下标3:参数)
|
||
/**************************************************** 画布预览 **************************************************/
|
||
function coord_object(x, y, w, h) {//坐标结构体
|
||
this.x = x;
|
||
this.y = y;
|
||
this.w = w;
|
||
this.h = h;
|
||
}
|
||
var area_dis_buf = new Array;
|
||
let catalogue_buf = new Array;//文字目录
|
||
class area_dis_class {
|
||
dis_img; //通过画布后getImageData
|
||
area_coord; //分区坐标
|
||
img_coord; //图片坐标
|
||
animation; //动画
|
||
speed; //速度
|
||
stand_time; //停留时间
|
||
run_cnt;
|
||
stand_flag; //停顿标志位
|
||
blink_flag;//闪烁标志位
|
||
#run_timer = null;
|
||
#blink_timer = null;
|
||
constructor(dis_img, area_coord, img_coord, animation, speed, stand_time, run_cnt, stand_flag, blink_flag) {
|
||
this.dis_img = dis_img;
|
||
this.area_coord = area_coord;
|
||
this.animation = animation;
|
||
this.speed = speed;
|
||
this.stand_time = stand_time;
|
||
this.img_coord = img_coord;
|
||
this.run_cnt = run_cnt;
|
||
this.stand_flag = stand_flag;
|
||
this.blink_flag = blink_flag;
|
||
}
|
||
start_timer(call_back, time_ms, canvas_p) {
|
||
if (this.#run_timer == null) {
|
||
this.#run_timer = setInterval(call_back, time_ms, canvas_p, this);
|
||
}
|
||
}
|
||
clear_timer() {
|
||
clearInterval(this.#run_timer);
|
||
this.#run_timer = null;
|
||
}
|
||
blink_set() {
|
||
if (this.#blink_timer == null) {
|
||
this.#blink_timer = setTimeout(function (_class) {
|
||
_class.blink_flag = !_class.blink_flag;
|
||
_class.#blink_timer = null;
|
||
}, (this.speed + 1) * 50, this);
|
||
}
|
||
}
|
||
}
|
||
//目录项目对象
|
||
function LIST_ITEM_OBJ(string, page_num, pixel_w, x_offset_pix, y_offset_pix) {//坐标结构体
|
||
this.string = string;//单行字符串
|
||
this.page_num = page_num;//页编号
|
||
this.pixel_w = pixel_w;//像素宽度
|
||
this.x_offset_pix = x_offset_pix;// x轴偏移像素(存在负数)
|
||
this.y_offset_pix = y_offset_pix;// y轴偏移像素(存在负数)
|
||
}
|
||
//图片播放项素材绘制
|
||
async function my_picture_plots(bmp_num, colour, t_coord) {
|
||
let dis_data;
|
||
let s_coord = new coord_object((bmp_num % 4 * 64), (Math.floor(bmp_num / 4) * 64), 64, 64);//源图片切片坐标
|
||
let img = new Image(); // 创建img元素
|
||
img.crossOrigin = "Annoymous";
|
||
img.src = "img/traffic_sign.bmp";// + `?timestamp= ${Date.now()}`;
|
||
await new Promise((resolve, reject) => {
|
||
img.onload = function () {
|
||
//创建一个用于缩放的画布
|
||
let temp = document.createElement('canvas');
|
||
let temp_ctx = temp.getContext("2d", { willReadFrequently: true });
|
||
temp.width = t_coord.w;
|
||
temp.height = t_coord.h;
|
||
temp_ctx.drawImage(img, s_coord.x, s_coord.y, s_coord.w, s_coord.h, 0, 0, t_coord.w, t_coord.h);
|
||
dis_data = temp_ctx.getImageData(0, 0, t_coord.w, t_coord.h);
|
||
for (let p = 0; p < dis_data.data.length; p += 4) {
|
||
if (dis_data.data[p] === 0) {
|
||
dis_data.data[p] = (colour & 0x01) ? 255 : 0;
|
||
dis_data.data[p + 1] = (colour & 0x02) ? 255 : 0;
|
||
dis_data.data[p + 2] = 0;
|
||
}
|
||
else {
|
||
dis_data.data[p] = 0;
|
||
dis_data.data[p + 1] = 0;
|
||
dis_data.data[p + 2] = 0;
|
||
}
|
||
}
|
||
resolve(dis_data);
|
||
}
|
||
})
|
||
return dis_data;
|
||
}
|
||
//文字目录整理
|
||
function catalogue_neaten(catalogue_buf, text, fontsize, fcolor, txt_style, stretch_act, tx, h_align, v_align, a_coord) {
|
||
catalogue_buf.splice(0, catalogue_buf.length);
|
||
let ch_size_x = (stretch_act == 1) ? fontsize * 2 : fontsize;//伸缩后中文宽度
|
||
let ch_size_y = (stretch_act == 2) ? fontsize * 2 : fontsize;//伸缩后中文高度
|
||
let en_size_x = (ch_size_x) / 2;//伸缩后英文宽度
|
||
|
||
let now_x_pixel = 0, now_y_pixel = 0;//现在使用的像素长度
|
||
let max_x_pixel = a_coord.w, max_y_pixel = a_coord.h; //总像素长度
|
||
let now_page_num = 0;//现在的页数
|
||
let flag = 0;//换行标志位
|
||
|
||
let first_y_pixel = ch_size_y; //第一面y轴像素(起码有一行)
|
||
let end_y_pixel = ch_size_y; //最后一面y轴像素(起码有一行)
|
||
let text_len = text.length;//文本个数
|
||
let head_sub = 0, end_sub = 0;
|
||
|
||
//解决特殊情况(特效为连续左移)
|
||
if ((tx == 6)) {
|
||
let list_item = new LIST_ITEM_OBJ;
|
||
list_item.pixel_w = 0;
|
||
while (1) {
|
||
if (end_sub === text_len) { //字符串结束
|
||
break;
|
||
}
|
||
else if (text.charCodeAt(end_sub) < 255) { //英文
|
||
list_item.pixel_w += en_size_x;
|
||
end_sub++;
|
||
}
|
||
else { //中文
|
||
list_item.pixel_w += ch_size_x;
|
||
end_sub++;
|
||
}
|
||
}
|
||
list_item.string = text.slice(head_sub, end_sub);
|
||
list_item.page_num = 0; //连续左移只有一页
|
||
list_item.x_offset_pix = 0; //水平位置无效
|
||
//根据垂直对齐方式决定y轴偏移
|
||
if (v_align == 1) {
|
||
list_item.y_offset_pix = 0;
|
||
}
|
||
else if (v_align == 2) {
|
||
list_item.y_offset_pix = (max_y_pixel - ch_size_y) / 2;
|
||
}
|
||
else {
|
||
list_item.y_offset_pix = (max_y_pixel - ch_size_y);
|
||
}
|
||
catalogue_buf.push(list_item);
|
||
return;
|
||
}
|
||
|
||
while (1) {
|
||
let list_item = new LIST_ITEM_OBJ;
|
||
list_item.page_num = now_page_num;
|
||
if (end_sub === text_len) {
|
||
flag = 2;
|
||
}
|
||
else if (text.charCodeAt(end_sub) < 255) {//英文
|
||
if ((now_x_pixel + en_size_x <= max_x_pixel) || (now_x_pixel == 0)) {
|
||
now_x_pixel += en_size_x;
|
||
end_sub++;
|
||
}
|
||
else {
|
||
flag = 1;
|
||
}
|
||
}
|
||
else {//中文
|
||
if ((now_x_pixel + ch_size_x <= max_x_pixel) || (now_x_pixel == 0)) {
|
||
now_x_pixel += ch_size_x;
|
||
end_sub++;
|
||
}
|
||
else {
|
||
flag = 1;
|
||
}
|
||
}
|
||
if (flag) {
|
||
list_item.string = text.slice(head_sub, end_sub);
|
||
list_item.pixel_w = now_x_pixel;
|
||
if ((now_y_pixel + (ch_size_y)) > max_y_pixel) { //这一页已经写不下，换页
|
||
now_page_num++;
|
||
list_item.page_num = (max_y_pixel < ch_size_y) ? now_page_num - 1 : now_page_num;
|
||
now_y_pixel = ch_size_y;
|
||
}
|
||
else {
|
||
now_y_pixel += ch_size_y;
|
||
if (now_y_pixel > first_y_pixel) {
|
||
first_y_pixel = now_y_pixel;
|
||
}
|
||
}
|
||
if (h_align == 1) {
|
||
list_item.x_offset_pix = 0;
|
||
}
|
||
else if (h_align == 2) {
|
||
list_item.x_offset_pix = (a_coord.w - list_item.pixel_w) / 2;
|
||
}
|
||
else {
|
||
list_item.x_offset_pix = (a_coord.w - list_item.pixel_w);
|
||
}
|
||
catalogue_buf.push(list_item);
|
||
if (flag == 2) {
|
||
break;
|
||
}
|
||
flag = 0;
|
||
now_x_pixel = 0;
|
||
head_sub = end_sub;
|
||
}
|
||
}
|
||
//遍历字符串结束，填写Y轴偏移参数
|
||
let start_y = 0;
|
||
end_y_pixel = now_y_pixel;
|
||
for (let i = 0; i <= now_page_num; i++) {
|
||
//根据垂直对齐方式决定y轴偏移
|
||
if (v_align == 1) {
|
||
start_y = 0;
|
||
}
|
||
else if (v_align == 2) {
|
||
start_y = ((max_y_pixel) - (i == now_page_num ? end_y_pixel : first_y_pixel)) / 2;
|
||
}
|
||
else {
|
||
start_y = ((max_y_pixel) - (i == now_page_num ? end_y_pixel : first_y_pixel));
|
||
}
|
||
|
||
for (let j = 0; j < catalogue_buf.length; j++) {
|
||
if (catalogue_buf[j].page_num == i) {
|
||
catalogue_buf[j].y_offset_pix = start_y;
|
||
start_y += ch_size_y;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
//文本播放项素材绘制
|
||
function my_text_plots(text, fontsize, fcolor, txt_style, stretch_act, tx, h_align, v_align, a_coord, font) {
|
||
catalogue_neaten(catalogue_buf, text, fontsize, fcolor, txt_style, stretch_act, tx, h_align, v_align, a_coord);
|
||
//创建一个用于存储单页图像的画布
|
||
let text_canvas = document.createElement('canvas');
|
||
text_canvas.width = (tx == 6) ? catalogue_buf[0].pixel_w : a_coord.w;
|
||
text_canvas.height = a_coord.h;
|
||
let text_canvas_ctx = text_canvas.getContext("2d", { willReadFrequently: true });
|
||
let font_str;
|
||
if (font == 1) { font_str = " 宋体" }
|
||
else if (font == 2) { font_str = " 仿宋" }
|
||
else if (font == 3) { font_str = " 黑体" }
|
||
else if (font == 4) { font_str = " 楷体" }
|
||
text_canvas_ctx.font = "normal " + (txt_style ? "bold" : "normal") + " " + fontsize + "px" + font_str;
|
||
text_canvas_ctx.textBaseline = 'top';
|
||
text_canvas_ctx.scale((stretch_act == 1) ? 2 : 1, (stretch_act == 2) ? 2 : 1);
|
||
//创建一个用于存储的画布
|
||
let temp = document.createElement('canvas');
|
||
let temp_ctx = temp.getContext("2d", { willReadFrequently: true });
|
||
let r = fcolor & 0x01 ? 255 : 0;
|
||
let g = fcolor & 0x02 ? 255 : 0;
|
||
let max_line = catalogue_buf.length;
|
||
let max_page = catalogue_buf[max_line - 1].page_num + 1;
|
||
let last_page = 0;//上一次页码
|
||
switch (tx) {
|
||
case 1://立即显示
|
||
case 4://上移
|
||
case 7://闪烁换页
|
||
case 5://下移
|
||
case 8://立即显示
|
||
temp.width = a_coord.w;
|
||
temp.height = a_coord.h * max_page;
|
||
for (let index = 0; index < max_line; index++) {
|
||
let now_page = catalogue_buf[index].page_num;
|
||
if (last_page != now_page) {
|
||
last_page = now_page;
|
||
text_canvas_ctx.fillStyle = "#000";
|
||
text_canvas_ctx.fillRect(0, 0, a_coord.w, a_coord.h);
|
||
}
|
||
let x_off = catalogue_buf[index].x_offset_pix;
|
||
let y_off = catalogue_buf[index].y_offset_pix;
|
||
text_canvas_ctx.fillStyle = `rgba(${r},${g},0,255)`;
|
||
text_canvas_ctx.fillText(catalogue_buf[index].string, (stretch_act == 1) ? (x_off / 2) : x_off, (stretch_act == 2) ? (y_off / 2) : y_off, catalogue_buf[index].pixel_w);
|
||
let txt_data = text_canvas_ctx.getImageData(0, 0, a_coord.w, a_coord.h);
|
||
img_printf(txt_data);
|
||
if (tx == 5) {
|
||
temp_ctx.putImageData(txt_data, 0, a_coord.h * (max_page - now_page - 1));
|
||
}
|
||
else {
|
||
temp_ctx.putImageData(txt_data, 0, a_coord.h * now_page);
|
||
}
|
||
}
|
||
dis_data = temp_ctx.getImageData(0, 0, temp.width, temp.height);
|
||
img_printf(dis_data);
|
||
break;
|
||
case 2://左移
|
||
case 3://右移
|
||
temp.width = a_coord.w * max_page;
|
||
temp.height = a_coord.h;
|
||
for (let index = 0; index < max_line; index++) {
|
||
let now_page = catalogue_buf[index].page_num;
|
||
if (last_page != now_page) {
|
||
last_page = now_page;
|
||
text_canvas_ctx.fillStyle = "#000";
|
||
text_canvas_ctx.fillRect(0, 0, a_coord.w, a_coord.h);
|
||
}
|
||
let x_off = catalogue_buf[index].x_offset_pix;
|
||
let y_off = catalogue_buf[index].y_offset_pix;
|
||
text_canvas_ctx.fillStyle = `rgba(${r},${g},0,255)`;
|
||
text_canvas_ctx.fillText(catalogue_buf[index].string, (stretch_act == 1) ? (x_off / 2) : x_off, (stretch_act == 2) ? (y_off / 2) : y_off, catalogue_buf[index].pixel_w);
|
||
let txt_data = text_canvas_ctx.getImageData(0, 0, a_coord.w, a_coord.h);
|
||
if (tx == 3) {
|
||
temp_ctx.putImageData(txt_data, a_coord.w * (max_page - now_page - 1), 0);
|
||
}
|
||
else {
|
||
temp_ctx.putImageData(txt_data, a_coord.w * now_page, 0);
|
||
}
|
||
}
|
||
dis_data = temp_ctx.getImageData(0, 0, temp.width, temp.height);
|
||
img_printf(dis_data);
|
||
break;
|
||
case 6://连续左移
|
||
temp.width = catalogue_buf[0].pixel_w;
|
||
temp.height = a_coord.h;
|
||
text_canvas_ctx.fillStyle = "#000";
|
||
text_canvas_ctx.fillRect(0, 0, temp.width, a_coord.h);
|
||
let x_off = catalogue_buf[0].x_offset_pix;
|
||
let y_off = catalogue_buf[0].y_offset_pix;
|
||
text_canvas_ctx.fillStyle = `rgba(${r},${g},0,255)`;
|
||
text_canvas_ctx.fillText(catalogue_buf[0].string, (stretch_act == 1) ? (x_off / 2) : x_off, (stretch_act == 2) ? (y_off / 2) : y_off, catalogue_buf[0].pixel_w);
|
||
let txt_data = text_canvas_ctx.getImageData(0, 0, catalogue_buf[0].pixel_w, a_coord.h);
|
||
temp_ctx.putImageData(txt_data, 0, 0);
|
||
dis_data = temp_ctx.getImageData(0, 0, catalogue_buf[0].pixel_w, a_coord.h);
|
||
img_printf(dis_data);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return dis_data;
|
||
}
|
||
//临时图片打印
|
||
function img_printf(dis_img) {
|
||
var canvas = document.getElementById('draft');
|
||
if (!canvas.getContext) return;
|
||
canvas.width = dis_img.width;
|
||
canvas.height = dis_img.height;
|
||
var ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||
ctx.putImageData(dis_img, 0, 0);
|
||
}
|
||
function imagedata_to_image(imagedata) {
|
||
var canvas = document.createElement('canvas');
|
||
var ctx = canvas.getContext('2d');
|
||
canvas.width = imagedata.width;
|
||
canvas.height = imagedata.height;
|
||
ctx.putImageData(imagedata, 0, 0);
|
||
|
||
var image = new Image();
|
||
image.src = canvas.toDataURL();
|
||
return image;
|
||
}
|
||
|
||
function timer_callback(canvas_p, area_dis) {
|
||
/************* 预处理显示图片 ************/
|
||
let cnt = Math.ceil(area_dis.area_coord.w / area_dis.dis_img.width);
|
||
let temp = document.createElement('canvas');//临时画布
|
||
let temp_ctx = temp.getContext("2d", { willReadFrequently: true });
|
||
if (area_dis.area_coord.w > area_dis.dis_img.width) {
|
||
temp.width = area_dis.dis_img.width * cnt;
|
||
temp.height = area_dis.dis_img.height * cnt;
|
||
}
|
||
else {
|
||
temp.width = area_dis.dis_img.width;
|
||
temp.height = area_dis.dis_img.height;
|
||
}
|
||
for (let i = 0; i < cnt; i++) {
|
||
if ((area_dis.animation == 4) || (area_dis.animation == 5)) {
|
||
temp_ctx.putImageData(area_dis.dis_img, 0, i * area_dis.dis_img.height);
|
||
}
|
||
else {
|
||
temp_ctx.putImageData(area_dis.dis_img, i * area_dis.dis_img.width, 0);
|
||
}
|
||
}
|
||
switch (area_dis.animation) {
|
||
case 1://立即显示
|
||
case 7:
|
||
case 8:
|
||
{
|
||
if (area_dis.img_coord.y >= area_dis.dis_img.height) {
|
||
area_dis.img_coord.y = 0;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(0, area_dis.img_coord.y, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
if (area_dis.blink_flag !== true) {
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.height - area_dis.img_coord.y;
|
||
if (area_dis.area_coord.h > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w, area_dis.area_coord.h - residue);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y + residue);
|
||
}
|
||
}
|
||
else {
|
||
canvas_p.fillStyle = "#000";
|
||
canvas_p.fillRect(area_dis.area_coord.x, area_dis.area_coord.y, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
}
|
||
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
}
|
||
if ((area_dis.img_coord.y % area_dis.area_coord.h == 0) && (area_dis.stand_time != 0) && (area_dis.stand_flag == 0)) {
|
||
area_dis.stand_flag = 1;
|
||
setTimeout(function () {
|
||
area_dis.stand_flag = 0;
|
||
area_dis.img_coord.y += area_dis.area_coord.h;
|
||
}, (area_dis.stand_time == 0) ? 1 : area_dis.stand_time);
|
||
}
|
||
if (area_dis.animation == 7) {
|
||
area_dis.blink_set();
|
||
}
|
||
}
|
||
break;
|
||
case 2://左移
|
||
{
|
||
if (area_dis.img_coord.x > area_dis.dis_img.width) {
|
||
area_dis.img_coord.x = 0;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(area_dis.img_coord.x, 0, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.width - area_dis.img_coord.x;
|
||
if (area_dis.area_coord.w > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w - residue, area_dis.area_coord.h);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x + residue, area_dis.area_coord.y);
|
||
}
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
if (area_dis.run_cnt % area_dis.speed == 0) {
|
||
area_dis.img_coord.x++;
|
||
}
|
||
}
|
||
if ((area_dis.img_coord.x % area_dis.area_coord.w == 0) && (area_dis.stand_time != 0) && (area_dis.img_coord.x != 0) && (area_dis.stand_flag == 0)) {
|
||
area_dis.stand_flag = 1;
|
||
setTimeout(function () {
|
||
area_dis.stand_flag = 0;
|
||
area_dis.run_cnt++;
|
||
area_dis.img_coord.x++;
|
||
}, area_dis.stand_time);
|
||
}
|
||
}
|
||
break;
|
||
case 3://右移
|
||
{
|
||
if (area_dis.img_coord.x < 0) {
|
||
area_dis.img_coord.x = area_dis.dis_img.width;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(area_dis.img_coord.x, 0, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.width - area_dis.img_coord.x;
|
||
if (area_dis.area_coord.w > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w - residue, area_dis.area_coord.h);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x + residue, area_dis.area_coord.y);
|
||
}
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
if (area_dis.run_cnt % area_dis.speed == 0) {
|
||
area_dis.img_coord.x--;
|
||
}
|
||
}
|
||
if ((area_dis.img_coord.x % area_dis.area_coord.w == 0) && (area_dis.stand_time != 0) && (area_dis.stand_flag == 0)) {
|
||
area_dis.stand_flag = 1;
|
||
setTimeout(function () {
|
||
area_dis.stand_flag = 0;
|
||
area_dis.run_cnt++;
|
||
area_dis.img_coord.x--;
|
||
}, area_dis.stand_time);
|
||
}
|
||
}
|
||
break;
|
||
case 4://上移
|
||
{
|
||
if (area_dis.img_coord.y > area_dis.dis_img.height) {
|
||
area_dis.img_coord.y = 0;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(0, area_dis.img_coord.y, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.height - area_dis.img_coord.y;
|
||
if (area_dis.area_coord.h > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w, area_dis.area_coord.h - residue);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y + residue);
|
||
}
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
if (area_dis.run_cnt % area_dis.speed == 0) {
|
||
area_dis.img_coord.y++;
|
||
}
|
||
}
|
||
if ((area_dis.img_coord.y % area_dis.area_coord.h == 0) && (area_dis.stand_time != 0) && (area_dis.img_coord.y != 0) && (area_dis.stand_flag == 0)) {
|
||
area_dis.stand_flag = 1;
|
||
setTimeout(function () {
|
||
area_dis.stand_flag = 0;
|
||
area_dis.run_cnt++;
|
||
area_dis.img_coord.y++;
|
||
}, area_dis.stand_time);
|
||
}
|
||
}
|
||
break;
|
||
case 5://下移
|
||
{
|
||
if (area_dis.img_coord.y < 0) {
|
||
area_dis.img_coord.y = area_dis.dis_img.height;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(0, area_dis.img_coord.y, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.height - area_dis.img_coord.y;
|
||
if (area_dis.area_coord.h > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w, area_dis.area_coord.h - residue);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y + residue);
|
||
}
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
if (area_dis.run_cnt % area_dis.speed == 0) {
|
||
area_dis.img_coord.y--;
|
||
}
|
||
}
|
||
if ((area_dis.img_coord.y % area_dis.area_coord.h == 0) && (area_dis.stand_time != 0) && (area_dis.stand_flag == 0)) {
|
||
area_dis.stand_flag = 1;
|
||
setTimeout(function () {
|
||
area_dis.stand_flag = 0;
|
||
area_dis.run_cnt++;
|
||
area_dis.img_coord.y--;
|
||
}, area_dis.stand_time);
|
||
}
|
||
}
|
||
break;
|
||
case 6:
|
||
{
|
||
if (area_dis.img_coord.x > area_dis.dis_img.width) {
|
||
area_dis.img_coord.x = 0;
|
||
area_dis.run_cnt = 0;
|
||
}
|
||
let dis_data = temp_ctx.getImageData(area_dis.img_coord.x, 0, area_dis.area_coord.w, area_dis.area_coord.h);
|
||
//开始绘画
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x, area_dis.area_coord.y);
|
||
let residue = area_dis.dis_img.width - area_dis.img_coord.x;
|
||
if (area_dis.area_coord.w > residue) {
|
||
let dis_data = temp_ctx.getImageData(0, 0, area_dis.area_coord.w - residue, area_dis.area_coord.h);
|
||
canvas_p.putImageData(dis_data, area_dis.area_coord.x + residue, area_dis.area_coord.y);
|
||
}
|
||
if (area_dis.stand_flag == 0) {
|
||
area_dis.run_cnt++;
|
||
if (area_dis.run_cnt % area_dis.speed == 0) {
|
||
area_dis.img_coord.x++;
|
||
}
|
||
}
|
||
}
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
}
|
||
function refresh_callback() {
|
||
var canvas = document.getElementById('tutorial');
|
||
var ctx = canvas.getContext("2d");
|
||
|
||
let threshold_value = 100;
|
||
let dis_buf = ctx.getImageData(0, 0, canvas.width, canvas.height);
|
||
let ratio = (dis_buf.height >= dis_buf.width ? 160 : 320) / (dis_buf.height >= dis_buf.width ? dis_buf.height : dis_buf.width);
|
||
var lat_canvas = document.getElementById('lattice');
|
||
lat_canvas.width = ratio * dis_buf.width;
|
||
lat_canvas.height = ratio * dis_buf.height;
|
||
var lat_ctx = lat_canvas.getContext("2d");
|
||
let sub = 0;
|
||
for (let y = 0; y < dis_buf.height; y++) {
|
||
for (let x = 0; x < dis_buf.width; x++) {
|
||
if (dis_buf.data[sub + 1] + dis_buf.data[sub + 2] + dis_buf.data[sub] == 0) {//熄灭
|
||
lat_ctx.fillStyle = "rgb(50,50,50)"; //点阵背景色
|
||
}
|
||
else if (dis_buf.data[sub] >= threshold_value && dis_buf.data[sub + 1] >= threshold_value) {//点亮
|
||
lat_ctx.fillStyle = "rgb(255,255,0)"; //字的颜色
|
||
}
|
||
else if (dis_buf.data[sub] >= threshold_value) {//点亮
|
||
lat_ctx.fillStyle = "rgb(255,0,0)"; //字的颜色
|
||
}
|
||
else if (dis_buf.data[sub + 1] >= threshold_value) {//点亮
|
||
lat_ctx.fillStyle = "rgb(0,255,0)"; //字的颜色
|
||
}
|
||
lat_ctx.beginPath();
|
||
lat_ctx.arc(ratio * (x + .5), ratio * (y + .5), (4) / 2, 0, Math.PI * 2);
|
||
lat_ctx.closePath();
|
||
lat_ctx.fill();
|
||
sub += 4;
|
||
}
|
||
}
|
||
}
|
||
var refresh_timer;
|
||
screen_preview_init = function () {
|
||
//整个屏幕画布
|
||
var canvas = document.getElementById('tutorial');
|
||
canvas.width = (((angle == 0) || (angle == 180)) ? screen_w : screen_h);
|
||
canvas.height = (((angle == 0) || (angle == 180)) ? screen_h : screen_w);
|
||
var ctx = canvas.getContext("2d");
|
||
document.getElementById("preview").innerHTML = "画面预览(" + canvas.width + "*" + canvas.height + ")";
|
||
clearInterval(refresh_timer);
|
||
for (let i = 0; i < 4; i++) {
|
||
if (area_dis_buf[i]) {
|
||
area_dis_buf[i].clear_timer();
|
||
}
|
||
}
|
||
refresh_timer = setInterval(refresh_callback, 10);
|
||
area_dis_buf.splice(0);
|
||
for (let i = 0; i < mode_buf[pro_mode]; i++) {
|
||
let dis_img;
|
||
let a_x = parseInt(document.getElementById("area_X" + i).value);
|
||
a_x = (a_x !== a_x) ? 0 : a_x;
|
||
let a_y = parseInt(document.getElementById("area_Y" + i).value);
|
||
a_y = (a_y !== a_y) ? 0 : a_y;
|
||
let a_w = parseInt(document.getElementById("area_W" + i).value);
|
||
a_w = (a_w !== a_w) ? 0 : a_w;
|
||
let a_h = parseInt(document.getElementById("area_H" + i).value);
|
||
a_h = (a_h !== a_h) ? 0 : a_h;
|
||
let a_coord;
|
||
if ((angle == 0) || (angle == 180)) {
|
||
a_coord = new coord_object(a_x, a_y, a_w, a_h);
|
||
}
|
||
else {
|
||
a_coord = new coord_object(a_y, a_x, a_h, a_w);
|
||
}
|
||
let tx = parseInt(document.getElementById("tx" + i).value);
|
||
let speed = parseInt(document.getElementById("speed" + i).value);
|
||
let stay = parseInt(document.getElementById("stay" + i).value);
|
||
if (document.getElementById("play_item_type" + i).value == "0") {//文字
|
||
let text = document.getElementById("screen_info" + i).value;
|
||
let fontsize = parseInt(document.getElementById("fontsize" + i).value);
|
||
let fcolor = parseInt(document.getElementById("fcolor" + i).value);
|
||
let txt_style = parseInt(document.getElementById("txt_style" + i).value);
|
||
let stretch_act = parseInt(document.getElementById("stretch_act" + i).value);
|
||
let h_align = parseInt(document.getElementById("h-align" + i).value);
|
||
let v_align = parseInt(document.getElementById("v-align" + i).value);
|
||
let font = parseInt(document.getElementById("font" + i).value);
|
||
let data_source = parseInt(document.getElementById("data_source" + i).value);
|
||
let data_tx = parseInt(document.getElementById("data_tx" + i).value);
|
||
if (tx == 8) {
|
||
let significant_digit = parseInt(document.getElementById("significant_digit" + i).value);
|
||
let decimal_digit = parseInt(document.getElementById("decimal_digit" + i).value);
|
||
let val = 0;
|
||
val = val.toFixed(decimal_digit) + '';
|
||
if (data_source == 4) {
|
||
text = "无车牌";
|
||
}
|
||
else {
|
||
text = val.padStart(significant_digit + (decimal_digit ? (decimal_digit + 1) : 0), '0');
|
||
}
|
||
tx = data_tx;
|
||
}
|
||
dis_img = my_text_plots(text, fontsize, fcolor, txt_style, stretch_act, tx, h_align, v_align, a_coord, font);
|
||
let img_coord = new coord_object(0, 0, dis_img.width, dis_img.height);
|
||
area_dis_buf[i] = new area_dis_class(dis_img, a_coord, img_coord, tx, speed, stay, 0, 0, 0);
|
||
area_dis_buf[i].start_timer(timer_callback, 10, ctx);
|
||
}
|
||
else {//图片
|
||
let img_size = parseInt(document.getElementById("img_size" + i).value);
|
||
let img_type = parseInt(document.getElementById("img_type" + i).value);
|
||
let icolor = parseInt(document.getElementById("icolor" + i).value);
|
||
let t_coord = new coord_object(0, 0, img_size, img_size);
|
||
my_picture_plots(img_type, icolor, t_coord).then(function (value) {
|
||
dis_img = value;
|
||
img_printf(dis_img);
|
||
let img_coord = new coord_object(0, 0, dis_img.width, dis_img.height);
|
||
area_dis_buf[i] = new area_dis_class(dis_img, a_coord, img_coord, tx, speed, stay, 0, 0, 0);
|
||
area_dis_buf[i].start_timer(timer_callback, 10, ctx);
|
||
});
|
||
}
|
||
|
||
//area_dis_buf[i].clear_timer();
|
||
}
|
||
}
|
||
//screen_preview_init();
|
||
/***************************************************** 画布预览 END **************************************************/
|
||
//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 content_pattern_reply_parse(json_str) {
|
||
let json = jQuery.parseJSON(json_str);
|
||
if ("pro_manage_ok" in json.led_protocol) {
|
||
result_prompt_display(2, "打开节目成功");
|
||
}
|
||
if ("program_ok" in json.led_protocol) {
|
||
result_prompt_display(2, "设置节目成功");
|
||
open_or_close_play(4, parseInt(pro_num));
|
||
}
|
||
if ("screen_p" in json.led_protocol) {
|
||
screen_w = json.led_protocol.screen_p.w;
|
||
screen_h = json.led_protocol.screen_p.h;
|
||
angle = json.led_protocol.screen_p.screen_angle;
|
||
console.log("屏幕宽度=" + screen_w + ";屏幕高度=" + screen_h + ";旋转角度=" + angle);
|
||
result_prompt_display(2, "获取屏幕参数成功");
|
||
//获取传感器阈值
|
||
get_sensor_data();
|
||
}
|
||
if ("sensor" in json.led_protocol) {
|
||
speed_threshold = json.led_protocol.sensor.speed_threshold;
|
||
temp_threshold = json.led_protocol.sensor.temp_threshold;
|
||
humi_threshold = json.led_protocol.sensor.humi_threshold;
|
||
console.log("速度阈值=" + speed_threshold + ";温度阈值=" + temp_threshold + ";湿度阈值=" + humi_threshold);
|
||
result_prompt_display(2, "获取传感器参数成功");
|
||
get_program_data();
|
||
}
|
||
if ("property_p" in json.led_protocol) {
|
||
console.log("服务器中节目模式=" + json.led_protocol.property_p.m);
|
||
area_init(json.led_protocol.property_p.m);
|
||
play_item_init(json.led_protocol)
|
||
result_prompt_display(2, "获取节目参数成功");
|
||
screen_preview_init();
|
||
}
|
||
}
|
||
content_pattern_reply_parse_fun = content_pattern_reply_parse;
|
||
/*********************************************************节目内容编辑页面数据提交->复制节点（克隆）**************************************************/
|
||
function area_init(mode) {
|
||
pro_mode = mode;
|
||
document.getElementById('mode_dis').innerHTML = "模式" + mode;
|
||
len = mode_buf[mode];
|
||
console.log("area_init() len=" + len);
|
||
//更改各个分区的高级参数
|
||
if (angle == 90 || angle == 270) {
|
||
document.getElementsByName('label_x')[0].innerHTML = "Y：";
|
||
document.getElementsByName('label_y')[0].innerHTML = "X：";
|
||
document.getElementsByName('label_w')[0].innerHTML = "高：";
|
||
document.getElementsByName('label_h')[0].innerHTML = "宽：";
|
||
} else {
|
||
document.getElementsByName('label_x')[0].innerHTML = "X：";
|
||
document.getElementsByName('label_y')[0].innerHTML = "Y：";
|
||
document.getElementsByName('label_w')[0].innerHTML = "宽：";
|
||
document.getElementsByName('label_h')[0].innerHTML = "高：";
|
||
}
|
||
if (angle == 270) {
|
||
document.getElementById('area_X' + 0).value = parseInt(area_percentage_buf[pro_mode][0][1] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + 0).value = parseInt(area_percentage_buf[pro_mode][0][0] * screen_h); //分区Y坐标
|
||
} else if (angle == 90) {
|
||
document.getElementById('area_X' + 0).value = parseInt(area_percentage_buf[pro_mode][0][1] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + 0).value = parseInt(area_percentage_buf[pro_mode][0][0] * screen_h); //分区Y坐标
|
||
} else if (angle == 180) {
|
||
document.getElementById('area_X' + 0).value = parseInt(area_percentage_buf[pro_mode][0][0] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + 0).value = parseInt(area_percentage_buf[pro_mode][0][1] * screen_h); //分区Y坐标
|
||
} else {
|
||
document.getElementById('area_X' + 0).value = parseInt(area_percentage_buf[pro_mode][0][0] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + 0).value = parseInt(area_percentage_buf[pro_mode][0][1] * screen_h); //分区Y坐标
|
||
}
|
||
if (angle == 90 || angle == 270) {
|
||
document.getElementById('area_W' + 0).value = parseInt(area_percentage_buf[pro_mode][0][3] * screen_w); //分区宽度
|
||
document.getElementById('area_H' + 0).value = parseInt(area_percentage_buf[pro_mode][0][2] * screen_h); //分区高度
|
||
} else {
|
||
document.getElementById('area_W' + 0).value = parseInt(area_percentage_buf[pro_mode][0][2] * screen_w); //分区宽度
|
||
document.getElementById('area_H' + 0).value = parseInt(area_percentage_buf[pro_mode][0][3] * screen_h); //分区高度
|
||
}
|
||
|
||
//拷贝一份
|
||
var sourceNode = document.getElementById("play_item0");
|
||
//删除之前存在的子节点
|
||
for (var i = 1; i < 5; i++) {
|
||
if (document.getElementById("play_item" + i)) {
|
||
sourceNode.parentNode.removeChild(document.getElementById("play_item" + i));
|
||
}
|
||
}
|
||
for (var i = 1; i < len; i++) {
|
||
//创建并克隆子节点
|
||
var cloneNode = sourceNode.cloneNode(true)
|
||
cloneNode.setAttribute("id", "play_item" + i)
|
||
sourceNode.parentNode.appendChild(cloneNode)
|
||
document.getElementsByTagName("h1")[i].innerHTML = "分区" + i
|
||
//改变所有分区里面的子元素id
|
||
|
||
document.getElementsByName("img_par")[i].setAttribute("id", "img_par" + i)
|
||
document.getElementsByName("img_type")[i].setAttribute("id", "img_type" + i)
|
||
document.getElementsByName("img_size")[i].setAttribute("id", "img_size" + i)
|
||
document.getElementsByName("play_item_type")[i].setAttribute("id", "play_item_type" + i)
|
||
document.getElementsByName("text_par")[i].setAttribute("id", "text_par" + i)
|
||
document.getElementsByName("screen_info")[i].setAttribute("id", "screen_info" + i)
|
||
document.getElementsByName("font")[i].setAttribute("id", "font" + i)
|
||
document.getElementsByName("font_e")[i].setAttribute("id", "font_e" + i)
|
||
document.getElementsByName("fontsize")[i].setAttribute("id", "fontsize" + i)
|
||
document.getElementsByName("fcolor")[i].setAttribute("id", "fcolor" + i)
|
||
document.getElementsByName("icolor")[i].setAttribute("id", "icolor" + i)
|
||
document.getElementsByName("txt_style")[i].setAttribute("id", "txt_style" + i)
|
||
document.getElementsByName("stretch_act")[i].setAttribute("id", "stretch_act" + i)
|
||
|
||
document.getElementsByName("data_source")[i].setAttribute("id", "data_source" + i)
|
||
document.getElementsByName("data_tx")[i].setAttribute("id", "data_tx" + i)
|
||
document.getElementsByName("speed_threshold")[i].setAttribute("id", "speed_threshold" + i)
|
||
document.getElementsByName("greater_color")[i].setAttribute("id", "greater_color" + i)
|
||
document.getElementsByName("less_color")[i].setAttribute("id", "less_color" + i)
|
||
document.getElementsByName("significant_digit")[i].setAttribute("id", "significant_digit" + i)
|
||
document.getElementsByName("decimal_digit")[i].setAttribute("id", "decimal_digit" + i)
|
||
document.getElementsByName("close_display")[i].setAttribute("id", "close_display" + i)
|
||
|
||
document.getElementsByName("tx")[i].setAttribute("id", "tx" + i)
|
||
document.getElementsByName("speed")[i].setAttribute("id", "speed" + i)
|
||
document.getElementsByName("stay")[i].setAttribute("id", "stay" + i)
|
||
document.getElementsByName("h-align")[i].setAttribute("id", "h-align" + i)
|
||
document.getElementsByName("v-align")[i].setAttribute("id", "v-align" + i)
|
||
document.getElementsByName("area_X")[i].setAttribute("id", "area_X" + i)
|
||
document.getElementsByName("area_Y")[i].setAttribute("id", "area_Y" + i)
|
||
document.getElementsByName("area_W")[i].setAttribute("id", "area_W" + i)
|
||
document.getElementsByName("area_H")[i].setAttribute("id", "area_H" + i)
|
||
|
||
if (angle == 270) {
|
||
document.getElementById('area_X' + i).value = parseInt(area_percentage_buf[pro_mode][i][1] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + i).value = parseInt(area_percentage_buf[pro_mode][i][0] * screen_h); //分区Y坐标
|
||
} else if (angle == 90) {
|
||
document.getElementById('area_X' + i).value = parseInt(area_percentage_buf[pro_mode][i][1] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + i).value = parseInt(area_percentage_buf[pro_mode][i][0] * screen_h); //分区Y坐标
|
||
} else if (angle == 180) {
|
||
document.getElementById('area_X' + i).value = parseInt(area_percentage_buf[pro_mode][i][0] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + i).value = parseInt(area_percentage_buf[pro_mode][i][1] * screen_h); //分区Y坐标
|
||
} else {
|
||
document.getElementById('area_X' + i).value = parseInt(area_percentage_buf[pro_mode][i][0] * screen_w); //分区X坐标
|
||
document.getElementById('area_Y' + i).value = parseInt(area_percentage_buf[pro_mode][i][1] * screen_h); //分区Y坐标
|
||
}
|
||
if (angle == 90 || angle == 270) {
|
||
document.getElementById('area_W' + i).value = parseInt(area_percentage_buf[pro_mode][i][3] * screen_w); //分区宽度
|
||
document.getElementById('area_H' + i).value = parseInt(area_percentage_buf[pro_mode][i][2] * screen_h); //分区高度
|
||
} else {
|
||
document.getElementById('area_W' + i).value = parseInt(area_percentage_buf[pro_mode][i][2] * screen_w); //分区宽度
|
||
document.getElementById('area_H' + i).value = parseInt(area_percentage_buf[pro_mode][i][3] * screen_h); //分区高度
|
||
}
|
||
}
|
||
|
||
$("[name='tx']").on("change", function () {
|
||
var now_val = this.value;
|
||
var id = $("[name='tx']").index(this);
|
||
console.log("有一项动画特效发生改变,值为" + now_val + "这个是第" + id);
|
||
if (now_val == 8) {
|
||
if (document.getElementById("data_source" + id).value == 1) {
|
||
document.getElementById("speed_threshold" + id).value = speed_threshold;
|
||
} else if (document.getElementById("data_source" + id).value == 2) {
|
||
document.getElementById("speed_threshold" + id).value = temp_threshold;
|
||
} else if (document.getElementById("data_source" + id).value == 3) {
|
||
document.getElementById("speed_threshold" + id).value = humi_threshold;
|
||
}
|
||
}
|
||
})
|
||
$("[name='data_source']").on("change", function () {
|
||
var now_val = this.value;
|
||
var id = $("[name='data_source']").index(this);
|
||
console.log("有一项数据源发生改变,值为" + now_val + "这个是第" + id);
|
||
if (now_val == 1) {
|
||
document.getElementById("speed_threshold" + id).value = speed_threshold;
|
||
} else if (now_val == 2) {
|
||
document.getElementById("speed_threshold" + id).value = temp_threshold;
|
||
} else if (now_val == 3) {
|
||
document.getElementById("speed_threshold" + id).value = humi_threshold;
|
||
}
|
||
})
|
||
$("[name='speed_threshold']").on("change", function () {
|
||
var now_val = this.value;
|
||
var id = $("[name='speed_threshold']").index(this);
|
||
console.log("有一项报警域值发生改变,值为" + now_val + "这个是第" + id);
|
||
var p = document.getElementsByName("speed_threshold");
|
||
for (var i = 0; i < p.length; i++) {
|
||
if (document.getElementById("data_source" + i).value == document.getElementById(
|
||
"data_source" + id).value) {
|
||
p[i].value = now_val;
|
||
}
|
||
}
|
||
})
|
||
$("[name='common_sentence']").on("change", function () {
|
||
var buf = [
|
||
"公安交警正在巡逻",
|
||
"公安交警停车检查",
|
||
"前方事故减速慢行",
|
||
"警察临检请您配合",
|
||
"交警临检请您配合",
|
||
"《《《《《",
|
||
"》》》》》",
|
||
"禁止停车",
|
||
"交通管制禁止通行",
|
||
"公安检查靠边停车",
|
||
"前方事故道路封闭",
|
||
"禁止掉头",
|
||
"雨雪天气注意安全",
|
||
"大雾天气减速慢行",
|
||
"靠右停车接受检查",
|
||
"警察临检靠边停车"
|
||
];
|
||
var now_val = this.value;
|
||
var id = $("[name='common_sentence']").index(this);
|
||
console.log("有一项常用语句发生改变,值为" + now_val + "这个是第" + id);
|
||
if (now_val != 0) {
|
||
document.getElementById("screen_info" + id).value = buf[now_val - 1];
|
||
}
|
||
})
|
||
}
|
||
/*********************************************************节目内容编辑页面数据提交->读取数据**************************************************/
|
||
function play_item_init(obj) {
|
||
document.getElementById('time_s').value = obj.property_p.t
|
||
var area_num = obj.property_p.a.length;
|
||
console.log("JSON中分区数量 = " + area_num);
|
||
if (mode_buf[obj.property_p.m] < obj.property_p.a.length) {
|
||
area_num = mode_buf[obj.property_p.m];
|
||
}
|
||
for (var i = 0; i < area_num; i++) {
|
||
document.getElementById('play_item_type' + i).value = obj.property_p.a[i].p[0].t
|
||
if (obj.property_p.a[i].p[0].t == 0) {
|
||
var base = new Base64();
|
||
var txt = base.decode(obj.property_p.a[i].p[0].c.G);
|
||
document.getElementById('screen_info' + i).value = txt
|
||
document.getElementById('font_e' + i).value = obj.property_p.a[i].p[0].c.fe
|
||
document.getElementById('font' + i).value = obj.property_p.a[i].p[0].c.fc
|
||
document.getElementById('fontsize' + i).value = obj.property_p.a[i].p[0].c.s
|
||
document.getElementById('fcolor' + i).value = obj.property_p.a[i].p[0].c.c
|
||
document.getElementById('txt_style' + i).value = obj.property_p.a[i].p[0].c.w
|
||
document.getElementById('stretch_act' + i).value = obj.property_p.a[i].p[0].c.st
|
||
document.getElementById('h-align' + i).value = obj.property_p.a[i].p[0].c.h
|
||
document.getElementById('v-align' + i).value = obj.property_p.a[i].p[0].c.v
|
||
} else {
|
||
document.getElementById('img_type' + i).value = obj.property_p.a[i].p[0].i.n
|
||
document.getElementById('img_size' + i).value = obj.property_p.a[i].p[0].i.w
|
||
document.getElementById('icolor' + i).value = obj.property_p.a[i].p[0].i.c
|
||
}
|
||
document.getElementById('tx' + i).value = (obj.property_p.a[i].p[0].p.a) & 0x0f
|
||
document.getElementById('speed' + i).value = obj.property_p.a[i].p[0].p.s
|
||
document.getElementById('stay' + i).value = parseInt((obj.property_p.a[i].p[0].p.p))
|
||
document.getElementById('area_X' + i).value = obj.property_p.a[i].a.x
|
||
document.getElementById('area_Y' + i).value = obj.property_p.a[i].a.y
|
||
document.getElementById('area_W' + i).value = obj.property_p.a[i].a.w
|
||
document.getElementById('area_H' + i).value = obj.property_p.a[i].a.h
|
||
if (((obj.property_p.a[i].p[0].p.a) & 0x0f) == 8) {
|
||
document.getElementById("data_source" + i).value = obj.property_p.a[i].p[0].e.d;
|
||
if (obj.property_p.a[i].p[0].e.d == 1) {
|
||
document.getElementById("speed_threshold" + i).value = speed_threshold;
|
||
} else if (obj.property_p.a[i].p[0].e.d == 2) {
|
||
document.getElementById("speed_threshold" + i).value = temp_threshold;
|
||
} else if (obj.property_p.a[i].p[0].e.d == 3) {
|
||
document.getElementById("speed_threshold" + i).value = humi_threshold;
|
||
}
|
||
console.log("数据源=" + document.getElementById("data_source" + i).value + ";阈值=" +
|
||
document.getElementById("speed_threshold" + i).value)
|
||
document.getElementById("greater_color" + i).value = obj.property_p.a[i].p[0].e.g;
|
||
document.getElementById("less_color" + i).value = obj.property_p.a[i].p[0].e.l;
|
||
document.getElementById("significant_digit" + i).value = obj.property_p.a[i].p[0].e.sd;
|
||
document.getElementById("decimal_digit" + i).value = obj.property_p.a[i].p[0].e.dd;
|
||
document.getElementById("close_display" + i).value = obj.property_p.a[i].p[0].e.c;
|
||
let a = ((obj.property_p.a[i].p[0].p.a) >> 4) & 0x0f;
|
||
a = (a == 0) ? 1 : a;
|
||
document.getElementById("data_tx" + i).value = a;
|
||
}
|
||
}
|
||
}
|
||
//-----------------------------------------卡片刷新函数（根据选择内容显示或隐藏一些参数）-----------------------------------
|
||
function card_refresh() {
|
||
let i = 0;
|
||
for (i = 0; i < len; i++) {
|
||
if (document.getElementById("play_item_type" + i).value == 0) { //文字
|
||
document.getElementById("img_par" + i).style.display = "none";//隐藏图片参数
|
||
document.getElementById("text_par" + i).style.display = "block";//显示文字参数
|
||
document.getElementsByName("radar_animation")[i].style.display = "block";//显示数据监测特效
|
||
} else { //图片
|
||
if (document.getElementById("tx" + i).value == 8) {
|
||
//图片模式下特效为数据监测时，强制改变动画特效
|
||
document.getElementById("tx" + i).value = 1;
|
||
}
|
||
document.getElementById("img_par" + i).style.display = "block";//显示图片参数
|
||
document.getElementById("text_par" + i).style.display = "none";//隐藏文字参数
|
||
document.getElementsByName("radar_animation")[i].style.display = "none";//隐藏数据监测特效
|
||
}
|
||
if (document.getElementById("tx" + i).value == 8) {
|
||
document.getElementsByName("radar_par")[i].style.display = "block";
|
||
document.getElementsByName("textpara")[i].style.display = "none";
|
||
} else {
|
||
document.getElementsByName("radar_par")[i].style.display = "none";
|
||
document.getElementsByName("textpara")[i].style.display = "block";
|
||
}
|
||
if (document.getElementsByName("data_source")[i].value == 4) {
|
||
document.getElementsByName("data_display")[i].style.display = "none";
|
||
}
|
||
else {
|
||
document.getElementsByName("data_display")[i].style.display = "block";
|
||
}
|
||
}
|
||
}
|
||
window.setInterval(card_refresh, 100);
|
||
|
||
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) {
|
||
content_pattern_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "获取屏幕参数失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
}
|
||
function get_sensor_data() {
|
||
var screen_start = {};
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = new Object()
|
||
screen_start.get_sensor = 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) {
|
||
content_pattern_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "获取屏幕参数失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
}
|
||
function get_program_data() {
|
||
var screen_start = {};
|
||
// screen_start.jsonid = json_id;
|
||
screen_start = new Object()
|
||
screen_start.get_program = parseInt(pro_num);
|
||
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) {
|
||
content_pattern_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "获取屏幕参数失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(str);
|
||
}
|
||
}
|
||
get_screen_parameter();
|
||
$('#content_read').on('click', function () {
|
||
get_sensor_data();
|
||
})
|
||
|
||
/*********************************************************节目内容编辑页面数据提交->设置数据**************************************************/
|
||
function open_or_close_play(type, data) {
|
||
manage = {};
|
||
// manage.jsonid = json_id;
|
||
manage = new Object()
|
||
manage.pro_manage = new Object();
|
||
manage.pro_manage.type = type;
|
||
manage.pro_manage.data = data;
|
||
let string = 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) {
|
||
content_pattern_reply_parse(xhr.responseText);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(string);
|
||
}
|
||
}
|
||
$("#btn_set").on('click', function () {
|
||
//获取到分区设置卡有多少
|
||
var area_number = document.getElementsByName("play_item").length;
|
||
console.log("分区数量 = " + area_number);
|
||
var json_cfg = {};
|
||
// json_cfg.jsonid = json_id;
|
||
json_cfg = new Object()
|
||
json_cfg.property_p = new Object();
|
||
json_cfg.property_p.n = parseInt(pro_num); //节目编号
|
||
const time_s = $('#time_s').val();
|
||
json_cfg.property_p.t = parseInt(time_s);
|
||
json_cfg.property_p.m = pro_mode; //节目模式
|
||
json_cfg.property_p.no = pro_note; //节目备注
|
||
json_cfg.property_p.a = new Array();
|
||
for (var i = 0; i < area_number; i++) {
|
||
const play_item_type = $('#play_item_type' + i).find('option:selected').val();
|
||
const img_type = $('#img_type' + i).find('option:selected').val();
|
||
const img_size = $('#img_size' + i).find('option:selected').val();
|
||
const screen_txt = $('#screen_info' + i).val();
|
||
var base = new Base64();
|
||
var base64_txt = base.encode(screen_txt);
|
||
// console.log(base64_txt)
|
||
const font = $('#font' + i).find('option:selected').val();
|
||
const font_en = $('#font_e' + i).find('option:selected').val();
|
||
const font_size = $('#fontsize' + i).find('option:selected').val();
|
||
const font_color = $('#fcolor' + i).find('option:selected').val();
|
||
const img_color = $('#icolor' + i).find('option:selected').val();
|
||
const font_weight = $('#txt_style' + i).find('option:selected').val();
|
||
const font_stretch = $('#stretch_act' + i).find('option:selected').val();
|
||
const font_tx = $('#tx' + i).find('option:selected').val();
|
||
const font_speed = $('#speed' + i).find('option:selected').val();
|
||
const font_stay = $('#stay' + i).find('option:selected').val();
|
||
const font_h_align = $('#h-align' + i).find('option:selected').val();
|
||
const font_v_align = $('#v-align' + i).find('option:selected').val();
|
||
const area_X = $('#area_X' + i).val();
|
||
const area_Y = $('#area_Y' + i).val();
|
||
const area_W = $('#area_W' + i).val();
|
||
const area_H = $('#area_H' + i).val();
|
||
|
||
const data_source = $("#data_source" + i).find('option:selected').val();
|
||
const data_tx = $("#data_tx" + i).find('option:selected').val();
|
||
const speed_threshold = $("#speed_threshold" + i).val();
|
||
const greater_color = $("#greater_color" + i).find('option:selected').val();
|
||
const less_color = $("#less_color" + i).find('option:selected').val();
|
||
const significant_digit = $("#significant_digit" + i).find('option:selected').val();
|
||
const decimal_digit = $("#decimal_digit" + i).find('option:selected').val();
|
||
const close_display = $("#close_display" + i).find('option:selected').val();
|
||
|
||
json_cfg.property_p.a[i] = new Object();
|
||
json_cfg.property_p.a[i].n = i; //分区编号
|
||
json_cfg.property_p.a[i].a = new Object();
|
||
json_cfg.property_p.a[i].a.x = parseInt(area_X); //分区X坐标
|
||
json_cfg.property_p.a[i].a.y = parseInt(area_Y); //分区Y坐标
|
||
json_cfg.property_p.a[i].a.w = parseInt(area_W); //分区宽度
|
||
json_cfg.property_p.a[i].a.h = parseInt(area_H); //分区高度
|
||
json_cfg.property_p.a[i].p = new Array();
|
||
json_cfg.property_p.a[i].p[0] = new Object();
|
||
json_cfg.property_p.a[i].p[0].n = 0; //播放项编号
|
||
json_cfg.property_p.a[i].p[0].t = parseInt(play_item_type);
|
||
if (parseInt(play_item_type) == 0) { //文字
|
||
json_cfg.property_p.a[i].p[0].c = new Object();
|
||
json_cfg.property_p.a[i].p[0].c.G = base64_txt;
|
||
json_cfg.property_p.a[i].p[0].c.fc = parseInt(font);
|
||
json_cfg.property_p.a[i].p[0].c.fe = parseInt(font_en);
|
||
json_cfg.property_p.a[i].p[0].c.s = parseInt(font_size);
|
||
json_cfg.property_p.a[i].p[0].c.c = parseInt(font_color);
|
||
json_cfg.property_p.a[i].p[0].c.w = parseInt(font_weight);
|
||
json_cfg.property_p.a[i].p[0].c.st = parseInt(font_stretch);
|
||
json_cfg.property_p.a[i].p[0].c.h = parseInt(font_h_align);
|
||
json_cfg.property_p.a[i].p[0].c.v = parseInt(font_v_align);
|
||
} else { //图片
|
||
json_cfg.property_p.a[i].p[0].i = new Object();
|
||
json_cfg.property_p.a[i].p[0].i.n = parseInt(img_type);
|
||
json_cfg.property_p.a[i].p[0].i.w = parseInt(img_size);
|
||
json_cfg.property_p.a[i].p[0].i.h = parseInt(img_size);
|
||
json_cfg.property_p.a[i].p[0].i.c = parseInt(img_color);
|
||
}
|
||
|
||
json_cfg.property_p.a[i].p[0].p = new Object();
|
||
var animation_p = parseInt(font_tx);
|
||
if (animation_p == 8 && (parseInt(play_item_type) == 1)) { //如果是图片类型并且动画特效是8雷达测速时强制归一
|
||
animation_p = 1;
|
||
}
|
||
json_cfg.property_p.a[i].p[0].p.a = animation_p;
|
||
json_cfg.property_p.a[i].p[0].p.s = parseInt(font_speed);
|
||
json_cfg.property_p.a[i].p[0].p.p = parseInt(font_stay);
|
||
json_cfg.property_p.a[i].p[0].p.i = 65535;
|
||
if (animation_p == 8) {
|
||
json_cfg.property_p.a[i].p[0].p.a = (data_tx << 4) | animation_p;
|
||
json_cfg.property_p.a[i].p[0].e = new Object();
|
||
json_cfg.property_p.a[i].p[0].e.d = parseInt(data_source);
|
||
json_cfg.property_p.a[i].p[0].e.st = parseInt(speed_threshold);
|
||
json_cfg.property_p.a[i].p[0].e.g = parseInt(greater_color);
|
||
json_cfg.property_p.a[i].p[0].e.l = parseInt(less_color);
|
||
json_cfg.property_p.a[i].p[0].e.sd = parseInt(significant_digit);
|
||
json_cfg.property_p.a[i].p[0].e.dd = parseInt(decimal_digit);
|
||
}
|
||
}
|
||
let string = JSON.stringify(json_cfg);
|
||
let send_string = "{\"JSON_id\":" + json_id + ",\"board_id\":102"+",\"led_protocol\":" + string + "}";
|
||
console.log(string);
|
||
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) {
|
||
content_pattern_reply_parse(xhr.responseText);
|
||
} else {
|
||
result_prompt_display(2, "设置失败");
|
||
}
|
||
}
|
||
}
|
||
}
|
||
else {
|
||
MQTT_send(string);
|
||
}
|
||
})
|
||
/*********************************************************节目内容编辑页面弹窗处理->模式选择**************************************************/
|
||
/***滑动限制***/
|
||
function stop() {
|
||
var mo = function (e) {
|
||
e.preventDefault();
|
||
};
|
||
document.body.style.overflow = 'hidden';
|
||
document.addEventListener("touchmove", mo, false); //禁止页面滑动
|
||
}
|
||
/***取消滑动限制***/
|
||
function move() {
|
||
var mo = function (e) {
|
||
e.preventDefault();
|
||
};
|
||
document.body.style.overflow = ''; //出现滚动条
|
||
document.removeEventListener("touchmove", mo, false);
|
||
}
|
||
|
||
function pop_up_window(obj) {
|
||
stop();
|
||
document.getElementById("popup").style.display = "block";
|
||
document.getElementById("Ground").style.display = "block";
|
||
}
|
||
|
||
function hide_window(obj) {
|
||
move();
|
||
document.getElementById("popup").style.display = "none";
|
||
document.getElementById("Ground").style.display = "none";
|
||
}
|
||
$('#submit').on('click', function () {
|
||
pop_up_window();
|
||
})
|
||
$('#pro_mode_cancel').on('click', function () {
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn1').on('click', function () {
|
||
console.log("模式1");
|
||
area_init(1);
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn2').on('click', function () {
|
||
console.log("模式2");
|
||
area_init(2);
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn3').on('click', function () {
|
||
console.log("模式3");
|
||
area_init(3);
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn4').on('click', function () {
|
||
console.log("模式4");
|
||
area_init(4);
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn5').on('click', function () {
|
||
console.log("模式5");
|
||
area_init(5);
|
||
hide_window();
|
||
})
|
||
$('#pro_mode_btn6').on('click', function () {
|
||
console.log("模式6");
|
||
area_init(6);
|
||
hide_window();
|
||
})
|
||
|
||
function Base64() {
|
||
// private property
|
||
_keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
|
||
// public method for encoding
|
||
this.encode = function (input) {
|
||
var output = "";
|
||
var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
|
||
var i = 0;
|
||
input = _utf8_encode(input);
|
||
while (i < input.length) {
|
||
chr1 = input.charCodeAt(i++);
|
||
chr2 = input.charCodeAt(i++);
|
||
chr3 = input.charCodeAt(i++);
|
||
enc1 = chr1 >> 2;
|
||
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
|
||
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
|
||
enc4 = chr3 & 63;
|
||
if (isNaN(chr2)) {
|
||
enc3 = enc4 = 64;
|
||
} else if (isNaN(chr3)) {
|
||
enc4 = 64;
|
||
}
|
||
output = output +
|
||
_keyStr.charAt(enc1) + _keyStr.charAt(enc2) +
|
||
_keyStr.charAt(enc3) + _keyStr.charAt(enc4);
|
||
}
|
||
return output;
|
||
}
|
||
// public method for decoding
|
||
this.decode = function (input) {
|
||
var output = "";
|
||
var chr1, chr2, chr3;
|
||
var enc1, enc2, enc3, enc4;
|
||
var i = 0;
|
||
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
|
||
while (i < input.length) {
|
||
enc1 = _keyStr.indexOf(input.charAt(i++));
|
||
enc2 = _keyStr.indexOf(input.charAt(i++));
|
||
enc3 = _keyStr.indexOf(input.charAt(i++));
|
||
enc4 = _keyStr.indexOf(input.charAt(i++));
|
||
chr1 = (enc1 << 2) | (enc2 >> 4);
|
||
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
||
chr3 = ((enc3 & 3) << 6) | enc4;
|
||
output = output + String.fromCharCode(chr1);
|
||
if (enc3 != 64) {
|
||
output = output + String.fromCharCode(chr2);
|
||
}
|
||
if (enc4 != 64) {
|
||
output = output + String.fromCharCode(chr3);
|
||
}
|
||
}
|
||
output = _utf8_decode(output);
|
||
return output;
|
||
}
|
||
// private method for UTF-8 encoding
|
||
_utf8_encode = function (string) {
|
||
string = string.replace(/\r\n/g, "\n");
|
||
var utftext = "";
|
||
for (var n = 0; n < string.length; n++) {
|
||
var c = string.charCodeAt(n);
|
||
if (c < 128) {
|
||
utftext += String.fromCharCode(c);
|
||
} else if ((c > 127) && (c < 2048)) {
|
||
utftext += String.fromCharCode((c >> 6) | 192);
|
||
utftext += String.fromCharCode((c & 63) | 128);
|
||
} else {
|
||
utftext += String.fromCharCode((c >> 12) | 224);
|
||
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
|
||
utftext += String.fromCharCode((c & 63) | 128);
|
||
}
|
||
}
|
||
return utftext;
|
||
}
|
||
// private method for UTF-8 decoding
|
||
_utf8_decode = function (utftext) {
|
||
var string = "";
|
||
var i = 0;
|
||
var c = c1 = c2 = 0;
|
||
while (i < utftext.length) {
|
||
c = utftext.charCodeAt(i);
|
||
if (c < 128) {
|
||
string += String.fromCharCode(c);
|
||
i++;
|
||
} else if ((c > 191) && (c < 224)) {
|
||
c2 = utftext.charCodeAt(i + 1);
|
||
string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
|
||
i += 2;
|
||
} else {
|
||
c2 = utftext.charCodeAt(i + 1);
|
||
c3 = utftext.charCodeAt(i + 2);
|
||
string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
|
||
i += 3;
|
||
}
|
||
}
|
||
return string;
|
||
}
|
||
}
|
||
|
||
function Utf8ToUnicode(strUtf8) {
|
||
var bstr = "";
|
||
var nTotalChars = strUtf8.length; // total chars to be processed.
|
||
var nOffset = 0; // processing point on strUtf8
|
||
var nRemainingBytes = nTotalChars; // how many bytes left to be converted
|
||
var nOutputPosition = 0;
|
||
var iCode, iCode1, iCode2; // the value of the unicode.
|
||
while (nOffset < nTotalChars) {
|
||
iCode = strUtf8.charCodeAt(nOffset);
|
||
if ((iCode & 0x80) == 0) // 1 byte.
|
||
{
|
||
if (nRemainingBytes < 1) // not enough data
|
||
break;
|
||
bstr += String.fromCharCode(iCode & 0x7F);
|
||
nOffset++;
|
||
nRemainingBytes -= 1;
|
||
} else if ((iCode & 0xE0) == 0xC0) // 2 bytes
|
||
{
|
||
iCode1 = strUtf8.charCodeAt(nOffset + 1);
|
||
if (nRemainingBytes < 2 || // not enough data
|
||
(iCode1 & 0xC0) != 0x80) // invalid pattern
|
||
{
|
||
break;
|
||
}
|
||
bstr += String.fromCharCode(((iCode & 0x3F) << 6) | (iCode1 & 0x3F));
|
||
nOffset += 2;
|
||
nRemainingBytes -= 2;
|
||
} else if ((iCode & 0xF0) == 0xE0) // 3 bytes
|
||
{
|
||
iCode1 = strUtf8.charCodeAt(nOffset + 1);
|
||
iCode2 = strUtf8.charCodeAt(nOffset + 2);
|
||
if (nRemainingBytes < 3 || // not enough data
|
||
(iCode1 & 0xC0) != 0x80 || // invalid pattern
|
||
(iCode2 & 0xC0) != 0x80) {
|
||
break;
|
||
}
|
||
bstr += String.fromCharCode(((iCode & 0x0F) << 12) |
|
||
((iCode1 & 0x3F) << 6) |
|
||
(iCode2 & 0x3F));
|
||
nOffset += 3;
|
||
nRemainingBytes -= 3;
|
||
} else // 4 or more bytes -- unsupported
|
||
break;
|
||
}
|
||
if (nRemainingBytes != 0) {
|
||
// bad UTF8 string.
|
||
return "";
|
||
}
|
||
return bstr;
|
||
}
|
||
$(function () {
|
||
if (/xazn/.test(navigator.userAgent)||/uni-app/.test(navigator.userAgent)) {
|
||
// 在App中
|
||
document.addEventListener("UniAppJSBridgeReady", function () {
|
||
window.setInterval(card_refresh, 100);
|
||
get_screen_parameter();
|
||
});
|
||
} else {
|
||
window.setInterval(card_refresh, 100);
|
||
get_screen_parameter();
|
||
}
|
||
})
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |