image && opacity

This commit is contained in:
=
2021-02-16 17:43:24 +01:00
parent 5789360908
commit b60fa9b07e
5 changed files with 76 additions and 116 deletions
@@ -13,7 +13,7 @@
flex-flow: column;
align-items: center;
justify-content: space-between;
height: 300px;
height: 350px;
input[type="range"][orient="vertical"] {
writing-mode: bt-lr; /* IE */
@@ -1,7 +1,7 @@
import Vue from 'vue';
import Component from 'vue-class-component';
import { store } from '@/store';
import { Prop,Watch } from 'vue-property-decorator';
import { Prop, Watch } from 'vue-property-decorator';
import warmers from "./warmers.vue";
import { thermocameraService } from "@/services/thermocameraService";
import { warmersService } from "@/services/warmersService";
@@ -22,149 +22,87 @@ export default class Thermocamera extends Vue {
uniformChannelValue: number = -1;
btnModeEnabled = true;
/*
modeEnabled: Recipe.IValue = {
setpointHMI: this.thermocameraMode,
checkpointHMI: this.thermocameraMode,
range: { min: 0, max: 999999 },
status: {
enabled: true,
hasError: false,
visible: true
}
} as Recipe.IValue;
OnOffEnabled: Recipe.IValue = {
setpointHMI: this.thermocameraOnOff,
checkpointHMI: this.thermocameraOnOff,
range: { min: 0, max: 999999 },
status: {
enabled: true,
hasError: false,
visible: true
}
} as Recipe.IValue;
@Watch("modeEnabled.setpointHMI", { deep: true })
async ChangedMode(n, o) {
if(this.modeEnabled.checkpointHMI != this.modeEnabled.setpointHMI)
this.$emit("enabChanged");
if(this.modeEnabled.setpointHMI == 1)
{
store.state.warmers.tCamStatus.thermoCamMode = true;
store.state.warmers.channels.forEach(function(element, index){
if (element.setpointHMI==0)
store.state.warmers.channels[index].tCamActive = false;
});
}
else
store.state.warmers.tCamStatus.thermoCamMode = false;
}
@Watch("OnOffEnabled.setpointHMI", { deep: true })
async ChangedOnOff(n, o) {
if(this.OnOffEnabled.checkpointHMI != this.OnOffEnabled.setpointHMI)
this.$emit("enabChanged");
if(this.OnOffEnabled.setpointHMI == 1)
store.state.warmers.tCamStatus.thermoCamOnOff = true;
else
store.state.warmers.tCamStatus.thermoCamOnOff = false;
}*/
thermoImageUri: string = "/thermoprophet/colored/_last.jpg";
thermoImageOpacity: number = 0;
@Watch("warmers", { deep: true })
async ChangedTemps() {
/*
if(store.state.warmers.tCamStatus.thermoCamOnOff)
this.OnOffEnabled.setpointHMI = 1;
else
this.OnOffEnabled.setpointHMI = 0;
async ChangedTemps() {
if(store.state.warmers.tCamStatus.thermoCamMode)
this.modeEnabled.setpointHMI = 1;
else
this.modeEnabled.setpointHMI = 0;
*/
this.btnModeEnabled = false;
for(const ch of store.state.warmers.channels){
if(ch.tCamTempSet > 0){
for (const ch of store.state.warmers.channels) {
if (ch.tCamTempSet > 0) {
this.btnModeEnabled = true;
break;
}
}
}
beforeMount(){
beforeMount() {
this.uniformChannelValue = -1;
}
async mounted(){
async mounted() {
this.ChangedTemps();
/*
this.modeEnabled.checkpointHMI = this.modeEnabled.setpointHMI;
this.OnOffEnabled.checkpointHMI = this.OnOffEnabled.setpointHMI;
*/
}
get selectedChannels(): Warmers.IChannel[] {
return store.state.warmers.channels.filter(i => this.selectedChannelIds.indexOf(i.idChannel) >= 0);
}
get isEnableDisableEnabled(): Boolean{
get isEnableDisableEnabled(): Boolean {
return !store.state.warmers.tCamStatus.thermoCamOnOff;
}
get thermocameraMode(): number {
if(store.state.warmers.tCamStatus.thermoCamMode)
if (store.state.warmers.tCamStatus.thermoCamMode)
return 1
else
return 0
}
get thermocameraModeBTN(): boolean {
return (store.state.warmers.tCamStatus.thermoCamMode) ;
return (store.state.warmers.tCamStatus.thermoCamMode);
}
get thermocameraRunBTN(): boolean {
return (store.state.warmers.tCamStatus.thermoCamOnOff) ;
}
async toggleEnable(){
store.state.warmers.tCamStatus.thermoCamMode = !store.state.warmers.tCamStatus.thermoCamMode;
await awaiter (warmersService.setTCamMode(store.state.warmers.tCamStatus.thermoCamMode));
return (store.state.warmers.tCamStatus.thermoCamOnOff);
}
async toggleRun(){
async toggleEnable() {
store.state.warmers.tCamStatus.thermoCamMode = !store.state.warmers.tCamStatus.thermoCamMode;
await awaiter(warmersService.setTCamMode(store.state.warmers.tCamStatus.thermoCamMode));
}
async toggleRun() {
store.state.warmers.tCamStatus.thermoCamOnOff = !store.state.warmers.tCamStatus.thermoCamOnOff;
await awaiter (warmersService.setTCamOn(store.state.warmers.tCamStatus.thermoCamOnOff));
await awaiter(warmersService.setTCamOn(store.state.warmers.tCamStatus.thermoCamOnOff));
}
get thermocameraOnOff(): number {
if(store.state.warmers.tCamStatus.thermoCamOnOff)
if (store.state.warmers.tCamStatus.thermoCamOnOff)
return 1
else
return 0
}
get thermoCamModeNotEnabled(): boolean {
return !store.state.warmers.tCamStatus.thermoCamMode;
}
selectionMethod = "none"
changedSelectValue(v){
if(this.uniformChannelValue>=0)
for (const c of this.selectedChannels) c.tCamTempSet = this.uniformChannelValue;
changedSelectValue(v) {
if (this.uniformChannelValue >= 0)
for (const c of this.selectedChannels) c.tCamTempSet = this.uniformChannelValue;
this.$emit("tempsChanged");
}
get warmers() {
return store.state.warmers;
}
zoomIn() {
(this.$refs.warmers as any).zoomIn();
}
@@ -176,9 +114,9 @@ export default class Thermocamera extends Vue {
(this.$refs.warmers as any).zoomReset();
}
async showcamera(){
async showcamera() {
this.zoomReset()
await thermocameraService.show();
await thermocameraService.show();
}
selectionChanged(selected: number[]) {
@@ -187,26 +125,26 @@ export default class Thermocamera extends Vue {
this.selectedChannelIds = selected;
}
disableHeater(){
disableHeater() {
for (const c of this.selectedChannels) c.tCamActive = false;
this.$emit("enabChanged");
this.$emit("enabChanged");
}
enableHeater(){
enableHeater() {
for (const c of this.selectedChannels) c.tCamActive = true;
this.$emit("enabChanged");
this.$emit("enabChanged");
}
setAllTemperature(){
(this.$refs.warmers as any).automateTemp();
this.$emit("tempsChanged");
}
clearAllTemperature(){
(this.$refs.warmers as any).clearTemp();
setAllTemperature() {
(this.$refs.warmers as any).automateTemp();
this.$emit("tempsChanged");
}
clearAllTemperature() {
(this.$refs.warmers as any).clearTemp();
this.$emit("tempsChanged");
}
add5() {
for (const c of this.selectedChannels) c.tCamTempSet = Math.min(Math.max(parseFloat(c.tCamTempSet.toString()) + 5, 0), 300);
this.$emit("tempsChanged");
@@ -144,6 +144,9 @@
@methodChanged="m => selectionMethod = m"
:recipe="recipe"
:temperature="true"
thermoImage="/thermoprophet/colored/_last.jpg"
:thermoImageVisible="!!thermoImageOpacity"
:thermoImageOpacity="thermoImageOpacity"
></warmers>
<div class="right-controls">
@@ -154,9 +157,16 @@
</div>
<div class="tm-controls">
<button class="btn btn-info square icon"></button>
<input type="range" orient="vertical" />
<span>%</span>
<button class="btn btn-info square"></button>
<input
type="range"
orient="vertical"
v-model="thermoImageOpacity"
:min="0"
:max="1"
:step="0.01"
/>
<span>{{Math.round(thermoImageOpacity * 100)}}%</span>
</div>
<div class="buttons">
@@ -35,6 +35,15 @@ export default class Warmers extends Vue {
@Prop({ default: false })
temperature: boolean;
@Prop({ default: null })
thermoImage: string;
@Prop({ default: false })
thermoImageVisible: boolean
@Prop({ default: 0 })
thermoImageOpacity: number
get planSizeX() {
return parseFloat(this.parameters.warmerPlanSizeX.toString());
@@ -103,7 +112,7 @@ export default class Warmers extends Vue {
selectAll() {
this.selectedChannels = [];
for (var ch of this.channels) {
if(!this.isdisabled(ch.idChannel))
if (!this.isdisabled(ch.idChannel))
this.selectedChannels.push(ch.idChannel);
}
this.$emit('select', this.selectedChannels)
@@ -206,7 +215,7 @@ export default class Warmers extends Vue {
this.resistancePosition(row, cell, point1, point2, point3, point4);
if (lazo.isPointInFill(point1) || lazo.isPointInFill(point2) || lazo.isPointInFill(point3) || lazo.isPointInFill(point4)) {
if(!this.isdisabled(cell.idChannel))
if (!this.isdisabled(cell.idChannel))
captured.add(cell.idChannel);
}
}
@@ -232,11 +241,11 @@ export default class Warmers extends Vue {
}
isdisabled(id){
if(!this.temperature)
isdisabled(id) {
if (!this.temperature)
return false;
let channel = this.channels.find(c => c.idChannel == id);
return channel.setpointHMI==0;
return channel.setpointHMI == 0;
}
clearTemp() {
@@ -270,9 +279,9 @@ export default class Warmers extends Vue {
}
for (const i of Array.from(result.keys())) {
for (const res of result.get(i)) {
for (const res of result.get(i)) {
let channel = this.channels.find(c => c.idChannel == res.idChannel);
if(channel.tCamActive)
if (channel.tCamActive)
channel.tCamTempSet = channel.tCamTempAct;
}
}
@@ -68,6 +68,9 @@
:d="`M ${selectionPoints[0].x} ${selectionPoints[0].y} L ${selectionPoints.slice(1).map(i => [i.x,i.y]).join(' ')} Z`"
/>
</g>
<g v-if="thermoImage && thermoImageVisible && thermoImageOpacity">
<image :href="thermoImage" :height="rows.length * height" :opacity="thermoImageOpacity" />
</g>
</g>
</svg>
</template>