394 lines
11 KiB
HTML
394 lines
11 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>send key to process</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css"/>
|
|
</head>
|
|
<style>
|
|
.btn{
|
|
color: white;
|
|
}
|
|
</style>
|
|
<script type='text/javascript' language='javascript'>
|
|
var RC_Enable=false;
|
|
var joy_Enable=false;
|
|
|
|
function rc_client_request(str){
|
|
window.parent.postMessage(
|
|
{
|
|
event_id: 'rc_client_request',
|
|
data: {
|
|
v1: str
|
|
}
|
|
},
|
|
"*" //or "www.parentpage.com"
|
|
);
|
|
}
|
|
|
|
function receiveMessage(event) {
|
|
//console.log(event.data);
|
|
switch (event.data.event_id) {
|
|
case "rc_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 = ROS_String_Output.split(':');
|
|
console.log(Client_Request_Cmd);
|
|
}break;
|
|
}
|
|
}
|
|
|
|
var keyCodeArry=[];
|
|
document.onkeydown=function(ev){
|
|
var oEvent=ev||event;
|
|
keyCode=oEvent.keyCode;
|
|
keyCodeArry=addKeyCodeArry(keyCode,keyCodeArry);
|
|
//console.log(keyCodeArry);
|
|
}
|
|
document.onkeyup=function(ev){
|
|
var oEvent=ev||event;
|
|
keyCode=oEvent.keyCode;
|
|
keyCodeArry=deletKeyCodeArry(keyCode,keyCodeArry);
|
|
//console.log(keyCodeArry);
|
|
}
|
|
function addKeyCodeArry(num,arr){
|
|
var check=0;
|
|
for (var i=0;i<arr.length;i++) {
|
|
if (arr[i]==num) {
|
|
check=1;
|
|
}
|
|
}
|
|
if (check==0) {
|
|
arr.push(num);
|
|
}
|
|
return arr;
|
|
}
|
|
function deletKeyCodeArry(num,arr){
|
|
for (var i=0;i<arr.length;i++) {
|
|
if (arr[i]==num) {
|
|
arr.splice(i,1);
|
|
}
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
/*
|
|
|
|
document.onkeydown = function(e) {
|
|
|
|
var event=event||window.event;
|
|
|
|
if(event.keyCode == 38){
|
|
console.log("keyup");
|
|
}
|
|
if(event.keyCode==40){
|
|
console.log("keydown");
|
|
}
|
|
if(event.keyCode==37){
|
|
console.log("keyleft");
|
|
}
|
|
if(event.keyCode==39){
|
|
console.log("keyright");
|
|
}
|
|
}
|
|
*/
|
|
|
|
var keyup_state=0;
|
|
var keydown_state=0;
|
|
var keyleft_state=0;
|
|
var keyright_state=0;
|
|
var keyw_state=0;
|
|
var keys=state=0;
|
|
function Timer(){
|
|
var tmp_keyup_state=0;
|
|
var tmp_keydown_state=0;
|
|
var tmp_keyleft_state=0;
|
|
var tmp_keyright_state=0;
|
|
var tmp_keyw_state=0;
|
|
var tmp_keys_state=0;
|
|
for (var i=0;i<keyCodeArry.length;i++) {
|
|
if(keyCodeArry[i]==38){
|
|
tmp_keyup_state=1;
|
|
}
|
|
if(keyCodeArry[i]==40){
|
|
tmp_keydown_state=1;
|
|
}
|
|
if(keyCodeArry[i]==37){
|
|
tmp_keyleft_state=1;
|
|
}
|
|
if(keyCodeArry[i]==39){
|
|
tmp_keyright_state=1;
|
|
}
|
|
if(keyCodeArry[i]==87){
|
|
tmp_keyw_state=1;
|
|
}
|
|
if(keyCodeArry[i]==83){
|
|
tmp_keys_state=1;
|
|
}
|
|
}
|
|
keyup_state=tmp_keyup_state;
|
|
keydown_state=tmp_keydown_state;
|
|
keyleft_state=tmp_keyleft_state;
|
|
keyright_state=tmp_keyright_state;
|
|
keyw_state=tmp_keyw_state;
|
|
keys_state=tmp_keys_state;
|
|
console.log("up:"+keyup_state+" down:"+keydown_state+" left:"+keyleft_state+" right:"+keyright_state+" w:"+keyw_state+" s:"+keys_state);
|
|
|
|
if(keyup_state==1)UP_keydown();
|
|
else UP_keyup();
|
|
if(keydown_state==1)DOWN_keydown();
|
|
else DOWN_keyup();
|
|
if(keyleft_state==1)LEFT_keydown();
|
|
else LEFT_keyup();
|
|
if(keyright_state==1)RIGHT_keydown();
|
|
else RIGHT_keyup();
|
|
if(keyw_state==1)W_keydown();
|
|
else W_keyup();
|
|
if(keys_state==1)S_keydown();
|
|
else S_keyup();
|
|
|
|
var str="RC:"+RC_Enable+";"+keyup_state+";"+keydown_state+";"+keyleft_state+";"+keyright_state+";"+keyw_state+";"+keys_state+";"+joy_Enable+"#";
|
|
rc_client_request(str);
|
|
}
|
|
|
|
var T1 = window.setInterval("Timer()",50);
|
|
|
|
function UP_keydown(){
|
|
document.getElementById("UP").style.background="red";
|
|
}
|
|
function UP_keyup(){
|
|
document.getElementById("UP").style.background="white";
|
|
}
|
|
|
|
function DOWN_keydown(){
|
|
document.getElementById("DOWN").style.background="red";
|
|
}
|
|
function DOWN_keyup(){
|
|
document.getElementById("DOWN").style.background="white";
|
|
}
|
|
function LEFT_keydown(){
|
|
document.getElementById("LEFT").style.background="red";
|
|
}
|
|
function LEFT_keyup(){
|
|
document.getElementById("LEFT").style.background="white";
|
|
}
|
|
function RIGHT_keydown(){
|
|
document.getElementById("RIGHT").style.background="red";
|
|
}
|
|
function RIGHT_keyup(){
|
|
document.getElementById("RIGHT").style.background="white";
|
|
}
|
|
function W_keydown(){
|
|
document.getElementById("W").style.background="red";
|
|
}
|
|
function W_keyup(){
|
|
document.getElementById("W").style.background="white";
|
|
}
|
|
function S_keydown(){
|
|
document.getElementById("S").style.background="red";
|
|
}
|
|
function S_keyup(){
|
|
document.getElementById("S").style.background="white";
|
|
}
|
|
function HMI_RCCtrl_Enable(enable){
|
|
RC_Enable=enable;
|
|
if(RC_Enable==true)joy_Enable=false;
|
|
}
|
|
function HMI_joyCtrl_Enable(enable){
|
|
joy_Enable=enable;
|
|
if(joy_Enable==true)RC_Enable=false;
|
|
}
|
|
</script>
|
|
|
|
<body>
|
|
<tr>
|
|
<input type=button class="btn" value="RC控制使能" style="height:50px;background:#FD4F00FF" onclick=HMI_RCCtrl_Enable(true)></input>
|
|
|
|
<input type=button class="btn" value="RC控制关闭" style="height:50px;background:#FD4F00FF" onclick=HMI_RCCtrl_Enable(false)></input>
|
|
</tr>
|
|
<tr>
|
|
<input type=button class="btn" value="joy控制使能" style="height:50px;background:#FD4F00FF" onclick=HMI_joyCtrl_Enable(true)></input>
|
|
|
|
<input type=button class="btn" value="joy控制关闭" style="height:50px;background:#FD4F00FF" onclick=HMI_joyCtrl_Enable(false)></input>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label id="UP">up</label>
|
|
</td>
|
|
<td>
|
|
<label id="DOWN">down</label>
|
|
</td>
|
|
<td>
|
|
<label id="LEFT">left</label>
|
|
</td>
|
|
<td>
|
|
<label id="RIGHT">right</label>
|
|
</td>
|
|
<td>
|
|
<label id="W">W</label>
|
|
</td>
|
|
<td>
|
|
<label id="S">S</label>
|
|
</td>
|
|
</tr>
|
|
<br>
|
|
<!--
|
|
<br>
|
|
<canvas id="canvas" width="200" height="200" style="border:solid black 1px;">
|
|
Your browser does not support canvas element.
|
|
</canvas>
|
|
|
|
<br>
|
|
<br>
|
|
Log: <pre id="log" style="border: 1px solid #ccc;"></pre>
|
|
<script type="text/javascript">
|
|
document.body.onload = startup; //文档加载完毕触发
|
|
|
|
var ongoingTouches = new Array(); //用来保存跟踪正在发送的触摸事件
|
|
|
|
//设置事件处理程序
|
|
function startup() {
|
|
var el = document.getElementsByTagName("canvas")[0];
|
|
el.addEventListener("touchstart", handleStart, false);
|
|
el.addEventListener("touchend", handleEnd, false);
|
|
el.addEventListener("touchcancel", handleCancel, false);
|
|
el.addEventListener("touchleave", handleEnd, false);
|
|
el.addEventListener("touchmove", handleMove, false);
|
|
|
|
log("initialized.");
|
|
}
|
|
|
|
|
|
//处理触摸开始事件
|
|
function handleStart(evt) {
|
|
evt.preventDefault(); //阻止事件的默认行为
|
|
log("touchstart.");
|
|
var el = document.getElementsByTagName("canvas")[0];
|
|
el.style.background="green";
|
|
var ctx = el.getContext("2d");
|
|
var touches = evt.changedTouches;
|
|
|
|
for (var i=0; i < touches.length; i++) {
|
|
log("touchstart:"+i+"...");
|
|
ongoingTouches.push(copyTouch(touches[i]));
|
|
var color = colorForTouch(touches[i]);
|
|
ctx.beginPath();
|
|
ctx.arc(touches[i].pageX, touches[i].pageY, 4, 0,2*Math.PI, false); // a circle at the start
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
log("touchstart:"+i+".");
|
|
}
|
|
}
|
|
|
|
//处理触摸移动事件
|
|
function handleMove(evt) {
|
|
evt.preventDefault();
|
|
var el = document.getElementsByTagName("canvas")[0];
|
|
var ctx = el.getContext("2d");
|
|
var touches = evt.changedTouches;
|
|
|
|
for (var i=0; i < touches.length; i++) {
|
|
var color = colorForTouch(touches[i]);
|
|
var idx = ongoingTouchIndexById(touches[i].identifier);
|
|
|
|
if(idx >= 0) {
|
|
log("continuing touch "+idx);
|
|
ctx.beginPath();
|
|
log("ctx.moveTo("+ongoingTouches[idx].pageX+", "+ongoingTouches[idx].pageY+");");
|
|
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
|
|
log("ctx.lineTo("+touches[i].pageX+", "+touches[i].pageY+");");
|
|
ctx.lineTo(touches[i].pageX, touches[i].pageY);
|
|
ctx.lineWidth = 4;
|
|
ctx.strokeStyle = color;
|
|
ctx.stroke();
|
|
|
|
ongoingTouches.splice(idx, 1, copyTouch(touches[i])); // swap in the new touch record
|
|
log(".");
|
|
} else {
|
|
log("can't figure out which touch to continue");
|
|
}
|
|
}
|
|
}
|
|
|
|
//处理触摸结束事件
|
|
function handleEnd(evt) {
|
|
evt.preventDefault();
|
|
log("touchend/touchleave.");
|
|
var el = document.getElementsByTagName("canvas")[0];
|
|
el.style.background="white";
|
|
var ctx = el.getContext("2d");
|
|
var touches = evt.changedTouches;
|
|
|
|
for (var i=0; i < touches.length; i++) {
|
|
var color = colorForTouch(touches[i]);
|
|
var idx = ongoingTouchIndexById(touches[i].identifier);
|
|
|
|
if(idx >= 0) {
|
|
ctx.lineWidth = 4;
|
|
ctx.fillStyle = color;
|
|
ctx.beginPath();
|
|
ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
|
|
ctx.lineTo(touches[i].pageX, touches[i].pageY);
|
|
ctx.fillRect(touches[i].pageX-4, touches[i].pageY-4, 8, 8); // and a square at the end
|
|
ongoingTouches.splice(idx, 1); // remove it; we're done
|
|
} else {
|
|
log("can't figure out which touch to end");
|
|
}
|
|
}
|
|
}
|
|
|
|
//处理触摸对出事件
|
|
function handleCancel(evt) {
|
|
evt.preventDefault();
|
|
log("touchcancel.");
|
|
var touches = evt.changedTouches;
|
|
|
|
for (var i=0; i < touches.length; i++) {
|
|
ongoingTouches.splice(i, 1); // remove it; we're done
|
|
}
|
|
}
|
|
|
|
//选择颜色
|
|
function colorForTouch(touch) {
|
|
var r = touch.identifier % 16;
|
|
var g = Math.floor(touch.identifier / 3) % 16;
|
|
var b = Math.floor(touch.identifier / 7) % 16;
|
|
r = r.toString(16); // make it a hex digit
|
|
g = g.toString(16); // make it a hex digit
|
|
b = b.toString(16); // make it a hex digit
|
|
var color = "#" + r + g + b;
|
|
log("color for touch with identifier " + touch.identifier + " = " + color);
|
|
return color;
|
|
}
|
|
|
|
//拷贝一个触摸对象
|
|
function copyTouch(touch) {
|
|
return { identifier: touch.identifier, pageX: touch.pageX, pageY: touch.pageY };
|
|
}
|
|
|
|
//找出正在进行的触摸
|
|
function ongoingTouchIndexById(idToFind) {
|
|
for (var i=0; i < ongoingTouches.length; i++) {
|
|
var id = ongoingTouches[i].identifier;
|
|
|
|
if (id == idToFind) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1; // not found
|
|
}
|
|
|
|
//记录日志
|
|
function log(msg) {
|
|
var p = document.getElementById('log');
|
|
p.innerHTML = msg + "\n" + p.innerHTML;
|
|
}
|
|
</script>
|
|
-->
|
|
</body>
|
|
|
|
</html> |