From 82678438ebd1ec6232cc77587b0db2d8995c286f Mon Sep 17 00:00:00 2001 From: frinklai Date: Mon, 27 May 2019 12:59:14 +0800 Subject: [PATCH] add required tools --- ui/web/css/RangeStyle.css | 174 ++++++++++++++++++++++++ ui/web/css/form.css | 87 ++++++++++++ ui/web/css/manual.css | 71 ++++++++++ ui/web/css/param.css | 83 +++++++++++ ui/web/css/vision.css | 67 +++++++++ ui/web/js/lib/CloseCenterRightButton.js | 21 +++ ui/web/js/lib/CloseReverseOut.js | 18 +++ ui/web/js/lib/KeyboardControl.js | 141 +++++++++++++++++++ ui/web/js/lib/fa-keyboard-button.js | 0 9 files changed, 662 insertions(+) create mode 100644 ui/web/css/RangeStyle.css create mode 100644 ui/web/css/form.css create mode 100644 ui/web/css/manual.css create mode 100644 ui/web/css/param.css create mode 100644 ui/web/css/vision.css create mode 100644 ui/web/js/lib/CloseCenterRightButton.js create mode 100644 ui/web/js/lib/CloseReverseOut.js create mode 100644 ui/web/js/lib/KeyboardControl.js create mode 100644 ui/web/js/lib/fa-keyboard-button.js diff --git a/ui/web/css/RangeStyle.css b/ui/web/css/RangeStyle.css new file mode 100644 index 0000000..4819d41 --- /dev/null +++ b/ui/web/css/RangeStyle.css @@ -0,0 +1,174 @@ +/*========================Bar=============================*/ +input[type=range] { + -webkit-appearance: none; + width: 100%; + margin: 11.3px 0; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -11.5px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #367ebd; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-moz-range-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-fill-upper { + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + height: 8.4px; +} +input[type=range]:focus::-ms-fill-lower { + background: #3071a9; +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +} +input[type=range] { + -webkit-appearance: none; + width: 100%; + margin: 11.3px 0; +} +input[type=range]:focus { + outline: none; +} +input[type=range]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-webkit-slider-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -11.5px; +} +input[type=range]:focus::-webkit-slider-runnable-track { + background: #367ebd; +} +input[type=range]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + background: #3071a9; + border-radius: 1.3px; + border: 0.2px solid #010101; +} +input[type=range]::-moz-range-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; +} +input[type=range]::-ms-track { + width: 100%; + height: 8.4px; + cursor: pointer; + background: transparent; + border-color: transparent; + color: transparent; +} +input[type=range]::-ms-fill-lower { + background: #2a6495; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-fill-upper { + background: #3071a9; + border: 0.2px solid #010101; + border-radius: 2.6px; + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; +} +input[type=range]::-ms-thumb { + box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; + border: 1px solid #000000; + height: 31px; + width: 16px; + border-radius: 3px; + background: #ffffff; + cursor: pointer; + height: 8.4px; +} +input[type=range]:focus::-ms-fill-lower { + background: #3071a9; +} +input[type=range]:focus::-ms-fill-upper { + background: #367ebd; +} + + +/*==================================================================*/ diff --git a/ui/web/css/form.css b/ui/web/css/form.css new file mode 100644 index 0000000..246cc45 --- /dev/null +++ b/ui/web/css/form.css @@ -0,0 +1,87 @@ +.Overflow { + /* margin: 0; + padding: 0; + /*-moz-background-size: cover;*/ + /* background-size: 40%; + height: 1080px; + width: auto;*/ + overflow-y: hidden; + overflow-x: hidden; +} + + +/*===========================================*/ + +/* UI form*/ + +.UI_Background { + background-color: rgba(255, 255, 255, 0.3); + background-size: cover; +} + +.UI_Size { + position: relative; + height: 900px; + width: 1300px; +} + +.UI_BodySize { + height: 800px; +} +/*===========================================*/ +/* UI wifi */ +#WifiButton { + position: absolute; + top: 1.5%; + right: 5%; + text-align: center; +} + +#WifiButton-style { + color: rgba(255, 0, 0, 1); + background-color: rgb(0, 217, 255); + border-radius: 20px; + border: 1px solid rgba(0, 0, 0, .2); +} + +.WifiContent-style { + position: relative; + background-color: #FFFFFF; + -webkit-background-clip: padding-box; + background-clip: padding-box; + border: 1px solid #999; + /* border: 1px solid rgba(0, 0, 0, .2); */ + border-radius: 6px; + outline: 0; + -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); + box-shadow: 0 3px 9px rgba(0, 0, 0, .5); +} +/*===========================================*/ + + +/* UI title */ + +/*===========================================*/ + + +/* UI body */ + +#body_base{ + width: 100%; + height: 100%; +} + +#param_base{ + width: 20%; + text-align: center; +} +#vision_base{ + width: 55%; + text-align: center; +} +#manual_base{ + width: 25%; + text-align: center; +} + +/*===========================================*/ \ No newline at end of file diff --git a/ui/web/css/manual.css b/ui/web/css/manual.css new file mode 100644 index 0000000..3d39f06 --- /dev/null +++ b/ui/web/css/manual.css @@ -0,0 +1,71 @@ +/*===========================================*/ +/* main form */ + +#manual_table{ + width: 100%; + height: 100%; + background-color: #67efd8; +} + +#Mdisplay_tr{ + width: 100%; + height: 44%; + /* background-color: #67efd8; */ +} + +#Mbutton_tr{ + width: 100%; + height: 10%; + /* background-color: #a267ef; */ +} + +#Mspeed_tr{ + width: 100%; + height: 10%; + /* background-color: #e1ef67; */ +} + +#Mjoystick_tr{ + width: 100%; + height: 36%; + /* background-color: #7067ef; */ +} + +/*===========================================*/ +/* state */ +#robot_state{ + +} + +/*===========================================*/ +/* button */ +#Mbutton_table{ + width: 100%; + height: 100%; +} +/*===========================================*/ +/* speed */ +#Mspeed_table{ + width: 100%; + height: 100%; +} +/*===========================================*/ +/* joy stick */ +#Joystick { + position: relative; + bottom: 5%; + left: 12%; + width: 250px; + height: 250px; + z-index: 1; + border-radius: 250px; + /*border-style: dashed;*/ + border-color: rgba(255, 255, 255, 0.5); + background-color: rgb(255, 255, 255); + cursor: crosshair; +} + +#Joystick_Canvas { + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/ui/web/css/param.css b/ui/web/css/param.css new file mode 100644 index 0000000..c767263 --- /dev/null +++ b/ui/web/css/param.css @@ -0,0 +1,83 @@ +#param_table{ + width: 100%; + height: 100%; + background-color: #67efd8; +} + +#Pbutton_tr{ + width: 100%; + height: 20%; +} + + + +/*===========================================*/ +/* button */ +#Pbutton_table{ + width: 90%; + height: 100%; +} + +/*===========================================*/ +/* setting */ +#param_setting{ + width: 100%; + height: 100%; + border: 1px solid rgba(0, 0, 0, .2); +} +#scan_setting{ + width: 100%; + height: 100%; +} +#qrcode_setting{ + width: 100%; + height: 100%; +} +#strategy_setting{ + width: 100%; + height: 100%; +} +.param_table{ + width: 100%; + height: 100%; +} +.param_label{ + font-size: 150%; +} +/* ------------------------------------------ */ +.scan_param_tr{ + width: 100%; + height: 10%; +} +/* ------------------------------------------ */ +/* strategy_setting */ +.strategy_label_tr{ + width: 100%; + height: 5%; +} +.strategy_button_tr{ + width: 100%; + height: 10%; +} +.strategy_param_tr{ + width: 100%; + height: 35%; +} +.strategy_param_div{ + width: 100%; + height: 100%; + overflow: auto; +} +.strategy_param_td1{ + width: 30%; + height: 100%; +} +.strategy_param_td2{ + width: 30%; + height: 100%; +} + +.strategy_param_input{ + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/ui/web/css/vision.css b/ui/web/css/vision.css new file mode 100644 index 0000000..36ebfd1 --- /dev/null +++ b/ui/web/css/vision.css @@ -0,0 +1,67 @@ +#vision_table{ + width: 100%; + height: 100%; + background-color: #67b2ef; +} + +/* #Pbutton_tr{ + width: 100%; + height: 20%; +} */ + +/*===========================================*/ +/* decide */ +#decide_display{ + width: 100%; + height: 15%; + text-align: center; +} + +#decide_window { + position: absolute; + top: 3%; + left: 22.8%; + height: 120px; + width: 640px; + background-color: rgba(0, 0, 0); +} + +#decide_player { + height: 100%; + width: 100%; +} + +/*===========================================*/ +/* image */ +#image_display{ + width: 100%; + height: 70%; + text-align: center; +} + +#image_window { + position: relative; + top: 0%; + left: 3.7%; + height: 480px; + width: 640px; + background-color: rgba(0, 0, 0); +} + +#image_player { + height: 100%; + width: 100%; +} + +/*===========================================*/ +/* state */ +#state_manager{ + width: 100%; + height: 15%; + text-align: center; +} + +#state_button_table{ + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/ui/web/js/lib/CloseCenterRightButton.js b/ui/web/js/lib/CloseCenterRightButton.js new file mode 100644 index 0000000..bac1411 --- /dev/null +++ b/ui/web/js/lib/CloseCenterRightButton.js @@ -0,0 +1,21 @@ +function blockMenu(Evt) { + // window.event 是IE才有的物件 + if (window.event) { + Evt = window.event; + Evt.returnValue = false; //取消IE預設事件 + } else + Evt.preventDefault(); //取消DOM預設事件 +} + +function lock(Evt) { + // window.event 是IE才有的物件 + if (Evt.type == "mousedown") { + if (Evt.button == 1) { + return false; + } + // 擋 IE 按下 F1 鈕時會觸發的 onhelp 事件 + } +} + +document.oncontextmenu = blockMenu; +document.onmousedown = lock; diff --git a/ui/web/js/lib/CloseReverseOut.js b/ui/web/js/lib/CloseReverseOut.js new file mode 100644 index 0000000..12ed6b0 --- /dev/null +++ b/ui/web/js/lib/CloseReverseOut.js @@ -0,0 +1,18 @@ + var omitformtags = ["input", "textarea", "select"] + omitformtags = omitformtags.join("|") + + function disableselect(e) { + if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) + return false + } + + function reEnable() { + return true + } + + if (typeof document.onselectstart != "undefined") + document.onselectstart = new Function("return false") + else { + document.onmousedown = disableselect + document.onmouseup = reEnable + } diff --git a/ui/web/js/lib/KeyboardControl.js b/ui/web/js/lib/KeyboardControl.js new file mode 100644 index 0000000..ae225fb --- /dev/null +++ b/ui/web/js/lib/KeyboardControl.js @@ -0,0 +1,141 @@ + +window.addEventListener("keydown", keysdown, false); +window.addEventListener("keyup", keyuped, false); + +var keys = []; +var start; + +function KeyboardState(state) { + start = state; +} + +document.getElementById("manual_keyboard").addEventListener("click", function(){ + var checked = document.getElementById("manual_keyboard_checked").checked; + if(checked){ + this.style.cssText="color:#efbf67;"; + KeyboardState(checked); + }else{ + this.style.cssText="color:#000000;"; + KeyboardState(checked); + } +}); + +function keysdown(e) { + if (start == true) { + var vec3; + var speed = document.getElementById("SpeedInput").value; + keys[e.keyCode] = true; + + //RobotControl + if (keys[87] && keys[68]) { + vec3 = new ROSLIB.Message({ + x: parseFloat(speed / Math.pow(2, 0.5)), + y: parseFloat(speed / Math.pow(2, 0.5)), + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[87] && keys[65]) { + vec3 = new ROSLIB.Message({ + x: -parseFloat(speed / Math.pow(2, 0.5)), + y: parseFloat(speed / Math.pow(2, 0.5)), + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[83] && keys[68]) { + vec3 = new ROSLIB.Message({ + x: parseFloat(speed / Math.pow(2, 0.5)), + y: -parseFloat(speed / Math.pow(2, 0.5)), + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[83] && keys[65]) { + vec3 = new ROSLIB.Message({ + x: -parseFloat(speed / Math.pow(2, 0.5)), + y: -parseFloat(speed / Math.pow(2, 0.5)), + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[87]) { + vec3 = new ROSLIB.Message({ + x: 0, + y: parseFloat(speed), + z: 0 + }); + Robot_Vel(vec3); + // Robot_Vel(vec3); + } else if (keys[68]) { + vec3 = new ROSLIB.Message({ + x: parseFloat(speed), + y: 0, + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[83]) { + vec3 = new ROSLIB.Message({ + x: 0, + y: -parseFloat(speed), + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[65]) { + vec3 = new ROSLIB.Message({ + x: -parseFloat(speed), + y: 0, + z: 0 + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[69]) { + if (speed > 30) + speed = speed * 0.5; + vec3 = new ROSLIB.Message({ + x: 0, + y: 0, + z: -parseFloat(speed) + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } else if (keys[81]) { + if (speed > 30) + speed = speed * 0.5; + vec3 = new ROSLIB.Message({ + x: 0, + y: 0, + z: parseFloat(speed) + }); + Robot_Vel(vec3); + //Robot_Vel(vec3); + } + + } +} + +function releasebutton() { + // var vec3 = new ROSLIB.Message({ + // x: 0, + // y: 0, + // z: 0 + // }); + // Robot_Vel(vec3); + // Robot_Vel(vec3); + Robot_Stop(); + Robot_Stop(); +} + +function keyuped(e) { + if (start) { + if (keys[81] == true) releasebutton(); + else if (keys[69] == true) releasebutton(); + else if (keys[87] == true) releasebutton(); + else if (keys[65] == true) releasebutton(); + else if (keys[83] == true) releasebutton(); + else if (keys[68] == true) releasebutton(); + keys[e.keyCode] = false; + } +} diff --git a/ui/web/js/lib/fa-keyboard-button.js b/ui/web/js/lib/fa-keyboard-button.js new file mode 100644 index 0000000..e69de29