Browse Source

webui: fix class typos and add more control groups

pull/2508/head
Maxim Prokhorov 2 years ago
parent
commit
5c6a6dacfb
4 changed files with 197 additions and 169 deletions
  1. +1
    -1
      code/espurna/light.cpp
  2. +1
    -5
      code/html/custom.css
  3. +4
    -4
      code/html/custom.js
  4. +191
    -159
      code/html/index.html

+ 1
- 1
code/espurna/light.cpp View File

@ -2338,7 +2338,7 @@ void _lightWebSocketStatus(JsonObject& root) {
}
void _lightWebSocketOnVisible(JsonObject& root) {
wsPayloadModule(root, "color");
wsPayloadModule(root, "light");
}
void _lightWebSocketOnConnected(JsonObject& root) {


+ 1
- 5
code/html/custom.css View File

@ -173,17 +173,13 @@ label {
/* removeIf(!curtain) */
.curtain-div {
text-align: center;
}
.curtain-roller {
width: 300px;
height: 200px;
display: inline-block;
}
.curtain-button{
.curtain-button {
margin-left: 10px;
margin-right: 10px;
text-align: center;


+ 4
- 4
code/html/custom.js View File

@ -1752,7 +1752,7 @@ function initMagnitudesList(data, callbacks) {
function createMagnitudeInfo(id, magnitude) {
const container = document.getElementById("magnitudes");
const info = loadTemplate("magnitude-info-form");
const info = loadTemplate("magnitude-info");
const label = info.querySelector("label");
label.textContent = magnitude.name;
@ -1997,9 +1997,6 @@ function initCurtain() {
return;
}
// simple position slider
document.getElementById("curtainSet").addEventListener("change", curtainSetHandler);
// add and init curtain template, prepare multi switches
let line = loadConfigTemplate("curtain-control");
line.querySelector(".button-curtain-open").addEventListener("click", curtainButtonHandler);
@ -2007,6 +2004,9 @@ function initCurtain() {
line.querySelector(".button-curtain-close").addEventListener("click", curtainButtonHandler);
mergeTemplate(container, line);
// simple position slider
document.getElementById("curtainSet").addEventListener("change", curtainSetHandler);
addSimpleEnumerables("curtain", "Curtain", 1);
}


+ 191
- 159
code/html/index.html View File

@ -62,7 +62,7 @@
</div>
</div> <!-- content -->
</div>
</div>
@ -125,8 +125,8 @@
</li>
<!-- removeIf(!light) -->
<li class="pure-menu-item module module-color">
<a href="#" class="pure-menu-link" data-panel="color">LIGHTS</a>
<li class="pure-menu-item module module-light">
<a href="#" class="pure-menu-link" data-panel="light">LIGHTS</a>
</li>
<!-- endRemoveIf(!light) -->
@ -154,7 +154,7 @@
<!-- removeIf(!rfbridge) -->
<li class="pure-menu-item module module-rfb">
<a href="#" class="pure-menu-link" data-panel="rfb">RF</a>
<a href="#" class="pure-menu-link" data-panel="rfb">RF BRIDGE</a>
</li>
<!-- endRemoveIf(!rfbridge) -->
@ -566,7 +566,7 @@
</form>
<!-- removeIf(!curtain) -->
<form id="form-curtain" class="pure-form form-settings">
<form id="form-curtain" class="pure-form pure-form-aligned form-settings">
<div class="panel" id="panel-curtain">
<div class="header">
@ -576,8 +576,7 @@
<div class="page">
<fieldset class="module module-curtain">
<fieldset>
<legend>General</legend>
<div class="pure-control-group">
@ -607,7 +606,6 @@
</div>
<div id="curtainConfig" class="settings-group"></div>
</fieldset>
</div>
@ -616,8 +614,8 @@
<!-- endRemoveIf(!curtain) -->
<!-- removeIf(!light) -->
<form id="form-color" class="pure-form pure-form-aligned form-settings">
<div class="panel" id="panel-color">
<form id="form-light" class="pure-form pure-form-aligned form-settings">
<div class="panel" id="panel-light">
<div class="header">
<h1>LIGHTS</h1>
@ -647,8 +645,11 @@
<div class="pure-control-group">
<label>Save delay</label>
<input type="number" name="ltSaveDelay" min="5000" max="60000">
<span class="pure-form-message-inline">
(ms)
</span>
<span class="pure-form-message">
(ms) When <code>Save values</code> is enabled, wait for the specified time before the values are actually saved.
When <code>Save values</code> is enabled, wait for the specified time before the values are actually saved.
</span>
</div>
@ -656,7 +657,7 @@
<label>Use color</label>
<div><input type="checkbox" name="useColor" data-action="reload"></div>
<span class="pure-form-message">
Use the first three channels as RGB channels. This will also enable the color picker in the web UI. Will only work if the device has at least 3 dimmable channels.<br>Reload the page to update the web interface.
Use the first three channels as RGB channels. This will also enable the color picker in the web UI. Will only work if the device has at least 3 dimmable channels.
</span>
</div>
@ -680,7 +681,7 @@
<label>Use white color temperature</label>
<div><input type="checkbox" name="useCCT" data-action="reload"></div>
<span class="pure-form-message">
Use a dimmable channel as warm white light and another dimmable channel as cold white light.<br>On devices with two dimmable channels the first use used for warm white light and the second for cold white light.<br>On color lights the fifth use used for warm white light and the fourth for cold white light.<br>Will only work if the device has exactly 2 dimmable channels or at least 5 dimmable channels and "white channel" above is also ON.<br>Enabling this will render useless the "Channel 5" slider in the status page.<br>Reload the page to update the web interface.
Use a dimmable channel as warm white light and another dimmable channel as cold white light.<br>On devices with two dimmable channels the first use used for warm white light and the second for cold white light.<br>On color lights the fifth use used for warm white light and the fourth for cold white light.<br>Will only work if the device has exactly 2 dimmable channels or at least 5 dimmable channels and "white channel" above is also ON.<br>Enabling this will render useless the "Channel 5" slider in the status page.
</span>
</div>
@ -703,21 +704,27 @@
<div class="pure-control-group">
<label>Transition time</label>
<input type="number" name="ltTime" min="10" max="5000" data-action="reload">
<span class="pure-form-message-inline">
(ms)
</span>
<span class="pure-form-message">
(ms) Time to transition from one color to another
Time to transition from one color to another
</span>
</div>
<div class="pure-control-group">
<label>Transition step</label>
<input type="number" name="ltStep" min="10" max="5000" data-action="reload">
<span class="pure-form-message-inline">
(ms)
</span>
<span class="pure-form-message">
(ms) Time to transition from one step to the next. Must be smaller than the transition time.
Time to transition from one step to the next. Must be smaller than the transition time.
</span>
</div>
<div class="pure-control-group">
<label>MQTT group</label>
<label>MQTT group topic</label>
<input type="text" name="mqttGroupColor" data-action="reconnect">
<span class="pure-form-message">
Sync channel values between multiple devices. Notice that every device that is subscribed to the topic <strong>should</strong> be configured to use the same brightness.
@ -814,7 +821,7 @@
<div class="pure-control-group">
<label>Key</label>
<input name="apiKey" type="text">
<button type="button" class="pure-button button-apikey pure-input-1-8">Generate</button>
<button type="button" class="pure-button button-apikey">Generate</button>
<span class="pure-form-message">
This is the authentication token you will have to pass with every HTTP request.
All API calls must either contain the <strong>Api-Key</strong> header or the <strong>apikey</strong> request parameter with the value above.
@ -884,7 +891,8 @@
<div class="pure-control-group">
<label>Passphrase</label>
<input name="wifiApPass" maxlength="32" type="text" data-action="reboot" >
<input name="wifiApPass" maxlength="32" type="password" spellcheck="false" data-action="reboot" >
<span class="no-select password-reveal"></span>
<span class="pure-form-message">
When specified, ESPurna will use these values in place of the hostname (see <strong>GENERAL</strong> panel) as SSID and device password (see <strong>ADMIN</strong> panel) as passphrase.
</span>
@ -969,7 +977,7 @@
<legend>Add schedule</legend>
<button type="button" class="pure-button button-add-settings-group module module-relay" data-settings-group="schedules" data-settings-group-detail-target="relay">Relay</button>
<!-- removeIf(!light) -->
<button type="button" class="pure-button button-add-settings-group module module-color" data-settings-group="schedules" data-settings-group-detail-target="light">Light</button>
<button type="button" class="pure-button button-add-settings-group module module-light" data-settings-group="schedules" data-settings-group-detail-target="light">Light</button>
<!-- endRemoveIf(!light) -->
<!-- removeIf(!curtain) -->
<button type="button" class="pure-button button-add-settings-group module module-curtain" data-settings-group="schedules" data-settings-group-detail-target="curtain">Curtain</button>
@ -1066,9 +1074,10 @@
<div class="page">
<fieldset>
<legend>Broker</legend>
<div class="pure-control-group">
<label>Enable</label>
<label>Enabled</label>
<div><input type="checkbox" name="mqttEnabled"></div>
</div>
@ -1083,7 +1092,7 @@
</div>
<div class="pure-control-group">
<label>MQTT User</label>
<label>User</label>
<input name="mqttUser" type="text" autocomplete="off">
<div class="pure-form-message-inline">
Leave blank when broker allows anonymous connections. You can also use the following placeholders: {hostname}, {mac}
@ -1091,36 +1100,25 @@
</div>
<div class="pure-control-group">
<label>MQTT Password</label>
<label>Password</label>
<input name="mqttPassword" type="password" autocomplete="new-password" spellcheck="false">
<span class="no-select password-reveal"></span>
</div>
<div class="pure-control-group">
<label>MQTT Client ID</label>
<label>Client ID</label>
<input name="mqttClientID" type="text">
<span class="pure-form-message-inline">
When left empty, the firmware will generate a client ID based on the MAC address of the chip. The following placeholders are also supported: {hostname}, {mac}
When left blank, the firmware will generate a Client ID based on the MAC address of the chip. The following placeholders are also supported: {hostname}, {mac}
</span>
</div>
<div class="pure-control-group">
<label>MQTT QoS</label>
<select class="pure-input-2-3" name="mqttQoS">
<option value="0">0: At most once</option>
<option value="1">1: At least once</option>
<option value="2">2: Exactly once</option>
</select>
</div>
<div class="pure-control-group">
<label>MQTT Retain</label>
<div><input type="checkbox" name="mqttRetain"></div>
</div>
<div class="pure-control-group">
<label>MQTT Keep Alive</label>
<label>Keep Alive</label>
<input type="number" name="mqttKeep" min="10" max="3600">
<span class="pure-form-message-inline">
(seconds)
</span>
</div>
<div class="pure-control-group module module-mqttssl">
@ -1136,21 +1134,28 @@
</span>
</div>
</fieldset>
<fieldset>
<legend>Device settings</legend>
<div class="pure-control-group">
<label>MQTT Root Topic</label>
<label>Root Topic</label>
<input name="mqttTopic" type="text">
<span class="pure-form-message-inline">
This is the root topic for this device. The following placeholders can be used: {hostname} and {mac} to dynamically set the value to the device hostname and MAC address respectively.<br>
- <strong>&lt;root&gt;/relay/#/set</strong> Send a 0 or a 1 as a payload to this topic to switch it on or off. You can also send a 2 to toggle its current state. Replace # with the switch ID (starting from 0). If the board has only one switch it will be 0.<br>
<span class="module module-relay">- <strong>&lt;root&gt;/relay/#/set</strong> Send a 0 or a 1 as a payload to this topic to switch it on or off. You can also send a 2 to toggle its current state. Replace # with the switch ID (starting from 0). If the board has only one switch it will be 0.<br></span>
<span class="module module-relay">- <strong>&lt;root&gt;/pulse/#/set</strong> Toggles the switch # and toggles it back after the specified time. Time is expected as <code>TIME[&lt;UNIT&gt;].</code> Without the unit, time is interpreted as a number of seconds (floating point). Unit can either be <code>h</code> for hours, <code>m</code> for seconds and <code>s</code> for seconds. Multiple time and unit pairs are allowed, for example <code>5h4m3s</code>.<br></span>
<span class="module module-cmd">- <strong>&lt;root&gt;/cmd/set</strong> Send a command-line string to be executed. Multiple commands can be separated with <code>\r\n</code></span>
<!-- removeIf(!curtain) -->
- <strong>&lt;root&gt;/curtain/set</strong> Set the curtain opening value (0-100), 0 means closed, 100 opened. "on", "off", "pause" pilots buttons.<br>
<span class="module module-curtain">- <strong>&lt;root&gt;/curtain/set</strong> Set the curtain opening value (0-100), 0 means closed, 100 opened. "on", "off", "pause" pilots buttons.<br></span>
<!-- endRemoveIf(!curtain) -->
<!-- removeIf(!light) -->
<span class="module module-color">- <strong>&lt;root&gt;/rgb/set</strong> Set the color using this topic, your can either send an "#RRGGBB" value or "RRR,GGG,BBB" (0-255 each).<br></span>
<span class="module module-color">- <strong>&lt;root&gt;/hsv/set</strong> Set the color using hue (0-360), saturation (0-100) and value (0-100) values, comma separated.<br></span>
<span class="module module-color">- <strong>&lt;root&gt;/brightness/set</strong> Set the brighness (0-255).<br></span>
<span class="module module-color">- <strong>&lt;root&gt;/channel/#/set</strong> Set the value for a single color channel (0-255). Replace # with the channel ID (starting from 0 and up to 4 for RGBWC lights).<br></span>
<span class="module module-color">- <strong>&lt;root&gt;/mired/set</strong> Set the temperature color in mired.<br></span>
<span class="module module-light">- <strong>&lt;root&gt;/rgb/set</strong> Set the color using this topic, your can either send an "#RRGGBB" value or "RRR,GGG,BBB" (0-255 each).<br></span>
<span class="module module-light">- <strong>&lt;root&gt;/hsv/set</strong> Set the color using hue (0-360), saturation (0-100) and value (0-100) values, comma separated.<br></span>
<span class="module module-light">- <strong>&lt;root&gt;/brightness/set</strong> Set the brighness (0-255).<br></span>
<span class="module module-light">- <strong>&lt;root&gt;/channel/#/set</strong> Set the value for a single color channel (0-255). Replace # with the channel ID (starting from 0 and up to 4 for RGBWC lights).<br></span>
<span class="module module-light">- <strong>&lt;root&gt;/mired/set</strong> Set the temperature color in mired.<br></span>
<!-- endRemoveIf(!light) -->
- <strong>&lt;root&gt;/status</strong> The device will report a 1 to this topic every few minutes. When MQTT broker detects that we disconnected, it will be set to 0.<br>
- Other values reported depend on the build options or the heartbeat settings (for example, <strong>firmware</strong>, <strong>version</strong>, <strong>hostname</strong>, <strong>IP</strong>, <strong>MAC</strong>, signal strenth (<strong>RSSI</strong>), <strong>uptime</strong> (in seconds), <strong>free heap</strong> and etc.)
@ -1158,16 +1163,48 @@
</div>
<div class="pure-control-group">
<label>Use JSON payload</label>
<label>Default QoS</label>
<select class="pure-input-2-3" name="mqttQoS">
<option value="0">0: At most once</option>
<option value="1">1: At least once</option>
<option value="2">2: Exactly once</option>
</select>
<span class="pure-form-message">
Level of assurance for delivery of the outgoing messages. Notice that messages are not (currently) cached on the device, QoS levels &gt;0 only guarantee delivery <strong>after</strong> the broker receives the message.
</span>
</div>
<div class="pure-control-group">
<label>Default retain flag</label>
<div><input type="checkbox" name="mqttRetain"></div>
<span class="pure-form-message">
Store the last published message (including the device <strong>status</strong>) on the server, so it can be delivered to any future subscribers that match the message topic.
</span>
</div>
</fieldset>
<fieldset>
<legend>JSON</legend>
<div class="pure-control-group">
<label>Enabled</label>
<div><input type="checkbox" name="mqttUseJson"></div>
<span class="pure-form-message">
All messages (except the device status) will be included in a JSON payload along with the timestamp and hostname
and sent under the <strong>&lt;root&gt;/data</strong> topic.<br>
Messages will be queued and sent after 100ms, so different messages could be merged into a single payload.<br>
Subscriptions will still be done to single topics.
Causes all single <strong>&lt;topic&gt;</strong> messages published by the device, except the device status, to be sent in a JSON payload. For example:<br>
<code>{"relay/0": 1, "hostname": "ESPURNA-123456", "timestamp": "..."}</code><br>
All messages will be queued and sent with a delay (100ms by default). Notice that all nested <strong>&lt;topic&gt;: &lt;message&gt;</strong> are published as-is, only the heartbeat payload will include all of topics at once.
</span>
</div>
<div class="pure-control-group">
<label>Topic name</label>
<input type="text" name="mqttJson">
<span class="pure-form-message">
JSON message will be sent to <strong>&lt;root&gt;/&lt;name&gt;</strong> topic (<strong>data</strong> by default).
</span>
</div>
</fieldset>
</div>
@ -1260,7 +1297,7 @@
<div class="pure-control-group">
<label>Brightness</label>
<input class="slider slider-garland-brightness" type="range" min="12" max="254" step="22" name="garlandBrightness">
<input class="slider slider-garland-brightness pure-input-1" type="range" min="12" max="254" step="22" name="garlandBrightness">
</div>
<div class="pure-control-group">
@ -1435,7 +1472,7 @@
</form>
<!-- endRemoveIf(!thermostat) -->
<form id="form-domoticz" class="pure-form pure-form-stacked form-settings">
<form id="form-domoticz" class="pure-form pure-form-aligned form-settings">
<div class="panel" id="panel-domoticz">
<div class="header">
@ -1457,17 +1494,17 @@
<div class="pure-control-group">
<label>Domoticz IN Topic</label>
<input name="dczTopicIn" type="text">
<input class="pure-input-2-3" name="dczTopicIn" type="text">
</div>
<div class="pure-control-group">
<label>Domoticz OUT Topic</label>
<input name="dczTopicOut" type="text" data-action="reconnect">
<input class="pure-input-2-3" name="dczTopicOut" type="text" data-action="reconnect">
</div>
</fieldset>
<!-- removeIf(!light) -->
<fieldset class="module module-color">
<fieldset class="module module-light">
<legend>Lights (IN messages only)</legend>
<div class="pure-control-group">
<label>Light switch</label>
@ -1577,12 +1614,12 @@
<div class="pure-control-group">
<label>Address</label>
<input name="tspkAddress" type="text">
<input class="pure-input-2-3" name="tspkAddress" type="text">
</div>
<div class="pure-control-group">
<label>API Key</label>
<input name="tspkKey" type="text">
<input class="pure-input-2-3" name="tspkKey" type="text">
</div>
</fieldset>
@ -1799,7 +1836,7 @@
<div class="pure-form-aligned">
<div class="pure-control-group">
<label>Read every</label>
<input name="snsRead" type="number" min="1" list="list:snsRead" class="pure-input-1-5">
<input name="snsRead" type="number" min="1" list="list:snsRead" class="pure-input-1-4">
<span>second(s)</span>
<datalist id="list:snsRead">
<option value="1"></option>
@ -1873,9 +1910,9 @@
</div>
</fieldset>
<fieldset class="module">
<fieldset>
<legend>Units</legend>
<div id="magnitude-units" class="pure-form settings-group">
<div id="magnitude-units" class="pure-form-aligned settings-group">
</div>
</fieldset>
@ -1903,44 +1940,55 @@
<div class="panel" id="panel-rfb">
<div class="header">
<h1>RADIO FREQUENCY</h1>
<h2>
Sonoff 433 RF Bridge &amp; RF Link Configuration<br><br>
This page allows you to configure the RF codes for the Sonoff RFBridge 433 and also for a basic RF receiver.<br><br>
<h1>RF BRIDGE</h1>
</div>
<div class="page">
<details>
<summary>
Configuration
</summary>
Configure RF code associations for a basic 433 RF recevier, or the device like Sonoff RFBridge 433.<br><br>
To learn a new code click <strong>LEARN</strong> (the Sonoff RFBridge will beep) then press a button on the remote, the new code should show up (and the RFBridge will double beep). If the device double beeps but the code does not update it has not been properly learnt. Keep trying.<br><br>
Modify or create new codes manually and then click <strong>SAVE</strong> to store them in the device memory. If your controlled device uses the same code to switch ON and OFF, learn the code with the ON button and copy paste it to the OFF input box, then click SAVE on the last one to store the value.<br><br>
Delete any code clicking the <strong>FORGET</strong> button.
<br><br>You can also specify any RAW code. For reference see <a class="external" href="https://github.com/Portisch/RF-Bridge-EFM8BB1/wiki/Commands">possible commands for Sonoff RF Bridge EFM8BB1</a> (original firmware supports codes from <strong>0xA0</strong> to <strong>0xA5</strong>).
</h2>
</div>
</details>
<div class="page">
<fieldset>
<legend>RF Codes</legend>
<div id="rfbNodes"></div>
</fieldset>
<fieldset>
<legend>Settings</legend>
<legend>Transmition</legend>
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Repeats</label>
<div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24" name="rfbRepeat" type="number" min="1"></div>
<div class="pure-u-0 pure-u-lg-1-2"></div>
<div class="pure-u-0 pure-u-lg-1-4"></div>
<div class="pure-u-1 pure-u-lg-3-4">Number of times to repeat transmission</div>
<div class="pure-control-group">
<label>Repeats</label>
<input name="rfbRepeat" type="number" min="1">
<span class="pure-form-message">
Number of times to repeat the outgoing transmission
</span>
</div>
</fieldset>
<div class="pure-g module module-rfbdirect">
<div class="pure-u-1 pure-u-lg-1">Pins used by the receiver (RX) and transmitter (TX). Set to <strong>NONE</strong> to disable</div>
<fieldset class="module module-rfbdirect">
<legend>Pin configuration</legend>
<label class="pure-u-1 pure-u-lg-1-4">RX Pin</label>
<select class="pure-u-1 pure-u-lg-1-4 enumerable enumerable-gpio-hardware" name="rfbRX"></select>
<div class="pure-u-0 pure-u-lg-1-2"></div>
<div class="pure-control-group">
<label>RX Pin</label>
<select class="pure-input-1-4 enumerable enumerable-gpio-hardware" name="rfbRX"></select>
<span class="pure-form-message-inline">
Set to <strong>NONE</strong> to disable the receiver.
</span>
</div>
<label class="pure-u-1 pure-u-lg-1-4">TX Pin</label>
<select class="pure-u-1 pure-u-lg-1-4 enumerable enumerable-gpio-hardware" name="rfbTX"></select>
<div class="pure-u-0 pure-u-lg-1-2"></div>
<div class="pure-control-group">
<label>TX Pin</label>
<select class="pure-input-1-4 enumerable enumerable-gpio-hardware" name="rfbTX"></select>
<span class="pure-form-message-inline">
Set to <strong>NONE</strong> to disable the transmitter.
</span>
</div>
</fieldset>
</div>
@ -1950,7 +1998,7 @@
<!-- endRemoveIf(!rfbridge) -->
<!-- removeIf(!lightfox) -->
<form id="form-lightfox" class="pure-form form-settings">
<form id="form-lightfox" class="pure-form pure-form-aligned form-settings">
<div class="panel" id="panel-lightfox">
<div class="header">
@ -1964,11 +2012,13 @@
</div>
<div class="page">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">RF Actions</label>
<div class="pure-u-1-2 pure-u-lg-3-8"><button type="button" class="pure-button button-lightfox-learn pure-u-23-24">Learn</button></div>
<div class="pure-u-1-2 pure-u-lg-3-8"><button type="button" class="pure-button button-lightfox-clear pure-u-1">Clear</button></div>
</div>
<fieldset>
<legend>RF Actions</legend>
<div class="pure-button-group">
<button type="button" class="pure-button pure-input-1 button-lightfox-learn">Learn</button>
<button type="button" class="pure-button pure-input-1 button-lightfox-clear">Clear</button>
</div>
</fieldset>
</div>
</div>
@ -2021,22 +2071,24 @@
<!-- removeIf(!rfbridge) -->
<template id="template-rfb-node" >
<div class="pure-g">
<div class="pure-control-group">
<fieldset>
<legend>Switch #<span></span></legend>
<div class="pure-u-1 pure-u-lg-1-1">
<label class="pure-u-1 pure-u-lg-1-4">Switch ON</label>
<input class="pure-u-1 pure-u-lg-1-3" type="text" maxlength="116" name="rfbcode" data-status="1" data-settings-ignore="true">
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-learn">LEARN</button></div>
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-send">SAVE</button></div>
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>
<div class="pure-control-group">
<label>Switch <strong>ON</strong></label>
<input class="pure-input-1" type="text" maxlength="116" name="rfbcode" data-status="1" data-settings-ignore="true">
<button type="button" class="pure-input-1-4 pure-button button-rfb-learn">LEARN</button>
<button type="button" class="pure-input-1-4 pure-button button-rfb-send">SAVE</button>
<button type="button" class="pure-input-1-4 pure-button button-rfb-forget">FORGET</button>
</div>
<div class="pure-u-1 pure-u-lg-1-1">
<div class="pure-u-1 pure-u-lg-1-4"><label>Switch OFF</label></div>
<input class="pure-u-1 pure-u-lg-1-3" type="text" maxlength="116" name="rfbcode" data-status="0" data-settings-ignore="true">
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-learn">LEARN</button></div>
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-send">SAVE</button></div>
<div class="pure-u-1-3 pure-u-lg-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>
<div class="pure-control-group">
<div><label>Switch <strong>OFF</strong></label></div>
<input class="pure-input-1" type="text" maxlength="116" name="rfbcode" data-status="0" data-settings-ignore="true">
</div>
<div class="pure-button-group">
<button type="button" class="pure-input-1-4 pure-button button-rfb-learn">LEARN</button>
<button type="button" class="pure-input-1-4 pure-button button-rfb-send">SAVE</button>
<button type="button" class="pure-input-1-4 pure-button button-rfb-forget">FORGET</button>
</div>
</fieldset>
</div>
@ -2048,7 +2100,7 @@
<div class="pure-control-group">
<label>SSID</label>
<input name="ssid" type="text" value="" data-action="reconnect" required autocomplete="false">
<button type="button" class="pure-button button-more-parent pure-input-1-8">...</button>
<button type="button" class="pure-button button-more-parent">...</button>
</div>
<div class="pure-control-group more">
@ -2125,7 +2177,7 @@
<div><input type="checkbox" name="schEnabled"></div>
</div>
<button class="pure-button button-del-parent pure-input-1-8" type="button">
<button class="pure-button button-del-parent pure-input-1-4" type="button">
Delete schedule
</button>
</div>
@ -2242,42 +2294,26 @@
</template>
<!-- removeIf(!sensor) -->
<template id="template-magnitude-info-form">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4"></label>
<div class="pure-u-1 pure-u-lg-1-4">
<input readonly class="pure-u-1 pure-u-lg-23-24 center" type="text" name="magnitude">
</div>
<div class="pure-u-1 pure-u-lg-1-2 center magnitude-description"></div>
<div class="pure-u-1 pure-u-lg-1 magnitude-info">
</div>
</div>
</template>
<template id="template-magnitude-info">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4"></label>
<div class="pure-u-1 pure-u-lg-1-4">
<input readonly class="pure-u-1 pure-u-lg-23-24 center" type="text" name="magnitude">
</div>
<div class="pure-u-1 pure-u-lg-1-2 center magnitude-description"></div>
<div class="pure-u-1 pure-u-lg-1 magnitude-info">
</div>
<div class="pure-control-group">
<label></label>
<input readonly class="pure-input-1-3" type="text" name="magnitude">
<span class="pure-form-message-inline magnitude-info"></span>
<span class="pure-form-message-inline magnitude-description"></span>
</div>
</template>
<template id="template-magnitude-units">
<div class="pure-control-group">
<label></label>
<select class="pure-input-2-3">
</select>
<select class="pure-input-2-3"></select>
</div>
</template>
<template id="template-module-magnitude">
<div class="pure-g">
<div class="pure-control-group">
<label>Magnitude</label>
<input class="pure-u-1 pure-u-lg-23-24" type="number" min="0">
<input class="pure-input-2-3" type="number" min="0">
<span class="pure-form-message-inline">
</span>
</div>
@ -2320,45 +2356,41 @@
</template>
<!-- removeIf(!light) -->
<template id="template-brightness-control">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Brightness</label>
<input type="range" min="0" max="255" class="slider pure-u-lg-1-4" id="brightness">
<span class="slider brightness pure-u-lg-1-4"></span>
<template id="template-channel-control">
<div class="pure-control-group">
<label>Channel #</label>
<input type="range" min="0" max="255" class="slider channels pure-input-2-3">
<span class="slider"></span>
</div>
</template>
<template id="template-channel-control">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Channel #</label>
<input type="range" min="0" max="255" class="slider channels pure-u-lg-1-4">
<span class="slider pure-u-lg-1-4"></span>
<template id="template-brightness-control">
<div class="pure-control-group">
<label>Brightness</label>
<input type="range" min="0" max="255" class="slider pure-input-2-3" id="brightness">
<span class="slider brightness"></span>
</div>
</template>
<template id="template-mireds-control">
<div class="pure-g">
<label class="pure-u-1 pure-u-lg-1-4">Mireds (Cold &harr; Warm)</label>
<input type="range" min="153" max="500" class="slider pure-u-lg-1-4" id="mireds">
<span class="slider mireds pure-u-lg-1-4"></span>
<div class="pure-control-group">
<label>Mireds (Cold &harr; Warm)</label>
<input type="range" min="153" max="500" class="slider pure-input-2-3" id="mireds">
<span class="slider mireds"></span>
</div>
</template>
<!-- endRemoveIf(!light) -->
<!-- removeIf(!curtain) -->
<template id="template-curtain-control">
<div class="pure-g">
<div class="pure-u-1-1 curtain-div">
<div class="curtain-roller" id="curtainGetPicture"></div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-3 curtain-div"><button type="button" class="pure-button curtain-button button-curtain-close">CLOSE</button></div>
<div class="pure-u-1-3 curtain-div"><button type="button" class="pure-button curtain-button button-curtain-pause">PAUSE</button></div>
<div class="pure-u-1-3 curtain-div"><button type="button" class="pure-button curtain-button button-curtain-open">OPEN</button></div>
<div class="curtain-roller" id="curtainGetPicture"></div>
<div class="pure-button-group">
<button type="button" class="pure-button pure-input-1-3 curtain-button button-curtain-close">CLOSE</button>
<button type="button" class="pure-button pure-input-1-3 curtain-button button-curtain-pause">PAUSE</button>
<button type="button" class="pure-button pure-input-1-3 curtain-button button-curtain-open">OPEN</button>
</div>
<div class="pure-g">
<input type="range" list="tickmarks" min="0" max="100" class="slider pure-u-1-1 reverse-range" id="curtainSet">
<div class="pure-control-group">
<input type="range" list="tickmarks" min="0" max="100" class="slider pure-input-1 reverse-range" id="curtainSet">
<datalist id="tickmarks">
<option value="0"></option>
<option value="50"></option>
@ -2374,23 +2406,23 @@
<input name="rfm69Node" type="text" placeholder="Node ID" size="8" autocomplete="false">
<input name="rfm69Key" type="text" placeholder="Key" size="8">
<input name="rfm69Topic" type="text" placeholder="MQTT Topic" size="8">
<button type="button" class="pure-button button-del-parent pure-input--1-8">Del</button>
<button type="button" class="pure-button button-del-parent pure-input-1-4">Del</button>
</div>
</template>
<!-- endRemoveIf(!rfm69) -->
<template id="template-rpn-rule">
<div class="pure-control-group">
<input name="rpnRule" type="text" placeholder="RPN expression" autocomplete="false">
<button type="button" class="pure-button button-del-parent pure-input-1-8">Del</button>
<input class="pure-input-3-4" name="rpnRule" type="text" placeholder="RPN expression" autocomplete="false">
<button type="button" class="pure-button button-del-parent">Del</button>
</div>
</template>
<template id="template-rpn-topic">
<div class="pure-control-group">
<input name="rpnTopic" class="pure-input-1-2" type="text" placeholder="Topic" autocomplete="false">
<input name="rpnName" class="pure-input-1-5" type="text" placeholder="Variable name" autocomplete="false">
<button type="button" class="pure-button button-del-parent pure-input-1-8">Del</button>
<input name="rpnName" class="pure-input-1-2" type="text" placeholder="Variable name" autocomplete="false">
<button type="button" class="pure-button button-del-parent">Del</button>
</div>
</template>


Loading…
Cancel
Save