@adcops/autocore-react 3.0.0

package/src/components/Indicator.tsx

@@ -0,0 +1,243 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 14:39:41
+ * -----
+ * Last Modified: 2024-03-08 07:48:42
+ * -----
+ * 
+ */
+
+
+
+// import { useContext } from 'react';
+// import clsx from 'clsx';
+
+// import DimensionsContext from '../core/DimensionsContext';
+
+
+
+// /**
+//  * Displays boolean values<br/>
+//  * Supports 3 states: **on**, **off** and **invalid/not available**:
+//  */
+// const Indicator = ({
+//     value: value,
+//     x,
+//     y,
+//     width = 22,
+//     height = width,
+//     className,
+//     onColor: onColor = IndicatorGreen,
+//     offColor: offColor = IndicatorOff,
+//     invalidColor: invalidColor = IndicatorInvalid,
+//     useAbsolutePositioning = false, // Default to false
+// }: Props): JSX.Element => {
+//     const { scale, xOffset, yOffset } = useContext(DimensionsContext);
+
+//     let color;
+//     switch (value) {
+//         case true:
+//             color = onColor;
+//             break;
+//         case false:
+//             color = offColor;
+//             break;
+//         default:
+//             color = invalidColor;
+//             break;
+//     }
+
+//     return (
+//         <div
+//             className={clsx(className)}
+//             style={{
+//                 position: useAbsolutePositioning ? 'absolute' : 'relative',
+//                 display: useAbsolutePositioning ?  "": "inline-block",
+//                 verticalAlign: 'middle',
+//                 top: useAbsolutePositioning && y ? `${yOffset + scale * y}px` : undefined,
+//                 left: useAbsolutePositioning && x? `${xOffset + scale * x}px` : undefined,
+//                 width: width ? `${width * scale}px` : undefined,
+//                 height: height ? `${height * scale}px` : undefined,
+//                 lineHeight: height ? `${height * scale}px` : undefined,
+//                 backgroundColor: color,
+//                 borderRadius: "20px"
+//             }}
+//         />
+//     );
+// };
+
+// export { Indicator };
+
+
+
+
+import React, { Component } from 'react';
+import clsx from 'clsx';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import { IPositionContext } from '../core/PositionContext';
+import {IndicatorColor} from "./IndicatorColor";
+export {IndicatorColor}
+
+
+
+
+interface IndicatorProps {
+    /**
+     * State to be displayed<br/>
+     *
+     * Available states: **on**, **off** and **not available**:
+     *
+     * * `true` is treated as **on**
+     * * `false` is treated as **off**
+     * * `undefined` is treated as **not available**
+     */
+    value?: boolean | undefined;
+    /**
+     * X position (in pixels)
+     */
+    x?: number;
+    /**
+     * Y position (in pixels)
+     */
+    y?: number;
+    /**
+     * Width (in pixels)
+     */
+    width?: number;
+    /**
+     * Height (in pixels)<br/>
+     * @default width
+     */
+    height?: number;
+    /**
+     * CSS color for **enabled** state
+     */
+    onColor?: string;
+    /**
+     * CSS color for **disabled** state
+     */
+    offColor?: string;
+    /**
+     * CSS color for **not available** state
+     */
+    invalidColor?: string;
+    /**
+     * Custom class name to be attached
+     */
+    className?: string;
+
+
+    /**
+     * Enable absolute positioning for the component, allowing it to be
+     * placed on a specific position of its parent. This is useful when
+     * laying components over an image or wireframe.
+     */
+    useAbsolutePositioning?: boolean;
+
+    /**
+     * The topic to monitor to display. Optional. 
+     */
+    topic?: string;
+}
+
+
+interface IndicatorState {
+    subscribedValue?: boolean | null;
+    fontSize?: string;
+}
+
+
+export class Indicator extends Component<IndicatorProps, IndicatorState> {
+    static contextType = EventEmitterContext;
+    protected unsubscribeTopicId: number | null = null;
+
+    // Define default properties
+    static defaultProps = {
+        width: 22,
+        height: 22,
+        onColor: "green",
+        offColor: "gray",
+        invalidColor: "yellow",
+        useAbsolutePositioning: false
+    };
+
+    constructor(props: IndicatorProps) {
+        super(props);
+        this.state = {
+            subscribedValue: props.value,
+            fontSize: "100%"
+        };
+    }
+
+    componentDidMount() {
+        const { topic } = this.props;
+        if (topic && this.unsubscribeTopicId === null) {
+            const { subscribe } = this.context as EventEmitterContextType;
+            this.unsubscribeTopicId = subscribe(topic, (value: any) => {
+                this.setState({ subscribedValue: value });
+            });
+        }
+    }
+
+    componentDidUpdate(prevProps: IndicatorProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({ subscribedValue: this.props.value });
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.unsubscribeTopicId !== null) {
+            const { unsubscribe } = this.context as EventEmitterContextType;
+            unsubscribe(this.unsubscribeTopicId);
+            this.unsubscribeTopicId = null;
+        }
+    }
+
+    render() {
+        const { x, y, width, height, className, onColor, offColor, invalidColor, useAbsolutePositioning } = this.props;
+        const { scale, xOffset, yOffset } = this.context as IPositionContext;
+        const { subscribedValue } = this.state;
+
+        let adjWidth = width || 10;
+        if (adjWidth < 10)
+            adjWidth = 10;
+        let adjHeight = height || 10;
+        if (adjHeight < 10)
+            adjHeight = 10;
+        let adjScale = scale || 1;
+        if (adjScale === 0)
+            adjScale = 1;
+
+        let color;
+        switch (subscribedValue) {
+            case true:
+                color = onColor;
+                break;
+            case false:
+                color = offColor;
+                break;
+            default:
+                color = invalidColor;
+                break;
+        }
+
+        const style: React.CSSProperties = {
+            position: useAbsolutePositioning ? 'absolute' : 'relative',
+            display: useAbsolutePositioning ? "" : "inline-block",
+            verticalAlign: 'middle',
+            top: useAbsolutePositioning && y ? `${yOffset + adjScale * y}px` : undefined,
+            left: useAbsolutePositioning && x ? `${xOffset + adjScale * x}px` : undefined,
+            width: adjWidth ? `${adjWidth * adjScale}px` : undefined,
+            height: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+            lineHeight: adjHeight ? `${adjHeight * adjScale}px` : undefined,
+            backgroundColor: color,
+            borderRadius: "20px"
+        };
+
+        return (
+            <div className={clsx(className)} style={style} />
+        );
+    }
+}
+
+export default Indicator;

package/src/components/IndicatorButton.tsx

@@ -0,0 +1,306 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-21 10:33:58
+  * -----
+ * Last Modified: 2024-03-08 07:17:08
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+
+import { Component } from 'react';
+import { Button, ButtonProps} from 'primereact/button';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
+import {IndicatorColor} from "./IndicatorColor";
+export {IndicatorColor}
+
+/**
+ * Enum for different input modes of the IndicatorButton.
+ */
+export enum ActionMode {
+    Tap = 'Tap',
+    Toggle = 'Toggle',
+    Pressed = 'Pressed',
+    Released = 'Released'
+}
+
+/**
+ * Properties for the IndicatorButton.
+ * 
+ * For more information on the AutoCore Button API Specification, see 
+ * [Additional Documentation](../additional-docs/ButtonApiSpecs.md).
+ */
+export interface IndicatorButtonProps extends ButtonProps {
+    /**
+     * Topic name to monitor for state indication.
+     */
+    topic?: string;
+
+    /**
+     * Color for the button when the state is TRUE.
+     */
+    onColor?: IndicatorColor;
+
+    /**
+     * Color for the button when the state is FALSE.
+     */
+    offColor?: IndicatorColor;
+
+    /**
+     * Text displayed when the state is TRUE. Falls back to `label` if undefined.
+     */
+    onLabel?: string;
+
+    /**
+     * Text displayed when the state is FALSE. Falls back to `label` if undefined.
+     */
+    offLabel?: string;
+
+    /**
+     * Name of the command to invoke on button events.
+     * If command is "*", then the commandTopic will be dispatched
+     * internally.
+     */
+    command?: string;
+
+    /**
+     * Optional topic parameter to send along with the command. 
+     * If set, will automatically be included with commandArgs as 
+     * the value of field 'topic.'
+     */
+    commandTopic? : string;
+
+    /**
+     * Optional arguments sent with the command.
+     */
+    commandArgs?: any;
+
+    /**
+     * Topic to disable button interaction.
+     */
+    disableTopic?: string;
+
+    /**
+     * Topic to control the visibility of the button.
+     */
+    invisibleTopic?: string;
+
+    /**
+     * Mode of input for the button (e.g., TAP, TOGGLE).
+     */
+    actionMode?: ActionMode;
+
+    /**
+     * Inverts the signal values for TAP, PRESSED, and RELEASED modes.
+     */
+    invert?: boolean;
+}
+
+/**
+ * State for the IndicatorButton.
+ */
+export interface IndicatorButtonState {
+    /**
+     * Current value/state of the button based on the subscribed topic.
+     */
+    currentValue?: boolean;
+
+    /**
+     * Indicates whether the button is disabled.
+     */
+    isDisabled?: boolean;
+
+    /**
+     * Indicates whether the button is invisible.
+     */
+    isInvisible?: boolean;
+
+    /**
+     * The button is in the "down" state.
+     */
+    isPressed : boolean;
+}
+
+
+
+
+export class IndicatorButton extends Component<IndicatorButtonProps, IndicatorButtonState> {
+    static contextType = EventEmitterContext;
+
+    // Define default props
+    static defaultProps = {
+        onColor: IndicatorColor.IndicatorGreen,
+        offColor: "gray",  // Default offColor
+        // ... other default values for props ...
+    };    
+
+    constructor(props: IndicatorButtonProps) {
+        super(props);
+        this.state = {
+            currentValue: undefined,
+            isDisabled: false,
+            isInvisible: false,
+            isPressed: false
+        };
+    }
+
+    componentDidMount() {
+        this.setupSubscriptions();
+    }
+
+    componentDidUpdate(prevProps: IndicatorButtonProps) {
+        prevProps;
+        // Logic to handle updates in props, if necessary        
+    }
+
+    componentWillUnmount() {
+        // Unsubscribe logic if needed
+    }
+
+    /**
+     * Sets up subscriptions based on provided topics.
+     */
+    private setupSubscriptions() {
+        const { topic, disableTopic, invisibleTopic } = this.props;
+        const { subscribe } = this.context as EventEmitterContextType;
+
+        if (topic) {
+            // Subscribe to the main topic
+            subscribe(topic, this.handleTopicUpdate);
+        }
+
+        if (disableTopic) {
+            // Subscribe to the disable topic
+            subscribe(disableTopic, this.handleDisableTopicUpdate);
+        }
+
+        if (invisibleTopic) {
+            // Subscribe to the invisible topic
+            subscribe(invisibleTopic, this.handleInvisibleTopicUpdate);
+        }
+    }
+
+    /**
+     * Handles updates for the main topic.
+     */
+    private handleTopicUpdate = (value: boolean) => {
+        this.setState({ currentValue: value });
+    };
+
+    /**
+     * Handles updates for the disable topic.
+     */
+    private handleDisableTopicUpdate = (value: boolean) => {
+        this.setState({ isDisabled: value });
+    };
+
+    /**
+     * Handles updates for the invisible topic.
+     */
+    private handleInvisibleTopicUpdate = (value: boolean) => {
+        this.setState({ isInvisible: value });
+    };
+
+    /**
+     * Handle the button being pressed down. Used for TAP and PRESSED action modes.
+     */
+    protected handleOnPressed() {
+        const { isPressed } = this.state;
+        const {actionMode} = this.props;
+        
+        if (!isPressed) {
+            this.setState({isPressed: true});
+
+            if (actionMode === ActionMode.Tap || actionMode === ActionMode.Pressed) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+
+    /**
+     * Handle the button being released. Used for TAP and RELEASED action modes.
+     */
+    protected handleOnReleased() {
+        const { isPressed } = this.state;
+        const {actionMode} = this.props;
+        
+        if (isPressed) {
+            this.setState({isPressed: false});
+
+            if (actionMode === ActionMode.Tap ) {
+                this.dispatchCommand(false);
+            }
+            else if (actionMode === ActionMode.Released) {
+                this.dispatchCommand(true);
+            }
+        }
+    }
+
+    /**
+     * Dispatch a value to any listeners.
+     * @param value The value to dispatch as part of the payload.
+     */
+    protected dispatchCommand(value : any) {
+
+        const {command, commandTopic, commandArgs} = this.props;
+        const { dispatch } = this.context as EventEmitterContextType;
+
+        if (command !== undefined && command !== null && command.length > 0 )
+        {
+            const payload = {
+                topic: commandTopic,
+                value: value,
+                ...commandArgs                        
+            };
+
+            dispatch({
+                topic: command,
+                payload: payload
+            });
+
+        }
+
+    }
+
+
+    render() {
+        const { currentValue, isDisabled, isInvisible } = this.state;
+        const { className, severity, label, raised,
+            onColor, offColor, onLabel, offLabel, topic, command,
+            commandArgs, disableTopic, invisibleTopic, inputMode, invert,
+            ...restProps
+        } = this.props;
+
+
+        // Determine the label and color based on the current state
+        let btnLabel = currentValue ? onLabel : offLabel;
+        if (btnLabel === undefined || btnLabel === null || btnLabel.length === 0)
+            btnLabel = label;
+
+        let color = currentValue ? onColor : offColor;
+
+        // Handle special cases like undefined state or specific input modes
+        if (currentValue === undefined) {
+            color = IndicatorColor.IndicatorInvalid;
+        }
+
+
+        return (
+            <Button {...restProps}
+                label={btnLabel}
+                className={className}
+                style={{ color: "white", backgroundColor: color, display: isInvisible ? 'none' : 'block' }}
+                disabled={isDisabled}
+                onMouseDown={() => this.handleOnPressed() }
+                onTouchStart={() => this.handleOnPressed() }
+                onMouseUp={() => this.handleOnReleased() }
+                onTouchEnd={() => this.handleOnReleased() }
+            
+                raised
+            />
+        );
+    }
+}
+
+export default IndicatorButton;

package/src/components/IndicatorColor.ts

@@ -0,0 +1,36 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-21 11:45:09
+ * -----
+ * Last Modified: 2024-03-08 07:16:47
+ * Modified By: ADC
+ * -----
+ * 
+ */
+
+/**
+ * Standardized indicator colors and their meanings. It's probably
+ * best to use their meaning and not the actual color name.
+ */
+export enum IndicatorColor {
+    /** Green: On, Ok, Ready, Home, General Use */
+    IndicatorGreen = "green",
+    /** Alias for the ON condition to make meaning clear. Preferred for ON case. */
+    IndicatorOn = IndicatorGreen,
+    /** Off. ONLY USE THIS FOR OFF. */
+    IndicatorOff = "gray",
+    /** Red: Error, Fault, Stop, Stopped. Use sparingly. */
+    IndicatorRed = "red",
+    /** Orange: Warning, Out of position, moving, out of range. */
+    IndicatorOrange = "orange",
+    /** Alias for Red to make meaning clear. Preferred. */
+    IndicatorError  = IndicatorRed,
+    /** Alias for Orange to make meaning clear. Preferred. */
+    IndicatorWarning = IndicatorOrange,
+    /** Invalid. If an indicator is black, the interface does not know the current value. */
+    IndicatorInvalid = "black",
+    /** Use for navigation buttons. No other meaning allowed. */
+    IndicatorNavigation = "cyan",
+    /** Use for informational buttons. No other meaning allowed. */
+    IndicatorInfo = "blue"
+}