112 lines
3.1 KiB
HTML
112 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Werma Signal Controller</title>
|
|
<link rel="stylesheet" href="res/style.css">
|
|
</head>
|
|
<body>
|
|
<h1>Werma Light Control</h1>
|
|
This is a small web interface which allows you to controll a Werma signal tower using the <a href="https://www.werma.com/USB-Anschlusselement-RM-5VDC-BK/64084000">640.840.00 connection module</a>.
|
|
You can configure the web interface to match your tower's configuration. The default configuration is: Ring 1 is green, Ring 2 is yellow, Ring 3 is red, Ring 4 is buzzer. Ring 5 is assumed to be unconnected.<br>
|
|
<i>All "product photos" are the property of Werma, I did not take them myself. If you are Werma and want me to take down the images, reach out to me via the contact mail in the legal notes on my main domain.</i>
|
|
|
|
<h5>Currently unsupported features</h5>
|
|
<ul>
|
|
<li>Buzzers (somewhat, you cannot currently controll them)</li>
|
|
<li>Persistant configuration ("startup settings")</li>
|
|
<li>Any bidirectional communication (getting SW version, etc.)</li>
|
|
</ul>
|
|
|
|
<!-- 1/4 of screen is a preview, rest is controll surface-->
|
|
|
|
<section style="display: flex; flex-direction: row;">
|
|
<div style="width: 25%; max-width: 290px;">
|
|
<h2>Preview</h2>
|
|
<!-- Images are placed above each other -->
|
|
<div id="leuchte">
|
|
<img src="res/images/top.jpg" id="module_top">
|
|
<div id="fill">
|
|
|
|
</div>
|
|
<img src="res/images/base_2.jpg" id="base_2">
|
|
<img src="res/images/base_1.jpg" id="base_1">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="width: 25%; max-width: 290px;">
|
|
<h2>Control</h2>
|
|
<div id="ctrlPane">
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div style="width: 75%;">
|
|
<div id="serialState">
|
|
|
|
</div>
|
|
<section>
|
|
<h2>Serial</h2>
|
|
<!-- Serial connection -->
|
|
<button onclick="serial_connect()">Connect</button>
|
|
<button onclick="serial_send()">Force refresh</button>
|
|
</section>
|
|
<section>
|
|
<h2>Setup</h2>
|
|
<!-- Load old config -->
|
|
<details>
|
|
<summary>Load config from string</summary>
|
|
<textarea id="config" style="width: 100%; height: 100px;"></textarea>
|
|
<button onclick="loadConfig()">Load</button>
|
|
<div id="config_error">
|
|
|
|
</div>
|
|
</details>
|
|
<details>
|
|
<summary>Export current config</summary>
|
|
<textarea id="config_out" style="width: 100%; height: 100px;" readonly></textarea>
|
|
</details>
|
|
<pre id="configWarn">
|
|
|
|
</pre>
|
|
<hr>
|
|
<h3>Configure light</h3>
|
|
<!-- Select top -->
|
|
<label for="setup_top">Top:</label>
|
|
<select id="setup_top" name="setup_top">
|
|
<option value="buzzer">Buzzer</option>
|
|
<option value="normal">Normal</option>
|
|
</select>
|
|
<br>
|
|
<div class="ringConf">
|
|
<!-- All 5 rings (setup) -->
|
|
<h5>Ring 5</h5>
|
|
<div id="ring5Confg">
|
|
|
|
</div>
|
|
<h5>Ring 4</h5>
|
|
<div id="ring4Confg">
|
|
|
|
</div>
|
|
<h5>Ring 3</h5>
|
|
<div id="ring3Confg">
|
|
|
|
</div>
|
|
<h5>Ring 2</h5>
|
|
<div id="ring2Confg">
|
|
|
|
</div>
|
|
<h5>Ring 1</h5>
|
|
<div id="ring1Confg">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</section>
|
|
<script src="nxtRender.js"></script>
|
|
</body>
|
|
</html> |