tools/din_rail_module_label_generator.html

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