@adcops/autocore-react 3.0.0

package/src/core/ValueSimulator.ts

@@ -0,0 +1,167 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-18 12:49:58
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-03-08 09:33:45
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+import { EmitterDispatchFunction } from "./EventEmitterContext";
+
+
+/**
+ * Generates values for simulating data into an HMI.
+ * Used for demonstration and development testing.
+ */
+export class ValueSimulator {
+
+    protected bBit1: boolean = false;
+    protected bBit2: boolean = true;
+
+    protected iRamp1: number = 0;
+    protected iRamp2: number = 0;
+    protected fRamp1: number = 0;
+    protected fRamp2: number = 0;
+
+    protected iSin1: number = 0;
+    protected iSin2: number = 0;
+    protected fSin1: number = 0;
+    protected fSin2: number = 0;
+
+    protected iRamp1DirectionUp : boolean = true;
+    protected iRamp2DirectionUp : boolean = true;
+    protected fRamp1DirectionUp : boolean = true;
+    protected fRamp2DirectionUp : boolean = true;
+
+    protected iSin1Angle : number = Math.random() * Math.PI * 2;
+    protected iSin2Angle : number = Math.random() * Math.PI * 2;
+    protected fSin1Angle : number = (Math.random() * Math.PI * 2) / 10;
+    protected fSin2Angle : number = (Math.random() * Math.PI * 2) / 10;    
+
+    protected intervalId: number = 0;
+
+    protected dispatch: EmitterDispatchFunction;
+
+    /**
+     * Constructor
+     * @param dispatch EmitterDispatchFunction Dispatch function from the application's EventEmiterContext.
+     */
+    constructor(dispatch: EmitterDispatchFunction) {
+        this.dispatch = dispatch;
+    }
+
+    /**
+     * Start simulating values on a tick
+     */
+    start() {
+        
+        if (this.intervalId === 0) {
+            this.intervalId = setInterval(
+                () => this.update(),
+                1000
+            );
+        }
+    }
+
+
+    /**
+     * Stop simulating values.
+     */
+    stop() {
+        if (this.intervalId !== 0) {
+            clearInterval(this.intervalId);
+            this.intervalId = 0;    
+        }
+    }
+
+
+    /**
+     * Update and dispatch the values.
+     */
+    protected update() {
+
+        this.bBit1 = !this.bBit1;
+        this.bBit2 = !this.bBit2;
+
+        [this.iRamp1, this.iRamp1DirectionUp] = this.updateRamp(this.iRamp1, this.iRamp1DirectionUp, 32767);
+        [this.iRamp2, this.iRamp2DirectionUp] = this.updateRamp(this.iRamp2, this.iRamp2DirectionUp, 32767);
+        [this.fRamp1, this.fRamp1DirectionUp] = this.updateRamp(this.fRamp1, this.fRamp1DirectionUp, 3276.7);
+        [this.fRamp2, this.fRamp2DirectionUp] = this.updateRamp(this.fRamp2, this.fRamp2DirectionUp, 3276.7);
+        
+        [this.iSin1, this.iSin1Angle] = this.updateSin(this.iSin1, this.iSin1Angle, Math.PI / 180, 32767);
+        [this.iSin2, this.iSin2Angle] = this.updateSin(this.iSin2, this.iSin2Angle, Math.PI / 180, 32767);
+        [this.fSin1, this.fSin1Angle] = this.updateSin(this.fSin1, this.fSin1Angle, Math.PI / 180, 3276.7);
+        [this.fSin2, this.fSin2Angle] = this.updateSin(this.fSin2, this.fSin2Angle, Math.PI / 180, 3276.7);
+
+
+        this.updateTopic("value-simulator-bBit1", this.bBit1);
+        this.updateTopic("value-simulator-bBit2", this.bBit2);
+        this.updateTopic("value-simulator-iRamp1", this.iRamp1);
+        this.updateTopic("value-simulator-iRamp2", this.iRamp2);
+        this.updateTopic("value-simulator-fRamp1", this.fRamp1);
+        this.updateTopic("value-simulator-fRamp2", this.fRamp2);
+
+        this.updateTopic("value-simulator-iSin1", this.iSin1);
+        this.updateTopic("value-simulator-iSin2", this.iSin2);
+        this.updateTopic("value-simulator-fSin1", this.fSin1);
+        this.updateTopic("value-simulator-fSin2", this.fSin2);
+
+    }
+
+
+    /**
+     * Updates the value of a ramp variable, changing its direction when limits are reached.
+     * @param {number} value The current value of the ramp variable.
+     * @param {boolean} directionUp Indicates if the ramp variable is currently increasing.
+     * @param {number} max The maximum value for the ramp.
+     * @returns {[number, boolean]} The updated value and direction.
+     */
+    protected updateRamp(value: number, directionUp: boolean, max: number): [number, boolean] {
+        if (directionUp) {
+            value++;
+            if (value >= max) return [value, false];
+        } else {
+            value--;
+            if (value <= 0) return [value, true];
+        }
+        return [value, directionUp];
+    }
+
+
+    /**
+     * Updates a sine wave value based on the given angle and increments, then calculates the new value and angle.
+     * This method is useful for scenarios where a sine wave value needs to be progressively updated, such as in animations
+     * or simulations. The sine of the updated angle is calculated, multiplied by the maximum value to scale it, and both
+     * the new value and the updated angle are returned.
+     * 
+     * @param {number} value The current value of the sine wave. This parameter is not directly used in the calculation of the new value,
+     * but it can be utilized if the method is extended or modified.
+     * @param {number} angle The current angle in radians. This is the phase of the sine wave.
+     * @param {number} increment The value by which the angle is to be incremented, in radians. This controls the progression of the wave.
+     * @param {number} max The maximum value (amplitude) of the sine wave. The calculated sine value will be scaled by this factor.
+     * @returns {[number,number]} A tuple where the first element is the new sine wave value and the second element is the updated angle.
+     */
+    protected updateSin(value: number, angle: number, increment: number, max: number): [number, number] {
+        angle += increment;
+        value = Math.sin(angle) * max;
+        return [value, angle];
+    }
+
+
+    /**
+     * Dispatch the update for a particular topic.
+     */
+    protected updateTopic(topic: string, value: any) {
+        
+        this.dispatch({
+            topic: topic,
+            payload: value
+        });
+        
+    }
+}
+
+export default ValueSimulator;

package/src/core/hoc.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-18 16:14:20
+  * -----
+ * Last Modified: 2024-03-08 09:27:12
+ * Modified By: ADC
+ * -----
+ */
+
+/**
+ * @fileinfo
+ * Explanation:
+ * React.ComponentType<P>: This is a generic type that can accept any React component (functional or class) with props of type P.
+ * P extends WithSubscriptionProps: Here, P is a generic type parameter that extends WithSubscriptionProps, 
+ * meaning it can be any type that includes the properties of WithSubscriptionProps.
+ * Omit<P, keyof WithSubscriptionProps>: This utility type creates a new type by omitting properties from 
+ * P that are also in WithSubscriptionProps. This is useful to prevent type clashes.
+ * useState<any>(): The state is typed as any since the value received from the subscription 
+ * can be of any type. You may choose to make this more specific based on your application's needs.
+ * 
+ */
+
+
+import React, { useState, useEffect, useContext } from 'react';
+import { EventEmitterContext } from './EventEmitterContext';
+
+/**
+ * High Order Component Subscription properties.
+ */
+export type HocAddSubscriptionProps = {
+    /** The topic to subscribe to. */
+    topic: string;
+    /** The name of the prop through which the subscription data is passed to the WrappedComponent.  */
+    propName?: string;
+};
+
+
+/**
+ * Creates a higher-order component that subscribes to a specified topic and passes the data to the wrapped component.
+ * 
+ * @param WrappedComponent The component to be wrapped and enhanced with subscription data.
+ * @param topic The topic to subscribe to.
+ * @param propName The name of the prop through which the subscription data is passed to the WrappedComponent. 
+ * @returns A component that subscribes to the given topic and updates its specified prop with the received data.
+ */
+export function hocAddSubscription<P extends HocAddSubscriptionProps>(
+    WrappedComponent: React.ComponentType<P>,
+    topic: string,
+    propName: keyof P
+) {
+    return function(props: Omit<P, keyof HocAddSubscriptionProps>) {
+        const [value, setValue] = useState<any>();
+        const { subscribe, unsubscribe } = useContext(EventEmitterContext);
+
+        useEffect(() => {
+            const unsubscribeToken = subscribe(topic, setValue);
+            return () => unsubscribe(unsubscribeToken);
+        }, [topic, subscribe, unsubscribe]);
+
+        // Use propName to pass the updated value
+        const additionalProps = { [propName]: value } as Pick<P, keyof P>;
+
+        return <WrappedComponent {...props as P} {...additionalProps} />;
+    };
+}

package/src/hub/HubBase.ts

@@ -0,0 +1,293 @@
+/*
+ * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2023-12-15 14:21:33
+ * Author: Thomas C. Bitsky Jr.
+ * -----
+ * Last Modified: 2024-03-08 07:09:11
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+import { EventEmitterContextType} from '../core/EventEmitterContext';
+
+
+
+/**
+ * Base class for the interface for the IPC to the backend, 
+ * which may be websockets, MQTT, the Tauri API, 
+ * or something else.
+ * 
+ * The EventEmitterContext should generate the hub automatically. 
+ * 
+ * # Usage
+ * The hub can be used to publish and subscribe to
+ * topics in the front-end, regardless of being connected to any backend.
+ * 
+ * ```
+ * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * const [controlPower, setControlPower] = useState(false);
+ * useEffect(() => {
+ *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
+ *          setControlPower(value);
+ *      });  
+ *
+ *
+ *      return () => {
+ *           unsubscribe(unsubscribeControlPower);
+ *      }
+ * }, [] );
+ * 
+ * const onPbPressed = () => {
+ *      let count = 1;
+ *      dispatch({
+ *          topic: "my-awesome-topic",
+ *          payload: count
+ *      });
+ * }
+ * 
+ * ``` 
+ * The hub should also be used for invoking events in the backend.
+ * This example will call the function "update_count" in the backend, passing
+ * the expected argument "count". Details of the interaction between the Hub and
+ * the backend will be handled by the appropriate HubBase sub-class, and should
+ * be transparent to the front end.
+ * 
+ * ```
+ * const {invoke} = useContext(EventEmitterContext);
+ * const incrementCount = () => {
+ *    count += 1;
+ *    invoke('update_count', {"count": count});        
+ * };
+ * 
+ * Subscribing to a topic is simple. The type of value received is specific
+ * to the topic.
+ * 
+ * Example: Listen to an event 'xarm-position':
+ * ```
+ * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
+ * useEffect(() => {
+ *         const unsubscripeMp = subscribe('xarm-position', (value) => {
+ *            // The publisher sent a JSON object of 3D position values. 
+ *            setX(value.x);
+ *            setY(value.y);
+ *            setZ(value.z);
+ *            setA(value.roll);
+ *            setB(value.yaw);
+ *            setC(value.pitch);
+ *        });
+ * 
+ *    return () => {
+ *        unsubscribe(unsubscripeMp);
+ *    }
+ * 
+ * }, [] );
+ *
+ * ```
+ * 
+ */
+export abstract class HubBase {
+
+    protected localTopicToBackendTopicMap : Map<string,string> = new Map<string,string>();
+    protected backendTopicToLocalMap : Map<string,string> = new Map<string,string>();
+    protected localFNameToBackendFNameMap : Map<string,string> = new Map<string,string>();
+    protected backendFNameToLocalFNameMap : Map<string,string> = new Map<string,string>();
+
+    protected context : EventEmitterContextType | null = null;
+
+
+    /**
+     * Constructor
+     */
+    constructor() {
+    }
+
+
+    /**
+     * Set the EventEmitterContext for this instance of the Hub. The EventEmitterContext
+     * should handle this as part of the initialization sequence. Because React can
+     * sometimes make (and destroy) multiple copies of the EventEmitterContext, it's important
+     * that the context be stored in the instance this way so that the HubBase can properly target
+     * right context.
+     * 
+     * If this context is not sent, no events will be emitted from the backend to the front end,
+     * and global events in the interface may not work.
+     * 
+     */
+    setContext(context : EventEmitterContextType | null ) {
+        this.context = context;
+    }    
+
+    /** 
+     * Invoke/send a message to the back end. 
+     * This does NOT get published to the front end.
+     */
+    abstract invoke(fname: string, payload? : object) : Promise<object>;
+
+
+    /**
+     * Convenience function to invoke a command with an optional topic and optional value.
+     * This will invoke the specified command in the backend. It does not broadcast the
+     * value within the local frontend.
+     * @param fname string Function name
+     * @param topic string Topic 
+     * @param value any data payload
+     */
+    invokeTopic( fname : string, topic : string | null, value? : any ) : Promise<object> {
+        const msg = {
+            topic : topic,
+            data : value
+        };
+        return this.invoke(fname, msg);
+    }
+
+    /** 
+     * Pubish a topic throughout the web app using the 
+     * Global EventEmitterContext. This will broadcast within the local frontend. 
+     * This does NOT get relayed to the backend.
+     */
+    publish(topic : string, data : any | undefined) : void {
+        const convertedTopic = this.toLocalTopic(topic);        
+        this.context?.dispatch({
+            topic: convertedTopic,
+            payload: data
+        });
+    }
+
+
+    /**
+     * Map a local topic to a topic in the backend.
+     * @param localTopic string
+     * @param backendTopic string
+     */
+    mapTopic(localTopic : string, backendTopic: string ) : void {
+        this.localTopicToBackendTopicMap.set(localTopic, backendTopic);
+        this.backendTopicToLocalMap.set(backendTopic, localTopic);
+    }
+
+    /**
+     * Unmap a local topic.
+     * @param localTopic string
+     */
+    unmapTopic(localTopic: string) : void {
+        if (this.localTopicToBackendTopicMap.has(localTopic) ) {
+            const be = this.localTopicToBackendTopicMap.get(localTopic);
+            this.localTopicToBackendTopicMap.delete(localTopic);
+            
+            if (be !== null && be !== undefined && this.backendTopicToLocalMap.has(be)) {
+                this.backendTopicToLocalMap.delete(be);
+            }
+        }        
+    }
+
+
+    /**
+     * Map a local function name, as would be sent to the invoke method, to a 
+     * function name in the backend.
+     * @param localFName string
+     * @param backendFName string
+     */
+    mapFName(localFName : string, backendFName: string ) : void {
+        this.localFNameToBackendFNameMap.set(localFName, backendFName);
+        this.backendFNameToLocalFNameMap.set(backendFName, localFName);
+    }
+
+    /**
+     * Unmap a local function name.
+     * @param localFName string
+     */
+    unmapFName(localFName: string) : void {
+        if (this.localFNameToBackendFNameMap.has(localFName) ) {
+            const be = this.localFNameToBackendFNameMap.get(localFName);
+            this.localFNameToBackendFNameMap.delete(localFName);
+            
+            if (be !== null && be !== undefined && this.backendFNameToLocalFNameMap.has(be)) {
+                this.backendFNameToLocalFNameMap.delete(be);
+            }
+        }        
+    }
+
+
+    /**
+     * Convert a local topic to a backend topic. If a mapping isn't
+     * registered, the local topic is returned.
+     * @param localTopic local topic name
+     * @returns string
+     */
+    toBackendTopic(localTopic : string) : string {
+        if (this.localTopicToBackendTopicMap.has(localTopic) ) {
+            const ret = this.localTopicToBackendTopicMap.get(localTopic);
+            if (ret !== null && ret !== undefined)
+                return ret;
+            else
+                return localTopic;
+        }
+        else {
+            return localTopic;
+        }
+    }
+
+    /**
+     * Convert a local function name to a backend function name. If a mapping isn't
+     * registered, the local FName is returned.
+     * @param localTopic local function name
+     * @returns string
+     */    
+    toBackendFName(localFName : string) : string {
+        if (this.localFNameToBackendFNameMap.has(localFName) ) {
+            const ret = this.localFNameToBackendFNameMap.get(localFName);
+            if (ret !== null && ret !== undefined)
+                return ret;
+            else
+                return localFName;
+        }
+        else {
+            return localFName;
+        }
+    }    
+
+
+    /**
+     * Convert a backend topic to a local topic. If a mapping isn't
+     * registered, the backend topic is returned.
+     * @param backendTopic backend topic name
+     * @returns string
+     */
+    toLocalTopic(backendTopic : string) : string {
+        if (this.backendTopicToLocalMap.has(backendTopic) ) {
+            const ret = this.backendTopicToLocalMap.get(backendTopic);
+            if (ret !== null && ret !== undefined)
+                return ret;
+            else
+                return backendTopic;
+        }
+        else {
+            return backendTopic;
+        }
+    }    
+    
+
+    /**
+     * Convert a backend function name to a local function name. If a mapping isn't
+     * registered, the backend function name is returned.
+     * @param backendTopic backend function name
+     * @returns string
+     */    
+    toLocalFName(backendTopic : string) : string {
+        if (this.backendFNameToLocalFNameMap.has(backendTopic) ) {
+            const ret = this.backendFNameToLocalFNameMap.get(backendTopic);
+            if (ret !== null && ret !== undefined)
+                return ret;
+            else
+                return backendTopic;
+        }
+        else {
+            return backendTopic;
+        }
+    }       
+
+
+}
+
+
+export default HubBase;

package/src/hub/HubSimulate.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2023-12-17 10:38:21
+ * -----
+ * Last Modified: 2024-03-08 09:35:51
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+import { HubBase } from './HubBase';
+
+/**
+ * Hub for simulating functionality when no backend is present.
+ */
+export class HubSimulate extends HubBase {
+
+    /**
+     * Constructor
+     */
+    constructor() {
+        super();
+    }
+
+    /**
+     * Invoke a method in the Socket.IO backend and wait for acknowledgment.
+     * 
+     * @param fname method name
+     * @param payload Optional data payload
+     * @param timeout Timeout in milliseconds after which the promise is rejected if no response is received.
+     * @returns A Promise that resolves to the response from the backend or rejects if a timeout occurs.
+     */
+    invoke(fname: string, payload?: object, timeout: number = 20): Promise<object> {
+        fname; // Not using for simulator
+        return new Promise((resolve, reject) => {
+            reject; // not using for simulator
+            // Set a timeout to echo a response
+            setTimeout(() => {
+                resolve({data: payload});
+            }, timeout);
+        });
+    }
+
+}
+
+export default HubSimulate;