React-based JSON Schema editor base-tool
npm install config-editor-basebash
npm install --save config-editor-base
`
---
$3
You can directly test the "raw" configuration editor by cloning this repository and running below npm install in root and in the example/ folder. After this, run npm start in the root as well as in the example/ folder.
---
$3
To publish your own custom version as an npm package, you can modify the package.json and run npm publish. You'll need to be logged in first.
---
$3
The module uses redux, hence you'll need to import the base module and the reducer as follows:
`jsx
// reducers.js
import { combineReducers } from 'redux'
import alert from './alert/reducer'
import { editor } from 'config-editor-base'
const rootReducer = combineReducers({
alert,
editor
})
export default rootReducer
`
In the parent App we can load an Editor module, which can be constructed as below:
`jsx
import React from 'react'
import { connect } from 'react-redux'
import { EncryptionModal } from 'config-editor-tools'
import { EditorSection } from 'config-editor-base'
import * as actionsAlert from '../alert/actions'
import AlertContainer from '../alert/AlertContainer'
class Editor extends React.Component {
render() {
let editorTools = [
{
name: 'encryption-modal',
comment: 'Encryption tool',
class: 'fa fa-lock',
modal:
}
]
return (
editorTools={editorTools}
showAlert={this.props.showAlert}
/>
)
}
}
const mapDispatchToProps = (dispatch) => {
return {
showAlert: (type, message) =>
dispatch(actionsAlert.set({ type: type, message: message }))
}
}
export default connect(null, mapDispatchToProps)(Editor)
`
---
Parsing embedded Rule Schema and UISchema files
The config editor can take a list of UIschema and Rule Schema files. This enables the editor to "auto-load" the UIschemas upon initial load, as well as "auto-load" the Rule Schema files matching the revision of the loaded Configuration File.
Note that the parsed list of files should match the actual files that are included in the config-editor-base dist/ folder.
For example, the Rule Schema for "schema-01.02.json | CANedge2" should be contained in dist/schema/CANedge2/schema-01.02.json.
The syntax for parsing these lists is as below (in the config-editor repo Editor.js file):
`jsx
// define UIschema and Rule Schema names for auto-loading embedded schema files
export const uiSchemaAry = [
"uischema-01.02.json | Simple",
"uischema-01.02.json | Advanced",
];
export const schemaAry = [
"schema-01.02.json | CANedge2",
"schema-01.02.json | CANedge1",
"schema-00.07.json | CANedge2",
"schema-00.07.json | CANedge1",
];
...
editorTools={editorTools}
showAlert={this.props.showAlert}
uiSchemaAry={uiSchemaAry}
schemaAry={schemaAry}
/>
...
`
Note that the code distinguishes between a config-XX.YY.json file loaded from a CANedge1 and CANedge2 unit. This is done by evaluating whether a connect section exists or not in the Configuration File. Based on this test, the editor either loads the Rule Schema for the CANedge2 (if connect exists) or the CANedge1.
---
Parsing S3 functionality
The config editor also supports various S3 calls, e.g. for loading Rule Schema and Configuration Files from a device S3 folder - as well as submitting updated Configuration Files to S3. See the CANcloud repository for an example of this implementation.
---
Regarding styling
The config editor relies on styling from the parent application. For examples of styling, see the CANedge configuration editor.
---
Editor Base Tools
The module includes built-in tools for OBD configuration and filter building. These are exported as OBDTool and FilterBuilderTool.
$3
Generates OBD-II transmit lists for CANedge devices. Key features:
- PID Selection: Select standard OBD-II PIDs from a built-in database
- Supported PIDs Parser: Parse response data to identify vehicle-supported PIDs
- Control Signal: Optional GPS-based speed control signal to prevent battery drain when vehicle is off
- Transmit List Generation: Outputs partial JSON for merging with device configuration
`jsx
import { OBDTool } from "config-editor-base";
// In editorTools array:
{
name: "obd-modal",
comment: "OBD tool",
class: "fa fa-car",
modal:
}
`
$3
Analyzes CSV log files to help users create optimized CAN filters. Key features:
- CSV Analysis: Load mdf2csv output to see CAN ID distribution by size contribution
- DBC Matching: Match CAN IDs to DBC message names and signals
- J1939 PGN Grouping: Group 29-bit IDs by PGN for J1939/ISOBUS protocols
- Filter Generation: Generate acceptance filters with optional prescalers
- Reset Filters: Reset CAN channel filters to defaults (record everything)
`jsx
import { FilterBuilderTool } from "config-editor-base";
// In editorTools array:
{
name: "filter-builder-modal",
comment: "Filter builder",
class: "fa fa-sliders",
modal:
}
`
The deviceType prop controls device-specific behavior:
- "CANedge" or "CANedge2 GNSS": Standard CANedge filter structure
- "CANmod": CANmod.router filter structure (requires frame_format field)
$3
When a new firmware revision is released (e.g., CANedge 01.10.XX), update these files:
#### 1. Supported Firmware Versions (FilterBuilderTool.js)
`javascript
// Add new version to the supported arrays at top of file:
const SUPPORTED_FIRMWARE_CANEDGE = ["01.08", "01.09", "01.10"]; // Add here
const SUPPORTED_FIRMWARE_CANMOD_ROUTER = ["01.02"];
`
#### 2. Default Filter Configs (src/editorBaseTools/filterBuilder/)
If the filter schema changes, create new default filter JSON files:
- canedge-default-filters-XX.YY.json
- canedge-default-filters-gps-XX.YY.json
- canmod-router-default-filters-XX.YY.json
Then update imports in FilterBuilderTool.js if structure changes.
#### 3. Control Signal Config (src/editorBaseTools/obd/)
If the control signal schema changes:
- Create control-signal-internal-gps-XX.YY.json
- Update import in OBDTool.js
#### 4. Schema Files (dist/schema/)
Add new schema and uischema files to the appropriate folders and update schemaAry/uiSchemaAry in Editor.js.
---
Regarding JSON Schema files
The module expects to find JSON Schema files in the structure below to facilitate auto-loading of these:
`
/
|-- dist/
|-- schema/
|-- Advanced/
|-- uischema-XX.YY.json
|-- Simple/
|-- uischema-XX.YY.json
|-- CANedge1/
|-- schema-XX.YY.json
|-- CANedge2/
|-- schema-XX.YY.json
``