fix termo superiore

Thermo.Active/wwwroot/src/app_modules_thermo/components/keyboard.vue

@@ -1,5 +1,10 @@
 <template>
-	<div class="keyboard" v-if="visible" :style="{top: `${positionY}px`, left: `${positionX}px`}">
+	<div
+		class="keyboard"
+		v-if="visible"
+		:style="{top: `${positionY}px`, left: `${positionX}px`}"
+		@mousedown.prevent.stop
+	>
 		<div class="mask">
 			<button class="b7" @click="add('7')">
 				<label class="lab">7</label>

Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.ts

@@ -18,26 +18,32 @@ export default class SVGChart extends Vue {
   @Prop()
   unity: string;
 
+  @Prop({ default: null })
+  maxX: number;
+
+  @Prop({ default: null })
+  maxY: number;
+
   step: number = 50;
 
   startXOf(barindex: number) {
     return this.bars.slice(0, barindex).reduce((p, c) => c.width + p, 0);
   }
 
-  get maxX() {
-    return Math.max(this.bars.reduce((p, c) => c.width + p, 0), 1);
+  get MaxX() {
+    return this.maxX || Math.max(this.bars.reduce((p, c) => c.width + p, 0), 1);
   }
 
-  get maxY() {
-    return Math.max(...this.bars.map(i => i.height), 1);
+  get MaxY() {
+    return this.maxY || Math.max(...this.bars.map(i => i.height), 1);
   }
 
   scaleX(value: number) {
-    return value * 1000 / this.maxX;
+    return value * 1000 / this.MaxX;
   }
 
   scaleY(value: number) {
-    return value * 1000 / this.maxY;
+    return value * 1000 / this.MaxY;
   }
 }
 

Thermo.Active/wwwroot/src/app_modules_thermo/components/svgChart.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="chart">
-		<svg :viewBox="`${-2*step} ${-step} ${scaleX(maxX) *1.2 + step} ${scaleY(maxY) * 1.2}`">
+		<svg :viewBox="`${-2*step} ${-step} ${scaleX(MaxX) *1.2 + step} ${scaleY(MaxY) * 1.2}`">
 			<!-- posizione degli assi a 0,0 -->
-			<foreignObject x="-30" :y="scaleY(maxY)*1.06" width="30" height="30">
+			<foreignObject x="-30" :y="scaleY(MaxY)*1.06" width="30" height="30">
 				<label>0</label>
 			</foreignObject>
 			<!-- asse delle ascisse -->
@@ -10,25 +10,25 @@
 				<line
 					v-for="idx in 10"
 					:key="`x-${idx}`"
-					:y1="scaleY(maxY) * 1.1 - step"
-					:y2="scaleY(maxY) * 1.1 - step/2"
-					:x1="scaleX(maxX / 10 *idx)"
-					:x2="scaleX(maxX / 10 *idx)"
+					:y1="scaleY(MaxY) * 1.1 - step"
+					:y2="scaleY(MaxY) * 1.1 - step/2"
+					:x1="scaleX(MaxX / 10 *idx)"
+					:x2="scaleX(MaxX / 10 *idx)"
 					:stroke="lineBarColor"
 				/>
 				<foreignObject
 					v-for="idx in 10"
 					:key="`lx-${idx}`"
-					:y="scaleY(maxY) + step + 20"
-					:x="scaleX(maxX / 10 *idx) - step/2"
+					:y="scaleY(MaxY) + step + 20"
+					:x="scaleX(MaxX / 10 *idx) - step/2"
 					:width="step"
 					:height="step"
 				>
-					<label class="x">{{maxX / 10 *idx | round(2)}}</label>
+					<label class="x">{{MaxX / 10 *idx | round(2)}}</label>
 				</foreignObject>
 				<foreignObject
-					:x="scaleX(maxX) + step"
-					:y="scaleY(maxY) + step + 20"
+					:x="scaleX(MaxX) + step"
+					:y="scaleY(MaxY) + step + 20"
 					:width="step"
 					:height="step"
 				>
@@ -41,8 +41,8 @@
 				<line
 					v-for="idx in 10"
 					:key="`y-${idx}`"
-					:y1="scaleY(maxY/ 10 * idx) - step"
-					:y2="scaleY(maxY/ 10 * idx) - step"
+					:y1="scaleY(MaxY/ 10 * idx) - step"
+					:y2="scaleY(MaxY/ 10 * idx) - step"
 					:x1="0"
 					:x2="- step"
 					:stroke="lineBarColor"
@@ -50,12 +50,12 @@
 				<foreignObject
 					v-for="idx in 10"
 					:key="`ly-${idx}`"
-					:y="scaleY(maxY/ 10 * (idx-1))"
+					:y="scaleY(MaxY/ 10 * (idx-1))"
 					:x="- step*1.2"
 					:width="step"
 					:height="step"
 				>
-					<label class="y">{{maxY - maxY/ 10 * (idx-1) | round(2)}}</label>
+					<label class="y">{{MaxY - MaxY/ 10 * (idx-1) | round(2)}}</label>
 				</foreignObject>
 				<foreignObject :x="- step*1.2" :y="-step/2" width="50" height="30">
 					<label class="y">{{unity}}</label>
@@ -65,17 +65,17 @@
 			<g>
 				<line
 					:x1="-step"
-					:y1="scaleY(maxY)  + step"
-					:y2="scaleY(maxY)  + step"
-					:x2="scaleX(maxX) * 1.1"
+					:y1="scaleY(MaxY)  + step"
+					:y2="scaleY(MaxY)  + step"
+					:x2="scaleX(MaxX) * 1.1"
 					:stroke="lineBarColor"
 				/>
-				<line x1="0" :y1="-step" x2="0" :y2="scaleY(maxY) * 1.1" :stroke="lineBarColor" />
+				<line x1="0" :y1="-step" x2="0" :y2="scaleY(MaxY) * 1.1" :stroke="lineBarColor" />
 			</g>
 			<rect
 				v-for="(b, idx) in bars"
 				:key="idx"
-				:y="scaleY(maxY) + step - scaleY(b.height)"
+				:y="scaleY(MaxY) + step - scaleY(b.height)"
 				:x="scaleX(startXOf(idx))"
 				:width="scaleX(b.width)"
 				:height="scaleY(b.height)"

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.ts

@@ -1,8 +1,9 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
+import termoChart from "./termoChart.vue";
 
-@Component({ name: 'svgtermoinferiore' })
+@Component({ name: 'svgtermoinferiore', components: { termoChart } })
 export default class SVGTermoregolazioneInferiore extends Vue {
 
   @Prop()

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-inferiore.vue

@@ -1,7 +1,11 @@
 <template>
 	<div class="svg-area">
-		<img src="assets/svg/disegno-termo.svg" />
-		<div class="borded_label" id="quota1" v-focus-on="pyrometer_lowerthermoregulator_sleep_percentage">
+		<termo-chart></termo-chart>
+		<div
+			class="borded_label"
+			id="quota1"
+			v-focus-on="pyrometer_lowerthermoregulator_sleep_percentage"
+		>
 			<div>
 				<span>{{recipe.pyrometer_lowerthermoregulator_sleep_percentage.setpointHMI}}</span>
 				<small>{{recipe.pyrometer_lowerthermoregulator_sleep_percentage.unitMeasure}}</small>
@@ -19,7 +23,11 @@
 				<small>{{recipe.pyrometer_lowerthermoregulator_max_percentage.unitMeasure}}</small>
 			</div>
 		</div>
-		<div class="borded_label" id="quota4" v-focus-on="pyrometer_lowerthermoregulator_start_adjustment">
+		<div
+			class="borded_label"
+			id="quota4"
+			v-focus-on="pyrometer_lowerthermoregulator_start_adjustment"
+		>
 			<div>
 				<img src="assets/icons/png/temperatura.png" />
 				<span>{{recipe.pyrometer_lowerthermoregulator_start_adjustment.setpointHMI}}</span>
@@ -57,4 +65,4 @@
 	left: 953px;
 }
 </style>
-<script lang="ts" src="./SVG-termo-superiore.ts"></script>
+<script lang="ts" src="./SVG-termo-inferiore.ts"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.ts

@@ -1,8 +1,10 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
+import termoChart from "./termoChart.vue";
+import controlBox from "./controlBox.vue";
 
-@Component({ name: 'svgtermosuperiore' })
+@Component({ name: 'svgtermosuperiore', components: { termoChart, controlBox } })
 export default class SVGTermoregolazioneSuperiore extends Vue {
 
   @Prop()

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/SVG-termo-superiore.vue

@@ -1,60 +1,52 @@
 <template>
-	<div class="svg-area">
-		<img src="assets/svg/disegno-termo.svg" />
-		<div class="borded_label" id="quota1" v-focus-on="pyrometer_upperthermoregulator_sleep_percentage">
-			<div>
-				<span>{{recipe.pyrometer_upperthermoregulator_sleep_percentage.setpointHMI}}</span>
-				<small>{{recipe.pyrometer_upperthermoregulator_sleep_percentage.unitMeasure}}</small>
-			</div>
-		</div>
-		<div class="borded_label" id="quota2" v-focus-on="pyrometer_upperthermoregulator_min_percentage">
-			<div>
-				<span>{{recipe.pyrometer_upperthermoregulator_min_percentage.setpointHMI}}</span>
-				<small>{{recipe.pyrometer_upperthermoregulator_min_percentage.unitMeasure}}</small>
-			</div>
-		</div>
-		<div class="borded_label" id="quota3" v-focus-on="pyrometer_upperthermoregulator_max_percentage">
-			<div>
-				<span>{{recipe.pyrometer_upperthermoregulator_max_percentage.setpointHMI}}</span>
-				<small>{{recipe.pyrometer_upperthermoregulator_max_percentage.unitMeasure}}</small>
-			</div>
-		</div>
-		<div class="borded_label" id="quota4" v-focus-on="pyrometer_upperthermoregulator_start_adjustment">
-			<div>
-				<img src="assets/icons/png/temperatura.png" />
-				<span>{{recipe.pyrometer_upperthermoregulator_start_adjustment.setpointHMI}}</span>
-				<small>{{recipe.pyrometer_upperthermoregulator_start_adjustment.unitMeasure}}</small>
-			</div>
-		</div>
-		<div class="borded_label" id="quota5" v-focus-on="pyrometer_upperthermoregulator_end_adjustment">
-			<div>
-				<img src="assets/icons/png/temperatura.png" />
-				<span>{{recipe.pyrometer_upperthermoregulator_end_adjustment.setpointHMI}}</span>
-				<small>{{recipe.pyrometer_upperthermoregulator_end_adjustment.unitMeasure}}</small>
-			</div>
-		</div>
+	<div class="svg-area pirometro">
+		<termo-chart
+			:max-y="recipe.pyrometer_upperthermoregulator_max_percentage.range.max"
+			:max-x="recipe.pyrometer_upperthermoregulator_end_adjustment.range.max"
+			:y1="recipe.pyrometer_upperthermoregulator_sleep_percentage.setpointHMI"
+			:y2="recipe.pyrometer_upperthermoregulator_min_percentage.setpointHMI"
+			:y3="recipe.pyrometer_upperthermoregulator_max_percentage.setpointHMI"
+			:x1="10"
+			:x2="recipe.pyrometer_upperthermoregulator_start_adjustment.setpointHMI"
+			:x3="recipe.pyrometer_upperthermoregulator_end_adjustment.setpointHMI"
+		>
+			<control-box
+				v-model="recipe.pyrometer_upperthermoregulator_sleep_percentage"
+				slot="y1"
+				:move-vertical="true"
+				:scale="0.2"
+			></control-box>
+			<control-box
+				v-model="recipe.pyrometer_upperthermoregulator_min_percentage"
+				slot="y2"
+				:move-vertical="true"
+				:scale="0.2"
+			></control-box>
+			<control-box
+				v-model="recipe.pyrometer_upperthermoregulator_max_percentage"
+				slot="y3"
+				:move-vertical="true"
+				:scale="0.2"
+			></control-box>
+			<control-box
+				v-model="recipe.pyrometer_upperthermoregulator_start_adjustment"
+				slot="x2"
+				:move-horizontal="true"
+				:scale="0.3"
+			></control-box>
+			<control-box
+				v-model="recipe.pyrometer_upperthermoregulator_end_adjustment"
+				slot="x3"
+				:move-horizontal="true"
+				:scale="0.3"
+			></control-box>
+		</termo-chart>
 	</div>
 </template>
 <style scoped>
-#quota1 {
-	top: 605px;
-	left: 0px;
-}
-#quota2 {
-	top: 455px;
-	left: 0px;
-}
-#quota3 {
-	top: 145px;
-	left: 0px;
-}
-#quota4 {
-	top: 718px;
-	left: 548px;
-}
-#quota5 {
-	top: 718px;
-	left: 953px;
+.svg-area.pirometro {
+	padding: 50px;
+	width: calc(100% - 100px) !important;
 }
 </style>
 <script lang="ts" src="./SVG-termo-superiore.ts"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/controlBox.ts

@@ -0,0 +1,66 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+
+@Component({})
+export default class ControlBox extends Vue {
+  @Prop()
+  value: Recipe.IValue;
+
+  @Prop({ default: false })
+  moveVertical: boolean;
+
+  @Prop({ default: false })
+  moveHorizontal: boolean;
+
+  moving = false;
+
+  @Prop({ default: 0.2 })
+  scale: number;
+
+  onmousemove(event: MouseEvent) {
+    if (event.buttons != 1) return;
+
+    if (this.moveHorizontal)
+      this.value.setpointHMI += event.movementX * this.scale;
+
+    if (this.moveVertical)
+      this.value.setpointHMI -= event.movementY * this.scale;
+
+    this.value.setpointHMI = Math.min(Math.max(this.value.setpointHMI, this.value.range.min), this.value.range.max);
+  }
+
+  touching: {
+    x: number,
+    y: number
+  } = null;
+  ontouch(event: TouchEvent) {
+    for (const touch of Array.from(event.touches)) {
+      this.touching = { x: touch.clientX, y: touch.clientY }
+    }
+  }
+
+  ontouchmove(event: TouchEvent) {
+    if (!this.touching) return;
+
+    let newtouch: { x: number, y: number } = null;
+    for (const touch of Array.from(event.touches).slice(0, 1)) {
+      newtouch = { x: touch.clientX, y: touch.clientY }
+    }
+
+    if (this.moveHorizontal)
+      this.value.setpointHMI += (newtouch.x - this.touching.x) * this.scale;
+
+    if (this.moveVertical)
+      this.value.setpointHMI -= (newtouch.y - this.touching.y) * this.scale;
+
+    this.value.setpointHMI = Math.min(Math.max(this.value.setpointHMI, this.value.range.min), this.value.range.max);
+
+    // console.log(event, newtouch, this.touching);
+
+    this.touching = newtouch;
+
+
+  }
+
+}

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/controlBox.vue

@@ -0,0 +1,36 @@
+<template>
+	<div
+		class="controlBox"
+		:class="{'vertical': moveVertical, 'horizontal':moveHorizontal}"
+		@mousemove.capture.prevent="onmousemove"
+		v-on:touchstart="ontouch"
+		v-on:touchend="touching = null"
+		v-on:touchmove="ontouchmove"
+	>
+		<span>{{value.setpointHMI | round(1)}}</span>
+		<small>{{value.unitMeasure}}</small>
+	</div>
+</template>
+<style scoped>
+.controlBox {
+	width: calc(100% - 10px);
+	height: calc(100% - 10px);
+	border: 2px solid #9b9b9b;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+	margin: 5px;
+	border-radius: 30px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: #fff;
+}
+
+.vertical {
+	cursor: ns-resize;
+}
+
+.horizontal {
+	cursor: ew-resize;
+}
+</style>
+<script src="./controlBox.ts" lang="ts"></script>

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/termoChart.ts

@@ -0,0 +1,66 @@
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Prop } from "vue-property-decorator";
+
+@Component({})
+export default class termoChart extends Vue {
+
+  @Prop({ default: "#888" })
+  lineBarColor: string;
+
+  @Prop({ default: .3 })
+  x1: number;
+
+  @Prop({ default: 2 })
+  x2: number;
+
+  @Prop({ default: 3 })
+  x3: number;
+
+  @Prop({ default: .3 })
+  y1: number;
+
+  @Prop({ default: 1 })
+  y2: number;
+
+  @Prop({ default: 2 })
+  y3: number;
+
+  @Prop({ default: null })
+  maxX: number;
+
+  @Prop({ default: null })
+  maxY: number;
+
+  @Prop({ default: 100 })
+  step: number = 100;
+
+  @Prop({ default: 1000 })
+  width: number;
+
+  @Prop({ default: 600 })
+  height: number;
+
+  @Prop({ default: 100 })
+  controlWidth: number;
+
+  @Prop({ default: 60 })
+  controlHeight: number;
+
+  get MaxX() {
+    return this.maxX || Math.max(this.x1, this.x2, this.x3);
+  }
+
+  get MaxY() {
+    return this.maxY || Math.max(this.y1, this.y2, this.y3);
+  }
+
+  scaleX(value: number) {
+    return value * this.width / this.MaxX;
+  }
+
+  scaleY(value: number) {
+    return value * this.height / this.MaxY;
+  }
+}
+

Thermo.Active/wwwroot/src/app_modules_thermo/setup/pirometro/components/base-components/SVG_Components/termoChart.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="chart">
+		<svg :viewBox="`${-2*step} ${-step} ${scaleX(MaxX) *1.2 + step} ${scaleY(MaxY) * 1.2 + step} `">
+			<g>
+				<line
+					:x1="0"
+					:y1="scaleY(MaxY)"
+					:y2="scaleY(MaxY)"
+					:x2="scaleX(MaxX) * 1.1"
+					:stroke="lineBarColor"
+				/>
+				<line x1="0" :y1="-step" x2="0" :y2="scaleY(MaxY)" :stroke="lineBarColor" />
+			</g>
+
+			<g>
+				<!-- line-h-1: prima riga orizzontale dall'alto -->
+				<line
+					x1="0"
+					:x2="scaleX(x2)"
+					:y1="scaleY(MaxY)  - scaleY(y3)"
+					:y2="scaleY(MaxY)  - scaleY(y3)"
+					:stroke="lineBarColor"
+				/>
+
+				<!-- line-h-2: seconda riga orizzontale dall'alto -->
+				<line
+					x1="0"
+					:x2="scaleX(x3)"
+					:y1="scaleY(MaxY)  - scaleY(y2)"
+					:y2="scaleY(MaxY) - scaleY(y2)"
+					:stroke="lineBarColor"
+				/>
+
+				<!-- line-v-1: prima riga verticale da sinistra -->
+				<line
+					:x1="scaleX(x1)"
+					:x2="scaleX(x1)"
+					:y1="scaleY(MaxY) "
+					:y2="scaleY(MaxY)  - scaleY(y3)"
+					:stroke="lineBarColor"
+				/>
+
+				<!-- line-v-2 -->
+				<line
+					:x1="scaleX(x2)"
+					:x2="scaleX(x2)"
+					:y1="scaleY(MaxY) "
+					:y2="scaleY(MaxY) - scaleY(y3)"
+					:stroke="lineBarColor"
+				/>
+
+				<!-- line-v-3 -->
+				<line
+					:x1="scaleX(x3)"
+					:x2="scaleX(x3)"
+					:y1="scaleY(MaxY) "
+					:y2="scaleY(MaxY)  - scaleY(y2)"
+					:stroke="lineBarColor"
+				/>
+
+				<path
+					stroke="darkred"
+					stroke-width="4"
+					fill="none"
+					:d="`M 0 ${scaleY(MaxY) - scaleY(y1)} 
+               Q ${scaleX(x1)} ${scaleY(MaxY)  - scaleY(y1)} ${scaleX(x1)} ${scaleY(MaxY)  - scaleY(y3)}
+               L ${scaleX(x2)} ${scaleY(MaxY)  - scaleY(y3)} 
+               C ${scaleX((x3 + x2)/2)} ${scaleY(MaxY)  - scaleY(y3)} ${scaleX((x3 + x2)/2)} ${scaleY(MaxY)  - scaleY(y2)} ${scaleX(x3)} ${scaleY(MaxY)  - scaleY(y2)}
+          `"
+				/>
+			</g>
+			<g>
+				<foreignObject
+					:width="controlWidth"
+					:height="controlHeight"
+					:x="-step"
+					:y="scaleY(MaxY)  - scaleY(y3) - controlHeight/2"
+				>
+					<slot name="y3" />
+				</foreignObject>
+				<foreignObject
+					:width="controlWidth"
+					:height="controlHeight"
+					:x="-step"
+					:y="scaleY(MaxY)  - scaleY(y2) - controlHeight/2"
+				>
+					<slot name="y2" />
+				</foreignObject>
+				<foreignObject
+					:width="controlWidth"
+					:height="controlHeight"
+					:x="-step"
+					:y="scaleY(MaxY)  - scaleY(y1) - controlHeight/2"
+				>
+					<slot name="y1" />
+				</foreignObject>
+
+				<foreignObject
+					:width="controlWidth"
+					:height="controlHeight"
+					:y="scaleY(MaxY) "
+					:x="scaleX(x2) - controlWidth/2"
+				>
+					<slot name="x2" />
+				</foreignObject>
+				<foreignObject
+					:width="controlWidth"
+					:height="controlHeight"
+					:y="scaleY(MaxY) "
+					:x="scaleX(x3) - controlWidth/2"
+				>
+					<slot name="x3" />
+				</foreignObject>
+			</g>
+		</svg>
+	</div>
+</template>
+<style scoped>
+.chart {
+	overflow: hidden;
+	width: 100%;
+}
+
+.chart svg {
+	width: 100%;
+	height: 100%;
+}
+
+.chart label {
+	font-size: 18px;
+	text-align: center;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.chart label.y {
+	justify-content: flex-end;
+}
+</style>
+<script src="./termoChart.ts" lang="ts"></script>