@adcops/autocore-react 3.0.29 → 3.0.32

package/dist/components/FileList.d.ts

@@ -55,6 +55,12 @@ type FileListProps = {
  * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
  * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
  *
+ * Requires
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ *
  * Props:
  * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
  *      Default: "DATASTORE"

package/dist/components/FileList.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,m]=useState(),d=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}m(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=d(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l,options:{base64:!0}}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),_=(t,o)=>{confirmPopup({target:o.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{let o=d(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=d(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>_(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{confirmPopup}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,d]=useState(),m=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}d(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=m(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l,options:{base64:!0}}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),h=(t,o)=>{confirmPopup({target:o.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{let o=m(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=m(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>h(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/components/IndicatorRect.d.ts

@@ -0,0 +1,87 @@
+import { Component } from 'react';
+import { EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+/**
+ * Common properties for an indicator rectangle component.
+ * This component is used for displaying states and is not interactive.
+ * It is commonly used in industrial HMIs for visual indication purposes.
+ *
+ * These properties support displaying values of boolean, number, and string states.
+ *
+ * Available boolean states: **on**, **off**, and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there are 2 or fewer possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available."
+ *
+ * When the indicator contains more than 2 states, the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * `options` field and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the corresponding
+ * label in the `options` field.
+ */
+export interface IndicatorRectProps {
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+    /**
+     * State to be displayed.
+     */
+    value?: boolean | number | string;
+    /**
+     * Color for the rectangle when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+    /**
+     * Color for the rectangle when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+    /**
+     * An array of string labels to display as the available options.
+     *
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     *
+     * If only one value is given (Index 0), then that value is used for all states.
+     */
+    options?: string[];
+    /**
+     * Additional CSS class name to apply to the rectangle.
+     */
+    className?: string;
+    /**
+     * Additional inline styles to apply to the rectangle.
+     */
+    style?: React.CSSProperties;
+}
+interface IndicatorRectState {
+    currentValue?: boolean | number | string;
+}
+export declare class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
+    static contextType: import("react").Context<EventEmitterContextType>;
+    static defaultProps: {
+        onColor: IndicatorColor;
+        offColor: string;
+    };
+    constructor(props: IndicatorRectProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    /**
+     * Sets up subscriptions based on the provided topic.
+     */
+    private setupSubscriptions;
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export default IndicatorRect;

package/dist/components/IndicatorRect.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";import{IndicatorColor}from"../core/IndicatorColor";export{IndicatorColor};export class IndicatorRect extends Component{constructor(t){super(t),Object.defineProperty(this,"handleTopicUpdate",{enumerable:!0,configurable:!0,writable:!0,value:t=>{this.setState({currentValue:t})}}),this.state={currentValue:void 0}}componentDidMount(){this.setupSubscriptions()}componentWillUnmount(){}setupSubscriptions(){const{topic:t}=this.props,{subscribe:e}=this.context;t&&e(t,this.handleTopicUpdate)}render(){const{currentValue:t}=this.state,{className:e,style:o,value:r,onColor:n,offColor:i,options:c}=this.props;let a,l=t;void 0!==r&&(l=r),void 0!==c&&c.length>0&&(a=l?c[1]:c[0]);let s=l?n:i;return void 0===l&&(s=IndicatorColor.IndicatorInvalid),_jsx("div",{className:`indicator-rect ${e||""}`,style:{backgroundColor:s,color:"white",width:"100px",height:"100px",display:"flex",alignItems:"center",justifyContent:"center",...o},children:a})}}Object.defineProperty(IndicatorRect,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext}),Object.defineProperty(IndicatorRect,"defaultProps",{enumerable:!0,configurable:!0,writable:!0,value:{onColor:IndicatorColor.IndicatorGreen,offColor:"gray"}});export default IndicatorRect;

package/dist/hooks/commandHooks.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Custom hook for registering symbols and subscribing to updates on
+ * a domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export declare const useRegisterSymbols: (domain: string, setters: Record<string, (value: any) => void>, symbols: Record<string, string>, options?: Record<string, {}>) => null;
+/**
+ * Custom hook to create a function that sends a specified value to a remote device or server.
+ * This hook abstracts the repetitive logic involved in sending these values,
+ * such as invoking the command and handling errors.
+ *
+ * @param {string} domain The domain under which the backend function is grouped.
+ * @param {string} fname The name of the function to be called on the backend.
+ * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
+ * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
+ *
+ * @example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { Button } from 'primereact/button';
+ * import useWriteValue from './commandHooks';
+ *
+ * const Component: React.FC = () => {
+ *   const [value, setValue] = useState<number>(0);
+ *   const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="number"
+ *         value={value}
+ *         onChange={(e) => setValue(Number(e.target.value))}
+ *       />
+ *       <Button
+ *         label="Send to Backend"
+ *         onClick={() => writeToBackend(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ */
+export declare function useAdsWriteValue(domain: string, symbolName: string, fname?: string): (value: object | boolean | number | string) => Promise<void>;
+/**
+ * useWriteScaledValue is a custom React hook that enables writing scaled numerical values to the autocore backend system.
+ * It applies a specified scale and offset to a numeric value before sending it over the websocket connection.
+ * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
+ * scale factors before being persisted or processed by a backend system.
+ *
+ * @param symbolName The symbol name in the backend system where the value will be written.
+ * @param scale The scale factor to be applied to the value.
+ * @param offset The offset to be applied after scaling the value.
+ * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
+ *
+ * @example
+ * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
+ * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
+ * based on a dynamic scale factor managed in the component's state.
+ *
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { useWriteScaledValue } from './commandHooks';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *     const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
+ *     const [offset, setOffset] = useState<number>(0); // No offset by default.
+ *
+ *     // The hook is used here with the scale and offset state variables.
+ *     const writeMeasurement = useWriteScaledValue("ADS", "GIO.axisX.position", scale, offset);
+ *
+ *     // This function is called when the input field value changes.
+ *     const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *         const valueInInches = parseFloat(event.target.value);
+ *         writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
+ *     };
+ *
+ *     return (
+ *         <div>
+ *             <label>Enter measurement in inches:</label>
+ *             <input type="number" onChange={handleMeasurementChange} />
+ *         </div>
+ *     );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
+ * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
+ * dynamically if needed, for instance, based on user selection or other external configurations.
+ */
+export declare function useWriteScaledValue(domain: string, symbolName: string, scale: number, offset: number, fname?: string): (value: number) => Promise<void>;
+/**
+ * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
+ * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
+ *
+ * @param {string} domain - The domain under which the backend function is grouped.
+ * @param {string} fname - The function name to be called on the backend.
+ * @param {string} symbolName - The symbol name to target for the tap action.
+ * @returns {Function} A function that triggers the tap action.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Button } from 'primereact/button';
+ * import useTapValue from './useTapValue'; // Ensure the correct import path
+ *
+ * const MyComponent: React.FC = () => {
+ *   const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
+ *
+ *   return (
+ *     <Button
+ *       label="Tap Button"
+ *       onClick={() => sendTapAction()}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export declare function useTapValue(domain: string, symbolName: string, fname?: string): () => Promise<void>;

package/dist/hooks/commandHooks.js

@@ -0,0 +1 @@
+import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useRegisterSymbols=(e,t,n,r={})=>{const{subscribe:u,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),c=useRef([]),a=useRef(!0);return useEffect((()=>{a.current=!0;const r=async()=>{for(const[r,s]of Object.entries(n))try{const n=u(`${e}/${s}`,(e=>{if(a.current){const n=t[r];n&&n(e.value)}}));c.current.push(n)}catch(e){}};if(o())r();else{let e=u("HUB/connected",(()=>{setTimeout((()=>{r(),s(e)}),500)}));c.current.push(e)}return()=>{a.current=!1,c.current.forEach((e=>s(e))),c.current=[]}}),[]),null};export function useAdsWriteValue(e,t,n="write_value"){const{invoke:r}=useContext(EventEmitterContext);return async u=>{try{await r(e,n,{symbol_name:t,value:u})}catch(e){}}}export function useWriteScaledValue(e,t,n,r,u="write_value"){const{invoke:s}=useContext(EventEmitterContext);return useCallback((async o=>{const c=(o-r)/n;try{await s(e,u,{symbol_name:t,value:c})}catch(e){}}),[t,n,r,s])}export function useTapValue(e,t,n="write_value"){const{invoke:r}=useContext(EventEmitterContext);return async()=>{try{await r(e,n,{symbol_name:t,value:!0}),await sleep(300),await r(e,n,{symbol_name:t,value:!1})}catch(e){}}}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.29",
+    "version": "3.0.32",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",
@@ -10,6 +10,7 @@
         "tsc": "tsc",
         "generate-docs": "typedoc",
         "build": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs && npm run minify",
+        "dev": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs",
         "prestart": "tsc",
         "publish-package": "npm run build && npm version patch && npm publish",
         "release:patch": "npm version patch && npm publish",

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-05-21 13:38:23
+ * Last Modified: 2025-01-20 19:15:50
  * -----
  * 
  */
@@ -20,7 +20,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
-import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
+import { confirmPopup } from 'primereact/confirmpopup';
 import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
@@ -95,6 +95,12 @@ type FileItem = {
  * The component uses the `EventEmitterContext` to make API calls to a backend to list, download, and delete files.
  * It dynamically handles file operations based on the `domain` prop which determines the API endpoints for these actions.
  *
+ * Requires 
+ * ```tsx
+ * <ConfirmPopup />
+ * ```
+ * somewhere in a top-level page.
+ * 
  * Props:
  * - `domain` (string): The domain name assigned to the DATASTORE servelet containing the data.
  *      Default: "DATASTORE"
@@ -354,8 +360,7 @@ export const FileList: React.FC<FileListProps> = ({
     return (
 
         <div>
-            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />
-            <ConfirmPopup />
+            <Toolbar start={toolbarStartContents} end={toolbarEndContents} style={{ padding: "1mm" }} />            
             <DataTable value={files}>
                 <Column field="name" header="Name"></Column>
 

package/src/components/IndicatorRect.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-01-20 15:09:55
+ * -----
+ * Last Modified: 2025-01-20 15:10:06
+ * -----
+ * 
+ */
+
+import { Component } from 'react';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { IndicatorColor } from "../core/IndicatorColor";
+export { IndicatorColor };
+
+/**
+ * Common properties for an indicator rectangle component. 
+ * This component is used for displaying states and is not interactive.
+ * It is commonly used in industrial HMIs for visual indication purposes.
+ *
+ * These properties support displaying values of boolean, number, and string states.
+ *
+ * Available boolean states: **on**, **off**, and **not available**:
+ *
+ * * `true` is treated as **on**
+ * * `false` is treated as **off**
+ * * `undefined` is treated as **not available**
+ *
+ * Numeric values can be used. When there are 2 or fewer possible states,
+ * 0 will be considered false (OFF), anything else will be considered true (ON).
+ * Undefined will be treated as "not available."
+ *
+ * When the indicator contains more than 2 states, the number will be matched
+ * to the available state, in order. More than two states requires usage of the
+ * `options` field and declaring more than two states there.
+ *
+ * If a string state is used, it will be matched exactly to the corresponding
+ * label in the `options` field.
+ */
+export interface IndicatorRectProps {
+
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+
+    /**
+     * State to be displayed.
+     */
+    value?: boolean | number | string;
+
+    /**
+     * Color for the rectangle when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+
+    /**
+     * Color for the rectangle when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+
+    /**
+     * An array of string labels to display as the available options.
+     * 
+     * For items with 2 states or less:
+     * Index 0 is the label when value is OFF.
+     * Index 1 is the label when value is ON.
+     * 
+     * If only one value is given (Index 0), then that value is used for all states.
+     */
+    options?: string[];
+
+    /**
+     * Additional CSS class name to apply to the rectangle.
+     */
+    className?: string;
+
+    /**
+     * Additional inline styles to apply to the rectangle.
+     */
+    style?: React.CSSProperties;
+
+}
+
+interface IndicatorRectState {
+    currentValue?: boolean | number | string;
+}
+
+export class IndicatorRect extends Component<IndicatorRectProps, IndicatorRectState> {
+    static contextType = EventEmitterContext;
+
+    // Define default props
+    static defaultProps = {
+        onColor: IndicatorColor.IndicatorGreen,
+        offColor: "gray", // Default offColor
+    };
+
+    constructor(props: IndicatorRectProps) {
+        super(props);
+        this.state = {
+            currentValue: undefined,
+        };
+    }
+
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+
+    /**
+     * Sets up subscriptions based on the provided topic.
+     */
+    private setupSubscriptions() {
+        const { topic } = this.props;
+        const { subscribe } = this.context as EventEmitterContextType;
+
+        if (topic) {
+            subscribe(topic, this.handleTopicUpdate);
+        }
+    }
+
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate = (value: boolean | number | string) => {
+        this.setState({ currentValue: value });
+    };
+
+    render() {
+        const { currentValue } = this.state;
+        const { className, style, value, onColor, offColor, options } = this.props;
+
+        // Load the value from the proper source
+        let displayValue = currentValue;
+        if (value !== undefined) {
+            displayValue = value;
+        }
+
+        // Determine the label and color based on the current state
+        let rectLabel = undefined;
+        if (options !== undefined && options.length > 0) {
+            rectLabel = displayValue ? options[1] : options[0];
+        }
+
+        let color = displayValue ? onColor : offColor;
+        if (displayValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+
+        return (
+            <div
+                className={`indicator-rect ${className || ""}`}
+                style={{
+                    backgroundColor: color,
+                    color: "white",
+                    width: "100px",
+                    height: "100px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    ...style,
+                }}
+            >
+                {rectLabel}
+            </div>
+        );
+    }
+}
+
+export default IndicatorRect;

package/src/hooks/commandHooks.tsx

@@ -0,0 +1,293 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2025-03-31 06:38:50
+ * -----
+ * Last Modified: 2025-03-31 08:34:03
+ * -----
+ * 
+ */
+
+
+
+
+
+
+import { useContext, useRef, useEffect, useCallback } from 'react';
+import { EventEmitterContext } from '../core/EventEmitterContext';
+
+
+/**
+ * Sleep for a given number of milliseconds.
+ * @param ms Number of milliseconds to sleep.
+ */
+function sleep(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+
+
+
+/**
+ * Custom hook for registering symbols and subscribing to updates on  
+ * a domain via the EventEmitterContext.
+ * This hook abstracts the common pattern of registering symbols and handling subscriptions
+ * to updates in components that need real-time data from a backend service.
+ *
+ * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
+ *                related to a symbol, and each value is the setter function for that state.
+ * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
+ *                Each key should match a key in the `setters` object, and each value should be a string
+ *                that represents the symbol name to register and subscribe to.
+ *
+ * ## Usage Example:
+ * ```typescript
+ * const setters = {
+ *     speed: setSpeed,
+ *     temperature: setTemperature
+ * };
+ *
+ * const symbols = {
+ *     speed: "Sensor.speed",
+ *     temperature: "Sensor.temperature"
+ * };
+ *
+ * useRegisterSymbols(setters, symbols);
+ * ```
+ *
+ * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
+ * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
+ * whenever new data is received.
+ */
+export const useRegisterSymbols = (
+    domain : string,
+    setters: Record<string, (value: any) => void>, 
+    symbols: Record<string, string>,
+    options: Record<string, {}> = {},
+) => {
+    const { subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
+    const subscriptions = useRef<number[]>([]);
+    const isMounted = useRef(true);
+
+    /// Options is reserved for future use.
+    options;
+
+    useEffect(() => {
+        isMounted.current = true;
+
+        const registerAndSubscribe = async () => {
+            for (const [key, symbolName] of Object.entries(symbols)) {
+                try {
+                    //console.log(`Subscribe... ${domain}/${symbolName}`);
+                    const subscriptionId = subscribe(`${domain}/${symbolName}`, (data) => {
+
+                        //console.log(`Value received for ${key} to ${data.value}`);
+                        if (isMounted.current) {
+                            //console.log(`Setting ${key} to ${data.value}`);
+                            const setter = setters[key];
+                            if (setter) {
+                                setter(data.value);
+                            }
+                        }
+                    });
+                    subscriptions.current.push(subscriptionId);
+                } catch (err) {
+                    console.error(`Failed to register symbol ${symbolName}: ${err}`);
+                }
+            }
+
+            // Currently, there isn't a global mechanism in autocore-server for refreshing all tags.
+            // await invoke(domain, "refresh", {});
+        };
+        
+        if (!isConnected() ) {
+            //console.log("SCHEDULE LATER...");
+            let connectionSubId = subscribe("HUB/connected", () => {
+                setTimeout(() => {
+                    registerAndSubscribe();
+                    unsubscribe(connectionSubId);    
+                }, 500);
+            });
+            subscriptions.current.push(connectionSubId);
+        }
+        else {
+            //console.log("ALREADY CONNECTED...");
+            registerAndSubscribe();
+        }
+        
+
+        return () => {
+            //console.log("UNSUBSCRIBE");
+            isMounted.current = false;
+            subscriptions.current.forEach(subscriptionId => unsubscribe(subscriptionId));
+            subscriptions.current = [];
+        };
+    }, []); // Ensure setters and symbols are included if they can change
+
+    return null; // This hook does not render anything
+};
+
+
+/**
+ * Custom hook to create a function that sends a specified value to a remote device or server.
+ * This hook abstracts the repetitive logic involved in sending these values,
+ * such as invoking the command and handling errors.
+ *
+ * @param {string} domain The domain under which the backend function is grouped.
+ * @param {string} fname The name of the function to be called on the backend.
+ * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
+ * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
+ *
+ * @example
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { Button } from 'primereact/button';
+ * import useWriteValue from './commandHooks';
+ *
+ * const Component: React.FC = () => {
+ *   const [value, setValue] = useState<number>(0);
+ *   const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         type="number"
+ *         value={value}
+ *         onChange={(e) => setValue(Number(e.target.value))}
+ *       />
+ *       <Button
+ *         label="Send to Backend"
+ *         onClick={() => writeToBackend(value)}
+ *       />
+ *     </div>
+ *   );
+ * };
+ */
+export function useAdsWriteValue(domain : string, symbolName: string, fname : string = "write_value") {
+    const { invoke } = useContext(EventEmitterContext);
+
+    // Return a function that takes a value and sends it to the backend
+    return async (value: object | boolean | number | string ) => {
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value });
+        } catch (err) {
+            console.error(`Error writing tag ${symbolName}: ${err}`);
+        }
+    };
+}
+
+
+
+
+
+
+/**
+ * useWriteScaledValue is a custom React hook that enables writing scaled numerical values to the autocore backend system.
+ * It applies a specified scale and offset to a numeric value before sending it over the websocket connection.
+ * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
+ * scale factors before being persisted or processed by a backend system.
+ *
+ * @param symbolName The symbol name in the backend system where the value will be written.
+ * @param scale The scale factor to be applied to the value.
+ * @param offset The offset to be applied after scaling the value.
+ * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
+ *
+ * @example
+ * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
+ * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
+ * based on a dynamic scale factor managed in the component's state.
+ *
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { useWriteScaledValue } from './commandHooks';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *     const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
+ *     const [offset, setOffset] = useState<number>(0); // No offset by default.
+ *
+ *     // The hook is used here with the scale and offset state variables.
+ *     const writeMeasurement = useWriteScaledValue("ADS", "GIO.axisX.position", scale, offset);
+ *
+ *     // This function is called when the input field value changes.
+ *     const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *         const valueInInches = parseFloat(event.target.value);
+ *         writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
+ *     };
+ *
+ *     return (
+ *         <div>
+ *             <label>Enter measurement in inches:</label>
+ *             <input type="number" onChange={handleMeasurementChange} />
+ *         </div>
+ *     );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
+ * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
+ * dynamically if needed, for instance, based on user selection or other external configurations.
+ */
+export function useWriteScaledValue(domain : string, symbolName: string, scale: number, offset: number, fname : string = "write_value") {
+    const { invoke } = useContext(EventEmitterContext);
+    
+    return useCallback(async (value: number) => {
+
+        // In autocore-react, we multiple to scale incoming values,
+        // divide to scale outgoing values.
+        // This is an OUTGOING value, so we divide.
+
+        const scaledValue = (value - offset) / scale; 
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
+        } catch (err) {
+            console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
+        }
+    }, [symbolName, scale, offset, invoke]);
+}
+
+
+
+
+
+/**
+ * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
+ * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
+ *
+ * @param {string} domain - The domain under which the backend function is grouped.
+ * @param {string} fname - The function name to be called on the backend.
+ * @param {string} symbolName - The symbol name to target for the tap action.
+ * @returns {Function} A function that triggers the tap action.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { Button } from 'primereact/button';
+ * import useTapValue from './useTapValue'; // Ensure the correct import path
+ *
+ * const MyComponent: React.FC = () => {
+ *   const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
+ *
+ *   return (
+ *     <Button
+ *       label="Tap Button"
+ *       onClick={() => sendTapAction()}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+export function useTapValue(domain : string, symbolName: string, fname : string = "write_value"): () => Promise<void> {
+    const { invoke } = useContext(EventEmitterContext);
+
+    return async () => {
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value: true });
+            await sleep(300); // Sleep for 300ms before writing false
+            await invoke(domain, fname, { symbol_name: symbolName, value: false });
+        } catch (err) {
+            console.error(`Error handling tap action for ${symbolName}: ${err}`);
+        }
+    };
+}
+

package/src/hub/HubBase.ts

@@ -3,7 +3,7 @@
  * Created Date: 2023-12-15 14:21:33
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-04-25 14:44:14
+ * Last Modified: 2025-03-31 08:35:09
  * Modified By: ADC
  * -----
  * 
@@ -166,6 +166,8 @@ export abstract class HubBase {
      */
     publish(topic : string, data : any | undefined) : void {
         const convertedTopic = this.toLocalTopic(topic);        
+
+        console.log(`HUB Dispatch topic ${convertedTopic} payload ${JSON.stringify(data)}`);
         this.context?.dispatch({
             topic: convertedTopic,
             payload: data

package/src/hub/HubWebSocket.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2024-04-25 14:42:02
+ * Last Modified: 2025-03-31 08:35:12
  * -----
  * 
  */
@@ -158,6 +158,8 @@ export class HubWebSocket extends HubBase {
         this.socket.onmessage = (event) => {
             const data: CommandMessage = JSON.parse(event.data);
 
+            // console.log(`MSG: ${JSON.stringify(data)}`);
+
             if (data.request_id && this.pendingRequests.has(data.request_id)) {
 
                 const { resolve, reject } = this.pendingRequests.get(data.request_id)!;
@@ -253,9 +255,15 @@ export class HubWebSocket extends HubBase {
             && msg.result !== undefined && msg.result !== null
             && msg.result.data !== undefined && msg.result.data !== null            
         ) {
+
             let topic = `${msg.domain}/${msg.result.data["topic"]}`;
+
+            //console.log(`HUB PUBLISHING: ${topic} : ${JSON.stringify(msg.result.data)}`);
             this.publish(topic, msg.result.data);
         }
+        // else {
+        //     console.error("INVALID BROADCAST RECEIVED!");
+        // }
     }
 
     disconnect= (): void => {