Enable Display and Input in Hex format for modbus Addresses

Author: volkmarnissen

cypress/hexinputfield.cy.ts

@@ -0,0 +1,27 @@
+
+import { HexinputfieldComponent } from "angular/src/app/specification/hexinputfield/hexinputfield.test.component";
+
+function mount(startValue:number, displayHex:boolean) {
+  cy.mount(HexinputfieldComponent, {
+    autoDetectChanges: true,
+    componentProperties: {
+        displayHex: displayHex,
+        startValue: startValue,
+    },
+  });
+}
+const inputField='input[formControlName="testHex"]'
+describe("Hexinputfield Component tests", () => {
+  it("Show decimal", () => {
+    mount(0x1234,false);
+    cy.get(inputField).should('have.value', '4660');;
+    cy.get(inputField).clear().type('1234').should('have.value', '1234');
+    cy.get(inputField).clear().type('0x1234').blur().should('have.value', '4660');
+});
+  it("Show Hex", () => {
+    mount(0x1234,true);
+    cy.get(inputField).should('have.value', '0x1234');;
+    cy.get(inputField).clear().type('4660').blur().should('have.value', '0x1234');;
+    cy.get(inputField).clear().type('0x1234').blur().should('have.value', '0x1234');;
+});
+});

cypress/specification-entity.cy.ts

@@ -2,6 +2,7 @@ import { ImodbusEntityWithName } from "angular/src/app/services/specificationInt
 import {
   afterEachEntityHelper,
   beforeEachHelper as beforeEachEntityHelper,
+  mountEntityComponent,
   setOnEntityNameOrVariableFieldsChangeFunc,
 } from "./support/entityHelper";
 
@@ -64,3 +65,16 @@ describe("Entity Component tests", () => {
     //  "not.be.null");
   });
 });
+describe("Test for Modbus Address", () => {
+  beforeEach(()=>{mountEntityComponent(true)}); // mounts entity and opens all expansion panels
+  afterEach(afterEachEntityHelper);
+  it("Modbus address in hex", () => {
+    const inputField='input[formControlName="modbusAddress"]'
+    const matField='mat-form-field input[formControlName="modbusAddress"]'
+    cy.get(inputField).should('have.value', '0x4');
+    cy.get(inputField).clear().type('1234').blur().should('have.value', '0x4d2');
+    cy.get(inputField).clear().type('0X12s32').blur().should('have.value', '0x1232');
+    cy.get(inputField).clear().type('0xx7')
+    cy.get(inputField).parent().get( "mat-error").should('contain', 'dec or hex')
+  })
+});

cypress/support/entityHelper.ts

@@ -88,7 +88,7 @@ let selectEntity: ImodbusEntity = {
  *
  * If other initial values are required, a new test file is required
  */
-export function beforeEachHelper() {
+export function mountEntityComponent(displayHex:boolean) {
   cy.intercept("GET", "**/converters", {
     fixture: "converters.json",
   });
@@ -105,9 +105,15 @@ export function beforeEachHelper() {
       specificationMethods: specificationMethods,
       entity: selectEntity,
       disabled: false,
+      displayHex:displayHex
     },
   });
   cy.openAllExpansionPanels();
+
+}
+
+export function beforeEachHelper() {
+  mountEntityComponent(false);
 }
 /**
  * resets the function set by setOnEntityNameOrVariableFieldsChangeFunc

src/app/specification/entity/entity.component.html

@@ -78,15 +78,21 @@
                     <div class="flexrows">
                         <mat-form-field class="width100pt smallfield">
                             <mat-label>Modbus Addr.</mat-label>
-                            <input #entityModbusAddress matInput type="number" formControlName="modbusAddress"
-                                [errorStateMatcher]="errorStateMatcher" (change)="onModbusAddressChange()">
+                            <input #entityModbusAddress matInput hexFormater [displayHex] ="displayHex" type="text" formControlName="modbusAddress" 
+                                matTooltip="Please enter decimal (0-65536) or hexadecimal (0x123a) number"
+                                [errorStateMatcher]="errorStateMatcher" (change)="onModbusAddressChange()"
+                                (keypress)="onModbusAddressKeyPress($event)" >
                             <mat-error *ngIf="entityFormGroup.get('modbusAddress')!.hasError('required')">
                                 This field is required
                             </mat-error>
                             <mat-error
                                 *ngIf="entityFormGroup.get('modbusAddress')!.hasError('min')|| entityFormGroup.get('modbusAddress')!.hasError('max')">
                                 Range is 1-65536
                             </mat-error>
+                            <mat-error
+                                *ngIf="entityFormGroup.get('modbusAddress')!.hasError('pattern')">
+                                dec or hex
+                            </mat-error>
                         </mat-form-field>
                         <mat-form-field class="smallfield">
                             <mat-label>Register</mat-label>

src/app/specification/entity/entity.component.ts

@@ -8,6 +8,8 @@ import {
 } from "@angular/core";
 
 import { ApiService } from "../../services/api-service";
+import {HexFormaterDirective, HexFormaterPipe} from '../hexinputfield/hexinputfield'
+
 import {
   AbstractControl,
   FormBuilder,
@@ -104,6 +106,7 @@ const newEntity: ImodbusEntityWithName = {
   styleUrl: "./entity.component.css",
   standalone: true,
   imports: [
+    HexFormaterDirective, 
     MatCard,
     MatCardHeader,
     MatCardTitle,
@@ -170,6 +173,8 @@ export class EntityComponent
   backupEntity: ImodbusEntityWithName | null;
   @Input()
   disabled: boolean = true;
+  @Input()
+  displayHex: boolean = false;
   entityCategories: string[] = ["", "config", "diagnostic"];
 
   mqttValues: HTMLElement;
@@ -229,6 +234,7 @@ export class EntityComponent
           Validators.required,
           Validators.min(0),
           Validators.max(65536),
+          Validators.pattern("^0[xX][0-9a-fA-F]+$|^[0-9]+$")
         ]),
       ],
       registerType: [null as IRegisterType | null, Validators.required],
@@ -442,7 +448,7 @@ export class EntityComponent
     this.entityFormGroup.get("registerType")!.setValue( { registerType: entity.registerType, name: "unknown"});
     converterFormControl.setValue(entity.converter);
     modbusAddressFormControl.setValue(
-      entity.modbusAddress != undefined ? entity.modbusAddress : null,
+      entity.modbusAddress != undefined ? HexFormaterDirective.convertNumberToInput(entity.modbusAddress,this.displayHex) : null,
     );
 
     if (
@@ -454,7 +460,7 @@ export class EntityComponent
       );
       modbusAddressFormControl.setValue(
         entity.modbusAddress && entity.modbusAddress != -1
-          ? entity.modbusAddress
+          ?  HexFormaterDirective.convertNumberToInput(entity.modbusAddress,this.displayHex)!
           : null,
       );
     }
@@ -664,6 +670,10 @@ export class EntityComponent
       this.specificationMethods.copy2Translation(this.entity);
     }
   }
+  onModbusAddressKeyPress(event:KeyboardEvent){
+    const allowed="0123456789xXABCDEFabcdef"
+    return allowed.indexOf( event.key) >=0
+  }
   onModbusAddressChange() {
     if (!this.entity) return;
     this.specificationMethods.setEntitiesTouched();
@@ -676,10 +686,8 @@ export class EntityComponent
       (converterFormControl.value != null &&
         converterFormControl.value !== this.entity.converter)
     ) {
-      this.entity.modbusAddress =
-        modbusAddressFormControl.value != null
-          ? modbusAddressFormControl.value
-          : undefined;
+      if(modbusAddressFormControl.value != null)
+          this.entity.modbusAddress = HexFormaterDirective.convertHexInput(modbusAddressFormControl.value)!
       if (converterFormControl.value !== null) {
         this.entity.converter = converterFormControl.value as Converters;
       }

src/app/specification/hexinputfield/hexinputfield.test.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit,  } from '@angular/core';
+import {FormBuilder, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {HexFormaterDirective} from './hexinputfield'
+@Component({
+  selector: 'app-hexinputfield',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    HexFormaterDirective
+  ],
+  template: `
+    <div [formGroup]="formGroup">
+    <input hexFormater [displayHex] ="displayHex" type="text" formControlName="testHex">
+    </div>
+  `,
+  styles: ``
+})
+export class HexinputfieldComponent implements OnInit{
+  @Input() startValue:number = 0x1234;
+  @Input() displayHex:boolean = false;
+  formGroup:FormGroup;
+  constructor( private fb: FormBuilder){}
+  ngOnInit(): void {
+      this.formGroup = this.fb.group({
+        testHex: [HexFormaterDirective.convertNumberToInput(this.startValue,this.displayHex) ],
+      });
+    }  
+}

src/app/specification/hexinputfield/hexinputfield.ts

@@ -0,0 +1,52 @@
+import { Directive, HostListener, ElementRef, OnInit, Input } from '@angular/core';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'hexFormaterPipe' })
+export class HexFormaterPipe implements PipeTransform {
+  transform(value: number, hexFormat:boolean): string {
+    if( hexFormat)
+      return "0x" + value.toString(16);
+    else
+      return value.toString();
+  }
+}
+
+@Directive({ 
+    selector: '[hexFormater]', 
+})
+export class HexFormaterDirective implements OnInit {
+    private el: HTMLInputElement;
+  @Input() displayHex:boolean;
+  constructor(
+    private elementRef: ElementRef,
+  ) {
+    this.el = this.elementRef.nativeElement;
+  }
+
+  static convertHexInput(value:string):number| undefined{
+    if(value=="")
+        return undefined;
+    var nv =  (value.startsWith("0x")||value.startsWith("0X")? parseInt(value.substring(2),16):parseInt(value))
+    if( Number.isNaN(nv))
+      return undefined;
+    return nv;
+  }
+  static convertNumberToInput(value:number| undefined, displayHex:boolean):string| undefined{
+    if( value == undefined|| Number.isNaN(value))
+      return undefined
+    return (displayHex? "0x" + value.toString(16):value.toString())
+  }
+
+  ngOnInit() {
+    this.onFocus(this.el.value);
+  }
+
+  @HostListener("focus", ["$event.target.value"])
+  @HostListener("blur", ["$event.target.value"])
+  onFocus(value:string) {
+    var numValue = HexFormaterDirective.convertHexInput(value)
+    if( numValue != undefined)
+      this.el.value = HexFormaterDirective.convertNumberToInput(numValue,this.displayHex) as string
+  }
+}

src/app/specification/specification/specification.component.html

@@ -10,6 +10,7 @@
 </div>
 
 <div class="flexrowsWrapWhenSmall">
+
   <mat-card class="card flex-align">
     <mat-card-header><mat-card-title><mat-icon
           [matTooltip]="getStatusText(currentSpecification?.status)">{{getStatusIcon(currentSpecification?.status)}}</mat-icon>{{getTranslatedSpecName()}}</mat-card-title>
@@ -80,11 +81,14 @@
     </mat-card-content>
   </mat-card>
   <div>
+    <form id="displaySettings" [formGroup]="displayHexFormGroup" class="flexcolumns">
+        <mat-slide-toggle (change)="onDisplayHexChanged($event)" formControlName="displayHex" >Display Modbus Addresses in Hex Format</mat-slide-toggle>
+        </form>
     <div class="flexrows flex-auto">
       @for ( entity of currentSpecification?.entities; track entity.id){
-      <app-entity [specificationMethods]="specificationMethods" [entity]="entity" [disabled]="disabled"></app-entity>
+      <app-entity [specificationMethods]="specificationMethods" [entity]="entity" [disabled]="disabled" [displayHex]="displayHex"></app-entity>
       }
-      <app-entity [specificationMethods]="specificationMethods" [disabled]="disabled"></app-entity>
+      <app-entity [specificationMethods]="specificationMethods" [disabled]="disabled" [displayHex]="displayHex" ></app-entity>
     </div>
   </div>
 </div>

src/app/specification/specification/specification.component.ts

@@ -17,6 +17,7 @@ import {
   Validators,
   FormsModule,
   ReactiveFormsModule,
+  FormControl,
 } from "@angular/forms";
 import { ApiService } from "../../services/api-service";
 import {
@@ -73,9 +74,10 @@ import { UploadFilesComponent } from "../upload-files/upload-files.component";
 import {
   MatExpansionPanel,
   MatExpansionPanelHeader,
-  MatExpansionPanelTitle,
+  MatExpansionPanelTitle
 } from "@angular/material/expansion";
 import { MatList, MatListItem } from "@angular/material/list";
+import { MatSlideToggle, MatSlideToggleChange } from "@angular/material/slide-toggle";
 import {
   MatCard,
   MatCardHeader,
@@ -117,6 +119,7 @@ import { MatIconButton } from "@angular/material/button";
     MatInput,
     TranslationComponent,
     EntityComponent,
+    MatSlideToggle
   ],
 })
 export class SpecificationComponent
@@ -134,6 +137,8 @@ export class SpecificationComponent
   currentSpecification: ImodbusSpecification | null;
   originalSpecification: ImodbusSpecification | null;
   uploadModbusDocumentationFormGroup: FormGroup<any>;
+  displayHexFormGroup: FormGroup<any>;
+  displayHex:boolean;
   galleryConfig: GalleryConfig = { thumbs: false };
   private entitiesTouched: boolean = false;
   private saveSubject = new Subject<void>();
@@ -677,10 +682,17 @@ export class SpecificationComponent
       manufacturer: [null as string | null],
       model: [null as string | null],
     });
+    this.displayHexFormGroup = this.fb.group({
+      displayHex: [false]
+    })
     this.validationForms = this.fb.group({ spec: this.enterSpecNameFormGroup });
 
     this.entityApiService.getConfiguration().subscribe((config) => {
       this.config = config;
+      var dispHexFg = this.displayHexFormGroup.get("displayHex");
+      this.displayHex = this.config.displayHex?this.config.displayHex:false;
+      if( dispHexFg )
+        dispHexFg.setValue( this.config.displayHex)
       this.specServices = new SpecificationServices(
         this.config.mqttdiscoverylanguage,
         this.entityApiService,
@@ -842,4 +854,9 @@ export class SpecificationComponent
   getStatusText(status: SpecificationStatus | null): string {
     return SpecificationServices.getStatusText(status);
   }
+  onDisplayHexChanged(event: MatSlideToggleChange){
+      this.displayHex = event.checked
+      this.config.displayHex = event.checked
+      this.entityApiService.postConfiguration(this.config).subscribe(()=>{})
+  }
 }