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

<!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; }

/* 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: 5mm; 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(8 * 18mm); counter-increment: module_counter 9; }
td[colspan="10"] { width: calc(8 * 18mm); counter-increment: module_counter 10; }
td[colspan="11"] { width: calc(8 * 18mm); counter-increment: module_counter 11; }
td[colspan="12"] { width: calc(8 * 18mm); counter-increment: module_counter 12; }
td[colspan="13"] { width: calc(8 * 18mm); counter-increment: module_counter 13; }
td[colspan="14"] { width: calc(8 * 18mm); counter-increment: module_counter 14; }
td[colspan="15"] { width: calc(8 * 18mm); counter-increment: module_counter 15; }
td[colspan="16"] { width: calc(8 * 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 Modules ( github.com/harvie )</h1>
<div class="noprint">Copy-paste these icons:</div>
&#x1F4E1; &#x1F310; &#x1F514; &#x1F4FA; &#x1F4DE; &#x1F50C; &#x1F4A7; &#x1F525; &#x26A1; &#x1f4a1; &#x1F527; &#x1f6e0;&#xFE0F; &#x1F511; &#x1F512; &#x1F321;&#xFE0F; &#x2699;&#xFE0F; &#x1F552; &#x23F0; &#x1F4A8; &#x1F50B; &#x1F4F9; &#x1F510; &#x1F916; &#x2600;&#xFE0F; &#x1F312; &#x1F319; &#x1F506; &#x1F31E; &#x23F3; &#x1F6E1;&#xFE0F; &#x2694;&#xFE0F; &#x2620; &#x2620;&#xFE0F; &#x1F6D7; &#x1F697; &#x2B50; &#x2728; &#x1F4AB; &#x2744;&#xFE0F; &#x26A0; &#x26A0;&#xFE0F; &#x1F6A8;
<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 />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></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.trim();</script>

</body>
</html>
Commit	Line	Data
5c8f383f	1	<!DOCTYPE html>
3432350e TM	2	<html>
3432350e TM	3	<head>
e83b3e7b	4	<title>⚡ Distribution Board Label Generator for DIN Rail Modules</title>
3432350e	5	<style>
5b5e7001 TM	6	/* DIN Rail Modules are 17.5mm wide, but mounted with 18mm pitch to accomodate differences */
5b5e7001 TM	7
6a37a200	8	/* fonts */
c2eb7b9f TM	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; }
6a37a200 TM	12
	13	/* table */
	14	table { border-spacing:0px; border-collapse: collapse; }
	15	tr { margin-bottom: 10mm; }
c2eb7b9f	16	td * { display: block; }
3432350e	17	td {
5b5e7001	18	border: 1px solid black; width: 18mm; height: 16mm;
3432350e	19	text-align: center; padding: 0; overflow: hidden;
6a37a200	20	display: flex-wrap; float: left; margin-bottom: 5mm; box-sizing: border-box;
9dce371e	21	justify-content: center; /* align-items: center; */
09fb3f72	22	white-space: pre-line;
6a37a200	23	position: relative;
3432350e TM	24	}
3432350e TM	25	td:not(:last-child) { border-right: 0px solid red; }
6a37a200 TM	26
	27	/* wide modules */
	28	td[colspan="2"] { width: calc(2 * 18mm); counter-increment: module_counter 2; }
	29	td[colspan="3"] { width: calc(3 * 18mm); counter-increment: module_counter 3; }
	30	td[colspan="4"] { width: calc(4 * 18mm); counter-increment: module_counter 4; }
	31	td[colspan="5"] { width: calc(5 * 18mm); counter-increment: module_counter 5; }
	32	td[colspan="6"] { width: calc(6 * 18mm); counter-increment: module_counter 6; }
	33	td[colspan="7"] { width: calc(7 * 18mm); counter-increment: module_counter 7; }
	34	td[colspan="8"] { width: calc(8 * 18mm); counter-increment: module_counter 8; }
	35	td[colspan="9"] { width: calc(8 * 18mm); counter-increment: module_counter 9; }
	36	td[colspan="10"] { width: calc(8 * 18mm); counter-increment: module_counter 10; }
	37	td[colspan="11"] { width: calc(8 * 18mm); counter-increment: module_counter 11; }
	38	td[colspan="12"] { width: calc(8 * 18mm); counter-increment: module_counter 12; }
	39	td[colspan="13"] { width: calc(8 * 18mm); counter-increment: module_counter 13; }
	40	td[colspan="14"] { width: calc(8 * 18mm); counter-increment: module_counter 14; }
	41	td[colspan="15"] { width: calc(8 * 18mm); counter-increment: module_counter 15; }
	42	td[colspan="16"] { width: calc(8 * 18mm); counter-increment: module_counter 16; }
	43
	44	/* indexing */
	45	tr { counter-reset: module_counter; }
	46	td { counter-increment: module_counter 1; }
	47	table.indexed * td::after {
	48	content: counter(module_counter);
	49	font-size: 1.8mm; line-height: 1.9mm;
	50	top: 0px;
	51	right: 0px;
	52	position: absolute;
	53
	54	padding: 0px 1px 2px 1px;
	55	}
	56	table.fancyindex * td::after {
	57	background-color: black; color: white;
	58	width: 1.2em;
	59	border-bottom-left-radius: 5px;
	60	}
	61
	62	/* print layout */
9299f5a2	63	@media print {
6a37a200	64	* { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
91bfe157	65	.noprint, .noprint * { display: none; }
9299f5a2 TM	66	@page { size: landscape; }
9299f5a2 TM	67	}
6a37a200	68
3432350e TM	69	</style>
	70	</head>
	71	<body>
b733060c	72	<h1>Distribution Box Label Generator for DIN Rail Modules ( github.com/harvie )</h1>
91bfe157	73	<div class="noprint">Copy-paste these icons:</div>
6a37a200	74	📡 🌐 🔔 📺 📞 🔌 💧 🔥 ⚡ 💡 🔧 🛠️ 🔑 🔒 🌡️ ⚙️ 🕒 ⏰ 💨 🔋 📹 🔐 🤖 ☀️ 🌒 🌙 🔆 🌞 ⏳ 🛡️ ⚔️ ☠ ☠️ 🛗 🚗 ⭐ ✨ 💫 ❄️ ⚠ ⚠️ 🚨
29590143	75	<br />
5c8f383f	76	<div class="noprint">
b6d6a802	77	<textarea id="labeltext" style="width:100%; height: 20em;" oninput="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;"></textarea>
a19f9396	78	Use CTRL+S to save whole tool including your changes to your computer. CTRL+P to print.<br />
5c8f383f TM	79	<button onclick="document.getElementById('labeltable').innerHTML=document.getElementById('labeltext').value;">Generate</button>
5c8f383f TM	80	<button onclick="window.print();return false;">Print</button>
b733060c	81	</div>
5c8f383f	82	<br />
5c8f383f	83
6a37a200 TM	84	<div id="labeltable">
6a37a200 TM	85	<table class="">
5bb08111 TM	86
5bb08111 TM	87	<tr>
3432350e	88	<td></td>
0798dac0	89	<td>🔌<br />Obývák</td>
1b9cbe22	90	<td>🔌<br />Pokoje</td>
0798dac0	91	<td>💧<br />Koupelna Pračka</td>
3432350e	92	<td></td>
37483e27 TM	93	<td>💧<br />Kuchyně Linka</td>
37483e27 TM	94	<td>💧<br />Kuchyně Myčka</td>
1b9cbe22	95	<td colspan=3>🔥<br />Kuchyně Sporák</td>
18f916cc	96	<td colspan=3>⚡<br />Svodič přepětí</td>
3432350e TM	97	<td></td>
	98	</tr>
	99
3432350e TM	100	<tr>
	101	<td></td>
	102	<td></td>
0798dac0 TM	103	<td>🔌<br />Vchod</td>
0798dac0 TM	104	<td>🔌<br />Předsíň</td>
6a37a200	105	<td>🛠️<br />Režie</td>
b665bd20 TM	106	<td>💡<br />Světla Kuchyně</td>
	107	<td>💡<br />Světla Koupelna</td>
	108	<td>💡<br />Světla Obývák</td>
	109	<td>💡<br />Světla Pokoje</td>
	110	<td>💡<br />Světla Předsíň</td>
1e31524f	111	<td colspan=3>💡<br />Světla Předsíň<br />Bezdrátové Relé</td>
3432350e TM	112	<td></td>
3432350e TM	113	</tr>
6a37a200	114	</table>
3432350e	115
6a37a200	116	<table class="indexed">
3432350e	117	<tr>
c2eb7b9f TM	118	<td><small>Very long and tiny text that is really important to have on your breaker box!</small></td>
	119	<td>Warning!<small><small>Very long and tiny text that is really important to have on your breaker box!</small></small></td>
	120	<td><b>Bold</b> <i>Italic</i> <u>Under</u></td>
3432350e TM	121	<td></td>
	122	<td></td>
	123	<td></td>
	124	<td></td>
	125	<td></td>
	126	<td></td>
	127	<td></td>
	128	<td></td>
	129	<td></td>
	130	<td></td>
	131	<td></td>
5bb08111 TM	132	</tr>
	133
	134	<tr>
	135	<td></td>
	136	<td></td>
	137	<td></td>
	138	<td></td>
	139	<td></td>
	140	<td></td>
	141	<td></td>
	142	<td></td>
	143	<td></td>
	144	<td></td>
	145	<td></td>
	146	<td></td>
	147	<td></td>
	148	<td></td>
	149	</tr>
6a37a200	150	</table>
5bb08111	151
6a37a200	152	<table class="indexed fancyindex">
5bb08111 TM	153	<tr>
	154	<td></td>
	155	<td></td>
	156	<td></td>
	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	</tr>
	169
	170	</table>
6a37a200	171	</div>
3432350e	172
5c8f383f	173	<script>document.getElementById('labeltext').value=document.getElementById('labeltable').innerHTML.trim();</script>
3432350e TM	174
	175	</body>
	176	</html>