Merge pull request #149 from pljakobs/feature/restructureColorPage

Feature/restructure color page

src/components/ColorModelCard.vue

@@ -0,0 +1,157 @@
+<template>
+  <MyCard icon="img:icons/palette_outlined.svg" title="Color">
+    <q-card-section>
+      <div class="text-h6 col-auto self-center q-gutter-md">
+        <q-select
+          v-model="colorModel"
+          :options="colorOptions"
+          label="Color Model"
+          style="width: 200px"
+          dropdown-icon="img:icons/arrow_drop_down.svg"
+          @update:model-value="emitColorModel"
+        >
+          <template #dropdown-icon>
+            <img
+              src="/icons/arrow_drop_down.svg"
+              alt="Dropdown Icon"
+              style="width: 24px; height: 24px"
+            />
+          </template>
+        </q-select>
+      </div>
+    </q-card-section>
+    <q-card-section style="width: 80%">
+      <ColorSlider
+        v-for="colorSlider in colorSliders"
+        :key="colorSlider.label"
+        :min="colorSlider.min"
+        :max="colorSlider.max"
+        :label="colorSlider.label"
+        :value="getColorSliderValue(colorSlider.model)"
+        :color="colorSlider.color"
+        @update:model="updateColorSlider(colorSlider.model, $event)"
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, watch, computed, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  emits: ["update:colorModel"],
+  setup(props, { emit }) {
+    const configData = configDataStore();
+
+    const colorModel = ref("");
+    const defaultColorOptions = ["RGB", "RGBWW", "RGBCW", "RGBWWCW"];
+    const colorOptions = ref([]);
+
+    const colorSliders = computed(() => {
+      const sliders = [
+        {
+          label: "Red",
+          model: "color.brightness.red",
+          min: 0,
+          max: 100,
+          color: "red",
+        },
+        {
+          label: "Green",
+          model: "color.brightness.green",
+          min: 0,
+          max: 100,
+          color: "green",
+        },
+        {
+          label: "Blue",
+          model: "color.brightness.blue",
+          min: 0,
+          max: 100,
+          color: "blue",
+        },
+      ];
+
+      if (colorModel.value === "RGBWW" || colorModel.value === "RGBWWCW") {
+        sliders.push({
+          label: "Warm White",
+          model: "color.brightness.ww",
+          min: 0,
+          max: 100,
+          color: "yellow",
+        });
+      }
+
+      if (colorModel.value === "RGBCW" || colorModel.value === "RGBWWCW") {
+        sliders.push({
+          label: "Cold White",
+          model: "color.brightness.cw",
+          min: 0,
+          max: 100,
+          color: "cyan",
+        });
+      }
+
+      return sliders;
+    });
+
+    const getColorSliderValue = (model) => {
+      return model.split(".").reduce((o, i) => o[i], configData.data);
+    };
+
+    const updateColorSlider = (model, value) => {
+      configData.updateData(model, value);
+    };
+
+    const emitColorModel = (newColorModel) => {
+      const modelIndex = colorOptions.value.indexOf(newColorModel);
+      configData.updateData("color.outputmode", modelIndex);
+      colorModel.value = newColorModel; // Ensure the ref is updated
+      emit("update:colorModel", modelIndex);
+    };
+
+    watch(colorModel, (newColorModel, oldColorModel) => {
+      console.log(
+        `Selected color model changed from ${oldColorModel} to ${newColorModel}`,
+      );
+      emitColorModel(newColorModel);
+    });
+
+    // Initialize values from configDataStore when the component is mounted
+    onMounted(() => {
+      // Initialize colorOptions and colorModel
+      colorOptions.value =
+        configData.data.general?.supported_color_models.length > 0
+          ? configData.data.general.supported_color_models
+          : defaultColorOptions;
+      const colorModelIndex = configData.data.color.color_mode;
+      if (colorModelIndex >= 0 && colorModelIndex < colorOptions.value.length) {
+        colorModel.value = colorOptions.value[colorModelIndex];
+      } else {
+        console.error(`Invalid color.color_mode: ${colorModelIndex}`);
+        colorModel.value = colorOptions.value[0]; // Default to the first option
+      }
+    });
+
+    return {
+      colorModel,
+      colorOptions,
+      colorSliders,
+      getColorSliderValue,
+      updateColorSlider,
+      emitColorModel,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>

src/components/TransitionModeCard.vue

@@ -0,0 +1,153 @@
+<template>
+  <MyCard icon="img:icons/tune_outlined.svg" title="Transition Mode">
+    <q-card-section>
+      <div class="text-h6 col-auto self-center q-gutter-md">
+        <q-select
+          v-model="transitionModel"
+          :options="transitionOptions"
+          label="Transition Mode"
+          style="width: 200px"
+          dropdown-icon="img:icons/arrow_drop_down.svg"
+          @update:model-value="updateTransitionMode"
+        />
+      </div>
+    </q-card-section>
+
+    <q-card-section v-if="transitionModel !== 'Rainbow'" style="width: 80%">
+      <ColorSlider
+        v-for="colorGain in colorGains"
+        :key="colorGain.label"
+        :min="colorGain.min"
+        :max="colorGain.max"
+        :label="colorGain.label"
+        :value="colorGain.value"
+        :color="colorGain.color"
+        @update:model="
+          ($event) => {
+            console.log('in function:', $event);
+            updateColorSlider(colorGain.model, $event);
+          }
+        "
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, watch, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  setup() {
+    const configData = configDataStore();
+
+    const transitionOptions = ["Normal", "Spektrum", "Rainbow"];
+    const transitionModel = ref(
+      transitionOptions[configData.data.color.hsv.model],
+    );
+
+    const colorGains = ref([
+      {
+        label: "Red",
+        model: "color.hsv.red",
+        min: -30,
+        max: 30,
+        color: "red",
+        value: configData.data.color.hsv.red,
+      },
+      {
+        label: "Yellow",
+        model: "color.hsv.yellow",
+        min: -30,
+        max: 30,
+        color: "yellow",
+        value: configData.data.color.hsv.yellow,
+      },
+      {
+        label: "Green",
+        model: "color.hsv.green",
+        min: -30,
+        max: 30,
+        color: "green",
+        value: configData.data.color.hsv.green,
+      },
+      {
+        label: "Cyan",
+        model: "color.hsv.cyan",
+        min: -30,
+        max: 30,
+        color: "cyan",
+        value: configData.data.color.hsv.cyan,
+      },
+      {
+        label: "Blue",
+        model: "color.hsv.blue",
+        min: -30,
+        max: 30,
+        color: "blue",
+        value: configData.data.color.hsv.blue,
+      },
+      {
+        label: "Magenta",
+        model: "color.hsv.magenta",
+        min: -30,
+        max: 30,
+        color: "#ff0090",
+        value: configData.data.color.hsv.magenta,
+      },
+    ]);
+
+    const updateColorSlider = (model, value) => {
+      console.log("update for", model);
+      console.log("new value", value);
+      configData.updateData(model, value);
+    };
+
+    const updateTransitionMode = (newTransitionModel) => {
+      console.log(
+        `from update trigger: \nTransition model changed to ${newTransitionModel}`,
+      );
+      const modelIndex = transitionOptions.indexOf(newTransitionModel);
+      console.log(
+        "old transition model:",
+        configData.data.color.hsv.model,
+        " new transition model: ",
+        modelIndex,
+      );
+      configData.updateData("color.hsv.model", modelIndex);
+    };
+
+    watch(transitionModel, (newModel) => {
+      console.log("transition model change to ", newModel);
+      updateTransitionMode(newModel);
+    });
+
+    onMounted(() => {
+      // Initialize transition model and color gains
+      transitionModel.value =
+        transitionOptions[configData.data.color.hsv.model];
+      colorGains.value.forEach((gain) => {
+        gain.value = configData.data.color.hsv[gain.model.split(".").pop()];
+      });
+    });
+
+    return {
+      transitionModel,
+      transitionOptions,
+      colorGains,
+      updateColorSlider,
+      updateTransitionMode,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>

src/components/WhiteBalanceCard.vue

@@ -0,0 +1,73 @@
+<template>
+  <MyCard icon="img:icons/exposure_outlined.svg" title="White balance">
+    <q-card-section>
+      select color temperature
+      <ColorSlider
+        v-for="colorTemperature in colorTemperatures"
+        :key="colorTemperature.label"
+        :min="colorTemperature.min"
+        :max="colorTemperature.max"
+        :label="colorTemperature.label"
+        :value="getColorTemperatureValue(colorTemperature.model)"
+        :color="colorTemperature.color"
+        @update:model="updateColorTemperature(colorTemperature.model, $event)"
+      />
+    </q-card-section>
+  </MyCard>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { configDataStore } from "src/stores/configDataStore";
+import ColorSlider from "src/components/ColorSlider.vue";
+import MyCard from "src/components/myCard.vue";
+
+export default {
+  components: {
+    MyCard,
+    ColorSlider,
+  },
+  setup() {
+    const configData = configDataStore();
+
+    const colorTemperatures = ref([
+      {
+        label: "warm white",
+        model: "color.colortemp.ww",
+        min: 2500,
+        max: 8000,
+        color: "yellow",
+      },
+      {
+        label: "cold white",
+        model: "color.colortemp.cw",
+        min: 2500,
+        max: 8000,
+        color: "cyan",
+      },
+    ]);
+
+    const getColorTemperatureValue = (model) => {
+      return model.split(".").reduce((o, i) => o[i], configData.data);
+    };
+
+    const updateColorTemperature = (model, value) => {
+      configData.updateData(model, value);
+    };
+
+    onMounted(() => {
+      console.log("Mounted WhiteBalanceCard");
+    });
+
+    return {
+      colorTemperatures,
+      getColorTemperatureValue,
+      updateColorTemperature,
+    };
+  },
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>