2 Copyright 2021 - 2022, Tomas Mudrunka
3 SPDX-License-Identifier: BSD-3-Clause
8 <title>⚡ Distribution Board Label Generator for DIN Rail Modules
</title>
10 /* DIN Rail Modules are
17.5mm wide, but mounted with
18mm pitch to accomodate differences */
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; }
19 table { border-spacing:
0px; border-collapse: collapse; }
20 tr { margin-bottom:
10mm; }
21 td * { display: block; }
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;
30 td:not(:last-child) { border-right:
0px solid red; }
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; }
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;
59 padding:
0px
1px
2px
1px;
61 table.fancyindex * td::after {
62 background-color: black; color: white;
64 border-bottom-left-radius:
5px;
69 * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
70 .noprint, .noprint * { display: none; }
71 @page { size: landscape; }
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 --> 🔌 ⚡ 💡 🔋 🔥 💧
80 <!-- Telco --> 📡 🌐 📺 📞 🔔 📱 🔊 ☎️
81 <!-- Danger --> ⚠ ⚠️ 🚨 💀 ☠️ ☠ 🚫
82 <!-- Home --> 🍽️ 🍴 🛏️ 🛀 🚽 🏠 🚗
84 <!-- Work --> 🔧 🛠️ ⚙️ 🤖 🛗 🖥️ 🪛
85 <!-- Elements --> 🌡️ 🕒 ⏰ 💨 ☀️ 🌒 🌙 🔆 🌞 ⏳ ⭐ ✨ 💫 ❄️
86 <!-- Security --> 🔑 🔒 🔐 🛡️ ⚔️
87 <!-- Multimedia --> 📹 📽️ 🎥
88 <!-- Geometry --> ■ ▲ ● ◆
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>
103 <td>🔌<br />Living Room
</td>
104 <td>🔌<br />Bedroom
</td>
105 <td>💧<br />Washing Machine
</td>
106 <td>💡<br />Hall Lights
</td>
107 <td>💧<br />Kitchen Counter
</td>
108 <td>💧<br />Dish Washer
</td>
109 <td colspan=
3>🔥<br />Kitchen Oven
</td>
110 <td colspan=
3>⚡<br />Surge Protector
</td>
116 <td>🔌<br />Obývák
</td>
117 <td>🔌<br />Pokoje
</td>
118 <td>💧<br />Koupelna Pračka
</td>
120 <td>💧<br />Kuchyně Linka
</td>
121 <td>💧<br />Kuchyně Myčka
</td>
122 <td colspan=
3>🔥<br />Kuchyně Sporák
</td>
123 <td colspan=
3>⚡<br />Svodič přepětí
</td>
130 <td>🔌<br />Vchod
</td>
131 <td>🔌<br />Předsíň
</td>
132 <td>🛠️<br />Režie
</td>
133 <td>💡<br />Světla Kuchyně
</td>
134 <td>💡<br />Světla Koupelna
</td>
135 <td>💡<br />Světla Obývák
</td>
136 <td>💡<br />Světla Pokoje
</td>
137 <td>💡<br />Světla Předsíň
</td>
138 <td colspan=
3>💡<br />Světla Předsíň
<br />Bezdrátové Relé
</td>
146 <table class=
"indexed">
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>
156 <td colspan=
"6">⚠️<br />Colspan is not breaking the numbering scheme
</td>
161 <td colspan=
"3">🔥<br />Kuchyně
<br />Varná deska
</td>
162 <td>💡<br />Světla
</td>
163 <td>🔌 📡<br />Předsíň Data
</td>
164 <td>🔥<br />Kuchyně Trouba
</td>
165 <td>🔌 ❄️<br />Kuchyně Lednice
</td>
166 <td>🔌 🔥<br />Kuchyně
<small>Mikrovlnná Trouba
</small></td>
167 <td>🔌 💧<br />Kuchyně Myčka
</td>
168 <td colspan=
"4">⚡ 💧<br />Proudový chránič
</td>
169 <td>🔌 💧<br />Koupelna Pračka
</td>
173 <td>🔌<br />Kuchyně Linka
</td>
174 <td>🔌<br />Obývák Předsíň
<small>Střed
</small></td>
175 <td>🔌<br />Ložnice
</td>
176 <td>🔌 💡<br />Kuchyně Digestoř
</td>
177 <td>🔥<br />Koupelna Podlaha
</td>
178 <td>🔥<br />Koupelna Žebřík
</td>
179 <td>🔌 💡<br />Koupelna
</td>
180 <td>🔔<br />Zvonek
</td>
210 <table class=
"indexed fancyindex">
232 <script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody
>/g,
"").trim();
</script>