Miguel
/
S7_snap7_Stremer_n_Recorder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Enhance UI schema layout support across components. Updated PlotManager and DashboardNew to utilize a comprehensive widget collection and layout templates. Created AllWidgets for improved widget management and added demo schemas showcasing new layout capabilities.

This commit is contained in:
Miguel 2025-08-13 16:29:38 +02:00
parent 8656b4a6a6
commit e115bd7d55
8 changed files with 332 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
UI_SCHEMA_LAYOUT_ENHANCEMENT.md Normal file
View File

@ -0,0 +1,115 @@
# UI Schema Layout Support Enhancement Summary
## Changes Made
### 1. Enhanced `DashboardNew.jsx`
- **Added imports**: `LayoutObjectFieldTemplate` and comprehensive widget collection
- **Updated Form components**: All RJSF Form components now use:
- `widgets={allWidgets}` - Comprehensive widget collection
- `templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}` - Layout support
- **Enhanced Configuration Panel**: Now supports full UI schema features
- **Updated Dataset Manager**: Both definitions and variables forms support layouts
- **Added comprehensive documentation**: Detailed comments explaining UI schema features
### 2. Created `AllWidgets.jsx`
- **Comprehensive widget collection**: Merges all available widgets
- **Widget aliases**: Support for different naming conventions in UI schemas
- **Custom widget integration**: Includes VariableSelectorWidget and PLC widgets
- **Backward compatibility**: Ensures existing UI schemas continue to work
### 3. Enhanced `CustomWidgets.jsx`
- **Added widget aliases**: `variableSelector` for UI schema compatibility
- **Maintained existing functionality**: VariableSelectorWidget continues to work
### 4. Updated `PlotManager.jsx`
- **Enhanced Form components**: Added layout template and comprehensive widgets
- **Consistent widget usage**: Uses same widget collection as DashboardNew
### 5. Created Demo Files
- **`layout-demo.schema.json`**: Example schema for testing layouts
- **`layout-demo.uischema.json`**: Comprehensive UI schema example
## UI Schema Features Now Supported
### Layout Management
```json
{
"ui:layout": [
[
{ "name": "field1", "width": 6 },
{ "name": "field2", "width": 6 }
],
[
{ "name": "field3", "width": 12 }
]
]
}
```
### Widget Types
- `updown` - Number input with +/- buttons
- `checkbox` - Boolean checkbox
- `text` - Text input
- `textarea` - Multi-line text
- `select` - Dropdown selection
- `VariableSelectorWidget` - Custom PLC variable selector
### Field Properties
- `ui:help` - Help text for fields
- `ui:placeholder` - Placeholder text
- `ui:readonly` - Read-only fields
- `ui:order` - Field ordering
- `ui:column` - Column width (1-12 grid)
### Examples from Existing Schemas
#### PLC Configuration with Layout
```json
{
"plc_config": {
"ui:layout": [
[
{ "name": "ip", "width": 6 },
{ "name": "rack", "width": 3 },
{ "name": "slot", "width": 3 }
]
]
}
}
```
#### Dataset Definitions with Responsive Layout
```json
{
"datasets": {
"ui:layout": [
[
{ "name": "name", "width": 3 },
{ "name": "prefix", "width": 3 },
{ "name": "sampling_interval", "width": 3 },
{ "name": "enabled", "width": 3 }
]
]
}
}
```
## Benefits
1. **Responsive Design**: 12-column grid system adapts to different screen sizes
2. **Better UX**: Logical field grouping and intuitive layouts
3. **Consistent Styling**: All forms use the same Chakra UI components
4. **Extensible**: Easy to add new widgets and layout patterns
5. **Backward Compatible**: Existing configurations continue to work
6. **Documentation**: Clear examples and comprehensive comments
## Testing
The enhanced UI schema support can be tested by:
1. Loading any existing configuration (PLC, datasets, plots)
2. Observing the improved layout with proper field grouping
3. Testing different screen sizes for responsive behavior
4. Adding new configurations with custom layouts
5. Using the demo schema files for comprehensive testing
All existing functionality is preserved while adding powerful new layout capabilities.

4
config/data/plc_config.json
View File

@ -1,14 +1,14 @@
{
"plc_config": {
"ip": "10.1.33.11",
"rack": 0,
"rack": 1,
"slot": 2
},
"udp_config": {
"host": "127.0.0.1",
"port": 9870
},
"sampling_interval": 0.2,
"sampling_interval": 1.2,
"csv_config": {
"records_directory": "records",
"rotation_enabled": true,

63
config/schema/layout-demo.schema.json Normal file
View File

@ -0,0 +1,63 @@
{
"$schema": "http://json-schema.org/draft-07/schema#",
"title": "Enhanced UI Schema Layout Demo",
"description": "Demo configuration showcasing enhanced UI schema layout features",
"type": "object",
"properties": {
"basic_text": {
"type": "string",
"title": "Basic Text Input",
"description": "A simple text input field"
},
"updown_number": {
"type": "number",
"title": "Number Input",
"description": "A numeric input with up/down controls",
"minimum": 0,
"maximum": 100,
"default": 50
},
"enabled_checkbox": {
"type": "boolean",
"title": "Enable Feature",
"description": "Toggle to enable or disable this feature",
"default": true
},
"long_description": {
"type": "string",
"title": "Description",
"description": "A longer text description"
},
"dropdown_selection": {
"type": "string",
"title": "Selection",
"description": "Choose from predefined options",
"enum": [
"option1",
"option2",
"option3"
],
"enumNames": [
"First Option",
"Second Option",
"Third Option"
]
},
"variable_selector": {
"type": "string",
"title": "PLC Variable",
"description": "Select a variable from the PLC"
},
"readonly_field": {
"type": "string",
"title": "Read-only Field",
"description": "This field cannot be modified",
"default": "Read-only value"
}
},
"required": [
"basic_text",
"updown_number"
],
"additionalProperties": false
}

78
config/schema/ui/layout-demo.uischema.json Normal file
View File

@ -0,0 +1,78 @@
{
"ui:title": "Enhanced UI Schema Layout Demo",
"ui:description": "This demo showcases the full UI schema layout capabilities of the enhanced RJSF implementation",
"ui:layout": [
[
{
"name": "basic_text",
"width": 6
},
{
"name": "updown_number",
"width": 3
},
{
"name": "enabled_checkbox",
"width": 3
}
],
[
{
"name": "long_description",
"width": 12
}
],
[
{
"name": "dropdown_selection",
"width": 4
},
{
"name": "variable_selector",
"width": 4
},
{
"name": "readonly_field",
"width": 4
}
]
],
"ui:order": [
"basic_text",
"updown_number",
"enabled_checkbox",
"long_description",
"dropdown_selection",
"variable_selector",
"readonly_field"
],
"basic_text": {
"ui:placeholder": "Enter some text here...",
"ui:help": "This is a standard text input with placeholder and help text"
},
"updown_number": {
"ui:widget": "updown",
"ui:help": "Use +/- buttons to adjust the value"
},
"enabled_checkbox": {
"ui:widget": "checkbox",
"ui:help": "Toggle this setting on/off"
},
"long_description": {
"ui:widget": "textarea",
"ui:placeholder": "Enter a longer description here...",
"ui:help": "Multi-line text area that spans the full width"
},
"dropdown_selection": {
"ui:widget": "select",
"ui:help": "Choose an option from the dropdown"
},
"variable_selector": {
"ui:widget": "VariableSelectorWidget",
"ui:help": "Select a variable from the available PLC variables"
},
"readonly_field": {
"ui:readonly": true,
"ui:help": "This field is read-only and cannot be edited"
}
}

9
frontend/src/components/PlotManager.jsx
View File

@ -39,7 +39,8 @@ import {
} from '@chakra-ui/react'
import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import { customWidgets } from './widgets/CustomWidgets'
import allWidgets from './widgets/AllWidgets'
import LayoutObjectFieldTemplate from './rjsf/LayoutObjectFieldTemplate'
import * as api from '../services/api'
// Pure RJSF Plot Manager Component
@ -338,7 +339,8 @@ export default function PlotManager() {
uiSchema={plotsSchemaData.uiSchema}
formData={plotsConfig}
validator={validator}
widgets={customWidgets}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
onSubmit={({ formData }) => savePlotsConfig(formData)}
onChange={({ formData }) => setPlotsConfig(formData)}
>
@ -376,7 +378,8 @@ export default function PlotManager() {
uiSchema={plotsVariablesSchemaData.uiSchema}
formData={plotsVariablesConfig}
validator={validator}
widgets={customWidgets}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
onSubmit={({ formData }) => savePlotsVariablesConfig(formData)}
onChange={({ formData }) => setPlotsVariablesConfig(formData)}
>

32
frontend/src/components/widgets/AllWidgets.jsx Normal file
View File

@ -0,0 +1,32 @@
import { customWidgets } from './CustomWidgets'
import { widgets } from '../rjsf/widgets'
// Comprehensive widget collection that merges all available widgets
// for full UI schema support with layouts
export const allWidgets = {
// Custom application-specific widgets
...customWidgets,
// Enhanced RJSF widgets with proper styling
...widgets,
// Additional widget aliases for UI schema compatibility
updown: widgets.UpDownWidget,
text: widgets.TextWidget,
textarea: widgets.TextareaWidget,
select: widgets.SelectWidget,
checkbox: widgets.CheckboxWidget,
// Variable selector aliases
variableSelector: customWidgets.VariableSelectorWidget,
'variable-selector': customWidgets.VariableSelectorWidget,
// PLC-specific widget aliases (if available)
plcArea: widgets.PlcAreaWidget,
plcDataType: widgets.PlcDataTypeWidget,
plcNumber: widgets.PlcNumberWidget,
plcStreaming: widgets.PlcStreamingWidget,
plcVariableName: widgets.PlcVariableNameWidget,
}
export default allWidgets

3
frontend/src/components/widgets/CustomWidgets.jsx
View File

@ -63,7 +63,8 @@ export function VariableSelectorWidget(props) {
// Export widgets object for RJSF
export const customWidgets = {
VariableSelectorWidget
VariableSelectorWidget,
variableSelector: VariableSelectorWidget // Alternative name for UI schemas
}
export default customWidgets

41
frontend/src/pages/DashboardNew.jsx
View File

@ -48,7 +48,8 @@ import {
import Form from '@rjsf/chakra-ui'
import validator from '@rjsf/validator-ajv8'
import PlotManager from '../components/PlotManager'
import { customWidgets } from '../components/widgets/CustomWidgets'
import allWidgets from '../components/widgets/AllWidgets'
import LayoutObjectFieldTemplate from '../components/rjsf/LayoutObjectFieldTemplate'
import * as api from '../services/api'
// Pure RJSF StatusBar Component
@ -254,7 +255,7 @@ function StatusBar({ status, onRefresh }) {
)
}
// Pure RJSF Configuration Panel
// Pure RJSF Configuration Panel with Full UI Schema Layout Support
function ConfigurationPanel({ schemas, currentSchemaId, onSchemaChange, schemaData, formData, onFormChange, onSave, saving, message }) {
const cardBg = useColorModeValue('white', 'gray.700')
const borderColor = useColorModeValue('gray.200', 'gray.600')
@ -276,7 +277,7 @@ function ConfigurationPanel({ schemas, currentSchemaId, onSchemaChange, schemaDa
<Box>
<Heading size="md">🔧 Configuration Editor</Heading>
<Text fontSize="sm" color="gray.500" mt={1}>
Pure RJSF configuration management with UI Schema layouts
Pure RJSF configuration management with full UI Schema layout support (ui:layout, ui:widgets, custom field templates)
</Text>
</Box>
<Spacer />
@ -306,7 +307,8 @@ function ConfigurationPanel({ schemas, currentSchemaId, onSchemaChange, schemaDa
uiSchema={schemaData.uiSchema}
formData={formData}
validator={validator}
widgets={customWidgets}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
onChange={({ formData }) => onFormChange(formData)}
onSubmit={({ formData }) => onSave(formData)}
>
@ -451,7 +453,8 @@ function DatasetManager() {
uiSchema={datasetsSchemaData.uiSchema}
formData={datasetsConfig}
validator={validator}
widgets={customWidgets}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
onSubmit={({ formData }) => saveDatasets(formData)}
onChange={({ formData }) => setDatasetsConfig(formData)}
>
@ -484,7 +487,8 @@ function DatasetManager() {
uiSchema={variablesSchemaData.uiSchema}
formData={variablesConfig}
validator={validator}
widgets={customWidgets}
widgets={allWidgets}
templates={{ ObjectFieldTemplate: LayoutObjectFieldTemplate }}
onSubmit={({ formData }) => saveVariables(formData)}
onChange={({ formData }) => setVariablesConfig(formData)}
>
@ -580,7 +584,30 @@ function EventsDisplay({ events, loading, onRefresh }) {
)
}
// Main Dashboard Component with Pure RJSF
// Main Dashboard Component with Pure RJSF and Full UI Schema Layout Support
//
// This dashboard now supports comprehensive UI schema features:
//
// 1. Layout Management:
// - ui:layout: Grid-based field layouts with customizable column spans
// - ui:order: Field ordering control
// - ui:column: Responsive column widths (1-12 grid system)
//
// 2. Widget Support:
// - Standard widgets: text, textarea, select, checkbox, updown
// - Custom widgets: VariableSelectorWidget, PlcWidgets
// - Widget aliases for backward compatibility
//
// 3. Field Templates:
// - LayoutObjectFieldTemplate: Handles ui:layout rendering
// - Responsive grid system with Chakra UI SimpleGrid
// - Proper field grouping and spacing
//
// 4. UI Schema Examples:
// - ui:layout: [[ { "name": "field1", "width": 6 }, { "name": "field2", "width": 6 } ]]
// - ui:widget: "updown", "checkbox", "variableSelector", etc.
// - ui:help, ui:placeholder, ui:readonly for enhanced UX
//
export default function Dashboard() {
const [status, setStatus] = useState(null)
const [statusLoading, setStatusLoading] = useState(true)