Sync lamp info

client/.env.development

@@ -0,0 +1 @@
+VITE_ORBITAL_SERVER_URL=http://localhost:3000

client/src/axios-common.ts

@@ -1,7 +1,10 @@
 import { Axios } from "axios";
 
+console.log(import.meta.env.DEV);
+console.log(import.meta.env.VITE_ORBITAL_SERVER_URL);
+
 export const axiosInstance = new Axios({
-  baseURL: window.location.href ?? "",
+  baseURL: import.meta.env.DEV ? import.meta.env.VITE_ORBITAL_SERVER_URL ?? "" : window.location.origin,
   transformRequest: (data) => JSON.stringify(data),
   headers: {
     "Content-Type": "application/json",

client/src/components/shared/SmartColorPicker.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { Color } from "../../../../server/color";
 import type { SmartColor } from "../../../../server/types/SmartColor";
 
@@ -71,6 +71,24 @@ function onFormUpdate() {
 
   emit("smartColorUpdate", emitSmartColor);
 }
+
+function onSmartColorChange(newColor: SmartColor) {
+  selectedType.value = newColor.type;
+
+  if (newColor.type === "static") {
+    selectedColor.value = Color.toHex(newColor.color);
+  } else if (newColor.type === "gradient") {
+    selectedColorFrom.value = Color.toHex(newColor.parameters.colorFrom);
+    selectedColorTo.value = Color.toHex(newColor.parameters.colorTo);
+  } else {
+    selectedColor.value = "#000000";
+    selectedColorFrom.value = "#000000";
+    selectedColorTo.value = "#000000";
+  }
+}
+
+watch(() => props.smartColor, onSmartColorChange);
+
 </script>
 
 <style scoped>

client/src/views/LampPage.vue

@@ -29,7 +29,6 @@
           class="input"
           v-if="option.type === 'number'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
           type="number"
           :min="option.min"
           :max="option.max"
@@ -39,7 +38,6 @@
           class="input"
           v-if="option.type === 'select'"
           v-model="characteristics.array[i].value"
-          @change="onChange"
         >
           <option
             v-for="opt in option.options"
@@ -60,11 +58,18 @@
         :lazy="true"
         :marks="[0, 50, 100]"
       />
+      <DynamicButton color="yellow" variant="normal" @click="refreshABC">
+        Refresh
+      </DynamicButton>
+      <DynamicButton color="green" variant="normal" @click="applyAnimation">
+        Apply
+      </DynamicButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import DynamicButton from "../components/shared/DynamicButton.vue";
 import VueSlider from "vue-slider-component";
 import "vue-slider-component/theme/antd.css";
 import SmartColorPicker from "../components/shared/SmartColorPicker.vue";
@@ -90,18 +95,27 @@ onMounted(() => {
       currentConfig.animationOptions = data.animationNames;
     });
 
+  refreshABC();
+});
+
+// Animations, Brightness, Characteristics
+function refreshABC() {
   axiosInstance.get("/lamp/brightness")
     .then(res => JSON.parse(res.data))
     .then(data => brightness.value = data.brightness);
-});
 
-function onSmartColorUpdate(smartColor: SmartColor, i: number) {
-  characteristics.array[i].value = smartColor;
-  onChange();
+  axiosInstance.get(`/lamp/animation`)
+    .then(res => {
+      return JSON.parse(res.data);
+    })
+    .then(data => {
+      currentConfig.selectedAnimation = data.animation.name;
+      onNewAnimation();
+    })
 }
 
-function onChange() {
-  axiosInstance.post("/lamp/characteristics", characteristics.array);
+function onSmartColorUpdate(smartColor: SmartColor, i: number) {
+  characteristics.array[i].value = smartColor;
 }
 
 function onNewAnimation() {
@@ -112,20 +126,28 @@ function onNewAnimation() {
     })
     .then(data => {
       options.array = data.options;
-      characteristics.array = options.array.map(o => {
+      characteristics.array.splice(0, characteristics.array.length);
+      for (let i = 0; i < options.array.length; i++) {
+        const o = options.array[i];
         switch (o.type) {
           case "number":
-            return { type: "number", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "select":
-            return { type: "select", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
           case "color":
-            return { type: "color", value: o.currentCharacteristicValue };
+            characteristics.array.push({ type: o.type, value: o.currentCharacteristicValue });
+            break;
         }
-      });
+      }
     });
+}
 
-  axiosInstance.post("/lamp/animation", {
-    animation: currentConfig.selectedAnimation,
+function applyAnimation() {
+  axiosInstance.post("/lamp/characteristics", {
+    characteristics: characteristics.array,
+    animation: currentConfig.selectedAnimation
   });
 }
 
@@ -175,10 +197,6 @@ input[type="number"] {
   max-width: max-content;
 }
 
-.brightness-slider {
-
-}
-
 label {
   font-size: calc(5 * var(--unit));
 }

client/src/ws.ts

@@ -25,7 +25,7 @@ export const WebSocketHandler = {
       }
 
       console.log("Starting connection to WebSocket Server");
-      const wsUrl = new URL(window.location.href);
+      const wsUrl = import.meta.env.DEV ? new URL(import.meta.env.SERVER_URL) : new URL(window.location.origin);
 
       // const wsProtocol = window.location.protocol === "https:" ? "wss://" : "ws://";
       // export const ws = new WebSocket(wsProtocol + location.host + "/");

package.json

@@ -54,7 +54,7 @@
     "nodemon": "^2.0.12",
     "prettier": "^2.8.0",
     "ts-jest": "^27.0.4",
-    "typescript": "^4.3.5"
+    "typescript": "4.3.5"
   },
   "dependencies": {
     "@types/color-convert": "^2.0.0",

server/lamp/index.ts

@@ -92,8 +92,10 @@ export function initLamp() {
       // We set the default value to the current one to sync clients
       if (currentCharacteristics[animationName]) {
         for (let i = 0; i < options.length; i++) {
-          options[i].currentCharacteristicValue =
-            currentCharacteristics[animationName][i].value;
+          if (typeof currentCharacteristics[animationName][i]?.value !== "undefined") {
+            options[i].currentCharacteristicValue =
+              currentCharacteristics[animationName][i].value;
+          }
         }
       } else {
         options.forEach((option) => {
@@ -115,7 +117,7 @@ export function initLamp() {
   });
 
   lamp.post("/characteristics", (req, res) => {
-    const characteristics: Characteristic[] = req.body;
+    const { characteristics, animation }: { characteristics: Characteristic[], animation: string } = req.body;
     characteristics.forEach((c) => {
       if (c.type === "color") {
         if (c.value.type === "static") {
@@ -130,15 +132,23 @@ export function initLamp() {
         }
       }
     });
-    currentCharacteristics[currentAnimation] = characteristics;
+
+    currentCharacteristics[animation] = characteristics;
 
     startLamp();
-    res.send("OK");
+    changeAnimation(animation, res);
+  });
+
+  lamp.get("/animation", (req, res) => {
+    res.send({ animation: animationStore[currentAnimation] });
   });
 
   lamp.post("/animation", (req, res) => {
     const animation: string = req.body.animation;
+    changeAnimation(animation, res);
+  });
 
+  function changeAnimation(animation: string, res: express.Response) {
     if (animation.toLowerCase() === "off") {
       lampShouldStop = true;
       res.send("OK");
@@ -153,7 +163,7 @@ export function initLamp() {
     currentAnimation = animation;
     startLamp();
     res.send("OK");
-  });
+  }
 
   lamp.get("/brightness", (req, res) => {
     res.send({ brightness: display.brightness });

tsconfig.json

@@ -7,7 +7,8 @@
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "declaration": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "noFallthroughCasesInSwitch": true,
   },
   "exclude": [
     "public",