add required tools

frinklai · May 27, 2019 · 8267843 · 8267843
1 parent 3bce51a
commit 8267843
Show file tree

Hide file tree

Showing 9 changed files with 662 additions and 0 deletions.
diff --git a/ui/web/css/RangeStyle.css 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
@@ -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;
+}
+
+/*===========================================*/
diff --git a/ui/web/css/manual.css 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%;
+}