From fc1ae46b6d773606d8eaa97a357b4370e21bfcb2 Mon Sep 17 00:00:00 2001
From: Daniel Rojas <github@danielrojas.net>
Date: Sat, 27 Mar 2021 13:35:02 +0100
Subject: [PATCH] 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
---
 src/wireviz/templates/din-6771.html | 286 ++++++++++++++++++++++++++++
 src/wireviz/templates/simple.html   |  45 +++++
 2 files changed, 331 insertions(+)
 create mode 100644 src/wireviz/templates/din-6771.html
 create mode 100644 src/wireviz/templates/simple.html
diff --git a/src/wireviz/templates/din-6771.html b/src/wireviz/templates/din-6771.html
new file mode 100644
index 0000000..3cc0087
--- /dev/null
+++ b/src/wireviz/templates/din-6771.html
@@ -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>
diff --git a/src/wireviz/templates/simple.html b/src/wireviz/templates/simple.html
new file mode 100644
index 0000000..d6418e3
--- /dev/null
+++ b/src/wireviz/templates/simple.html
@@ -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>
