Skip to content

Commit

Permalink
switch control improvement with bitmask
Browse files Browse the repository at this point in the history
  • Loading branch information
@unocelli
unocelli committed May 8, 2023
1 parent 1821242 commit 79ccca2
Show file tree
Hide file tree
Showing 13 changed files with 119 additions and 60 deletions.
8 changes: 8 additions & 0 deletions client/dist/assets/i18n/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,9 +212,17 @@
"chart.property-axis-x": "Label",
"chart.property-yaxis": "Y Axis",
"chart.property-axis-y1": "Y1 label",
"chart.property-axis-y1-min": "Y1 Min",
"chart.property-axis-y1-max": "Y1 Max",
"chart.property-axis-y2": "Y2 label",
"chart.property-axis-y2-min": "Y2 Min",
"chart.property-axis-y2-max": "Y2 Max",
"chart.property-axis-y3": "Y3 label",
"chart.property-axis-y3-min": "Y3 Min",
"chart.property-axis-y3-max": "Y3 Max",
"chart.property-axis-y4": "Y4 label",
"chart.property-axis-y4-min": "Y4 Min",
"chart.property-axis-y4-max": "Y4 Max",

"chart.rangetype-last8h": "Last 8 hours",
"chart.rangetype-last1d": "Last day",
Expand Down
2 changes: 1 addition & 1 deletion client/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,6 @@
</div>
</div>
</app-root>
<script src="runtime.8ef63094e52a66ba.js" type="module"></script><script src="polyfills.2696a6f9dc75535e.js" type="module"></script><script src="scripts.1c3385254ff4c93c.js" defer></script><script src="main.a4bc38a876662a05.js" type="module"></script>
<script src="runtime.8ef63094e52a66ba.js" type="module"></script><script src="polyfills.2696a6f9dc75535e.js" type="module"></script><script src="scripts.1c3385254ff4c93c.js" defer></script><script src="main.79901539321a90d7.js" type="module"></script>

</body></html>
2 changes: 1 addition & 1 deletion client/dist/main.a4bc38a876662a05.js → client/dist/main.79901539321a90d7.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "fuxa",
"version": "1.1.13-1199",
"version": "1.1.13-1201",
"keywords": [],
"author": "frangoteam <4frango@gmail.com>",
"description": "Web-based Process Visualization (SCADA/HMI/Dashboard) software",
Expand Down
2 changes: 1 addition & 1 deletion client/src/app/editor/editor.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1291,7 +1291,7 @@ export class EditorComponent implements OnInit, AfterViewInit, OnDestroy {
position: { top: '60px' },
data: {
settings: tempsettings, devices: Object.values(this.projectService.getDevices()),
withEvents: eventsSupported, withActions: actionsSupported,
withEvents: eventsSupported, withActions: actionsSupported, withBitmask: bitmaskSupported,
names: names
}
});
Expand Down
90 changes: 45 additions & 45 deletions .../app/gauges/controls/html-switch/html-switch-property/html-switch-property.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,96 @@
<div style="width: 650px;position: relative;">
<div class="container">
<h1 mat-dialog-title style="display:inline-block;cursor:move;" mat-dialog-draggable>{{'editor.controls-html-switch-settings' | translate}}</h1>
<mat-icon (click)="onNoClick()" style="float:right;margin-right:-10px;margin-top:-10px;cursor:pointer;color:gray;">clear</mat-icon>
<mat-tab-group style="width: 100%;">
<mat-tab label="{{'gauges.property-props' | translate}}">
<div style="height: 500px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
<div style="display: block;">
<div class="block">
<flex-auth [name]="name" [permission]="property.permission" #flexauth></flex-auth>
</div>
<div mat-dialog-content style="overflow: hidden; width:100%">
<flex-head [data]="data" [property]="property" #flexhead></flex-head>
<div class="block">
<flex-head [data]="data" [property]="property" #flexhead [withStaticValue]="false" [withBitmask]="withBitmask"></flex-head>
</div>
<div class="field-row" style="padding-top: 10px;">
<div class="my-form-field" style="padding-left: 60px;">
<span>{{'html-switch.property-off-value' | translate}}</span>
<input numberOnly [(ngModel)]="options.offValue" style="width: 80px;text-align: center;display:inline-block;" type="text">
</div>
<div class="my-form-field" style="float: right;padding-right: 60px">
<span>{{'html-switch.property-on-value' | translate}}</span>
<input numberOnly [(ngModel)]="options.onValue" style="width: 80px;text-align: center;display:inline-block;" type="text">
</div>
<div class="field-row mt10">
</div>
<div class="field-row" style="padding-top: 10px;">
<div class="field-row mt10">
<div class="my-form-field color-field">
<span>{{'html-switch.property-off-background' | translate}}</span>
<input [(colorPicker)]="options.offBackground" [style.background]="options.offBackground" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'right'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field color-field" style="padding-left: 12px">
<div class="my-form-field color-field ml10">
<span>{{'html-switch.property-off-slider-color' | translate}}</span>
<input [(colorPicker)]="options.offSliderColor" [style.background]="options.offSliderColor" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'right'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field slider-field" style="padding-left: 50px; top: -1px;">
<span>{{'html-switch.property-radius' | translate}}</span>
<mat-slider style="display:inline-block;" [max]="100" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.radius" (input)="updateOptions()">
</mat-slider>
<div class="my-form-field ml10">
<span>{{'html-switch.property-off-value' | translate}}</span>
<input numberOnly [(ngModel)]="options.offValue" style="width: 80px;text-align: center;display:inline-block;" type="text">
</div>
<div class="my-form-field color-field" style="float: right;padding-left: 12px;">
<div class="my-form-field color-field ftr ml10">
<span>{{'html-switch.property-on-background' | translate}}</span>
<input [(colorPicker)]="options.onBackground" [style.background]="options.onBackground" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'left'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field color-field" style="float: right;">
<div class="my-form-field color-field ftr ml10">
<span>{{'html-switch.property-on-slider-color' | translate}}</span>
<input [(colorPicker)]="options.onSliderColor" [style.background]="options.onSliderColor" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'left'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field ftr">
<span>{{'html-switch.property-on-value' | translate}}</span>
<input numberOnly [(ngModel)]="options.onValue" style="width: 80px;text-align: center;display:inline-block;" type="text">
</div>
</div>
<div class="field-row">
<div class="field-row mt10">
<div class="my-form-field color-field">
<span>{{'html-switch.property-off-text-color' | translate}}</span>
<input [(colorPicker)]="options.offTextColor" [style.background]="options.offTextColor" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'top'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field" style="padding-left: 12px;">
<div class="my-form-field ml10">
<span>{{'html-switch.property-off-text' | translate}}</span>
<input [(ngModel)]="options.offText" (change)="updateOptions()" style="width: 60px;text-align: center;display:inline-block;" type="text">
<input [(ngModel)]="options.offText" (change)="updateOptions()" style="width: 90px;text-align: center;display:inline-block;" type="text">
</div>
<div class="my-form-field color-field ftr ml10">
<span>{{'html-switch.property-on-text-color' | translate}}</span>
<input [(colorPicker)]="options.onTextColor" [style.background]="options.onTextColor" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 90px"
[cpPosition]="'top'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field ftr ml10">
<span>{{'html-switch.property-on-text' | translate}}</span>
<input [(ngModel)]="options.onText" (change)="updateOptions()" style="width: 90px;text-align: center;display:inline-block;" type="text">
</div>
<div class="my-form-field slider-field slider-small" style="padding-left: 17px; top: -2px;width: 80px;">
</div>
<div class="field-row mt10">
<div class="my-form-field input-radius">
<span>{{'html-switch.property-radius' | translate}}</span>
<input numberOnly [(ngModel)]="options.radius" (change)="updateOptions()" (keyup.enter)="updateOptions()" type="number" min="0" max="100" step="1">
</div>
<div class="my-form-field input-font-size ml10">
<span>{{'html-switch.property-font-size' | translate}}</span>
<mat-slider style="display:inline-block;" [max]="50" [min]="0" [step]="1" [thumbLabel]="true" [(ngModel)]="options.fontSize" (input)="updateOptions()">
</mat-slider>
<input numberOnly [(ngModel)]="options.fontSize" (change)="updateOptions()" (keyup.enter)="updateOptions()" type="number" min="0" max="50" step="1">
</div>
<div class="my-form-field" style="width:160px;padding-left: 12px;">
<div class="my-form-field input-font ml10">
<span>{{'html-switch.property-font' | translate}}</span>
<mat-select [(value)]="options.fontFamily" (selectionChange)="updateOptions()">
<mat-option *ngFor="let font of fonts" [style.fontFamily]="font" [value]="font">
{{font}}
</mat-option>
</mat-select>
</div>
<div class="my-form-field color-field" style="float: right;padding-left: 12px">
<span>{{'html-switch.property-on-text-color' | translate}}</span>
<input [(colorPicker)]="options.onTextColor" [style.background]="options.onTextColor" [cpAlphaChannel]="'always'" class="input-color"
[cpPresetColors]="defaultColor" [cpOKButton]="true" [cpCancelButton]="true" [cpCancelButtonClass]="'cpCancelButtonClass'"
[cpCancelButtonText]="'Cancel'" [cpOKButtonText]="'OK'" [cpOKButtonClass]="'cpOKButtonClass'" style="padding: 8px 0 0 0; width: 98px"
[cpPosition]="'top'" (colorPickerChange)="updateOptions()" />
</div>
<div class="my-form-field" style="float: right;padding-left: 12px;">
<span>{{'html-switch.property-on-text' | translate}}</span>
<input [(ngModel)]="options.onText" (change)="updateOptions()" style="width: 60px;text-align: center;display:inline-block;" type="text">
</div>
</div>
</div>
<div class="field-row" style="position: absolute;height:210px;width:650px;margin-top: 16px;max-width: 650px; max-height: 210px;overflow: hidden;">
<ngx-switch #switcher style="position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);" [style.width]="switchWidth + 'px'"
Expand Down
20 changes: 20 additions & 0 deletions .../app/gauges/controls/html-switch/html-switch-property/html-switch-property.component.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,24 @@

.container {
width: 620px;
position: relative;

.input-radius {
// margin-left: 60px;

input {
width: 80px;
}
}
.input-font-size input {
width: 80px;
}

.input-font mat-select {
width: 160px;
}
}

.field-row {
display: block;
margin-bottom: 5px;
Expand Down
11 changes: 9 additions & 2 deletions ...rc/app/gauges/controls/html-switch/html-switch-property/html-switch-property.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Component, Inject, ViewChild, AfterContentInit } from '@angular/core';
import { Component, Inject, ViewChild, AfterContentInit, OnInit } from '@angular/core';

import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { GaugeProperty } from '../../../../_models/hmi';
Expand All @@ -15,7 +15,7 @@ import { Utils } from '../../../../_helpers/utils';
templateUrl: './html-switch-property.component.html',
styleUrls: ['./html-switch-property.component.scss']
})
export class HtmlSwitchPropertyComponent implements AfterContentInit {
export class HtmlSwitchPropertyComponent implements OnInit, AfterContentInit {

@ViewChild('switcher', {static: false}) switcher: NgxSwitchComponent;
@ViewChild('flexhead', {static: false}) flexhead: FlexHeadComponent;
Expand All @@ -28,6 +28,7 @@ export class HtmlSwitchPropertyComponent implements AfterContentInit {
switchHeight = 40;
fonts = Define.fonts;
defaultColor = Utils.defaultColor;
withBitmask = false;

constructor(public dialogRef: MatDialogRef<HtmlSwitchPropertyComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
Expand All @@ -46,6 +47,12 @@ export class HtmlSwitchPropertyComponent implements AfterContentInit {
this.options.height = this.switchHeight;
}

ngOnInit(): void {
if (this.data.withBitmask) {
this.withBitmask = this.data.withBitmask;
}
}

ngAfterContentInit() {
this.updateOptions();
}
Expand Down
21 changes: 15 additions & 6 deletions client/src/app/gauges/controls/html-switch/html-switch.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Injectable, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';

import { GaugeSettings, Variable, GaugeStatus, Event } from '../../../_models/hmi';
import { GaugeSettings, Variable, GaugeStatus, Event, GaugeProperty } from '../../../_models/hmi';
import { GaugeDialogType } from '../../gauge-property/gauge-property.component';

import { NgxSwitchComponent } from '../../../gui-helpers/ngx-switch/ngx-switch.component';
import { Utils } from '../../../_helpers/utils';
import { GaugeBaseComponent } from '../../gauge-base/gauge-base.component';

@Injectable()
export class HtmlSwitchComponent {
Expand Down Expand Up @@ -36,6 +37,10 @@ export class HtmlSwitchComponent {
return GaugeDialogType.Switch;
}

static isBitmaskSupported(): boolean {
return true;
}

static bindEvents(ga: GaugeSettings, slider?: NgxSwitchComponent, callback?: any): Event {
if (slider) {
slider.bindUpdate((val) => {
Expand All @@ -52,14 +57,18 @@ export class HtmlSwitchComponent {
static processValue(ga: GaugeSettings, svgele: any, sig: Variable, gaugeStatus: GaugeStatus, switcher?: NgxSwitchComponent) {
try {
if (switcher) {
let val = parseFloat(sig.value);
if (Number.isNaN(val)) {
let value = parseFloat(sig.value);
if (Number.isNaN(value)) {
// maybe boolean
val = Number(sig.value);
value = Number(sig.value);
} else {
val = parseFloat(val.toFixed(5));
value = parseFloat(value.toFixed(5));
}
switcher.setValue(val);
value = GaugeBaseComponent.checkBitmaskAndValue((<GaugeProperty>ga.property).bitmask,
value,
(<GaugeProperty>ga.property).options.offValue,
(<GaugeProperty>ga.property).options.onValue);
switcher.setValue(value);
}
} catch (err) {
console.error(err);
Expand Down
14 changes: 14 additions & 0 deletions client/src/app/gauges/gauge-base/gauge-base.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,20 @@ export class GaugeBaseComponent {
return value;
}

static checkBitmaskAndValue(bitmask: number, value: number, min: number, max: number): number {
if (bitmask) {
return (value & max & bitmask) ? 1 : 0;
}
return (value == min) ? 0 : 1;
}

static valueBitmask(bitmask: number, value: number, source: number): number {
if (bitmask) {
return (value & bitmask) | (source & ~bitmask);
}
return value;
}

static getBlinkActionId(act: GaugeAction) {
return `${act.variableId}-${act.range.max}-${act.range.min}`;
}
Expand Down
1 change: 0 additions & 1 deletion client/src/app/gauges/gauge-property/gauge-property.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ export class GaugePropertyComponent implements AfterViewInit {

if (this.data.withBitmask) {
this.withBitmask = this.data.withBitmask;
this.withBitmask = this.data.withBitmask;
}
}

Expand Down
Loading

0 comments on commit 79ccca2

Please sign in to comment.