@adcops/autocore-react 3.0.34 → 3.0.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/dist/assets/BlocklyLogo.js +1 -9
  2. package/dist/assets/Distance.js +1 -5
  3. package/dist/assets/JogLong.js +1 -3
  4. package/dist/assets/JogMedium.js +1 -3
  5. package/dist/assets/JogShort.js +1 -3
  6. package/dist/assets/PythonLogo.js +1 -21
  7. package/dist/assets/Rotation3D.js +1 -3
  8. package/dist/assets/RotationCcw.js +1 -10
  9. package/dist/assets/RotationCcwA.js +1 -16
  10. package/dist/assets/RotationCcwB.js +1 -16
  11. package/dist/assets/RotationCcwC.js +1 -16
  12. package/dist/assets/RotationCw.js +1 -10
  13. package/dist/assets/RotationCwA.js +1 -16
  14. package/dist/assets/RotationCwB.js +1 -16
  15. package/dist/assets/RotationCwC.js +1 -16
  16. package/dist/assets/Run.js +1 -3
  17. package/dist/assets/Speed.js +1 -5
  18. package/dist/assets/SpeedFast.js +1 -3
  19. package/dist/assets/SpeedMedium.js +1 -3
  20. package/dist/assets/SpeedNone.js +1 -3
  21. package/dist/assets/SpeedSlow.js +1 -3
  22. package/dist/assets/Walk.js +1 -3
  23. package/dist/assets/index.js +1 -22
  24. package/dist/components/BlocklyEditor.css +71 -2
  25. package/dist/components/BlocklyEditor.js +1 -508
  26. package/dist/components/CodeEditor.js +1 -108
  27. package/dist/components/FileList.js +1 -218
  28. package/dist/components/FileSelect.js +1 -63
  29. package/dist/components/FitText.js +1 -13
  30. package/dist/components/Indicator.js +1 -113
  31. package/dist/components/IndicatorButton.js +1 -187
  32. package/dist/components/IndicatorRect.js +1 -93
  33. package/dist/components/JogPanel.js +1 -295
  34. package/dist/components/Lamp.js +1 -161
  35. package/dist/components/Osk.js +1 -125
  36. package/dist/components/OskDialog.js +1 -128
  37. package/dist/components/ProgressBarWithValue.js +1 -18
  38. package/dist/components/TextInput.js +1 -139
  39. package/dist/components/ToggleGroup.js +1 -204
  40. package/dist/components/ValueDisplay.js +1 -160
  41. package/dist/components/ValueIndicator.js +1 -38
  42. package/dist/components/ValueInput.js +1 -158
  43. package/dist/core/ActionMode.js +1 -18
  44. package/dist/core/EventEmitterContext.js +1 -252
  45. package/dist/core/IndicatorButtonState.js +1 -9
  46. package/dist/core/IndicatorColor.js +1 -36
  47. package/dist/core/MaskPatterns.js +1 -80
  48. package/dist/core/NumerableTypes.js +1 -10
  49. package/dist/core/PositionContext.js +1 -24
  50. package/dist/core/UniqueId.js +1 -32
  51. package/dist/core/ValueSimulator.js +1 -233
  52. package/dist/core/hoc.js +1 -44
  53. package/dist/hooks/adsHooks.js +1 -253
  54. package/dist/hooks/commandHooks.js +1 -252
  55. package/dist/hooks/index.js +1 -10
  56. package/dist/hooks/useScaledValue.js +1 -86
  57. package/dist/hub/CommandMessage.js +1 -9
  58. package/dist/hub/HubBase.js +1 -310
  59. package/dist/hub/HubSimulate.js +1 -46
  60. package/dist/hub/HubTauri.js +1 -130
  61. package/dist/hub/HubWebSocket.js +1 -240
  62. package/dist/hub/index.js +1 -57
  63. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf +0 -0
  64. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf +0 -0
  65. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf +0 -0
  66. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-Regular.woff2 +0 -0
  67. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 +0 -0
  68. package/dist/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf +0 -0
  69. package/dist/themes/adc-dark/blue/theme.css +7097 -0
  70. package/dist/themes/adc-dark/blue/theme.css.map +1 -0
  71. package/package.json +8 -2
  72. package/src/components/BlocklyEditor.css +71 -2
  73. package/src/themes/adc-dark/_extensions.scss +166 -0
  74. package/src/themes/adc-dark/_variables.scss +913 -0
  75. package/src/themes/adc-dark/blue/_fonts.scss +24 -0
  76. package/src/themes/adc-dark/blue/adc_theme.scss +31 -0
  77. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf +0 -0
  78. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf +0 -0
  79. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf +0 -0
  80. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-Regular.woff2 +0 -0
  81. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-RegularItalic.woff2 +0 -0
  82. package/src/themes/adc-dark/blue/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf +0 -0
  83. package/src/themes/adc-dark/blue/theme.scss +14 -0
  84. package/src/themes/theme-base/_colors.scss +18 -0
  85. package/src/themes/theme-base/_common.scss +75 -0
  86. package/src/themes/theme-base/_components.scss +111 -0
  87. package/src/themes/theme-base/_mixins.scss +243 -0
  88. package/src/themes/theme-base/components/button/_button.scss +644 -0
  89. package/src/themes/theme-base/components/button/_speeddial.scss +91 -0
  90. package/src/themes/theme-base/components/button/_splitbutton.scss +359 -0
  91. package/src/themes/theme-base/components/data/_carousel.scss +39 -0
  92. package/src/themes/theme-base/components/data/_datascroller.scss +47 -0
  93. package/src/themes/theme-base/components/data/_datatable.scss +389 -0
  94. package/src/themes/theme-base/components/data/_dataview.scss +47 -0
  95. package/src/themes/theme-base/components/data/_filter.scss +138 -0
  96. package/src/themes/theme-base/components/data/_orderlist.scss +86 -0
  97. package/src/themes/theme-base/components/data/_organizationchart.scss +50 -0
  98. package/src/themes/theme-base/components/data/_paginator.scss +91 -0
  99. package/src/themes/theme-base/components/data/_picklist.scss +74 -0
  100. package/src/themes/theme-base/components/data/_timeline.scss +38 -0
  101. package/src/themes/theme-base/components/data/_tree.scss +184 -0
  102. package/src/themes/theme-base/components/data/_treetable.scss +431 -0
  103. package/src/themes/theme-base/components/file/_fileupload.scss +41 -0
  104. package/src/themes/theme-base/components/input/_autocomplete.scss +95 -0
  105. package/src/themes/theme-base/components/input/_calendar.scss +251 -0
  106. package/src/themes/theme-base/components/input/_cascadeselect.scss +107 -0
  107. package/src/themes/theme-base/components/input/_checkbox.scss +181 -0
  108. package/src/themes/theme-base/components/input/_chips.scss +102 -0
  109. package/src/themes/theme-base/components/input/_colorpicker.scss +18 -0
  110. package/src/themes/theme-base/components/input/_dropdown.scss +252 -0
  111. package/src/themes/theme-base/components/input/_editor.scss +122 -0
  112. package/src/themes/theme-base/components/input/_iconfield.scss +10 -0
  113. package/src/themes/theme-base/components/input/_inputgroup.scss +74 -0
  114. package/src/themes/theme-base/components/input/_inputicon.scss +15 -0
  115. package/src/themes/theme-base/components/input/_inputnumber.scss +5 -0
  116. package/src/themes/theme-base/components/input/_inputotp.scss +10 -0
  117. package/src/themes/theme-base/components/input/_inputswitch.scss +100 -0
  118. package/src/themes/theme-base/components/input/_inputtext.scss +101 -0
  119. package/src/themes/theme-base/components/input/_listbox.scss +139 -0
  120. package/src/themes/theme-base/components/input/_mention.scss +31 -0
  121. package/src/themes/theme-base/components/input/_multiselect.scss +278 -0
  122. package/src/themes/theme-base/components/input/_password.scss +33 -0
  123. package/src/themes/theme-base/components/input/_radiobutton.scss +170 -0
  124. package/src/themes/theme-base/components/input/_rating.scss +81 -0
  125. package/src/themes/theme-base/components/input/_selectbutton.scss +50 -0
  126. package/src/themes/theme-base/components/input/_slider.scss +49 -0
  127. package/src/themes/theme-base/components/input/_togglebutton.scss +99 -0
  128. package/src/themes/theme-base/components/input/_treeselect.scss +151 -0
  129. package/src/themes/theme-base/components/input/_tristatecheckbox.scss +46 -0
  130. package/src/themes/theme-base/components/menu/_breadcrumb.scss +42 -0
  131. package/src/themes/theme-base/components/menu/_contextmenu.scss +39 -0
  132. package/src/themes/theme-base/components/menu/_dock.scss +109 -0
  133. package/src/themes/theme-base/components/menu/_megamenu.scss +141 -0
  134. package/src/themes/theme-base/components/menu/_menu.scss +33 -0
  135. package/src/themes/theme-base/components/menu/_menubar.scss +216 -0
  136. package/src/themes/theme-base/components/menu/_panelmenu.scss +153 -0
  137. package/src/themes/theme-base/components/menu/_slidemenu.scss +60 -0
  138. package/src/themes/theme-base/components/menu/_steps.scss +57 -0
  139. package/src/themes/theme-base/components/menu/_tabmenu.scss +50 -0
  140. package/src/themes/theme-base/components/menu/_tieredmenu.scss +43 -0
  141. package/src/themes/theme-base/components/messages/_inlinemessage.scss +69 -0
  142. package/src/themes/theme-base/components/messages/_message.scss +107 -0
  143. package/src/themes/theme-base/components/messages/_toast.scss +100 -0
  144. package/src/themes/theme-base/components/misc/_avatar.scss +34 -0
  145. package/src/themes/theme-base/components/misc/_badge.scss +77 -0
  146. package/src/themes/theme-base/components/misc/_blockui.scss +0 -0
  147. package/src/themes/theme-base/components/misc/_chip.scss +39 -0
  148. package/src/themes/theme-base/components/misc/_inplace.scss +17 -0
  149. package/src/themes/theme-base/components/misc/_metergroup.scss +81 -0
  150. package/src/themes/theme-base/components/misc/_progressbar.scss +17 -0
  151. package/src/themes/theme-base/components/misc/_scrolltop.scss +25 -0
  152. package/src/themes/theme-base/components/misc/_skeleton.scss +8 -0
  153. package/src/themes/theme-base/components/misc/_tag.scss +40 -0
  154. package/src/themes/theme-base/components/misc/_terminal.scss +12 -0
  155. package/src/themes/theme-base/components/multimedia/_galleria.scss +153 -0
  156. package/src/themes/theme-base/components/multimedia/_image.scss +54 -0
  157. package/src/themes/theme-base/components/overlay/_confirmpopup.scss +72 -0
  158. package/src/themes/theme-base/components/overlay/_dialog.scss +78 -0
  159. package/src/themes/theme-base/components/overlay/_overlaypanel.scss +64 -0
  160. package/src/themes/theme-base/components/overlay/_sidebar.scss +23 -0
  161. package/src/themes/theme-base/components/overlay/_tooltip.scss +33 -0
  162. package/src/themes/theme-base/components/panel/_accordion.scss +118 -0
  163. package/src/themes/theme-base/components/panel/_card.scss +30 -0
  164. package/src/themes/theme-base/components/panel/_divider.scss +31 -0
  165. package/src/themes/theme-base/components/panel/_fieldset.scss +47 -0
  166. package/src/themes/theme-base/components/panel/_panel.scss +47 -0
  167. package/src/themes/theme-base/components/panel/_scrollpanel.scss +10 -0
  168. package/src/themes/theme-base/components/panel/_splitter.scss +23 -0
  169. package/src/themes/theme-base/components/panel/_stepper.scss +136 -0
  170. package/src/themes/theme-base/components/panel/_tabview.scss +147 -0
  171. package/src/themes/theme-base/components/panel/_toolbar.scss +11 -0
  172. package/tools/build-themes.cjs +66 -0
  173. package/tools/copy-distribution-files.cjs +20 -16
@@ -1,253 +1 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
- * Created Date: 2024-04-26 09:04:40
4
- * -----
5
- * Last Modified: 2024-05-17 10:47:22
6
- * -----
7
- *
8
- */
9
- import { useContext, useRef, useEffect, useCallback } from 'react';
10
- import { EventEmitterContext } from '../core/EventEmitterContext';
11
- /**
12
- * Sleep for a given number of milliseconds.
13
- * @param ms Number of milliseconds to sleep.
14
- */
15
- function sleep(ms) {
16
- return new Promise(resolve => setTimeout(resolve, ms));
17
- }
18
- /**
19
- * Custom hook for registering symbols and subscribing to updates on the
20
- * ADS domain via the EventEmitterContext.
21
- * This hook abstracts the common pattern of registering symbols and handling subscriptions
22
- * to updates in components that need real-time data from a backend service.
23
- *
24
- * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
25
- * related to a symbol, and each value is the setter function for that state.
26
- * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
27
- * Each key should match a key in the `setters` object, and each value should be a string
28
- * that represents the symbol name to register and subscribe to.
29
- *
30
- * ## Usage Example:
31
- * ```typescript
32
- * const setters = {
33
- * speed: setSpeed,
34
- * temperature: setTemperature
35
- * };
36
- *
37
- * const symbols = {
38
- * speed: "Sensor.speed",
39
- * temperature: "Sensor.temperature"
40
- * };
41
- *
42
- * useRegisterSymbols(setters, symbols);
43
- * ```
44
- *
45
- * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
46
- * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
47
- * whenever new data is received.
48
- */
49
- export const useAdsRegisterSymbols = (setters, symbols, options = {}) => {
50
- const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
51
- const subscriptions = useRef([]);
52
- const isMounted = useRef(true);
53
- useEffect(() => {
54
- isMounted.current = true;
55
- const registerAndSubscribe = async () => {
56
- for (const [key, symbolName] of Object.entries(symbols)) {
57
- try {
58
- const invokeOptions = options[key] ? { symbol_name: symbolName, options: options[key] } : { symbol_name: symbolName };
59
- await invoke("ADS", "register_symbol", invokeOptions);
60
- //console.log(`Subscribe... ADS/${symbolName}`);
61
- const subscriptionId = subscribe(`ADS/${symbolName}`, (data) => {
62
- if (isMounted.current) {
63
- const setter = setters[key];
64
- if (setter) {
65
- setter(data.value);
66
- }
67
- }
68
- });
69
- subscriptions.current.push(subscriptionId);
70
- }
71
- catch (err) {
72
- console.error(`Failed to register symbol ${symbolName}: ${err}`);
73
- }
74
- }
75
- await invoke("ADS", "refresh", {});
76
- };
77
- if (!isConnected()) {
78
- //console.log("SCHEDULE LATER...");
79
- let connectionSubId = subscribe("HUB/connected", () => {
80
- registerAndSubscribe();
81
- unsubscribe(connectionSubId);
82
- });
83
- subscriptions.current.push(connectionSubId);
84
- }
85
- else {
86
- //console.log("ALREADY CONNECTED...");
87
- registerAndSubscribe();
88
- }
89
- return () => {
90
- //console.log("UNSUBSCRIBE");
91
- isMounted.current = false;
92
- subscriptions.current.forEach(subscriptionId => unsubscribe(subscriptionId));
93
- subscriptions.current = [];
94
- };
95
- }, []); // Ensure setters and symbols are included if they can change
96
- return null; // This hook does not render anything
97
- };
98
- /**
99
- * Custom hook to create a function that sends a specified value to a remote device or server.
100
- * This hook abstracts the repetitive logic involved in sending these values,
101
- * such as invoking the command and handling errors.
102
- *
103
- * @param {string} domain The domain under which the backend function is grouped.
104
- * @param {string} fname The name of the function to be called on the backend.
105
- * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
106
- * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
107
- *
108
- * @example
109
- * ```tsx
110
- * import React, { useState } from 'react';
111
- * import { Button } from 'primereact/button';
112
- * import useWriteValue from './useWriteValue'; // adjust the import path as necessary
113
- *
114
- * const Component: React.FC = () => {
115
- * const [value, setValue] = useState<number>(0);
116
- * const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
117
- *
118
- * return (
119
- * <div>
120
- * <input
121
- * type="number"
122
- * value={value}
123
- * onChange={(e) => setValue(Number(e.target.value))}
124
- * />
125
- * <Button
126
- * label="Send to Backend"
127
- * onClick={() => writeToBackend(value)}
128
- * />
129
- * </div>
130
- * );
131
- * };
132
- */
133
- export function useAdsWriteValue(symbolName) {
134
- const { invoke } = useContext(EventEmitterContext);
135
- const domain = "ADS";
136
- const fname = "write_value";
137
- // Return a function that takes a value and sends it to the backend
138
- return async (value) => {
139
- try {
140
- await invoke(domain, fname, { symbol_name: symbolName, value });
141
- }
142
- catch (err) {
143
- console.error(`Error writing tag ${symbolName}: ${err}`);
144
- }
145
- };
146
- }
147
- /**
148
- * useAdsWriteScaledValue is a custom React hook that enables writing scaled numerical values to a backend system.
149
- * It applies a specified scale and offset to a numeric value before sending it over an ADS connection.
150
- * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
151
- * scale factors before being persisted or processed by a backend system.
152
- *
153
- * @param symbolName The symbol name in the backend system where the value will be written.
154
- * @param scale The scale factor to be applied to the value.
155
- * @param offset The offset to be applied after scaling the value.
156
- * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
157
- *
158
- * @example
159
- * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
160
- * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
161
- * based on a dynamic scale factor managed in the component's state.
162
- *
163
- * ```tsx
164
- * import React, { useState } from 'react';
165
- * import { useAdsWriteScaledValue } from './hooks';
166
- *
167
- * const MeasurementInput: React.FC = () => {
168
- * const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
169
- * const [offset, setOffset] = useState<number>(0); // No offset by default.
170
- *
171
- * // The hook is used here with the scale and offset state variables.
172
- * const writeMeasurement = useAdsWriteScaledValue("GIO.axisX.position", scale, offset);
173
- *
174
- * // This function is called when the input field value changes.
175
- * const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
176
- * const valueInInches = parseFloat(event.target.value);
177
- * writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
178
- * };
179
- *
180
- * return (
181
- * <div>
182
- * <label>Enter measurement in inches:</label>
183
- * <input type="number" onChange={handleMeasurementChange} />
184
- * </div>
185
- * );
186
- * };
187
- *
188
- * export default MeasurementInput;
189
- * ```
190
- *
191
- * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
192
- * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
193
- * dynamically if needed, for instance, based on user selection or other external configurations.
194
- */
195
- export function useAdsWriteScaledValue(symbolName, scale, offset) {
196
- const { invoke } = useContext(EventEmitterContext);
197
- const domain = "ADS";
198
- const fname = "write_value";
199
- return useCallback(async (value) => {
200
- // In autocore-react, we multiple to scale incoming values,
201
- // divide to scale outgoing values.
202
- // This is an OUTGOING value, so we divide.
203
- const scaledValue = (value - offset) / scale;
204
- try {
205
- await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
206
- }
207
- catch (err) {
208
- console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
209
- }
210
- }, [symbolName, scale, offset, invoke]);
211
- }
212
- /**
213
- * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
214
- * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
215
- *
216
- * @param {string} domain - The domain under which the backend function is grouped.
217
- * @param {string} fname - The function name to be called on the backend.
218
- * @param {string} symbolName - The symbol name to target for the tap action.
219
- * @returns {Function} A function that triggers the tap action.
220
- *
221
- * @example
222
- * ```tsx
223
- * import React from 'react';
224
- * import { Button } from 'primereact/button';
225
- * import useTapValue from './useTapValue'; // Ensure the correct import path
226
- *
227
- * const MyComponent: React.FC = () => {
228
- * const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
229
- *
230
- * return (
231
- * <Button
232
- * label="Tap Button"
233
- * onClick={() => sendTapAction()}
234
- * />
235
- * );
236
- * };
237
- * ```
238
- */
239
- export function useAdsTapValue(symbolName) {
240
- const { invoke } = useContext(EventEmitterContext);
241
- const domain = "ADS";
242
- const fname = "write_value";
243
- return async () => {
244
- try {
245
- await invoke(domain, fname, { symbol_name: symbolName, value: true });
246
- await sleep(300); // Sleep for 300ms before writing false
247
- await invoke(domain, fname, { symbol_name: symbolName, value: false });
248
- }
249
- catch (err) {
250
- console.error(`Error handling tap action for ${symbolName}: ${err}`);
251
- }
252
- };
253
- }
1
+ 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,n={})=>{const{invoke:r,subscribe:s,unsubscribe:o,isConnected:u}=useContext(EventEmitterContext),c=useRef([]),a=useRef(!0);return useEffect((()=>{a.current=!0;const i=async()=>{for(const[o,u]of Object.entries(t))try{const t=n[o]?{symbol_name:u,options:n[o]}:{symbol_name:u};await r("ADS","register_symbol",t);const i=s(`ADS/${u}`,(t=>{if(a.current){const n=e[o];n&&n(t.value)}}));c.current.push(i)}catch(e){}await r("ADS","refresh",{})};if(u())i();else{let e=s("HUB/connected",(()=>{i(),o(e)}));c.current.push(e)}return()=>{a.current=!1,c.current.forEach((e=>o(e))),c.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){}}}
@@ -1,252 +1 @@
1
- /*
2
- * Copyright (C) 2025 Automated Design Corp. All Rights Reserved.
3
- * Created Date: 2025-03-31 06:38:50
4
- * -----
5
- * Last Modified: 2025-05-08 14:47:35
6
- * -----
7
- *
8
- */
9
- import { useContext, useRef, useEffect, useCallback } from 'react';
10
- import { EventEmitterContext } from '../core/EventEmitterContext';
11
- /**
12
- * Sleep for a given number of milliseconds.
13
- * @param ms Number of milliseconds to sleep.
14
- */
15
- function sleep(ms) {
16
- return new Promise(resolve => setTimeout(resolve, ms));
17
- }
18
- /**
19
- * Custom hook for registering symbols and subscribing to updates on
20
- * a domain via the EventEmitterContext.
21
- * This hook abstracts the common pattern of registering symbols and handling subscriptions
22
- * to updates in components that need real-time data from a backend service.
23
- *
24
- * @param setters A mapping of state setter functions, where each key corresponds to a piece of state
25
- * related to a symbol, and each value is the setter function for that state.
26
- * @param symbols A mapping of state keys to their corresponding symbol names in the backend system.
27
- * Each key should match a key in the `setters` object, and each value should be a string
28
- * that represents the symbol name to register and subscribe to.
29
- *
30
- * ## Usage Example:
31
- * ```typescript
32
- * const setters = {
33
- * speed: setSpeed,
34
- * temperature: setTemperature
35
- * };
36
- *
37
- * const symbols = {
38
- * speed: "Sensor.speed",
39
- * temperature: "Sensor.temperature"
40
- * };
41
- *
42
- * useRegisterSymbols(setters, symbols);
43
- * ```
44
- *
45
- * This will register and subscribe to updates for "Sensor.speed" and "Sensor.temperature",
46
- * and update the `speed` and `temperature` states via `setSpeed` and `setTemperature` respectively
47
- * whenever new data is received.
48
- */
49
- export const useRegisterSymbols = (domain, setters, symbols, options = {}) => {
50
- const { subscribe, unsubscribe, isConnected, invoke } = useContext(EventEmitterContext);
51
- const subscriptions = useRef([]);
52
- const isMounted = useRef(true);
53
- /// Options is reserved for future use.
54
- options;
55
- useEffect(() => {
56
- isMounted.current = true;
57
- const registerAndSubscribe = async () => {
58
- for (const [key, symbolName] of Object.entries(symbols)) {
59
- try {
60
- console.log(`Subscribe... ${domain}/${symbolName}`);
61
- const subscriptionId = subscribe(`${domain}/${symbolName}`, (data) => {
62
- if (isMounted.current) {
63
- const setter = setters[key];
64
- if (setter) {
65
- setter(data.value);
66
- }
67
- }
68
- });
69
- subscriptions.current.push(subscriptionId);
70
- // Refresh on a topic is the same as a read_value, except the response is broadcasted.
71
- // Because there currently isn't a centralized tag system, the topic name should not
72
- // contain the domain name.
73
- await invoke(domain, "refresh", { 'topic': `${symbolName}` });
74
- }
75
- catch (err) {
76
- console.error(`Failed to register symbol ${symbolName}: ${err}`);
77
- }
78
- }
79
- };
80
- if (!isConnected()) {
81
- //console.log("SCHEDULE LATER...");
82
- let connectionSubId = subscribe("HUB/connected", () => {
83
- setTimeout(() => {
84
- registerAndSubscribe();
85
- unsubscribe(connectionSubId);
86
- }, 500);
87
- });
88
- subscriptions.current.push(connectionSubId);
89
- }
90
- else {
91
- //console.log("ALREADY CONNECTED...");
92
- registerAndSubscribe();
93
- }
94
- return () => {
95
- //console.log("UNSUBSCRIBE");
96
- isMounted.current = false;
97
- subscriptions.current.forEach(subscriptionId => unsubscribe(subscriptionId));
98
- subscriptions.current = [];
99
- };
100
- }, []); // Ensure setters and symbols are included if they can change
101
- return null; // This hook does not render anything
102
- };
103
- /**
104
- * Custom hook to create a function that sends a specified value to a remote device or server.
105
- * This hook abstracts the repetitive logic involved in sending these values,
106
- * such as invoking the command and handling errors.
107
- *
108
- * @param {string} domain The domain under which the backend function is grouped.
109
- * @param {string} fname The name of the function to be called on the backend.
110
- * @param {string} symbolName The symbol name that identifies the specific value or setting in the backend.
111
- * @returns {Function} A function that accepts a value (number or boolean) and sends it to the configured backend.
112
- *
113
- * @example
114
- * ```tsx
115
- * import React, { useState } from 'react';
116
- * import { Button } from 'primereact/button';
117
- * import useWriteValue from './commandHooks';
118
- *
119
- * const Component: React.FC = () => {
120
- * const [value, setValue] = useState<number>(0);
121
- * const writeToBackend = useAdsWriteValue("ADS", "write_value", "GNV.mySymbol");
122
- *
123
- * return (
124
- * <div>
125
- * <input
126
- * type="number"
127
- * value={value}
128
- * onChange={(e) => setValue(Number(e.target.value))}
129
- * />
130
- * <Button
131
- * label="Send to Backend"
132
- * onClick={() => writeToBackend(value)}
133
- * />
134
- * </div>
135
- * );
136
- * };
137
- */
138
- export function useWriteValue(domain, symbolName, fname = "write_value") {
139
- const { invoke } = useContext(EventEmitterContext);
140
- // Return a function that takes a value and sends it to the backend
141
- return async (value) => {
142
- try {
143
- await invoke(domain, fname, { "topic": symbolName, "value": value });
144
- }
145
- catch (err) {
146
- console.error(`Error writing tag ${symbolName}: ${err}`);
147
- }
148
- };
149
- }
150
- /**
151
- * useWriteScaledValue is a custom React hook that enables writing scaled numerical values to the autocore backend system.
152
- * It applies a specified scale and offset to a numeric value before sending it over the websocket connection.
153
- * This hook is ideal for scenarios where numeric data needs to be adjusted according to dynamically configurable
154
- * scale factors before being persisted or processed by a backend system.
155
- *
156
- * @param symbolName The symbol name in the backend system where the value will be written.
157
- * @param scale The scale factor to be applied to the value.
158
- * @param offset The offset to be applied after scaling the value.
159
- * @returns A function that takes a numeric value, applies the scaling and offset, and sends the modified value to the backend.
160
- *
161
- * @example
162
- * This example demonstrates how to use the `useAdsWriteScaledValue` hook within a component that allows users
163
- * to input a value in inches, which is then automatically converted to millimeters (if the scale is set for such conversion)
164
- * based on a dynamic scale factor managed in the component's state.
165
- *
166
- * ```tsx
167
- * import React, { useState } from 'react';
168
- * import { useWriteScaledValue } from './commandHooks';
169
- *
170
- * const MeasurementInput: React.FC = () => {
171
- * const [scale, setScale] = useState<number>(1 / 25.4); // Initial scale for converting inches to millimeters.
172
- * const [offset, setOffset] = useState<number>(0); // No offset by default.
173
- *
174
- * // The hook is used here with the scale and offset state variables.
175
- * const writeMeasurement = useWriteScaledValue("ADS", "GIO.axisX.position", scale, offset);
176
- *
177
- * // This function is called when the input field value changes.
178
- * const handleMeasurementChange = (event: React.ChangeEvent<HTMLInputElement>) => {
179
- * const valueInInches = parseFloat(event.target.value);
180
- * writeMeasurement(valueInInches); // Write the scaled value (converted to millimeters).
181
- * };
182
- *
183
- * return (
184
- * <div>
185
- * <label>Enter measurement in inches:</label>
186
- * <input type="number" onChange={handleMeasurementChange} />
187
- * </div>
188
- * );
189
- * };
190
- *
191
- * export default MeasurementInput;
192
- * ```
193
- *
194
- * In this component, `writeMeasurement` is a function returned by the `useAdsWriteScaledValue` hook that takes a value in inches,
195
- * converts it to millimeters using the current `scale`, and writes the result to a backend symbol. The `scale` and `offset` can be adjusted
196
- * dynamically if needed, for instance, based on user selection or other external configurations.
197
- */
198
- export function useWriteScaledValue(domain, symbolName, scale, offset, fname = "write_value") {
199
- const { invoke } = useContext(EventEmitterContext);
200
- return useCallback(async (value) => {
201
- // In autocore-react, we multiple to scale incoming values,
202
- // divide to scale outgoing values.
203
- // This is an OUTGOING value, so we divide.
204
- const scaledValue = (value - offset) / scale;
205
- try {
206
- await invoke(domain, fname, { symbol_name: symbolName, value: scaledValue });
207
- }
208
- catch (err) {
209
- console.error(`Error writing scaled value to tag ${symbolName}: ${err}`);
210
- }
211
- }, [symbolName, scale, offset, invoke]);
212
- }
213
- /**
214
- * Custom hook to send a "tap" action, which sends true followed by false after a short delay,
215
- * to a specified symbol in the backend. This is used to simulate a button tap or momentary switch.
216
- *
217
- * @param {string} domain - The domain under which the backend function is grouped.
218
- * @param {string} fname - The function name to be called on the backend.
219
- * @param {string} symbolName - The symbol name to target for the tap action.
220
- * @returns {Function} A function that triggers the tap action.
221
- *
222
- * @example
223
- * ```tsx
224
- * import React from 'react';
225
- * import { Button } from 'primereact/button';
226
- * import useTapValue from './useTapValue'; // Ensure the correct import path
227
- *
228
- * const MyComponent: React.FC = () => {
229
- * const sendTapAction = useTapValue("ADS", "write_value", "GNV.myButton");
230
- *
231
- * return (
232
- * <Button
233
- * label="Tap Button"
234
- * onClick={() => sendTapAction()}
235
- * />
236
- * );
237
- * };
238
- * ```
239
- */
240
- export function useTapValue(domain, symbolName, fname = "write_value") {
241
- const { invoke } = useContext(EventEmitterContext);
242
- return async () => {
243
- try {
244
- await invoke(domain, fname, { symbol_name: symbolName, value: true });
245
- await sleep(300); // Sleep for 300ms before writing false
246
- await invoke(domain, fname, { symbol_name: symbolName, value: false });
247
- }
248
- catch (err) {
249
- console.error(`Error handling tap action for ${symbolName}: ${err}`);
250
- }
251
- };
252
- }
1
+ import{useContext,useRef,useEffect,useCallback}from"react";import{EventEmitterContext}from"../core/EventEmitterContext";function sleep(e){return new Promise((t=>setTimeout(t,e)))}export const useRegisterSymbols=(e,t,n,r={})=>{const{subscribe:o,unsubscribe:u,isConnected:s,invoke:c}=useContext(EventEmitterContext),a=useRef([]),i=useRef(!0);return useEffect((()=>{i.current=!0;const r=async()=>{for(const[r,u]of Object.entries(n))try{const n=o(`${e}/${u}`,(e=>{if(i.current){const n=t[r];n&&n(e.value)}}));a.current.push(n),await c(e,"refresh",{topic:`${u}`})}catch(e){}};if(s())r();else{let e=o("HUB/connected",(()=>{setTimeout((()=>{r(),u(e)}),500)}));a.current.push(e)}return()=>{i.current=!1,a.current.forEach((e=>u(e))),a.current=[]}}),[]),null};export function useWriteValue(e,t,n="write_value"){const{invoke:r}=useContext(EventEmitterContext);return async o=>{try{await r(e,n,{topic:t,value:o})}catch(e){}}}export function useWriteScaledValue(e,t,n,r,o="write_value"){const{invoke:u}=useContext(EventEmitterContext);return useCallback((async s=>{const c=(s-r)/n;try{await u(e,o,{symbol_name:t,value:c})}catch(e){}}),[t,n,r,u])}export function useTapValue(e,t,n="write_value"){const{invoke:r}=useContext(EventEmitterContext);return async()=>{try{await r(e,n,{symbol_name:t,value:!0}),await sleep(300),await r(e,n,{symbol_name:t,value:!1})}catch(e){}}}
@@ -1,10 +1 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
- * Created Date: 2024-04-30 12:14:43
4
- * -----
5
- * Last Modified: 2024-04-30 12:15:46
6
- * -----
7
- *
8
- */
9
- export { useAdsRegisterSymbols, useAdsWriteValue, useAdsTapValue } from "./adsHooks";
10
- export { useScaledValue, kMillimeters2Inches } from './useScaledValue';
1
+ export{useAdsRegisterSymbols,useAdsWriteValue,useAdsTapValue}from"./adsHooks";export{useScaledValue,kMillimeters2Inches}from"./useScaledValue";
@@ -1,86 +1 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
- * Created Date: 2024-04-30 11:41:59
4
- * -----
5
- * Last Modified: 2024-05-21 19:58:23
6
- * -----
7
- *
8
- */
9
- import { useCallback, useState, useEffect } from 'react';
10
- /**
11
- * Multiple millimeters by this constant for inches.
12
- */
13
- export const kMillimeters2Inches = 1 / 25.4;
14
- /**
15
- * Multiply netwons by this constant for pounds.
16
- */
17
- export const kNewtons2Pounds = 1 / 4.4482216153;
18
- /**
19
- * A custom React hook for converting values between different scales,
20
- * with support for dynamically updating the scale and offset. This hook manages values
21
- * in a base unit and allows for easy conversion to a display unit, updating
22
- * reactively to changes in the conversion factors.
23
- *
24
- * @param initialValue - The initial value in the base unit.
25
- * @param scale - The dynamic scale factor used for conversion to the display unit.
26
- * @param offset - An optional offset applied after scaling (default is 0).
27
- * @returns A tuple containing the display value and a setter function for updating
28
- * the value in the display unit.
29
- *
30
- * @example
31
- * Here's how to use `useScaledValue` in a component that fetches a scale factor from a backend
32
- * and allows the user to input values in a converted scale, which are then handled in a base unit:
33
- *
34
- * ```tsx
35
- * import React, { useState, useEffect } from 'react';
36
- * import { useScaledValue } from './hooks/useScaledValue';
37
- *
38
- * const MeasurementInput: React.FC = () => {
39
- * const [units, setUnits] = useState<number>(1); // Start with a default scale of 1
40
- * const [xPosition, setXPosition] = useScaledValue(0, units);
41
- *
42
- * useEffect(() => {
43
- * async function fetchScale() {
44
- * try {
45
- * // Simulate fetching scale factor from a backend
46
- * const res = await invoke("GNV", "read_value", { group: "ux", key: "kSelectedUnits" });
47
- * setUnits(res.data); // Update scale based on backend response
48
- * } catch (error) {
49
- * console.error('Failed to fetch units', error);
50
- * }
51
- * }
52
- * fetchScale();
53
- * }, []);
54
- *
55
- * return (
56
- * <input
57
- * type="number"
58
- * value={xPosition.toFixed(2)} // Display the value formatted to 2 decimal places
59
- * onChange={(e) => setXPosition(parseFloat(e.target.value))}
60
- * />
61
- * );
62
- * };
63
- *
64
- * export default MeasurementInput;
65
- * ```
66
- *
67
- * In this example, `useScaledValue` is used to manage a measurement input in a dynamic unit system.
68
- * The component fetches the conversion scale from the backend upon component mounting and updates the
69
- * input display accordingly. The user's input is converted back to the base unit before being processed.
70
- */
71
- export function useScaledValue(initialValue, scale, offset = 0) {
72
- const [baseValue, setBaseValue] = useState(initialValue);
73
- const [displayValue, setDisplayValue] = useState(() => (initialValue * scale) + offset);
74
- // Update display value whenever baseValue, scale, or offset changes
75
- useEffect(() => {
76
- // In autocore-react, we multiple to scale incoming values,
77
- // divide to scale outgoing values.
78
- // This is an INCOMING value, so we multiply.
79
- setDisplayValue((baseValue * scale) + offset);
80
- }, [baseValue, scale, offset]);
81
- // Function to update baseValue when displayValue changes
82
- const handleSetDisplayValue = useCallback((newValue) => {
83
- setBaseValue(newValue);
84
- }, [scale, offset]);
85
- return [displayValue, handleSetDisplayValue];
86
- }
1
+ import{useCallback,useState,useEffect}from"react";export const kMillimeters2Inches=1/25.4;export const kNewtons2Pounds=1/4.4482216153;export function useScaledValue(e,t,s=0){const[u,c]=useState(e),[o,a]=useState((()=>e*t+s));useEffect((()=>{a(u*t+s)}),[u,t,s]);return[o,useCallback((e=>{c(e)}),[t,s])]}
@@ -1,9 +1 @@
1
- /*
2
- * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
3
- * Created Date: 2024-04-24 11:47:13
4
- * -----
5
- * Last Modified: 2024-04-24 11:48:08
6
- * -----
7
- *
8
- */
9
- export {};
1
+ export{};