@adcops/autocore-react 3.0.0
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.
- package/LICENSE +59 -0
- package/additional-docs/ButtonApiSpecs.md +48 -0
- package/additional-docs/GlobalEventEmitter.md +244 -0
- package/additional-docs/general_recommendations.md +22 -0
- package/dist/components/DPad.css +522 -0
- package/dist/components/DPad.d.ts +34 -0
- package/dist/components/DPad.js +1 -0
- package/dist/components/Indicator.d.ts +81 -0
- package/dist/components/Indicator.js +1 -0
- package/dist/components/IndicatorButton.d.ts +137 -0
- package/dist/components/IndicatorButton.js +1 -0
- package/dist/components/IndicatorColor.d.ts +26 -0
- package/dist/components/IndicatorColor.js +1 -0
- package/dist/components/Osk.d.ts +14 -0
- package/dist/components/Osk.js +1 -0
- package/dist/components/OskDialog.d.ts +33 -0
- package/dist/components/OskDialog.js +1 -0
- package/dist/components/ValueDisplay.d.ts +99 -0
- package/dist/components/ValueDisplay.js +1 -0
- package/dist/components/osk.css +123 -0
- package/dist/core/EventEmitterContext.d.ts +223 -0
- package/dist/core/EventEmitterContext.js +1 -0
- package/dist/core/MaskPatterns.d.ts +71 -0
- package/dist/core/MaskPatterns.js +1 -0
- package/dist/core/NumerableTypes.d.ts +58 -0
- package/dist/core/NumerableTypes.js +1 -0
- package/dist/core/PositionContext.d.ts +38 -0
- package/dist/core/PositionContext.js +1 -0
- package/dist/core/UniqueId.d.ts +16 -0
- package/dist/core/UniqueId.js +1 -0
- package/dist/core/ValueSimulator.d.ts +71 -0
- package/dist/core/ValueSimulator.js +1 -0
- package/dist/core/hoc.d.ts +31 -0
- package/dist/core/hoc.js +1 -0
- package/dist/hub/HubBase.d.ts +169 -0
- package/dist/hub/HubBase.js +1 -0
- package/dist/hub/HubSimulate.d.ts +20 -0
- package/dist/hub/HubSimulate.js +1 -0
- package/dist/hub/HubSocketIo.d.ts +101 -0
- package/dist/hub/HubSocketIo.js +1 -0
- package/dist/hub/HubTauri.d.ts +86 -0
- package/dist/hub/HubTauri.js +1 -0
- package/dist/hub/index.d.ts +13 -0
- package/dist/hub/index.js +1 -0
- package/docs/.nojekyll +1 -0
- package/docs/assets/highlight.css +106 -0
- package/docs/assets/icons.js +15 -0
- package/docs/assets/icons.svg +1 -0
- package/docs/assets/main.js +59 -0
- package/docs/assets/navigation.js +1 -0
- package/docs/assets/search.js +1 -0
- package/docs/assets/style.css +1414 -0
- package/docs/classes/components_Indicator.Indicator.html +105 -0
- package/docs/classes/components_IndicatorButton.IndicatorButton.html +119 -0
- package/docs/classes/components_OskDialog.OskDialog.html +117 -0
- package/docs/classes/components_ValueDisplay.ValueDisplay.html +104 -0
- package/docs/classes/core_ValueSimulator.ValueSimulator.html +41 -0
- package/docs/classes/hub_HubBase.HubBase.html +67 -0
- package/docs/classes/hub_HubSimulate.HubSimulate.html +72 -0
- package/docs/classes/hub_HubSocketIo.HubSocketIo.html +80 -0
- package/docs/classes/hub_HubTauri.HubTauri.html +80 -0
- package/docs/enums/components_DPad.VcJoyPadAction.html +10 -0
- package/docs/enums/components_DPad.VcJoyPadButtonId.html +7 -0
- package/docs/enums/components_IndicatorButton.ActionMode.html +6 -0
- package/docs/enums/components_IndicatorColor.IndicatorColor.html +13 -0
- package/docs/functions/components_DPad.VcDPad.html +5 -0
- package/docs/functions/components_Osk.Osk.html +5 -0
- package/docs/functions/core_EventEmitterContext.EventEmitterProvider.html +8 -0
- package/docs/functions/core_UniqueId.UniqueId.html +4 -0
- package/docs/functions/core_hoc.hocAddSubscription.html +6 -0
- package/docs/functions/hub.createHub.html +3 -0
- package/docs/hierarchy.html +1 -0
- package/docs/index.html +69 -0
- package/docs/interfaces/components_IndicatorButton.IndicatorButtonProps.html +635 -0
- package/docs/interfaces/components_IndicatorButton.IndicatorButtonState.html +10 -0
- package/docs/interfaces/core_DimensionsContext.IDimensionsContext.html +4 -0
- package/docs/interfaces/core_EventEmitterContext.Action.html +5 -0
- package/docs/interfaces/core_EventEmitterContext.EventEmitterContextType.html +18 -0
- package/docs/interfaces/core_EventEmitterContext.State.html +8 -0
- package/docs/interfaces/core_EventEmitterContext.Subscription.html +6 -0
- package/docs/modules/components_DPad.html +5 -0
- package/docs/modules/components_Indicator.html +4 -0
- package/docs/modules/components_IndicatorButton.html +7 -0
- package/docs/modules/components_IndicatorColor.html +2 -0
- package/docs/modules/components_Osk.html +3 -0
- package/docs/modules/components_OskDialog.html +3 -0
- package/docs/modules/components_ValueDisplay.html +3 -0
- package/docs/modules/core_DimensionsContext.html +4 -0
- package/docs/modules/core_EventEmitterContext.html +11 -0
- package/docs/modules/core_InputPatterns.html +2 -0
- package/docs/modules/core_NumerableTypes.html +2 -0
- package/docs/modules/core_UniqueId.html +2 -0
- package/docs/modules/core_ValueSimulator.html +3 -0
- package/docs/modules/core_hoc.html +3 -0
- package/docs/modules/hub.html +6 -0
- package/docs/modules/hub_HubBase.html +3 -0
- package/docs/modules/hub_HubSimulate.html +3 -0
- package/docs/modules/hub_HubSocketIo.html +3 -0
- package/docs/modules/hub_HubTauri.html +2 -0
- package/docs/types/core_EventEmitterContext.EmitterDispatchFunction.html +1 -0
- package/docs/types/core_EventEmitterContext.EmitterSubscribeFunction.html +1 -0
- package/docs/types/core_EventEmitterContext.EmitterUnsubscribeFunction.html +1 -0
- package/docs/types/core_NumerableTypes.NumerableFormatOptions.html +1 -0
- package/docs/types/core_hoc.HocAddSubscriptionProps.html +4 -0
- package/docs/variables/core_DimensionsContext.DimensionsContext.html +1 -0
- package/docs/variables/core_EventEmitterContext.EventEmitterContext.html +5 -0
- package/docs/variables/core_InputPatterns.InputPatterns.html +2 -0
- package/package.json +79 -0
- package/readme.md +140 -0
- package/src/components/DPad.css +522 -0
- package/src/components/DPad.tsx +94 -0
- package/src/components/Indicator.tsx +243 -0
- package/src/components/IndicatorButton.tsx +306 -0
- package/src/components/IndicatorColor.ts +36 -0
- package/src/components/Osk.tsx +193 -0
- package/src/components/OskDialog.tsx +165 -0
- package/src/components/ValueDisplay.tsx +181 -0
- package/src/components/osk.css +123 -0
- package/src/core/EventEmitterContext.tsx +394 -0
- package/src/core/MaskPatterns.ts +82 -0
- package/src/core/NumerableTypes.ts +81 -0
- package/src/core/PositionContext.ts +60 -0
- package/src/core/UniqueId.ts +41 -0
- package/src/core/ValueSimulator.ts +167 -0
- package/src/core/hoc.tsx +65 -0
- package/src/hub/HubBase.ts +293 -0
- package/src/hub/HubSimulate.ts +47 -0
- package/src/hub/HubSocketIo.ts +166 -0
- package/src/hub/HubTauri.ts +145 -0
- package/src/hub/index.ts +41 -0
- package/terser.config.cjs +25 -0
- package/todo.md +18 -0
- package/tools/copy-distribution-files.cjs +73 -0
- package/tools/minify.cjs +56 -0
- package/tsconfig.json +34 -0
- package/typedoc.json +13 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
ADC STANDARD SOFTWARE LICENSE AGREEMENT
|
|
2
|
+
|
|
3
|
+
This Software License Agreement ("Agreement") is made and effective on the date of delivery by and between Automated Design Corp. ("Developer") and the buyer ("Licensee").
|
|
4
|
+
Developer has developed and licenses to users its software (the "Software") for use in operation of and data collection from Automated Design Corp products and systems.
|
|
5
|
+
|
|
6
|
+
Licensee desires to utilize a copy of the Software.
|
|
7
|
+
|
|
8
|
+
NOW, THEREFORE, in consideration of the mutual promises set forth herein, Developer and Licensee agree as follows:
|
|
9
|
+
|
|
10
|
+
1. License.
|
|
11
|
+
Developer hereby grants to Licensee a perpetual, non-exclusive, limited license to use the Software in the United States of America as set forth in this Agreement.
|
|
12
|
+
|
|
13
|
+
2. Restrictions.
|
|
14
|
+
Licensee shall not modify, copy, duplicate, reproduce, license or sublicense the Software, or transfer or convey the Software or any right in the Software to anyone else without the prior written consent of Developer; provided that Licensee may make one copy of the Software for backup or archival purposes.
|
|
15
|
+
|
|
16
|
+
3. Warranty of Title.
|
|
17
|
+
Developer hereby represents and warrants to Licensee that Developer is the owner of the Software or otherwise has the right to grant to Licensee the rights set forth in this Agreement. In the event any breach or threatened breach of the foregoing representation and warranty, Licensee's sole remedy shall be to require Developer or to either: i) procure, at Developer's expense, the right to use the Software, ii) replace the Software or any part thereof that is in breach and replace it with Software of comparable functionality that does not cause any breach, or iii) refund to Licensee the full amount of the license fee upon the return of the Software and all copies thereof to Developer.
|
|
18
|
+
|
|
19
|
+
4. Warranty of Functionality.
|
|
20
|
+
A. For a period of ONE YEAR following delivery of the Software to Licensee (the "Warranty Period"), Developer warrants that the Software shall perform in all material respects according to the Developer's specifications concerning the Software when used with the appropriate computer equipment. In the event of any breach or alleged breach of this warranty, Licensee shall promptly notify Developer and return the Software to Developer at Licensee’s expense. Licensee’s sole remedy shall be that Developer shall correct the Software so that it operates according to the warranty. This warranty shall not apply to the Software if modified by anyone or if used improperly or on an operating environment not approved by Licensor.
|
|
21
|
+
|
|
22
|
+
B. In the event of any defect in the media upon which the Software is provided arising within 1 MONTH of the date of delivery of the Software, upon return to Developer of the Software upon the original media, Developer shall provide Licensee a new copy of the Software.
|
|
23
|
+
|
|
24
|
+
5. Software Maintenance.
|
|
25
|
+
A. Standard maintenance. During the Warranty Period, Developer shall provide to Licensee any new, corrected or enhanced version of the Software as created by Developer. Such enhancement shall include all modifications to the Software which increase the speed, efficiency or ease of use of the Software, but shall not include any substantially new or rewritten version of the Software.
|
|
26
|
+
|
|
27
|
+
B. Optional maintenance. After expiration of the Warranty Period, Licensee may continue to receive maintenance support for successive twelve (12) month periods. The charge for such optional maintenance support shall be Developer's regular list price for maintenance and support for the Software as published from time to time by Developer. Licensor shall notify Developer in writing if it desires to receive optional maintenance. If Licensee fails to take optional maintenance and later elects to receive it, Developer reserves the right to charge Licensee its maintenance fees for the period of the lapse in maintenance. Developer may elect to discontinue maintenance at any time upon notice to Licensee, and refund of any then unearned maintenance fees.
|
|
28
|
+
|
|
29
|
+
6. Payment.
|
|
30
|
+
Payment of the license fee shall be made upon delivery of the Software, unless the payment terms of the applicable ADC proposal state otherwise. Payment of any other amount owed by Licensee to Developer pursuant to this Agreement shall be paid within thirty (30) days following invoice from Developer. In the event any overdue amount owed by Licensee is not paid following ten (10) days written notice from Developer, then in addition to any other amount due, Developer may impose and Licensee shall pay a late payment charge at the rate of one percent (1%) per month on any overdue amount.
|
|
31
|
+
|
|
32
|
+
7. Taxes.
|
|
33
|
+
In addition to all other amounts due hereunder, Licensee shall also pay to Developer, or reimburse Developer as appropriate, all amounts due for property tax on the Software and for sales, use, excise taxes or other taxes which are measured directly by payments made by Licensee to Developer. In no event shall Licensee be obligated to pay any tax paid on the income of Developer or paid for Developer's privilege of doing business.
|
|
34
|
+
|
|
35
|
+
8. Warranty Disclaimer.
|
|
36
|
+
DEVELOPER'S WARRANTIES SET FORTH IN THIS AGREEMENT ARE EXCLUSIVE AND ARE IN LIEU OF ALL OTHER WARRANTIES, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
|
|
37
|
+
|
|
38
|
+
9. Limitation of Liability.
|
|
39
|
+
Developer shall not be responsible for, and shall not pay, any amount of incidental, consequential or other indirect damages, whether based on lost revenue or otherwise, regardless of whether Developer was advised of the possibility of such losses in advance. In no event shall Developer's liability hereunder exceed the amount of license fees paid by Licensee, regardless of whether Licensee's claim is based on contract, tort, strict liability, product liability or otherwise.
|
|
40
|
+
|
|
41
|
+
10. Notice.
|
|
42
|
+
Any notice required by this Agreement or given in connection with it, shall be in writing and shall be given to the appropriate party by personal delivery or by certified mail, postage prepaid, or recognized overnight delivery services.
|
|
43
|
+
|
|
44
|
+
11. Governing Law.
|
|
45
|
+
This Agreement shall be construed and enforced in accordance with the laws of the state of Illinois, USA.
|
|
46
|
+
|
|
47
|
+
12. No Assignment.
|
|
48
|
+
Neither this Agreement nor any interest in this Agreement may be assigned by Licensee without the prior express written approval of Developer.
|
|
49
|
+
|
|
50
|
+
13. Final Agreement.
|
|
51
|
+
This Agreement terminates and supersedes all prior understandings or agreements on the subject matter hereof. This Agreement may be modified only by a further writing that is duly executed by both parties.
|
|
52
|
+
|
|
53
|
+
14. Severability.
|
|
54
|
+
If any term of this Agreement is held by a court of competent jurisdiction to be invalid or unenforceable, then this Agreement, including all of the remaining terms, will remain in full force and effect as if such invalid or unenforceable term had never been included.
|
|
55
|
+
|
|
56
|
+
15. Headings.
|
|
57
|
+
Headings used in this Agreement are provided for convenience only and shall not be used to construe meaning or intent.
|
|
58
|
+
|
|
59
|
+
IN WITNESS WHEREOF, Developer and Licensee have executed this Software License Agreement on the day and year first above written.
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
# Button API
|
|
2
|
+
|
|
3
|
+
## Overview
|
|
4
|
+
Buttons in an HMI need to accomplish the following.
|
|
5
|
+
|
|
6
|
+
- Indication of state
|
|
7
|
+
- - Properties:
|
|
8
|
+
- - - topic? : The name of the topic to monitor for state indicator.
|
|
9
|
+
- - - onColor? : The button severity to apply when the state is TRUE.
|
|
10
|
+
- - - offColor? : The button severity to apply state is FALSE.
|
|
11
|
+
- - - onLabel? : Text displayed when the state is TRUE. If null or undefined, the label property is used.
|
|
12
|
+
- - - offLabel? : Text displayed when the state is FALSE. If null or undefined, the label property is used.
|
|
13
|
+
- - PrimeReact severity constants should be acceptable for onColor and offColor. However, the following should also map:
|
|
14
|
+
- - - "on" -> "success"
|
|
15
|
+
- - - "off" -> "secondary"
|
|
16
|
+
- - If topic is not undefined or null, but state is undefined or null, then the button is invalid.
|
|
17
|
+
- - - Background: black Foreground: gray
|
|
18
|
+
- - - This style most likely need to be created as a constant.
|
|
19
|
+
- Signal (dispath) events
|
|
20
|
+
- - This is more complicated because a signal has three properties:
|
|
21
|
+
- - - The name of the command that must be invoked.
|
|
22
|
+
- - - The topic for that command.
|
|
23
|
+
- - - An optional value. For pushbuttons, it is common for that value to be TRUE when the button is clicked or pressed and FALSE when released.
|
|
24
|
+
- - - - It is also common for an invert property so that the direction of those signals are inverted.
|
|
25
|
+
- - Edge cases that need more complicated handling (invoking events with additional arguments) can be handled using standard button events.
|
|
26
|
+
- - HMI buttons usually support sending signals on the following input modes:
|
|
27
|
+
- - - TAP : When the button is pressed down, a TRUE signal is broadcast. When released, a FALSE signal is broadcast.
|
|
28
|
+
- - - - This mode is meant to simulate the behavior of an actual industrial pushbutton.
|
|
29
|
+
- - - - This is, by far, the most common use case.
|
|
30
|
+
- - - TOGGLE: When the button is clicked, it sends and sets its state to the inverse of its current state.
|
|
31
|
+
- - - PRESSED : When the button is pressed, it signals the topic and the TRUE value, though the value is usually ignored.
|
|
32
|
+
- - - RELEASED : When the button is released, it signals the topic and the FALSE value, though the value is usually ignored.
|
|
33
|
+
- - - The signal values listed here would be inverted if the inverted property is true.
|
|
34
|
+
- - While theoretically possible that a button have need to support both a tap and toggle, or pressed/relesaed, these are extreme edge cases.
|
|
35
|
+
- - - Therefore, instead of creating a massive number of properties, we shall create an inputMode property.
|
|
36
|
+
- - Properties
|
|
37
|
+
- - - inputMode: Tap, Toggle, pressed, released
|
|
38
|
+
- - - command: name of the command to invoke
|
|
39
|
+
- - - commandArgs: Arguments sent with the command. Usually this will be an object containing the topic name and the value.
|
|
40
|
+
- - - disableTopic : A topic the button can monitor to disable dispatching signals on events.
|
|
41
|
+
- - - invisbleTopic : A topic the button can monitor to hide its visibility.
|
|
42
|
+
- Because buttons are such a common function, we will extend the PrimeReact Button class to have these features.
|
|
43
|
+
- These features are commonly needed, so we will also make a HOC function to add these properties and functions to an existing component.
|
|
44
|
+
- Input mode should be enumerated.
|
|
45
|
+
- The buttons should default to being "raised," which is a standard attribute of PrimeReact buttons.
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
@@ -0,0 +1,244 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
This is a quick example that needs to be updated. Stay tuned.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## Wrap the application in the EventEmitterContext
|
|
7
|
+
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
// App.js or App.tsx
|
|
11
|
+
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import { EventEmitterProvider } from "autocore-react/core/EventEmitterContext.js";
|
|
14
|
+
import ContentView from 'path-to/ContentView';
|
|
15
|
+
|
|
16
|
+
const App = () => {
|
|
17
|
+
return (
|
|
18
|
+
<EventEmitterProvider>
|
|
19
|
+
<ContentView />
|
|
20
|
+
{/* Other components */}
|
|
21
|
+
</EventEmitterProvider>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export default App;
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## Subscribing in a component
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
import React, { useState, useEffect, useContext } from 'react';
|
|
34
|
+
import { Button } from "primereact/button";
|
|
35
|
+
import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
|
|
36
|
+
import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
|
|
37
|
+
import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
|
|
38
|
+
|
|
39
|
+
export const ContentView: React.FC = () => {
|
|
40
|
+
const [count, setCount] = useState(0);
|
|
41
|
+
const [blink, setBlink] = useState(false);
|
|
42
|
+
const [controlPower, setControlPower] = useState<number | string | null | undefined>(0);
|
|
43
|
+
const { subscribe } = useContext(EventEmitterContext);
|
|
44
|
+
|
|
45
|
+
useEffect(() => {
|
|
46
|
+
console.log("Setting up interval.");
|
|
47
|
+
|
|
48
|
+
const intervalId = setInterval(() => {
|
|
49
|
+
console.log("blink");
|
|
50
|
+
setBlink(blink => !blink);
|
|
51
|
+
}, 1000);
|
|
52
|
+
|
|
53
|
+
// Subscribe to the 'there-is-no-spoon' topic
|
|
54
|
+
const unsubscribe = subscribe('there-is-no-spoon', (value) => {
|
|
55
|
+
setControlPower(value);
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
return () => {
|
|
59
|
+
console.log("Cleaning up.");
|
|
60
|
+
clearInterval(intervalId);
|
|
61
|
+
unsubscribe(); // Unsubscribe when the component unmounts
|
|
62
|
+
}
|
|
63
|
+
}, [subscribe]);
|
|
64
|
+
|
|
65
|
+
const incrementCount = () => {
|
|
66
|
+
setCount(count + 1);
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
<div>
|
|
71
|
+
<p>{count}</p>
|
|
72
|
+
<Button onClick={incrementCount}>Increment</Button>
|
|
73
|
+
<br />
|
|
74
|
+
<div>
|
|
75
|
+
Maximum Power: <ValueDisplay value={0.34} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
|
|
76
|
+
</div>
|
|
77
|
+
<div>
|
|
78
|
+
Control Power: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
|
|
79
|
+
</div>
|
|
80
|
+
<div>
|
|
81
|
+
Received Power: <ValueDisplay value={controlPower} x={200} y={350} width={100} height={20} format="0%"></ValueDisplay>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
## Publishing a value from Typescript.
|
|
92
|
+
|
|
93
|
+
This is a shit example. Usually, use the Hub singleton. However, this example displays the concept.
|
|
94
|
+
|
|
95
|
+
Implement a publisher function.
|
|
96
|
+
|
|
97
|
+
```
|
|
98
|
+
// EventPublisher.ts
|
|
99
|
+
import React, { useContext } from 'react';
|
|
100
|
+
import { EventEmitterContext } from '../path/to/EventEmitterContext'; // Adjust the import path as necessary
|
|
101
|
+
|
|
102
|
+
export const publishToThereIsNoSpoon = (topic: string, payload: any) => {
|
|
103
|
+
const { dispatch } = useContext(EventEmitterContext);
|
|
104
|
+
|
|
105
|
+
dispatch({
|
|
106
|
+
topic: topic,
|
|
107
|
+
payload: payload,
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Publish from a component:
|
|
114
|
+
|
|
115
|
+
```
|
|
116
|
+
import React from 'react';
|
|
117
|
+
import { publishToThereIsNoSpoon } from './EventPublisher';
|
|
118
|
+
|
|
119
|
+
const SomeComponent: React.FC = () => {
|
|
120
|
+
const handleClick = () => {
|
|
121
|
+
// Publish an event with some payload
|
|
122
|
+
publishToThereIsNoSpoon("New Value");
|
|
123
|
+
};
|
|
124
|
+
|
|
125
|
+
return (
|
|
126
|
+
<button onClick={handleClick}>Publish Event</button>
|
|
127
|
+
);
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export default SomeComponent;
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
### Component Example:
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
import React, { useState, useEffect, useContext } from 'react';
|
|
145
|
+
import { Button } from "primereact/button";
|
|
146
|
+
import { ValueDisplay } from 'autocore-react/components/ValueDisplay';
|
|
147
|
+
import { Indicator, IndicatorGreen, IndicatorOff } from "autocore-react/components/Indicator";
|
|
148
|
+
import {EventEmitterContext} from "autocore-react/core/EventEmitterContext";
|
|
149
|
+
import {ValueSimulator} from "autocore-react/core/ValueSimulator";
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
export const ContentView: React.FC = () => {
|
|
154
|
+
const [count, setCount] = useState(0);
|
|
155
|
+
const [blink, setBlink] = useState(false);
|
|
156
|
+
const [controlPower, setControlPower] = useState(false);
|
|
157
|
+
const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
|
|
158
|
+
|
|
159
|
+
const simulator = new ValueSimulator(dispatch);
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
useEffect(() => {
|
|
163
|
+
|
|
164
|
+
simulator.start();
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
// Subscribe to the 'there-is-no-spoon' topic
|
|
168
|
+
// TODO: add an unsubscribe feature
|
|
169
|
+
const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
|
|
170
|
+
console.log(`value-simulator-bBit1: ${value}`);
|
|
171
|
+
setControlPower(value);
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
const unsubscribeBlink = subscribe('value-simulator-bBit2', (value) => {
|
|
175
|
+
console.log(`value-simulator-bBit2: ${value}`);
|
|
176
|
+
setBlink(value);
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
const unsubscribePower = subscribe('value-simulator-iRamp1', (value) => {
|
|
181
|
+
console.log(`value-simulator-iRamp1: ${value}`);
|
|
182
|
+
setCount(value);
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
// console.log(`IntervalID: ${intervalId}`);
|
|
187
|
+
|
|
188
|
+
return () => {
|
|
189
|
+
unsubscribe(unsubscribeControlPower);
|
|
190
|
+
unsubscribe(unsubscribeBlink);
|
|
191
|
+
unsubscribe(unsubscribePower);
|
|
192
|
+
simulator.stop();
|
|
193
|
+
}
|
|
194
|
+
}, [] );
|
|
195
|
+
|
|
196
|
+
const incrementCount = () => {
|
|
197
|
+
setCount(count + 1);
|
|
198
|
+
};
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
return (
|
|
203
|
+
<div>
|
|
204
|
+
<p>{count}</p>
|
|
205
|
+
<Button onClick={incrementCount}>Increment</Button>
|
|
206
|
+
<br />
|
|
207
|
+
<div>
|
|
208
|
+
Maximum Power: <ValueDisplay value={count / 100} x={200} y={320} width={100} height={20} format="0%"></ValueDisplay>
|
|
209
|
+
</div>
|
|
210
|
+
<div>
|
|
211
|
+
Control Power: <Indicator value={controlPower}></Indicator>
|
|
212
|
+
</div>
|
|
213
|
+
<div>
|
|
214
|
+
Blink: <Indicator value={blink} onColor={IndicatorGreen} offColor={IndicatorOff} />
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
);
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
|
|
223
|
+
```
|
|
224
|
+
|
|
225
|
+
|
|
226
|
+
|
|
227
|
+
|
|
228
|
+
# Higher Order Component Subscription
|
|
229
|
+
|
|
230
|
+
As it is infeasible for autocore-react to modify every possible component to streamline subscription
|
|
231
|
+
and dispatching capabilities, we add Higher Order Component (HOC) functions to easily adapt a generic
|
|
232
|
+
component into one that can subscribe to events and values.
|
|
233
|
+
|
|
234
|
+
|
|
235
|
+
// For a component expecting 'value' prop
|
|
236
|
+
```
|
|
237
|
+
|
|
238
|
+
const SubscribedValueDisplay = hocAddSubscription(ValueDisplay, 'some-topic', 'value');
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
And use it in your component:
|
|
242
|
+
```
|
|
243
|
+
<SubscribedValueDisplay x={200} y={320} width={100} height={20} format="0%" />
|
|
244
|
+
``````
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
# General Recommendations
|
|
2
|
+
|
|
3
|
+
These recommendations will help you skip over all the pitfalls we've already worked through.
|
|
4
|
+
|
|
5
|
+
## Accepting Input
|
|
6
|
+
|
|
7
|
+
PrimeReact/InputGroup makes it easy to group a label, input field, units and button into the same contiguous "block." In general,
|
|
8
|
+
the user is best served by using InputGroup when accepting user input. Trying to put a similar effect together with a custom layout or CSS
|
|
9
|
+
tends to be a waste of time and effort.
|
|
10
|
+
|
|
11
|
+
See examples here: [InputGroup](https://primereact.org/inputgroup/ "https://primereact.org/inputgroup/")
|
|
12
|
+
|
|
13
|
+
### Numeric input
|
|
14
|
+
|
|
15
|
+
Use PrimeReact/InputNumber to filter numeric input as needed. If you need to filter programatically or the InputNumber field simply
|
|
16
|
+
won't work for your application, core/MaskPatterns/RegExMaskPatterns enumerates regular expression constants that can be used
|
|
17
|
+
to filter/validate input.
|
|
18
|
+
|
|
19
|
+
### Masking other inputs
|
|
20
|
+
|
|
21
|
+
Use PrimeReact/InputMask to filter other data as needed. We provide core/MaskPatterns/PrimeReactMaskPatterns for some common
|
|
22
|
+
masks.
|