@adcops/autocore-react 3.0.31 → 3.0.32

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.31",
+    "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/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 => {