Merge branch 'Homing' into dev

# Conflicts:
#	src/app/src/application.css

src/app/src/features/DRO/component/AxisRow.tsx

@@ -1,31 +1,52 @@
-import {Axis, handleManualOffset} from 'app/features/DRO/utils/DRO.ts';
+import {
+    Axis,
+    handleManualOffset,
+    homeAxis,
+} from 'app/features/DRO/utils/DRO.ts';
 import { Button } from 'app/components/Button';
 import { zeroWCS, gotoZero } from '../utils/DRO.ts';
 import { WCSInput } from 'app/features/DRO/component/WCSInput.tsx';
 
 interface AxisRowProps {
     axis: Axis;
-    mpos: number;
-    wpos: number;
+    mpos: string;
+    wpos: string;
     disabled: boolean;
-    key: string
+    key: string;
+    homingMode: boolean;
 }
 
-export function AxisRow({ axis, mpos, wpos, disabled }: AxisRowProps) {
+export function AxisRow({
+    axis,
+    mpos,
+    wpos,
+    disabled,
+    homingMode,
+}: AxisRowProps) {
     return (
         <div className="border border-gray-200 rounded w-full flex flex-row items-stretch justify-between flex-1">
             <Button
                 onClick={() => {
-                    zeroWCS(axis, 0);
+                    if (homingMode) {
+                        homeAxis(axis);
+                    } else {
+                        zeroWCS(axis, 0);
+                    }
                 }}
                 disabled={disabled}
+                color={homingMode ? 'alt' : 'secondary'}
             >
-                <span className="font-bold font-mono text-xl text-slate-800">
+                <span className="font-bold font-mono text-xl transition-all transition-duration-300">
                     {axis}
                 </span>
             </Button>
 
-            <WCSInput disabled={disabled} value={wpos} axis={axis} movementHandler={handleManualOffset}/>
+            <WCSInput
+                disabled={disabled}
+                value={wpos}
+                axis={axis}
+                movementHandler={handleManualOffset}
+            />
 
             <span className="font-mono flex items-center text-gray-600 w-[9ch] text-center">
                 {mpos}

src/app/src/features/DRO/component/HomingSwitch.tsx

@@ -0,0 +1,28 @@
+import Switch from 'app/components/Switch';
+import Button from 'app/components/Button';
+import { homeMachine } from 'app/features/DRO/utils/DRO.ts';
+
+interface HomingSwitchProps {
+    onChange: () => void;
+    homingValue: boolean;
+    disabled: boolean;
+}
+
+export function HomingSwitch({
+    onChange,
+    homingValue,
+    disabled,
+}: HomingSwitchProps) {
+    return (
+        <>
+            <Switch
+                onChange={onChange}
+                checked={homingValue}
+                disabled={disabled}
+            />
+            <Button color="alt" onClick={homeMachine} disabled={disabled}>
+                Home
+            </Button>
+        </>
+    );
+}

src/app/src/features/DRO/component/RapidPositionButtons.tsx

@@ -0,0 +1,68 @@
+import blVector from '../assets/bl.svg';
+import brVector from '../assets/br.svg';
+import frVector from '../assets/fr.svg';
+import flVector from '../assets/fl.svg';
+import controller from 'app/lib/controller.ts';
+import { useSelector } from 'react-redux';
+import { RootState } from 'app/store/redux';
+import {
+    BACK_LEFT,
+    BACK_RIGHT,
+    FRONT_LEFT,
+    FRONT_RIGHT,
+    getMovementGCode,
+} from 'app/features/DRO/utils/RapidPosition';
+import get from 'lodash/get';
+
+export function RapidPositionButtons() {
+    const homingFlag = useSelector(
+        (state: RootState) => state.controller.homingFlag,
+    );
+    const homingDirection = useSelector((state: RootState) => {
+        return get(state, 'controller.settings.settings.$23', '0');
+    });
+    const pullOff = useSelector((state: RootState) => {
+        return get(state, 'controller.settings.settings.$27', 1);
+    });
+
+    function jogToCorner(corner: string) {
+        const gcode = getMovementGCode(
+            corner,
+            homingDirection,
+            homingFlag,
+            Number(pullOff),
+        );
+        controller.command('gcode', gcode);
+    }
+
+    return (
+        <div className=" absolute justify-center items-center -top-1 left-1/2 -translate-x-1/2 text-blue-500">
+            <div className="grid grid-cols-2 text-3xl gap-2 font-bold">
+                <button
+                    className="w-8 h-6"
+                    onClick={() => jogToCorner(BACK_LEFT)}
+                >
+                    <img src={blVector} alt="Back Left Rapid Position Icon" />
+                </button>
+                <button
+                    className="w-8 h-6"
+                    onClick={() => jogToCorner(BACK_RIGHT)}
+                >
+                    <img src={brVector} alt="Back Right Rapid Position Icon" />
+                </button>
+                <button
+                    className="w-8 h-6"
+                    onClick={() => jogToCorner(FRONT_LEFT)}
+                >
+                    <img src={flVector} alt="Front Right Rapid Position Icon" />
+                </button>
+                <button
+                    className="w-8 h-6"
+                    onClick={() => jogToCorner(FRONT_RIGHT)}
+                >
+                    <img src={frVector} alt="Front Left Rapid Position Icon" />
+                </button>
+            </div>
+        </div>
+    );
+}

src/app/src/features/DRO/component/WCSInput.tsx

@@ -2,14 +2,14 @@ import React, { useRef } from 'react';
 import { Axis } from 'app/features/DRO/utils/DRO.ts';
 
 export interface WCSInputProps {
-    value: number;
+    value: string;
     disabled?: boolean;
     movementHandler?: (t: string | number, s: Axis) => void;
     axis: Axis;
 }
 
 export function WCSInput({
-    value = 0,
+    value = '0.00',
     disabled = false,
     movementHandler,
     axis,

src/app/src/features/DRO/index.tsx

@@ -24,8 +24,10 @@ import {
 } from 'app/constants';
 import { mapValues } from 'lodash';
 import { mapPositionToUnits } from 'app/lib/units.ts';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import includes from 'lodash/includes';
+import { HomingSwitch } from 'app/features/DRO/component/HomingSwitch.tsx';
+import { RapidPositionButtons } from 'app/features/DRO/component/RapidPositionButtons.tsx';
 
 interface DROProps {
     axes: AxesArray;
@@ -49,7 +51,14 @@ function DRO({
     isConnected,
     activeState,
     preferredUnits,
+    homingEnabled,
 }: DROProps): JSX.Element {
+    const [homingMode, setHomingMode] = useState<boolean>(false);
+
+    function toggleHoming() {
+        setHomingMode(!homingMode);
+    }
+
     const canClick = useCallback((): boolean => {
         if (!isConnected) return false;
         if (workflowState === WORKFLOW_STATE_RUNNING) return false;
@@ -69,46 +78,51 @@ function DRO({
 
     return (
         <div>
-            <div className="w-full min-h-10 flex flex-row-reverse align-bottom justify-between mb-2 px-4">
+            <div className="w-full min-h-10 flex flex-row-reverse align-bottom justify-between mb-2 px-4 relative">
                 <GoTo wpos={wpos} units={unitLabel} disabled={!canClick} />
+                {homingEnabled && <RapidPositionButtons />}
                 {/*homingEnabled && (
                     <IconButton icon={<LuParkingSquare />} color="primary" />
                     // Leaving this commented out for the time being since parking is not implemented as a feature yet
                 )*/}
             </div>
             <div className="w-full flex flex-row justify-between px-3">
-                <Label>Set</Label>
+                <Label>{homingMode ? 'Home' : 'Zero'}</Label>
                 <Label>Go</Label>
             </div>
             <div className="flex flex-col w-full gap-1 space-between">
                 <AxisRow
                     axis={'X'}
                     key={'X'}
-                    mpos={Number(mpos.x)}
-                    wpos={Number(wpos.x)}
+                    mpos={mpos.x}
+                    wpos={wpos.x}
                     disabled={!canClick}
+                    homingMode={homingMode}
                 />
                 <AxisRow
                     axis={'Y'}
                     key={'Y'}
-                    mpos={Number(mpos.y)}
-                    wpos={Number(wpos.y)}
+                    mpos={mpos.y}
+                    wpos={wpos.y}
                     disabled={!canClick}
+                    homingMode={homingMode}
                 />
                 <AxisRow
                     axis={'Z'}
                     key={'Z'}
-                    mpos={Number(mpos.z)}
-                    wpos={Number(wpos.z)}
+                    mpos={mpos.z}
+                    wpos={wpos.z}
                     disabled={!canClick}
+                    homingMode={homingMode}
                 />
                 {axes.includes('A') && (
                     <AxisRow
                         axis={'A'}
                         key={'a'}
-                        mpos={Number(mpos.a)}
-                        wpos={Number(wpos.a)}
+                        mpos={mpos.a}
+                        wpos={wpos.a}
                         disabled={!canClick}
+                        homingMode={homingMode}
                     />
                 )}
             </div>
@@ -120,6 +134,14 @@ function DRO({
                 >
                     Zero
                 </IconButton>
+                {homingEnabled && (
+                    <HomingSwitch
+                        onChange={toggleHoming}
+                        homingValue={homingMode}
+                        disabled={!canClick}
+                    />
+                )}
+
                 <Button color="alt" onClick={goXYAxes} disabled={!canClick}>
                     <span className="font-mono text-lg">XY</span>
                 </Button>

src/app/src/features/DRO/utils/DRO.ts

@@ -100,3 +100,11 @@ export function handleManualOffset(value: string | number, axis: Axis) {
     const command = `G10 P0 L20 ${axis.toUpperCase()}${offset}`;
     controller.command('gcode:safe', command, modal);
 }
+
+export function homeMachine() {
+    controller.command('gcode', '$H');
+}
+
+export function homeAxis(axis: string) {
+    controller.command('gcode', `$H${axis}`);
+}