@adcops/autocore-react 3.0.20 → 3.0.21

package/dist/components/FileList.d.ts

@@ -6,6 +6,9 @@
  * using specific commands via websockets.
  */
 import React from 'react';
+/**
+ * Defines properties for the file list.
+ */
 /**
  * Defines properties for the file list.
  */
@@ -13,6 +16,36 @@ type FileListProps = {
     domain?: string;
     enableUpload?: boolean;
     subdir?: string;
+    /**
+     * A comma-separated list of file MIME types or file extensions.
+     * Default: .json
+     *
+     * ### Example: Filter by Extension:
+     * ```
+     * accept=".jpg,.png,.pdf"  // Restricts uploads to JPG, PNG, and PDF files only
+     * ```
+     *
+     * ### Example: Filter by mime type.
+     * ```
+     * accept="image/*,application/pdf"  // Allows any image type and PDF files
+     * ```
+     *
+     * ### Example: All files
+     * ```
+     * accept="/*"
+     * ```
+     *
+     */
+    filter?: string;
+    /**
+     * Callback when an operation completes successfully.
+     * @returns void
+     */
+    onSuccess?: (message: string) => void;
+    /***
+     * Callback when an operation results in an error.
+     */
+    onError?: (message: string) => void;
 };
 /**
  * `FileList` is a React functional component that displays a list of files retrieved from a specified domain

package/dist/components/FileList.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{MessageSeverity}from"primereact/api";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:a})=>{const{invoke:o,dispatch:r}=useContext(EventEmitterContext),[i,s]=useState(),n=async()=>{try{const t=void 0!==a?{subdir:a}:{};let r=await o(e,"list_files",t),i=[];for(let e=0;e<r.data.length;++e){const t=r.data[e];i.push({id:e+1,name:t})}s(i)}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed to upload file list: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}},l=`File Listing [/${void 0!==a?a:""}]`,c=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:l})}),m=_jsxs(React.Fragment,{children:[t&&_jsx(Button,{icon:"pi pi-upload",className:"p-button-rounded p-mr-2","aria-label":"Upload",size:"small",rounded:!0,text:!0}),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{n()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),p=(t,a)=>{confirmPopup({target:a.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{try{await o(e,"delete_file",{file_name:t})}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed deleting file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}n()})(t.name)})};return useEffect((()=>(n(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:c,end:m,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:i,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{try{await o(e,"download_file",{file_name:t.name})}catch(e){r({topic:"autocore-react/alert/error",payload:{message:`Failed to downloading file: ${e}`,timeoutSec:7,severity:MessageSeverity.ERROR}})}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>p(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;
+import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";import React,{useState,useContext,useEffect}from"react";import{DataTable}from"primereact/datatable";import{Column}from"primereact/column";import{Toolbar}from"primereact/toolbar";import{Button}from"primereact/button";import{ConfirmPopup,confirmPopup}from"primereact/confirmpopup";import{FileUpload}from"primereact/fileupload";import{EventEmitterContext}from"../core/EventEmitterContext";export const FileList=({domain:e="DATASTORE",enableUpload:t=!1,subdir:o,filter:a=".json",onSuccess:n,onError:i})=>{const[r,l]=useState(0),{invoke:s}=useContext(EventEmitterContext),[c,m]=useState(),d=e=>null!==e?void 0!==o?`${o}/${e}`:e:"",p=async()=>{try{const t=void 0!==o?{subdir:o}:{};let a=await s(e,"list_files",t),n=[];for(let e=0;e<a.data.length;++e){const t=a.data[e];n.push({id:e+1,name:t})}m(n)}catch(e){i&&i(`Failed to upload file list: ${e}`)}};const u=()=>{l((e=>e+1))},f=`File Listing [/${void 0!==o?o:""}]`,x=_jsx(React.Fragment,{children:_jsx("span",{style:{fontWeight:600},children:f})}),b=_jsxs(React.Fragment,{children:[t&&_jsx(FileUpload,{customUpload:!0,auto:!0,uploadHandler:async t=>{const o=t.files[0];let a=d(o.name);const r=new FileReader;r.onload=async t=>{const r=t.target?.result,l=function c(e){let t="",o=new Uint8Array(e),a=o.byteLength;for(let e=0;e<a;e++)t+=String.fromCharCode(o[e]);return window.btoa(t)}(r);try{await s(e,"write_file",{file_name:a,value:l}),n&&n(`Uploaded file ${o.name}`),p()}catch(e){i&&i(`Failed to upload file: ${e}`)}u()},r.onerror=e=>{i&&i(`Error reading file: ${e}`)},r.readAsArrayBuffer(o)},accept:a,maxFileSize:25e3,mode:"basic",chooseLabel:"",chooseOptions:{icon:"pi pi-upload",className:"p-button-icon-only p-button-text p-button-rounded p-mr-2"}},r),_jsx(Button,{icon:"pi pi-refresh",onClick:()=>{p()},className:"p-button-rounded p-mr-2","aria-label":"Refresh",size:"small",rounded:!0,text:!0})]}),_=(t,o)=>{confirmPopup({target:o.currentTarget,message:`Are you want to delete file ${t.name}?\nWARNING: This cannot be undone.`,icon:"pi pi-info-circle",defaultFocus:"reject",acceptClassName:"p-button-danger",accept:()=>(async t=>{let o=d(t);try{await s(e,"delete_file",{file_name:o}),n&&n(`Deleted file: ${t}`),p()}catch(e){i&&i(`Failed to delete file: ${e}`)}p()})(t.name)})};return useEffect((()=>(p(),()=>{})),[e,t]),_jsxs("div",{children:[_jsx(Toolbar,{start:x,end:b,style:{padding:"1mm"}}),_jsx(ConfirmPopup,{}),_jsxs(DataTable,{value:c,children:[_jsx(Column,{field:"name",header:"Name"}),_jsx(Column,{body:t=>_jsxs(_Fragment,{children:[_jsx(Button,{icon:"pi pi-download",onClick:()=>(async t=>{let o=d(t.name);try{await s(e,"download_file",{file_name:o}),n&&n(`Downloaded file: ${t.name}`)}catch(e){i&&i(`Failed downloading file: ${e}`)}})(t),className:"p-button-rounded p-button-success p-mr-2",style:{marginRight:"2mm"},size:"small"}),_jsx(Button,{icon:"pi pi-trash",onClick:e=>_(t,e),className:"p-button-rounded p-button-danger",size:"small"})]}),header:"Actions"})]})]})};export default FileList;

package/dist/components/ValueDisplay.d.ts

@@ -59,9 +59,55 @@ interface State {
     fontSize?: string;
 }
 /**
- * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
- * This component adjusts its display based on the provided properties, including positioning and styling adjustments
- * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ * `ValueDisplay` is a React component designed to display a value which can be a string, number, or null.
+ * It supports formatting numeric values using the `numerableFormat` function, and is capable of dynamic positioning
+ * and sizing within its parent container. The component integrates with an `EventEmitterContext` to listen for
+ * updates to its value based on a specified topic, making it ideal for real-time data display scenarios.
+ *
+ * The component can be absolutely positioned based on `x` and `y` props, and its size can be adjusted using
+ * `width` and `height` props. If `useAbsolutePositioning` is true, it will position itself based on the provided
+ * coordinates; otherwise, it will position relatively.
+ *
+ * ### Props:
+ * - `value`: The initial value to display, which can be updated via props or context events.
+ * - `x`, `y`: Coordinates for absolute positioning within the parent container.
+ * - `width`, `height`: Dimensions of the component. If height is not provided, it defaults to the width.
+ * - `format`: A string specifying the format for numeric values (see numerable.js documentation for format strings).
+ * - `formatOptions`: Additional formatting options as per numerable.js.
+ * - `className`: Custom class for CSS styling.
+ * - `useAbsolutePositioning`: Boolean to toggle absolute positioning.
+ * - `topic`: Optional string to subscribe to context updates for dynamic value changes.
+ *
+ * ### Usage Example:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { ValueDisplay } from './components/ValueDisplay';
+ *
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <ValueDisplay
+ *         value={1234.56}
+ *         x={100}
+ *         y={200}
+ *         width={150}
+ *         height={50}
+ *         format="0,0.00"
+ *         className="numeric-display"
+ *         useAbsolutePositioning={true}
+ *         topic="priceUpdate"
+ *       />
+ *     </div>
+ *   );
+ * };
+ *
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * In this example, `ValueDisplay` is used to show a numeric value formatted as a string with two decimal places.
+ * It is positioned absolutely at coordinates (100, 200) with a specified width and height. The component listens
+ * for updates on the "priceUpdate" topic to dynamically update its displayed value.
  */
 declare class ValueDisplay extends Component<Props, State> {
     /** Defines the context type to subscribe to changes using EventEmitter. */

package/dist/components/ValueDisplay.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay extends Component{constructor(e){super(e),Object.defineProperty(this,"unsubscribeTopicId",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.state={subscribedValue:e.value,fontSize:"100%"}}componentDidMount(){const{topic:e}=this.props;if(e){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:c}=this.state,{scale:u,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:c&&u>1?100*u+"%":c,top:a&&t?`${b+u*t}px`:void 0,left:a&&e?`${p+u*e}px`:void 0,width:i?i*u+"px":void 0,height:s?s*u+"px":void 0,lineHeight:s?s*u+"px":void 0,whiteSpace:"nowrap"};return _jsx("div",{className:clsx(n),style:m,children:numerableFormat(l,o,r)})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};
+import{jsx as _jsx}from"react/jsx-runtime";import{Component}from"react";import{format as numerableFormat}from"numerable";import clsx from"clsx";import{EventEmitterContext}from"../core/EventEmitterContext";class ValueDisplay extends Component{constructor(e){super(e),Object.defineProperty(this,"unsubscribeTopicId",{enumerable:!0,configurable:!0,writable:!0,value:null}),this.state={subscribedValue:e.value,fontSize:"100%"}}componentDidMount(){const{topic:e}=this.props;if(e){const{subscribe:t}=this.context;this.unsubscribeTopicId=t(e,(e=>{this.setState({subscribedValue:e})}))}}componentDidUpdate(e){this.props.value!==e.value&&this.setState({subscribedValue:this.props.value})}componentWillUnmount(){if(this.unsubscribeTopicId){const{unsubscribe:e}=this.context;e(this.unsubscribeTopicId)}}render(){const{x:e,y:t,width:i,height:s,format:o,formatOptions:r,className:n,useAbsolutePositioning:a}=this.props,{subscribedValue:l,fontSize:u}=this.state,{scale:c,xOffset:p,yOffset:b}=this.context,m={position:a?"absolute":"relative",display:a?"":"inline-block",verticalAlign:"middle",fontSize:u&&c>1?100*c+"%":u,top:a&&t?`${b+c*t}px`:void 0,left:a&&e?`${p+c*e}px`:void 0,width:i?i*c+"px":void 0,height:s?s*c+"px":void 0,lineHeight:s?s*c+"px":void 0,whiteSpace:"nowrap"};let d;return d="number"==typeof l||"string"==typeof l&&!isNaN(Number(l))?numerableFormat(l,o,r):l,_jsx("div",{className:clsx(n),style:m,children:d})}}Object.defineProperty(ValueDisplay,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:EventEmitterContext});export{ValueDisplay};

package/dist/hooks/adsHooks.d.ts

@@ -66,6 +66,55 @@ export declare const useAdsRegisterSymbols: (setters: Record<string, (value: any
  * };
  */
 export declare function useAdsWriteValue(symbolName: string): (value: object | boolean | number | string) => Promise<void>;
+/**
+ * useAdsWriteScaledValue is a custom React hook that enables writing scaled numerical values to a backend system.
+ * It applies a specified scale and offset to a numeric value before sending it over an ADS connection.
+ * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
+ * scale factors before being persisted or processed by a backend system.
+ *
+ * @param symbolName The symbol name in the backend system where the value will be written.
+ * @param scale The scale factor to be applied to the value.
+ * @param offset The offset to be applied after scaling the value.
+ * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
+ *
+ * @example
+ * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
+ * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
+ * based on a dynamic scale factor managed in the component's state.
+ *
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { useAdsWriteScaledValue } from './hooks';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *     const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
+ *     const [offset, setOffset] = useState<number>(0); // No offset by default.
+ *
+ *     // The hook is used here with the scale and offset state variables.
+ *     const writeMeasurement = useAdsWriteScaledValue("GIO.axisX.position", scale, offset);
+ *
+ *     // This function is called when the input field value changes.
+ *     const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *         const valueInInches = parseFloat(event.target.value);
+ *         writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
+ *     };
+ *
+ *     return (
+ *         <div>
+ *             <label>Enter measurement in inches:</label>
+ *             <input type="number" onChange={handleMeasurementChange} />
+ *         </div>
+ *     );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
+ * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
+ * dynamically if needed, for instance, based on user selection or other external configurations.
+ */
+export declare function useAdsWriteScaledValue(symbolName: string, scale: number, offset: number): (value: number) => Promise<void>;
 /**
  * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
  * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.

package/dist/hooks/adsHooks.js

@@ -1 +1 @@
-import{useContext,useRef,useEffect}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t)=>{const{invoke:n,subscribe:r,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),u=useRef([]),c=useRef(!0);return useEffect((()=>{c.current=!0;const a=async()=>{for(const[s,o]of Object.entries(t))try{await n("ADS","register_symbol",{symbol_name:o});const t=r(`ADS/${o}`,(t=>{if(c.current){const n=e[s];n&&n(t.value)}}));u.current.push(t)}catch(e){}await n("ADS","refresh",{})};if(o())a();else{let e=r("HUB/connected",(()=>{a(),s(e)}));u.current.push(e)}return()=>{c.current=!1,u.current.forEach((e=>s(e))),u.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}
+import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useAdsRegisterSymbols=(e,t)=>{const{invoke:n,subscribe:r,unsubscribe:s,isConnected:o}=useContext(EventEmitterContext),u=useRef([]),c=useRef(!0);return useEffect((()=>{c.current=!0;const a=async()=>{for(const[s,o]of Object.entries(t))try{await n("ADS","register_symbol",{symbol_name:o});const t=r(`ADS/${o}`,(t=>{if(c.current){const n=e[s];n&&n(t.value)}}));u.current.push(t)}catch(e){}await n("ADS","refresh",{})};if(o())a();else{let e=r("HUB/connected",(()=>{a(),s(e)}));u.current.push(e)}return()=>{c.current=!1,u.current.forEach((e=>s(e))),u.current=[]}}),[]),null};export function useAdsWriteValue(e){const{invoke:t}=useContext(EventEmitterContext);return async n=>{try{await t("ADS","write_value",{symbol_name:e,value:n})}catch(e){}}}export function useAdsWriteScaledValue(e,t,n){const{invoke:r}=useContext(EventEmitterContext);return useCallback((async s=>{const o=(s-n)/t;try{await r("ADS","write_value",{symbol_name:e,value:o})}catch(e){}}),[e,t,n,r])}export function useAdsTapValue(e){const{invoke:t}=useContext(EventEmitterContext),n="write_value";return async()=>{try{await t("ADS",n,{symbol_name:e,value:!0}),await sleep(300),await t("ADS",n,{symbol_name:e,value:!1})}catch(e){}}}

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useAdsRegisterSymbols, useAdsWriteValue, useAdsTapValue } from "./adsHooks";
+export { useScaledValue, kMillimeters2Inches } from './useScaledValue';

package/dist/hooks/index.js

@@ -0,0 +1 @@
+export{useAdsRegisterSymbols,useAdsWriteValue,useAdsTapValue}from"./adsHooks";export{useScaledValue,kMillimeters2Inches}from"./useScaledValue";

package/dist/hooks/useScaledValue.d.ts

@@ -0,0 +1,57 @@
+export declare const kMillimeters2Inches: number;
+type UseScaledValueReturn = [number, (newValue: number) => void];
+/**
+ * A custom React hook for converting values between different scales,
+ * with support for dynamically updating the scale and offset. This hook manages values
+ * in a base unit and allows for easy conversion to a display unit, updating
+ * reactively to changes in the conversion factors.
+ *
+ * @param initialValue - The initial value in the base unit.
+ * @param scale - The dynamic scale factor used for conversion to the display unit.
+ * @param offset - An optional offset applied after scaling (default is 0).
+ * @returns A tuple containing the display value and a setter function for updating
+ * the value in the display unit.
+ *
+ * @example
+ * Here's how to use `useScaledValue` in a component that fetches a scale factor from a backend
+ * and allows the user to input values in a converted scale, which are then handled in a base unit:
+ *
+ * ```tsx
+ * import React, { useState, useEffect } from 'react';
+ * import { useScaledValue } from './hooks/useScaledValue';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *   const [units, setUnits] = useState<number>(1); // Start with a default scale of 1
+ *   const [xPosition, setXPosition] = useScaledValue(0, units);
+ *
+ *   useEffect(() => {
+ *     async function fetchScale() {
+ *       try {
+ *         // Simulate fetching scale factor from a backend
+ *         const res = await invoke("GNV", "read_value", { group: "ux", key: "kSelectedUnits" });
+ *         setUnits(res.data); // Update scale based on backend response
+ *       } catch (error) {
+ *         console.error('Failed to fetch units', error);
+ *       }
+ *     }
+ *     fetchScale();
+ *   }, []);
+ *
+ *   return (
+ *     <input
+ *       type="number"
+ *       value={xPosition.toFixed(2)} // Display the value formatted to 2 decimal places
+ *       onChange={(e) => setXPosition(parseFloat(e.target.value))}
+ *     />
+ *   );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this example, `useScaledValue` is used to manage a measurement input in a dynamic unit system.
+ * The component fetches the conversion scale from the backend upon component mounting and updates the
+ * input display accordingly. The user's input is converted back to the base unit before being processed.
+ */
+export declare function useScaledValue(initialValue: number, scale: number, offset?: number): UseScaledValueReturn;
+export {};

package/dist/hooks/useScaledValue.js

@@ -0,0 +1 @@
+import{useCallback,useState}from"react";export const kMillimeters2Inches=1/25.4;export function useScaledValue(e,t,a=0){const[s,c]=useState(e*t+a);return[s,useCallback((e=>{c(e*t+a)}),[t,a])]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@adcops/autocore-react",
-    "version": "3.0.20",
+    "version": "3.0.21",
     "description": "A React component library for industrial user interfaces.",
     "private": false,
     "type": "module",

package/src/components/FileList.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-24 16:01:53
  * -----
- * Last Modified: 2024-04-29 11:01:41
+ * Last Modified: 2024-05-02 11:18:50
  * -----
  * 
  */
@@ -21,10 +21,14 @@ import { Column } from 'primereact/column';
 import { Toolbar } from 'primereact/toolbar';
 import { Button } from 'primereact/button';
 import { ConfirmPopup, confirmPopup } from 'primereact/confirmpopup';
-import { MessageSeverity } from 'primereact/api';
+import { FileUpload, FileUploadHandlerEvent} from 'primereact/fileupload';
 
 import { EventEmitterContext } from '../core/EventEmitterContext';
 
+
+/**
+ * Defines properties for the file list.
+ */
 /**
  * Defines properties for the file list.
  */
@@ -38,7 +42,40 @@ type FileListProps = {
 
     /// The subdirectory of the datastore to list.
     /// If blank, the base directory is listed.
-    subdir? : string
+    subdir?: string
+
+    /**
+     * A comma-separated list of file MIME types or file extensions.
+     * Default: .json
+     * 
+     * ### Example: Filter by Extension:
+     * ```
+     * accept=".jpg,.png,.pdf"  // Restricts uploads to JPG, PNG, and PDF files only
+     * ```
+     * 
+     * ### Example: Filter by mime type.
+     * ```
+     * accept="image/*,application/pdf"  // Allows any image type and PDF files
+     * ```
+     * 
+     * ### Example: All files
+     * ```
+     * accept="/*"  
+     * ```
+     * 
+     */
+    filter?: string,
+
+    /**
+     * Callback when an operation completes successfully.
+     * @returns void
+     */
+    onSuccess? : (message:string) => void;
+
+    /***
+     * Callback when an operation results in an error.
+     */
+    onError? : (message:string) => void;
 }
 
 /**
@@ -74,19 +111,37 @@ type FileItem = {
 export const FileList: React.FC<FileListProps> = ({
     domain = "DATASTORE",
     enableUpload = false,
-    subdir
+    subdir,
+    filter=".json",
+    onSuccess,
+    onError
 }) => {
 
-    const { invoke, dispatch } = useContext(EventEmitterContext);
+    const [uploadKey, setUploadKey] = useState(0);
+    const { invoke } = useContext(EventEmitterContext);
 
     const [files, setFiles] = useState<FileItem[]>();
 
+    const makeTargetName = (s : string) => {
+        if (s !== null) {
+            if (subdir !== undefined) {
+                return `${subdir}/${s}`;
+            }
+            else {
+                return s;
+            }
+        }
+        else {
+            return "";
+        }
+    }    
+
     /**
      * Retrieve a list of files from an autocore-server DataStoreServelet.
      */
     const listFiles = async () => {
         try {
-            const args = subdir !== undefined ? {"subdir" : subdir} : {};
+            const args = subdir !== undefined ? { "subdir": subdir } : {};
             let res = await invoke(domain, "list_files", args);
 
             let items = [];
@@ -101,17 +156,9 @@ export const FileList: React.FC<FileListProps> = ({
             setFiles(items);
         }
         catch (error) {
-            console.error("Failed to upload file list: " + error);
-
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed to upload file list: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
 
+            if (onError) 
+                onError(`Failed to upload file list: ${error}`);
         }
 
 
@@ -122,18 +169,17 @@ export const FileList: React.FC<FileListProps> = ({
      * @param file The file item selected in the DataTable
      */
     const handleDownload = async (file: FileItem) => {
+        
+        let target = makeTargetName(file.name);
+
         try {
-            await invoke(domain, "download_file", { file_name: file.name });
+            await invoke(domain, "download_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Downloaded file: ${file.name}`);
         } catch (error) {
-            console.error("Failed downloading file: " + error);
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed to downloading file: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
+
+            if (onError) 
+                onError(`Failed downloading file: ${error}`);
         }
 
     };
@@ -144,25 +190,105 @@ export const FileList: React.FC<FileListProps> = ({
      */
     const handleDelete = async (file_name: string) => {
 
+        let target = makeTargetName(file_name);
+
         try {
-            await invoke(domain, "delete_file", { file_name: file_name });
+            await invoke(domain, "delete_file", { file_name: target });
+            if (onSuccess)
+                onSuccess(`Deleted file: ${file_name}`);
+
+            listFiles(); // Refresh the file list after successful upload
+
         } catch (error) {
-            console.error("Failed deleting file: " + error);
-
-            dispatch({
-                topic: "autocore-react/alert/error",
-                payload: {
-                    message: `Failed deleting file: ${error}`,
-                    timeoutSec: 7,
-                    severity: MessageSeverity.ERROR
-                }
-            });
+            if (onError) 
+                onError(`Failed to delete file: ${error}`);
         }
 
 
         listFiles();
     };
 
+    /**
+     * Handles the upload of files selected through the PrimeReact FileUpload component.
+     * This function is triggered when a user selects files for upload and it processes each file asynchronously.
+     * 
+     * The function reads the selected file as an ArrayBuffer, converts it to a Base64-encoded string, and then
+     * sends it to the server using a custom function `invoke` which interacts with the server via API calls.
+     * Upon successful upload, a success message is dispatched to the application's notification system. If the
+     * upload fails, an error message is similarly dispatched.
+     *
+     * Usage of this function requires that it be attached to a FileUpload component's event handler in the React component.
+     * 
+     * @param {FileUploadSelectEvent} event - The event object provided by the FileUpload component, containing the files selected by the user.
+     * 
+     * The `FileUploadSelectEvent` type should include:
+     * - `files`: An array of `File` objects that the user has selected for upload.
+     * 
+     * This function utilizes the `FileReader` API to read the contents of the file. It checks if the read result
+     * is an instance of `ArrayBuffer` before proceeding to convert it to a Base64 string. Errors during file reading
+     * or uploading are caught and appropriate actions are taken (e.g., logging the error, dispatching error notifications).
+     * 
+     * Note:
+     * - Ensure that the `invoke` function is properly implemented to handle the API request for file uploading.
+     * - Adjust the maximum file size and the types of files accepted by the FileUpload component according to your application's requirements.
+     * - This handler assumes a single file handling scenario. If multiple file uploads are needed, modifications to the iteration over `event.files` may be required.
+     */
+    const handleUpload = async (event: FileUploadHandlerEvent) => {
+        const files = event.files;
+        const file = files[0]; // Assuming single file upload
+   
+        let target = makeTargetName(file.name);
+
+        const reader = new FileReader();
+        reader.onload = async (e: ProgressEvent<FileReader>) => {
+
+            // Convert array buffer to base64
+            const arrayBuffer = e.target?.result as ArrayBuffer;
+            const base64String = arrayBufferToBase64(arrayBuffer);            
+    
+            try {
+                await invoke(domain, "write_file", { file_name: target, value: base64String });
+
+                if (onSuccess)
+                    onSuccess(`Uploaded file ${file.name}`);
+
+                // Refresh the file list after successful upload
+                listFiles(); 
+
+            } catch (error: any) {
+                if (onError) 
+                    onError(`Failed to upload file: ${error}`);
+            }
+
+            // Reset upload state of button so it show the file upload dialog again.
+            resetUpload();
+        };
+    
+        reader.onerror = (error) => {            
+            if (onError) 
+                onError(`Error reading file: ${error}`);            
+        };
+    
+
+        reader.readAsArrayBuffer(file);
+    };
+    
+    function arrayBufferToBase64(buffer: ArrayBuffer): string {
+        let binary = '';
+        let bytes = new Uint8Array(buffer);
+        let len = bytes.byteLength;
+        for (let i = 0; i < len; i++) {
+            binary += String.fromCharCode(bytes[i]);
+        }
+        return window.btoa(binary);
+    }
+    
+
+    const resetUpload = () => {
+        setUploadKey(prevKey => prevKey + 1); // Increment key to force re-render
+    };    
+
+
     const title = `File Listing [/${subdir !== undefined ? subdir : ''}]`;
     const toolbarStartContents = (
         <React.Fragment>
@@ -173,12 +299,19 @@ export const FileList: React.FC<FileListProps> = ({
     const toolbarEndContents = (
         <React.Fragment>
             {enableUpload && (
-                <Button
-                    icon="pi pi-upload"
-                    className="p-button-rounded p-mr-2"
-                    aria-label="Upload"
-                    size="small"
-                    rounded text
+                <FileUpload
+                    key={uploadKey}
+                    customUpload={true}
+                    auto
+                    uploadHandler={handleUpload}
+                    accept={filter}
+                    maxFileSize={25000} // Set maximum file size as needed
+                    mode="basic"
+                    chooseLabel=""
+                    chooseOptions={{
+                        icon: 'pi pi-upload',
+                        className: 'p-button-icon-only p-button-text p-button-rounded p-mr-2'
+                    }}
                 />
 
             )}

package/src/components/FileSelect.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-28 16:06:59
  * -----
- * Last Modified: 2024-04-28 20:05:41
+ * Last Modified: 2024-05-01 07:30:49
  * -----
  * 
  */

package/src/components/ValueDisplay.tsx

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 14:17:02
  * -----
- * Last Modified: 2024-03-08 07:48:42
+ * Last Modified: 2024-05-01 12:14:27
  * Modified By: ADC
  * -----
  * 
@@ -10,13 +10,13 @@
 
 
 
-import {Component} from 'react';
+import { Component } from 'react';
 //import useFitText from 'use-fit-text';
 import { format as numerableFormat } from 'numerable';
 import clsx from 'clsx';
-import { EventEmitterContext, EventEmitterContextType} from '../core/EventEmitterContext';
+import { EventEmitterContext, EventEmitterContextType } from '../core/EventEmitterContext';
 
-import {IPositionContext} from '../core/PositionContext';
+import { IPositionContext } from '../core/PositionContext';
 import type { NumerableFormatOptions } from '../core/NumerableTypes';
 
 /**
@@ -84,23 +84,69 @@ interface State {
 
 
 /**
- * `ValueDisplay` is a React component that subscribes to a value from an `EventEmitterContext` and renders it.
- * This component adjusts its display based on the provided properties, including positioning and styling adjustments
- * based on its context. It is designed to work within a system that provides dynamic updates to values via an event emitter.
+ * `ValueDisplay` is a React component designed to display a value which can be a string, number, or null.
+ * It supports formatting numeric values using the `numerableFormat` function, and is capable of dynamic positioning
+ * and sizing within its parent container. The component integrates with an `EventEmitterContext` to listen for
+ * updates to its value based on a specified topic, making it ideal for real-time data display scenarios.
+ *
+ * The component can be absolutely positioned based on `x` and `y` props, and its size can be adjusted using
+ * `width` and `height` props. If `useAbsolutePositioning` is true, it will position itself based on the provided
+ * coordinates; otherwise, it will position relatively.
+ *
+ * ### Props:
+ * - `value`: The initial value to display, which can be updated via props or context events.
+ * - `x`, `y`: Coordinates for absolute positioning within the parent container.
+ * - `width`, `height`: Dimensions of the component. If height is not provided, it defaults to the width.
+ * - `format`: A string specifying the format for numeric values (see numerable.js documentation for format strings).
+ * - `formatOptions`: Additional formatting options as per numerable.js.
+ * - `className`: Custom class for CSS styling.
+ * - `useAbsolutePositioning`: Boolean to toggle absolute positioning.
+ * - `topic`: Optional string to subscribe to context updates for dynamic value changes.
+ *
+ * ### Usage Example:
+ * ```tsx
+ * import React from 'react';
+ * import ReactDOM from 'react-dom';
+ * import { ValueDisplay } from './components/ValueDisplay';
+ *
+ * const App = () => {
+ *   return (
+ *     <div>
+ *       <ValueDisplay
+ *         value={1234.56}
+ *         x={100}
+ *         y={200}
+ *         width={150}
+ *         height={50}
+ *         format="0,0.00"
+ *         className="numeric-display"
+ *         useAbsolutePositioning={true}
+ *         topic="priceUpdate"
+ *       />
+ *     </div>
+ *   );
+ * };
+ *
+ * ReactDOM.render(<App />, document.getElementById('root'));
+ * ```
+ *
+ * In this example, `ValueDisplay` is used to show a numeric value formatted as a string with two decimal places.
+ * It is positioned absolutely at coordinates (100, 200) with a specified width and height. The component listens
+ * for updates on the "priceUpdate" topic to dynamically update its displayed value.
  */
 class ValueDisplay extends Component<Props, State> {
-    
+
     /** Defines the context type to subscribe to changes using EventEmitter. */
     static contextType = EventEmitterContext;
 
-   
+
     /** ID for the subscription to the topic, used to unsubscribe on component unmount. */
     protected unsubscribeTopicId: number | null = null;
 
     /**
      * The constructor initializes the component state and binds the initial value.
      * @param props The properties passed to the component, including initial value and other display options.
-     */    
+     */
     constructor(props: Props) {
         super(props);
         this.state = {
@@ -112,7 +158,7 @@ class ValueDisplay extends Component<Props, State> {
     /**
      * Upon mounting, the component subscribes to updates on the specified topic if it exists,
      * updating its state with the new value when the topic publishes updates.
-     */    
+     */
     componentDidMount() {
         const { topic } = this.props;
         if (topic) {
@@ -127,19 +173,19 @@ class ValueDisplay extends Component<Props, State> {
      * If the value prop changes, the component updates its state with the new value.
      * This ensures that the component remains in sync with its props.
      * @param prevProps The previous properties for comparison to detect changes.
-     */    
+     */
     componentDidUpdate(prevProps: Props) {
         // Check if the value prop has changed
         if (this.props.value !== prevProps.value) {
             // Update the state with the new value
             this.setState({ subscribedValue: this.props.value });
         }
-    }    
+    }
 
     /**
      * Before the component is unmounted, it unsubscribes from the topic to prevent memory leaks
      * and unnecessary updates from occurring.
-     */    
+     */
     componentWillUnmount() {
         if (this.unsubscribeTopicId) {
             const { unsubscribe } = this.context as EventEmitterContextType;
@@ -151,13 +197,13 @@ class ValueDisplay extends Component<Props, State> {
      * Renders the component with styling and formatting based on the provided properties and state.
      * Supports absolute or relative positioning and scales the display based on the context's dimensions.
      * @returns A styled `div` element displaying the formatted value.
-     */    
+     */
     render() {
         const { x, y, width, height, format, formatOptions, className, useAbsolutePositioning } = this.props;
         const { subscribedValue, fontSize } = this.state;
         const { scale, xOffset, yOffset } = this.context as IPositionContext;
 
-        const style : React.CSSProperties = {
+        const style: React.CSSProperties = {
             position: useAbsolutePositioning ? 'absolute' : 'relative',
             display: useAbsolutePositioning ? "" : "inline-block",
             verticalAlign: 'middle',
@@ -170,12 +216,21 @@ class ValueDisplay extends Component<Props, State> {
             whiteSpace: 'nowrap',
         };
 
+        // Determine how to display the value
+        let displayValue;
+        if (typeof subscribedValue === 'number' || (typeof subscribedValue === 'string' && !isNaN(Number(subscribedValue)))) {
+            displayValue = numerableFormat(subscribedValue, format, formatOptions);
+        } else {
+            displayValue = subscribedValue;  // Directly use the string if it's not numeric
+        }
+
         return (
             <div className={clsx(className)} style={style}>
-                {numerableFormat(subscribedValue, format, formatOptions)}
+                {displayValue}
             </div>
         );
     }
+
 }
 
 export { ValueDisplay, NumerableFormatOptions };

package/src/hooks/adsHooks.tsx

@@ -2,14 +2,14 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-26 09:04:40
  * -----
- * Last Modified: 2024-04-28 20:07:12
+ * Last Modified: 2024-04-30 21:32:01
  * -----
  * 
  */
 
 
 
-import { useContext, useRef, useEffect } from 'react';
+import { useContext, useRef, useEffect, useCallback } from 'react';
 import { EventEmitterContext } from '../core/EventEmitterContext';
 
 
@@ -163,6 +163,80 @@ export function useAdsWriteValue(symbolName: string) {
 
 
 
+
+
+/**
+ * useAdsWriteScaledValue is a custom React hook that enables writing scaled numerical values to a backend system.
+ * It applies a specified scale and offset to a numeric value before sending it over an ADS connection.
+ * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
+ * scale factors before being persisted or processed by a backend system.
+ *
+ * @param symbolName The symbol name in the backend system where the value will be written.
+ * @param scale The scale factor to be applied to the value.
+ * @param offset The offset to be applied after scaling the value.
+ * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
+ *
+ * @example
+ * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
+ * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
+ * based on a dynamic scale factor managed in the component's state.
+ *
+ * ```tsx
+ * import React, { useState } from 'react';
+ * import { useAdsWriteScaledValue } from './hooks';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *     const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
+ *     const [offset, setOffset] = useState<number>(0); // No offset by default.
+ *
+ *     // The hook is used here with the scale and offset state variables.
+ *     const writeMeasurement = useAdsWriteScaledValue("GIO.axisX.position", scale, offset);
+ *
+ *     // This function is called when the input field value changes.
+ *     const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ *         const valueInInches = parseFloat(event.target.value);
+ *         writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
+ *     };
+ *
+ *     return (
+ *         <div>
+ *             <label>Enter measurement in inches:</label>
+ *             <input type="number" onChange={handleMeasurementChange} />
+ *         </div>
+ *     );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
+ * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
+ * dynamically if needed, for instance, based on user selection or other external configurations.
+ */
+export function useAdsWriteScaledValue(symbolName: string, scale: number, offset: number) {
+    const { invoke } = useContext(EventEmitterContext);
+    const domain = "ADS";
+    const fname = "write_value";
+    
+    return useCallback(async (value: number) => {
+
+        // In autocore-react, we multiple to scale incoming values,
+        // divide to scale outgoing values.
+        // This is an OUTGOING value, so we divide.
+
+        const scaledValue = (value - offset) / scale; 
+        try {
+            await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
+        } catch (err) {
+            console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
+        }
+    }, [symbolName, scale, offset, invoke]);
+}
+
+
+
+
+
 /**
  * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
  * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.

package/src/hooks/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-30 12:14:43
+ * -----
+ * Last Modified: 2024-04-30 12:15:46
+ * -----
+ * 
+ */
+
+
+export {useAdsRegisterSymbols, useAdsWriteValue, useAdsTapValue} from "./adsHooks";
+export {useScaledValue, kMillimeters2Inches } from './useScaledValue';

package/src/hooks/useScaledValue.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2024-04-30 11:41:59
+ * -----
+ * Last Modified: 2024-04-30 21:33:42
+ * -----
+ * 
+ */
+
+
+
+import { useCallback, useState } from 'react';
+
+
+export const kMillimeters2Inches: number = 1 / 25.4;
+
+
+type UseScaledValueReturn = [number, (newValue: number) => void];
+
+/**
+ * A custom React hook for converting values between different scales,
+ * with support for dynamically updating the scale and offset. This hook manages values
+ * in a base unit and allows for easy conversion to a display unit, updating
+ * reactively to changes in the conversion factors.
+ *
+ * @param initialValue - The initial value in the base unit.
+ * @param scale - The dynamic scale factor used for conversion to the display unit.
+ * @param offset - An optional offset applied after scaling (default is 0).
+ * @returns A tuple containing the display value and a setter function for updating
+ * the value in the display unit.
+ *
+ * @example
+ * Here's how to use `useScaledValue` in a component that fetches a scale factor from a backend
+ * and allows the user to input values in a converted scale, which are then handled in a base unit:
+ *
+ * ```tsx
+ * import React, { useState, useEffect } from 'react';
+ * import { useScaledValue } from './hooks/useScaledValue';
+ *
+ * const MeasurementInput: React.FC = () => {
+ *   const [units, setUnits] = useState<number>(1); // Start with a default scale of 1
+ *   const [xPosition, setXPosition] = useScaledValue(0, units);
+ *
+ *   useEffect(() => {
+ *     async function fetchScale() {
+ *       try {
+ *         // Simulate fetching scale factor from a backend
+ *         const res = await invoke("GNV", "read_value", { group: "ux", key: "kSelectedUnits" });
+ *         setUnits(res.data); // Update scale based on backend response
+ *       } catch (error) {
+ *         console.error('Failed to fetch units', error);
+ *       }
+ *     }
+ *     fetchScale();
+ *   }, []);
+ *
+ *   return (
+ *     <input
+ *       type="number"
+ *       value={xPosition.toFixed(2)} // Display the value formatted to 2 decimal places
+ *       onChange={(e) => setXPosition(parseFloat(e.target.value))}
+ *     />
+ *   );
+ * };
+ *
+ * export default MeasurementInput;
+ * ```
+ *
+ * In this example, `useScaledValue` is used to manage a measurement input in a dynamic unit system.
+ * The component fetches the conversion scale from the backend upon component mounting and updates the
+ * input display accordingly. The user's input is converted back to the base unit before being processed.
+ */
+export function useScaledValue(initialValue: number, scale: number, offset: number = 0): UseScaledValueReturn {
+
+    const [displayValue, setDisplayValue] = useState<number>(initialValue * scale + offset);
+
+    const handleSetDisplayValue = useCallback((newValue: number) => {
+
+        // In autocore-react, we multiple to scale incoming values,
+        // divide to scale outgoing values.
+        // This is an INCOMING value, so we multiply.
+
+        const newDisplayValue = newValue * scale + offset;
+        setDisplayValue(newDisplayValue);
+
+    }, [scale, offset]);
+
+    return [displayValue, handleSetDisplayValue];
+}