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 table,h1 { font-family: sans-serif; font-weight: normal; font-size: 3.8mm; line-height: 5.2mm; }
   9 small { font-size: 2.5mm; line-height: 2.5mm; }
  10 small small { font-size: 2mm; line-height: 1.9mm; }
  11 td * { display: block; }
  12 td {
  13         border: 1px solid black; width: 18mm; height: 16mm;
  14         text-align: center; padding: 0; overflow: hidden;
  15         display: flex-wrap; float: left; margin-bottom: 10mm; box-sizing: border-box;
  16         justify-content: center; /* align-items: center; */
  17         white-space: pre-line;
  18 }
  19 td:not(:last-child) { border-right: 0px solid red; }
  20 td[colspan="2"] { width: calc(2 * 18mm); }
  21 td[colspan="3"] { width: calc(3 * 18mm); }
  22 td[colspan="4"] { width: calc(4 * 18mm); }
  23 td[colspan="5"] { width: calc(5 * 18mm); }
  24 td[colspan="6"] { width: calc(6 * 18mm); }
  25 td[colspan="7"] { width: calc(7 * 18mm); }
  26 td[colspan="8"] { width: calc(8 * 18mm); }
  27 tr { margin-bottom: 10mm; }
  28 table { border-spacing:0px; border-collapse: collapse; }
  29 @media print {
  30         .noprint * { display: none; }
  31         @page { size: landscape; }
  32 }
  33 </style>
  34 </head>
  35 <body>
  36 <h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
  37 Copy-paste these icons: &#x1F4E1; &#x1F310; &#x1F514; &#x1F4FA; &#x1F4DE; &#x1F50C; &#x1F4A7; &#x1F525; &#x26A1; &#x1f4a1; &#x1F527; &#x1F511; &#x1F512; &#x1F321; &#x2699; &#x1F552; &#x23F0; &#x1F4A8; &#x1F50B; &#x1F4F9; &#x1F510; &#x1F916; &#x2600; &#x1F312; &#x1F319; &#x1F506; &#x1F31E; &#x23F3;
  38 <br />
  39 <div class="noprint">
  40 <textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
  41 <button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
  42 <button onclick="window.print();return false;">Print</button>
  43 </div>
  44 <br />
  45 <br />
  46
  47 <table id="labeltable">
  48
  49 <tr>
  50 <td></td>
  51 <td>&#x1F50C;<br />Obývák</td>
  52 <td>&#x1F50C;<br />Pokoje</td>
  53 <td>&#x1F4A7;<br />Koupelna Pračka</td>
  54 <td></td>
  55 <td>&#x1F4A7;<br />Kuchyně Linka</td>
  56 <td>&#x1F4A7;<br />Kuchyně Myčka</td>
  57 <td colspan=3>&#x1F525;<br />Kuchyně Sporák</td>
  58 <td colspan=3>&#x26A1;<br />Svodič přepětí</td>
  59 <td></td>
  60 </tr>
  61
  62 <tr>
  63 <td></td>
  64 <td></td>
  65 <td>&#x1F50C;<br />Vchod</td>
  66 <td>&#x1F50C;<br />Předsíň</td>
  67 <td>&#x1F527;<br />Režie</td>
  68 <td>&#x1f4a1;<br />Světla Kuchyně</td>
  69 <td>&#x1f4a1;<br />Světla Koupelna</td>
  70 <td>&#x1f4a1;<br />Světla Obývák</td>
  71 <td>&#x1f4a1;<br />Světla Pokoje</td>
  72 <td>&#x1f4a1;<br />Světla Předsíň</td>
  73 <td colspan=3>&#x1f4a1;<br />Světla Předsíň<br />Bezdrátové Relé</td>
  74 <td></td>
  75 </tr>
  76
  77 <tr>
  78 <td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
  79 <td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
  80 <td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
  81 <td></td>
  82 <td></td>
  83 <td></td>
  84 <td></td>
  85 <td></td>
  86 <td></td>
  87 <td></td>
  88 <td></td>
  89 <td></td>
  90 <td></td>
  91 <td></td>
  92 </tr>
  93
  94 <tr>
  95 <td></td>
  96 <td></td>
  97 <td></td>
  98 <td></td>
  99 <td></td>
 100 <td></td>
 101 <td></td>
 102 <td></td>
 103 <td></td>
 104 <td></td>
 105 <td></td>
 106 <td></td>
 107 <td></td>
 108 <td></td>
 109 </tr>
 110
 111 <tr>
 112 <td></td>
 113 <td></td>
 114 <td></td>
 115 <td></td>
 116 <td></td>
 117 <td></td>
 118 <td></td>
 119 <td></td>
 120 <td></td>
 121 <td></td>
 122 <td></td>
 123 <td></td>
 124 <td></td>
 125 <td></td>
 126 </tr>
 127
 128 </table>
 129
 130 <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.trim();</script>
 131
 132 </body>
 133 </html>