Add power to base and style (#1767)

viamrobotics · Jan 17, 2023 · ccb311a · ccb311a
1 parent 24d6f39
commit ccb311a
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 53 deletions.
diff --git a/web/frontend/package-lock.json b/web/frontend/package-lock.json
diff --git a/web/frontend/package.json b/web/frontend/package.json
@@ -6,7 +6,7 @@
     "@fontsource/space-mono": "^4.5.10",
     "@improbable-eng/grpc-web": "^0.13.0",
     "@mdi/js": "^6.9.96",
-    "@viamrobotics/prime": "^0.0.105",
+    "@viamrobotics/prime": "^0.0.106",
     "@viamrobotics/rpc": "^0.1.32",
     "@viamrobotics/sdk": "^0.0.11",
     "@vitejs/plugin-vue": "^3.1.2",

diff --git a/web/frontend/src/components/base.vue b/web/frontend/src/components/base.vue
@@ -45,6 +45,8 @@ const angle = ref(0);
 
 const selectCameras = ref('');
 
+const power = $ref(50);
+
 const pressed = new Set<Keys>();
 let stopped = true;
 
@@ -92,19 +94,19 @@ const digestInput = () => {
   for (const item of pressed) {
     switch (item) {
       case Keymap.FORWARD: {
-        linearValue += 1;
+        linearValue += Number(0.01 * power);
         break;
       }
       case Keymap.BACKWARD: {
-        linearValue -= 1;
+        linearValue -= Number(0.01 * power);
         break;
       }
       case Keymap.LEFT: {
-        angularValue += 1;
+        angularValue += Number(0.01 * power);
         break;
       }
       case Keymap.RIGHT: {
-        angularValue -= 1;
+        angularValue -= Number(0.01 * power);
         break;
       }
     }
@@ -286,13 +288,25 @@ onUnmounted(() => {
         v-if="selectedItem === 'Keyboard'"
         class="h-auto p-4"
       >
-        <div class="grid grid-cols-1 sm:grid-cols-2">
-          <KeyboardInput
-            class="mb-2"
-            @keydown="handleKeyDown"
-            @keyup="handleKeyUp"
-            @toggle="(active: boolean) => { !active && (pressed.size > 0 || !stopped) && stop() }"
-          />
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
+          <div class="flex flex-col gap-4">
+            <KeyboardInput
+              @keydown="handleKeyDown"
+              @keyup="handleKeyUp"
+              @toggle="(active: boolean) => { !active && (pressed.size > 0 || !stopped) && stop() }"
+            />
+            <v-slider
+              id="power"
+              class="pt-2 w-full max-w-xs"
+              :min="0"
+              :max="100"
+              :step="1"
+              suffix="%"
+              label="Power %"
+              :value="power"
+              @input="power = $event.detail.value"
+            />
+          </div>
           <div v-if="filterResources(resources, 'rdk', 'component', 'camera')">
             <v-multiselect
               v-model="selectCameras"

diff --git a/web/frontend/src/components/keyboard-input.vue b/web/frontend/src/components/keyboard-input.vue
@@ -28,7 +28,7 @@ const pressedKeys = $ref({
 
 let isActive = $ref(false);
 
-const keysLayout = [['w'], ['a', 's', 'd']] as const;
+const keysLayout = [['a'], ['w', 's'], ['d']] as const;
 
 const normalizeKey = (key: string): Keys | null => {
   return ({
@@ -114,36 +114,35 @@ onUnmounted(() => {
 <template>
   <div
     ref="root"
-    class="h-23 flex w-full flex-col items-center"
   >
-    <div class="flex w-48 gap-2 pb-4">
-      <v-switch
-        :label="isActive ? 'Keyboard Enabled' : 'Keyboard Disabled'"
-        class="pr-4"
-        :value="isActive ? 'on' : 'off'"
-        @input="toggleKeyboard($event.target.value === 'on')"
-      />
-    </div>
-    <div
-      v-for="(lineKeys, index) in keysLayout"
-      :key="index"
-      class="my-1 flex flex-row justify-center gap-2"
-    >
-      <button
-        v-for="key in lineKeys"
-        :key="key"
-        class="flex items-center gap-1.5 border border-gray-500 px-3 py-1 outline-none"
-        :class="{
-          'bg-gray-200 text-gray-800': pressedKeys[key],
-          'bg-white': !pressedKeys[key],
-        }"
-        @pointerdown="handlePointerDown(key)"
-        @pointerup="handlePointerUp(key)"
-        @pointerleave="handlePointerUp(key)"
+    <v-switch
+      :label="isActive ? 'Keyboard Enabled' : 'Keyboard Disabled'"
+      class="pr-4"
+      :value="isActive ? 'on' : 'off'"
+      @input="toggleKeyboard($event.detail.value)"
+    />
+    <div class="flex gap-2">
+      <div
+        v-for="(lineKeys, index) in keysLayout"
+        :key="index"
+        class="my-1 flex flex-col self-end gap-2"
       >
-        {{ key.toUpperCase() }}
-        <Icon :path="keyIcons[key]" />
-      </button>
+        <button
+          v-for="key in lineKeys"
+          :key="key"
+          class="flex items-center gap-1.5 border border-gray-500 px-3 py-1 outline-none uppercase"
+          :class="{
+            'bg-gray-200 text-gray-800': pressedKeys[key],
+            'bg-white': !pressedKeys[key],
+          }"
+          @pointerdown="handlePointerDown(key)"
+          @pointerup="handlePointerUp(key)"
+          @pointerleave="handlePointerUp(key)"
+        >
+          {{ key }}
+          <Icon :path="keyIcons[key]" />
+        </button>
+      </div>
     </div>
   </div>
 </template>
diff --git a/web/runtime-shared/static/control.js b/web/runtime-shared/static/control.js