Comprehensive Overview of React-Based Widgets for Waltz-CS

Waltz-CS offers an all-in-one web application, similar to JIVE and ASTOR, designed for multi-device monitoring with a user-friendly UI. It provides a platform for web-based GUIs, a variety of widgets for creating custom interfaces, and middleware connectors to different SCADA systems. Grid Widget is a key component that allows users to build interfaces for monitoring multiple devices, creating graphs, and configuring tabs and colors for better navigation. The Quick React overview showcases the popular usage of React with Redux for state management in building UI components. The inclusion of detailed configurations and actions in the Grid Widget for Waltz further demonstrates its versatility and functionality in managing device data and interactions.

• React-Based Widgets
• Waltz-CS
• Web Application Development
• Grid Widget
• React Overview

yokl_n Follow

Uploaded on Sep 10, 2024 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

Presentation Transcript

1. React-based widgets for Waltz-CS Chernov Vasily, INR RAS 1

2. Waltz is: 1. All-in-one web application like JIVE and ASTOR a. ui is oriented for multi device monitoring b. control devices c. visualize data, save graphs 2. A platform for web based GUIs. a. A set of widgets for constructing custom UI b. Pluggable architecture c. Modern build tools (webpack/rollup) d. Middleware connectors to different SCADA (Piazza project) 2

3. 3

4. Grid Widget Widget purpose - to build interfaces for multi device monitoring with ability to plot Widget can: - provide simple interface tab for device - with attributes - with clickable void commands - provide graphs for polled attributes - graph can show attributes from different devices - configure device and graphic tabs - configure grid geometry and tab color (for better navigation) 4

5. Quick React overview - - React is the most popular UI framework for JS Redux as storage Redux Component state properties state setState() function Example(props) { const {name} = props const [count, setCount] = useState(0); return <h1>{count}, {name}</h1>; action 1 render() action 2 } Component properties state render() ... 5

6. Grid Widget for Waltz Redux STATE Redux ACTIONS interface GridWidgetStore { general?: { geometry?:{cols: number,rows: number} bgcolor?: string, plots?: Array<{id: string, name: string}> }, devices?: Array<{ name: {host: string,device: string}, state: string, attributes?: Array<{ name: string, value?: string|number, history?: Array<{ time: number, value: string|number }> }>, commands?: Array<{name: string}> }> config?: { devices?: Array<{ name: {host: string,device: string}, attributes?: Array<{ name: string, show?: boolean, pollingPeriodS?: number, displayPlot?: string }>, commands?: Array<{ name: string, show?: boolean, }>}>}} setState: (state: GridWidgetStore) => {...} setDevice: (device: Device) => {...} removeDevice: (device: Device) => {...} updateAttributes: (device: Device) => {...} applyDiff: (diff: GridWidgetStore) => {...} setGeometry: ( geom: GridWidgetGeometry) => {...} setBgColor: (color: string) => {...} createNewPlot: (plotId: string) => {...} removePlot: (plot: PlotSettings) => {...} setPlot: (plot: PlotSettings) => {...} runCommand: ( device: DeviceIdentifier, name: String, cb: CommandCallback) => {...} Grid Widget Component 6

7. Waltz Integration: Schema Waltz Custom code GridViewWidget ui() makeGridWidget(cbk) api() API Redux Store Tango CS Waltz libs grid_widget $init() ReactDom.render(el) Component grid_widget_layout ui() 7

8. Waltz Integration: Project structure @waltz-controls/waltz-grid-widget - GridWidget is a standalone React Component - Easy to test Architecture relies on a shared-libs project since we have to have exact same React/Redux instances along projects Custom code that connects Waltz middleware and GridWidget is stored in the main Waltz repository @waltz-controls/waltz GridWidget React component @waltz-controls/[LIBS] - makeGridWidget(cbk) custom connector code Testing code @waltz-controls/waltz-grid-widget @waltz-controls/waltz-shared-libs @waltz-controls/waltz-shared-libs - @waltz-controls/waltz-shared-libs react react-dom redux react-redux @reduxjs/toolkit plotly.js 8

9. Waltz Integration: Sharing libraries webpack.config.js of @waltz-controls/waltz Shared-libs is based on Webpack DllPlugin technology module.exports = { /*...*/ plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require( "@waltz-controls/waltz-shared-libs/" + "dist/vendor-manifest.json")}), new AddAssetHtmlPlugin({ filepath: path.resolve(dirname, "node_modules/@waltz-controls/" + "waltz-shared-libs/dist/vendor.js")}), /*...*/ ] webpack.config.js of @waltz-controls/waltz- shared-libs module.exports = { context: __dirname, entry: { vendor: ['react', 'redux', /*...*/ ], }, /*...*/ plugins: [ new webpack.DllPlugin({ path: "../dist/[name]-manifest.json", format: true, name: "[name]" }), /*...*/ ] } package.json of @waltz-controls/waltz { /*...*/ "devDependencies": { "@waltz-controls/waltz-shared-libs": "^1.0.2", /*...*/ } } https://webpack.js.org/plugins/dll-plugin/#usage 9 }

10. Summary - Waltz is a web version of JIVE and ASTOR - is a multi-purpose WebApp - is a framework to build custom Web UI s - Future plans is to be interconnection software platform Waltz can be successfully extended with a React Components - waltz-shared-libs has been added to waltz project to provide necessary React/Redux dependencies - to create React Waltz plugin one must connect vendor.js file with webpack DllPlugin mechanism - 10

11. Thank You! For your attention 11