resistance layout, termoprophet layout e varie

This commit is contained in:
=
2021-02-17 12:30:32 +01:00
parent eac94482b9
commit 5be2108efb
9 changed files with 106 additions and 68 deletions
@@ -3,12 +3,9 @@
@import "colors.less";
@import "fonts.less";
.warmers {
position: relative;
svg {
width: 100%;
height: 100%;
@@ -31,28 +28,34 @@
font-size: 32px;
font-weight: bold;
color: #fff;
&.disabled{
cursor:not-allowed;
&.disabled {
cursor: not-allowed;
}
&.temp{
&.id {
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-template-rows: 70% 30%;
display: grid;
font-size: 22px;
span{
text-align: right;
margin-right: 5px;
font-size: 18px;
span {
grid-column-start: 1;
grid-column-end: -1;
text-align: center;
}
small {
grid-row: 2;
padding: 0 10px;
&:last-of-type {
grid-column: 2;
text-align: right;
}
}
}
}
}
.icon{
.icon {
font-size: 30px;
margin-left: 10px;
}
}
}
+14 -5
View File
@@ -4816,15 +4816,24 @@ article .box .body {
.warmers svg .resistance.disabled {
cursor: not-allowed;
}
.warmers svg .resistance.temp {
.warmers svg .resistance.id {
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
grid-template-rows: 70% 30%;
display: grid;
font-size: 22px;
font-size: 18px;
}
.warmers svg .resistance.temp span {
.warmers svg .resistance.id span {
grid-column-start: 1;
grid-column-end: -1;
text-align: center;
}
.warmers svg .resistance.id small {
grid-row: 2;
padding: 0 10px;
}
.warmers svg .resistance.id small:last-of-type {
grid-column: 2;
text-align: right;
margin-right: 5px;
}
.warmers .icon {
font-size: 30px;
@@ -11,16 +11,13 @@ export default class Resistance extends Vue {
@Prop()
channel: Warmers.IChannel;
@Prop({ default: true })
editable: boolean;
@Prop({ default: false })
selected: boolean;
@Prop({ default: false })
temperature: boolean;
@Prop({ default: function () { return [253, 216, 53] } })
colorFrom: number[];
@@ -39,42 +36,44 @@ export default class Resistance extends Vue {
@Prop({ default: function () { return [23, 86, 173] } })
selectedColorTo: number[];
click(){
if(this.editable)
@Prop({ default: 0 })
mode: number;
click() {
if (this.editable)
this.$emit('click');
}
get currentStandardTempColor() {
//Not linear, but quadratic
if(!this.channel.tCamActive || this.channel.setpointHMI==0)
if (!this.channel.tCamActive || this.channel.setpointHMI == 0)
return "179, 179, 179";
if(this.channel.tCamTempAct==0 || this.channel.tCamTempSet==0)
if (this.channel.tCamTempAct == 0 || this.channel.tCamTempSet == 0)
return "144,191,61";
var delta = this.channel.tCamTempSet - this.channel.tCamTempAct;
if(delta >= - 5 && delta <= 5)
{
if (delta >= - 5 && delta <= 5) {
return "144,191,61";
}
else if(delta>5 && delta<=20){
else if (delta > 5 && delta <= 20) {
delta = delta - 5;
return [this.ColorColdFrom[0] - (this.ColorColdFrom[0] - this.colorColdTo[0]) * delta / 20,
this.ColorColdFrom[1] - (this.ColorColdFrom[1] - this.colorColdTo[1]) * delta / 20,
this.ColorColdFrom[2] - (this.ColorColdFrom[2] - this.colorColdTo[2]) * delta / 20];
}
else if(delta>20){
else if (delta > 20) {
return "23, 86, 173";
}
else if(delta<-5 && delta>=-20){
delta = delta* (-1);
else if (delta < -5 && delta >= -20) {
delta = delta * (-1);
delta = delta - 5;
return [this.colorFrom[0] - (this.colorFrom[0] - this.colorTo[0]) * delta / 20,
this.colorFrom[1] - (this.colorFrom[1] - this.colorTo[1]) * delta / 20,
this.colorFrom[2] - (this.colorFrom[2] - this.colorTo[2]) * delta / 20];
}
else if(delta<-20){
else if (delta < -20) {
return "244, 0, 0";
}
return "179, 179, 179";
@@ -84,7 +83,7 @@ export default class Resistance extends Vue {
get currentStandardColor() {
//Not linear, but quadratic
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
var x = 1 / 100 * this.channel.setpointHMI * this.channel.setpointHMI;
return [this.colorFrom[0] - (this.colorFrom[0] - this.colorTo[0]) * x / 100,
this.colorFrom[1] - (this.colorFrom[1] - this.colorTo[1]) * x / 100,
this.colorFrom[2] - (this.colorFrom[2] - this.colorTo[2]) * x / 100];
@@ -94,13 +93,13 @@ export default class Resistance extends Vue {
if (this.selected) return this.currentSelectedColor;
return this.currentStandardColor;
}
get currentColorTemp() {
if (this.selected) return this.currentSelectedTempColor;
return this.currentStandardTempColor;
}
get currentSelectedColor() {
@@ -116,12 +115,12 @@ export default class Resistance extends Vue {
get currentSelectedTempColor() {
//Not linear, but quadratic
return "0,38,128"
/*
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
return [this.selectedColorFrom[0] - (this.selectedColorFrom[0] - this.selectedColorTo[0]) * x / 100,
this.selectedColorFrom[1] - (this.selectedColorFrom[1] - this.selectedColorTo[1]) * x / 100,
this.selectedColorFrom[2] - (this.selectedColorFrom[2] - this.selectedColorTo[2]) * x / 100];*/
/*
var x = 1/100 * this.channel.setpointHMI * this.channel.setpointHMI;
return [this.selectedColorFrom[0] - (this.selectedColorFrom[0] - this.selectedColorTo[0]) * x / 100,
this.selectedColorFrom[1] - (this.selectedColorFrom[1] - this.selectedColorTo[1]) * x / 100,
this.selectedColorFrom[2] - (this.selectedColorFrom[2] - this.selectedColorTo[2]) * x / 100];*/
}
}
@@ -2,13 +2,21 @@
<div
class="resistance"
:key="selected"
v-if="!temperature"
v-if="mode == 1"
@click="click"
v-on:touchend="click"
:style="{backgroundColor:`rgb(${currentColor})`}"
>{{channel.setpointHMI}} %</div>
<div
class="resistance temp"
class="resistance"
:key="selected"
v-else-if="mode == 0"
@click="click"
v-on:touchend="click"
:style="{backgroundColor:`rgb(${currentColor})`}"
>{{channel.tCamTempSet}}&nbsp;°C</div>
<div
class="resistance id"
:class="{'disabled':!editable}"
:key="selected"
@click="click"
@@ -16,11 +24,9 @@
v-else
:style="{backgroundColor:`rgb(${currentColorTemp})`}"
>
<span v-if="channel.setpointHMI == 0 || !channel.tCamActive">--</span>
<span v-else>{{channel.tCamTempSet}}&nbsp;°C</span>
<span>{{channel.tCamTempAct}}&nbsp;°C</span>
<span>{{channel.setpointHMI}}&nbsp;&nbsp;%</span>
<span>{{channel.setpointPLC}}&nbsp;&nbsp;%</span>
<span>ID:</span>
<small>Bo:</small>
<small>Ch: {{channel.idChannel}}</small>
</div>
</template>
<script src="./resistance.ts" lang="ts"></script>
@@ -22,14 +22,25 @@
height: 250px;
border: none !important;
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
border-radius: 10px;
&::-webkit-slider-thumb {
width: 36px;
height: 36px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to bottom, #1756ad, #002e6e 97%);
min-width: 30px;
min-height: 30px;
// box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
border: none;
background: none !important;
appearance: none;
}
}
input[type="range"]::-webkit-slider-thumb {
background-color: linear-gradient(
to bottom,
#1756ad,
#002e6e 97%
) !important;
}
}
.um-buttons {
@@ -25,6 +25,7 @@ export default class Thermocamera extends Vue {
thermoImageUri: string = "/thermoprophet/colored/_last.jpg";
thermoImageOpacity: number = 0;
resistanceMode = 0;
@Watch("warmers", { deep: true })
async ChangedTemps() {
@@ -110,22 +110,32 @@
@select="selectionChanged"
@methodChanged="m => selectionMethod = m"
:recipe="recipe"
:temperature="true"
:resistanceMode="resistanceMode"
thermoImage="/thermoprophet/colored/_last.jpg"
:thermoImageVisible="!!thermoImageOpacity"
:thermoImageVisible="thermocameraModeBTN"
:thermoImageOpacity="thermoImageOpacity"
></warmers>
<div class="right-controls">
<div class="um-buttons">
<button>{{'um-c' | localize('°C')}}</button>
<button>{{'um-perc' | localize('%%')}}</button>
<button>{{'um-id' | localize('ID')}}</button>
<button
@click="resistanceMode=0"
:class="{selected: resistanceMode ==0}"
>{{'um-c' | localize('°C')}}</button>
<button
@click="resistanceMode=1"
:class="{selected: resistanceMode ==1}"
>{{'um-perc' | localize('%%')}}</button>
<button
@click="resistanceMode=2"
:class="{selected: resistanceMode ==2}"
>{{'um-id' | localize('ID')}}</button>
</div>
<div class="tm-controls">
<button class="btn btn-info square"></button>
<input
:disabled="!thermocameraModeBTN"
type="range"
orient="vertical"
v-model="thermoImageOpacity"
@@ -32,9 +32,6 @@ export default class Warmers extends Vue {
@Prop({ default: true })
usePanZoom: boolean;
@Prop({ default: false })
temperature: boolean;
@Prop({ default: null })
thermoImage: string;
@@ -44,6 +41,9 @@ export default class Warmers extends Vue {
@Prop({ default: 0 })
thermoImageOpacity: number
@Prop({ default: 0 })
resistanceMode: number
get planSizeX() {
return parseFloat(this.parameters.warmerPlanSizeX.toString());
@@ -242,8 +242,7 @@ export default class Warmers extends Vue {
}
isdisabled(id) {
if (!this.temperature)
return false;
if (this.resistanceMode != 0) return false;
let channel = this.channels.find(c => c.idChannel == id);
return channel.setpointHMI == 0;
}
@@ -20,13 +20,13 @@
:rx="4"
>
<resistance
:mode="resistanceMode"
:res="cell"
:channel="getChannel(cell.idChannel)"
@mousedown="startSelection"
@mouseup="stopSelection"
@click="select(cell)"
:selected="isSelected(cell.idChannel)"
:temperature="temperature"
:editable="!isdisabled(cell.idChannel)"
/>
</foreignObject>