Fix overflow in default and simulator shell

larsbaunwall · Feb 21, 2024 · 3e85a86 · 3e85a86
1 parent 95d5e6d
commit 3e85a86
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 54 deletions.
diff --git a/src/ui/index.html b/src/ui/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Tauri + Vue + TS</title>
+    <title>Beolyd5 interface</title>
   </head>
 
   <body>

diff --git a/src/ui/src/App.vue b/src/ui/src/App.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+
 </script>
 
 <template>
@@ -12,5 +13,7 @@
 </template>
 
 <style scoped>
-
+.container {
+  overflow: hidden;
+}
 </style>
diff --git a/src/ui/src/assets/vue.svg b/src/ui/src/assets/vue.svg
diff --git a/src/ui/src/assets/wheel.png b/src/ui/src/assets/wheel.png
diff --git a/src/ui/src/components/Shell.vue b/src/ui/src/components/Shell.vue
diff --git a/src/ui/src/main.ts b/src/ui/src/main.ts
@@ -14,8 +14,8 @@ import { listen } from "@tauri-apps/api/event";
 import { useUIStore } from "./stores/ui";
 import { translateToRange } from "./utils/arcs";
 import DeviceSim from "./views/DeviceSimulator.vue";
-import Bs5Shell from "./components/bs5-shell.vue";
-import Shell from "./components/Shell.vue";
+import Bs5Shell from "./views/bs5.vue";
+import Shell from "./views/Shell.vue";
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -27,9 +27,9 @@ const router = createRouter({
                 const shell = route.params.shell;
 
                 if(shell === 'sim') {
-                    return { component: DeviceSim };
+                    return { component: DeviceSim, shell: 'sim' };
                 } else {
-                    return { component: Bs5Shell };
+                    return { component: Bs5Shell, shell: 'default' };
                 }
             },
             children: [ 

diff --git a/src/ui/src/styles.css b/src/ui/src/styles.css
@@ -6,10 +6,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-  cursor: none;
 }
 
-.container, html, body {
+html, body {
   margin: 0;
   padding: 0;
   overflow: hidden;

diff --git a/src/ui/src/views/DeviceSimulator.vue b/src/ui/src/views/DeviceSimulator.vue
@@ -1,54 +1,91 @@
 <script setup lang="ts">
-import BS5Shell from "../components/bs5-shell.vue";
+import BS5Shell from "./bs5.vue";
 import BS5DebugOverlay from "../components/debug-overlay.vue";
+import {useUIStore} from "../stores/ui.ts";
+
+const uiStore = useUIStore();
 </script>
 
 <template>
-  <svg class="circle-svg">
-    <circle cx="1247" cy="487" r="240" fill="lightgray" />
-    <line x1="1017" y1="437" x2="1477" y2="437" stroke="gray" /> <!-- Adjusted this line -->
-    <line x1="1017" y1="537" x2="1477" y2="537" stroke="gray" /> <!-- Adjusted this line -->
-  </svg>
+  <div style="z-index: 10000; position: fixed; top: 0%; right: 0%; ">
+    <input type="number" v-model="uiStore.wheelPointerAngle" />
+    <input type="number" v-model="uiStore.volume" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 50px; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="150" max="210" step="0.001" v-model="uiStore.wheelPointerAngle" />
+  </div>
+  <div
+      style="z-index: 10000; position: fixed; top: 50%; right: 0px; ">
+    <input style="transform: translateY(-50%) rotate(270deg);" type="range" min="0" max="100" step="1" v-model="uiStore.volume" />
+  </div>
+<img id="wheel" src="../assets/wheel.png">
   <div class="controls">
     <button class="middle-button"><</button> <!-- Add this line -->
     <button class="middle-button">></button> <!-- Add this line -->
     <button class="middle-button">GO</button> <!-- Add this line -->
   </div>
-  <div class="debug-container">
-    <BS5DebugOverlay />
-    <BS5Shell />
+  <div id="simulator">
+    <div class="debug-container">
+      <BS5Shell />
+    </div>
   </div>
 </template>
-
 <style scoped>
-.circle-svg {
+#wheel {
   position: absolute;
-  width: 100%;
-  height: 100%;
-  z-index: 2000; /* To ensure the circle is on top */
+  top: 238px;
+  left: 1004px;
+  width: 500px;
+  height: 500px;
+  z-index: 1000;
 }
+
 .controls {
   display: flex;
   justify-content: space-between;
   position: absolute;
-  top: 452px; /* Position at the middle of the parent element */
-  left: 1047px; /* Position at the middle of the parent element */
-  width: 400px; /* Adjust as needed */
+  top: 469px; /* Position at the middle of the parent element */
+  left: 1057px; /* Position at the middle of the parent element */
+  width: 390px; /* Adjust as needed */
   z-index: 2500;
 }
 .middle-button {
   flex: 1; /* This will make the buttons take up equal space */
-  margin: 10px; /* Add some space between the buttons */
-  height: 50px;
+  margin: 2px; /* Add some space between the buttons */
+  height: 32px;
+  background-color: black;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+
+.middle-button:active {
+  animation: flashGray 300ms;
 }
+
+@keyframes flashGray {
+  0% { background-color: black; }
+  50% { background-color: #333; }
+  100% { background-color: black; }
+}
+
+
 .debug-container {
   border: 80px black solid;
   border-radius: 5px;
   width: 1024px; /* Adjust as needed */
   height: 768px; /* Adjust as needed */
   position: absolute; /* or relative, depending on your needs */
+  overflow: hidden;
+}
+
+#simulator {
+  position: relative;
+  width: 1400px; /* Adjust as needed */
+  height: 948px; /* Adjust as needed */
+  overflow: auto;
   top: 20px; /* Adjust as needed */
   left: 20px; /* Adjust as needed */
-  overflow: hidden;
 }
 </style>
diff --git a/src/ui/src/views/Shell.vue b/src/ui/src/views/Shell.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { defineProps } from 'vue';
+import Bs5Shell from "./bs5.vue";
+import { onMounted, onUnmounted, computed } from 'vue';
+
+const props = defineProps({
+  component: {
+    type: Object,
+    default: () => Bs5Shell,
+  },
+  shell: {
+    type: String,
+    default: 'default',
+  },
+});
+
+const isDefaultShell = computed(() => props.shell === 'default');
+
+onMounted(() => {
+  document.documentElement.style.overflow = isDefaultShell.value ? 'hidden' : 'auto';
+});
+
+onUnmounted(() => {
+  document.documentElement.style.overflow = 'auto';
+});
+</script>
+
+<template>
+  <component :is="component"></component>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/ui/src/components/bs5-shell.vue → src/ui/src/views/bs5.vue b/src/ui/src/components/bs5-shell.vue → src/ui/src/views/bs5.vue
@@ -77,11 +77,11 @@
 <script lang="ts">
 import {CSSProperties, defineComponent} from 'vue';
 import { useRouter } from 'vue-router';
-import { useUIStore } from '../stores/ui';
-import arcs from '../utils/arcs';
-import MainCircleArc from './main-circle-arc.vue';
-import VolumeArc from './volume-arc.vue';
-import ArcContentFlow from './ArcContentFlow.vue';
+import { useUIStore } from '../stores/ui.ts';
+import arcs from '../utils/arcs.ts';
+import MainCircleArc from '../components/main-circle-arc.vue';
+import VolumeArc from '../components/volume-arc.vue';
+import ArcContentFlow from '../components/ArcContentFlow.vue';
 
 export default defineComponent({
   name: 'BS5Shell',
@@ -96,7 +96,7 @@ export default defineComponent({
   },
   data() {
     return {
-      menuItems: [{title: 'SETTINGS', path: '/'}, {title: 'SOURCES', path: '/'}, {title: 'N.RADIO', path: 'radio'}, {title: 'N.MUSIC', path: 'music'} ],
+      menuItems: [{title: 'SETTINGS', path: ''}, {title: 'SOURCES', path: ''}, {title: 'N.RADIO', path: 'radio'}, {title: 'N.MUSIC', path: 'music'} ],
       radius: 1000, // Adjusted radius to fit within the viewport
       angleStep: 7, // Adjust this value to change the spacing between menu items
     };
@@ -151,6 +151,8 @@ export default defineComponent({
   background-color: black;
   width:100%;
   height: 1000px;
+  cursor: none;
+  overflow: hidden;
 }
 
 .list-item {