media_player_client/src/components/FusionSettings/FusionLocale.vue

<template>
  <div class="row">
    <div class="col-8 boder">
      <p class="text-center">{{$t('Set the fusion band width')}}</p>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 offset-4">
              <div class="row">
                <div class="col-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[0].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 0"
                    v-model="array2[0].value"
                    :label="$t('upper fusion zone parameters')"
                    lazy-rules
                    :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 100) || $t('Please enter 0-100'),
                    ]"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-6">
              <div class="row">
                <div class="col-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[1].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 1"
                    v-model="array2[1].value"
                    :label="$t('Left fusion Band Parameters')"
                    lazy-rules
                    :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 100) || $t('Please enter 0-100'),
                    ]"
                  />
                </div>
              </div>
            </div>
            <div class="col-6">
              <div class="row">
                <div class="col-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[2].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 2"
                    v-model="array2[2].value"
                    :label="$t('Right fusion Band Parameters')"
                    lazy-rules
                    :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 100) || $t('Please enter 0-100'),
                    ]"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 offset-4">
              <div class="row">
                <div class="col-6">
                  <q-toggle
                    class="float-right"
                    v-model="array2[3].isshow"
                    label=""
                  />
                </div>
                <div class="col-6">
                  <q-input
                    filled
                    type="number"
                    @focus="group = 3"
                    v-model="array2[3].value"
                    :label="$t('Lower fusion Zone Parameters')"
                    lazy-rules
                    :rules="[
                      (val) =>
                        (val !== null && val !== '') || $t('Please enter a number'),
                      (val) =>
                        (val > -1 && val < 100) || $t('Please enter 0-100'),
                    ]"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!(group == 4) && array2[group].isshow" class="col-4">
      <p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
      <div style="display: flex; justify-content: space-evenly">
        <div>
          <q-slider
            v-model="array[group].alpha"
            :min="0.0"
            @change="chang('alpha')"
            :max="1"
            :step="0.01"
            color="green"
            vertical
            reverse
            label-always
          />
          <p class="text-center">alpha</p>
        </div>

        <div>
          <q-slider
            v-model="array[group].p"
            :min="0"
            @change="chang('p')"
            :max="2.5"
            :step="0.01"
            color="green"
            vertical
            reverse
            label-always
          />
          <p class="text-center">p</p>
        </div>

        <div>
          <q-slider
            v-model="array[group].gamma"
            :min="0"
            @change="chang('gamma')"
            :max="2.5"
            :step="0.01"
            color="green"
            vertical
            reverse
            label-always
          />
          <p class="text-center">gamma</p>
        </div>
      </div>
      <!-- <div class="q-pa-lg text-center">
                <q-option-group v-model="group" :options="options" color="primary" />
            </div> -->
    </div>
  </div>
</template>

<style>
.boder {
  border: 2px solid #0000;
}
</style>

<script lang="ts">
import {
  defineComponent,
  ref,
  watch,
  computed,
  defineProps,
  withDefaults,
  reactive,
} from "vue";
import { useStore } from "src/store";
import { useI18n } from "vue-i18n";
import GlobalData from "src/common/GlobalData";

export default defineComponent({
  name: "ComponentFusionLocale",
  setup() {
    let set = GlobalData.getInstance().getCurrentClient();
    let $store = useStore();
    let $t = useI18n();
    const age = ref(0);
    const standard = ref(0);
    const group = ref(4);
    let array: any = ref([
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
      { alpha: 0, p: 0, gamma: 0 },
    ]);
    let array2 = reactive([
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
      { isshow: false, value: 0 },
    ]);
    const options = ref([
      {
        label: "上融合带参数",
        value: 0,
      },
      {
        label: "左融合带参数",
        value: 1,
      },
      {
        label: "右融合带参数",
        value: 2,
      },
      {
        label: "下融合带参数",
        value: 3,
      },
    ]);
    const accept = ref(false);
    const text = ref("");
    const model = computed({
      get() {
        return $store.state.selected_projector;
      },
      set(newValue) {
        $store.commit("setSelectedProjector", newValue);
      },
    });
    const setIndexProjector = () => {
      console.log($store.state.selected_projector);
    };
    const chang = (type: string) => {
      if (type == "alpha") {
        set?.setBlendingAlphaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].alpha
        );
      }
      if (type == "p") {
        set?.setBlendingPowerParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].p
        );
      }
      if (type == "gamma") {
        set?.setBlendingGammaParam(
          $store.getters.GetTheCurrentlySelectedCamera[0],
          $store.getters.GetTheCurrentlySelectedCamera[1],
          group.value,
          array.value[group.value].gamma
        );
      }
      //console.log("giao")
    };
    watch(
      () => array2[0].value,
      (newVal, oldVal) => {
        //set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
        ///
        ///
      },
      { deep: true }
    );
    watch(
      () => array2[1].value,
      (newVal, oldVal) => {
        //set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
        ///
        ///
      },
      { deep: true }
    );
    watch(
      () => array2[2].value,
      (newVal, oldVal) => {
        //set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
        ///
        ///
      },
      { deep: true }
    );
    watch(
      () => array2[3].value,
      (newVal, oldVal) => {
        //set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
        ///
        ///
      },
      { deep: true }
    );
    return {
      model,
      age,
      accept,
      standard,
      options,
      group,
      text,
      array,
      $t,
      chang,
      array2,
    };
  },
});
</script>