Added UI to Thermocamera

Thermo.Active/wwwroot/assets/styles/base/riscaldi.less

@@ -30,6 +30,17 @@
       font-size: 32px;
       font-weight: bold;
       color: #fff;
+
+      &.temp{        
+        grid-template-columns: 50% 50%;
+        grid-template-rows: 50% 50%;
+        display: grid;
+        font-size: 22px;
+        span{
+          text-align: right;
+          margin-right: 5px;
+        }
+      }
     }
   }
 

Thermo.Active/wwwroot/assets/styles/style.css

@@ -4683,6 +4683,16 @@ article .box .body {
   font-weight: bold;
   color: #fff;
 }
+.warmers svg .resistance.temp {
+  grid-template-columns: 50% 50%;
+  grid-template-rows: 50% 50%;
+  display: grid;
+  font-size: 22px;
+}
+.warmers svg .resistance.temp span {
+  text-align: right;
+  margin-right: 5px;
+}
 .warmers .icon {
   font-size: 30px;
   margin-left: 10px;

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/resistance.ts

@@ -15,6 +15,9 @@ export default class Resistance extends Vue {
   @Prop({ default: false })
   selected: boolean;
 
+  @Prop({ default: false })
+  temperature: boolean;  
+
   @Prop({ default: function () { return [253, 216, 53] } })
   colorFrom: number[];
 

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/resistance.vue

@@ -2,9 +2,23 @@
 	<div
 		class="resistance"
 		:key="selected"
+		v-if="!temperature"
 		@click="$emit('click')"
 		v-on:touchend="$emit('click')"
 		:style="{backgroundColor:`rgb(${currentColor})`}"
 	>{{channel.setpointHMI}} %</div>
+	<div
+		class="resistance temp"
+		:key="selected"
+		@click="$emit('click')"
+		v-on:touchend="$emit('click')"
+		v-else
+		:style="{backgroundColor:`rgb(${currentColor})`}"
+	>
+	<span>{{channel.setpointHMI}}&nbsp;°C</span>
+	<span>{{channel.setpointHMI}}&nbsp;°C</span>
+	<span>{{channel.setpointHMI}}&nbsp;&nbsp;%</span>
+	<span>{{channel.setpointHMI}}&nbsp;&nbsp;%</span>	
+	</div>
 </template>
 <script src="./resistance.ts" lang="ts"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/thermocamera.ts

@@ -47,6 +47,7 @@ export default class Thermocamera extends Vue {
   }
 
   async showcamera(){
+    this.zoomReset()
     await thermocameraService.show();
     
   }
@@ -56,4 +57,36 @@ export default class Thermocamera extends Vue {
     this.uniformChannelValue = -1;
     this.selectedChannelIds = selected;
   }
+
+  disableHeater(){
+
+  }
+
+  enableHeater(){
+    
+  }
+
+  setAllTemperature(){
+    
+  }
+  
+  add5() {
+    for (const c of this.selectedChannels) c.setpointHMI = Math.min(Math.max(parseFloat(c.setpointHMI.toString()) + 5, 0), 100);
+    this.$emit("warmersChanged");
+  }
+
+  remove5() {
+    for (const c of this.selectedChannels) c.setpointHMI = Math.min(Math.max(parseFloat(c.setpointHMI.toString()) - 5, 0), 100);
+    this.$emit("warmersChanged");
+  }
+
+  add1() {
+    for (const c of this.selectedChannels) c.setpointHMI = Math.min(Math.max(parseFloat(c.setpointHMI.toString()) + 1, 0), 100);
+    this.$emit("warmersChanged");
+  }
+
+  remove1() {
+    for (const c of this.selectedChannels) c.setpointHMI = Math.min(Math.max(parseFloat(c.setpointHMI.toString()) - 1, 0), 100);
+    this.$emit("warmersChanged");
+  }
 }

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/thermocamera.vue

@@ -3,15 +3,73 @@
 		<aside class="scrollable auto" v-if="recipe">
 			<div class="box transparent">
 				<div class="body">
-					
 					<div class="divider"></div>
 
-					
+					<div class="input-area">
+						<label>{{'warmers_selection' | localize('Selezione')}}</label>
+					</div>
+					<div class="input-area left grid grid-5">
+						<button
+							class="btn btn-info square"
+							@click="$refs.warmers.toggleSelection('rect')"
+							:class="{pressed: selectionMethod == 'rect'}"
+						>
+							<img src="assets/icons/png/rett.png" />
+						</button>
+						<button
+							class="btn btn-info square"
+							@click="$refs.warmers.toggleSelection('poly')"
+							:class="{pressed: selectionMethod == 'poly'}"
+						>
+							<img src="assets/icons/png/libera.png" />
+						</button>
+						<label></label>
+						<button class="btn btn-info" @click="$refs.warmers.selectAll()">
+							<label>{{'warmers_select_all' | localize('Tutti')}}</label>
+						</button>
+						<button class="btn btn-info" @click="$refs.warmers.selectNone()">
+							<label>{{'warmers_select_none' | localize('Nessuno')}}</label>
+						</button>
+					</div>
+					<div class="input-area left grid">
+						<button
+							class="btn"
+							@click="showcamera"
+						>{{'warmers_showcamera' | localize('Show Camera')}}</button>
+					</div>
+					<div class="divider"></div>		
+					<div class="input-area">
+						<label>{{'warmers_enable' | localize('Gestione Abilitazione')}}</label>
+					</div>
+					<div class="input-area grid left">
+						<button
+							class="btn"
+							@click="enableHeater"
+						>{{'warmers_enabletemp' | localize('Enable selected')}}</button>
+						<button
+							class="btn"
+							@click="disableHeater"
+						>{{'warmers_disabletemp' | localize('Disable selected')}}</button>
+					</div>
+					<div class="divider"></div>
+					<div class="input-area">
+						<label>{{'warmers_temperature' | localize('Gestione Temperatura')}}</label>
+					</div>
+					<div class="input-area left grid grid-5">
+						<button class="btn btn-info square" @click="remove5()">-5°C</button>
+						<button class="btn btn-info square" @click="remove1()">-1°C</button>
+						<button class="btn btn-info square" @click="add1()">+1°C</button>
+						<button class="btn btn-info square" @click="add5()">+5°C</button>
+						<select class="input-select" v-model="uniformChannelValue" @change="changedSelectValue">
+							<option value="-1">{{'warmers_select_power' | localize('Seleziona...')}}</option>
+							<option v-for="index in 31" :key="index" :value="((index-1)*10)">{{(index-1)*10}}°C</option>
+						</select>
+					</div>			
 					<div class="input-area grid left">
 						<button
 							class="btn btn-success"
-							@click="showcamera"
-						>{{'warmers_showcamera' | localize('Show Camera')}}</button>
+							@click="setAllTemperature"
+						>{{'warmers_setTemperature' | localize('Set all temperature')}}</button>
 					</div>
 					
 					<!-- </div> -->
@@ -25,6 +83,7 @@
 				@select="selectionChanged"
 				@methodChanged="m => selectionMethod = m"
 				:recipe="recipe"
+				:temperature="true"
 			></warmers>
 
 			<div class="absolute bottom right">

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/warmers.ts

@@ -32,6 +32,10 @@ export default class Warmers extends Vue {
   @Prop({ default: true })
   usePanZoom: boolean;
 
+  @Prop({ default: false })
+  temperature: boolean;
+
+
   get planSizeX() {
     return parseFloat(this.parameters.warmerPlanSizeX.toString());
   }

Thermo.Active/wwwroot/src/app_modules_thermo/setup/riscaldi/components/base-components/warmers.vue

@@ -26,6 +26,7 @@
 						@mouseup="stopSelection"
 						@click="select(cell)"
 						:selected="isSelected(cell.idChannel)"
+						:temperature="temperature"
 					/>
 				</foreignObject>
 			</g>