tools/din_rail_module_label_generator.html

   1 <!--
   2 Copyright 2021 - 2022, Tomas Mudrunka
   3 SPDX-License-Identifier: BSD-3-Clause
   4 -->
   5 <!DOCTYPE html>
   6 <html>
   7 <head>
   8 <title>&#x26A1; Distribution Board Label Generator for DIN Rail Modules</title>
   9 <style>
  10 /* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */
  11
  12 /* fonts */
  13 table,h1 { font-family: sans-serif; font-weight: normal; font-size: 3.8mm; line-height: 5.2mm; }
  14 small { font-size: 2.5mm; line-height: 2.5mm; }
  15 small small { font-size: 2mm; line-height: 1.9mm; }
  16 a { color: dark-grey; text-decoration: none; }
  17
  18 /* table */
  19 table { border-spacing:0px; border-collapse: collapse; }
  20 tr { margin-bottom: 10mm; }
  21 td * { display: block; }
  22 td {
  23         border: 1px solid black; width: 18mm; height: 16mm;
  24         text-align: center; padding: 0; overflow: hidden;
  25         display: flex-wrap; float: left; margin-bottom: 4mm; box-sizing: border-box;
  26         justify-content: center; /* align-items: center; */
  27         white-space: pre-line;
  28         position: relative;
  29 }
  30 td:not(:last-child) { border-right: 0px solid red; }
  31
  32 /* wide modules */
  33 td[colspan="2" ] { width: calc(2  * 18mm); counter-increment: module_counter 2;  }
  34 td[colspan="3" ] { width: calc(3  * 18mm); counter-increment: module_counter 3;  }
  35 td[colspan="4" ] { width: calc(4  * 18mm); counter-increment: module_counter 4;  }
  36 td[colspan="5" ] { width: calc(5  * 18mm); counter-increment: module_counter 5;  }
  37 td[colspan="6" ] { width: calc(6  * 18mm); counter-increment: module_counter 6;  }
  38 td[colspan="7" ] { width: calc(7  * 18mm); counter-increment: module_counter 7;  }
  39 td[colspan="8" ] { width: calc(8  * 18mm); counter-increment: module_counter 8;  }
  40 td[colspan="9" ] { width: calc(9  * 18mm); counter-increment: module_counter 9;  }
  41 td[colspan="10"] { width: calc(10 * 18mm); counter-increment: module_counter 10; }
  42 td[colspan="11"] { width: calc(11 * 18mm); counter-increment: module_counter 11; }
  43 td[colspan="12"] { width: calc(12 * 18mm); counter-increment: module_counter 12; }
  44 td[colspan="13"] { width: calc(13 * 18mm); counter-increment: module_counter 13; }
  45 td[colspan="14"] { width: calc(14 * 18mm); counter-increment: module_counter 14; }
  46 td[colspan="15"] { width: calc(15 * 18mm); counter-increment: module_counter 15; }
  47 td[colspan="16"] { width: calc(16 * 18mm); counter-increment: module_counter 16; }
  48
  49 /* indexing */
  50 tr { counter-reset: module_counter; }
  51 td { counter-increment: module_counter 1; }
  52 table.indexed * td::after {
  53         content: counter(module_counter);
  54         font-size: 1.8mm; line-height: 1.9mm;
  55         top: 0px;
  56         right: 0px;
  57         position: absolute;
  58
  59         padding: 0px 1px 2px 1px;
  60 }
  61 table.fancyindex * td::after {
  62         background-color: black; color: white;
  63         width: 1.2em;
  64         border-bottom-left-radius: 5px;
  65 }
  66
  67 /* print layout */
  68 @media print {
  69         * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  70         .noprint, .noprint * { display: none; }
  71         @page { size: landscape; }
  72 }
  73
  74 </style>
  75 </head>
  76 <body>
  77 <h1>Distribution Box Label Generator for DIN Rail Circuit Breaker Modules with 18mm pitch ( <a href="https://github.com/harvie">github.com/harvie</a> ; License: BSD-3 )</h1>
  78 <div class="noprint">Copy-paste these icons:</div>
  79 <!-- Power      --> &#x1F50C; &#x26A1; &#x1f4a1; &#x1F50B; &#x1F525; &#x1F4A7;
  80 <!-- Telco      --> &#x1F4E1; &#x1F310; &#x1F4FA; &#x1F4DE; &#x1F514; &#x1F4F1; &#x1F50A; &#x260E;&#xFE0F;
  81 <!-- Danger     --> &#x26A0; &#x26A0;&#xFE0F; &#x1F6A8; &#x1F480; &#x2620;&#xFE0F; &#x2620; &#x1F6AB;
  82 <!-- Home       --> &#x1F37D;&#xFE0F; &#x1F374; &#x1F6CF;&#xFE0F; &#x1F6C0; &#x1F6BD; &#x1F3E0; &#x1F697;
  83 <br />
  84 <!-- Work       --> &#x1F527; &#x1f6e0;&#xFE0F; &#x2699;&#xFE0F; &#x1F916; &#x1F6D7; &#x1F5A5;&#xFE0F; &#x1FA9B;
  85 <!-- Elements   --> &#x1F321;&#xFE0F; &#x1F552; &#x23F0; &#x1F4A8; &#x2600;&#xFE0F; &#x1F312; &#x1F319; &#x1F506; &#x1F31E; &#x23F3; &#x2B50; &#x2728; &#x1F4AB; &#x2744;&#xFE0F;
  86 <!-- Security   --> &#x1F511; &#x1F512; &#x1F510; &#x1F6E1;&#xFE0F; &#x2694;&#xFE0F;
  87 <!-- Multimedia --> &#x1F4F9; &#x1F4FD;&#xFE0F; &#x1F3A5;
  88 <!-- Geometry   --> &#x25A0; &#x25B2; &#x25CF; &#x25C6;
  89 <br />
  90 <div class="noprint">
  91 <textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
  92 Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.<br />
  93 <button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
  94 <button onclick="window.print();return false;">Print</button>
  95 </div>
  96 <br />
  97
  98 <div id="labeltable">
  99 <table class="">
 100
 101 <tr>
 102 <td></td>
 103 <td>&#x1F50C;<br />Living Room</td>
 104 <td>&#x1F50C;<br />Bedroom</td>
 105 <td>&#x1F4A7;<br />Washing Machine</td>
 106 <td>&#x1f4a1;<br />Hall Lights</td>
 107 <td>&#x1F4A7;<br />Kitchen Counter</td>
 108 <td>&#x1F4A7;<br />Dish Washer</td>
 109 <td colspan=3>&#x1F525;<br />Kitchen Oven</td>
 110 <td colspan=3>&#x26A1;<br />Surge Protector</td>
 111 <td></td>
 112 </tr>
 113
 114 <tr>
 115 <td></td>
 116 <td>&#x1F50C;<br />Obývák</td>
 117 <td>&#x1F50C;<br />Pokoje</td>
 118 <td>&#x1F4A7;<br />Koupelna Pračka</td>
 119 <td></td>
 120 <td>&#x1F4A7;<br />Kuchyně Linka</td>
 121 <td>&#x1F4A7;<br />Kuchyně Myčka</td>
 122 <td colspan=3>&#x1F525;<br />Kuchyně Sporák</td>
 123 <td colspan=3>&#x26A1;<br />Svodič přepětí</td>
 124 <td></td>
 125 </tr>
 126
 127 <tr>
 128 <td></td>
 129 <td></td>
 130 <td>&#x1F50C;<br />Vchod</td>
 131 <td>&#x1F50C;<br />Předsíň</td>
 132 <td>&#x1f6e0;&#xFE0F;<br />Režie</td>
 133 <td>&#x1f4a1;<br />Světla Kuchyně</td>
 134 <td>&#x1f4a1;<br />Světla Koupelna</td>
 135 <td>&#x1f4a1;<br />Světla Obývák</td>
 136 <td>&#x1f4a1;<br />Světla Pokoje</td>
 137 <td>&#x1f4a1;<br />Světla Předsíň</td>
 138 <td colspan=3>&#x1f4a1;<br />Světla Předsíň<br />Bezdrátové Relé</td>
 139 <td></td>
 140 </tr>
 141
 142 </table>
 143
 144
 145
 146 <table class="indexed">
 147
 148 <tr>
 149 <td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
 150 <td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
 151 <td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
 152 <td></td>
 153 <td></td>
 154 <td></td>
 155 <td></td>
 156 <td colspan="6">&#x26A0;&#xFE0F;<br />Colspan is not breaking the numbering scheme</td>
 157 <td></td>
 158 </tr>
 159
 160 <tr>
 161 <td colspan="3">&#x1F525;<br />Kuchyně<br />Varná deska</td>
 162 <td>&#x1f4a1;<br />Světla</td>
 163 <td>&#x1F50C; &#x1F4E1;<br />Předsíň Data</td>
 164 <td>&#x1F525;<br />Kuchyně Trouba</td>
 165 <td>&#x1F50C; &#x2744;&#xFE0F;<br />Kuchyně Lednice</td>
 166 <td>&#x1F50C; &#x1F525;<br />Kuchyně<small>Mikrovlnná Trouba</small></td>
 167 <td>&#x1F50C; &#x1F4A7;<br />Kuchyně Myčka</td>
 168 <td colspan="4">&#x26A1; &#x1F4A7;<br />Proudový chránič</td>
 169 <td>&#x1F50C; &#x1F4A7;<br />Koupelna Pračka</td>
 170 </tr>
 171
 172 <tr>
 173 <td>&#x1F50C;<br />Kuchyně Linka</td>
 174 <td>&#x1F50C;<br />Obývák Chodba<small>Střed</small></td>
 175 <td>&#x1F50C;<br />Ložnice</td>
 176 <td>&#x1F50C; &#x1f4a1;<br />Kuchyně Digestoř</td>
 177 <td>&#x1F525;<br />Koupelna Podlaha</td>
 178 <td>&#x1F525;<br />Koupelna Žebřík</td>
 179 <td>&#x1F50C; &#x1f4a1;<br />Koupelna</td>
 180 <td>&#x1F514;<br />Zvonek</td>
 181 <td></td>
 182 <td></td>
 183 <td></td>
 184 <td></td>
 185 <td></td>
 186 <td></td>
 187 </tr>
 188
 189 <tr>
 190 <td></td>
 191 <td></td>
 192 <td></td>
 193 <td></td>
 194 <td></td>
 195 <td></td>
 196 <td></td>
 197 <td></td>
 198 <td></td>
 199 <td></td>
 200 <td></td>
 201 <td></td>
 202 <td></td>
 203 <td></td>
 204 </tr>
 205
 206 </table>
 207
 208
 209
 210 <table class="indexed fancyindex">
 211
 212 <tr>
 213 <td></td>
 214 <td></td>
 215 <td></td>
 216 <td></td>
 217 <td></td>
 218 <td></td>
 219 <td></td>
 220 <td></td>
 221 <td></td>
 222 <td></td>
 223 <td></td>
 224 <td></td>
 225 <td></td>
 226 <td></td>
 227 </tr>
 228
 229 </table>
 230 </div>
 231
 232 <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody>/g, "").trim();</script>
 233
 234 </body>
 235 </html>