veheeavis Example

Cybertrcuk-EEA

{
        "modules": [
          { "id": "1", "name": "AutopilotECU", "type": "ECU", "position": { "x": 350, "y": 50, "width": 150, "height": 100, "color": "#ccc" },
            "leftArray": [{ "portid": "leftport0", "portcolor": 0 }, { "portid": "leftport1", "portcolor": 1 }],
            "rightArray": [{ "portid": "rightport0", "portcolor": 0 }],
            "topArray": [{ "portid": "topport0", "portcolor": 0 }],
            "bottomArray": [{ "portid": "bottomport0", "portcolor": 0 }, { "portid": "bottomport1", "portcolor": 1 }]
          },
          { "id": "2", "name": "LeftController", "type": "ECU", "position": { "x": 100, "y": 60, "width": 150, "height": 60, "color": "#ccc" },
            "leftArray": [],
            "rightArray": [{ "portid": "rightport0", "portcolor": 0 }, { "portid": "rightport1", "portcolor": 1 }],
            "topArray": [],
            "bottomArray": []
          },
          { "id": "3", "name": "RightController", "type": "ECU", "position": { "x": 550, "y": 57, "width": 150, "height": 80, "color": "#ccc" },
            "leftArray": [{ "portid": "leftport0", "portcolor": 0 }],
            "rightArray": [],
            "topArray": [],
            "bottomArray": [{ "portid": "bottomport4", "portcolor": 0 }, { "portid": "bottomport5", "portcolor": 1 }]
          },
          { "id": "4", "name": "RearController", "type": "ECU", "position": { "x": 350, "y": 300, "width": 150, "height": 80, "color": "#ccc" },
            "leftArray": [{ "portid": "leftport0", "portcolor": 0 }],
            "rightArray": [{ "portid": "rightport4", "portcolor": 0 }, { "portid": "rightport5", "portcolor": 1 }],
            "topArray": [{ "portid": "topport0", "portcolor": 0 }, { "portid": "topport1", "portcolor": 1 }],
            "bottomArray": []
          }
        ],
        "connections": [
          { "from": "AutopilotECU", "to": "LeftController", "fromPort": "leftport0", "toPort": "rightport0", "points": [10, 20] },
          { "from": "AutopilotECU", "to": "RightController", "fromPort": "rightport0", "toPort": "leftport0" },
          { "from": "AutopilotECU", "to": "RearController", "fromPort": "bottomport0", "toPort": "topport0" }
        ]
      }

Guide

Installation

npm install veheeavis

Basic Usage

veheeavis is a JavaScript library for visualizing vehicle EEA (Electrical/Electronic Architecture). It helps you create interactive ECU connection diagrams.

Example Code

const diagram = new veheeavis.Ploteeavis({
    container: '#diagram',
    data: {
        modules: [
            {
                id: "1",
                name: "AutopilotECU",
                type: "ECU",
                position: { x: 350, y: 50, width: 150, height: 100, color: "#ccc" },
                leftArray: [{ portid: "leftport0", portcolor: 0 }],
                rightArray: [{ portid: "rightport0", portcolor: 0 }]
            }
            // ... 更多模块
        ],
        connections: [
            {
                from: "AutopilotECU",
                to: "LeftController",
                fromPort: "leftport0",
                toPort: "rightport0"
            }
            // ... 更多连接
        ]
    }
});

Configuration

modules: Define ECU modules, including position, size, ports and other information
connections: Define connection relationships between modules
portcolor: Port color type (0: default, 1: highlighted)