Add field component

RoboCup-SSL · Aug 15, 2018 · 52adf45 · 52adf45
1 parent a311332
commit 52adf45
Show file tree

Hide file tree

Showing 10 changed files with 276 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# ssl-vision-client
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "vue": "^2.5.17",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "vue-native-websocket": "^2.0.8"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.0.0",
@@ -25,9 +26,11 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "@vue/prettier"
+      "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "no-console": "off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }

diff --git a/public/index.html b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>ssl-vision-client</title>
   </head>
-  <body>
+  <body style="margin: 0">
     <noscript>
       <strong>We're sorry but ssl-vision-client doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -1,28 +1,32 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+    <div id="app">
+        <Field :field="field"/>
+    </div>
 </template>
 
 <script>
-import HelloWorld from "./components/HelloWorld.vue";
+    import Field from "./components/Field.vue";
 
-export default {
-  name: "app",
-  components: {
-    HelloWorld
-  }
-};
+    export default {
+        name: "app",
+        components: {
+            Field
+        },
+        computed: {
+            field() {
+                return this.$store.state.field;
+            }
+        }
+    };
 </script>
 
 <style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+    #app {
+        font-family: "Avenir", Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        height: 100vh;
+    }
 </style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/Field.vue b/src/components/Field.vue
@@ -0,0 +1,111 @@
+<template>
+    <svg class="field-canvas"
+         :viewBox="viewBox">
+
+        <!-- rotate field -->
+        <g :transform="getFieldTransformation">
+
+            <!-- draw field background -->
+            <rect :x="-(field.fieldLength/2+field.boundaryWidth)"
+                  :y="-(field.fieldWidth/2+field.boundaryWidth)"
+                  :width="field.fieldLength+field.boundaryWidth*2"
+                  :height="field.fieldWidth+field.boundaryWidth*2"
+                  :style="{fill: 'green', fillOpacity: 1, stroke: 'none'}"></rect>
+
+            <line v-for="(l,i) of field.lines"
+                  :key="'line-' + i"
+                  :x1="l.p1.x"
+                  :y1="l.p1.y"
+                  :x2="l.p2.x"
+                  :y2="l.p2.y"
+                  :style="[defStyle, l]">
+            </line>
+
+            <circle v-for="(a,i) of field.circles"
+                    :key="'circle-' + i"
+                    :cx="a.center.x"
+                    :cy="a.center.y"
+                    :r="a.radius"
+                    :style="[defStyle, a]">
+            </circle>
+
+            <path v-for="(p,i) of field.paths"
+                  :key="'path-' + i"
+                  :d="pathFromD(p.d)"
+                  :style="[defStyle, p]"></path>
+
+            <text v-for="(t,i) of field.texts"
+                  :key="'text-' + i"
+                  :x="t.p.x"
+                  :y="t.p.y"
+                  :dx="t.d.x"
+                  :dy="t.d.y"
+                  :textLength="t.textLength"
+                  :lengthAdjust="'spacingAndGlyphs'"
+                  :style="[defStyle, t]">
+                {{t.text}}
+            </text>
+        </g>
+    </svg>
+</template>
+
+<script>
+
+
+    export default {
+        name: "Field",
+        props: {
+            rotateField: {
+                type: Boolean,
+                default: false
+            },
+            defStyle: {
+                type: Object,
+                default: function () {
+                    return {
+                        strokeWidth: 10,
+                        stroke: 'white',
+                        fillOpacity: 0
+                    }
+                }
+            },
+            field: {
+                type: Object
+            }
+        },
+        computed: {
+            getFieldTransformation() {
+                if (this.rotateField) {
+                    return 'rotate(90) scale(' + (this.field.fieldWidth / this.field.fieldLength) + ')';
+                }
+                return '';
+            },
+            viewBox() {
+                return (-(this.field.fieldLength / 2 + this.field.boundaryWidth))
+                    + ' ' + (-(this.field.fieldWidth / 2 + this.field.boundaryWidth))
+                    + ' ' + (this.field.fieldLength + this.field.boundaryWidth * 2)
+                    + ' ' + (this.field.fieldWidth + this.field.boundaryWidth * 2);
+            },
+        },
+        methods: {
+            pathFromD: function (pd) {
+                let d = '';
+                for (let s of pd) {
+                    d += s.type;
+                    for (let a of s.args) {
+                        d += ' ' + a
+                    }
+                }
+                return d;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .field-canvas {
+        width: 100%;
+        height: 100%;
+        display: table-row;
+    }
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,10 +1,17 @@
 import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
+import VueNativeSock from 'vue-native-websocket'
 
 Vue.config.productionTip = false;
 
+Vue.use(VueNativeSock, 'ws://localhost:8081/api/vision', {
+    reconnection: true,
+    format: 'json',
+    store: store,
+});
+
 new Vue({
-  store,
-  render: h => h(App)
+    render: h => h(App),
+    store,
 }).$mount("#app");