331 lines
10 KiB
HTML
331 lines
10 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<link rel="stylesheet" href="NumberPad/css/bootstrap.min.css">
|
|||
|
|
<link rel="stylesheet" href="NumberPad/css/bootstrap-theme.min.css">
|
|||
|
|
<link rel="stylesheet" type="text/css" href="NumberPad/css/htmleaf-demo.css">
|
|||
|
|
<link rel="stylesheet" href="NumberPad/css/jquery.numpad.css">
|
|||
|
|
<style type="text/css">
|
|||
|
|
.nmpd-grid {
|
|||
|
|
border: none;
|
|||
|
|
padding: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.nmpd-grid>tbody>tr>td {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Some custom styling for Bootstrap */
|
|||
|
|
.qtyInput {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 6px 12px;
|
|||
|
|
color: #555;
|
|||
|
|
background-color: white;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
|||
|
|
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
|
|||
|
|
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
|
|||
|
|
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|||
|
|
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<style>
|
|||
|
|
#invite {
|
|||
|
|
padding: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
font-size: 25px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
li {
|
|||
|
|
list-style-type: none;
|
|||
|
|
margin: 10px 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
margin: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
margin: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
font-size: 25px;
|
|||
|
|
padding: 20px 30px;
|
|||
|
|
}
|
|||
|
|
.form-control {
|
|||
|
|
width: 500px;
|
|||
|
|
}
|
|||
|
|
#invite .form-control{
|
|||
|
|
width: 300px;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<title>Document</title>
|
|||
|
|
<script src="jquery-2.1.0.min.js"></script>
|
|||
|
|
<script src="NumberPad/js/bootstrap.min.js"></script>
|
|||
|
|
<script src="NumberPad/js/jquery.numpad.js"></script>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
|
|||
|
|
// Set NumPad defaults for jQuery mobile.
|
|||
|
|
// These defaults will be applied to all NumPads within this document!
|
|||
|
|
|
|||
|
|
$.fn.numpad.defaults.gridTpl = '<table class="table modal-content"></table>';
|
|||
|
|
$.fn.numpad.defaults.backgroundTpl = '<div class="modal-backdrop in"></div>';
|
|||
|
|
$.fn.numpad.defaults.displayTpl = '<input type="text" class="form-control" />';
|
|||
|
|
$.fn.numpad.defaults.buttonNumberTpl = '<button type="button" class="btn btn-default" style="width: 80px; height: 80px"></button>';
|
|||
|
|
$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 80px; height: 80px"></button>';
|
|||
|
|
//$.fn.numpad.defaults.buttonNumberTpl = '<button type="button" class="btn btn-default"></button>';
|
|||
|
|
//$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 100%;"></button>';
|
|||
|
|
$.fn.numpad.defaults.onKeypadCreate = function(){$(this).find('.done').addClass('btn-primary');};
|
|||
|
|
|
|||
|
|
// Instantiate NumPad once the page is ready to be shown
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
//$('#stations_start').numpad();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
//$('#stations_end').numpad();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(document).ready(function(){
|
|||
|
|
//$('#stations_prop').numpad();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function add(){
|
|||
|
|
var li1_start = document.getElementById("li1_start");
|
|||
|
|
//创建li_start
|
|||
|
|
var li1_end = document.getElementById("li1_end");
|
|||
|
|
//创建li_end
|
|||
|
|
var li1_prop = document.getElementById("li1_prop");
|
|||
|
|
//创建li_prop
|
|||
|
|
|
|||
|
|
var lis = document.createElement("li");
|
|||
|
|
//创建文本
|
|||
|
|
var texts_start = document.createElement('input');
|
|||
|
|
//创建文本
|
|||
|
|
var texts_end = document.createElement('input');
|
|||
|
|
//创建文本
|
|||
|
|
var texts_prop = document.createElement('input');
|
|||
|
|
|
|||
|
|
texts_start.setAttribute('type', 'text');//输入框的类型
|
|||
|
|
texts_end.setAttribute('type', 'text');//输入框的类型
|
|||
|
|
texts_prop.setAttribute('type', 'text');//输入框的类型
|
|||
|
|
|
|||
|
|
texts_start.setAttribute('name', "station_start");//输入框的名字
|
|||
|
|
texts_end.setAttribute('name', "station_end");//输入框的名字
|
|||
|
|
texts_prop.setAttribute('name', "station_prop");//输入框的名字
|
|||
|
|
|
|||
|
|
texts_start.setAttribute('class', "input form-control");//输入框的样式
|
|||
|
|
texts_end.setAttribute('class', "input form-control");//输入框的样式
|
|||
|
|
texts_prop.setAttribute('class', "input form-control");//输入框的样式
|
|||
|
|
|
|||
|
|
|
|||
|
|
var length=document.getElementsByTagName('li').length;
|
|||
|
|
//var length=document.getElementsByTagName('li').length;
|
|||
|
|
|
|||
|
|
texts_start.setAttribute('id',"station_start"+length.toString());
|
|||
|
|
texts_end.setAttribute('id',"station_end"+length.toString());
|
|||
|
|
texts_prop.setAttribute('id',"station_prop"+length.toString());
|
|||
|
|
//把文本添加到li下面 appendChild
|
|||
|
|
lis.appendChild(texts_start);
|
|||
|
|
//把文本添加到li下面 appendChild
|
|||
|
|
lis.appendChild(texts_end);
|
|||
|
|
//把文本添加到li下面 appendChild
|
|||
|
|
lis.appendChild(texts_prop);
|
|||
|
|
|
|||
|
|
//获取到div
|
|||
|
|
var invite = document.getElementById("invite");
|
|||
|
|
invite.insertBefore(lis,li1_start);
|
|||
|
|
invite.insertBefore(lis,li1_end);
|
|||
|
|
invite.insertBefore(lis,li1_prop);
|
|||
|
|
// $("#station_start"+length.toString()).numpad();
|
|||
|
|
// $("#station_end"+length.toString()).numpad();
|
|||
|
|
// $("#station_prop"+length.toString()).numpad();
|
|||
|
|
}
|
|||
|
|
function minus(){
|
|||
|
|
var lis=document.getElementsByTagName('li');
|
|||
|
|
if(lis.length>=1) {
|
|||
|
|
var li = lis[(lis.length - 1)];
|
|||
|
|
li.parentNode.removeChild(li);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
function sub(){
|
|||
|
|
var inp_start = document.getElementsByName("station_start");
|
|||
|
|
var inp_end = document.getElementsByName("station_end");
|
|||
|
|
var inp_prop = document.getElementsByName("station_prop");
|
|||
|
|
var inputs_start = new Array();
|
|||
|
|
var inputs_end = new Array();
|
|||
|
|
var inputs_prop = new Array();
|
|||
|
|
var sche_station_total="sche_total:"+Button_Sch_Enable;
|
|||
|
|
for(var i=0; i<inp_start.length;i++){
|
|||
|
|
// alert(inp[i].value); //获得输入框的值
|
|||
|
|
if(inp_start[i].value=="")inp_start[i].value="0";
|
|||
|
|
if(inp_end[i].value=="")inp_end[i].value="1";
|
|||
|
|
if(inp_prop[i].value=="")inp_prop[i].value="0";
|
|||
|
|
inputs_start[i] = inp_start[i].value;
|
|||
|
|
inputs_end[i] = inp_end[i].value;
|
|||
|
|
inputs_prop[i] = inp_prop[i].value;
|
|||
|
|
sche_station_total=sche_station_total+";"+inp_start[i].value+","+inp_end[i].value+","+inp_prop[i].value;
|
|||
|
|
}
|
|||
|
|
sche_station_total=sche_station_total+"#";
|
|||
|
|
console.log(sche_station_total);
|
|||
|
|
client_request(sche_station_total);
|
|||
|
|
//alert(inputs); //将输入框的值赋予inputs数组中
|
|||
|
|
}
|
|||
|
|
function schedisable(){
|
|||
|
|
client_request("HMIScheDisable");
|
|||
|
|
}
|
|||
|
|
function scheenable(){
|
|||
|
|
client_request("HMIScheEnable");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function HMIVehcileCtrlDebug(str){
|
|||
|
|
client_request("HMIVehcileCtrlDebug:"+str);
|
|||
|
|
}
|
|||
|
|
function HMIImportLearn(str){
|
|||
|
|
client_request("HMIImportLearn:"+str);
|
|||
|
|
}
|
|||
|
|
function HMIExportSQL(){
|
|||
|
|
client_request("HMIExportSQL");
|
|||
|
|
}
|
|||
|
|
function HMIExportLearn(){
|
|||
|
|
client_request("HMIExportLearn");
|
|||
|
|
}
|
|||
|
|
function HMISetDate(HMISetYearStr,HMISetMonthStr,HMISetDayStr,HMISetHourStr,HMISetMinuteStr,HMISetSecondStr){
|
|||
|
|
client_request("HMISetDate:"+HMISetYearStr+","+HMISetMonthStr+","+HMISetDayStr+","+HMISetHourStr+","+HMISetMinuteStr+","+HMISetSecondStr);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var Button_Sch_Enable=false;
|
|||
|
|
function ButtonImage_Vertical_Click(){
|
|||
|
|
if(Button_Sch_Enable==false){
|
|||
|
|
Button_Sch_Enable=true;
|
|||
|
|
document.getElementById("buttonimage_Vertical").setAttribute("src","Led_Display/Button_Vertical_On.bmp");
|
|||
|
|
}
|
|||
|
|
else{
|
|||
|
|
Button_Sch_Enable=false;
|
|||
|
|
document.getElementById("buttonimage_Vertical").setAttribute("src","Led_Display/Button_Vertical_Off.bmp");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function client_request(str){
|
|||
|
|
$('#output').html("");
|
|||
|
|
window.parent.postMessage(
|
|||
|
|
{
|
|||
|
|
event_id: 'client_request',
|
|||
|
|
data: {
|
|||
|
|
v1: str
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
"*" //or "www.parentpage.com"
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function receiveMessage(event){
|
|||
|
|
//console.log(event.data);
|
|||
|
|
switch(event.data.event_id){
|
|||
|
|
case "client_response":{
|
|||
|
|
var data=event.data.data;
|
|||
|
|
var result=data.v1;
|
|||
|
|
var ROS_String_Output=data.v2;
|
|||
|
|
var Rec_HMI_String_Input=data.v3;
|
|||
|
|
var Client_Request_Cmd=Rec_HMI_String_Input.split(':');
|
|||
|
|
//console.log(data);
|
|||
|
|
switch(Client_Request_Cmd[0]){
|
|||
|
|
case 'sche':{
|
|||
|
|
document.getElementById('output').innerText=ROS_String_Output;
|
|||
|
|
}break;
|
|||
|
|
default:{
|
|||
|
|
document.getElementById('output').innerText=ROS_String_Output;
|
|||
|
|
}break;
|
|||
|
|
}
|
|||
|
|
}break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.addEventListener("message", receiveMessage, false);
|
|||
|
|
</script>
|
|||
|
|
</head>
|
|||
|
|
<body id="body">
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<div id="output"></div>
|
|||
|
|
</tr>
|
|||
|
|
|
|||
|
|
<tr>
|
|||
|
|
<p>
|
|||
|
|
<input type="button" class="btn" value="schedisable" onclick="schedisable()">
|
|||
|
|
</p>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<p>
|
|||
|
|
<input type="button" class="btn" value="scheenable" onclick="scheenable()">
|
|||
|
|
</p>
|
|||
|
|
</tr>
|
|||
|
|
|
|||
|
|
<tr>
|
|||
|
|
<p>
|
|||
|
|
Sche Enable:
|
|||
|
|
<img id="buttonimage_Vertical" onclick="ButtonImage_Vertical_Click()"
|
|||
|
|
src="Led_Display/Button_Vertical_Off.bmp" />
|
|||
|
|
</p>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<form action="">
|
|||
|
|
<p>StationStart StationEnd：<span>（点击按钮+ - ）</span></p>
|
|||
|
|
<div>
|
|||
|
|
<ul id="invite">
|
|||
|
|
<li>
|
|||
|
|
<input type="text" class="input form-control" name="station_start" id="stations_start">
|
|||
|
|
<input type="text" class="input form-control" name="station_end" id="stations_end">
|
|||
|
|
<input type="text" class="input form-control" name="station_prop" id="stations_prop">
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<input type="button" class="btn" value="+" onclick="add()">
|
|||
|
|
<input type="button" class="btn" value="-" onclick="minus()">
|
|||
|
|
<p>
|
|||
|
|
<input type="button" class="btn" value="完成" onclick="sub()">
|
|||
|
|
</p>
|
|||
|
|
</form>
|
|||
|
|
</tr>
|
|||
|
|
|
|||
|
|
<tr>
|
|||
|
|
<p><input type=text class="input form-control" id="HMIVehcileCtrlDebugStr"
|
|||
|
|
name=HMIVehcileCtrlDebugStr></input></p>
|
|||
|
|
<input type="button" class="btn" value="HMIVehcileCtrlDebug"
|
|||
|
|
onclick="HMIVehcileCtrlDebug(HMIVehcileCtrlDebugStr.value)">
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
<table>
|
|||
|
|
<tr>
|
|||
|
|
<input type="button" class="btn" value="HMIExportSQL" onclick="HMIExportSQL()">
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<input type="button" class="btn" value="HMIExportLearn" onclick="HMIExportLearn()">
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<p><input type=text class="input form-control" id="HMIImportLearnStr" name=HMIImportLearnStr></input>
|
|||
|
|
</p>
|
|||
|
|
<input type="button" class="btn" value="HMIImportLearn"
|
|||
|
|
onclick="HMIImportLearn(HMIImportLearnStr.value)">
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
</body>
|
|||
|
|
<script>
|
|||
|
|
$("#body").on("focus", ".form-control", function() {
|
|||
|
|
window.parent.inputDom = this;
|
|||
|
|
var distance = $(parent.document).scrollTop() + 500 + "px";
|
|||
|
|
$(".simple-keyboard", parent.document).css("top", distance)
|
|||
|
|
$(".keyboard", parent.document).show();
|
|||
|
|
window.parent.clearKeyboard();
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
</html>
|