@adcops/autocore-react 3.3.9 → 3.3.10

package/src/components/JogPanel.tsx

@@ -1,461 +1,461 @@
-/*
- * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
- * Created Date: 2024-01-16 13:17:23
-  * -----
- * Last Modified: 2024-03-20 13:16:29
- * -----
- * 
- */
-
-import React from 'react';
-import { Button } from "primereact/button";
-import { SelectButton } from 'primereact/selectbutton';
-import { Tooltip } from 'primereact/tooltip';
-
-import './JogPanel.css';
-//import _default from '@monaco-editor/react';
-
-import { Distance, JogShort, JogMedium, JogLong } from '../assets';
-import { Speed, SpeedSlow, SpeedMedium, SpeedFast } from '../assets';
-import { RotationCcwA, RotationCcwB, RotationCcwC } from '../assets';
-import { RotationCwA, RotationCwB, RotationCwC  } from '../assets';
-
-/**
- * Enumerates the source button or action when an event occurs.
- */
-export enum JogPanelAction {
-    /** Invalid - Ignore this button */
-    Invalid = 0x00,
-    // Horizontal Right
-    xPositive = 0x01,  
-    // Vertical left
-    xNegative = 0x02,       
-    // Away, back
-    yPositive = 0x03,       
-    // Towards, forward
-    yNegative = 0x04,            
-    // Vertical UP
-    zPositive = 0x05,             
-    // Vertical down     
-    zNegative = 0x06,       
-    // Rotate positive around the X axis
-    aPositive = 0x07,
-    // Rotate negative around the X axis
-    aNegative = 0x08,
-    // Rotate positive around the Y axis
-    bPositive = 0x09,
-    // Rotate negative around the Y axis
-    bNegative = 0x10,
-    // Rotate positive around the Z axis
-    cPositive = 0x11,
-    // Rotate negative around the Z axis
-    cNegative = 0x12,
-
-    /** Stop, clear or reset */
-    Stop = 0xFF,
-}
-
-
-/**
- * Enumerates the selected jog distance.
- */
-export enum JogDistanceAction {
-    Short = 0x00,
-    Medium = 0x10,
-    Long = 0x20
-}
-
-/**
- * Enumerates the selected jog distance.
- */
-export enum JogSpeedAction {
-    Slow = 0x00,
-    Medium = 0x10,
-    Fast = 0x20
-}
-
-
-/**
- * Jog button definition type for defining the button in the JogPanel.
- */
-export interface JogPanelButtonDefinition {
-    icon: string;
-    alt: string;
-    action: JogPanelAction
-}
-
-/**
- * Interface for the jog distance select button.
- */
-interface JogDistanceItem {
-    name: string;
-    value: JogDistanceAction;
-}
-
-/**
- * Interface for the jog speed select button.
- */
-interface JogSpeedItem {
-    name: string;
-    value: JogSpeedAction;
-}
-
-/**
- * Component properties of the directional pad.
- */
-interface JogPanelProps {
-    onClicked?: (action: JogPanelAction) => void;
-    onJogDistanceChanged?: (action: JogDistanceAction) => void;
-    onJogSpeedChanged?: (action: JogSpeedAction) => void;
-    buttonDefinitions: (JogPanelButtonDefinition | undefined)[][] | undefined;
-    defaultJogDistance : JogDistanceAction;
-    defaultJogSpeed : JogSpeedAction;
-    showDistanceControl : boolean;
-    showSpeedControl : boolean;
-}
-
-
-interface JogPanelState {
-    jogDistance : JogDistanceAction,
-    jogSpeed : JogSpeedAction
-}
-
-
-/**
- * A default jog button configuration for linear 3D motion.
- */
-export const DefaultLinearJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
-    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
-    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
-    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
-];
-
-/**
- * A default jog button configuration for rotational 3D motion.
- */
-export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
-    [{ icon: "pi", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "pi", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
-    [{ icon: "pi", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "pi", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
-    [undefined, { icon: "pi", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "pi ", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
-];
-
-/**
- * Jogging panel that supports 3D motion. In 3D:
- * - Z is Up and Down, 
- * - Y is towards and away
- * - X is left and right
- * 
- * This Jog Panel is based upon a standard CNC mill and industrial standards.
- * 
- * ## Parameters
- * @param onClicked Callback any time a button is clicked. Includes argument for direction.
- * @param buttonDefinitions A 3x3 matrix of (JogPanelButtonDefinition | undefined) that defines the button. If a button is undefined, it is disabled.
- * 
- * ## Button definitions
- * 
- * Example:
- * ```
- * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
- *    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
- *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
- *    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
- * ];
- * ```
- * 
- */
-export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
-
-    static defaultProps : JogPanelProps = {
-        onClicked: undefined,
-        onJogDistanceChanged: undefined,
-        buttonDefinitions: DefaultLinearJogButtons,
-        defaultJogDistance : JogDistanceAction.Short,
-        defaultJogSpeed : JogSpeedAction.Medium,
-        showDistanceControl : true,
-        showSpeedControl : true
-    };    
-
-
-    private jogDistanceItems: JogDistanceItem[] = [
-        {name: 'S', value: JogDistanceAction.Short},
-        {name: 'M', value: JogDistanceAction.Medium},
-        {name: 'L', value: JogDistanceAction.Long}
-    ];    
-
-    private jogSpeedItems: JogSpeedItem[] = [
-        {name: 'S', value: JogSpeedAction.Slow},
-        {name: 'M', value: JogSpeedAction.Medium},
-        {name: 'F', value: JogSpeedAction.Fast}
-    ];    
-
-
-    constructor(props: JogPanelProps) {
-        super(props);
-
-        this.state = {
-            jogDistance : props.defaultJogDistance,
-            jogSpeed : props.defaultJogSpeed
-        }
-    }
-
-
-    /**
-     * Handle a user action on the DirectionalPad
-     * @param action DirectionalPadAction
-     */
-    private handleClicked(action: JogPanelAction | undefined) {
-
-        if (action === undefined || action === null)
-            return;
-        
-        if (this.props.onClicked) {
-            this.props.onClicked(action);
-        }
-
-    };
-
-    /**
-     * The user has selected a different jog distance.
-     * @param {JogDistanceAction} action  The newly-selected distance.
-     */
-    private handleDistanceChanged(action : JogDistanceAction) {
-        this.setState({jogDistance: action});
-        if (this.props.onJogDistanceChanged) {
-            this.props.onJogDistanceChanged(action);
-        }
-    }
-
-    private handleSpeedChanged(action : JogSpeedAction) {
-        this.setState({jogSpeed: action});
-        if (this.props.onJogSpeedChanged) {
-            this.props.onJogSpeedChanged(action);
-        }
-    }    
-
-
-    emptyRow() {
-        return <div className="grid-row">
-            <div className="button-item empty-slot" />
-            <div className="button-item empty-slot" />
-            <div className="button-item empty-slot" />
-        </div>
-    }  
-    
-    private actionToIcon(action : JogPanelAction | undefined) {
-        if (action == JogPanelAction.Invalid) {
-            return <i/>
-        }
-        else if (action == JogPanelAction.Stop) {
-            return <i/>
-        }
-        else if (action == JogPanelAction.xNegative) {
-            return <i className="pi pi-arrow-left" />
-        }
-        else if (action == JogPanelAction.xPositive) {
-            return <i className="pi pi-arrow-right" />
-        }
-        else if (action == JogPanelAction.yNegative) {
-            return <i className="pi pi-arrow-up-left" />
-        }
-        else if (action == JogPanelAction.yPositive) {
-            return <i className="pi pi-arrow-down-right" />
-        }
-        else if (action == JogPanelAction.zNegative) {
-            return <i className="pi pi-up" />
-        }
-        else if (action == JogPanelAction.zPositive) {
-            return <i className="pi pi-down" />
-        }
-        else if (action == JogPanelAction.aNegative) {
-            return <RotationCcwA />
-        }
-        else if (action == JogPanelAction.aPositive) {
-            return <RotationCwA />
-        }
-        else if (action == JogPanelAction.bNegative) {
-            return <RotationCcwB />
-        }
-        else if (action == JogPanelAction.bPositive) {
-            return <RotationCwB />
-        }
-        else if (action == JogPanelAction.cNegative) {
-            return <RotationCcwC />
-        }
-        else if (action == JogPanelAction.cPositive) {
-            return <RotationCwC />
-        }
-        else {
-            return <i />
-        }
-
-    }
-
-    standardButton(row : number, col : number) {
-
-        if (this.props.buttonDefinitions !== undefined
-            && this.props.buttonDefinitions[row] !== undefined
-            && this.props.buttonDefinitions[row][col] !== undefined 
-            && this.props.buttonDefinitions[row][col]?.action !== undefined ) {
-
-            const action = this.props.buttonDefinitions[row][col]?.action;
-
-            if (action !== undefined && action < JogPanelAction.aPositive ) {
-                return <Button 
-                    key={`${row}-${col}`}
-                    icon={this.props.buttonDefinitions[row][col]?.icon} 
-                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
-                    onClick={() => this.handleClicked(action)}
-                    className="button-item" 
-                />        
-            }
-            else {
-                return <Button 
-                    key={`${row}-${col}`}                     
-                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
-                    onClick={() => this.handleClicked(action)}
-                    className="button-item" 
-                    icon={() => this.actionToIcon(action)}/>
-            }
-            
-        }
-        else {
-            return <Button icon="pi" key={`${row}-${col}`} disabled={true} className="button-item empty-slot" />
-        }
-
-
-    }
-
-    render() {
-
-
-        const distanceButtonTemplate = (option: JogDistanceItem) => {
-            if (option.value == JogDistanceAction.Short) {
-                return <JogShort className="distance-selector-button" width={16} height={16}     
-                    data-pr-tooltip="Short Distance"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />
-            }
-            else if (option.value == JogDistanceAction.Medium) {
-                return <JogMedium className="distance-selector-button" width={16} height={16}
-                    data-pr-tooltip="Medium Distance"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />;
-            }
-            else {
-                return <JogLong className="distance-selector-button" width={16} height={16}
-                    data-pr-tooltip="Long Distance"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />;
-            }
-         
-        }
-
-
-        const speedButtonTemplate = (option: JogSpeedItem) => {
-            if (option.value == JogSpeedAction.Slow) {
-                return <SpeedSlow className="distance-selector-button" width={16} height={16}     
-                    data-pr-tooltip="Slow Speed"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />
-            }
-            else if (option.value == JogSpeedAction.Medium) {
-                return <SpeedMedium className="distance-selector-button" width={16} height={16}
-                    data-pr-tooltip="Medium Speed"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />;
-            }
-            else {
-                return <SpeedFast className="distance-selector-button" width={16} height={16}
-                    data-pr-tooltip="Fast Speed"
-                    data-pr-position="bottom" 
-                    fill="white"
-                />;
-            }
-         
-        }
-                
-        // const jogButtonTemplate = (option: JogDistanceItem) => {
-        //     if (option.value == JogDistanceAction.Short) {
-        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
-        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0"/>
-        //             </svg>;
-        //     }
-        //     else if (option.value == JogDistanceAction.Medium) {
-        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
-        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Z"/>
-        //             </svg>;
-        //     }
-        //     else {
-        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
-        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Zm-240 0v-400h120v400H320Z"/>
-        //             </svg>;
-        //     }            
-        // }
-
-        return (
-            <div className="jogpanel-container">
-                <Tooltip target=".distance-selector-button" />
-
-                <div className="grid-container">
-                    <div key="0" className="grid-row">
-                        {this.standardButton(0,0)}
-                        {this.standardButton(0,1)}
-                        {this.standardButton(0,2)}
-                    </div>
-                    <div key="1" className="grid-row">
-                        {this.standardButton(1,0)}
-                        {this.standardButton(1,1)}
-                        {this.standardButton(1,2)}
-                    </div>
-                    <div key="2" className="grid-row">
-                        {this.standardButton(2,0)}
-                        {this.standardButton(2,1)}
-                        {this.standardButton(2,2)}
-                    </div>
-                </div>                
-
-                { this.props.showDistanceControl &&
-                    <div className="distance-selector p-inputgroup flex-1">                    
-                        <span className="p-inputgroup-addon">
-                            <Distance width={16} height={16} fill="white" />
-                        </span>
-                        <SelectButton 
-                            value={this.state.jogDistance} 
-                            onChange={(e) => this.handleDistanceChanged(e.value)} 
-                            optionLabel="name" 
-                            options={this.jogDistanceItems} 
-                            allowEmpty={false}
-                            itemTemplate={distanceButtonTemplate}
-                        />                
-                    </div>       
-                }
-                
-                {this.props.showSpeedControl && 
-                    <div className="distance-selector p-inputgroup flex-1">                    
-                        <span className="p-inputgroup-addon">
-                            <Speed width={16} height={16} fill="white" />
-                        </span>
-                        <SelectButton 
-                            value={this.state.jogSpeed} 
-                            onChange={(e) => this.handleSpeedChanged(e.value)} 
-                            optionLabel="name" 
-                            options={this.jogSpeedItems} 
-                            allowEmpty={false}
-                            itemTemplate={speedButtonTemplate}
-                        />                
-                    </div>    
-                }
-
-            </div>
-        );
-    }
-};
-
-export default JogPanel;
-
-
+/*
+ * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
+ * Created Date: 2024-01-16 13:17:23
+  * -----
+ * Last Modified: 2024-03-20 13:16:29
+ * -----
+ * 
+ */
+
+import React from 'react';
+import { Button } from "primereact/button";
+import { SelectButton } from 'primereact/selectbutton';
+import { Tooltip } from 'primereact/tooltip';
+
+import './JogPanel.css';
+//import _default from '@monaco-editor/react';
+
+import { Distance, JogShort, JogMedium, JogLong } from '../assets';
+import { Speed, SpeedSlow, SpeedMedium, SpeedFast } from '../assets';
+import { RotationCcwA, RotationCcwB, RotationCcwC } from '../assets';
+import { RotationCwA, RotationCwB, RotationCwC  } from '../assets';
+
+/**
+ * Enumerates the source button or action when an event occurs.
+ */
+export enum JogPanelAction {
+    /** Invalid - Ignore this button */
+    Invalid = 0x00,
+    // Horizontal Right
+    xPositive = 0x01,  
+    // Vertical left
+    xNegative = 0x02,       
+    // Away, back
+    yPositive = 0x03,       
+    // Towards, forward
+    yNegative = 0x04,            
+    // Vertical UP
+    zPositive = 0x05,             
+    // Vertical down     
+    zNegative = 0x06,       
+    // Rotate positive around the X axis
+    aPositive = 0x07,
+    // Rotate negative around the X axis
+    aNegative = 0x08,
+    // Rotate positive around the Y axis
+    bPositive = 0x09,
+    // Rotate negative around the Y axis
+    bNegative = 0x10,
+    // Rotate positive around the Z axis
+    cPositive = 0x11,
+    // Rotate negative around the Z axis
+    cNegative = 0x12,
+
+    /** Stop, clear or reset */
+    Stop = 0xFF,
+}
+
+
+/**
+ * Enumerates the selected jog distance.
+ */
+export enum JogDistanceAction {
+    Short = 0x00,
+    Medium = 0x10,
+    Long = 0x20
+}
+
+/**
+ * Enumerates the selected jog distance.
+ */
+export enum JogSpeedAction {
+    Slow = 0x00,
+    Medium = 0x10,
+    Fast = 0x20
+}
+
+
+/**
+ * Jog button definition type for defining the button in the JogPanel.
+ */
+export interface JogPanelButtonDefinition {
+    icon: string;
+    alt: string;
+    action: JogPanelAction
+}
+
+/**
+ * Interface for the jog distance select button.
+ */
+interface JogDistanceItem {
+    name: string;
+    value: JogDistanceAction;
+}
+
+/**
+ * Interface for the jog speed select button.
+ */
+interface JogSpeedItem {
+    name: string;
+    value: JogSpeedAction;
+}
+
+/**
+ * Component properties of the directional pad.
+ */
+interface JogPanelProps {
+    onClicked?: (action: JogPanelAction) => void;
+    onJogDistanceChanged?: (action: JogDistanceAction) => void;
+    onJogSpeedChanged?: (action: JogSpeedAction) => void;
+    buttonDefinitions: (JogPanelButtonDefinition | undefined)[][] | undefined;
+    defaultJogDistance : JogDistanceAction;
+    defaultJogSpeed : JogSpeedAction;
+    showDistanceControl : boolean;
+    showSpeedControl : boolean;
+}
+
+
+interface JogPanelState {
+    jogDistance : JogDistanceAction,
+    jogSpeed : JogSpeedAction
+}
+
+
+/**
+ * A default jog button configuration for linear 3D motion.
+ */
+export const DefaultLinearJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
+    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+];
+
+/**
+ * A default jog button configuration for rotational 3D motion.
+ */
+export const DefaultRotationJogButtons : (JogPanelButtonDefinition | undefined)[][] = [
+    [{ icon: "pi", action: JogPanelAction.bPositive, alt: "Rot B Positive" }, { icon: "pi", action: JogPanelAction.cPositive, alt: "Rot C Positive" }, undefined],
+    [{ icon: "pi", action: JogPanelAction.aNegative, alt: "Rot A Negative" }, undefined, { icon: "pi", action: JogPanelAction.aPositive, alt: "Rot A Positive" }],
+    [undefined, { icon: "pi", action: JogPanelAction.cNegative, alt: "Rot C Negative" }, { icon: "pi ", action: JogPanelAction.bNegative, alt: "Rot B Negative" }],
+];
+
+/**
+ * Jogging panel that supports 3D motion. In 3D:
+ * - Z is Up and Down, 
+ * - Y is towards and away
+ * - X is left and right
+ * 
+ * This Jog Panel is based upon a standard CNC mill and industrial standards.
+ * 
+ * ## Parameters
+ * @param onClicked Callback any time a button is clicked. Includes argument for direction.
+ * @param buttonDefinitions A 3x3 matrix of (JogPanelButtonDefinition | undefined) that defines the button. If a button is undefined, it is disabled.
+ * 
+ * ## Button definitions
+ * 
+ * Example:
+ * ```
+ * export const kDefaultButtonDefinitions : (JogPanelButtonDefinition | undefined)[][] = [
+ *    [{ icon: "pi pi-arrow-up-left", action: JogPanelAction.yPositive, alt: "Y Positive" }, { icon: "pi pi-arrow-up", action: JogPanelAction.zPositive, alt: "Z Positive" }, undefined],
+ *    [{ icon: "pi pi-arrow-left", action: JogPanelAction.xNegative, alt: "X Negative" }, undefined, { icon: "pi pi-arrow-right", action: JogPanelAction.xPositive, alt: "X Positive" }],
+ *    [undefined, { icon: "pi pi-arrow-down", action: JogPanelAction.zNegative, alt: "Z Negative" }, { icon: "pi pi-arrow-down-right", action: JogPanelAction.yNegative, alt: "Y Negative" }],
+ * ];
+ * ```
+ * 
+ */
+export class JogPanel extends React.Component<JogPanelProps, JogPanelState> {
+
+    static defaultProps : JogPanelProps = {
+        onClicked: undefined,
+        onJogDistanceChanged: undefined,
+        buttonDefinitions: DefaultLinearJogButtons,
+        defaultJogDistance : JogDistanceAction.Short,
+        defaultJogSpeed : JogSpeedAction.Medium,
+        showDistanceControl : true,
+        showSpeedControl : true
+    };    
+
+
+    private jogDistanceItems: JogDistanceItem[] = [
+        {name: 'S', value: JogDistanceAction.Short},
+        {name: 'M', value: JogDistanceAction.Medium},
+        {name: 'L', value: JogDistanceAction.Long}
+    ];    
+
+    private jogSpeedItems: JogSpeedItem[] = [
+        {name: 'S', value: JogSpeedAction.Slow},
+        {name: 'M', value: JogSpeedAction.Medium},
+        {name: 'F', value: JogSpeedAction.Fast}
+    ];    
+
+
+    constructor(props: JogPanelProps) {
+        super(props);
+
+        this.state = {
+            jogDistance : props.defaultJogDistance,
+            jogSpeed : props.defaultJogSpeed
+        }
+    }
+
+
+    /**
+     * Handle a user action on the DirectionalPad
+     * @param action DirectionalPadAction
+     */
+    private handleClicked(action: JogPanelAction | undefined) {
+
+        if (action === undefined || action === null)
+            return;
+        
+        if (this.props.onClicked) {
+            this.props.onClicked(action);
+        }
+
+    };
+
+    /**
+     * The user has selected a different jog distance.
+     * @param {JogDistanceAction} action  The newly-selected distance.
+     */
+    private handleDistanceChanged(action : JogDistanceAction) {
+        this.setState({jogDistance: action});
+        if (this.props.onJogDistanceChanged) {
+            this.props.onJogDistanceChanged(action);
+        }
+    }
+
+    private handleSpeedChanged(action : JogSpeedAction) {
+        this.setState({jogSpeed: action});
+        if (this.props.onJogSpeedChanged) {
+            this.props.onJogSpeedChanged(action);
+        }
+    }    
+
+
+    emptyRow() {
+        return <div className="grid-row">
+            <div className="button-item empty-slot" />
+            <div className="button-item empty-slot" />
+            <div className="button-item empty-slot" />
+        </div>
+    }  
+    
+    private actionToIcon(action : JogPanelAction | undefined) {
+        if (action == JogPanelAction.Invalid) {
+            return <i/>
+        }
+        else if (action == JogPanelAction.Stop) {
+            return <i/>
+        }
+        else if (action == JogPanelAction.xNegative) {
+            return <i className="pi pi-arrow-left" />
+        }
+        else if (action == JogPanelAction.xPositive) {
+            return <i className="pi pi-arrow-right" />
+        }
+        else if (action == JogPanelAction.yNegative) {
+            return <i className="pi pi-arrow-up-left" />
+        }
+        else if (action == JogPanelAction.yPositive) {
+            return <i className="pi pi-arrow-down-right" />
+        }
+        else if (action == JogPanelAction.zNegative) {
+            return <i className="pi pi-up" />
+        }
+        else if (action == JogPanelAction.zPositive) {
+            return <i className="pi pi-down" />
+        }
+        else if (action == JogPanelAction.aNegative) {
+            return <RotationCcwA />
+        }
+        else if (action == JogPanelAction.aPositive) {
+            return <RotationCwA />
+        }
+        else if (action == JogPanelAction.bNegative) {
+            return <RotationCcwB />
+        }
+        else if (action == JogPanelAction.bPositive) {
+            return <RotationCwB />
+        }
+        else if (action == JogPanelAction.cNegative) {
+            return <RotationCcwC />
+        }
+        else if (action == JogPanelAction.cPositive) {
+            return <RotationCwC />
+        }
+        else {
+            return <i />
+        }
+
+    }
+
+    standardButton(row : number, col : number) {
+
+        if (this.props.buttonDefinitions !== undefined
+            && this.props.buttonDefinitions[row] !== undefined
+            && this.props.buttonDefinitions[row][col] !== undefined 
+            && this.props.buttonDefinitions[row][col]?.action !== undefined ) {
+
+            const action = this.props.buttonDefinitions[row][col]?.action;
+
+            if (action !== undefined && action < JogPanelAction.aPositive ) {
+                return <Button 
+                    key={`${row}-${col}`}
+                    icon={this.props.buttonDefinitions[row][col]?.icon} 
+                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
+                    onClick={() => this.handleClicked(action)}
+                    className="button-item" 
+                />        
+            }
+            else {
+                return <Button 
+                    key={`${row}-${col}`}                     
+                    tooltip={this.props.buttonDefinitions[row][col]?.alt} 
+                    onClick={() => this.handleClicked(action)}
+                    className="button-item" 
+                    icon={() => this.actionToIcon(action)}/>
+            }
+            
+        }
+        else {
+            return <Button icon="pi" key={`${row}-${col}`} disabled={true} className="button-item empty-slot" />
+        }
+
+
+    }
+
+    render() {
+
+
+        const distanceButtonTemplate = (option: JogDistanceItem) => {
+            if (option.value == JogDistanceAction.Short) {
+                return <JogShort className="distance-selector-button" width={16} height={16}     
+                    data-pr-tooltip="Short Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />
+            }
+            else if (option.value == JogDistanceAction.Medium) {
+                return <JogMedium className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Medium Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+            else {
+                return <JogLong className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Long Distance"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+         
+        }
+
+
+        const speedButtonTemplate = (option: JogSpeedItem) => {
+            if (option.value == JogSpeedAction.Slow) {
+                return <SpeedSlow className="distance-selector-button" width={16} height={16}     
+                    data-pr-tooltip="Slow Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />
+            }
+            else if (option.value == JogSpeedAction.Medium) {
+                return <SpeedMedium className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Medium Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+            else {
+                return <SpeedFast className="distance-selector-button" width={16} height={16}
+                    data-pr-tooltip="Fast Speed"
+                    data-pr-position="bottom" 
+                    fill="white"
+                />;
+            }
+         
+        }
+                
+        // const jogButtonTemplate = (option: JogDistanceItem) => {
+        //     if (option.value == JogDistanceAction.Short) {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0"/>
+        //             </svg>;
+        //     }
+        //     else if (option.value == JogDistanceAction.Medium) {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Z"/>
+        //             </svg>;
+        //     }
+        //     else {
+        //         return <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="24" fill="white">
+        //                 <path d="M800-80v-800h80v800h-80ZM560-280v-400h120v400H560Zm-240 0v-400h120v400H320Zm-240 0v-400h120v400H320Z"/>
+        //             </svg>;
+        //     }            
+        // }
+
+        return (
+            <div className="jogpanel-container">
+                <Tooltip target=".distance-selector-button" />
+
+                <div className="grid-container">
+                    <div key="0" className="grid-row">
+                        {this.standardButton(0,0)}
+                        {this.standardButton(0,1)}
+                        {this.standardButton(0,2)}
+                    </div>
+                    <div key="1" className="grid-row">
+                        {this.standardButton(1,0)}
+                        {this.standardButton(1,1)}
+                        {this.standardButton(1,2)}
+                    </div>
+                    <div key="2" className="grid-row">
+                        {this.standardButton(2,0)}
+                        {this.standardButton(2,1)}
+                        {this.standardButton(2,2)}
+                    </div>
+                </div>                
+
+                { this.props.showDistanceControl &&
+                    <div className="distance-selector p-inputgroup flex-1">                    
+                        <span className="p-inputgroup-addon">
+                            <Distance width={16} height={16} fill="white" />
+                        </span>
+                        <SelectButton 
+                            value={this.state.jogDistance} 
+                            onChange={(e) => this.handleDistanceChanged(e.value)} 
+                            optionLabel="name" 
+                            options={this.jogDistanceItems} 
+                            allowEmpty={false}
+                            itemTemplate={distanceButtonTemplate}
+                        />                
+                    </div>       
+                }
+                
+                {this.props.showSpeedControl && 
+                    <div className="distance-selector p-inputgroup flex-1">                    
+                        <span className="p-inputgroup-addon">
+                            <Speed width={16} height={16} fill="white" />
+                        </span>
+                        <SelectButton 
+                            value={this.state.jogSpeed} 
+                            onChange={(e) => this.handleSpeedChanged(e.value)} 
+                            optionLabel="name" 
+                            options={this.jogSpeedItems} 
+                            allowEmpty={false}
+                            itemTemplate={speedButtonTemplate}
+                        />                
+                    </div>    
+                }
+
+            </div>
+        );
+    }
+};
+
+export default JogPanel;
+
+