mirror of
https://github.com/emsesp/EMS-ESP32.git
synced 2025-12-07 16:29:51 +03:00
1831 lines
94 KiB
HTML
1831 lines
94 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>ESPurna 0.0.0</title>
|
|
<meta charset="utf-8" />
|
|
<!-- shortcut::html/favicon.ico -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- build:css style.css -->
|
|
<link rel="stylesheet" href="vendor/pure-1.0.0.min.css" />
|
|
<link rel="stylesheet" href="vendor/pure-grids-responsive-1.0.0.min.css" />
|
|
<link rel="stylesheet" href="vendor/side-menu.css" />
|
|
<link rel="stylesheet" href="vendor/checkboxes.css" />
|
|
<link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.3.css" />
|
|
<link rel="stylesheet" href="custom.css" />
|
|
<!-- endbuild -->
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="password" class="webmode">
|
|
|
|
<div class="content">
|
|
|
|
<form id="formPassword" class="pure-form" action="/" method="post">
|
|
|
|
<div class="panel block">
|
|
|
|
<div class="header">
|
|
<h1>SECURITY</h1>
|
|
<h2>Before using this device you have to change the default password for the user 'admin'. This password
|
|
will be used for the
|
|
<strong>AP mode hotspot</strong>, the
|
|
<strong>web interface</strong> (where you are now) and the
|
|
<strong>over-the-air updates</strong>.</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
|
|
<input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" tabindex="1" autocomplete="false" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in
|
|
AP mode or to flash a new firmware over-the-air (OTA).
|
|
<br /> It must have at least
|
|
<strong>five characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&*<>\|(){}[])
|
|
and at least
|
|
<strong>one lowercase</strong> and
|
|
<strong>one uppercase</strong> or
|
|
<strong>one number</strong>.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>
|
|
<input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" tabindex="2" autocomplete="false" />
|
|
</div>
|
|
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<button class="pure-button button-update-password" type="button">Update</button>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<!-- content -->
|
|
|
|
</div>
|
|
|
|
<div id="layout" class="webmode">
|
|
|
|
<a id="menuLink" class="menu-link">
|
|
<span></span>
|
|
</a>
|
|
|
|
<div id="menu">
|
|
<div class="pure-menu">
|
|
|
|
<span class="pure-menu-heading" name="hostname">HOSTNAME</span>
|
|
<span class="pure-menu-heading small" name="title">ESPurna 0.0.0</span>
|
|
|
|
<ul class="pure-menu-list">
|
|
|
|
<li class="pure-menu-item">
|
|
<a href="#" class="pure-menu-link" data="panel-status">STATUS</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item menu-item-divided">
|
|
<a href="#" class="pure-menu-link" data="panel-general">GENERAL</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item menu-item-divided">
|
|
<a href="#" class="pure-menu-link" data="panel-boiler">BOILER</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-dcz">
|
|
<a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-ha">
|
|
<a href="#" class="pure-menu-link" data="panel-ha">HASS</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-idb">
|
|
<a href="#" class="pure-menu-link" data="panel-idb">INFLUXDB</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-color">
|
|
<a href="#" class="pure-menu-link" data="panel-color">LIGHTS</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-mqtt">
|
|
<a href="#" class="pure-menu-link" data="panel-mqtt">MQTT</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-ntp">
|
|
<a href="#" class="pure-menu-link" data="panel-ntp">NTP</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-rfb">
|
|
<a href="#" class="pure-menu-link" data="panel-rfb">RF</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-sch">
|
|
<a href="#" class="pure-menu-link" data="panel-schedule">SCHEDULE</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-sensors">
|
|
<a href="#" class="pure-menu-link" data="panel-sensors">SENSORS</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-relay">
|
|
<a href="#" class="pure-menu-link" data="panel-relay">SWITCHES</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-tspk">
|
|
<a href="#" class="pure-menu-link" data="panel-thingspeak">THINGSPEAK</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item">
|
|
<a href="#" class="pure-menu-link" data="panel-wifi">WIFI</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item menu-item-divided">
|
|
<a href="#" class="pure-menu-link" data="panel-admin">ADMIN</a>
|
|
</li>
|
|
|
|
<li class="pure-menu-item module module-dbg">
|
|
<a href="#" class="pure-menu-link" data="panel-dbg">DEBUG</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="main-buttons">
|
|
<button class="pure-button button-update">Save</button>
|
|
<button class="pure-button button-reconnect">Reconnect</button>
|
|
<button class="pure-button button-reboot">Reboot</button>
|
|
</div>
|
|
|
|
<div class="footer">
|
|
© 2016-2018
|
|
<br /> Xose Pérez
|
|
<br/>
|
|
<a href="http://tinkerman.cat" target="_blank">http://tinkerman.cat</a>
|
|
<br/>
|
|
<a href="https://github.com/xoseperez/espurna" target="_blank">ESPurna @ GitHub</a>
|
|
<br/> GPLv3 license
|
|
<br/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<div class="panel block" id="panel-status">
|
|
|
|
<div class="header">
|
|
<h1>STATUS</h1>
|
|
<h2>Current configuration</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<form class="pure-form pure-form-aligned">
|
|
<fieldset>
|
|
|
|
<div id="relays"></div>
|
|
|
|
<div id="colors"></div>
|
|
|
|
<div id="cct"></div>
|
|
|
|
<div id="channels"></div>
|
|
|
|
<div id="magnitudes"></div>
|
|
|
|
<div class="pure-u-1 pure-u-lg-1-2 state">
|
|
|
|
<div class="pure-u-1-2">Manufacturer</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="manufacturer"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Device</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="device"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Chip ID</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="chipid"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Wifi MAC</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="mac"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">SDK version</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="sdk"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Core version</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="core"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Firmware name</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="app_name"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Firmware version</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="app_version"></span>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="pure-u-1-2">Firmware revision</div>
|
|
<div class="pure-u-11-24"><span class="right" name="app_revision"></span></div>
|
|
-->
|
|
|
|
<div class="pure-u-1-2">Firmware build date</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="app_build"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Firmware size</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="sketch_size" post=" bytes"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Free space</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="free_size" post=" bytes"></span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="pure-u-1 pure-u-lg-11-24 state">
|
|
|
|
<div class="pure-u-1-2">Network</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="network"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">BSSID</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="bssid"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Channel</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="channel"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">RSSI</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="rssi"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">IP</div>
|
|
<div class="pure-u-11-24">
|
|
<a href="">
|
|
<span class="right" name="deviceip"></span>
|
|
</a> (
|
|
<a href="">
|
|
<span class="right">telnet</span>
|
|
</a>)</div>
|
|
|
|
<div class="pure-u-1-2">Free heap</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="heap" post=" bytes"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Load average</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="loadaverage"></span>
|
|
<span>%</span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">VCC</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="vcc">? </span>
|
|
<span>mV</span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2 module module-mqtt">MQTT Status</div>
|
|
<div class="pure-u-11-24 module module-mqtt">
|
|
<span class="right" name="mqttStatus"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2 module module-ntp">NTP Status</div>
|
|
<div class="pure-u-11-24 module module-ntp">
|
|
<span class="right" name="ntpStatus"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2 module module-ntp">Current time</div>
|
|
<div class="pure-u-11-24 module module-ntp">
|
|
<span class="right" name="now"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Uptime</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="uptime"></span>
|
|
</div>
|
|
|
|
<div class="pure-u-1-2">Last update</div>
|
|
<div class="pure-u-11-24">
|
|
<span class="right" name="ago">?</span>
|
|
<span> seconds ago</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="formSave" class="pure-form" action="/" method="post" enctype="multipart/form-data">
|
|
|
|
<div class="panel" id="panel-general">
|
|
|
|
<div class="header">
|
|
<h1>GENERAL</h1>
|
|
<h2>General configuration values</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Hostname</label>
|
|
<input name="hostname" class="pure-u-1 pure-u-lg-1-4" maxlength="32" type="text" action="reboot" tabindex="1" />
|
|
<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 hint">
|
|
This name will identify this device in your network (http://<hostname>.local).
|
|
<br /> Hostname may contain only the ASCII letters 'a' through 'z' (in a case-insensitive manner),
|
|
the digits '0' through '9', and the hyphen ('-'). They can neither start or end with
|
|
an hyphen.
|
|
<br /> For this setting to take effect you should restart the wifi interface by clicking the
|
|
"Reconnect" button.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Double click delay</label>
|
|
<input name="btnDelay" class="pure-u-1 pure-u-lg-1-4" type="number" action="reboot" min="0" step="100" max="1000" tabindex="6"
|
|
/>
|
|
<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 hint">
|
|
Delay in milliseconds to detect a double click (from 0 to 1000ms).
|
|
<br /> The lower this number the faster the device will respond to button clicks but the harder
|
|
it will be to get a double click. Increase this number if you are having trouble to double
|
|
click the button. Set this value to 0 to disable double click. You won't be able to set
|
|
the device in AP mode manually but your device will respond immediately to button clicks.
|
|
<br /> You will have to
|
|
<strong>reboot the device</strong> after updating for this setting to apply.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-led">
|
|
<label class="pure-u-1 pure-u-lg-1-4">LED mode</label>
|
|
<select name="ledMode0" class="pure-u-1 pure-u-lg-1-4" tabindex="7">
|
|
<option value="1">WiFi status</option>
|
|
<option value="8">Relay status</option>
|
|
<option value="0">MQTT managed</option>
|
|
<option value="4">Find me</option>
|
|
<option value="9">Relay & WiFi</option>
|
|
<option value="5">Find me & WiFi</option>
|
|
<option value="6">Always ON</option>
|
|
<option value="7">Always OFF</option>
|
|
</select>
|
|
<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 hint">
|
|
This setting defines the behaviour of the main LED in the board.
|
|
<br /> When in "WiFi status" it will blink at 1Hz when trying to connect. If successfully connected
|
|
it will briefly blink every 5 seconds if in STA mode or every second if in AP mode.
|
|
<br /> When in "Relay status" mode the LED will be ON whenever any relay is ON, and OFF otherwise.
|
|
This is global status notification.
|
|
<br /> When in "MQTT managed" mode you will be able to set the LED state sending a message
|
|
to "<base_topic>/led/0/set" with a payload of 0, 1 or 2 (to toggle it).
|
|
<br /> When in "Find me" mode the LED will be ON when all relays are OFF. This is meant to
|
|
locate switches at night.
|
|
<br /> When in "Relay & WiFi" mode it will follow the WiFi status but will stay mostly
|
|
off when relays are OFF, and mostly ON when any of them is ON.
|
|
<br /> When in "Find me & WiFi" mode is the opposite of the "Relay & WiFi", it will
|
|
follow the WiFi status but will stay mostly on when relays are OFF, and mostly OFF when
|
|
any of them is ON.
|
|
<br /> "Always ON" and "Always OFF" modes are self-explanatory.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-alexa">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Alexa integration</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="alexaEnabled" tabindex="13" />
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-relay">
|
|
|
|
<div class="header">
|
|
<h1>SWITCHES</h1>
|
|
<h2>Switch / relay configuration</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<legend class="module module-multirelay">General</legend>
|
|
|
|
<div class="pure-g module module-multirelay">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Switch sync mode</label>
|
|
<select name="relaySync" class="pure-u-1 pure-u-lg-3-4" tabindex="3">
|
|
<option value="0">No synchronisation</option>
|
|
<option value="1">Zero or one switches active</option>
|
|
<option value="2">One and just one switch active</option>
|
|
<option value="3">All synchronised</option>
|
|
</select>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">Define how the different switches should be synchronized.</div>
|
|
</div>
|
|
|
|
<div id="relayConfig"></div>
|
|
|
|
</fieldset>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-color">
|
|
|
|
<div class="header">
|
|
<h1>LIGHTS</h1>
|
|
<h2>Lights configuration</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use color</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useColor" action="reload" tabindex="8" />
|
|
</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 hint">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.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use RGB picker</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useRGB" action="reload" tabindex="11" />
|
|
</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 hint">Use RGB color picker if enabled (plus brightness), otherwise use HSV (hue-saturation-value)
|
|
style
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use white channel</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useWhite" action="reload" tabindex="9" />
|
|
</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 hint">Use forth dimmable channel as (cold) white light calculated out of the RGB values.
|
|
<br />Will only work if the device has at least 4 dimmable channels.
|
|
<br />Enabling this will render useless the "Channel 4" slider in the status page.
|
|
<br />Reload the page to update the web interface.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use white color temperature</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useCCT" action="reload" tabindex="10" />
|
|
</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 hint">Use fifth dimmable channel as warm white light and the forth dimmable channel as cold white.
|
|
<br />Will only work if the device has 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.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use gamma correction</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useGamma" tabindex="11" />
|
|
</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 hint">Use gamma correction for RGB channels.
|
|
<br />Will only work if "use colorpicker" above is also ON.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use CSS style</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useCSS" tabindex="12" />
|
|
</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 hint">Use CSS style to report colors to MQTT and REST API.
|
|
<br />Red will be reported as "#FF0000" if ON, otherwise "255,0,0"</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Color transitions</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="useTransitions" tabindex="13" />
|
|
</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 hint">If enabled color changes will be smoothed.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Transition time</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input class="pure-u-1" type="number" name="lightTime" min="10" max="5000" tabindex="14" />
|
|
</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 hint">Time in millisecons to transition from one color to another.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>MQTT group</label>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<input name="mqttGroupColor" class="pure-u-1" tabindex="15" action="reconnect" />
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">Sync color between different lights.</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-admin">
|
|
|
|
<div class="header">
|
|
<h1>ADMINISTRATION</h1>
|
|
<h2>Device administration and security settings</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Settings</label>
|
|
<div class="pure-u-1-3 pure-u-lg-1-4">
|
|
<button class="pure-button button-settings-backup pure-u-23-24">Backup</button>
|
|
</div>
|
|
<div class="pure-u-1-3 pure-u-lg-1-4">
|
|
<button class="pure-button button-settings-restore pure-u-23-24">Restore</button>
|
|
</div>
|
|
<div class="pure-u-1-3 pure-u-lg-1-4">
|
|
<button class="pure-button button-settings-factory pure-u-1">Factory Reset</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
|
|
<input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" action="reboot" tabindex="11" autocomplete="false"
|
|
/>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
The administrator password is used to access this web interface (user 'admin'), but also to connect to the device when in
|
|
AP mode or to flash a new firmware over-the-air (OTA).
|
|
<br /> It must have at least
|
|
<strong>five characters</strong> (numbers and letters and any of these special characters: _,.;:~!?@#$%^&*<>\|(){}[])
|
|
and at least
|
|
<strong>one lowercase</strong> and
|
|
<strong>one uppercase</strong> or
|
|
<strong>one number</strong>.</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Repeat password</label>
|
|
<input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" action="reboot" tabindex="12" autocomplete="false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">HTTP port</label>
|
|
<input name="webPort" class="pure-u-1 pure-u-lg-1-4" type="text" action="reboot" tabindex="13" />
|
|
<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 hint">
|
|
This is the port for the web interface and API requests. If different than 80 (standard HTTP port) you will have to add it
|
|
explicitly to your requests: http://myip:myport/
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable WS Auth</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="wsAuth" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable HTTP API</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="apiEnabled" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Real time API</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="apiRealTime" />
|
|
</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 hint">
|
|
By default, some magnitudes are being preprocessed and filtered to avoid spurious values. If you want to get real-time values
|
|
(not preprocessed) in the API turn on this setting.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">HTTP API Key</label>
|
|
<input name="apiKey" class="pure-u-3-4 pure-u-lg-1-2" type="text" tabindex="14" />
|
|
<div class=" pure-u-1-4 pure-u-lg-1-4">
|
|
<button class="pure-button button-apikey pure-u-23-24">Auto</button>
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
This is the key you will have to pass with every HTTP request to the API, either to get or write values. All API calls must
|
|
contain the
|
|
<strong>apikey</strong> parameter with the value above. To know what APIs are enabled do a call
|
|
to
|
|
<strong>/apis</strong>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-telnet">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable TELNET</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="telnetSTA" />
|
|
</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 hint">Turn ON to be able to telnet to your device while connected to your home router.
|
|
<br />TELNET is always enabled in AP mode.</div>
|
|
</div>
|
|
|
|
|
|
<div class="pure-g module module-nofuss">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Automatic remote updates (NoFUSS)</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="nofussEnabled" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-nofuss">
|
|
<label class="pure-u-1 pure-u-lg-1-4">NoFUSS server</label>
|
|
<input name="nofussServer" class="pure-u-1 pure-u-lg-3-4" type="text" tabindex="15" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">This name address of the NoFUSS server for automatic remote updates (see https://bitbucket.org/xoseperez/nofuss).</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Upgrade</label>
|
|
<input class="pure-u-1-2 pure-u-lg-1-2" name="filename" type="text" readonly />
|
|
<div class=" pure-u-1-4 pure-u-lg-1-8">
|
|
<button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button>
|
|
</div>
|
|
<div class=" pure-u-1-4 pure-u-lg-1-8">
|
|
<button class="pure-button button-upgrade pure-u-23-24">Upgrade</button>
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">The device has
|
|
<span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing
|
|
a
|
|
<a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" target="_blank">
|
|
<strong>two-step update</strong>
|
|
</a>.</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<progress id="upgrade-progress"></progress>
|
|
</div>
|
|
<input name="upgrade" type="file" tabindex="16" />
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-wifi">
|
|
|
|
<div class="header">
|
|
<h1>WIFI</h1>
|
|
<h2>You can configure up to 5 different WiFi networks. The device will try to connect in order of signal
|
|
strength.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<legend>General</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Scan networks</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="wifiScan" tabindex="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 hint">
|
|
ESPurna will scan for visible WiFi SSIDs and try to connect to networks defined below in order of
|
|
<strong>signal strength</strong>, even if multiple AP share the same SSID. When disabled, ESPurna
|
|
will try to connect to the networks in the same order they are listed below. Disable
|
|
this option if you are
|
|
<strong>connecting to a single access point</strong> (or router) or to a
|
|
<strong>hidden SSID</strong>.
|
|
</thead>
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<button class="pure-button button-wifi-scan" type="button">Scan now</button>
|
|
<div class="pure-u-0 pure-u-lg-1-4 scan loading"></div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<span class="pure-u-1 terminal" id="scanResult" name="scanResult"></span>
|
|
</div>
|
|
|
|
<legend>Networks</legend>
|
|
|
|
<div id="networks"></div>
|
|
|
|
<button type="button" class="pure-button button-add-network">Add network</button>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-schedule">
|
|
|
|
<div class="header">
|
|
<h1>SCHEDULE</h1>
|
|
<h2>Turn switches ON and OFF based on the current time.</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div id="schedules"></div>
|
|
|
|
<button type="button" class="pure-button button-add-switch-schedule module module-relay">Add switch schedule</button>
|
|
<button type="button" class="pure-button button-add-light-schedule module module-color">Add channel schedule</button>
|
|
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-mqtt">
|
|
|
|
<div class="header">
|
|
<h1>MQTT</h1>
|
|
<h2>Configure an
|
|
<strong>MQTT broker</strong> in your network and you will be able to change the switch status via an
|
|
MQTT message.</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable MQTT</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="mqttEnabled" tabindex="30" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Broker</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="mqttServer" type="text" tabindex="21" placeholder="IP or address of your broker"
|
|
/>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Port</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="mqttPort" type="text" tabindex="22" value="1883" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT User</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="mqttUser" type="text" tabindex="23" placeholder="Leave blank if no user" autocomplete="false"
|
|
/>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Password</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="mqttPassword" type="password" tabindex="24" placeholder="Leave blank if no pass"
|
|
autocomplete="false" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Client ID</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="mqttClientID" type="text" tabindex="25" />
|
|
<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 hint">
|
|
If left empty the firmware will generate a client ID based on the serial number of the chip.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT QoS</label>
|
|
<select class="pure-u-1 pure-u-lg-1-4" name="mqttQoS" tabindex="26">
|
|
<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-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Retain</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="mqttRetain" tabindex="27" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Keep Alive</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" type="number" name="mqttKeep" min="10" max="3600" tabindex="28" />
|
|
</div>
|
|
|
|
<div class="pure-g module module-mqttssl">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use secure connection (SSL)</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="mqttUseSSL" tabindex="29" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-mqttssl">
|
|
<label class="pure-u-1 pure-u-lg-1-4">SSL Fingerprint</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="mqttFP" type="text" maxlength="59" tabindex="30" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
This is the fingerprint for the SSL certificate of the server.
|
|
<br /> You can get it using
|
|
<a href="https://www.grc.com/fingerprints.htm" target="_blank">https://www.grc.com/fingerprints.htm</a>
|
|
<br /> or using openssl from a linux box by typing:
|
|
<br />
|
|
<pre>$ openssl s_client -connect <host>:<port> < /dev/null 2>/dev/null | openssl x509 -fingerprint -noout -in /dev/stdin</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">MQTT Root Topic</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="mqttTopic" type="text" tabindex="31" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
This is the root topic for this device. The {hostname} and {mac} placeholders will be replaced by the device hostname and
|
|
MAC address.
|
|
<br /> -
|
|
<strong><root>/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-color">-
|
|
<strong><root>/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><root>/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><root>/brightness/set</strong> Set the brighness (0-255).
|
|
<br />
|
|
</span>
|
|
<span class="module module-color">-
|
|
<strong><root>/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><root>/mired/set</strong> Set the temperature color in mired.
|
|
<br />
|
|
</span>
|
|
-
|
|
<strong><root>/status</strong> The device will report a 1 to this topic every few minutes.
|
|
Upon MQTT disconnecting this will be set to 0.
|
|
<br /> - Other values reported (depending on the build) are:
|
|
<strong>firmware</strong> and
|
|
<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
|
|
<strong>power supply</strong>.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use JSON payload</label>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<input type="checkbox" name="mqttUseJson" tabindex="32" />
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
All messages (except the device status) will be included in a JSON payload along with the timestamp and hostname and sent
|
|
under the
|
|
<strong><root>/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.
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-ntp">
|
|
|
|
<div class="header">
|
|
<h1>NTP</h1>
|
|
<h2>Configure your NTP (Network Time Protocol) servers and local configuration to keep your device time
|
|
up to the second for your location.</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Device Current Time</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="now" type="text" readonly />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">NTP Server</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="ntpServer" type="text" tabindex="41" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Time Zone</label>
|
|
<select class="pure-u-1 pure-u-lg-1-4" name="ntpOffset" tabindex="42"></select>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable DST</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="ntpDST" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">DST Region</label>
|
|
<select class="pure-u-1 pure-u-lg-1-4" name="ntpRegion">
|
|
<option value="0">Europe</option>
|
|
<option value="1">USA</option>
|
|
</select>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-domoticz">
|
|
|
|
<div class="header">
|
|
<h1>DOMOTICZ</h1>
|
|
<h2>
|
|
Configure the connection to your Domoticz server.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<legend>General</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable Domoticz</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="dczEnabled" tabindex="30" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Domoticz IN Topic</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="dczTopicIn" type="text" tabindex="31" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Domoticz OUT Topic</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="dczTopicOut" type="text" action="reconnect" tabindex="32" />
|
|
</div>
|
|
|
|
<legend>Sensors & actuators</legend>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 hint">Set IDX to 0 to disable notifications from that component.</div>
|
|
</div>
|
|
|
|
<div id="dczRelays"></div>
|
|
|
|
<div id="dczMagnitudes"></div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-ha">
|
|
|
|
<div class="header">
|
|
<h1>HOME ASSISTANT</h1>
|
|
<h2>
|
|
Add this device to your Home Assistant.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<fieldset>
|
|
|
|
<legend>Discover</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Discover</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="haEnabled" tabindex="14" />
|
|
</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 hint">
|
|
Home Assistant auto-discovery feature. Enable and save to add the device to your HA console. When using a colour light you
|
|
might want to disable CSS style so Home Assistant can parse the color.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Prefix</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" name="haPrefix" type="text" tabindex="15" />
|
|
</div>
|
|
|
|
<legend>Configuration</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Configuration</label>
|
|
<div class="pure-u-1-4 pure-u-lg-3-4">
|
|
<button class="pure-button button-ha-config pure-u-1-3">Show</button>
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">
|
|
These are the settings you should copy to your Home Assistant "configuration.yaml" file. If any of the sections below (switch,
|
|
light, sensor) already exists, do not duplicate it, simply copy the contents of the section
|
|
below the ones already present.
|
|
</div>
|
|
</div>
|
|
<div class="pure-g">
|
|
<span class="pure-u-1 terminal" id="haConfig" name="haConfig"></span>
|
|
</div>
|
|
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="panel" id="panel-thingspeak">
|
|
|
|
<div class="header">
|
|
<h1>THINGSPEAK</h1>
|
|
<h2>
|
|
Send your sensors data to Thingspeak.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<legend>General</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable Thingspeak</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="tspkEnabled" tabindex="30" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Thingspeak API Key</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="tspkKey" type="text" tabindex="31" />
|
|
</div>
|
|
|
|
<legend>Sensors & actuators</legend>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 hint">Enter the field number to send each data to, 0 disable notifications from that component.</div>
|
|
</div>
|
|
|
|
<div id="tspkRelays"></div>
|
|
|
|
<div id="tspkMagnitudes"></div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-idb">
|
|
|
|
<div class="header">
|
|
<h1>INFLUXDB</h1>
|
|
<h2>
|
|
Configure the connection to your InfluxDB server. Leave the host field empty to disable InfluxDB connection.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable InfluxDB</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="idbEnabled" tabindex="40" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Host</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="idbHost" type="text" tabindex="41" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Port</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="idbPort" type="text" tabindex="42" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Database</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="idbDatabase" type="text" tabindex="43" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Username</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="false" />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Password</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="false" />
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-dbg">
|
|
|
|
<div class="header">
|
|
<h1>DEBUG LOG</h1>
|
|
<h2>
|
|
Shows debug messages from the device
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g module module-cmd">
|
|
<div class="pure-u-1 hint">
|
|
Write a command and click send to execute it on the device. The output will be shown in the debug text area below.
|
|
</div>
|
|
<input name="dbgcmd" class="pure-u-3-4" type="text" tabindex="2" />
|
|
<div class=" pure-u-1-4 pure-u-lg-1-4">
|
|
<button class="pure-button button-dbgcmd pure-u-23-24">Send</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<textarea class="pure-u-1 terminal" id="weblog" name="weblog" wrap="off" readonly></textarea>
|
|
<div class=" pure-u-1-4 pure-u-lg-1-4">
|
|
<button class="pure-button button-dbg-clear pure-u-23-24">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-sensors">
|
|
|
|
<div class="header">
|
|
<h1>SENSOR CONFIGURATION</h1>
|
|
<h2>
|
|
Configure and calibrate your device sensors.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<legend>General</legend>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Read interval</label>
|
|
<select class="pure-u-1 pure-u-lg-1-4" name="snsRead">
|
|
<option value="6">6 seconds</option>
|
|
<option value="10">10 seconds</option>
|
|
<option value="15">15 seconds</option>
|
|
<option value="30">30 seconds</option>
|
|
<option value="60">1 minute</option>
|
|
<option value="300">5 minutes</option>
|
|
</select>
|
|
<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 hint">
|
|
Select the interval between readings. These will be filtered and averaged for the report. The default and recommended value
|
|
is 6 seconds.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Report every</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input name="snsReport" class="pure-u-1" type="number" min="1" step="1" max="12" />
|
|
</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 hint">
|
|
Select the number of readings to average and report
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-pwr">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Power units</label>
|
|
<select name="pwrUnits" tabindex="16" class="pure-u-1 pure-u-lg-1-4">
|
|
<option value="0">Watts (W)</option>
|
|
<option value="1">Kilowatts (kW)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse module-emon">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Energy units</label>
|
|
<select name="energyUnits" tabindex="16" class="pure-u-1 pure-u-lg-1-4">
|
|
<option value="0">Joules (J)</option>
|
|
<option value="1">Kilowatts·hour (kWh)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-g module module-temperature">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Temperature units</label>
|
|
<select name="tmpUnits" tabindex="16" class="pure-u-1 pure-u-lg-1-4">
|
|
<option value="0">Celsius (°C)</option>
|
|
<option value="1">Fahrenheit (°F)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-g module module-temperature">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Temperature correction</label>
|
|
<input name="tmpCorrection" class="pure-u-1 pure-u-lg-1-4" type="number" action="reboot" min="-100" step="0.1" max="100"
|
|
tabindex="18" />
|
|
<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 hint">
|
|
Temperature correction value is added to the measured value which may be inaccurate due to many factors. The value can be
|
|
negative.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-humidity">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Humidity correction</label>
|
|
<input name="humCorrection" class="pure-u-1 pure-u-lg-1-4" type="number" action="reboot" min="-100" step="0.1" max="100"
|
|
tabindex="18" />
|
|
<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 hint">
|
|
Humidity correction value is added to the measured value which may be inaccurate due to many factors. The value can be negative.
|
|
</div>
|
|
</div>
|
|
|
|
<legend class="module module-hlw module-cse module-emon">Energy monitor</legend>
|
|
|
|
<div class="pure-g module module-emon">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Voltage</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4" name="pwrVoltage" type="text" tabindex="51" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">Mains voltage in your system (in V).</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Expected Current</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 pwrExpected" name="pwrExpectedC" type="text" tabindex="52" placeholder="0" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">In Amperes (A). If you are using a pure resistive load like a bulb, this will be the ratio
|
|
between the two previous values, i.e. power / voltage. You can also use a current clamp
|
|
around one of the power wires to get this value.</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Expected Voltage</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 pwrExpected" name="pwrExpectedV" type="text" tabindex="53" placeholder="0" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">In Volts (V). Enter your the nominal AC voltage for your household or facility, or use multimeter
|
|
to get this value.</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse module-emon">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Expected Power</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 pwrExpected" name="pwrExpectedP" type="text" tabindex="54" placeholder="0" />
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint">In Watts (W). Calibrate your sensor connecting a pure resistive load (like a bulb) and enter
|
|
here the its nominal power or use a multimeter.</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse module-emon">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Reset calibration</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="pwrResetCalibration" tabindex="55" />
|
|
</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 hint">Move this switch to ON and press "Save" to revert to factory calibration values.</div>
|
|
</div>
|
|
|
|
<div class="pure-g module module-hlw module-cse module-emon">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Reset energy</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="pwrResetE" tabindex="56" />
|
|
</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 hint">Move this switch to ON and press "Save" to set energy count to 0.</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-rfb">
|
|
|
|
<div class="header">
|
|
<h1>RADIO FREQUENCY</h1>
|
|
<h2>
|
|
Sonoff 433 RF Bridge & 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 /> 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.
|
|
<span class="module module-rfbraw">
|
|
<br />
|
|
<br />You can also specify 116-chars long RAW codes. Raw codes require a
|
|
<a target="_blank" href="https://github.com/rhx/RF-Bridge-EFM8BB1">specific firmware for for the EFM8BB1</a>.</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<fieldset>
|
|
<div id="rfbNodes"></div>
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-boiler">
|
|
<div class="header">
|
|
<h1>BOILER</h1>
|
|
<h2>Configure the
|
|
<strong>BOILER</strong> settings. Make sure you Save after changing values.</h2>
|
|
</div>
|
|
<div class="page">
|
|
<fieldset>
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable Thermostat</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="boilerThermostat" />
|
|
</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 hint">Enable if you want to read/write from Thermostat</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable Polling</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="boilerPolling" />
|
|
</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 hint">Polling for better support and debugging</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enable Shower</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" name="boilerShower" />
|
|
</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 hint">Monitor shower timings</div>
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Logging</label>
|
|
<select class="pure-u-1 pure-u-lg-1-4" name="boilerLogging" tabindex="26">
|
|
<option value="0">None</option>
|
|
<option value="1">Basic</option>
|
|
<option value="2">Verbose</option>
|
|
</select>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
<!-- content -->
|
|
|
|
</div>
|
|
<!-- layout -->
|
|
|
|
<!-- Templates -->
|
|
|
|
<div id="rfbNodeTemplate" class="template">
|
|
|
|
<legend>Switch #
|
|
<span></span>
|
|
</legend>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>Switch ON</label>
|
|
</div>
|
|
<input class="pure-u-1 pure-u-lg-1-3" type="text" maxlength="18" name="rfbcode" data-id="1" data-status="1" />
|
|
<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>
|
|
|
|
<div class="pure-g">
|
|
<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="18" name="rfbcode" data-id="1" data-status="0" />
|
|
<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>
|
|
|
|
</div>
|
|
|
|
<div id="networkTemplate" class="template">
|
|
|
|
<div class="pure-g">
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4">Network SSID</label>
|
|
<div class="pure-u-5-6 pure-u-lg-2-3">
|
|
<input name="ssid" type="text" action="reconnect" class="pure-u-23-24" value="" tabindex="0" placeholder="Network SSID" required
|
|
autocomplete="false" />
|
|
</div>
|
|
<div class="pure-u-1-6 pure-u-lg-1-12">
|
|
<button type="button" class="pure-button button-more-network pure-u-1">...</button>
|
|
</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4 more">Password</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 more" name="pass" type="password" action="reconnect" value="" tabindex="0" autocomplete="false"
|
|
/>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4 more">Static IP</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 more" name="ip" type="text" action="reconnect" value="" maxlength="15" tabindex="0"
|
|
autocomplete="false" />
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint more">Leave empty for DNS negotiation</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4 more">Gateway IP</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 more" name="gw" type="text" action="reconnect" value="" maxlength="15" tabindex="0"
|
|
autocomplete="false" />
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint more">Set when using a static IP</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4 more">Network Mask</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 more" name="mask" type="text" action="reconnect" value="255.255.255.0" maxlength="15"
|
|
tabindex="0" autocomplete="false" />
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint more">Usually 255.255.255.0 for /24 networks</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4 more">DNS IP</label>
|
|
<input class="pure-u-1 pure-u-lg-3-4 more" name="dns" type="text" action="reconnect" value="8.8.8.8" maxlength="15" tabindex="0"
|
|
autocomplete="false" />
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<div class="pure-u-1 pure-u-lg-3-4 hint more">Set the Domain Name Server IP to use when using a static IP</div>
|
|
|
|
<div class="pure-u-0 pure-u-lg-1-4 more"></div>
|
|
<button class="pure-button button-del-network more" type="button">Delete network</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="scheduleTemplate" class="template">
|
|
|
|
<div class="pure-g">
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4">When time is</label>
|
|
<div class="pure-u-1-4 pure-u-lg-1-5">
|
|
<input class="pure-u-2-3" name="schHour" type="number" min="0" step="1" max="23" value="0" />
|
|
<div class="pure-u-1-4 hint center"> h</div>
|
|
</div>
|
|
<div class="pure-u-1-4 pure-u-lg-1-5">
|
|
<input class="pure-u-2-3" name="schMinute" type="number" min="0" step="1" max="59" value="0" />
|
|
<div class="pure-u-1-4 hint center"> m</div>
|
|
</div>
|
|
<div class="pure-u-0 pure-u-lg-1-3"></div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4">Use UTC time</label>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<input type="checkbox" name="schUTC" />
|
|
</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4">And weekday is one of</label>
|
|
<div class="pure-u-2-5 pure-u-lg-1-5">
|
|
<input class="pure-u-23-24 pure-u-lg-23-24" name="schWDs" type="text" maxlength="15" tabindex="0" value="1,2,3,4,5,6,7" />
|
|
</div>
|
|
<div class="pure-u-3-5 pure-u-lg-1-2 hint center"> 1 for Monday, 2 for Tuesday...</div>
|
|
|
|
<div id="schActionDiv" class="pure-u-1">
|
|
</div>
|
|
|
|
<label class="pure-u-1 pure-u-lg-1-4">Enabled</label>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<input type="checkbox" name="schEnabled" />
|
|
</div>
|
|
|
|
<div class="pure-u-0 pure-u-lg-1-4"></div>
|
|
<button class="pure-button button-del-schedule" type="button">Delete schedule</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="switchActionTemplate" class="template">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Action</label>
|
|
<div class="pure-u-1 pure-u-lg-1-5">
|
|
<select class="pure-u-1 pure-u-lg-23-24" name="schAction">
|
|
<option value="0">Turn OFF</option>
|
|
<option value="1">Turn ON</option>
|
|
<option value="2">Toggle</option>
|
|
</select>
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-1-5 isrelay" name="schSwitch"></select>
|
|
<input type="hidden" name="schType" value="1">
|
|
</div>
|
|
|
|
<div id="lightActionTemplate" class="template">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Brightness</label>
|
|
<div class="pure-u-1 pure-u-lg-1-5">
|
|
<input class="pure-u-2-3" name="schAction" type="number" min="0" step="1" max="255" value="0" />
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-1-5 islight" name="schSwitch"></select>
|
|
<input type="hidden" name="schType" value="2">
|
|
</div>
|
|
|
|
<div id="relayTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Switch #
|
|
<span class="id"></span>
|
|
</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input type="checkbox" class="relayStatus pure-u-1 pure-u-lg-1-4" data="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="relayConfigTemplate" class="template">
|
|
<legend>Switch #
|
|
<span class="id"></span> (GPIO
|
|
<span class="gpio"></span>)</legend>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>Boot mode</label>
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-3-4" name="relayBoot">
|
|
<option value="0">Always OFF</option>
|
|
<option value="1">Always ON</option>
|
|
<option value="2">Same as before</option>
|
|
<option value="3">Toggle before</option>
|
|
</select>
|
|
</div>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>Pulse mode</label>
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-3-4" name="relayPulse">
|
|
<option value="0">Don't pulse</option>
|
|
<option value="1">Normally OFF</option>
|
|
<option value="2">Normally ON</option>
|
|
</select>
|
|
</div>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>Pulse time (s)</label>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input name="relayTime" class="pure-u-1" type="number" min="0" step="0.1" max="86400" />
|
|
</div>
|
|
</div>
|
|
<div class="pure-g module module-mqtt">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>MQTT group</label>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-3-4">
|
|
<input name="mqttGroup" class="pure-u-1" tabindex="0" data="0" action="reconnect" />
|
|
</div>
|
|
</div>
|
|
<div class="pure-g module module-mqtt">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>MQTT group sync</label>
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-3-4" name="mqttGroupInv">
|
|
<option value="0">Same</option>
|
|
<option value="1">Inverse</option>
|
|
</select>
|
|
</div>
|
|
<div class="pure-g module module-mqtt">
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<label>On MQTT disconnect</label>
|
|
</div>
|
|
<select class="pure-u-1 pure-u-lg-3-4" name="relayOnDisc">
|
|
<option value="0">Don't change</option>
|
|
<option value="1">Turn the switch OFF</option>
|
|
<option value="2">Turn the switch ON</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dczRelayTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Switch</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input class="pure-u-1 pure-u-lg-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="dczMagnitudeTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input class="pure-u-1 pure-u-lg-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0" />
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tspkRelayTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Switch</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input class="pure-u-1 pure-u-lg-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tspkMagnitudeTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
|
|
<div class="pure-u-1 pure-u-lg-1-4">
|
|
<input class="pure-u-1 pure-u-lg-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0" />
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="colorRGBTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Color</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" data-wcp-layout="block" name="color" readonly />
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="colorHSVTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Color</label>
|
|
<input class="pure-u-1 pure-u-lg-1-4" data-wcp-layout="block" name="color" readonly />
|
|
</div>
|
|
</div>
|
|
|
|
<div id="channelTemplate" class="template">
|
|
<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" data="99">
|
|
<span class="slider pure-u-lg-1-4"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="miredsTemplate" class="template">
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-lg-1-4">Mireds (Cold ↔ 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>
|
|
</div>
|
|
|
|
<div id="magnitudeTemplate" class="template">
|
|
<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 class="pure-u-1 pure-u-lg-23-24 center" type="text" name="magnitude" data="256" readonly />
|
|
</div>
|
|
<div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<iframe id="downloader"></iframe>
|
|
<input id="uploader" type="file" />
|
|
|
|
</body>
|
|
|
|
<!-- build:js script.js -->
|
|
<script src="vendor/jquery-3.2.1.min.js"></script>
|
|
<script src="custom.js"></script>
|
|
<script src="vendor/checkboxes.js"></script>
|
|
<script src="vendor/jquery.wheelcolorpicker-3.0.3.min.js"></script>
|
|
<!-- endbuild -->
|
|
|
|
</html> |