Add sliders - Position, Body Motion, Head Motion

ielvisd · Jan 26, 2021 · 0492055 · 0492055
1 parent 58c3c7e
commit 0492055
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -9,11 +9,14 @@
   },
   "dependencies": {
     "node-sass": "^5.0.0",
+    "primeicons": "^4.1.0",
+    "primevue": "^3.2.0-rc.1",
     "sass-loader": "^10.1.1",
     "three": "^0.124.0",
     "troisjs": "^0.1.0",
     "vue": "^3.0.5",
-    "vue-router": "^4.0.3"
+    "vue-router": "^4.0.3",
+    "vue-slider-component": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@tailwindcss/aspect-ratio": "^0.2.0",
@@ -26,8 +29,8 @@
     "cross-env": "^7.0.3",
     "local-web-server": "^4.2.1",
     "postcss": "^8.2.4",
+    "sass": "^1.32.5",
     "tailwindcss": "^2.0.2",
-    "vite": "^2.0.0-beta.44",
-    "sass": "^1.32.5"
+    "vite": "^2.0.0-beta.44"
   }
-}
+}
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -27,8 +27,7 @@
     <div class="controls-container">
       <div class="control-container">
         <label for="toggle_button">
-          <span v-if="!positionControlsActive">Show Position Controls</span>
-          <span v-if="positionControlsActive">Hide Position Controls</span>
+          <span>Position </span>
           <input
             type="checkbox"
             id="toggle_button"
@@ -49,8 +48,7 @@
 
       <div class="control-container">
         <label for="toggle_button">
-          <span v-if="!figureControlsActive">Show Figure Motion Controls</span>
-          <span v-if="figureControlsActive">Hide Figure Motion Controls</span>
+          <span>Body Motion </span>
           <input
             type="checkbox"
             id="toggle_button"
@@ -70,10 +68,9 @@
 
       <div class="control-container">
         <label for="toggle_button">
-          <span v-if="!headMotionControlsActive"
-            >Show Head Motion Controls</span
+          <span
+            >Head Motion </span
           >
-          <span v-if="headMotionControlsActive">Hide Head Motion Controls</span>
           <input
             type="checkbox"
             id="toggle_button"
@@ -88,12 +85,6 @@
           <vue-slider v-model="headTurn" :min="-90" :max="90" :interval="1" />
           <p>tilt: {{ headTilt }}</p>
           <vue-slider v-model="headTilt" :min="-90" :max="90" :interval="1" />
-          <h3>Basic</h3>
-          <!-- <ToggleButton
-            v-model="checked1"
-            onIcon="pi pi-check"
-            offIcon="pi pi-times"
-          /> -->
         </div>
       </div>
     </div>
@@ -118,9 +109,12 @@
 // see the syntax-sugared version in About.vue
 import ButtonRepo from '@/components/ButtonRepo.vue'
 import Stage from '@/components/Stage.vue'
+import VueSlider from "vue-slider-component";
+import 'vue-slider-component/theme/antd.css'
+
 
 export default {
-  components: { ButtonRepo, Stage },
+  components: { ButtonRepo, Stage, VueSlider },
 data() {
     return {
       checked1: false,

diff --git a/yarn.lock b/yarn.lock
@@ -677,6 +677,11 @@ copy-to@^2.0.1:
   resolved "https://registry.npmjs.org/copy-to/-/copy-to-2.0.1.tgz#2680fbb8068a48d08656b6098092bdafc906f4a5"
   integrity sha1-JoD7uAaKSNCGVrYJgJK9r8kG9KU=
 
+core-js@^3.6.5:
+  version "3.8.3"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
+  integrity sha512-KPYXeVZYemC2TkNEkX/01I+7yd+nX3KddKwZ1Ww7SKWdI2wQprSgLmrTddT8nw92AjEklTsPBoSdQBhbI1bQ6Q==
+
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -2385,6 +2390,16 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+primeicons@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/primeicons/-/primeicons-4.1.0.tgz#19eaef8ef5594b0006358ae64e738d03e167c9bb"
+  integrity sha512-uEv2pSPk1zQCfaB2VgnUfnUxxlGryYi+5rbdxmZBBt5v9S/pscIQYS5YDLxsQZ7D9jn5c76+Tx5wX/2J1nK6sA==
+
+primevue@^3.2.0-rc.1:
+  version "3.2.0-rc.1"
+  resolved "https://registry.npmjs.org/primevue/-/primevue-3.2.0-rc.1.tgz#270c1e3b4f1b7b9b4b282fc019aebcfb12b8f15b"
+  integrity sha512-3RKUMesBmjKXE5ArREFPXrfBPt/4K2AchJAToDdorQBHbG9QfxwB3mlXPlEvf4b5rl4BonykjXiXoqU5lsurig==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -3133,11 +3148,24 @@ vite@^2.0.0-beta.44:
   optionalDependencies:
     fsevents "~2.1.2"
 
+vue-property-decorator@^9.0.2:
+  version "9.1.2"
+  resolved "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz#266a2eac61ba6527e2e68a6933cfb98fddab5457"
+  integrity sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==
+
 vue-router@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.0.3.tgz#8b26050c88b2dec7e27a88835f71046b365823ec"
   integrity sha512-AD1OjtVPyQHTSpoRsEGfPpxRQwhAhxcacOYO3zJ3KNkYP/r09mileSp6kdMQKhZWP2cFsPR3E2M3PZguSN5/ww==
 
+vue-slider-component@^4.0.0-beta.3:
+  version "4.0.0-beta.3"
+  resolved "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.0.0-beta.3.tgz#f1c0c716f36e68b148acc4b34a3a41dd1afc7abe"
+  integrity sha512-wLv3mAIQVOw2kP/CSi7FbYq1Y5q4ZC7GJpOHyd+Gpibc1Io/dMtgNAUa0XzcCJ20RNqJbQs+9vHeF19zV2xqBQ==
+  dependencies:
+    core-js "^3.6.5"
+    vue-property-decorator "^9.0.2"
+
 vue@^3.0.5:
   version "3.0.5"
   resolved "https://registry.npmjs.org/vue/-/vue-3.0.5.tgz#de1b82eba24abfe71e0970fc9b8d4b2babdc3fe1"