veheeavis
Version:
Vehicle Electrical/Electronic Architecture Visualizer
95 lines (88 loc) • 3.32 kB
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;
}
#diagram {
width: 800px;
height: 600px;
border: 1px solid #ccc;
background-color: #fff;
position: relative;
overflow: hidden;
}
h1, h2 {
text-align: center;
color: #333;
}
</style>
</head>
<body>
<h1>veheeavis Example</h1>
<h2>Cybertrcuk-EEA</h2>
<div id="diagram"></div>
<!-- import veheeavis.js -->
<script src="veheeavis.min.js"></script>
<script>
const jsonData = {
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},{portid: "rightport1", portcolor:1}],
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: 59 , width: 150, height:80, color: '#ccc'},
leftArray: [{portid: "leftport0", portcolor:0},{portid: "leftport1", portcolor:1},{portid: "leftport2", portcolor:0}],
rightArray: [{portid: "rightport4", portcolor:0},{portid: "rightport5", portcolor:1}],
topArray: [],
bottomArray: [{portid: "bottomport4", portcolor:0},{portid: "bottomport5", portcolor:1}]
},
{ id: "3", 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"}
]
};
const myveheeavis = new veheeavis.Ploteeavis({
container: '#diagram',
data: jsonData,
styles: {
module: {
width: 150,
height: 100,
color: '#ccc'
},
connection: {
color: '#000',
width: 2
}
}
});
</script>
</body>
</html>