Config Editor - Base Module

This project includes a React based JSON Schema editor.

Installation

npm install --save config-editor-base

Development testing

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.

Publishing a new package via npm

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.

Usage in a parent app

The module uses redux, hence you'll need to import the base module and the reducer as follows:

// 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:

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: <EncryptionModal showAlert={this.props.showAlert} />
      }
    ]

    return (
      <div className='file-explorer'>
        <div className='fe-body fe-body-offline'>
          <AlertContainer />
          <EditorSection
            editorTools={editorTools}
            showAlert={this.props.showAlert}
          />
        </div>
      </div>
    )
  }
}

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):

// 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",
];

...

<EditorSection
  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.

OBD Tool

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

import { OBDTool } from "config-editor-base";

// In editorTools array:
{
  name: "obd-modal",
  comment: "OBD tool",
  class: "fa fa-car",
  modal: <OBDTool showAlert={this.props.showAlert} />
}

Filter Builder Tool

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)

import { FilterBuilderTool } from "config-editor-base";

// In editorTools array:
{
  name: "filter-builder-modal",
  comment: "Filter builder",
  class: "fa fa-sliders",
  modal: <FilterBuilderTool showAlert={this.props.showAlert} deviceType="CANedge" />
}

The deviceType prop controls device-specific behavior:

• "CANedge" or "CANedge2 GNSS": Standard CANedge filter structure
• "CANmod": CANmod.router filter structure (requires frame_format field)

Updating for New Firmware Revisions

When a new firmware revision is released (e.g., CANedge 01.10.XX), update these files:

1. Supported Firmware Versions (FilterBuilderTool.js)

// 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