[mirrors/Designs.git] / tools / din_rail_module_label_generator.html

<!--
Copyright 2021 - 2022, Tomas Mudrunka
SPDX-License-Identifier: BSD-3-Clause
-->
<!DOCTYPE html>
<html>
<head>
<title>&#x26A1; Distribution Board Label Generator for DIN Rail Modules</title>
<style>
/* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */

/* fonts */
table,h1 { font-family: sans-serif; font-weight: normal; font-size: 3.8mm; line-height: 5.2mm; }
small { font-size: 2.5mm; line-height: 2.5mm; }
small small { font-size: 2mm; line-height: 1.9mm; }
a { color: dark-grey; text-decoration: none; }

/* table */
table { border-spacing:0px; border-collapse: collapse; }
tr { margin-bottom: 10mm; }
td * { display: block; }
td {
	border: 1px solid black; width: 18mm; height: 16mm; 
	text-align: center; padding: 0; overflow: hidden;
	display: flex-wrap; float: left; margin-bottom: 4mm; box-sizing: border-box;
	justify-content: center; /* align-items: center; */
	white-space: pre-line;
	position: relative;
}
td:not(:last-child) { border-right: 0px solid red; }

/* wide modules */
td[colspan="2" ] { width: calc(2  * 18mm); counter-increment: module_counter 2;  }
td[colspan="3" ] { width: calc(3  * 18mm); counter-increment: module_counter 3;  }
td[colspan="4" ] { width: calc(4  * 18mm); counter-increment: module_counter 4;  }
td[colspan="5" ] { width: calc(5  * 18mm); counter-increment: module_counter 5;  }
td[colspan="6" ] { width: calc(6  * 18mm); counter-increment: module_counter 6;  }
td[colspan="7" ] { width: calc(7  * 18mm); counter-increment: module_counter 7;  }
td[colspan="8" ] { width: calc(8  * 18mm); counter-increment: module_counter 8;  }
td[colspan="9" ] { width: calc(9  * 18mm); counter-increment: module_counter 9;  }
td[colspan="10"] { width: calc(10 * 18mm); counter-increment: module_counter 10; }
td[colspan="11"] { width: calc(11 * 18mm); counter-increment: module_counter 11; }
td[colspan="12"] { width: calc(12 * 18mm); counter-increment: module_counter 12; }
td[colspan="13"] { width: calc(13 * 18mm); counter-increment: module_counter 13; }
td[colspan="14"] { width: calc(14 * 18mm); counter-increment: module_counter 14; }
td[colspan="15"] { width: calc(15 * 18mm); counter-increment: module_counter 15; }
td[colspan="16"] { width: calc(16 * 18mm); counter-increment: module_counter 16; }

/* indexing */
tr { counter-reset: module_counter; }
td { counter-increment: module_counter 1; }
table.indexed * td::after {
	content: counter(module_counter);
	font-size: 1.8mm; line-height: 1.9mm;
	top: 0px;
	right: 0px;
	position: absolute;

	padding: 0px 1px 2px 1px;
}
table.fancyindex * td::after {
	background-color: black; color: white;
	width: 1.2em;
	border-bottom-left-radius: 5px;
}

/* print layout */
@media print {
	* { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
	.noprint, .noprint * { display: none; }
	@page { size: landscape; }
}

</style>
</head>
<body>
<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>
<div class="noprint">Copy-paste these icons:</div>
<!-- Power	--> &#x1F50C; &#x26A1; &#x1f4a1; &#x1F50B; &#x1F525; &#x1F4A7;
<!-- Telco	--> &#x1F4E1; &#x1F310; &#x1F4FA; &#x1F4DE; &#x1F514; &#x1F4F1; &#x1F50A; &#x260E;&#xFE0F;
<!-- Danger	--> &#x26A0; &#x26A0;&#xFE0F; &#x1F6A8; &#x1F480; &#x2620;&#xFE0F; &#x2620; &#x1F6AB;
<!-- Home	--> &#x1F37D;&#xFE0F; &#x1F374; &#x1F6CF;&#xFE0F; &#x1F6C0; &#x1F6BD; &#x1F3E0; &#x1F697;
<br />
<!-- Work	--> &#x1F527; &#x1f6e0;&#xFE0F; &#x2699;&#xFE0F; &#x1F916; &#x1F6D7; &#x1F5A5;&#xFE0F; &#x1FA9B;
<!-- Elements	--> &#x1F321;&#xFE0F; &#x1F552; &#x23F0; &#x1F4A8; &#x2600;&#xFE0F; &#x1F312; &#x1F319; &#x1F506; &#x1F31E; &#x23F3; &#x2B50; &#x2728; &#x1F4AB; &#x2744;&#xFE0F;
<!-- Security	--> &#x1F511; &#x1F512; &#x1F510; &#x1F6E1;&#xFE0F; &#x2694;&#xFE0F;
<!-- Multimedia --> &#x1F4F9; &#x1F4FD;&#xFE0F; &#x1F3A5;
<!-- Geometry	--> &#x25A0; &#x25B2; &#x25CF; &#x25C6;
<br />
<div class="noprint">
<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.<br />
<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
<button onclick="window.print();return false;">Print</button>
</div>
<br />

<div id="labeltable">
<table class="">

<tr>
<td></td>
<td>&#x1F50C;<br />Living Room</td>
<td>&#x1F50C;<br />Bedroom</td>
<td>&#x1F4A7;<br />Washing Machine</td>
<td>&#x1f4a1;<br />Hall Lights</td>
<td>&#x1F4A7;<br />Kitchen Counter</td>
<td>&#x1F4A7;<br />Dish Washer</td>
<td colspan=3>&#x1F525;<br />Kitchen Oven</td>
<td colspan=3>&#x26A1;<br />Surge Protector</td>
<td></td>
</tr>

<tr>
<td></td>
<td>&#x1F50C;<br />Obývák</td>
<td>&#x1F50C;<br />Pokoje</td>
<td>&#x1F4A7;<br />Koupelna Pračka</td>
<td></td>
<td>&#x1F4A7;<br />Kuchyně Linka</td>
<td>&#x1F4A7;<br />Kuchyně Myčka</td>
<td colspan=3>&#x1F525;<br />Kuchyně Sporák</td>
<td colspan=3>&#x26A1;<br />Svodič přepětí</td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td>&#x1F50C;<br />Vchod</td>
<td>&#x1F50C;<br />Předsíň</td>
<td>&#x1f6e0;&#xFE0F;<br />Režie</td>
<td>&#x1f4a1;<br />Světla Kuchyně</td>
<td>&#x1f4a1;<br />Světla Koupelna</td>
<td>&#x1f4a1;<br />Světla Obývák</td>
<td>&#x1f4a1;<br />Světla Pokoje</td>
<td>&#x1f4a1;<br />Světla Předsíň</td>
<td colspan=3>&#x1f4a1;<br />Světla Předsíň<br />Bezdrátové Relé</td>
<td></td>
</tr>

</table>


<table class="indexed">

<tr>
<td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
<td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
<td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="6">&#x26A0;&#xFE0F;<br />Colspan is not breaking the numbering scheme</td>
<td></td>
</tr>

<tr>
<td colspan="3">&#x1F525;<br />Kuchyně<br />Varná deska</td>
<td>&#x1f4a1;<br />Světla</td>
<td>&#x1F50C; &#x1F4E1;<br />Předsíň Data</td>
<td>&#x1F525;<br />Kuchyně Trouba</td>
<td>&#x1F50C; &#x2744;&#xFE0F;<br />Kuchyně Lednice</td>
<td>&#x1F50C; &#x1F525;<br /><small>&nbsp;<br />Mikrovlnná Trouba</small></td>
<td>&#x1F50C; &#x1F4A7;<br />Kuchyně Myčka</td>
<td colspan="4">&#x26A1;<br />Proudový chránič</td>
<td>&#x1F50C; &#x1F4A7;<br />Koupelna Pračka</td>
</tr>

<tr>
<td>&#x1F50C;<br />Kuchyně Linka</td>
<td>&#x1F50C;<br /><small>&nbsp;<br />Chodba Střed Obývák</small></td>
<td>&#x1F50C;<br />Ložnice</td>
<td>&#x1f4a1;<br />Linka Digestoř</td>
<td>&#x1F525;<br />Koupelna Podlaha</td>
<td>&#x1F525;<br />Koupelna Žebřík</td>
<td>&#x1F50C; &#x1f4a1;<br />Koupelna</td>
<td>&#x1F514;<br />Zvonek</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>


<table class="indexed fancyindex">

<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

</table>
</div>

<script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody>/g, "").trim();</script>

</body>
</html>
Commit	Line	Data
3eed1a78 TM	1	<!--
	2	Copyright 2021 - 2022, Tomas Mudrunka
	3	SPDX-License-Identifier: BSD-3-Clause
	4	-->
5c8f383f	5	<!DOCTYPE html>
3432350e TM	6	<html>
3432350e TM	7	<head>
e83b3e7b	8	<title>⚡ Distribution Board Label Generator for DIN Rail Modules</title>
3432350e	9	<style>
5b5e7001 TM	10	/* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */
5b5e7001 TM	11
6a37a200	12	/* fonts */
c2eb7b9f TM	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; }
48fc3365	16	a { color: dark-grey; text-decoration: none; }
6a37a200 TM	17
	18	/* table */
	19	table { border-spacing:0px; border-collapse: collapse; }
	20	tr { margin-bottom: 10mm; }
c2eb7b9f	21	td * { display: block; }
3432350e	22	td {
5b5e7001	23	border: 1px solid black; width: 18mm; height: 16mm;
3432350e	24	text-align: center; padding: 0; overflow: hidden;
df4e2e2b	25	display: flex-wrap; float: left; margin-bottom: 4mm; box-sizing: border-box;
9dce371e	26	justify-content: center; /* align-items: center; */
09fb3f72	27	white-space: pre-line;
6a37a200	28	position: relative;
3432350e TM	29	}
3432350e TM	30	td:not(:last-child) { border-right: 0px solid red; }
6a37a200 TM	31
6a37a200 TM	32	/* wide modules */
0d866561 TM	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; }
6a37a200 TM	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 */
9299f5a2	68	@media print {
6a37a200	69	* { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
91bfe157	70	.noprint, .noprint * { display: none; }
9299f5a2 TM	71	@page { size: landscape; }
9299f5a2 TM	72	}
6a37a200	73
3432350e TM	74	</style>
	75	</head>
	76	<body>
3eed1a78	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>
91bfe157	78	<div class="noprint">Copy-paste these icons:</div>
120005c3 TM	79	<!-- Power --> 🔌 ⚡ 💡 🔋 🔥 💧
120005c3 TM	80	<!-- Telco --> 📡 🌐 📺 📞 🔔 📱 🔊 ☎️
76d4c8fe	81	<!-- Danger --> ⚠ ⚠️ 🚨 💀 ☠️ ☠ 🚫
120005c3	82	<!-- Home --> 🍽️ 🍴 🛏️ 🛀 🚽 🏠 🚗
76d4c8fe	83	<br />
120005c3 TM	84	<!-- Work --> 🔧 🛠️ ⚙️ 🤖 🛗 🖥️ 🪛
	85	<!-- Elements --> 🌡️ 🕒 ⏰ 💨 ☀️ 🌒 🌙 🔆 🌞 ⏳ ⭐ ✨ 💫 ❄️
	86	<!-- Security --> 🔑 🔒 🔐 🛡️ ⚔️
	87	<!-- Multimedia --> 📹 📽️ 🎥
	88	<!-- Geometry --> ■ ▲ ● ◆
29590143	89	<br />
5c8f383f	90	<div class="noprint">
b6d6a802	91	<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
a19f9396	92	Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.<br />
5c8f383f TM	93	<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
5c8f383f TM	94	<button onclick="window.print();return false;">Print</button>
b733060c	95	</div>
5c8f383f	96	<br />
5c8f383f	97
6a37a200 TM	98	<div id="labeltable">
6a37a200 TM	99	<table class="">
5bb08111	100
65206571 TM	101	<tr>
	102	<td></td>
	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>
ff65ad0c	110	<td colspan=3>⚡<br />Surge Protector</td>
65206571 TM	111	<td></td>
	112	</tr>
	113
5bb08111	114	<tr>
3432350e	115	<td></td>
0798dac0	116	<td>🔌<br />Obývák</td>
1b9cbe22	117	<td>🔌<br />Pokoje</td>
0798dac0	118	<td>💧<br />Koupelna Pračka</td>
3432350e	119	<td></td>
37483e27 TM	120	<td>💧<br />Kuchyně Linka</td>
37483e27 TM	121	<td>💧<br />Kuchyně Myčka</td>
1b9cbe22	122	<td colspan=3>🔥<br />Kuchyně Sporák</td>
18f916cc	123	<td colspan=3>⚡<br />Svodič přepětí</td>
3432350e TM	124	<td></td>
	125	</tr>
	126
3432350e TM	127	<tr>
	128	<td></td>
	129	<td></td>
0798dac0 TM	130	<td>🔌<br />Vchod</td>
0798dac0 TM	131	<td>🔌<br />Předsíň</td>
6a37a200	132	<td>🛠️<br />Režie</td>
b665bd20 TM	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>
1e31524f	138	<td colspan=3>💡<br />Světla Předsíň<br />Bezdrátové Relé</td>
3432350e TM	139	<td></td>
3432350e TM	140	</tr>
bc5f5a29	141
6a37a200	142	</table>
3432350e	143
bc5f5a29 TM	144
bc5f5a29 TM	145
6a37a200	146	<table class="indexed">
bc5f5a29	147
3432350e	148	<tr>
c2eb7b9f TM	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>
3432350e TM	152	<td></td>
	153	<td></td>
	154	<td></td>
	155	<td></td>
aaa4a7c3	156	<td colspan="6">⚠️<br />Colspan is not breaking the numbering scheme</td>
3432350e	157	<td></td>
5bb08111 TM	158	</tr>
5bb08111 TM	159
df4e2e2b TM	160	<tr>
	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 /><small> <br />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>
	170	</tr>
	171
	172	<tr>
	173	<td>🔌<br />Kuchyně Linka</td>
	174	<td>🔌<br /><small> <br />Chodba Střed Obývák</small></td>
	175	<td>🔌<br />Ložnice</td>
	176	<td>💡<br />Linka 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>
	181	<td></td>
	182	<td></td>
	183	<td></td>
	184	<td></td>
	185	<td></td>
	186	<td></td>
	187	</tr>
	188
5bb08111 TM	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>
bc5f5a29	205
6a37a200	206	</table>
5bb08111	207
bc5f5a29 TM	208
bc5f5a29 TM	209
6a37a200	210	<table class="indexed fancyindex">
bc5f5a29	211
5bb08111 TM	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>
6a37a200	230	</div>
3432350e	231
bc5f5a29	232	<script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.replace(/<.?tbody>/g, "").trim();</script>
3432350e TM	233
	234	</body>
	235	</html>