WireViz/examples/demo01.html
2024-07-13 13:15:00 +02:00

246 lines
15 KiB
HTML
Generated
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="generator" content="WireViz 0.4.1 - https://github.com/wireviz/WireViz">
<title>demo01</title>
<style>
#bom table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
#bom th, td {
padding: 4px;
text-align: left;
}
.bom_col_qty {
text-align: right;
}
</style>
</head><body style="font-family:arial;background-color:#ffffff">
<h1>demo01</h1>
<h2>Diagram</h2>
<div id="description">
<!-- %description% -->
</div>
<div id="diagram">
<!-- XML and DOCTYPE declarations from SVG file removed -->
<!-- Generated by graphviz version 10.0.1 (20240210.2158)
-->
<!-- Pages: 1 -->
<svg width="814pt" height="293pt"
viewBox="0.00 0.00 813.50 292.50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 288.5)">
<polygon fill="#ffffff" stroke="none" points="-4,4 -4,-288.5 809.5,-288.5 809.5,4 -4,4"/>
<!-- X1 -->
<g id="node1" class="node">
<title>X1</title>
<polygon fill="#ffffff" stroke="black" points="133.5,-254.5 0,-254.5 0,0 133.5,0 133.5,-254.5"/>
<polygon fill="none" stroke="black" points="0,-230.75 0,-254.5 133.5,-254.5 133.5,-230.75 0,-230.75"/>
<text text-anchor="start" x="58.5" y="-237.2" font-family="arial" font-size="14.00">X1</text>
<polygon fill="none" stroke="black" points="0,-207 0,-230.75 46.25,-230.75 46.25,-207 0,-207"/>
<text text-anchor="start" x="4" y="-213.45" font-family="arial" font-size="14.00">D&#45;Sub</text>
<polygon fill="none" stroke="black" points="46.25,-207 46.25,-230.75 95.5,-230.75 95.5,-207 46.25,-207"/>
<text text-anchor="start" x="50.25" y="-213.45" font-family="arial" font-size="14.00">female</text>
<polygon fill="none" stroke="black" points="95.5,-207 95.5,-230.75 133.5,-230.75 133.5,-207 95.5,-207"/>
<text text-anchor="start" x="99.5" y="-213.45" font-family="arial" font-size="14.00">9&#45;pin</text>
<polygon fill="none" stroke="black" points="0,-184 0,-207 78.25,-207 78.25,-184 0,-184"/>
<text text-anchor="start" x="24.5" y="-189.7" font-family="arial" font-size="14.00">DCD</text>
<polygon fill="none" stroke="black" points="78.25,-184 78.25,-207 133.5,-207 133.5,-184 78.25,-184"/>
<text text-anchor="start" x="102.12" y="-189.7" font-family="arial" font-size="14.00">1</text>
<polygon fill="none" stroke="black" points="0,-161 0,-184 78.25,-184 78.25,-161 0,-161"/>
<text text-anchor="start" x="29.75" y="-166.7" font-family="arial" font-size="14.00">RX</text>
<polygon fill="none" stroke="black" points="78.25,-161 78.25,-184 133.5,-184 133.5,-161 78.25,-161"/>
<text text-anchor="start" x="102.12" y="-166.7" font-family="arial" font-size="14.00">2</text>
<polygon fill="none" stroke="black" points="0,-138 0,-161 78.25,-161 78.25,-138 0,-138"/>
<text text-anchor="start" x="30.5" y="-143.7" font-family="arial" font-size="14.00">TX</text>
<polygon fill="none" stroke="black" points="78.25,-138 78.25,-161 133.5,-161 133.5,-138 78.25,-138"/>
<text text-anchor="start" x="102.12" y="-143.7" font-family="arial" font-size="14.00">3</text>
<polygon fill="none" stroke="black" points="0,-115 0,-138 78.25,-138 78.25,-115 0,-115"/>
<text text-anchor="start" x="25.25" y="-120.7" font-family="arial" font-size="14.00">DTR</text>
<polygon fill="none" stroke="black" points="78.25,-115 78.25,-138 133.5,-138 133.5,-115 78.25,-115"/>
<text text-anchor="start" x="102.12" y="-120.7" font-family="arial" font-size="14.00">4</text>
<polygon fill="none" stroke="black" points="0,-92 0,-115 78.25,-115 78.25,-92 0,-92"/>
<text text-anchor="start" x="23.75" y="-97.7" font-family="arial" font-size="14.00">GND</text>
<polygon fill="none" stroke="black" points="78.25,-92 78.25,-115 133.5,-115 133.5,-92 78.25,-92"/>
<text text-anchor="start" x="102.12" y="-97.7" font-family="arial" font-size="14.00">5</text>
<polygon fill="none" stroke="black" points="0,-69 0,-92 78.25,-92 78.25,-69 0,-69"/>
<text text-anchor="start" x="24.88" y="-74.7" font-family="arial" font-size="14.00">DSR</text>
<polygon fill="none" stroke="black" points="78.25,-69 78.25,-92 133.5,-92 133.5,-69 78.25,-69"/>
<text text-anchor="start" x="102.12" y="-74.7" font-family="arial" font-size="14.00">6</text>
<polygon fill="none" stroke="black" points="0,-46 0,-69 78.25,-69 78.25,-46 0,-46"/>
<text text-anchor="start" x="25.62" y="-51.7" font-family="arial" font-size="14.00">RTS</text>
<polygon fill="none" stroke="black" points="78.25,-46 78.25,-69 133.5,-69 133.5,-46 78.25,-46"/>
<text text-anchor="start" x="102.12" y="-51.7" font-family="arial" font-size="14.00">7</text>
<polygon fill="none" stroke="black" points="0,-23 0,-46 78.25,-46 78.25,-23 0,-23"/>
<text text-anchor="start" x="25.62" y="-28.7" font-family="arial" font-size="14.00">CTS</text>
<polygon fill="none" stroke="black" points="78.25,-23 78.25,-46 133.5,-46 133.5,-23 78.25,-23"/>
<text text-anchor="start" x="102.12" y="-28.7" font-family="arial" font-size="14.00">8</text>
<polygon fill="none" stroke="black" points="0,0 0,-23 78.25,-23 78.25,0 0,0"/>
<text text-anchor="start" x="32.38" y="-5.7" font-family="arial" font-size="14.00">RI</text>
<polygon fill="none" stroke="black" points="78.25,0 78.25,-23 133.5,-23 133.5,0 78.25,0"/>
<text text-anchor="start" x="102.12" y="-5.7" font-family="arial" font-size="14.00">9</text>
</g>
<!-- W1 -->
<g id="node3" class="node">
<title>W1</title>
<polygon fill="#ffffff" stroke="black" points="481.5,-284.5 277.5,-284.5 277.5,-84 481.5,-84 481.5,-284.5"/>
<polygon fill="none" stroke="black" points="277.5,-260.75 277.5,-284.5 481.5,-284.5 481.5,-260.75 277.5,-260.75"/>
<text text-anchor="start" x="369" y="-267.2" font-family="arial" font-size="14.00">W1</text>
<polygon fill="none" stroke="black" points="277.5,-237 277.5,-260.75 310.69,-260.75 310.69,-237 277.5,-237"/>
<text text-anchor="start" x="286.97" y="-243.45" font-family="arial" font-size="14.00">3x</text>
<polygon fill="none" stroke="black" points="310.69,-237 310.69,-260.75 388.12,-260.75 388.12,-237 310.69,-237"/>
<text text-anchor="start" x="320.16" y="-243.45" font-family="arial" font-size="14.00">0.25 mm²</text>
<polygon fill="none" stroke="black" points="388.12,-237 388.12,-260.75 428.06,-260.75 428.06,-237 388.12,-237"/>
<text text-anchor="start" x="397.59" y="-243.45" font-family="arial" font-size="14.00">+ S</text>
<polygon fill="none" stroke="black" points="428.06,-237 428.06,-260.75 481.5,-260.75 481.5,-237 428.06,-237"/>
<text text-anchor="start" x="437.53" y="-243.45" font-family="arial" font-size="14.00">0.2 m</text>
<text text-anchor="start" x="308.62" y="-221.7" font-family="arial" font-size="14.00"> </text>
<text text-anchor="start" x="279.38" y="-202.7" font-family="arial" font-size="14.00">X1:5:GND</text>
<text text-anchor="start" x="345.38" y="-202.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;1:WH &#160;&#160;&#160;</text>
<text text-anchor="start" x="417.38" y="-202.7" font-family="arial" font-size="14.00">X2:1:GND</text>
<polygon fill="#000000" stroke="none" points="277.5,-197 277.5,-199 481.5,-199 481.5,-197 277.5,-197"/>
<polygon fill="#ffffff" stroke="none" points="277.5,-195 277.5,-197 481.5,-197 481.5,-195 277.5,-195"/>
<polygon fill="#000000" stroke="none" points="277.5,-193 277.5,-195 481.5,-195 481.5,-193 277.5,-193"/>
<text text-anchor="start" x="285.38" y="-177.7" font-family="arial" font-size="14.00">X1:2:RX</text>
<text text-anchor="start" x="347.62" y="-177.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;2:BN &#160;&#160;&#160;</text>
<text text-anchor="start" x="424.12" y="-177.7" font-family="arial" font-size="14.00">X2:3:TX</text>
<polygon fill="#000000" stroke="none" points="277.5,-172 277.5,-174 481.5,-174 481.5,-172 277.5,-172"/>
<polygon fill="#895956" stroke="none" points="277.5,-170 277.5,-172 481.5,-172 481.5,-170 277.5,-170"/>
<polygon fill="#000000" stroke="none" points="277.5,-168 277.5,-170 481.5,-170 481.5,-168 277.5,-168"/>
<text text-anchor="start" x="286.12" y="-152.7" font-family="arial" font-size="14.00">X1:3:TX</text>
<text text-anchor="start" x="346.5" y="-152.7" font-family="arial" font-size="14.00"> &#160;&#160;&#160;&#160;3:GN &#160;&#160;&#160;</text>
<text text-anchor="start" x="423.38" y="-152.7" font-family="arial" font-size="14.00">X2:2:RX</text>
<polygon fill="#000000" stroke="none" points="277.5,-147 277.5,-149 481.5,-149 481.5,-147 277.5,-147"/>
<polygon fill="#00ff00" stroke="none" points="277.5,-145 277.5,-147 481.5,-147 481.5,-145 277.5,-145"/>
<polygon fill="#000000" stroke="none" points="277.5,-143 277.5,-145 481.5,-145 481.5,-143 277.5,-143"/>
<text text-anchor="start" x="308.62" y="-127.7" font-family="arial" font-size="14.00"> </text>
<text text-anchor="start" x="279.38" y="-108.7" font-family="arial" font-size="14.00">X1:5:GND</text>
<text text-anchor="start" x="360.75" y="-108.7" font-family="arial" font-size="14.00">Shield</text>
<polygon fill="#000000" stroke="none" points="277.5,-103 277.5,-105 481.5,-105 481.5,-103 277.5,-103"/>
<text text-anchor="start" x="308.62" y="-87.7" font-family="arial" font-size="14.00"> </text>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge1" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-101.25C211.68,-103.43 203.31,-196.43 277.5,-194.25"/>
<path fill="none" stroke="#ffffff" stroke-width="2" d="M133.5,-103.25C209.69,-103.25 201.31,-196.25 277.5,-196.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-105.25C207.69,-103.07 199.32,-196.07 277.5,-198.25"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge3" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-170.25C197.38,-170.25 213.37,-169.25 277.5,-169.25"/>
<path fill="none" stroke="#895956" stroke-width="2" d="M133.5,-172.25C197.5,-172.25 213.5,-171.25 277.5,-171.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-174.25C197.63,-174.25 213.62,-173.25 277.5,-173.25"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge5" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-147.25C197.14,-147.28 213.12,-144.28 277.5,-144.25"/>
<path fill="none" stroke="#00ff00" stroke-width="2" d="M133.5,-149.25C197.51,-149.25 213.49,-146.25 277.5,-146.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-151.25C197.88,-151.22 213.86,-148.22 277.5,-148.25"/>
</g>
<!-- X1&#45;&#45;W1 -->
<g id="edge7" class="edge">
<title>X1:e&#45;&#45;W1:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M133.5,-103.25C197.5,-103.25 213.5,-104.25 277.5,-104.25"/>
</g>
<!-- X2 -->
<g id="node2" class="node">
<title>X2</title>
<polygon fill="#ffffff" stroke="black" points="805.5,-255.5 625.5,-255.5 625.5,-139 805.5,-139 805.5,-255.5"/>
<polygon fill="none" stroke="black" points="625.5,-231.75 625.5,-255.5 805.5,-255.5 805.5,-231.75 625.5,-231.75"/>
<text text-anchor="start" x="707.25" y="-238.2" font-family="arial" font-size="14.00">X2</text>
<polygon fill="none" stroke="black" points="625.5,-208 625.5,-231.75 718.25,-231.75 718.25,-208 625.5,-208"/>
<text text-anchor="start" x="629.5" y="-214.45" font-family="arial" font-size="14.00">Molex KK 254</text>
<polygon fill="none" stroke="black" points="718.25,-208 718.25,-231.75 767.5,-231.75 767.5,-208 718.25,-208"/>
<text text-anchor="start" x="722.25" y="-214.45" font-family="arial" font-size="14.00">female</text>
<polygon fill="none" stroke="black" points="767.5,-208 767.5,-231.75 805.5,-231.75 805.5,-208 767.5,-208"/>
<text text-anchor="start" x="771.5" y="-214.45" font-family="arial" font-size="14.00">3&#45;pin</text>
<polygon fill="none" stroke="black" points="625.5,-185 625.5,-208 704,-208 704,-185 625.5,-185"/>
<text text-anchor="start" x="661" y="-190.7" font-family="arial" font-size="14.00">1</text>
<polygon fill="none" stroke="black" points="704,-185 704,-208 805.5,-208 805.5,-185 704,-185"/>
<text text-anchor="start" x="739.38" y="-190.7" font-family="arial" font-size="14.00">GND</text>
<polygon fill="none" stroke="black" points="625.5,-162 625.5,-185 704,-185 704,-162 625.5,-162"/>
<text text-anchor="start" x="661" y="-167.7" font-family="arial" font-size="14.00">2</text>
<polygon fill="none" stroke="black" points="704,-162 704,-185 805.5,-185 805.5,-162 704,-162"/>
<text text-anchor="start" x="745.38" y="-167.7" font-family="arial" font-size="14.00">RX</text>
<polygon fill="none" stroke="black" points="625.5,-139 625.5,-162 704,-162 704,-139 625.5,-139"/>
<text text-anchor="start" x="661" y="-144.7" font-family="arial" font-size="14.00">3</text>
<polygon fill="none" stroke="black" points="704,-139 704,-162 805.5,-162 805.5,-139 704,-139"/>
<text text-anchor="start" x="746.12" y="-144.7" font-family="arial" font-size="14.00">TX</text>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge2" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-194.25C545.5,-194.25 561.5,-194.25 625.5,-194.25"/>
<path fill="none" stroke="#ffffff" stroke-width="2" d="M481.5,-196.25C545.5,-196.25 561.5,-196.25 625.5,-196.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-198.25C545.5,-198.25 561.5,-198.25 625.5,-198.25"/>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge4" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-169.25C544.54,-170.11 559.18,-149.11 625.5,-148.25"/>
<path fill="none" stroke="#895956" stroke-width="2" d="M481.5,-171.25C546.18,-171.25 560.82,-150.25 625.5,-150.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-173.25C547.82,-172.39 562.46,-151.39 625.5,-152.25"/>
</g>
<!-- W1&#45;&#45;X2 -->
<g id="edge6" class="edge">
<title>W1:e&#45;&#45;X2:w</title>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-144.25C548.4,-145.34 562.17,-172.34 625.5,-171.25"/>
<path fill="none" stroke="#00ff00" stroke-width="2" d="M481.5,-146.25C546.62,-146.25 560.38,-173.25 625.5,-173.25"/>
<path fill="none" stroke="#000000" stroke-width="2" d="M481.5,-148.25C544.83,-147.16 558.6,-174.16 625.5,-175.25"/>
</g>
</g>
</svg>
</div>
<div id="notes">
<!-- %notes% -->
</div>
<h2>Bill of Materials</h2>
<div id="bom">
<table class="bom">
<tr>
<th class="bom_col_id">Id</th>
<th class="bom_col_description">Description</th>
<th class="bom_col_qty">Qty</th>
<th class="bom_col_unit">Unit</th>
<th class="bom_col_designators">Designators</th>
</tr>
<tr>
<td class="bom_col_id">1</td>
<td class="bom_col_description">Cable, 3 x 0.25 mm² shielded</td>
<td class="bom_col_qty">0.2</td>
<td class="bom_col_unit">m</td>
<td class="bom_col_designators">W1</td>
</tr>
<tr>
<td class="bom_col_id">2</td>
<td class="bom_col_description">Connector, D-Sub, female, 9 pins</td>
<td class="bom_col_qty">1</td>
<td class="bom_col_unit"></td>
<td class="bom_col_designators">X1</td>
</tr>
<tr>
<td class="bom_col_id">3</td>
<td class="bom_col_description">Connector, Molex KK 254, female, 3 pins</td>
<td class="bom_col_qty">1</td>
<td class="bom_col_unit"></td>
<td class="bom_col_designators">X2</td>
</tr>
</table>
</div>
</body></html>