veheeavis
Version:
Vehicle Electrical/Electronic Architecture Visualizer
263 lines (233 loc) • 9.18 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>veheeavis Example</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 20px;
background-color: #f5f5f5;
}
.usage-guide {
width: 90%;
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
} .guide-content {
margin: 20px;
}
.package-links {
text-align: center;
margin-bottom: 20px;
}
.npm-link {
display: inline-block;
text-decoration: none;
margin: 0 10px;
}
.guide-content pre {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}
.guide-content code {
font-family: 'Courier New', Courier, monospace;
}
.guide-content ul {
list-style-type: none;
padding-left: 20px;
}
.guide-content li {
margin: 10px 0;
}
.guide-content strong {
color: #333;
}
h1, h2, h3 {
text-align: center;
color: #333;
}
#container {
display: flex;
width: 100%;
height: 600px;
margin-top: 20px;
}
#diagram {
width: 800px;
height: 100%;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
}
#jsonInput {
width: 800px;
height: 550px;
margin-top: 0px;
margin-left: 20px;
white-space: pre;
font-family: monospace;
}
#buttons {
margin-top: 10px;
}
button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>veheeavis Example</h1>
<h2>Cybertrcuk-EEA</h2>
<div id="container">
<div id="diagram"></div>
<textarea id="jsonInput" wrap="soft">
{
"modules": [
{ "id": "1", "name": "AutopilotECU", "type": "ECU", "position": { "x": 350, "y": 50, "width": 150, "height": 400, "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": 100, "width": 150, "height": 280, "color": "#ccc" },
"leftArray": [],
"rightArray": [{ "portid": "rightport0", "portcolor": 0 }, { "portid": "rightport1", "portcolor": 1 }],
"topArray": [{ "portid": "topport0", "portcolor": 0 }, { "portid": "topport1", "portcolor": 1 }],
"bottomArray": []
},
{ "id": "3", "name": "RightController", "type": "ECU", "position": { "x": 550, "y": 120, "width": 150, "height": 200, "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": 500, "width": 150, "height": 80, "color": "#ccc" },
"leftArray": [{ "portid": "leftport0", "portcolor": 0 }],
"rightArray": [{ "portid": "rightport4", "portcolor": 0 }],
"topArray": [{ "portid": "topport0", "portcolor": 0 }, { "portid": "topport1", "portcolor": 1 }],
"bottomArray": []
},
{ "id": "5", "name": "Door1", "type": "ECU", "position": { "x": 100, "y": 5, "width": 50, "height": 30, "color": "#ccc" },
"leftArray": [],
"rightArray": [],
"topArray": [],
"bottomArray": [{ "portid": "bottomport0", "portcolor": 0 }]
},
{ "id": "6", "name": "Door2", "type": "ECU", "position": { "x": 220, "y": 5, "width": 50, "height": 30, "color": "#ccc" },
"leftArray": [],
"rightArray": [],
"topArray": [],
"bottomArray": [{ "portid": "bottomport0", "portcolor": 0 }]
}
],
"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" },
{ "from": "LeftController", "to": "Door1", "fromPort": "topport0", "toPort": "bottomport0" },
{ "from": "LeftController", "to": "Door2", "fromPort": "topport1", "toPort": "bottomport0" }
]
}
</textarea>
</div>
<div id="buttons">
<button id="loadButton">Load</button>
<button id="saveButton">Save</button>
</div> <div class="usage-guide">
<h2>Guide</h2>
<div class="guide-content"> <div class="package-links">
<a href="https://www.npmjs.com/package/veheeavis" target="_blank" class="npm-link">
<img src="https://img.shields.io/npm/v/veheeavis.svg" alt="npm version">
</a>
<a href="https://github.com/ZongL/VehEeaVis-Demo" target="_blank" class="github-link">
<img src="https://img.shields.io/github/stars/ZongL/VehEeaVis-Demo?style=social" alt="GitHub stars">
</a>
</div>
<h3>Installation</h3>
<pre><code>npm install veheeavis</code></pre>
<h3>Basic Usage</h3>
<p>veheeavis is a JavaScript library for visualizing vehicle EEA (Electrical/Electronic Architecture). It helps you create interactive ECU connection diagrams.</p>
<h3>Example Code</h3>
<pre><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"
}
// ... 更多连接
]
}
});</code></pre> <h3>Configuration</h3>
<ul>
<li><strong>modules</strong>: Define ECU modules, including position, size, ports and other information</li>
<li><strong>connections</strong>: Define connection relationships between modules</li>
<li><strong>portcolor</strong>: Port color type (0: default, 1: highlighted)</li>
</ul>
</div>
</div>
<!-- import veheeavis.js -->
<script src="veheeavis.min.js"></script>
<script>
let diagram; // 声明一个变量来存储图表实例
const loadJsonData = () => {
const jsonData = JSON.parse(document.getElementById('jsonInput').value);
document.getElementById('diagram').innerHTML = '';
diagram = new veheeavis.Ploteeavis({ // 保存实例引用
container: '#diagram',
data: jsonData
});
};
document.getElementById('loadButton').addEventListener('click', loadJsonData);
document.getElementById('saveButton').addEventListener('click', () => {
if (diagram) {
const currentState = diagram.getCurrentState();
// 保持缩进格式的 JSON 字符串
const jsonString = JSON.stringify(currentState, null, 6); // 使用6个空格缩进以匹配原格式
// 添加额外的缩进到整个内容
const formattedJson = ' ' + jsonString.replace(/\n/g, '\n ');
document.getElementById('jsonInput').value = formattedJson;
// // 可选：提供下载功能
// const blob = new Blob([formattedJson], { type: 'application/json' });
// const url = URL.createObjectURL(blob);
// const a = document.createElement('a');
// a.href = url;
// a.download = 'diagram_' + new Date().toISOString().slice(0,19).replace(/[:-]/g, '') + '.json';
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// URL.revokeObjectURL(url);
}
});
// Initial load
loadJsonData();
</script>
</body>
</html>