加入对4点校正的键盘支持
This commit is contained in:
parent
f6dd438627
commit
c7eb71ee72
|
|
@ -4,28 +4,28 @@
|
|||
<div class="col-8 q-pt-md">
|
||||
<div ref="div" style="width: 100%; background-color: #646464; height: 100%">
|
||||
<div style="position: absolute">
|
||||
<Vue3DraggableResizable v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
|
||||
<Vue3DraggableResizable :class="[options_model_v==index?'action':'']" v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
|
||||
:resizable="false" :x="0" v-model:y="point_postion[index].y" :disabledX="true"
|
||||
@activated="now_index = index" @dragging="dragStartHandle($event, index, 'v')">
|
||||
<span>v{{
|
||||
index+ 1
|
||||
}}</span>
|
||||
</Vue3DraggableResizable>
|
||||
<Vue3DraggableResizable v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
|
||||
<Vue3DraggableResizable :class="[options_model_v==index?'action':'']" v-for="(item, index) in config.ver_density.length" :initW="20" :initH="20"
|
||||
:resizable="false" :x="max_x_y[0]" v-model:y="point_postion[index].y" @activated="now_index = index"
|
||||
@dragging="dragStartHandle($event, index, 'v')">
|
||||
<span>v{{
|
||||
index+ 1
|
||||
}}</span>
|
||||
</Vue3DraggableResizable>
|
||||
<Vue3DraggableResizable v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
|
||||
<Vue3DraggableResizable :class="[options_model_h==index+5?'action':'']" v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
|
||||
:resizable="false" v-model:x="point_postion[index + 5].x" :y="-20" @activated="now_index = index + 5"
|
||||
:disabledY="true" @dragging="dragStartHandle($event, index + 5, 'h')">
|
||||
<span>h{{
|
||||
index+ 1
|
||||
}}</span>
|
||||
</Vue3DraggableResizable>
|
||||
<Vue3DraggableResizable v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
|
||||
<Vue3DraggableResizable :class="[options_model_h==index+5?'action':'']" v-for="(item, index) in config.hor_density.length" :initW="20" :initH="20"
|
||||
:resizable="false" v-model:x="point_postion[index + 5].x" @activated="now_index = index + 5"
|
||||
:y="max_x_y[1] + 20" @dragging="dragStartHandle($event, index + 5, 'h')">
|
||||
<span>h{{
|
||||
|
|
@ -68,18 +68,24 @@
|
|||
<div>
|
||||
<div class="row">
|
||||
<div class="col-1"></div>
|
||||
<div class="col-2"> <q-select class="q-pt-md" :dense="true" filled v-model="options_model_v" :options="options_v" emit-value
|
||||
<div class="col-2"> <q-select class="q-pt-md" label="水平" :dense="true" filled v-model="options_model_v" :options="options_v" emit-value
|
||||
map-options /></div>
|
||||
<div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
|
||||
v-model="value[options_model_v].y" @update:model-value="chang(options_model_v, $event)" lazy-rules />
|
||||
</div>
|
||||
<div class="q-pt-md">
|
||||
<q-btn color="white" @click="reset(options_model_v)" text-color="black" :label="$t('reset')" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-1"></div>
|
||||
<div class="col-2"> <q-select class="q-pt-md" :dense="true" filled v-model="options_model_h" :options="options_h" emit-value
|
||||
<div class="col-2"> <q-select class="q-pt-md" label="垂直" :dense="true" filled v-model="options_model_h" :options="options_h" emit-value
|
||||
map-options /></div>
|
||||
<div class="col-2"> <q-input filled type="number" class="q-pt-md" :dense="true"
|
||||
v-model="value[options_model_h].x" @update:model-value="chang(options_model_h+5, $event)" lazy-rules />
|
||||
v-model="value[options_model_h].x" @update:model-value="chang(options_model_h, $event)" lazy-rules />
|
||||
</div>
|
||||
<div class="q-pt-md">
|
||||
<q-btn color="white" @click="reset(options_model_v)" text-color="black" :label="$t('reset')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -201,11 +207,11 @@ export default defineComponent({
|
|||
if (index < 5) {
|
||||
x = default_location[9].y;
|
||||
y = Math.ceil((config.height - $event) / Proportion.value.y);
|
||||
send_configuration(index, $event)
|
||||
send_configuration(index, $event,'v')
|
||||
} else {
|
||||
x = Math.ceil($event / Proportion.value.x);
|
||||
y = default_location[0].x;
|
||||
send_configuration(index, $event)
|
||||
send_configuration(index-5, $event,'h')
|
||||
}
|
||||
point_postion[index].x = Number(x)
|
||||
point_postion[index].y = Number(y)
|
||||
|
|
@ -437,20 +443,22 @@ export default defineComponent({
|
|||
const send_configuration = (
|
||||
index: number,
|
||||
value: number,
|
||||
type:string,
|
||||
) => {
|
||||
if (ste_status.value == 0) {
|
||||
if (index <= 5) {
|
||||
if (type=='v') {
|
||||
set?.SetBlendingVerDensity(
|
||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||
index + 1,
|
||||
Number(value)
|
||||
);
|
||||
} else {
|
||||
}
|
||||
if (type=='h') {
|
||||
set?.SetBlendingHorDensity(
|
||||
$store.getters.GetTheCurrentlySelectedCamera[0],
|
||||
$store.getters.GetTheCurrentlySelectedCamera[1],
|
||||
index - 4,
|
||||
index -4,
|
||||
Number(value)
|
||||
);
|
||||
}
|
||||
|
|
@ -474,7 +482,7 @@ export default defineComponent({
|
|||
(obj_y - default_location[index].y) * Proportion.value.y
|
||||
);
|
||||
value[index].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
||||
send_configuration(index, x)
|
||||
send_configuration(index, x,'h')
|
||||
}
|
||||
if (type == 'v') {
|
||||
let x = Math.ceil(obj_x * Proportion.value.x);
|
||||
|
|
@ -485,7 +493,7 @@ export default defineComponent({
|
|||
(obj_y - default_location[index].y) * Proportion.value.y
|
||||
);
|
||||
value[index].y = y > config.height ? config.height : y && y < 0 ? 0 : y;
|
||||
send_configuration(index, y)
|
||||
send_configuration(index, y,'v')
|
||||
}
|
||||
}
|
||||
const options_v: any = reactive([]);
|
||||
|
|
|
|||
|
|
@ -1,121 +1,46 @@
|
|||
<template>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
style="text-align: center"
|
||||
:dense="true"
|
||||
@focus="isactivearray[0] = false"
|
||||
v-model="four[0].x"
|
||||
label="x"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
:dense="true"
|
||||
@focus="isactivearray[0] = false"
|
||||
v-model="four[0].y"
|
||||
label="y"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-btn
|
||||
size="sm" dense
|
||||
color="white"
|
||||
@click="reset(0)"
|
||||
text-color="black"
|
||||
:label="$t('reset') + $t('point') + '1'"
|
||||
/>
|
||||
<q-input filled type="number" class="q-pt-xs" style="text-align: center" :dense="true"
|
||||
@focus="isactivearray[0] = false" v-model="four[0].x" label="x" lazy-rules />
|
||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[0] = false" v-model="four[0].y"
|
||||
label="y" lazy-rules />
|
||||
<q-btn size="sm" dense color="white" @click="reset(0)" text-color="black"
|
||||
:label="$t('reset') + $t('point') + '1'" />
|
||||
</div>
|
||||
<div class="col-8"></div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
:dense="true"
|
||||
@focus="isactivearray[1] = false"
|
||||
v-model="four[1].x"
|
||||
label="x"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
:dense="true"
|
||||
@focus="isactivearray[1] = false"
|
||||
v-model="four[1].y"
|
||||
label="y"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-btn
|
||||
size="sm" dense
|
||||
color="white"
|
||||
@click="reset(1)"
|
||||
text-color="black"
|
||||
:label="$t('reset') + $t('point') + '2'"
|
||||
/>
|
||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[1] = false" v-model="four[1].x"
|
||||
label="x" lazy-rules />
|
||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[1] = false" v-model="four[1].y"
|
||||
label="y" lazy-rules />
|
||||
<q-btn size="sm" dense color="white" @click="reset(1)" text-color="black"
|
||||
:label="$t('reset') + $t('point') + '2'" />
|
||||
</div>
|
||||
|
||||
<div class="col-2"></div>
|
||||
<div class="col-8">
|
||||
<div ref="div" style="background-color: #646464; height: 40vh">
|
||||
<div style="position: absolute">
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index==0?'action':'']"
|
||||
v-if="isshowarray[0]"
|
||||
:isActive="isactivearray[0]"
|
||||
@mousedown="activeMouseDown(0)"
|
||||
@mouseUpHandler="mouseUpHandler(0)"
|
||||
:w="20"
|
||||
:h="20"
|
||||
:x="points[0].x"
|
||||
:y="points[0].y"
|
||||
:isResizable="false"
|
||||
@moveHandler="moveHandler_1"
|
||||
><div class="point">1</div>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 0 ? 'action' : '']" v-if="isshowarray[0]"
|
||||
:isActive="isactivearray[0]" @mousedown="activeMouseDown(0)" @mouseUpHandler="mouseUpHandler(0)" :w="20"
|
||||
:h="20" :x="points[0].x" :y="points[0].y" :isResizable="false" @moveHandler="moveHandler_1">
|
||||
<div class="point">1</div>
|
||||
</vue3ResizeDrag>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index==1?'action':'']"
|
||||
v-if="isshowarray[1]"
|
||||
:isActive="isactivearray[1]"
|
||||
@mousedown="activeMouseDown(1)"
|
||||
@mouseUpHandler="mouseUpHandler(1)"
|
||||
:w="20"
|
||||
:h="20"
|
||||
:x="points[1].x"
|
||||
:y="points[1].y"
|
||||
:isResizable="false"
|
||||
@moveHandler="moveHandler_2"
|
||||
><div class="point">2</div>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 1 ? 'action' : '']" v-if="isshowarray[1]"
|
||||
:isActive="isactivearray[1]" @mousedown="activeMouseDown(1)" @mouseUpHandler="mouseUpHandler(1)" :w="20"
|
||||
:h="20" :x="points[1].x" :y="points[1].y" :isResizable="false" @moveHandler="moveHandler_2">
|
||||
<div class="point">2</div>
|
||||
</vue3ResizeDrag>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index==2?'action':'']"
|
||||
v-if="isshowarray[2]"
|
||||
:isActive="isactivearray[2]"
|
||||
@mousedown="activeMouseDown(2)"
|
||||
@mouseUpHandler="mouseUpHandler(2)"
|
||||
:w="20"
|
||||
:h="20"
|
||||
:x="points[2].x"
|
||||
:y="points[2].y"
|
||||
:isResizable="false"
|
||||
@moveHandler="moveHandler_3"
|
||||
><div class="point">3</div>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 2 ? 'action' : '']" v-if="isshowarray[2]"
|
||||
:isActive="isactivearray[2]" @mousedown="activeMouseDown(2)" @mouseUpHandler="mouseUpHandler(2)" :w="20"
|
||||
:h="20" :x="points[2].x" :y="points[2].y" :isResizable="false" @moveHandler="moveHandler_3">
|
||||
<div class="point">3</div>
|
||||
</vue3ResizeDrag>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index==3?'action':'']"
|
||||
v-if="isshowarray[3]"
|
||||
:isActive="isactivearray[3]"
|
||||
@mousedown="activeMouseDown(3)"
|
||||
@mouseUpHandler="mouseUpHandler(3)"
|
||||
:w="20"
|
||||
:h="20"
|
||||
:x="points[3].x"
|
||||
:y="points[3].y"
|
||||
:isResizable="false"
|
||||
@moveHandler="moveHandler_4"
|
||||
><div class="point">4</div>
|
||||
<vue3ResizeDrag style="border: 0;" :class="[now_index == 3 ? 'action' : '']" v-if="isshowarray[3]"
|
||||
:isActive="isactivearray[3]" @mousedown="activeMouseDown(3)" @mouseUpHandler="mouseUpHandler(3)" :w="20"
|
||||
:h="20" :x="points[3].x" :y="points[3].y" :isResizable="false" @moveHandler="moveHandler_4">
|
||||
<div class="point">4</div>
|
||||
</vue3ResizeDrag>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -123,80 +48,37 @@
|
|||
<div class="col-2"></div>
|
||||
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
:dense="true"
|
||||
@focus="isactivearray[2] = false"
|
||||
v-model="four[2].x"
|
||||
label="x"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-xs"
|
||||
:dense="true"
|
||||
@focus="isactivearray[2] = false"
|
||||
v-model="four[2].y"
|
||||
label="y"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-btn
|
||||
size="sm" dense
|
||||
color="white"
|
||||
@click="reset(2)"
|
||||
text-color="black"
|
||||
:label="$t('reset') + $t('point') + '3'"
|
||||
/>
|
||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[2].x"
|
||||
label="x" lazy-rules />
|
||||
<q-input filled type="number" class="q-pt-xs" :dense="true" @focus="isactivearray[2] = false" v-model="four[2].y"
|
||||
label="y" lazy-rules />
|
||||
<q-btn size="sm" dense color="white" @click="reset(2)" text-color="black"
|
||||
:label="$t('reset') + $t('point') + '3'" />
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-btn
|
||||
size="sm" dense
|
||||
color="white"
|
||||
@click="resetall"
|
||||
text-color="black"
|
||||
:label="$t('resetall')"
|
||||
/>
|
||||
<q-btn size="sm" dense color="white" @click="resetall" text-color="black" :label="$t('resetall')" />
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class=""
|
||||
:dense="true"
|
||||
@focus="isactivearray[3] = false"
|
||||
v-model="four[3].x"
|
||||
label="x"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-input
|
||||
filled
|
||||
type="number"
|
||||
class="q-pt-md"
|
||||
:dense="true"
|
||||
@focus="isactivearray[3] = false"
|
||||
v-model="four[3].y"
|
||||
label="y"
|
||||
lazy-rules
|
||||
/>
|
||||
<q-btn
|
||||
size="sm" dense
|
||||
color="white"
|
||||
@click="reset(3)"
|
||||
text-color="black"
|
||||
:label="$t('reset') + $t('point') + '4'"
|
||||
/>
|
||||
<q-input filled type="number" class="" :dense="true" @focus="isactivearray[3] = false" v-model="four[3].x"
|
||||
label="x" lazy-rules />
|
||||
<q-input filled type="number" class="q-pt-md" :dense="true" @focus="isactivearray[3] = false" v-model="four[3].y"
|
||||
label="y" lazy-rules />
|
||||
<q-btn size="sm" dense color="white" @click="reset(3)" text-color="black"
|
||||
:label="$t('reset') + $t('point') + '4'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.point{
|
||||
width: 100%;height: 100%;border-radius: 50%;background: #0000ff;color: aliceblue;
|
||||
.point {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #0000ff;
|
||||
color: aliceblue;
|
||||
}
|
||||
.action{
|
||||
|
||||
.action {
|
||||
background-color: aqua;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -219,6 +101,7 @@ import { useStore } from "src/store";
|
|||
import { useI18n } from "vue-i18n";
|
||||
import ClientConnection from "src/common/ClientConnection";
|
||||
import GlobalData from "src/common/GlobalData";
|
||||
import { Console } from "console";
|
||||
|
||||
export default defineComponent({
|
||||
name: "ComponentFourPointCalibration",
|
||||
|
|
@ -274,7 +157,7 @@ export default defineComponent({
|
|||
{ x: 0, y: 0 },
|
||||
{ x: 0, y: 0 },
|
||||
]); //点的位置
|
||||
const now_index=ref(0)
|
||||
const now_index = ref(0)
|
||||
const isshowarray = ref([true, true, true, true]);
|
||||
const isactivearray = ref([true, true, true, true]);
|
||||
const ste_status = ref(0);
|
||||
|
|
@ -311,13 +194,53 @@ export default defineComponent({
|
|||
});
|
||||
const activeMouseDown = (index: number) => {
|
||||
isactivearray.value[index] = true;
|
||||
now_index.value=index
|
||||
now_index.value = index
|
||||
};
|
||||
const mouseUpHandler = (index: number) => {
|
||||
isactivearray.value[index] = false;
|
||||
};
|
||||
const keyDown = () => {
|
||||
document.onkeydown = (e) => {
|
||||
|
||||
|
||||
// let x = Math.ceil(four[now_index.value].x / Proportion.value.x);
|
||||
// let y = Math.ceil((config.height - four[now_index.value].y) / Proportion.value.y);
|
||||
// points[now_index.value].x!=x?points[now_index.value].x = x:''
|
||||
// points[now_index.value].y!= y?points[now_index.value].y = y:''
|
||||
|
||||
let e1 = e || window.event || arguments.callee.caller.arguments[0]
|
||||
switch (e.code) {
|
||||
case "KeyW":
|
||||
points[now_index.value].x
|
||||
points[now_index.value].y--
|
||||
break;
|
||||
case "KeyA":
|
||||
points[now_index.value].x--;
|
||||
points[now_index.value].y
|
||||
break;
|
||||
case "KeyS":
|
||||
points[now_index.value].x;
|
||||
points[now_index.value].y++
|
||||
break;
|
||||
case "KeyD":
|
||||
points[now_index.value].x++;
|
||||
points[now_index.value].y
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
let tmp = { left: points[now_index.value].x, top: points[now_index.value].y }
|
||||
eval(`moveHandler_${now_index.value+1}(tmp)`);
|
||||
isactivearray.value[now_index.value] = false;
|
||||
isshowarray.value[now_index.value] = false;
|
||||
setTimeout(() => {
|
||||
isshowarray.value[now_index.value] = true;
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
ste_status.value = 1;
|
||||
keyDown()
|
||||
setpoa();
|
||||
|
||||
setTimeout(() => {
|
||||
|
|
@ -327,8 +250,6 @@ export default defineComponent({
|
|||
|
||||
const use_server_config = () => {
|
||||
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 = config.point4[index].def_x;
|
||||
defaultfour.value[index].y = config.point4[index].def_y;
|
||||
four[index].x = config.point4[index].x;
|
||||
|
|
@ -338,50 +259,50 @@ export default defineComponent({
|
|||
|
||||
const setpoa = () => {
|
||||
try {
|
||||
points[0].x = 0;
|
||||
points[0].y = 0;
|
||||
points[0].x = 0;
|
||||
points[0].y = 0;
|
||||
|
||||
points[1].x = div.value.offsetWidth - 25;
|
||||
points[1].y = 0;
|
||||
points[1].x = div.value.offsetWidth - 25;
|
||||
points[1].y = 0;
|
||||
|
||||
points[2].x = 0;
|
||||
points[2].y = div.value.offsetHeight - 25;
|
||||
points[2].x = 0;
|
||||
points[2].y = div.value.offsetHeight - 25;
|
||||
|
||||
points[3].x = div.value.offsetWidth - 25;
|
||||
points[3].y = div.value.offsetHeight - 25;
|
||||
points[3].x = div.value.offsetWidth - 25;
|
||||
points[3].y = div.value.offsetHeight - 25;
|
||||
|
||||
fourpostion.value[0].x = 0;
|
||||
fourpostion.value[0].y = 0;
|
||||
fourpostion.value[0].x = 0;
|
||||
fourpostion.value[0].y = 0;
|
||||
|
||||
fourpostion.value[1].x = div.value.offsetWidth - 25;
|
||||
fourpostion.value[1].y = 0;
|
||||
fourpostion.value[1].x = div.value.offsetWidth - 25;
|
||||
fourpostion.value[1].y = 0;
|
||||
|
||||
fourpostion.value[2].x = 0;
|
||||
fourpostion.value[2].y = div.value.offsetHeight - 25;
|
||||
fourpostion.value[2].x = 0;
|
||||
fourpostion.value[2].y = div.value.offsetHeight - 25;
|
||||
|
||||
fourpostion.value[3].x = div.value.offsetWidth - 25;
|
||||
fourpostion.value[3].y = div.value.offsetHeight - 25;
|
||||
fourpostion.value[3].x = div.value.offsetWidth - 25;
|
||||
fourpostion.value[3].y = 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 = config.point4[index].def_x;
|
||||
defaultfour.value[index].y = config.point4[index].def_y;
|
||||
four[index].x = config.point4[index].x;
|
||||
four[index].y = config.point4[index].y;
|
||||
}
|
||||
if (
|
||||
sessionStorage.FourPointCalibration &&
|
||||
sessionStorage.FourPointCalibration.length > 0
|
||||
) {
|
||||
set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
|
||||
use_set_cache();
|
||||
} else {
|
||||
}
|
||||
set_point_x();
|
||||
} catch (error) {
|
||||
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 = config.point4[index].def_x;
|
||||
defaultfour.value[index].y = config.point4[index].def_y;
|
||||
four[index].x = config.point4[index].x;
|
||||
four[index].y = config.point4[index].y;
|
||||
}
|
||||
if (
|
||||
sessionStorage.FourPointCalibration &&
|
||||
sessionStorage.FourPointCalibration.length > 0
|
||||
) {
|
||||
set_cache.value = JSON.parse(sessionStorage.FourPointCalibration);
|
||||
use_set_cache();
|
||||
} else {
|
||||
}
|
||||
set_point_x();
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -408,7 +329,7 @@ export default defineComponent({
|
|||
isshowarray.value[0] = true;
|
||||
}, 100);
|
||||
}
|
||||
now_index.value=0
|
||||
now_index.value = 0
|
||||
save_set_cache();
|
||||
},
|
||||
{ deep: true }
|
||||
|
|
@ -436,7 +357,7 @@ export default defineComponent({
|
|||
isshowarray.value[1] = true;
|
||||
}, 100);
|
||||
}
|
||||
now_index.value=1
|
||||
now_index.value = 1
|
||||
save_set_cache();
|
||||
},
|
||||
{ deep: true }
|
||||
|
|
@ -466,7 +387,7 @@ export default defineComponent({
|
|||
isshowarray.value[2] = true;
|
||||
}, 100);
|
||||
}
|
||||
now_index.value=2
|
||||
now_index.value = 2
|
||||
save_set_cache();
|
||||
},
|
||||
{ deep: true }
|
||||
|
|
@ -496,7 +417,7 @@ export default defineComponent({
|
|||
isshowarray.value[3] = true;
|
||||
}, 100);
|
||||
}
|
||||
now_index.value=3
|
||||
now_index.value = 3
|
||||
save_set_cache();
|
||||
},
|
||||
{ deep: true }
|
||||
|
|
@ -527,9 +448,9 @@ export default defineComponent({
|
|||
},
|
||||
{ deep: true }
|
||||
);
|
||||
watch(()=>now_index,(newval,oldval)=>{
|
||||
set?.SetBlendingOption("blending_grids_select_point",`4:${now_index.value+1}`)
|
||||
},{ deep: true })
|
||||
watch(() => now_index, (newval, oldval) => {
|
||||
set?.SetBlendingOption("blending_grids_select_point", `4:${now_index.value + 1}`)
|
||||
}, { deep: true })
|
||||
//为了加载 缓存的配置时 同步点的位置
|
||||
const syncpoint = () => {
|
||||
for (let index = 0; index < fourpostion.value.length; index++) {
|
||||
|
|
@ -597,10 +518,10 @@ export default defineComponent({
|
|||
};
|
||||
|
||||
const moveHandler_1 = (data: any) => {
|
||||
let x = Math.ceil(
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[0].x) * Proportion.value.x + 0
|
||||
);
|
||||
let y = Math.ceil(
|
||||
let y = Math.round(
|
||||
config.height - data.top * Proportion.value.y - fourpostion.value[0].y
|
||||
);
|
||||
|
||||
|
|
@ -610,10 +531,10 @@ export default defineComponent({
|
|||
save_set_cache();
|
||||
};
|
||||
const moveHandler_2 = (data: any) => {
|
||||
let x = Math.ceil(
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[1].x) * Proportion.value.x + config.width
|
||||
);
|
||||
let y = Math.ceil(
|
||||
let y = Math.round(
|
||||
config.height - data.top * Proportion.value.y - fourpostion.value[1].y
|
||||
);
|
||||
four[1].x = x > config.width ? config.width : x && x < 0 ? 0 : x;
|
||||
|
|
@ -621,22 +542,22 @@ export default defineComponent({
|
|||
save_set_cache();
|
||||
};
|
||||
const moveHandler_3 = (data: any) => {
|
||||
let x = Math.ceil(
|
||||
let x = Math.round(
|
||||
(data.left - fourpostion.value[2].x) * Proportion.value.x
|
||||
);
|
||||
let y = Math.abs(
|
||||
Math.ceil((data.top - fourpostion.value[2].y) * Proportion.value.y)
|
||||
Math.round((data.top - fourpostion.value[2].y) * Proportion.value.y)
|
||||
);
|
||||
four[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;
|
||||
save_set_cache();
|
||||
};
|
||||
const moveHandler_4 = (data: any) => {
|
||||
let x = Math.ceil(
|
||||
let x = Math.round(
|
||||
(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)
|
||||
Math.round((data.top - fourpostion.value[3].y) * Proportion.value.y)
|
||||
);
|
||||
four[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;
|
||||
|
|
@ -648,7 +569,7 @@ export default defineComponent({
|
|||
window.onresize = () => {
|
||||
return (() => {
|
||||
ste_status.value = 1;
|
||||
if(div!=null)setpoa();
|
||||
if (div != null) setpoa();
|
||||
|
||||
setTimeout(() => {
|
||||
ste_status.value = 0;
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
<div>
|
||||
<q-slider v-model="array[group].alpha" :min="0.0" @change="chang('alpha')" :max="1" :step="0.01" color="green"
|
||||
vertical reverse label-always />
|
||||
<div> <q-input dense filled type="number" max="1" min="0" step="0.1" v-model="array[group].alpha" label="alpha"
|
||||
<div> <q-input dense filled type="number" max="1" min="0" step="0.1" @update:model-value="chang('alpha')" v-model="array[group].alpha" label="alpha"
|
||||
lazy-rules :rules="[
|
||||
(val) =>
|
||||
(val !== null && val !== '') ||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
<div>
|
||||
<q-slider v-model="array[group].p" :min="0" @change="chang('p')" :max="16" :step="0.01" color="green"
|
||||
vertical reverse label-always />
|
||||
<div> <q-input dense filled type="number" max="16" min="0" step="0.1" v-model="array[group].p" label="p"
|
||||
<div> <q-input dense filled type="number" max="16" min="0" step="0.1" @update:model-value="chang('p')" v-model="array[group].p" label="p"
|
||||
lazy-rules :rules="[
|
||||
(val) =>
|
||||
(val !== null && val !== '') ||
|
||||
|
|
@ -124,13 +124,13 @@
|
|||
|
||||
<div>
|
||||
<q-slider v-model="array[group].gamma" :min="0" @change="chang('gamma')" :max="16" :step="0.01" color="green" vertical reverse label-always />
|
||||
<div> <q-input dense filled type="number" max="16" min="0" step="0.1" v-model="array[group].gamma" label="gamma"
|
||||
<div> <q-input dense filled type="number" max="16" min="0" step="0.1" @update:model-value="chang('gamma')" v-model="array[group].gamma" label="gamma"
|
||||
lazy-rules :rules="[
|
||||
(val) =>
|
||||
(val !== null && val !== '') ||
|
||||
$t('Please enter a number'),
|
||||
(val) =>
|
||||
(val >= 0 && val <= 16) || $t('Please enter 0-100'),
|
||||
(val >= 0 && val <= 16) || $t('Please enter a value within the range'),
|
||||
]" /></div>
|
||||
<p class="text-center">gamma</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,33 +20,34 @@
|
|||
v-model="RowsColumns[1]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4 q-pt-sm"><q-select outlined v-model="model[2]"
|
||||
@update:model-value="update_row_col(2, model[2])" :options="line_width_options" :dense="true" :options-dense="true"
|
||||
:label="$t('line width')" /> </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row" style="min-height: 40px;">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4 q-pt-sm">
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("line color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="color[0]"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer" @click="index = 0">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="color[0]" @change="submit" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("line color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-model="color[0]" :rules="['anyColor']">
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer" @click="index = 0">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color v-model="color[0]" @change="submit" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,31 +56,48 @@
|
|||
<div class="col-4"></div>
|
||||
<div class="col-4 q-pt-sm">
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("background color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input
|
||||
v-model="color[1]"
|
||||
:rules="['anyColor']"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer" @click="index = 1">
|
||||
<q-popup-proxy
|
||||
cover
|
||||
transition-show="scale"
|
||||
transition-hide="scale"
|
||||
>
|
||||
<q-color v-model="color[1]" @change="submit" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("background color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-model="color[1]" :rules="['anyColor']">
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer" @click="index = 1">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color v-model="color[1]" @change="submit" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="row" style="min-height: 40px;">
|
||||
<div class="col-4"></div>
|
||||
<div class="col-4 q-pt-sm">
|
||||
<q-item>
|
||||
<q-item-section avatar class="head_1">
|
||||
{{ $t("center line color") }}
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-input v-model="color[2]" :rules="['anyColor']">
|
||||
<template v-slot:append>
|
||||
<q-icon name="colorize" class="cursor-pointer" @click="index = 2">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-color v-model="color[2]" @change="submit" />
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</div>
|
||||
<div class="col-2"><q-checkbox class="q-pt-md" @update:model-value="send_off(2)" v-model="RowsColumns[2]" /></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -111,8 +129,9 @@ export default defineComponent({
|
|||
const RowsColumns = reactive([false, false, false, false]);
|
||||
const index = ref(0);
|
||||
const color = reactive(["#ffffff", "#CCCCCC", "#000", "#000"]);
|
||||
let model = reactive([20, 40]);
|
||||
let model = reactive([20, 40, 20]);
|
||||
let options = ref([10, 20, 30, 40, 50]);
|
||||
let line_width_options = ref([2,4,6,8,10, 20, 30, 40, 50]);
|
||||
const submit = () => {
|
||||
switch (index.value) {
|
||||
case 0:
|
||||
|
|
@ -122,7 +141,7 @@ export default defineComponent({
|
|||
set?.SetBlendingOption("blending_grids_background_color", color[index.value]);
|
||||
break;
|
||||
case 2:
|
||||
//set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
|
||||
set?.SetBlendingOption("blending_grids_center_line_color",color[index.value]);
|
||||
break;
|
||||
case 3:
|
||||
//set?.SetBlendingOption("blending_grids_line_color",color[index.value]);
|
||||
|
|
@ -139,6 +158,9 @@ export default defineComponent({
|
|||
case 1:
|
||||
set?.SetBlendingOption("blending_grids_column", value + "");
|
||||
break;
|
||||
case 2:
|
||||
set?.SetBlendingOption("blending_grids_line_width", value + "");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
@ -154,7 +176,7 @@ export default defineComponent({
|
|||
set?.SetBlendingOption("blending_grids_show_column", RowsColumns[type] + "");
|
||||
break;
|
||||
case 2:
|
||||
|
||||
set?.SetBlendingOption("blending_grids_show_center_line", RowsColumns[type] + "");
|
||||
break;
|
||||
case 3:
|
||||
|
||||
|
|
@ -168,11 +190,13 @@ export default defineComponent({
|
|||
let server_conf = JSON.parse($store.state.fusion_configuration).options
|
||||
model[0] = server_conf.blending_grids_row ?? 20;
|
||||
model[1] = server_conf.blending_grids_column ?? 40;
|
||||
model[2] = server_conf.blending_grids_line_width ?? 6;
|
||||
color[0] = server_conf.blending_grids_line_color ?? "#ffffff"
|
||||
color[1] = server_conf.blending_grids_background_color ?? "#00ff5e"
|
||||
color[2] = server_conf.blending_grids_center_line_color ?? "#3358de"
|
||||
RowsColumns[0] = server_conf.blending_grids_show_row === "false" ? false : true
|
||||
RowsColumns[1] = server_conf.blending_grids_show_column === "false" ? false : true
|
||||
|
||||
RowsColumns[2] = server_conf.blending_grids_show_center_line === "false" ? false : true
|
||||
}
|
||||
use_server_config()
|
||||
|
||||
|
|
@ -197,6 +221,7 @@ export default defineComponent({
|
|||
}
|
||||
if (sessionStorage.GridSettings) get_sessionStorage()
|
||||
return {
|
||||
line_width_options,
|
||||
model,
|
||||
options,
|
||||
submit,
|
||||
|
|
|
|||
|
|
@ -188,7 +188,6 @@ export default defineComponent({
|
|||
return $store.state.selected_projector;
|
||||
});
|
||||
let Proportion = ref({ x: 0, y: 0 });
|
||||
let centor = ref({ x: 0, y: 0 });
|
||||
const div = ref();
|
||||
const now_index = ref(0);
|
||||
let nine = reactive([
|
||||
|
|
@ -434,12 +433,6 @@ export default defineComponent({
|
|||
onMounted(() => {
|
||||
ste_status.value = 1;
|
||||
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();
|
||||
use_set_cache();
|
||||
setTimeout(() => {
|
||||
|
|
@ -464,7 +457,7 @@ export default defineComponent({
|
|||
defaultnine.value[index].x = config.point9[index].def_x;
|
||||
defaultnine.value[index].y = config.point9[index].def_y;
|
||||
}
|
||||
setninepostion();
|
||||
//setninepostion();
|
||||
use_set_cache();
|
||||
setTimeout(() => {
|
||||
ste_status.value = 0;
|
||||
|
|
@ -487,35 +480,33 @@ export default defineComponent({
|
|||
ninepostion.value[0].x = 0;
|
||||
ninepostion.value[0].y = 0;
|
||||
|
||||
ninepostion.value[1].x = div.value.offsetWidth / 2 - 20;
|
||||
ninepostion.value[1].x = div.value.offsetWidth / 2 - 20; //
|
||||
ninepostion.value[1].y = 0;
|
||||
|
||||
ninepostion.value[2].x = div.value.offsetWidth - 20;
|
||||
ninepostion.value[2].x = div.value.offsetWidth - 10;
|
||||
ninepostion.value[2].y = 0;
|
||||
|
||||
ninepostion.value[3].x = 0;
|
||||
ninepostion.value[3].y = div.value.offsetHeight / 2 - 8;
|
||||
ninepostion.value[3].y = div.value.offsetHeight / 2 - 20;
|
||||
|
||||
ninepostion.value[4].x = div.value.offsetWidth / 2 - 20;
|
||||
ninepostion.value[4].y = div.value.offsetHeight / 2 - 8;
|
||||
ninepostion.value[4].x = div.value.offsetWidth / 2 - 20; //
|
||||
ninepostion.value[4].y = div.value.offsetHeight / 2 - 20;
|
||||
|
||||
ninepostion.value[5].x = div.value.offsetWidth - 20;
|
||||
ninepostion.value[5].y = div.value.offsetHeight / 2;
|
||||
ninepostion.value[5].x = div.value.offsetWidth - 10;
|
||||
ninepostion.value[5].y = div.value.offsetHeight / 2 -20;
|
||||
|
||||
ninepostion.value[6].x = 0;
|
||||
ninepostion.value[6].y = div.value.offsetHeight - 20;
|
||||
|
||||
ninepostion.value[7].x = div.value.offsetWidth / 2 - 8;
|
||||
ninepostion.value[7].x = div.value.offsetWidth / 2 - 20; //
|
||||
ninepostion.value[7].y = div.value.offsetHeight - 20;
|
||||
|
||||
ninepostion.value[8].x = div.value.offsetWidth - 20;
|
||||
ninepostion.value[8].x = div.value.offsetWidth - 10;
|
||||
ninepostion.value[8].y = div.value.offsetHeight - 20;
|
||||
|
||||
Proportion.value.x = config.width / (div.value.offsetWidth - 20);
|
||||
Proportion.value.y = config.height / (div.value.offsetHeight - 20);
|
||||
|
||||
centor.value.x = (config.width * 2) / (div.value.offsetWidth + 20);
|
||||
centor.value.y = (config.height * 2) / (div.value.offsetHeight + 20);
|
||||
|
||||
for (let index = 0; index < defaultninepostion.value.length; index++) {
|
||||
defaultninepostion.value[index].x = ninepostion.value[index].x;
|
||||
|
|
@ -526,7 +517,6 @@ export default defineComponent({
|
|||
if (sessionStorage.SurfaceCorrection) {
|
||||
set_cache.value = JSON.parse(sessionStorage.SurfaceCorrection);
|
||||
use_set_cache();
|
||||
} else {
|
||||
}
|
||||
syncpoint();
|
||||
} catch (error) {
|
||||
|
|
@ -535,8 +525,6 @@ export default defineComponent({
|
|||
};
|
||||
const use_server_config = () => {
|
||||
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;
|
||||
nine[index].x = config.point9[index].x;
|
||||
|
|
@ -544,8 +532,6 @@ export default defineComponent({
|
|||
}
|
||||
};
|
||||
const reset = (index: number) => {
|
||||
ninepostion.value[index].x = defaultninepostion.value[index].x;
|
||||
ninepostion.value[index].y = defaultninepostion.value[index].y;
|
||||
|
||||
nine[index].x = config.point9[index].def_x;
|
||||
nine[index].y = config.point9[index].def_y;
|
||||
|
|
|
|||
|
|
@ -449,5 +449,6 @@ export default {
|
|||
"disable_blending_params":"disable blending params",
|
||||
"Please enter a value within the range":"Please enter a value within the range",
|
||||
"vertical correction":"vertical correction",
|
||||
"horizontal correction":"horizontal correction"
|
||||
"horizontal correction":"horizontal correction",
|
||||
"line width":"line width"
|
||||
};
|
||||
|
|
|
|||
|
|
@ -718,5 +718,6 @@ export default {
|
|||
"disable_blending_params":"禁用融合参数",
|
||||
"Please enter a value within the range":"请输入范围内的值",
|
||||
"vertical correction":"垂直校正",
|
||||
"horizontal correction":"水平校正"
|
||||
"horizontal correction":"水平校正",
|
||||
"line width":"线宽"
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue