Add two built-in HTML templates
- `simple.html` is similar to the previous built-in HTML output - `din-6771.html` is a technical drawing with title block and BOM
This commit is contained in:
Daniel Rojas
parent
75a9a758a8
commit
fc1ae46b6d
286
src/wireviz/templates/din-6771.html
generated
Normal file
286
src/wireviz/templates/din-6771.html
generated
Normal file
@ -0,0 +1,286 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="generator" content="<!-- generator -->">
|
||||
<title><!-- title --></title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
|
||||
table {
|
||||
border: 0.35mm solid black; /* line weight based on DIN 15 */
|
||||
padding: 0;
|
||||
border-bottom: 0;
|
||||
border-right: 0;
|
||||
border-spacing: 0mm;
|
||||
}
|
||||
|
||||
td, th {
|
||||
border: 0.25mm solid black; /* line weight based on DIN 15 */
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
|
||||
overflow: hidden;
|
||||
/* display: inline-block; */
|
||||
white-space: nowrap;
|
||||
font-size: 2.8mm;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
svg {
|
||||
max-width: 95%;
|
||||
max-height: 100%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#frame {
|
||||
position: relative;
|
||||
border: 0.35mm solid black
|
||||
}
|
||||
|
||||
/* Canvas size based on DIN 823 / DIN 6771 / EN ISO 5457 */
|
||||
|
||||
.A4, .sheetsize_default { /* portrait */
|
||||
width: 180mm;
|
||||
height: 277mm;
|
||||
}
|
||||
|
||||
.A3 { /* landscape */
|
||||
width: 390mm;
|
||||
height: 277mm;
|
||||
}
|
||||
|
||||
.A2 { /* landscape */
|
||||
width: 564mm;
|
||||
height: 400mm;
|
||||
}
|
||||
|
||||
#titleblock {
|
||||
position: absolute;
|
||||
bottom: 0mm;
|
||||
right: -0mm;
|
||||
}
|
||||
|
||||
#titleblock table {
|
||||
width: 180mm;
|
||||
height: 38.25mm;
|
||||
}
|
||||
|
||||
#titleblock tr, #bom tr {
|
||||
height: 4.25mm;
|
||||
}
|
||||
|
||||
.A4 #bom { /* BOM on top of title block */
|
||||
position: absolute;
|
||||
bottom: 38.25mm;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.A3 #bom, .A2 #bom { /* BOM to the left of title block */
|
||||
position: absolute;
|
||||
bottom: 0mm;
|
||||
left: 0mm;
|
||||
}
|
||||
|
||||
#bom table {
|
||||
width:180mm;
|
||||
}
|
||||
|
||||
#bom th, td {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#bom .bom_col_qty {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#diagram {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
max-width: 100%;
|
||||
height: calc(100% - 13 * 4.25mm);
|
||||
/* TODO: auto-adapt to height of title block + BOM table;
|
||||
BOM table might be above (A4) or to the left (A3 and larger) of the title block */
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 16mm;
|
||||
}
|
||||
|
||||
.date {
|
||||
width: 10mm;
|
||||
}
|
||||
|
||||
.revno {
|
||||
text-align: center;
|
||||
width: 6mm;
|
||||
}
|
||||
|
||||
.changelog {
|
||||
width: 22mm;
|
||||
}
|
||||
|
||||
.process {
|
||||
width: 18mm;
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 82mm;
|
||||
font-size: 5.6mm;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.company {
|
||||
font-size: 4mm;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.partno {
|
||||
font-size: 4mm;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.sheetno {
|
||||
width: 12.75mm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style type="text/css" media="print">
|
||||
|
||||
@page {
|
||||
size: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* TODO: auto-adjust based on portrait (larger margin on left) or landscape (larger margin on top) */
|
||||
#page {
|
||||
margin: 10mm;
|
||||
margin-left: 20mm;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="page">
|
||||
<div id="frame" class="sheetsize_default">
|
||||
|
||||
<div id="diagram">
|
||||
<!-- diagram -->
|
||||
|
||||
<div id="description">
|
||||
<!-- description -->
|
||||
</div>
|
||||
|
||||
<div id="notes">
|
||||
<!-- notes -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="bom">
|
||||
<!-- bom_reversed -->
|
||||
</div>
|
||||
|
||||
<div id="titleblock">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_8_number --></td>
|
||||
<td class="changelog"><!-- rev_8_changelog --></td>
|
||||
<td class="date"><!-- rev_8_date --></td>
|
||||
<td class="name"><!-- rev_8_name --></td>
|
||||
<td class="process"></td>
|
||||
<td class="date">Date</td>
|
||||
<td class="name">Name</td>
|
||||
<td class="title" colspan="3" rowspan="5"><!-- title --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_7_number --></td>
|
||||
<td><!-- rev_7_changelog --></td>
|
||||
<td><!-- rev_7_date --></td>
|
||||
<td><!-- rev_7_name --></td>
|
||||
<td><!-- process_1_title --></td>
|
||||
<td><!-- process_1_date --></td>
|
||||
<td><!-- process_1_name --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_6_number --></td>
|
||||
<td><!-- rev_6_changelog --></td>
|
||||
<td><!-- rev_6_date --></td>
|
||||
<td><!-- rev_6_name --></td>
|
||||
<td><!-- process_2_title --></td>
|
||||
<td><!-- process_2_date --></td>
|
||||
<td><!-- process_2_name --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_5_number --></td>
|
||||
<td><!-- rev_5_changelog --></td>
|
||||
<td><!-- rev_5_date --></td>
|
||||
<td><!-- rev_5_name --></td>
|
||||
<td><!-- process_3_title --></td>
|
||||
<td><!-- process_3_date --></td>
|
||||
<td><!-- process_3_name --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_4_number --></td>
|
||||
<td><!-- rev_4_changelog --></td>
|
||||
<td><!-- rev_4_date --></td>
|
||||
<td><!-- rev_4_name --></td>
|
||||
<td colspan="2"></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_3_number --></td>
|
||||
<td><!-- rev_3_changelog --></td>
|
||||
<td><!-- rev_3_date --></td>
|
||||
<td><!-- rev_3_name --></td>
|
||||
<td class="company" colspan="3" rowspan="3"><!-- company --></td>
|
||||
<td class="partno" colspan="2" rowspan="3"><!-- pn --></td>
|
||||
<td class="sheetno" rowspan="2"><!-- sheet_current --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_2_number --></td>
|
||||
<td><!-- rev_2_changelog --></td>
|
||||
<td><!-- rev_2_date --></td>
|
||||
<td><!-- rev_2_name --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="revno"><!-- rev_1_number --></td>
|
||||
<td><!-- rev_1_changelog --></td>
|
||||
<td><!-- rev_1_date --></td>
|
||||
<td><!-- rev_1_name --></td>
|
||||
<td class="sheetno"><!-- sheet_total --></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Rev</td>
|
||||
<td>Changelog</td>
|
||||
<td>Date</td>
|
||||
<td>Name</td>
|
||||
<td colspan="3"></td>
|
||||
<td></td>
|
||||
<td colspan="2"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div> <!-- /titleblock -->
|
||||
|
||||
</div> <!-- /frame -->
|
||||
</div> <!-- /page -->
|
||||
</body>
|
||||
</html>
|
||||
45
src/wireviz/templates/simple.html
generated
Normal file
45
src/wireviz/templates/simple.html
generated
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="generator" content="WireViz 0.3-dev - https://github.com/formatc1702/WireViz">
|
||||
<title>WireViz Demo 01</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>WireViz Demo 01</h1>
|
||||
<h2>Diagram</h2>
|
||||
|
||||
<div id="description">
|
||||
<!-- description -->
|
||||
</div>
|
||||
|
||||
<div id="diagram">
|
||||
<!-- diagram -->
|
||||
</div>
|
||||
|
||||
<div id="notes">
|
||||
<!-- notes -->
|
||||
</div>
|
||||
|
||||
<h2>Bill of Materials</h2>
|
||||
|
||||
<div id="bom">
|
||||
<!-- bom -->
|
||||
</div>
|
||||
|
||||
</body></html>
|
||||
Loading…
x
Reference in New Issue
Block a user