From 584f228c91895918644b71022cf9664c7df8a27b Mon Sep 17 00:00:00 2001
From: shefengchun <1077478963@qq.com>
Date: Fri, 6 Jan 2023 12:14:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=20=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FusionSettings/FourPointCalibration.vue   |  85 ++++++++-----
 .../FusionSettings/FusionLocale.vue           |  38 +++---
 .../FusionSettings/SurfaceCorrection.vue      | 114 ++++++++++--------
 src/components/FusionSettingsDialog.vue       |  55 +++------
 src/pages/TopToolBar.vue                      |  14 ++-
 src/store/index.ts                            |  16 +--
 6 files changed, 179 insertions(+), 143 deletions(-)

diff --git a/src/components/FusionSettings/FourPointCalibration.vue b/src/components/FusionSettings/FourPointCalibration.vue
index 80f355e..1ab3fe4 100644
--- a/src/components/FusionSettings/FourPointCalibration.vue
+++ b/src/components/FusionSettings/FourPointCalibration.vue
@@ -70,6 +70,7 @@ import { useStore } from "src/store";
 import { useI18n } from "vue-i18n";
 import ClientConnection from "src/common/ClientConnection"
 import GlobalData from "src/common/GlobalData";
+import { json } from "body-parser";
 
 export default defineComponent({
     name: "ComponentFourPointCalibration",
@@ -82,14 +83,15 @@ export default defineComponent({
         const setIndexProjector = () => {
             console.log($store.state.selected_projector);
         };
+        let config=JSON.parse($store.state.fusion_configuration).projectors[0];
         let set = GlobalData.getInstance().getCurrentClient();
-        const for_1 = computed(() => { })
-        let four = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
+        const configselsect = computed(() => {return $store.state.selected_projector})
+        let four = ref([{ x: config.point4[0].x, y: config.point4[0].y }, { x: config.point4[1].x, y: config.point4[1].y }, { x: config.point4[2].x, y: config.point4[2].x }, { x: config.point4[3].x, y: config.point4[3].y }]);
         let defaultfour = ref([{ x: 0, y: 1080 }, { x: 1920, y: 1080 }, { x: 0, y: 0 }, { x: 1920, y: 0 }]);
         let defaultfourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
         let fourpostion: any = ref([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);
         let div: any = ref(null);
-        let div2: any = ref(null);
+        // let div2: any = ref(null);
         let options = ref(['10', '20', '30', '40', '50']);
         let Proportion = ref({ x: 0, y: 0 });
         let point1 = reactive({ x: 0, y: 0 });
@@ -103,7 +105,7 @@ export default defineComponent({
         const { offset } = dom
 
         const save=()=>{
-
+            set?.SaveBlendingConfig("")
         }
 
         const activeMouseDown = (index: number) => {
@@ -118,6 +120,7 @@ export default defineComponent({
         })
 
         const setpoa = () => {
+            console.log(config);
             point1.x = 0
             point1.y = 0
 
@@ -145,22 +148,22 @@ export default defineComponent({
 
             fourpostion.value[3].x = div.value.offsetWidth - 25
             fourpostion.value[3].y = div.value.offsetHeight - 25
-
-            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
-            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
+            
+            Proportion.value.x = config.width / (div.value.offsetWidth - 25)
+            Proportion.value.y = config.height / (div.value.offsetHeight - 25)
             for (let index = 0; index < fourpostion.value.length; index++) {
                 defaultfourpostion.value[index].x = fourpostion.value[index].x ;
                 defaultfourpostion.value[index].y = fourpostion.value[index].y;
-                defaultfour.value[index].x=four.value[index].x
-                defaultfour.value[index].y=four.value[index].y
+                defaultfour.value[index].x=config.point4[index].def_x
+                defaultfour.value[index].y=config.point4[index].def_y
             }
         }
         watch(() => four.value[0], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 1, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[0]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 x1.value = x
                 y1.value = y
                 isshowarray.value[0] = false
@@ -172,11 +175,11 @@ export default defineComponent({
             }
         }, { deep: true })
         watch(() => four.value[1], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 2, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[1]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 point2.value.x = x
                 point2.value.y = y
                 isshowarray.value[1] = false
@@ -188,11 +191,11 @@ export default defineComponent({
             ///
         }, { deep: true })
         watch(() => four.value[2], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 3, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[2]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
+                let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
                 
                 point3.value.x = x
                 point3.value.y = y
@@ -204,11 +207,11 @@ export default defineComponent({
             ///
         }, { deep: true })
         watch(() => four.value[3], (newVal, oldVal) => {
-            if($store.state.EnableBlending)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion)set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 4, 4, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[3]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil((1080 / Proportion.value.y) - (newVal.y / Proportion.value.y));
+                let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
                 
                 point4.value.x = x
                 point4.value.y = y
@@ -221,9 +224,23 @@ export default defineComponent({
         }, { deep: true })
 
         ///
+
+        watch(() => configselsect, (newVal, oldVal) => {
+            //console.log(newVal);
+            let tmp=JSON.parse($store.state.fusion_configuration);
+            let fortmp=null
+            let i
+            for(i of tmp.projectors){
+                if(i.col===$store.getters.GetTheCurrentlySelectedCamera[0]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[1]){
+                    fortmp=JSON.parse(JSON.stringify(i)) 
+                }
+            }
+            config=JSON.parse(JSON.stringify(fortmp)) 
+            console.log(config)
+        }, { deep: true })
+
         const reset = (index: number) => {
             if (index == 0) {
-                console.log(x1.value + "," + y1.value)
                 four.value[0].x = 0
                 four.value[0].y = 1080
                 point1.x = 0
@@ -249,6 +266,10 @@ export default defineComponent({
                 fourpostion.value[3].x = div.value.offsetWidth - 25
                 fourpostion.value[3].y = div.value.offsetHeight - 25
             }
+            // auto set config
+            four.value[index].x = config.point4[index].def_x
+            four.value[index].y = config.point4[index].def_y
+
             isshowarray.value[index] = false
             setTimeout(() => {
                 isshowarray.value[index] = true
@@ -260,7 +281,6 @@ export default defineComponent({
             for (let index = 0; index < fourpostion.value.length; index++) {
                 fourpostion.value[index].x=defaultfourpostion.value[index].x 
                 fourpostion.value[index].y=defaultfourpostion.value[index].y 
-                console.log("ok");
                 four.value[index].x=defaultfour.value[index].x
                 four.value[index].y=defaultfour.value[index].y
 
@@ -273,38 +293,37 @@ export default defineComponent({
 
         const moveHandler_1 = (data: any) => {
             let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
-            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[0].y));
+            let y = Math.ceil((config.height - data.top * Proportion.value.y - fourpostion.value[0].y));
 
-            four.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
+            four.value[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
             isactivearray.value[0] = true
         }
         const moveHandler_2 = (data: any) => {
-            //y0 x1920
-            let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + 1920);
-            let y = Math.ceil((1080 - data.top * Proportion.value.y - fourpostion.value[1].y));
-            four.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
+            //y0 xconfig.width
+            let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + config.width);
+            let y = Math.ceil((config.height - data.top * Proportion.value.y - fourpostion.value[1].y));
+            four.value[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
             //console.log("x :"+x+" y:"+y)
         }
         const moveHandler_3 = (data: any) => {
             let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
-            four.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
+            four.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
             console.log("x :" + x + " y:" + y)
             //console.log("x :" + data.left + " y:" + (1370-data.top));
         }
         const moveHandler_4 = (data: any) => {
-            let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + 1920);
+            let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + config.width);
             let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
-            four.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            four.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y;
+            four.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            four.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
             //console.log("x :"+x+" y:"+y)
         }
         return {
             div,
-            div2,
             options,
             fourpostion,
             reset,
diff --git a/src/components/FusionSettings/FusionLocale.vue b/src/components/FusionSettings/FusionLocale.vue
index 3ff5a22..b3d0e37 100644
--- a/src/components/FusionSettings/FusionLocale.vue
+++ b/src/components/FusionSettings/FusionLocale.vue
@@ -208,7 +208,7 @@ export default defineComponent({
     const age = ref(0);
     const standard = ref(0);
     const group = ref(4);
-    const EnableBlending=ref(false);
+    const enablefusion=ref(false);
     let array: any = ref([
       { alpha: 0, p: 0, gamma: 0 },
       { alpha: 0, p: 0, gamma: 0 },
@@ -260,7 +260,7 @@ export default defineComponent({
     });
     const chang = (type: string) => {
       if (type == "alpha") {
-        if($store.state.EnableBlending)set?.setBlendingAlphaParam(
+        if($store.state.enablefusion)set?.setBlendingAlphaParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
@@ -268,15 +268,15 @@ export default defineComponent({
         );
       }
       if (type == "p") {
-        if($store.state.EnableBlending)set?.setBlendingPowerParam(
+        if($store.state.enablefusion)set?.setBlendingPowerParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
           array.value[group.value].p
         );
       }
-      if($store.state.EnableBlending)if (type == "gamma") {
-        set?.setBlendingGammaParam(
+      if (type == "gamma") {
+        if($store.state.enablefusion)set?.setBlendingGammaParam(
           $store.getters.GetTheCurrentlySelectedCamera[0],
           $store.getters.GetTheCurrentlySelectedCamera[1],
           group.value,
@@ -289,7 +289,7 @@ export default defineComponent({
     watch(
       () => array2[0][0],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
+        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
         if(!array2[0][0].isshow){
           array2[0][0].value=0
         }
@@ -299,7 +299,7 @@ export default defineComponent({
     watch(
       () => array2[0][1],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
+        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[0][1].isshow,Number(array2[0][1].value));
         if(!array2[0][1].isshow){
           array2[0][1].value=0
         }
@@ -309,7 +309,7 @@ export default defineComponent({
     watch(
       () => array2[0][2],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
+        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[0][2].isshow,Number(array2[0][2].value));
         if(!array2[0][2].isshow){
           array2[0][2].value=0
         }
@@ -319,7 +319,7 @@ export default defineComponent({
     watch(
       () => array2[0][3],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
+        if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[0][3].isshow,Number(array2[0][3].value));
         if(!array2[0][3].isshow){
           array2[0][3].value=0
         }
@@ -332,7 +332,7 @@ export default defineComponent({
 watch(
       () => array2[1][0],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[1][0].isshow,Number(array2[1][0].value));
+        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[1][0].isshow,Number(array2[1][0].value));
         if(!array2[1][0].isshow){
           array2[1][0].value=0
         }
@@ -342,7 +342,7 @@ watch(
     watch(
       () => array2[1][1],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[1][1].isshow,Number(array2[1][2].value));
+        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],0,array2[1][1].isshow,Number(array2[1][1].value));
         if(!array2[1][1].isshow){
           array2[1][1].value=0
         }
@@ -352,7 +352,7 @@ watch(
     watch(
       () => array2[1][2],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[1][2].isshow,Number(array2[1][2].value));
+        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],2,array2[1][2].isshow,Number(array2[1][2].value));
         if(!array2[1][2].isshow){
           array2[1][2].value=0
         }
@@ -362,7 +362,7 @@ watch(
     watch(
       () => array2[1][3],
       (newVal, oldVal) => {
-        if($store.state.EnableBlending) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[1][3].isshow,Number(array2[1][3].value));
+        if($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],3,array2[1][3].isshow,Number(array2[1][3].value));
         if(!array2[1][3].isshow){
           array2[1][3].value=0
         }
@@ -372,14 +372,14 @@ watch(
 ///
 
     watch(
-      () => EnableBlending,
+      () => enablefusion,
       (newVal, oldVal) => {
-        $store.commit('setEnableBlending',newVal.value);
+        $store.commit('setenablefusion',newVal.value);
         set?.EnableBlending(newVal.value);
       },{ deep: true }
     );
-    const changEnableBlending=()=>{
-      $store.commit('setEnableBlending',EnableBlending.value);
+    const changenablefusion=()=>{
+      $store.commit('setenablefusion',enablefusion.value);
     }
     return {
       model,
@@ -391,9 +391,9 @@ watch(
       text,
       array,
       chang,
-      EnableBlending,
+      enablefusion,
       array2,
-      changEnableBlending,
+      changenablefusion,
       selectedprojector
     };
   },
diff --git a/src/components/FusionSettings/SurfaceCorrection.vue b/src/components/FusionSettings/SurfaceCorrection.vue
index a7b86a1..c433680 100644
--- a/src/components/FusionSettings/SurfaceCorrection.vue
+++ b/src/components/FusionSettings/SurfaceCorrection.vue
@@ -162,6 +162,8 @@ export default defineComponent({
         const setIndexProjector = () => {
             console.log($store.state.selected_projector);
         };
+        let config=JSON.parse($store.state.fusion_configuration).projectors[0];
+        const configselsect = computed(() => {return $store.state.selected_projector})
         let Proportion = ref({ x: 0, y: 0 });
         let centor = ref({ x: 0, y: 0 });
         const div = ref();
@@ -177,67 +179,80 @@ export default defineComponent({
         let defaultninepostion: any = ref([{ x: 0, y: 1920 }, { x: 960, y: 1920 }, { x: 1080, y: 1920 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1080, y: 540 }, { x: 0, y: 0 }, { x: 540, y: 0 }, { x: 1080, y: 0 }]);
         const moveHandler_1 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
-            let y = 1080 - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
+            let y = config.height - Math.ceil((data.top - ninepostion.value[0].y) * Proportion.value.y);
 
-            nine.value[0].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[0].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_2 = (data: any) => {
             let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
-            let y = 1080 - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
+            let y = config.height - Math.ceil((data.top - ninepostion.value[1].y) * Proportion.value.y);
 
-            nine.value[1].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[1].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_3 = (data: any) => {
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
-            let y = 1080 - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
+            let x = config.width + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x);
+            let y = config.height - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
 
-            nine.value[2].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[2].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_4 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
             let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
 
-            nine.value[3].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[3].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_5 = (data: any) => {
             let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
             let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
 
-            nine.value[4].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[4].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[4].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[4].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_6 = (data: any) => {
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
+            let x = config.width + Math.ceil((data.left - ninepostion.value[5].x) * Proportion.value.x);
             let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
 
-            nine.value[5].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[5].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[5].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[5].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_7 = (data: any) => {
             let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));
 
-            nine.value[6].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[6].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[6].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_8 = (data: any) => {
             let x = 960 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;
 
-            nine.value[7].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[7].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[7].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
         const moveHandler_9 = (data: any) => {
-            let x = 1920 + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
+            let x = config.width + Math.ceil((data.left - ninepostion.value[8].x) * Proportion.value.x);
             let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));
 
-            nine.value[8].x = x > 1920 ? 1920 : x && x < 0 ? 0 : x;
-            nine.value[8].y = y > 1080 ? 1080 : y && y < 0 ? 0 : y
+            nine.value[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
+            nine.value[8].y = y > config.height ? config.height : y && y < 0 ? 0 : y
         }
+        watch(() => configselsect, (newVal, oldVal) => {
+            //console.log(newVal);
+            let tmp=JSON.parse($store.state.fusion_configuration);
+            let fortmp=null
+            let i
+            for(i of tmp.projectors){
+                if(i.col===$store.getters.GetTheCurrentlySelectedCamera[1]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[0]){
+                    fortmp=JSON.parse(JSON.stringify(i)) 
+                }
+            }
+            config=JSON.parse(JSON.stringify(fortmp)) 
+            console.log(config)
+        }, { deep: true })
         onMounted(() => {
             startpostion();
 
@@ -270,11 +285,11 @@ export default defineComponent({
             ninepostion.value[8].x = div.value.offsetWidth - 25
             ninepostion.value[8].y = div.value.offsetHeight - 25
 
-            Proportion.value.x = 1920 / (div.value.offsetWidth - 25)
-            Proportion.value.y = 1080 / (div.value.offsetHeight - 25)
+            Proportion.value.x = config.width / (div.value.offsetWidth - 25)
+            Proportion.value.y = config.height / (div.value.offsetHeight - 25)
 
-            centor.value.x = 2160 / (div.value.offsetWidth + 25)
-            centor.value.y = 3840 / (div.value.offsetHeight + 25)
+            centor.value.x = config.width *2 / (div.value.offsetWidth + 25)
+            centor.value.y = config.height*2 / (div.value.offsetHeight + 25)
 
             for (let index = 0; index < defaultninepostion.value.length; index++) {
                 defaultninepostion.value[index].x = ninepostion.value[index].x;
@@ -344,6 +359,9 @@ export default defineComponent({
                 ninepostion.value[8].x = div.value.offsetWidth - 25
                 ninepostion.value[8].y = div.value.offsetHeight - 25
             }
+            //data is flase
+            // nine.value[index].x = config.point9[index].def_x
+            // nine.value[index].y = config.point9[index].def_y
             isshowarray.value[index] = false
             setTimeout(() => {
                 isshowarray.value[index] = true
@@ -366,78 +384,78 @@ export default defineComponent({
         }
         ///
         watch(() => nine.value[0], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 1, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[0]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(0, x, y)
             }
             ///
         }, { deep: true })
         watch(() => nine.value[1], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 2, Number(newVal.x), Number(newVal.y));
             ///
             if (!isactivearray.value[1]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(1, x, y)
             }
             ///
         }, { deep: true })
         watch(() => nine.value[2], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 3, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[2]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(2, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[3], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 4, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[3]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(3, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[4], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 5, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[4]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(4, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[5], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 6, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[5]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(5, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[6], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 7, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[6]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(6, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[7], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 8, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[7]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(7, x, y)
             }
         }, { deep: true })
         watch(() => nine.value[8], (newVal, oldVal) => {
-            if($store.state.EnableBlending) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
+            if($store.state.enablefusion) set?.setBlendingCorrection($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 9, 9, Number(newVal.x), Number(newVal.y));
             if (!isactivearray.value[8]) {
                 let x = Math.ceil(newVal.x / Proportion.value.x);
-                let y = Math.ceil(((1080 - newVal.y) / Proportion.value.y));
+                let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
                 setdianposin(8, x, y)
             }
         }, { deep: true })
@@ -457,8 +475,8 @@ export default defineComponent({
 
 
         }
-        const save = () => {
-
+        const save=()=>{
+            set?.SaveBlendingConfig("")
         }
         return {
             model,
diff --git a/src/components/FusionSettingsDialog.vue b/src/components/FusionSettingsDialog.vue
index 4d71de5..b693e5d 100644
--- a/src/components/FusionSettingsDialog.vue
+++ b/src/components/FusionSettingsDialog.vue
@@ -1,15 +1,11 @@
 <template>
-  <q-dialog
-    persistent
-    v-model="show_dialog"
-    @keydown="
-      (evt:any) => {
-        if (evt.keyCode == 27) {
-          show_dialog = false;
-        }
+  <q-dialog persistent v-model="show_dialog" @keydown="
+    (evt: any) => {
+      if (evt.keyCode == 27) {
+        show_dialog = false;
       }
-    "
-  >
+    }
+  ">
     <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
       <q-form>
         <!-- @submit="onSubmit" -->
@@ -35,27 +31,15 @@
           <div class="row" style="border: 1px solid;text-align: center;">
             <div class="col-3" style="border-right: 1px solid;">
               <p class="text-center">{{ $t("Projector") }}</p>
-              <projector-item
-                class="w-100"
-                :llabel="$t('Projector') + '1'"
-                :lvalue="'0/0'"
-              ></projector-item>
-              <projector-item
-                class="w-100"
-                :llabel="$t('Projector') + '2'"
-                :lvalue="'0/1'"
-              ></projector-item>
+              <projector-item class="w-100" :llabel="$t('Projector') + '1'" :lvalue="'0/0'"></projector-item>
+              <projector-item class="w-100" :llabel="$t('Projector') + '2'" :lvalue="'1/0'"></projector-item>
               <div class="col-12" style="text-align: center">
-                {{$t('Whether to enable mixing')}}<q-checkbox v-model="EnableBlending" />
+                {{ $t('Whether to enable mixing') }}<q-checkbox v-model="EnableBlending" />
               </div>
             </div>
             <div class="col-9">
               <div class="q-ta-md">
-                <q-btn-toggle
-                  :disable="!$store.state.EnableBlending"
-                  no-caps
-                  v-model="options"
-                  toggle-color="primary"
+                <q-btn-toggle :disable="!$store.state.EnableBlending" no-caps v-model="options" toggle-color="primary"
                   :options="[
                     { label: $t('FusionLocale'), value: 'FusionLocale' },
                     {
@@ -71,8 +55,7 @@
                       value: 'DensityCorrection',
                     },
                     { label: $t('GridSettings'), value: 'GridSettings' },
-                  ]"
-                />
+                  ]" />
               </div>
               <div style="min-height: 72vh">
                 <component :is="options" />
@@ -84,13 +67,7 @@
         <q-separator />
 
         <q-card-actions align="right">
-          <q-btn
-            flat
-            :label="$t('Cancel')"
-            no-caps
-            color="primary"
-            v-close-popup
-          />
+          <q-btn flat :label="$t('Cancel')" no-caps color="primary" v-close-popup />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -115,6 +92,8 @@ import {
   watch,
   computed,
   onMounted,
+  onBeforeMount,
+  onUpdated,
   onBeforeUnmount,
   nextTick,
 } from "vue";
@@ -174,6 +153,12 @@ export default defineComponent({
       { deep: true }
     );
     let data = ref({});
+
+    onBeforeMount(() => {
+      setTimeout(() => {
+        set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnableBlending", tmp.enable);;$store.commit("setfusion_configuration", res?.config);})
+      }, 1000);
+      })
     return {
       show_dialog,
       options,
diff --git a/src/pages/TopToolBar.vue b/src/pages/TopToolBar.vue
index 647036b..39d11bc 100644
--- a/src/pages/TopToolBar.vue
+++ b/src/pages/TopToolBar.vue
@@ -409,7 +409,19 @@
             </q-item-section>
           </q-item>
 
-
+          <q-item
+            clickable
+            v-close-popup
+            @click="$refs.fusion_settings_dialog.showDialog()"
+          >
+            <q-item-section avatar>
+              <!-- <q-icon name="devices" /> -->
+              <q-icon name="open_with" />
+            </q-item-section>
+            <q-item-section>
+              {{ $t("fusion settings") }}
+            </q-item-section>
+          </q-item>
 
           <q-item
             clickable
diff --git a/src/store/index.ts b/src/store/index.ts
index 75380de..39e5b1f 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -77,12 +77,11 @@ export interface StateInterface {
   power_state: boolean;
   product_name: string;
   custom_defines: CustomDefines;
-  fusion_configuration:object;
+  fusion_configuration:string;
   isLedPlayer: () => boolean;
   isSpecialVideo: () => boolean;
-  //
   selected_projector: string;
-  EnableBlending:boolean
+  enablefusion:boolean
 }
 
 // provide typings for `this.$store`
@@ -340,12 +339,12 @@ export default store(function (/* { ssrContext } */) {
       landspace: window.innerWidth > window.innerHeight,
       device_attribute: 0,
       power_state: false,
-      fusion_configuration:{},
+      fusion_configuration:"",
       product_name: EProductNames.LED_PLAYER,
 
       custom_defines: new CustomDefines(),
       selected_projector: "0/0",
-      EnableBlending:false,
+      enablefusion:false,
       isLedPlayer: () => {
         return (
           Store.state.product_name == EProductNames.LED_PLAYER ||
@@ -607,8 +606,8 @@ export default store(function (/* { ssrContext } */) {
       setSelectedProjector(state: StateInterface, playload?: any){
         state.selected_projector = playload;
       },
-      setEnableBlending(state: StateInterface, playload?: any){
-        state.EnableBlending = playload;
+      setEnablefusion(state: StateInterface, playload?: any){
+        state.enablefusion = playload;
       },
       clearSignalSourceTree(state: StateInterface, playload?: any) {
         state.signal_source_tree = [];
@@ -999,6 +998,9 @@ export default store(function (/* { ssrContext } */) {
           state.connect_list.slice(index, 1);
         }
       },
+      setfusion_configuration(state: StateInterface, playload?: any){
+        state.fusion_configuration=playload
+      }
     },
     getters:{
       GetTheCurrentlySelectedCamera(state){