lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lingling:7223e5151788fa33c41216907b41a9bfe3e930ca
Branches Tags
lingling:master_v2_blending
lingling:master_v2
lingling:master_v2_dev
lingling:blending_devnew
lingling:blending_dev
lingling:blending
lingling:blending_canvas
lingling:master
lingling:融合
..
compare: lingling:584f228c91895918644b71022cf9664c7df8a27b
Branches Tags
lingling:master_v2_blending
lingling:master_v2
lingling:master_v2_dev
lingling:blending_devnew
lingling:blending_dev
lingling:blending
lingling:blending_canvas
lingling:master
lingling:融合

No commits in common. "7223e5151788fa33c41216907b41a9bfe3e930ca" and "584f228c91895918644b71022cf9664c7df8a27b" have entirely different histories.
7223e51517 ... 584f228c91

5 changed files with 541 additions and 664 deletions
Show Stats Expand all files Collapse all files

404
src/components/FusionSettings/DensityCorrection.vue
View File

@ -1,137 +1,71 @@
<template> <template>
<div class="row"> <div class="row">
<div class="col-1"></div> <div class="col-2 q-pa-lg"></div>
<div class="col-8 q-pt-md"> <div class="col-2 q-pa-lg"> </div>
<div ref="div" style="width:100%;background-color: aquamarine;height: 100%;"> <div class="col-2 q-pa-lg"> </div>
<div class="col-2 q-pa-lg"> </div>
<div style="position:absolute;"> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[0]" v-if="isshowarray[0]" :w="30" :h="20" <div class="col-2 q-pa-lg">
:x="point_postion[0].x" :y="point_postion[0].y" @mousedown="isactivearray[0] = true" <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[0]" label="" lazy-rules />
:isResizable="false" @moveHandler="moveHandler($event, 0)"><span>{{ $t('point') }}1</span> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[1]" v-if="isshowarray[1]" :w="30" :h="20" <div class="col-2 q-pa-lg"> </div>
:x="point_postion[1].x" :y="point_postion[1].y" @mousedown="isactivearray[1] = true" <div class="col-2 q-pa-lg"> </div>
:isResizable="false" @moveHandler="moveHandler($event, 1)"><span>{{ $t('point') }}2</span> <div class="col-2 q-pa-lg"> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[2]" v-if="isshowarray[2]" :w="30" :h="20" <div class="col-2 q-pa-lg">
:x="point_postion[2].x" :y="point_postion[2].y" @mousedown="isactivearray[2] = true" <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[1]" label="" lazy-rules />
:isResizable="false" @moveHandler="moveHandler($event, 2)"><span>{{ $t('point') }}3</span> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[3]" v-if="isshowarray[3]" :w="30" :h="20" <div class="col-2 q-pa-lg"> </div>
:x="point_postion[3].x" :y="point_postion[3].y" @mousedown="isactivearray[3] = true" <div class="col-2 q-pa-lg"> </div>
:isResizable="false" @moveHandler="moveHandler($event, 3)"><span>{{ $t('point') }}4</span> <div class="col-2 q-pa-lg"> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[4]" v-if="isshowarray[4]" :w="30" :h="20" <div class="col-2 q-pa-lg">
:x="point_postion[4].x" :y="point_postion[4].y" @mousedown="isactivearray[4] = true" <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[2]" label="" lazy-rules />
:isResizable="false" @moveHandler="moveHandler($event, 4)"><span>{{ $t('point') }}5</span> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[5]" v-if="isshowarray[5]" :w="30" :h="20" <div class="col-2 q-pa-lg"> </div>
:x="point_postion[5].x" :y="point_postion[5].y" @mousedown="isactivearray[5] = true" <div class="col-2 q-pa-lg"> </div>
:isResizable="false" @moveHandler="moveHandler($event, 5)"><span>{{ $t('point') }}6</span> <div class="col-2 q-pa-lg"> </div>
</vue3ResizeDrag> <div class="col-2 q-pa-lg"> </div>
<vue3ResizeDrag :isActive="isactivearray[6]" v-if="isshowarray[6]" :w="30" :h="20" <div class="col-2 q-pa-lg">
:x="point_postion[6].x" :y="point_postion[6].y" @mousedown="isactivearray[6] = true" <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
:isResizable="false" @moveHandler="moveHandler($event, 6)"><span>{{ $t('point') }}7</span>
</vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[7]" v-if="false" :w="30" :h="20" :x="point_postion[7].x"
:y="point_postion[7].y" @mousedown="isactivearray[7] = true" :isResizable="false"
@moveHandler="moveHandler($event, 7)"><span>{{ $t('point') }}8</span>
</vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[8]" v-if="isshowarray[8]" :w="30" :h="20"
:x="point_postion[8].x" :y="point_postion[8].y" @mousedown="isactivearray[8] = true"
:isResizable="false" @moveHandler="moveHandler($event, 8)"><span>{{ $t('point') }}8</span>
</vue3ResizeDrag>
<vue3ResizeDrag :isActive="isactivearray[9]" v-if="isshowarray[9]" :w="30" :h="20"
:x="point_postion[9].x" :y="point_postion[9].y" @mousedown="isactivearray[9] = true"
:isResizable="false" @moveHandler="moveHandler($event, 9)"><span>{{ $t('point') }}9</span>
</vue3ResizeDrag>
</div> </div>
</div>
</div>
<div class="col-3 q-pt-md"> <div class="col-2 q-pa-lg"> </div>
<div class="row"> <div class="col-2 q-pa-lg"> </div>
<div class="col-12"> <div class="col-2 q-pa-lg"> </div>
<div class="row"> <div class="col-2 q-pa-lg"> </div>
<div class="col-2"></div> <div class="col-2 q-pa-lg"> </div>
<div class="col-8"><q-input @focus="isactivearray[0] = false" filled type="number" <div class="col-2 q-pa-lg">
class="q-pt-md" :dense="true" v-model="value[0].y" label="y" lazy-rules /> <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[3]" label="" lazy-rules />
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-2"></div>
<div class="col-8"><q-input @focus="isactivearray[1] = false" filled type="number"
class="q-pt-md" :dense="true" v-model="value[1].y" label="y" lazy-rules />
<q-btn color="white" @click="reset(1)" text-color="black" :label="$t('reset')" />
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-2"></div>
<div class="col-8"><q-input @focus="isactivearray[2] = false" filled type="number"
class="q-pt-md" :dense="true" v-model="value[2].y" label="y" lazy-rules />
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-2"></div>
<div class="col-8"><q-input @focus="isactivearray[3] = false" filled type="number"
class="q-pt-md" :dense="true" v-model="value[3].y" label="y" lazy-rules />
<q-btn color="white" @click="reset(3)" text-color="black" :label="$t('reset')" />
</div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-2"></div>
<div class="col-8"><q-input @focus="isactivearray[4] = false" filled type="number"
class="q-pt-md" :dense="true" v-model="value[4].y" label="y" lazy-rules />
<q-btn color="white" @click="reset(4)" text-color="black" :label="$t('reset')" />
</div>
</div>
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col-11">
<div class="row">
<div class="col-1"><q-input filled @focus="isactivearray[5] = false" type="number" class="q-pt-md"
:dense="true" v-model="value[5].x" label="x" lazy-rules />
<q-btn color="white" @click="reset(5)" text-color="black" :label="$t('reset')" />
</div>
<div class="col-1"></div>
<div class="col-1"><q-input filled @focus="isactivearray[6] = false" type="number" class="q-pt-md"
:dense="true" v-model="value[6].x" label="x" lazy-rules />
<q-btn color="white" @click="reset(6)" text-color="black" :label="$t('reset')" />
</div>
<div class="col-1"></div>
<div class="col-1"><q-input filled @focus="isactivearray[2] = false" type="number" class="q-pt-md"
:dense="true" v-model="value[2].x" label="x" lazy-rules />
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
</div>
<div class="col-1"></div>
<div class="col-1"><q-input filled @focus="isactivearray[8] = false" type="number" class="q-pt-md"
:dense="true" v-model="value[8].x" label="x" lazy-rules />
<q-btn color="white" @click="reset(8)" text-color="black" :label="$t('reset')" />
</div>
<div class="col-1"></div>
<div class="col-1"><q-input filled @focus="isactivearray[9] = false" type="number" class="q-pt-md"
:dense="true" v-model="value[9].x" label="x" lazy-rules />
<q-btn color="white" @click="reset(9)" text-color="black" :label="$t('reset')" />
</div>
<div class="col-1"></div>
<div class="col-1 q-pt-xl">
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
</div> </div>
<div class="col-2 q-pa-lg">
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[4]" label="" lazy-rules />
</div> </div>
<div class="col-2 q-pa-lg">
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[5]" label="" lazy-rules />
</div> </div>
<div class="col-2 q-pa-lg">
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[6]" label="" lazy-rules />
</div>
<div class="col-2 q-pa-lg">
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[7]" label="" lazy-rules />
</div>
<div class="col-2 q-pa-lg">
<q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[8]" label="" lazy-rules />
</div>
<div class="col-2 q-pa-lg">
<!-- <q-input filled type="number" class="q-pt-md" :dense="true" v-model="value[9]" label="" lazy-rules /> -->
</div>
</div> </div>
</template> </template>
@ -140,233 +74,23 @@
</style> </style>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive, onMounted } from "vue"; import { defineComponent, ref, watch, computed, defineProps, withDefaults, reactive} from "vue";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import vue3ResizeDrag from "/src/third_lib/vue3-resize-drag/components/vue3-resize-drag/index.vue";
export default defineComponent({ export default defineComponent({
name: "ComponentDensityCorrection", name: "ComponentDensityCorrection",
components: {
vue3ResizeDrag
},
setup() { setup() {
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
const value = reactive([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]); const value=reactive([0,0,0,0,0,0,0,0,0,0,0]);
let model = ref(null); let model = ref(null);
const div = ref();
const isshowarray = ref([true, true, true, true, true, true, true, true, true, true])
const isactivearray = ref([true, true, true, true, true, true, true, true, true, true])
const default_location: any = reactive([]);
let options = ref(['10', '20', '30', '40', '50']); let options = ref(['10', '20', '30', '40', '50']);
let config = JSON.parse($store.state.fusion_configuration).projectors[0];
let Proportion = ref({ x: 0, y: 0 });
const configselsect = computed(() => { return $store.state.selected_projector })
watch(() => configselsect, (newVal, oldVal) => {
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))
}, { deep: true })
const initialization = () => {
for (let index = 0; index < config.hor_density.length; index++) {
value[index].x = config.ver_density[index].x
value[index].y = config.ver_density[index].y
value[index + 5].x = config.hor_density[index].x
value[index + 5].y = config.hor_density[index].y
}
for (let index = 0; index < 10; index++) {
let point_object: object = { active: true, show: true, x: 0, y: 0 }
let default_location_object = { x: 0, y: 0 }
point_postion.push(point_object)
default_location.push(default_location_object)
}
}
const resetall = () => {
for (let index = 0; index < config.hor_density.length + config.ver_density.length; index++) {
reset(index)
}
}
const reset = (index: number) => {
index >= 5 ? value[index].x = config.hor_density[index - 5].def_x : value[index].x = config.ver_density[index].def_x
index >= 5 ? value[index].y = config.hor_density[index - 5].def_y : value[index].y = config.ver_density[index].def_y
point_postion[index].y = default_location[index].y
point_postion[index].x = default_location[index].x
isshowarray.value[index] = false
setTimeout(() => {
isshowarray.value[index] = true
}, 100);
}
const point_postion: any = reactive([])
const moveHandler = ($event: any, index: number) => {
let x = 0
let y = 0
switch (index) {
case 0:
case 1:
case 2:
case 3:
case 4:
x = config.width / 2 + Math.ceil(($event.left - default_location[index].x) * Proportion.value.x);
y = (config.height - (config.height / 4) * index) - Math.ceil(($event.top - default_location[index].y) * Proportion.value.y);
break;
case 5:
case 6:
case 7:
case 8:
case 9:
x = Math.ceil($event.left * Proportion.value.x);
y = config.height / 2 - Math.ceil(($event.top - default_location[index].y) * Proportion.value.y);
break;
default:
}
value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y
}
onMounted(() => {
Proportion.value.x = config.width / (div.value.offsetWidth - 25)
Proportion.value.y = config.height / (div.value.offsetHeight - 25)
let Width = (div.value.offsetWidth - 25) / 4
let Height = (div.value.offsetHeight - 25) / 4
for (let index = 0; index < config.hor_density.length + config.ver_density.length; index++) {
if (index < 5) {
point_postion[index].y = default_location[index].y = Height * index
point_postion[index].x = default_location[index].x = Width * 2
} else {
point_postion[index].y = default_location[index].y = Height * 2
point_postion[index].x = default_location[index].x = Width * (index - 5)
}
}
})
const setdianposin = (index: number, x: number, y: number) => {
point_postion[index].x = x
point_postion[index].y = y
isshowarray.value[index] = false
isactivearray.value[index] = false
setTimeout(() => {
isshowarray.value[index] = true
}, 100);
}
//
watch(() => value[0], (newVal, oldVal) => {
// 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 = default_location[0].x;
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(0, x, y)
}
}, { deep: true })
watch(() => value[1], (newVal, oldVal) => {
// 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[1]) {
let x = default_location[1].x;
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(1, x, y)
}
}, { deep: true })
watch(() => value[2], (newVal, oldVal) => {
//发送x 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[2]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(2, x, y)
}
}, { deep: true })
watch(() => value[3], (newVal, oldVal) => {
// 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[3]) {
let x = default_location[3].x;
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(3, x, y)
}
}, { deep: true })
watch(() => value[4], (newVal, oldVal) => {
// 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[4]) {
let x = default_location[4].x;
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(4, x, y)
}
}, { deep: true })
///
watch(() => value[5], (newVal, oldVal) => {
// 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[5]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = default_location[5].y
setdianposin(5, x, y)
console.log(x, y)
}
}, { deep: true })
watch(() => value[6], (newVal, oldVal) => {
// 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[6]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = default_location[6].y
setdianposin(6, x, y)
}
}, { deep: true })
watch(() => value[7], (newVal, oldVal) => {
// 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[7]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = default_location[7].y
setdianposin(7, x, y)
}
}, { deep: true })
watch(() => value[8], (newVal, oldVal) => {
// 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[8]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = default_location[8].y
setdianposin(8, x, y)
}
}, { deep: true })
watch(() => value[9], (newVal, oldVal) => {
// 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[9]) {
let x = Math.ceil(newVal.x / Proportion.value.x);
let y = default_location[9].y
setdianposin(9, x, y)
}
}, { deep: true })
///
initialization();
return { return {
model, model,
options, options,
value, value
reset,
resetall,
point_postion,
moveHandler,
div,
isshowarray,
isactivearray
}; };
}, },
}); });

267
src/components/FusionSettings/FourPointCalibration.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div class="row"> <div class="row">
<div class="col-2"> <div class="col-2">
<q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" <q-input filled type="number" class="q-pt-md" style="text-align: center;" :dense="true" @focus="isactivearray[0] = false"
@focus="isactivearray[0] = false" v-model="four[0].x" label="x" lazy-rules /> v-model="four[0].x" label="x" lazy-rules />
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false" <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[0] = false"
v-model="four[0].y" label="y" lazy-rules /> v-model="four[0].y" label="y" lazy-rules />
<q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" /> <q-btn color="white" @click="reset(0)" text-color="black" :label="$t('reset')" />
@ -19,28 +19,23 @@
</div> </div>
<div class="col-2"></div> <div class="col-2"></div>
<div class="col-8"> <div class="col-8"> <div ref="div" style="background-color: #7fffd4;height: 40vh;">
<div ref="div" style="background-color: #7fffd4;height: 40vh;">
<div style="position:absolute;"> <div style="position:absolute;">
<vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)" <vue3ResizeDrag v-if="isshowarray[0]" :isActive="isactivearray[0]" @mousedown="activeMouseDown(0)"
@mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="points[0].x" :y="points[0].y" @mouseUpHandler="mouseUpHandler(0)" :w="30" :h="20" :x="x1" :y="y1" :isResizable="false"
:isResizable="false" @moveHandler="moveHandler_1"><span>{{ $t('point') }}1</span> @moveHandler="moveHandler_1"><span>{{$t('point')}}1</span>
</vue3ResizeDrag> </vue3ResizeDrag>
<vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)" <vue3ResizeDrag v-if="isshowarray[1]" :isActive="isactivearray[1]" @mousedown="activeMouseDown(1)"
@mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="points[1].x" :y="points[1].y" @mouseUpHandler="mouseUpHandler(1)" :w="30" :h="20" :x="point2.x" :y="point2.y"
:isResizable="false" @moveHandler="moveHandler_2"><span>{{ $t('point') }}2</span> :isResizable="false" @moveHandler="moveHandler_2"><span>{{$t('point')}}2</span> </vue3ResizeDrag>
</vue3ResizeDrag>
<vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)" <vue3ResizeDrag v-if="isshowarray[2]" :isActive="isactivearray[2]" @mousedown="activeMouseDown(2)"
@mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="points[2].x" :y="points[2].y" @mouseUpHandler="mouseUpHandler(2)" :w="30" :h="20" :x="point3.x" :y="point3.y"
:isResizable="false" @moveHandler="moveHandler_3"><span>{{ $t('point') }}3</span> :isResizable="false" @moveHandler="moveHandler_3"><span>{{$t('point')}}3</span> </vue3ResizeDrag>
</vue3ResizeDrag>
<vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)" <vue3ResizeDrag v-if="isshowarray[3]" :isActive="isactivearray[3]" @mousedown="activeMouseDown(3)"
@mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="points[3].x" :y="points[3].y" @mouseUpHandler="mouseUpHandler(3)" :w="30" :h="20" :x="point4.x" :y="point4.y"
:isResizable="false" @moveHandler="moveHandler_4"><span>{{ $t('point') }}4</span> :isResizable="false" @moveHandler="moveHandler_4"><span>{{$t('point')}}4</span> </vue3ResizeDrag>
</vue3ResizeDrag>
</div>
</div>
</div> </div>
</div></div>
<div class="col-2"></div> <div class="col-2"></div>
<div class="col-2"> <div class="col-2">
@ -51,8 +46,7 @@
<q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" /> <q-btn color="white" @click="reset(2)" text-color="black" :label="$t('reset')" />
</div> </div>
<div class="col-8"> <div class="col-8">
<q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" <q-btn color="white" @click="resetall" text-color="black" :label="$t('resetall')" /><q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
@click="save" text-color="black" :label="$t('save config')" />
</div> </div>
<div class="col-2"> <div class="col-2">
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false" <q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false"
@ -86,56 +80,34 @@ export default defineComponent({
setup() { setup() {
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
let config = JSON.parse($store.state.fusion_configuration).projectors[0]; const setIndexProjector = () => {
console.log($store.state.selected_projector);
};
let config=JSON.parse($store.state.fusion_configuration).projectors[0];
let set = GlobalData.getInstance().getCurrentClient(); let set = GlobalData.getInstance().getCurrentClient();
const configselsect = computed(() => { return $store.state.selected_projector }) 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 serverconfig = JSON.parse($store.state.fusion_configuration);
const selectedprojector = computed(() => {
return $store.getters.GetTheCurrentlySelectedCamera[0] * serverconfig.col + $store.getters.GetTheCurrentlySelectedCamera[1]
})
const set_cache: any = ref([]);
//
//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 four = reactive([{ 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 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 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 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 div: any = ref(null);
let Proportion = ref({ x: 0, y: 0 });//缩放比例 // let div2: any = ref(null);
let points = reactive([{ x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }, { x: 0, y: 0 }]);//点的位置 let options = ref(['10', '20', '30', '40', '50']);
let Proportion = ref({ x: 0, y: 0 });
let point1 = reactive({ x: 0, y: 0 });
let point2 = ref({ x: 0, y: 0 });
let point3 = ref({ x: 0, y: 0 });
let point4 = ref({ x: 0, y: 0 });
const isshowarray = ref([true, true, true, true]) const isshowarray = ref([true, true, true, true])
const isactivearray = ref([true, true, true, true]) const isactivearray = ref([true, true, true, true])
const x1 = ref(0);
const y1 = ref(0);
const { offset } = dom
const save = () => { const save=()=>{
set?.SaveBlendingConfig("") set?.SaveBlendingConfig("")
setTimeout(() => {
set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
}, 1000);
}
///
const use_set_cache = () => {
if (set_cache.value[selectedprojector.value]) {
let tmp = JSON.parse(set_cache.value[selectedprojector.value]);
deepcopy(four, tmp)
syncpoint()
}
};
const deepcopy = (o1: any, o2: any) => {
for (let k in o2) {
if (typeof o2[k] === 'object') {
o1[k] = {};
deepcopy(o1[k], o2[k]);
} else {
o1[k] = o2[k];
}
}
}
const save_set_cache = () => {
set_cache.value[selectedprojector.value] = JSON.stringify(four);
} }
///
const activeMouseDown = (index: number) => { const activeMouseDown = (index: number) => {
isactivearray.value[index] = true isactivearray.value[index] = true
} }
@ -148,19 +120,21 @@ export default defineComponent({
}) })
const setpoa = () => { const setpoa = () => {
console.log(config);
point1.x = 0
point1.y = 0
points[0].x = 0 x1.value = 0
points[0].y = 0 y1.value = 0
points[1].x = div.value.offsetWidth - 25 point2.value.x = div.value.offsetWidth - 25
points[1].y = 0 point2.value.y = 0
points[2].x = 0 point3.value.x = 0
points[2].y = div.value.offsetHeight - 25 point3.value.y = div.value.offsetHeight - 25
points[3].x = div.value.offsetWidth - 25
points[3].y = div.value.offsetHeight - 25
point4.value.x = div.value.offsetWidth - 25
point4.value.y = div.value.offsetHeight - 25
fourpostion.value[0].x = 0 fourpostion.value[0].x = 0
@ -178,161 +152,179 @@ export default defineComponent({
Proportion.value.x = config.width / (div.value.offsetWidth - 25) Proportion.value.x = config.width / (div.value.offsetWidth - 25)
Proportion.value.y = config.height / (div.value.offsetHeight - 25) Proportion.value.y = config.height / (div.value.offsetHeight - 25)
for (let index = 0; index < fourpostion.value.length; index++) { for (let index = 0; index < fourpostion.value.length; index++) {
defaultfourpostion.value[index].x = fourpostion.value[index].x; defaultfourpostion.value[index].x = fourpostion.value[index].x ;
defaultfourpostion.value[index].y = fourpostion.value[index].y; defaultfourpostion.value[index].y = fourpostion.value[index].y;
defaultfour.value[index].x = config.point4[index].def_x defaultfour.value[index].x=config.point4[index].def_x
defaultfour.value[index].y = config.point4[index].def_y defaultfour.value[index].y=config.point4[index].def_y
four[index].x = config.point4[index].x
four[index].y = config.point4[index].y
} }
syncpoint()
} }
watch(() => four[0], (newVal, oldVal) => { watch(() => four.value[0], (newVal, oldVal) => {
if ($store.state.enablefusion) 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]) { if (!isactivearray.value[0]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y)); let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
points[0].x = x x1.value = x
points[0].y = y y1.value = y
isshowarray.value[0] = false isshowarray.value[0] = false
isactivearray.value[0] = false isactivearray.value[0] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[0] = true isshowarray.value[0] = true
}, 100); }, 100);
save_set_cache() ///
} }
}, { deep: true }) }, { deep: true })
watch(() => four[1], (newVal, oldVal) => { watch(() => four.value[1], (newVal, oldVal) => {
if ($store.state.enablefusion) 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]) { if (!isactivearray.value[1]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y)); let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
points[1].x = x point2.value.x = x
points[1].y = y point2.value.y = y
isshowarray.value[1] = false isshowarray.value[1] = false
isactivearray.value[1] = false isactivearray.value[1] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[1] = true isshowarray.value[1] = true
}, 100); }, 100);
save_set_cache()
} }
///
}, { deep: true }) }, { deep: true })
watch(() => four[2], (newVal, oldVal) => { watch(() => four.value[2], (newVal, oldVal) => {
if ($store.state.enablefusion) 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]) { if (!isactivearray.value[2]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y)); let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
points[2].x = x point3.value.x = x
points[2].y = y point3.value.y = y
isshowarray.value[2] = false isshowarray.value[2] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[2] = true isshowarray.value[2] = true
}, 100); }, 100);
save_set_cache()
} }
///
}, { deep: true }) }, { deep: true })
watch(() => four[3], (newVal, oldVal) => { watch(() => four.value[3], (newVal, oldVal) => {
if ($store.state.enablefusion) 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]) { if (!isactivearray.value[3]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y)); let y = Math.ceil((config.height / Proportion.value.y) - (newVal.y / Proportion.value.y));
points[3].x = x point4.value.x = x
points[3].y = y point4.value.y = y
isshowarray.value[3] = false isshowarray.value[3] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[3] = true isshowarray.value[3] = true
}, 100); }, 100);
save_set_cache()
} }
///
}, { deep: true }) }, { deep: true })
///
watch(() => configselsect, (newVal, oldVal) => { watch(() => configselsect, (newVal, oldVal) => {
let tmp = JSON.parse($store.state.fusion_configuration); //console.log(newVal);
let fortmp = null let tmp=JSON.parse($store.state.fusion_configuration);
let fortmp=null
let i let i
for (i of tmp.projectors) { for(i of tmp.projectors){
if (i.col === $store.getters.GetTheCurrentlySelectedCamera[1] && i.row === $store.getters.GetTheCurrentlySelectedCamera[0]) { if(i.col===$store.getters.GetTheCurrentlySelectedCamera[0]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[1]){
fortmp = JSON.parse(JSON.stringify(i)) fortmp=JSON.parse(JSON.stringify(i))
} }
} }
config = JSON.parse(JSON.stringify(fortmp)) config=JSON.parse(JSON.stringify(fortmp))
setpoa(); console.log(config)
use_set_cache()
}, { deep: true }) }, { deep: true })
//为了加载 缓存的配置时 同步点的位置
const syncpoint=()=>{
for (let index = 0; index < fourpostion.value.length; index++) {
isactivearray.value[index]=false
}
}
const reset = (index: number) => { const reset = (index: number) => {
fourpostion.value[index].x = defaultfourpostion.value[index].x; if (index == 0) {
fourpostion.value[index].y = defaultfourpostion.value[index].y; four.value[0].x = 0
four.value[0].y = 1080
four[index].x = config.point4[index].def_x point1.x = 0
four[index].y = config.point4[index].def_y point1.y = 0
x1.value = 0
y1.value = 0
}
if (index == 1) {
four.value[1].x = 1920
four.value[1].y = 1080
fourpostion.value[1].x = div.value.offsetWidth - 25
fourpostion.value[1].y = 0
}
if (index == 2) {
four.value[2].x = 0
four.value[2].y = 0
fourpostion.value[2].x = 0
fourpostion.value[2].y = div.value.offsetHeight - 25
}
if (index == 3) {
four.value[3].x = 1920
four.value[3].y = 0
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 isshowarray.value[index] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true isshowarray.value[index] = true
}, 100); }, 100);
save_set_cache()
} }
const resetall = () => { const resetall=()=>{
for (let index = 0; index < fourpostion.value.length; index++) { for (let index = 0; index < fourpostion.value.length; index++) {
fourpostion.value[index].x = defaultfourpostion.value[index].x fourpostion.value[index].x=defaultfourpostion.value[index].x
fourpostion.value[index].y = defaultfourpostion.value[index].y fourpostion.value[index].y=defaultfourpostion.value[index].y
four[index].x = defaultfour.value[index].x four.value[index].x=defaultfour.value[index].x
four[index].y = defaultfour.value[index].y four.value[index].y=defaultfour.value[index].y
isshowarray.value[index] = false isshowarray.value[index] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true isshowarray.value[index] = true
}, 100); }, 100);
} }
save_set_cache()
} }
const moveHandler_1 = (data: any) => { const moveHandler_1 = (data: any) => {
let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0); let x = Math.ceil((data.left - fourpostion.value[0].x) * Proportion.value.x + 0);
let y = Math.ceil((config.height - 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[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x; four.value[0].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
four[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y; four.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
isactivearray.value[0] = true isactivearray.value[0] = true
save_set_cache()
} }
const moveHandler_2 = (data: any) => { const moveHandler_2 = (data: any) => {
//y0 xconfig.width
let x = Math.ceil((data.left - fourpostion.value[1].x) * Proportion.value.x + config.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)); let y = Math.ceil((config.height - data.top * Proportion.value.y - fourpostion.value[1].y));
four[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x; four.value[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
four[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y; four.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
save_set_cache() //console.log("x :"+x+" y:"+y)
} }
const moveHandler_3 = (data: any) => { const moveHandler_3 = (data: any) => {
let x = Math.ceil((data.left - fourpostion.value[2].x) * Proportion.value.x); 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)); let y = Math.abs(Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y));
four[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x; four.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
four[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y; four.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
save_set_cache() console.log("x :" + x + " y:" + y)
//console.log("x :" + data.left + " y:" + (1370-data.top));
} }
const moveHandler_4 = (data: any) => { const moveHandler_4 = (data: any) => {
let x = Math.ceil((data.left - fourpostion.value[3].x) * Proportion.value.x + config.width); 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)); let y = Math.abs(Math.ceil((data.top - fourpostion.value[3].y) * Proportion.value.y));
four[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x; four.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
four[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y; four.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
save_set_cache() //console.log("x :"+x+" y:"+y)
} }
return { return {
div, div,
options,
fourpostion, fourpostion,
reset, reset,
resetall, resetall,
@ -342,11 +334,16 @@ export default defineComponent({
moveHandler_4, moveHandler_4,
four, four,
save, save,
point1,
point2,
point3,
point4,
x1,
y1,
isshowarray, isshowarray,
isactivearray, isactivearray,
activeMouseDown, activeMouseDown,
mouseUpHandler, mouseUpHandler
points
}; };
}, },
}); });

342
src/components/FusionSettings/FusionLocale.vue
View File

@ -1,23 +1,34 @@
<template> <template>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<p class="text-center">{{ $t('Set the fusion band width') }}</p> <p class="text-center">{{$t('Set the fusion band width')}}</p>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="row"> <div class="row">
<div class="col-4 offset-4"> <div class="col-4 offset-4">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<q-toggle class="float-right" v-model="array[0].isshow" label="" /> <q-toggle
class="float-right"
v-model="array2[selectedprojector][0].isshow"
label=""
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled type="number" @focus="group = 0" v-model="array[0].value" <q-input
:label="$t('upper fusion zone parameters')" lazy-rules :rules="[ filled
type="number"
@focus="group = 0"
v-model="array2[selectedprojector][0].value"
:label="$t('upper fusion zone parameters')"
lazy-rules
:rules="[
(val) => (val) =>
(val !== null && val !== '') || $t('Please enter a number'), (val !== null && val !== '') || $t('Please enter a number'),
(val) => (val) =>
(val > -1 && val < 1080) || $t('Please enter 0-100'), (val > -1 && val < 1080) || $t('Please enter 0-100'),
]" /> ]"
/>
</div> </div>
</div> </div>
</div> </div>
@ -28,32 +39,54 @@
<div class="col-6"> <div class="col-6">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<q-toggle class="float-right" v-model="array[1].isshow" label="" /> <q-toggle
class="float-right"
v-model="array2[selectedprojector][1].isshow"
label=""
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled type="number" @focus="group = 1" v-model="array[1].value" <q-input
:label="$t('Left fusion Band Parameters')" lazy-rules :rules="[ filled
type="number"
@focus="group = 1"
v-model="array2[selectedprojector][1].value"
:label="$t('Left fusion Band Parameters')"
lazy-rules
:rules="[
(val) => (val) =>
(val !== null && val !== '') || $t('Please enter a number'), (val !== null && val !== '') || $t('Please enter a number'),
(val) => (val) =>
(val > -1 && val < 1920) || $t('Please enter 0-100'), (val > -1 && val < 1920) || $t('Please enter 0-100'),
]" /> ]"
/>
</div> </div>
</div> </div>
</div> </div>
<div class="col-6"> <div class="col-6">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<q-toggle class="float-right" v-model="array[2].isshow" label="" /> <q-toggle
class="float-right"
v-model="array2[selectedprojector][2].isshow"
label=""
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled type="number" @focus="group = 2" v-model="array[2].value" <q-input
:label="$t('Right fusion Band Parameters')" lazy-rules :rules="[ filled
type="number"
@focus="group = 2"
v-model="array2[selectedprojector][2].value"
:label="$t('Right fusion Band Parameters')"
lazy-rules
:rules="[
(val) => (val) =>
(val !== null && val !== '') || $t('Please enter a number'), (val !== null && val !== '') || $t('Please enter a number'),
(val) => (val) =>
(val > -1 && val < 1920) || $t('Please enter 0-100'), (val > -1 && val < 1920) || $t('Please enter 0-100'),
]" /> ]"
/>
</div> </div>
</div> </div>
</div> </div>
@ -64,16 +97,27 @@
<div class="col-4 offset-4"> <div class="col-4 offset-4">
<div class="row"> <div class="row">
<div class="col-6"> <div class="col-6">
<q-toggle class="float-right" v-model="array[3].isshow" label="" /> <q-toggle
class="float-right"
v-model="array2[selectedprojector][3].isshow"
label=""
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<q-input filled type="number" @focus="group = 3" v-model="array[3].value" <q-input
:label="$t('Lower fusion Zone Parameters')" lazy-rules :rules="[ filled
type="number"
@focus="group = 3"
v-model="array2[selectedprojector][3].value"
:label="$t('Lower fusion Zone Parameters')"
lazy-rules
:rules="[
(val) => (val) =>
(val !== null && val !== '') || $t('Please enter a number'), (val !== null && val !== '') || $t('Please enter a number'),
(val) => (val) =>
(val > -1 && val < 1080) || $t('Please enter 0-100'), (val > -1 && val < 1080) || $t('Please enter 0-100'),
]" /> ]"
/>
</div> </div>
</div> </div>
</div> </div>
@ -82,28 +126,54 @@
</div> </div>
</div> </div>
<div v-if="!(group == 4) && array[group].isshow" class="col-4 offset-4"> <div v-if="!(group == 4) && array2[selectedprojector][group].isshow" class="col-4 offset-4">
<p class="text-center">{{ $t('Set Fusion Band Parameters') }}</p> <p class="text-center">{{$t('Set Fusion Band Parameters')}}</p>
<div style="display: flex; justify-content: space-evenly"> <div style="display: flex; justify-content: space-evenly">
<div> <div>
<q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green" <q-slider
vertical reverse label-always /> 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> <p class="text-center">alpha</p>
</div> </div>
<div> <div>
<q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="2.5" :step="0.01" color="green" <q-slider
vertical reverse label-always /> 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> <p class="text-center">p</p>
</div> </div>
<div> <div>
<q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="2.5" :step="0.01" color="green" <q-slider
vertical reverse label-always /> 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> <p class="text-center">gamma</p>
</div> </div>
</div> </div>
<q-btn color="white" @click="save" text-color="black" :label="$t('save config')" />
</div> </div>
</div> </div>
</template> </template>
@ -135,162 +205,196 @@ export default defineComponent({
let set = GlobalData.getInstance().getCurrentClient(); let set = GlobalData.getInstance().getCurrentClient();
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
const age = ref(0);
const standard = ref(0);
const group = ref(4); const group = ref(4);
const set_cache: any = ref([]); const enablefusion=ref(false);
const enablefusion = ref(false); let array: any = ref([
let array: any = reactive([ { alpha: 0, p: 0, gamma: 0 },
{ alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 }, { alpha: 0, p: 0, gamma: 0 },
{ alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 }, { alpha: 0, p: 0, gamma: 0 },
{ alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 }, { alpha: 0, p: 0, gamma: 0 },
{ alpha: 0, p: 0, gamma: 0, isshow: false, value: 0 }, { alpha: 0, p: 0, gamma: 0 },
]); ]);
let serverconfig=JSON.parse($store.state.fusion_configuration); let array2: any = reactive([[
const selectedprojector = computed(() => { { isshow: false, value: 0 },
return $store.getters.GetTheCurrentlySelectedCamera[0]*serverconfig.col+$store.getters.GetTheCurrentlySelectedCamera[1] { isshow: false, value: 0 },
{ isshow: false, value: 0 },
{ isshow: false, value: 0 },
],[
{ isshow: false, value: 0 },
{ isshow: false, value: 0 },
{ isshow: false, value: 0 },
{ isshow: false, value: 0 },
]]);
const selectedprojector=computed(()=>{
return $store.state.selected_projector=="0/0"?0:1
}) })
const options = ref([
const use_set_cache = () => { {
if (set_cache.value[selectedprojector.value]) { label: "上融合带参数",
let tmp = JSON.parse(set_cache.value[selectedprojector.value]); value: 0,
deepcopy(array, tmp) },
} {
}; label: "左融合带参数",
const deepcopy = (o1: any, o2: any) => { value: 1,
for (let k in o2) { },
if (typeof o2[k] === 'object') { {
o1[k] = {}; label: "右融合带参数",
deepcopy(o1[k], o2[k]); value: 2,
} else { },
o1[k] = o2[k]; {
} label: "下融合带参数",
} value: 3,
} },
const save_set_cache = () => { ]);
set_cache.value[selectedprojector.value] = JSON.stringify(array); const accept = ref(false);
} const text = ref("");
let config = JSON.parse($store.state.fusion_configuration).projectors[0]; const model = computed({
const configselsect = computed(() => { return $store.state.selected_projector }) get() {
watch(() => configselsect, (newVal, oldVal) => { return $store.state.selected_projector;
let tmp = JSON.parse($store.state.fusion_configuration); },
let fortmp = null set(newValue) {
let i $store.commit("setSelectedProjector", newValue);
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))
startconfig()
use_set_cache()
}, { deep: true })
const chang = (type: string) => { const chang = (type: string) => {
if (type == "alpha") { if (type == "alpha") {
if ($store.state.enablefusion) set?.setBlendingAlphaParam( if($store.state.enablefusion)set?.setBlendingAlphaParam(
$store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[0],
$store.getters.GetTheCurrentlySelectedCamera[1], $store.getters.GetTheCurrentlySelectedCamera[1],
group.value, group.value,
array[group.value].alpha array.value[group.value].alpha
); );
} }
if (type == "p") { if (type == "p") {
if ($store.state.enablefusion) set?.setBlendingPowerParam( if($store.state.enablefusion)set?.setBlendingPowerParam(
$store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[0],
$store.getters.GetTheCurrentlySelectedCamera[1], $store.getters.GetTheCurrentlySelectedCamera[1],
group.value, group.value,
array[group.value].p array.value[group.value].p
); );
} }
if (type == "gamma") { if (type == "gamma") {
if ($store.state.enablefusion) set?.setBlendingGammaParam( if($store.state.enablefusion)set?.setBlendingGammaParam(
$store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[0],
$store.getters.GetTheCurrentlySelectedCamera[1], $store.getters.GetTheCurrentlySelectedCamera[1],
group.value, group.value,
array[group.value].gamma array.value[group.value].gamma
); );
} }
save_set_cache(); //console.log("giao")
}; };
const startconfig = () => { //0：左融合带，1：上融合带，2：右融合带，3：下融合带
for (let index = 0; index < array.length; index++) { watch(
array[index].gamma = config.params[index].gamma () => array2[0][0],
array[index].alpha = config.params[index].alpha (newVal, oldVal) => {
array[index].p = config.params[index].power if($store.state.enablefusion)set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1],1,array2[0][0].isshow,Number(array2[0][0].value));
array[index].isshow = config.params[index].enable if(!array2[0][0].isshow){
array[index].value = Number(config.params[index].size) array2[0][0].value=0
} }
},
{ deep: true }
);
watch(
() => array2[0][1],
(newVal, oldVal) => {
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
} }
startconfig() },
{ deep: true }
);
watch(
() => array2[0][2],
(newVal, oldVal) => {
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
}
},
{ deep: true }
);
watch(
() => array2[0][3],
(newVal, oldVal) => {
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
}
},
{ deep: true }
);
///
watch( watch(
() => array[0], () => array2[1][0],
(newVal, oldVal) => { (newVal, oldVal) => {
if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 1, array[0].isshow, Number(array[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 (!array[0].isshow) { if(!array2[1][0].isshow){
array[0].value = 0 array2[1][0].value=0
} }
save_set_cache()
}, },
{ deep: true } { deep: true }
); );
watch( watch(
() => array[1], () => array2[1][1],
(newVal, oldVal) => { (newVal, oldVal) => {
if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 0, array[1].isshow, Number(array[1].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 (!array[1].isshow) { if(!array2[1][1].isshow){
array[1].value = 0 array2[1][1].value=0
} }
save_set_cache()
}, },
{ deep: true } { deep: true }
); );
watch( watch(
() => array[2], () => array2[1][2],
(newVal, oldVal) => { (newVal, oldVal) => {
if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 2, array[2].isshow, Number(array[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 (!array[2].isshow) { if(!array2[1][2].isshow){
array[2].value = 0 array2[1][2].value=0
} }
save_set_cache()
}, },
{ deep: true } { deep: true }
); );
watch( watch(
() => array[3], () => array2[1][3],
(newVal, oldVal) => { (newVal, oldVal) => {
if ($store.state.enablefusion) set?.SetBlendingOverlap($store.getters.GetTheCurrentlySelectedCamera[0], $store.getters.GetTheCurrentlySelectedCamera[1], 3, array[3].isshow, Number(array[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 (!array[3].isshow) { if(!array2[1][3].isshow){
array[3].value = 0 array2[1][3].value=0
} }
save_set_cache()
}, },
{ deep: true } { deep: true }
); );
///
watch( watch(
() => enablefusion, () => enablefusion,
(newVal, oldVal) => { (newVal, oldVal) => {
$store.commit('setenablefusion', newVal.value); $store.commit('setenablefusion',newVal.value);
set?.EnableBlending(newVal.value); set?.EnableBlending(newVal.value);
}, { deep: true } },{ deep: true }
); );
const changenablefusion = () => { const changenablefusion=()=>{
$store.commit('setenablefusion', enablefusion.value); $store.commit('setenablefusion',enablefusion.value);
}
const save = () => {
set?.SaveBlendingConfig("")
setTimeout(() => {
set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
}, 1000);
} }
return { return {
model,
age,
accept,
standard,
options,
group, group,
text,
array, array,
chang, chang,
enablefusion, enablefusion,
array2,
changenablefusion, changenablefusion,
selectedprojector, selectedprojector
save
}; };
}, },
}); });

136
src/components/FusionSettings/SurfaceCorrection.vue
View File

@ -85,6 +85,7 @@
:y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false" :y="ninepostion[8].y" @mousedown="activeMouseDown(8)" :isResizable="false"
@moveHandler="moveHandler_9"><span>{{ $t('point') }}9</span> </vue3ResizeDrag> @moveHandler="moveHandler_9"><span>{{ $t('point') }}9</span> </vue3ResizeDrag>
</div> </div>
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-2">
@ -158,6 +159,9 @@ export default defineComponent({
setup() { setup() {
let $store = useStore(); let $store = useStore();
let $t = useI18n(); let $t = useI18n();
const setIndexProjector = () => {
console.log($store.state.selected_projector);
};
let config=JSON.parse($store.state.fusion_configuration).projectors[0]; let config=JSON.parse($store.state.fusion_configuration).projectors[0];
const configselsect = computed(() => {return $store.state.selected_projector}) const configselsect = computed(() => {return $store.state.selected_projector})
let Proportion = ref({ x: 0, y: 0 }); let Proportion = ref({ x: 0, y: 0 });
@ -165,6 +169,7 @@ export default defineComponent({
const div = ref(); const div = ref();
let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]); let nine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]); let defaultnine = ref([{ x: 0, y: 1080 }, { x: 960, y: 1920 }, { x: 1920, y: 1080 }, { x: 0, y: 540 }, { x: 960, y: 540 }, { x: 1920, y: 540 }, { x: 0, y: 0 }, { x: 960, y: 0 }, { x: 1920, y: 0 }]);
///
const activeMouseDown = (index: number) => { const activeMouseDown = (index: number) => {
isactivearray.value[index] = true isactivearray.value[index] = true
} }
@ -175,87 +180,83 @@ export default defineComponent({
const moveHandler_1 = (data: any) => { const moveHandler_1 = (data: any) => {
let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x); let x = Math.ceil((data.left - ninepostion.value[0].x) * Proportion.value.x);
let y = config.height - 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 > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[0].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_2 = (data: any) => { const moveHandler_2 = (data: any) => {
let x = config.width/2 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x); let x = 960 + Math.ceil((data.left - ninepostion.value[1].x) * centor.value.x);
let y = config.height - 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 > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[1].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_3 = (data: any) => { const moveHandler_3 = (data: any) => {
let x = config.width + Math.ceil((data.left - ninepostion.value[2].x) * Proportion.value.x); 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); let y = config.height - Math.ceil((data.top - ninepostion.value[2].y) * Proportion.value.y);
nine.value[2].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[2].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_4 = (data: any) => { const moveHandler_4 = (data: any) => {
let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x); let x = Math.ceil((data.left - ninepostion.value[3].x) * Proportion.value.x);
let y = config.height/2 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y); let y = 530 - Math.ceil((data.top - ninepostion.value[3].y) * Proportion.value.y);
nine.value[3].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[3].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_5 = (data: any) => { const moveHandler_5 = (data: any) => {
let x = config.width/2 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x); let x = 960 + Math.ceil((data.left - ninepostion.value[4].x) * centor.value.x);
let y = config.height/2 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y); let y = 530 - Math.ceil((data.top - ninepostion.value[4].y) * Proportion.value.y);
nine.value[4].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[4].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_6 = (data: any) => { const moveHandler_6 = (data: any) => {
let x = config.width + 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 = config.height/2 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y); let y = 530 - Math.ceil((data.top - ninepostion.value[5].y) * Proportion.value.y);
nine.value[5].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[5].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_7 = (data: any) => { const moveHandler_7 = (data: any) => {
let x = Math.ceil((data.left - ninepostion.value[6].x) * Proportion.value.x); 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)); let y = Math.abs(Math.ceil((data.top - ninepostion.value[6].y) * Proportion.value.y));
nine.value[6].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[6].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_8 = (data: any) => { const moveHandler_8 = (data: any) => {
let x = config.width/2 + Math.ceil((data.left - ninepostion.value[7].x) * Proportion.value.x); 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));; let y = Math.abs(Math.ceil((data.top - ninepostion.value[7].y) * Proportion.value.y));;
nine.value[7].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[7].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
const moveHandler_9 = (data: any) => { const moveHandler_9 = (data: any) => {
let x = config.width + 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)); let y = Math.abs(Math.ceil((data.top - ninepostion.value[8].y) * Proportion.value.y));
nine.value[8].x = x > config.width ? config.width : x && x < 0 ? 0 : x; 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 nine.value[8].y = y > config.height ? config.height : y && y < 0 ? 0 : y
} }
watch(() => configselsect, (newVal, oldVal) => { watch(() => configselsect, (newVal, oldVal) => {
//console.log(newVal);
let tmp=JSON.parse($store.state.fusion_configuration); let tmp=JSON.parse($store.state.fusion_configuration);
let fortmp=null let fortmp=null
let i let i
for(i of tmp.projectors){ for(i of tmp.projectors){
if(i.col === $store.getters.GetTheCurrentlySelectedCamera[1] && i.row === $store.getters.GetTheCurrentlySelectedCamera[0]){ if(i.col===$store.getters.GetTheCurrentlySelectedCamera[1]&&i.row===$store.getters.GetTheCurrentlySelectedCamera[0]){
fortmp=JSON.parse(JSON.stringify(i)) fortmp=JSON.parse(JSON.stringify(i))
} }
} }
config=JSON.parse(JSON.stringify(fortmp)) config=JSON.parse(JSON.stringify(fortmp))
startpostion(); console.log(config)
setninepostion();
}, { deep: true }) }, { deep: true })
onMounted(() => { onMounted(() => {
startpostion(); startpostion();
for (let index = 0; index < defaultninepostion.value.length; index++) {
defaultninepostion.value[index].x = ninepostion.value[index].x;
defaultninepostion.value[index].y = ninepostion.value[index].y;
defaultnine.value[index].x = config.point9[index].def_x
defaultnine.value[index].y = config.point9[index].def_y
}
setninepostion();
}) })
const setninepostion=()=>{
for (let index = 0; index < defaultninepostion.value.length; index++) {
nine.value[index].x=config.point9[index].x
nine.value[index].y=config.point9[index].y
}
}
setninepostion();
const startpostion = () => { const startpostion = () => {
ninepostion.value[0].x = 0 ninepostion.value[0].x = 0
ninepostion.value[0].y = 0 ninepostion.value[0].y = 0
@ -299,12 +300,68 @@ export default defineComponent({
} }
///
const reset = (index: number) => { const reset = (index: number) => {
ninepostion.value[index].x = defaultninepostion.value[index].x; if (index == 0 || index == -1) {
ninepostion.value[index].y = defaultninepostion.value[index].y; nine.value[0].x = 0
nine.value[0].y = 1080
ninepostion.value[0].x = 0
ninepostion.value[0].y = 0
}
if (index == 1 || index == -1) {
nine.value[1].x = 960
nine.value[1].y = 1080
ninepostion.value[1].x = div.value.offsetWidth / 2 - 25
ninepostion.value[1].y = 0
}
if (index == 2 || index == -1) {
nine.value[2].x = 1920
nine.value[2].y = 1080
ninepostion.value[2].x = div.value.offsetWidth - 25
ninepostion.value[2].y = 0
}
if (index == 3 || index == -1) {
nine.value[3].x = 0
nine.value[3].y = 540
ninepostion.value[3].x = 0
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8
}
if (index == 4 || index == -1) {
nine.value[4].x = 960
nine.value[4].y = 540
ninepostion.value[4].x = div.value.offsetWidth / 2 - 25
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8
}
if (index == 5 || index == -1) {
nine.value[5].x = 1920
nine.value[5].y = 540
nine.value[index].x = config.point9[index].def_x ninepostion.value[5].x = div.value.offsetWidth - 25
nine.value[index].y = config.point9[index].def_y ninepostion.value[5].y = div.value.offsetHeight / 2
}
if (index == 6 || index == -1) {
nine.value[6].x = 0
nine.value[6].y = 0
ninepostion.value[6].x = 0
ninepostion.value[6].y = div.value.offsetHeight - 25
}
if (index == 7 || index == -1) {
nine.value[7].x = 960
nine.value[7].y = 0
ninepostion.value[7].x = div.value.offsetWidth / 2
ninepostion.value[7].y = div.value.offsetHeight - 25
}
if (index == 8 || index == -1) {
nine.value[8].x = 1920
nine.value[8].y = 0
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 isshowarray.value[index] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true isshowarray.value[index] = true
@ -312,35 +369,39 @@ export default defineComponent({
} }
const resetall = () => { const resetall = () => {
for (let index = 0; index < nine.value.length; index++) { for (let index = 0; index < nine.value.length; index++) {
ninepostion.value[index].x = defaultninepostion.value[index].x; ninepostion.value[index].x = defaultninepostion.value[index].x;
ninepostion.value[index].y = defaultninepostion.value[index].y; ninepostion.value[index].y = defaultninepostion.value[index].y;
nine.value[index].x = config.point9[index].def_x nine.value[index].x = defaultnine.value[index].x
nine.value[index].y = config.point9[index].def_y nine.value[index].y = defaultnine.value[index].y
isshowarray.value[index] = false isshowarray.value[index] = false
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true isshowarray.value[index] = true
}, 100); }, 100);
} }
} }
///
watch(() => nine.value[0], (newVal, oldVal) => { watch(() => nine.value[0], (newVal, oldVal) => {
if($store.state.enablefusion) 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]) { if (!isactivearray.value[0]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y)); let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(0, x, y) setdianposin(0, x, y)
} }
///
}, { deep: true }) }, { deep: true })
watch(() => nine.value[1], (newVal, oldVal) => { watch(() => nine.value[1], (newVal, oldVal) => {
if($store.state.enablefusion) 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]) { if (!isactivearray.value[1]) {
let x = Math.ceil(newVal.x / Proportion.value.x); let x = Math.ceil(newVal.x / Proportion.value.x);
let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y)); let y = Math.ceil(((config.height - newVal.y) / Proportion.value.y));
setdianposin(1, x, y) setdianposin(1, x, y)
} }
///
}, { deep: true }) }, { deep: true })
watch(() => nine.value[2], (newVal, oldVal) => { watch(() => nine.value[2], (newVal, oldVal) => {
if($store.state.enablefusion) 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));
@ -398,7 +459,9 @@ export default defineComponent({
setdianposin(8, x, y) setdianposin(8, x, y)
} }
}, { deep: true }) }, { deep: true })
///
let model = ref(null); let model = ref(null);
let options = ref(['10', '20', '30', '40', '50']);
let set = GlobalData.getInstance().getCurrentClient(); let set = GlobalData.getInstance().getCurrentClient();
const setdianposin = (index: number, x: number, y: number) => { const setdianposin = (index: number, x: number, y: number) => {
ninepostion.value[index].x = x ninepostion.value[index].x = x
@ -408,15 +471,16 @@ export default defineComponent({
setTimeout(() => { setTimeout(() => {
isshowarray.value[index] = true isshowarray.value[index] = true
}, 100); }, 100);
} }
const save=()=>{ const save=()=>{
set?.SaveBlendingConfig("") set?.SaveBlendingConfig("")
setTimeout(() => {
set?.GetBlendingConfig("").then((res) => { $store.commit("setfusion_configuration", res?.config); })
}, 1000);
} }
return { return {
model, model,
options,
save, save,
nine, nine,
moveHandler_1, moveHandler_1,

36
src/components/FusionSettingsDialog.vue
View File

@ -8,6 +8,7 @@
"> ">
<q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh"> <q-card class="overflow-hidden" style="max-width: 90vw; height: 90vh">
<q-form> <q-form>
<!-- @submit="onSubmit" -->
<q-card-section class="q-ma-none q-pa-sm"> <q-card-section class="q-ma-none q-pa-sm">
<div class="row"> <div class="row">
<div class="col-auto text-h6"> <div class="col-auto text-h6">
@ -30,18 +31,15 @@
<div class="row" style="border: 1px solid;text-align: center;"> <div class="row" style="border: 1px solid;text-align: center;">
<div class="col-3" style="border-right: 1px solid;"> <div class="col-3" style="border-right: 1px solid;">
<p class="text-center">{{ $t("Projector") }}</p> <p class="text-center">{{ $t("Projector") }}</p>
<!-- row 在前col在后 --> <projector-item class="w-100" :llabel="$t('Projector') + '1'" :lvalue="'0/0'"></projector-item>
<div v-for="(item,index_row) in config.row"> <projector-item class="w-100" :llabel="$t('Projector') + '2'" :lvalue="'1/0'"></projector-item>
<projector-item v-for="(item,index_col) in config.col" class="w-100" :llabel="$t('Projector') + (index_row*config.col+index_col+1)" :lvalue="index_row+'/'+index_col"></projector-item>
</div>
<div class="col-12" style="text-align: center"> <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> </div>
<div class="col-9"> <div class="col-9">
<div class="q-ta-md"> <div class="q-ta-md">
<q-btn-toggle :disable="!$store.state.enablefusion" no-caps v-model="options" toggle-color="primary" <q-btn-toggle :disable="!$store.state.EnableBlending" no-caps v-model="options" toggle-color="primary"
:options="[ :options="[
{ label: $t('FusionLocale'), value: 'FusionLocale' }, { label: $t('FusionLocale'), value: 'FusionLocale' },
{ {
@ -95,6 +93,9 @@ import {
computed, computed,
onMounted, onMounted,
onBeforeMount, onBeforeMount,
onUpdated,
onBeforeUnmount,
nextTick,
} from "vue"; } from "vue";
import { useStore } from "src/store"; import { useStore } from "src/store";
import { useQuasar, copyToClipboard } from "quasar"; import { useQuasar, copyToClipboard } from "quasar";
@ -127,11 +128,11 @@ export default defineComponent({
let $q = useQuasar(); let $q = useQuasar();
let $t = useI18n(); let $t = useI18n();
let show_dialog = ref(false); let show_dialog = ref(false);
const target_language = ref("zh-CN");
const text = ref("Projector");
const showDialog = async () => { const showDialog = async () => {
show_dialog.value = true; show_dialog.value = true;
}; };
//投影机数量
const config=ref({col:0,row:0});
const EnableBlending = ref(false); const EnableBlending = ref(false);
let optionsstr = ref(); let optionsstr = ref();
optionsstr.value = "FusionLocale"; optionsstr.value = "FusionLocale";
@ -146,28 +147,16 @@ export default defineComponent({
watch( watch(
() => EnableBlending, () => EnableBlending,
(newVal, oldVal) => { (newVal, oldVal) => {
$store.commit("setEnablefusion", newVal.value); $store.commit("setEnableBlending", newVal.value);
set?.EnableBlending(newVal.value); set?.EnableBlending(newVal.value);
}, },
{ deep: true } { deep: true }
); );
let data = ref({});
const erroe=()=>{
$q.notify({
color: "negative",
icon: "warning",
message:"数据获取失败!",
position: "top",
timeout: 1500,
});
}
onBeforeMount(() => { onBeforeMount(() => {
setTimeout(() => { 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);})
//set?.GetBlendingConfig("").then((res)=>{let tmp=JSON.parse(res?res.config:"");EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", res?.config);})
let textdata="{\"col\":2,\"enable\":true,\"projectors\":[{\"col\":0,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1171,\"y\":712},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920},{\"col\":1,\"height\":1080,\"hor_density\":[{\"def_x\":0,\"def_y\":540,\"number\":1,\"x\":0,\"y\":540},{\"def_x\":480,\"def_y\":540,\"number\":2,\"x\":480,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":1440,\"def_y\":540,\"number\":4,\"x\":1440,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":5,\"x\":1920,\"y\":540}],\"params\":[{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0},{\"alpha\":0.5,\"enable\":false,\"gamma\":2.200000047683716,\"power\":2.0,\"size\":0}],\"point4\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":2,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":0,\"number\":3,\"x\":0,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":4,\"x\":1920,\"y\":0}],\"point9\":[{\"def_x\":0,\"def_y\":1080,\"number\":1,\"x\":0,\"y\":1080},{\"def_x\":960,\"def_y\":1080,\"number\":2,\"x\":960,\"y\":1080},{\"def_x\":1920,\"def_y\":1080,\"number\":3,\"x\":1920,\"y\":1080},{\"def_x\":0,\"def_y\":540,\"number\":4,\"x\":0,\"y\":540},{\"def_x\":960,\"def_y\":540,\"number\":5,\"x\":960,\"y\":540},{\"def_x\":1920,\"def_y\":540,\"number\":6,\"x\":1920,\"y\":540},{\"def_x\":0,\"def_y\":0,\"number\":7,\"x\":0,\"y\":0},{\"def_x\":960,\"def_y\":0,\"number\":8,\"x\":960,\"y\":0},{\"def_x\":1920,\"def_y\":0,\"number\":9,\"x\":1920,\"y\":0}],\"row\":0,\"ver_density\":[{\"def_x\":960,\"def_y\":1080,\"number\":1,\"x\":960,\"y\":1080},{\"def_x\":960,\"def_y\":810,\"number\":2,\"x\":960,\"y\":810},{\"def_x\":960,\"def_y\":540,\"number\":3,\"x\":960,\"y\":540},{\"def_x\":960,\"def_y\":270,\"number\":4,\"x\":960,\"y\":270},{\"def_x\":960,\"def_y\":0,\"number\":5,\"x\":960,\"y\":0}],\"width\":1920}],\"row\":1,\"screen_height\":0,\"screen_width\":0}"
let tmp=JSON.parse(textdata);EnableBlending.value=tmp.enable;$store.commit("setEnablefusion", tmp.enable);config.value.col=tmp.col;config.value.row=tmp.row;$store.commit("setfusion_configuration", textdata)
}, 1000); }, 1000);
}) })
return { return {
@ -176,7 +165,6 @@ export default defineComponent({
copyToClipboard, copyToClipboard,
showDialog, showDialog,
EnableBlending, EnableBlending,
config
}; };
}, },
}); });