added images

5 years ago · 088bb10805
parent a18d6e0599
commit 088bb10805
4 changed files with 49 additions and 15 deletions
--- a/img/robot.png
+++ b/img/robot.png
--- a/img/station.png
+++ b/img/station.png
--- a/index.html
+++ b/index.html
@ -21,28 +21,23 @@
  <body>
    <div id="app">
      <v-stage ref="stage" :config="stage_config">
-        <!-- <v-layer ref="local_layer" :config="local_layer">
-          <v-group ref="map_group" :config="map_config">
-            <v-rect v-for="(t_type, idx) in maze.map.flat()" :config="get_tile_config(idx, t_type, true)" :key="idx"></v-rect>
-            <v-regular-polygon :config="agent_config"></v-regular-polygon>
-          </v-group>
-        </v-layer> -->
        <v-layer ref="map_layer">
          <v-group ref="mini_map_group" :config="mini_map_config">
-            <!-- <v-group ref="grid_group">
-              <v-line v-for="y in maze.height+1" :config="get_grid_line_config(y-1, true)"></v-line>
-              <v-line v-for="x in maze.width+1" :config="get_grid_line_config(x-1)"></v-line>
-            </v-group> -->
-            <v-rect v-for="(t_type, idx) in maze.map.flat()" :config="get_tile_config(idx, t_type)" :key="idx" ></v-rect>
+            <v-group v-for="(t_type, idx) in maze.map.flat()" :config="get_field_config(idx)">
+              <v-rect :config="get_tile_config(idx, t_type)"></v-rect>
+              <v-image :config="energy_config" v-if="t_type==tile"></v-image>
+            </v-group>
            <v-group v-for="(action,idx) in q_table" :config="get_field_config(idx)">
              <v-shape v-for="(value, key) in action" :config="get_triangle_config(value, key)"></v-shape>
              <v-text v-for="i in 4" :config="get_q_text_config(action,i)"></v-text>
            </v-group>
-            <v-regular-polygon :config="agent_config"></v-regular-polygon>
+            <v-image :config="robot_config"></v-image>
          </v-group>
        </v-layer>
      </v-stage>
+
      <line-chart css-classes="plot" :chart-data="datacollection" :options="plot_options"></line-chart>
+
      <div class="sliders">
        <h1>Learning Rate {{learning_rate}}</h1>
        <vue-slider v-model="learning_rate" :drag-on-click="true" v-bind="slider_config"></vue-slider>
--- a/js/view.js
+++ b/js/view.js
@ -82,7 +82,9 @@ app = new Vue({
      duration: 0,
      interval: 0.01,
      tooltip: 'none'
-    }
+    },
+    robot_image: null,
+    energy_image: null,
  },
  created() {
    // Resize handler
@ -130,6 +132,21 @@ app = new Vue({
      }
    });
    machine.score_history = s;
+
+    const robot_image = new window.Image();
+    robot_image.src = "img/robot.png";
+    // robot_image.src = "https://konvajs.org/assets/yoda.jpg";
+    robot_image.onload = () => {
+      // set image only when it is loaded
+      this.robot_image = robot_image;
+    };
+    const energy_image = new window.Image();
+    energy_image.src = "img/station.png";
+    // energy_image.src = "https://konvajs.org/assets/yoda.jpg";
+    energy_image.onload = () => {
+      // set image only when it is loaded
+      this.energy_image = energy_image;
+    };
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
@ -227,6 +244,26 @@ app = new Vue({
        y: this.base_size * this.state.y,
      }
    },
+    robot_config: function() {
+      return {
+        height: this.base_size,
+        width: this.base_size,
+        x: this.base_size * this.state.x,
+        y: this.base_size * this.state.y,
+        image: this.robot_image,
+      }
+    },
+    energy_config: function() {
+      return {
+        height: this.base_size,
+        width: this.base_size,
+        offset: {
+          x: this.base_size/2,
+          y: this.base_size/2
+        },
+        image: this.energy_image,
+      }
+    },
    base_size: function() {
      return Math.min(this.stage_config.height * 0.8 / this.maze.height, this.stage_config.width * 0.5 / this.maze.width);
    },
@ -427,12 +464,14 @@ app = new Vue({
        }
      }
      const layout = {
-        x: this.base_size * pos.x,
-        y: this.base_size * pos.y,
        width: this.base_size,
        height: this.base_size,
        stroke: '#ddd',
        strokeWidth: this.strokeW,
+        offset: {
+          x: this.base_size/2,
+          y: this.base_size/2,
+        }
      };
      switch (t_type) {
        case tile.regular: