+<!DOCTYPE html>
<html>
<head>
-<title>DIN Module label generator</title>
+<title>⚡ Distribution Board Label Generator for DIN Rail Modules</title>
<style>
-* { font-family: sans-serif; font-weight: normal; font-size: 98%; }
+/* 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: 17.5mm; height: 17.5mm;
+ border: 1px solid black; width: 18mm; height: 16mm;
text-align: center; padding: 0; overflow: hidden;
- display: flex; float: left; margin-bottom: 10mm; box-sizing: border-box;
+ 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; }
-td[colspan="3"] { width: calc(3 * 17.5mm); }
-tr { margin-bottom: 10mm; }
-table { border-spacing:0px; border-collapse: collapse; }
+
+/* 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>
-<h2>DIN Module label generator</h2>
-github.com/harvie
-<br /><br />
+<h1>Distribution Box Label Generator for DIN Rail Circuit Breaker Modules ( <a href="https://github.com/harvie">github.com/harvie</a> )</h1>
+<div class="noprint">Copy-paste these icons:</div>
+<!-- Power --> 🔌 ⚡ 💡 🔋 🔥 💧
+<!-- Telco --> 📡 🌐 📺 📞 🔔 📱 🔊 ☎️
+<!-- Danger --> ⚠ ⚠️ 🚨 💀 ☠️ ☠ 🚫
+<!-- Home --> 🍽️ 🍴 🛏️ 🛀 🚽 🏠 🚗
+<br />
+<!-- Work --> 🔧 🛠️ ⚙️ 🤖 🛗 🖥️ 🪛
+<!-- Elements --> 🌡️ 🕒 ⏰ 💨 ☀️ 🌒 🌙 🔆 🌞 ⏳ ⭐ ✨ 💫 ❄️
+<!-- Security --> 🔑 🔒 🔐 🛡️ ⚔️
+<!-- Multimedia --> 📹 📽️ 🎥
+<!-- Geometry --> ■ ▲ ● ◆
+<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="">
-<table><tr>
+<tr>
+<td></td>
+<td>🔌<br />Living Room</td>
+<td>🔌<br />Bedroom</td>
+<td>💧<br />Washing Machine</td>
+<td>💡<br />Hall Lights</td>
+<td>💧<br />Kitchen Counter</td>
+<td>💧<br />Dish Washer</td>
+<td colspan=3>🔥<br />Kitchen Oven</td>
+<td colspan=3>⚡<br />Surge Protector</td>
+<td></td>
+</tr>
+
+<tr>
<td></td>
<td>🔌<br />Obývák</td>
-<td>🔌<br />Pokoje 1+2</td>
+<td>🔌<br />Pokoje</td>
<td>💧<br />Koupelna Pračka</td>
<td></td>
-<td>💧<br />Kuchyň Linka</td>
-<td>💧<br />Myčka</td>
-<td colspan=3>🔥<br />Sporák</td>
-<td colspan=3>⚡<br />Přepěťovka</td>
+<td>💧<br />Kuchyně Linka</td>
+<td>💧<br />Kuchyně Myčka</td>
+<td colspan=3>🔥<br />Kuchyně Sporák</td>
+<td colspan=3>⚡<br />Svodič přepětí</td>
<td></td>
</tr>
-<tr></tr>
-
<tr>
<td></td>
<td></td>
<td>🔌<br />Vchod</td>
<td>🔌<br />Předsíň</td>
-<td>🔧<br /></td>
-<td>💡 Sv. Kuchyň</td>
-<td>💡 Sv. Koupel</td>
-<td>💡 Sv. Obývák</td>
-<td>💡 Sv. Pokoje</td>
-<td>💡 Sv. Předsíň</td>
-<td colspan=3>💡 Sv.<br /> RF příjmač předsíň</td>
+<td>🛠️<br />Režie</td>
+<td>💡<br />Světla Kuchyně</td>
+<td>💡<br />Světla Koupelna</td>
+<td>💡<br />Světla Obývák</td>
+<td>💡<br />Světla Pokoje</td>
+<td>💡<br />Světla Předsíň</td>
+<td colspan=3>💡<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">⚠️<br />Colspan is not breaking the numbering scheme</td>
<td></td>
+</tr>
+
+<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
-</tr></table>
+<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>
GIT.Harvie.CZ / mirrors / Designs.git / blobdiff