Yugon
/
RL_exhibit
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added images

Browse Source
development
Ugo Finnendahl 5 years ago
parent a18d6e0599
commit 088bb10805
4 changed files with 49 additions and 15 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      img/robot.png
  2. BIN
      img/station.png
  3. 19
      index.html
  4. 45
      js/view.js

BIN
img/robot.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
img/station.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

19
index.html
Unescape View File

@ -21,28 +21,23 @@
<body> <body>
<div id="app"> <div id="app">
<v-stage ref="stage" :config="stage_config"> <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-layer ref="map_layer">
<v-group ref="mini_map_group" :config="mini_map_config"> <v-group ref="mini_map_group" :config="mini_map_config">
<!-- <v-group ref="grid_group"> <v-group v-for="(t_type, idx) in maze.map.flat()" :config="get_field_config(idx)">
<v-line v-for="y in maze.height+1" :config="get_grid_line_config(y-1, true)"></v-line> <v-rect :config="get_tile_config(idx, t_type)"></v-rect>
<v-line v-for="x in maze.width+1" :config="get_grid_line_config(x-1)"></v-line> <v-image :config="energy_config" v-if="t_type==tile"></v-image>
</v-group> --> </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="(action,idx) in q_table" :config="get_field_config(idx)"> <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-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-text v-for="i in 4" :config="get_q_text_config(action,i)"></v-text>
</v-group> </v-group>
<v-regular-polygon :config="agent_config"></v-regular-polygon> <v-image :config="robot_config"></v-image>
</v-group> </v-group>
</v-layer> </v-layer>
</v-stage> </v-stage>
<line-chart css-classes="plot" :chart-data="datacollection" :options="plot_options"></line-chart> <line-chart css-classes="plot" :chart-data="datacollection" :options="plot_options"></line-chart>
<div class="sliders"> <div class="sliders">
<h1>Learning Rate {{learning_rate}}</h1> <h1>Learning Rate {{learning_rate}}</h1>
<vue-slider v-model="learning_rate" :drag-on-click="true" v-bind="slider_config"></vue-slider> <vue-slider v-model="learning_rate" :drag-on-click="true" v-bind="slider_config"></vue-slider>

45
js/view.js
Unescape View File

@ -82,7 +82,9 @@ app = new Vue({
duration: 0, duration: 0,
interval: 0.01, interval: 0.01,
tooltip: 'none' tooltip: 'none'
} },
robot_image: null,
energy_image: null,
}, },
created() { created() {
// Resize handler // Resize handler
@ -130,6 +132,21 @@ app = new Vue({
} }
}); });
machine.score_history = s; 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() { destroyed() {
window.removeEventListener('resize', this.handleResize) window.removeEventListener('resize', this.handleResize)
@ -227,6 +244,26 @@ app = new Vue({
y: this.base_size * this.state.y, 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() { base_size: function() {
return Math.min(this.stage_config.height * 0.8 / this.maze.height, this.stage_config.width * 0.5 / this.maze.width); 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 = { const layout = {
x: this.base_size * pos.x,
y: this.base_size * pos.y,
width: this.base_size, width: this.base_size,
height: this.base_size, height: this.base_size,
stroke: '#ddd', stroke: '#ddd',
strokeWidth: this.strokeW, strokeWidth: this.strokeW,
offset: {
x: this.base_size/2,
y: this.base_size/2,
}
}; };
switch (t_type) { switch (t_type) {
case tile.regular: case tile.regular:

Write Preview
Loading…
Cancel
Save