Niko/InteractiveBODm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

preparation for 2d policy

Browse Source
This commit is contained in:
Niko Feith 2023-08-18 16:21:38 +02:00
parent b4e9c27b85
commit d92b84b53f
3 changed files with 97 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
InteractiveBO/src/components/SubLayout.vue
View File

@ -1,20 +1,20 @@
<template>
<v-container fluid class="sub-layout">
<v-row no-gutters>
<v-col cols="12" md="8">
<v-row no-gutters>
<v-col cols="8">
<v-col>
<v-row no-gutters justify="start" cols="8">
<v-col :style="{ flexGrow: 0 }">
<v-card
class="tile"
:style="{ height: 'calc(60vh - 24px)', width: '100%' }"
:style="{ height: squaredSize, width: squaredSize }"
>
<policy-plot />
</v-card>
</v-col>
<v-col cols="4">
<v-col :style="{ flexGrow: 0 }" cols="4">
<v-card
class="tile"
:style="{ height: 'calc(60vh - 24px)', width: '100%' }"
:style="{ height: squaredSize, width: '20vh' }"
>
<weight-tuner-vertical />
</v-card>
@ -22,12 +22,12 @@
<v-col cols="8">
<v-card
class="tile"
:style="{ height: 'calc(20vh - 24px)', width: '100%' }"
:style="{ height: 'calc(20vh - 24px)', width: squaredSize }"
>
<weight-tuner />
</v-card>
</v-col>
<v-col cols="12">
<v-col>
<v-card
class="tile"
:style="{ height: 'calc(20vh - 24px)', width: '100%' }"
@ -68,6 +68,27 @@ import PolicyPlot from "@/components/PolicyPlot.vue";
import ControlPanel from "@/components/ControlPanel.vue";
import RLCanvas from "@/components/RLCanvas.vue";
import WeightTunerVertical from "@/components/WeightTunerVertical.vue";
import { ref, computed } from "vue";
const viewportHeight = ref(window.innerHeight);
const viewportWidth = ref(window.innerWidth);
// Update the viewportWidth on resize
window.addEventListener("resize", () => {
viewportHeight.value = window.innerHeight;
});
window.addEventListener("resize", () => {
viewportWidth.value = window.innerWidth;
});
const squaredSize = computed(() => {
const vhSize = viewportWidth.value * 0.4 - 64 + "px";
const vwSize = viewportHeight.value * 0.65 - 68 + "px"; // 8/12 of viewport width
console.log(vhSize, vwSize);
return `min(${vhSize}, ${vwSize})`;
});
</script>
<style scoped>

20
InteractiveBO/src/components/WeightTuner.vue
View File

@ -1,10 +1,10 @@
<template>
<v-row no-gutters justify="center" class="weight-tuner">
<v-row no-gutters justify="center" class="h-weight-tuner">
<!-- eslint-disable-next-line -->
<v-col v-for="(_ , idx) in weights" :key="idx">
<div class="weight-container">
<div class="h-weight-container">
<vue-slider
class="slider-margin-bottom"
class="h-slider-margin-bottom"
v-model="weights[idx]"
@change="updateWeight(idx, $event)"
direction="btt"
@ -14,7 +14,7 @@
:interval="0.01"
/>
<v-checkbox
class="ma-0 checkbox-bottom"
class="ma-0 h-checkbox-bottom"
v-model="store.weights_fixed[idx]"
/>
</div>
@ -28,10 +28,8 @@ import { usePStore } from "@/store/PolicyStore";
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import { computed } from "vue";
import { useCStore } from "@/store/ControlStore";
const store = usePStore();
const cstore = useCStore();
const weights = computed({
get: () => store.weights,
@ -47,22 +45,20 @@ const updateWeight = (index, newValue) => {
</script>
<style scoped>
.weight-tuner {
.h-weight-tuner {
height: 140px;
}
.weight-container {
.h-weight-container {
height: 180px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.slider-margin-bottom {
.h-slider-margin-bottom {
margin-bottom: 0; /* adjust this value as necessary */
}
.checkbox-bottom {
//position: absolute;
//bottom: 0;
.h-checkbox-bottom {
padding: 5px 0 0 0;
}
</style>

71
InteractiveBO/src/components/WeightTunerVertical.vue
View File

@ -1,18 +1,33 @@
<template>
<v-row no-gutters class="vertical-tuner">
<v-row no-gutters justify="center" class="v-weight-tuner">
<!-- eslint-disable-next-line -->
<v-col v-for="(_ , idx) in weights" :key="idx" class="tuner-item">
<v-col v-for="(_ , idx) in weights" :key="idx"
class="v-column"
:style="{ height: `calc(100% / ${nrweights})` }"
>
<div class="v-weight-container">
<v-row no-gutters justify="space-between">
<v-col class="v-column-content">
<vue-slider
class="slider"
class="v-slider-margin-bottom"
v-model="weights[idx]"
@change="updateWeight(idx, $event)"
direction="ltr"
:width="100"
:min="-1"
:max="1"
:interval="0.01"
:style="{}"
/>
<v-checkbox class="ma-0 checkbox" v-model="store.weights_fixed[idx]" />
</v-col>
<v-col class="v-column-content" :style="{ flexGrow: 0 }">
<v-checkbox
density="compact"
class="ma-0 v-checkbox-bottom"
v-model="store.weights_fixed[idx]"
/>
</v-col>
</v-row>
</div>
</v-col>
</v-row>
</template>
@ -23,10 +38,10 @@ import { usePStore } from "@/store/PolicyStore";
import VueSlider from "vue-slider-component";
import "vue-slider-component/theme/default.css";
import { computed } from "vue";
import { useCStore } from "@/store/ControlStore";
const store = usePStore();
const cstore = useCStore();
const nrweights = computed(() => store.nr_weights);
const weights = computed({
get: () => store.weights,
@ -42,29 +57,39 @@ const updateWeight = (index, newValue) => {
</script>
<style scoped>
.vertical-tuner {
.v-weight-tuner {
width: 100%;
height: 100%;
transform: rotate(90deg);
//transform-origin: bottom left;
margin-left: 10px;
}
.v-column {
margin: 0 !important;
padding: 0 !important;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.tuner-item {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-90deg);
transform-origin: center;
}
.slider {
margin-right: 10px;
.v-column-content {
}
.checkbox {
padding: 0;
.v-weight-container {
width: 100%;
}
.v-slider-margin-bottom {
margin-bottom: 0;
width: 140px !important;
align-self: center;
padding-top: 12% !important;
}
.v-checkbox-bottom {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
min-height: 0;
}
</style>