Enable Display and Input in Hex format for modbus Addresses

CHANGELOG.md

@@ -1,125 +1,92 @@
 # Changelog for angular
 
-## [v0.12.22](https://github.com/modbus2mqtt/angular/tree/v0.12.22) (2025-09-03)
+## [v0.12.19](https://github.com/volkmarnissen/angular/tree/v0.12.19) (2025-01-16)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.21...v0.12.22)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.18...v0.12.19)
 
-## [v0.12.21](https://github.com/modbus2mqtt/angular/tree/v0.12.21) (2025-09-03)
+## [v0.12.18](https://github.com/volkmarnissen/angular/tree/v0.12.18) (2025-01-15)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.20...v0.12.21)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.17...v0.12.18)
 
-**Merged pull requests:**
+## [v0.12.17](https://github.com/volkmarnissen/angular/tree/v0.12.17) (2025-01-02)
 
-- \[Feature\] Add number of processed calls to Modbus Status [\#12](https://github.com/modbus2mqtt/angular/pull/12) ([volkmarnissen](https://github.com/volkmarnissen))
-- \[Feature\] Add number of processed calls to Modbus Status [\#11](https://github.com/modbus2mqtt/angular/pull/11) ([volkmarnissen](https://github.com/volkmarnissen))
-- Update Changelog [\#10](https://github.com/modbus2mqtt/angular/pull/10) ([volkmarnissen](https://github.com/volkmarnissen))
-- \[bug\]Modbus Error Handling, Slave Specification Detection, TCP RTU bridge, Fixes [\#9](https://github.com/modbus2mqtt/angular/pull/9) ([volkmarnissen](https://github.com/volkmarnissen))
-- \[bug\]Modbus Error Handling, Slave Specification Detection, TCP RTU bridge, Fixes [\#8](https://github.com/modbus2mqtt/angular/pull/8) ([volkmarnissen](https://github.com/volkmarnissen))
-- Angular TcpBridge Fix [\#7](https://github.com/modbus2mqtt/angular/pull/7) ([volkmarnissen](https://github.com/volkmarnissen))
-- \[bug\]Modbus Error Handling, Slave Specification Detection, TCP RTU bridge, Fixes [\#6](https://github.com/modbus2mqtt/angular/pull/6) ([volkmarnissen](https://github.com/volkmarnissen))
-- Modbus Error Handling and Monitoring [\#5](https://github.com/modbus2mqtt/angular/pull/5) ([volkmarnissen](https://github.com/volkmarnissen))
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.16...v0.12.17)
 
-## [v0.12.20](https://github.com/modbus2mqtt/angular/tree/v0.12.20) (2025-04-14)
+## [v0.12.16](https://github.com/volkmarnissen/angular/tree/v0.12.16) (2024-12-31)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.19...v0.12.20)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.15...v0.12.16)
 
-**Merged pull requests:**
+## [v0.12.15](https://github.com/volkmarnissen/angular/tree/v0.12.15) (2024-12-30)
 
-- Please update me [\#4](https://github.com/modbus2mqtt/angular/pull/4) ([volkmarnissen](https://github.com/volkmarnissen))
-- Fixed package-lock.json [\#3](https://github.com/modbus2mqtt/angular/pull/3) ([volkmarnissen](https://github.com/volkmarnissen))
-- Adding support for discrete inputs [\#2](https://github.com/modbus2mqtt/angular/pull/2) ([arturmietek](https://github.com/arturmietek))
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.14...v0.12.15)
 
-## [v0.12.19](https://github.com/modbus2mqtt/angular/tree/v0.12.19) (2025-01-16)
+## [v0.12.14](https://github.com/volkmarnissen/angular/tree/v0.12.14) (2024-12-30)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.18...v0.12.19)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/0.12.14...v0.12.14)
 
-## [v0.12.18](https://github.com/modbus2mqtt/angular/tree/v0.12.18) (2025-01-15)
+## [0.12.14](https://github.com/volkmarnissen/angular/tree/0.12.14) (2024-12-13)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.17...v0.12.18)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.13...0.12.14)
 
-## [v0.12.17](https://github.com/modbus2mqtt/angular/tree/v0.12.17) (2025-01-02)
+## [v0.12.13](https://github.com/volkmarnissen/angular/tree/v0.12.13) (2024-12-13)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.16...v0.12.17)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.12...v0.12.13)
 
-**Merged pull requests:**
+## [v0.12.12](https://github.com/volkmarnissen/angular/tree/v0.12.12) (2024-12-11)
 
-- Adding signed int 32 and unsigned int 32 options to number format [\#1](https://github.com/modbus2mqtt/angular/pull/1) ([arturmietek](https://github.com/arturmietek))
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.11...v0.12.12)
 
-## [v0.12.16](https://github.com/modbus2mqtt/angular/tree/v0.12.16) (2024-12-31)
+## [v0.12.11](https://github.com/volkmarnissen/angular/tree/v0.12.11) (2024-11-22)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.15...v0.12.16)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.10...v0.12.11)
 
-## [v0.12.15](https://github.com/modbus2mqtt/angular/tree/v0.12.15) (2024-12-30)
+## [v0.12.10](https://github.com/volkmarnissen/angular/tree/v0.12.10) (2024-11-19)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.14...v0.12.15)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.9...v0.12.10)
 
-## [v0.12.14](https://github.com/modbus2mqtt/angular/tree/v0.12.14) (2024-12-30)
+## [v0.12.9](https://github.com/volkmarnissen/angular/tree/v0.12.9) (2024-11-16)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/0.12.14...v0.12.14)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.8...v0.12.9)
 
-## [0.12.14](https://github.com/modbus2mqtt/angular/tree/0.12.14) (2024-12-13)
+## [v0.12.8](https://github.com/volkmarnissen/angular/tree/v0.12.8) (2024-11-14)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.13...0.12.14)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.7...v0.12.8)
 
-## [v0.12.13](https://github.com/modbus2mqtt/angular/tree/v0.12.13) (2024-12-13)
+## [v0.12.7](https://github.com/volkmarnissen/angular/tree/v0.12.7) (2024-10-23)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.12...v0.12.13)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.6...v0.12.7)
 
-## [v0.12.12](https://github.com/modbus2mqtt/angular/tree/v0.12.12) (2024-12-11)
+## [v0.12.6](https://github.com/volkmarnissen/angular/tree/v0.12.6) (2024-10-16)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.11...v0.12.12)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.5...v0.12.6)
 
-## [v0.12.11](https://github.com/modbus2mqtt/angular/tree/v0.12.11) (2024-11-22)
+## [v0.12.5](https://github.com/volkmarnissen/angular/tree/v0.12.5) (2024-09-24)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.10...v0.12.11)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.4...v0.12.5)
 
-## [v0.12.10](https://github.com/modbus2mqtt/angular/tree/v0.12.10) (2024-11-19)
+## [v0.12.4](https://github.com/volkmarnissen/angular/tree/v0.12.4) (2024-09-16)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.9...v0.12.10)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.3...v0.12.4)
 
-## [v0.12.9](https://github.com/modbus2mqtt/angular/tree/v0.12.9) (2024-11-16)
+## [v0.12.3](https://github.com/volkmarnissen/angular/tree/v0.12.3) (2024-09-06)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.8...v0.12.9)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.2...v0.12.3)
 
-## [v0.12.8](https://github.com/modbus2mqtt/angular/tree/v0.12.8) (2024-11-14)
+## [v0.12.2](https://github.com/volkmarnissen/angular/tree/v0.12.2) (2024-08-27)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.7...v0.12.8)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.12.0...v0.12.2)
 
-## [v0.12.7](https://github.com/modbus2mqtt/angular/tree/v0.12.7) (2024-10-23)
+## [v0.12.0](https://github.com/volkmarnissen/angular/tree/v0.12.0) (2024-08-16)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.6...v0.12.7)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.11.0...v0.12.0)
 
-## [v0.12.6](https://github.com/modbus2mqtt/angular/tree/v0.12.6) (2024-10-16)
+## [v0.11.0](https://github.com/volkmarnissen/angular/tree/v0.11.0) (2024-08-05)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.5...v0.12.6)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/v0.10.1...v0.11.0)
 
-## [v0.12.5](https://github.com/modbus2mqtt/angular/tree/v0.12.5) (2024-09-24)
+## [v0.10.1](https://github.com/volkmarnissen/angular/tree/v0.10.1) (2024-08-05)
 
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.4...v0.12.5)
-
-## [v0.12.4](https://github.com/modbus2mqtt/angular/tree/v0.12.4) (2024-09-16)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.3...v0.12.4)
-
-## [v0.12.3](https://github.com/modbus2mqtt/angular/tree/v0.12.3) (2024-09-06)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.2...v0.12.3)
-
-## [v0.12.2](https://github.com/modbus2mqtt/angular/tree/v0.12.2) (2024-08-27)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.12.0...v0.12.2)
-
-## [v0.12.0](https://github.com/modbus2mqtt/angular/tree/v0.12.0) (2024-08-16)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.11.0...v0.12.0)
-
-## [v0.11.0](https://github.com/modbus2mqtt/angular/tree/v0.11.0) (2024-08-05)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/v0.10.1...v0.11.0)
-
-## [v0.10.1](https://github.com/modbus2mqtt/angular/tree/v0.10.1) (2024-08-05)
-
-[Full Changelog](https://github.com/modbus2mqtt/angular/compare/0b2169b1bceece9fa4c2c6940ef33dafe96ae43b...v0.10.1)
+[Full Changelog](https://github.com/volkmarnissen/angular/compare/0b2169b1bceece9fa4c2c6940ef33dafe96ae43b...v0.10.1)
 
 
 

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) ],
+      });
+    }  
+}