Merge remote-tracking branch 'origin/dev' into dev

Sienci-Labs · Oct 16, 2024 · d3b2e64 · d3b2e64
2 parents 555ab1f + 3525e5c
commit d3b2e64
Show file tree

Hide file tree

Showing 10 changed files with 208 additions and 160 deletions.
diff --git a/src/app/src/application.css b/src/app/src/application.css
@@ -1,5 +1,111 @@
-/*
-! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(52 109 202 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(52 109 202 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -390,117 +496,9 @@ video {
 }
 
 /* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
+[hidden]:where(:not([hidden="until-found"])) {
   display: none;
 }
-
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(52 109 202 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(52 109 202 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
 .\!container {
   width: 100% !important;
 }

diff --git a/src/app/src/features/Connection/components/ConnectionInfo.tsx b/src/app/src/features/Connection/components/ConnectionInfo.tsx
@@ -1,5 +1,7 @@
+import {FirmwareFlavour} from "app/features/Connection";
+
 interface ConnectionInfoProps {
-    firmwareType: "grblHAL" | "grbl"
+    firmwareType: FirmwareFlavour
     port: string
 }
 

diff --git a/src/app/src/features/Connection/components/PortListings.tsx b/src/app/src/features/Connection/components/PortListings.tsx
@@ -33,17 +33,21 @@ export function PortListings(props: PortListingsProps): JSX.Element {
                     </div>
                 </button>
             ))}
-            <div className="px-4 shadow-inner py-4 flex flex-row items-center justify-between hover:bg-gray-50 mt-1">
+            {
+                props.selectedFirmware === 'grblHAL' &&
+                <div
+                    className="px-4 shadow-inner py-4 flex flex-row items-center justify-between hover:bg-gray-50 mt-1">
                 <span className="text-4xl">
-                    <BsEthernet />
+                    <BsEthernet/>
                 </span>
-                <div className="flex flex-col gap-1 text-right">
-                    <span>192.168.5.1</span>
-                    <span className="text-sm text-gray-600 font-normal">
+                    <div className="flex flex-col gap-1 text-right">
+                        <span>192.168.5.1</span>
+                        <span className="text-sm text-gray-600 font-normal">
                         Ethernet on port 23
                     </span>
+                    </div>
                 </div>
-            </div>
+            }
             <FirmwareSelector
                 selectedFirmware={props.selectedFirmware}
                 onClick={props.onFirmwareClick}

diff --git a/src/app/src/features/Connection/index.tsx b/src/app/src/features/Connection/index.tsx
@@ -98,7 +98,6 @@ function Connection(props: ConnectionProps) {
     }
 
     function onSelectFirmware(type: FirmwareFlavour) {
-        console.log('CLICKED');
         setFirmware(type);
         // TODO: Update saved value;
         store.set('widgets.connection.controller.type', type);
@@ -131,7 +130,7 @@ function Connection(props: ConnectionProps) {
                     <span>Unable to connect.</span>
                 )}
                 {connectionState == ConnectionState.CONNECTED && (
-                    <ConnectionInfo port={activePort} firmwareType="grblHAL" />
+                    <ConnectionInfo port={activePort} firmwareType={firmware} />
                 )}
                 {(connectionState == ConnectionState.DISCONNECTED ||
                     connectionState === ConnectionState.ERROR) && (

diff --git a/src/app/src/features/DRO/component/AxisRow.tsx b/src/app/src/features/DRO/component/AxisRow.tsx
@@ -1,4 +1,4 @@
-import { Axis } from 'app/features/DRO/utils/DRO.ts';
+import {Axis, handleManualOffset} 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';
@@ -8,6 +8,7 @@ interface AxisRowProps {
     mpos: number;
     wpos: number;
     disabled: boolean;
+    key: string
 }
 
 export function AxisRow({ axis, mpos, wpos, disabled }: AxisRowProps) {
@@ -24,7 +25,7 @@ export function AxisRow({ axis, mpos, wpos, disabled }: AxisRowProps) {
                 </span>
             </Button>
 
-            <WCSInput disabled={disabled} value={wpos} />
+            <WCSInput disabled={disabled} value={wpos} axis={axis} movementHandler={handleManualOffset}/>
 
             <span className="font-mono flex items-center text-gray-600 w-[9ch] text-center">
                 {mpos}

diff --git a/src/app/src/features/DRO/component/WCSInput.tsx b/src/app/src/features/DRO/component/WCSInput.tsx
@@ -1,26 +1,31 @@
 import React, { useRef } from 'react';
+import {Axis} from "app/features/DRO/utils/DRO.ts";
 
 export interface WCSInputProps {
     value: number;
     disabled?: boolean;
-    movementHandler?: (t: string | number) => void;
+    movementHandler?: (t: string | number, s: Axis) => void;
+    axis: Axis
 }
 
 export function WCSInput({
     value = 0,
     disabled = false,
     movementHandler,
+    axis
 }: WCSInputProps) {
-    const inputRef = useRef<HTMLInputElement>(null);
+    const inputRef = useRef<HTMLInputElement>();
+
 
     const onKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter') {
             const inputValue = Number(inputRef.current.value);
+
             if (Number.isNaN(inputValue)) {
-                movementHandler(value);
+                movementHandler(value, axis);
             }
 
-            movementHandler(inputValue);
+            movementHandler(inputValue, axis);
             return;
         }
         if (e.key === 'Escape') {
@@ -31,21 +36,18 @@ export function WCSInput({
     const onBlur = () => {
         inputRef.current.value = String(value);
     };
-    const onChange = () => {};
 
     return (
-        <>
+        <div key={`wcs-${axis}-${value}`}>
             <input
                 type="number"
-                value={value}
                 defaultValue={value}
                 disabled={disabled}
                 ref={inputRef}
                 onBlur={onBlur}
                 onKeyDown={onKeyPress}
-                onChange={onChange}
                 className="text-xl flex items-center text-blue-500 font-bold font-mono w-[9ch] p-0 m-0 text-center border-none bg-gray-100 outline-none focus:bg-white"
             />
-        </>
+        </div>
     );
 }