mh
/
mhsw-espurna

<!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="pure-1.0.0.min.css" />        <link rel="stylesheet" href="side-menu.css" />        <link rel="stylesheet" href="grids-responsive-1.0.0.min.css" />        <link rel="stylesheet" href="checkboxes.css" />        <link rel="stylesheet" href="custom.css" />        <link rel="stylesheet" href="jquery.wheelcolorpicker-3.0.3.css" />        <!-- endbuild -->
    </head>
    <body>
        <div id="password" class="webmode">
            <div class="content">
                <form id="formPassword" class="pure-form" action="/" method="post">
                    <input class="pure-u-1 pure-u-sm-3-4" type="hidden" name="webMode" value="1" />
                    <div class="panel" style="display: 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-md-1-4" for="adminPass1">Admin password</label>                                    <input name="adminPass1" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="1" autocomplete="false" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 should have at least <strong>eight characters</strong> (letters, numbers or the underscore) and at least <strong>one number</strong>, <strong>one lowercase</strong> and <strong>one uppercase</strong> letter.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="adminPass2">Admin password (repeat)</label>                                    <input name="adminPass2" class="pure-u-1 pure-u-md-3-4" type="password" tabindex="2" autocomplete="false" />                                </div>
                                <button class="pure-button button-update-password">Update</button>
                            </fieldset>                        </div>                    </div>
                </form>
            </div> <!-- content -->
        </div>
        <div id="layout" class="webmode">
            <a href="#menu" id="menuLink" class="menu-link">                <span></span>            </a>
            <div id="menu">                <div class="pure-menu">
                    <span class="pure-menu-heading">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">                            <a href="#" class="pure-menu-link" data="panel-general">GENERAL</a>                        </li>
                        <li class="pure-menu-item">                            <a href="#" class="pure-menu-link" data="panel-wifi">WIFI</a>                        </li>
                        <li class="pure-menu-item">                            <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-dcz">                            <a href="#" class="pure-menu-link" data="panel-domoticz">DOMOTICZ</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-hlw module-emon module-v9261f">                            <a href="#" class="pure-menu-link" data="panel-power">POWER</a>                        </li>
                        <li class="pure-menu-item module module-rfb">                            <a href="#" class="pure-menu-link" data="panel-rfb">RFBRIDGE</a>                        </li>
                        <li class="pure-menu-item">                            <a href="#" class="pure-menu-link" data="panel-admin">ADMIN</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-reset">Reset</button>                    </div>
                    <div class="footer">                        &copy; 2016-2017<br />                        Xose Pérez<br/>                        <a href="http://tinkerman.cat" target="_blank">http://tinkerman.cat</a><br/>                        <a href="https://bitbucket.org/xoseperez/espurna" target="_blank">ESPurna @ Bitbucket</a><br/>                        GPLv3 license<br/>                    </div>
                </div>            </div>
            <div class="content">
                <div class="panel" id="panel-status" style="display: block;">
                    <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="channels">                                </div>
                                <div class="pure-g module module-analog">                                    <label class="pure-u-1 pure-u-sm-1-4" for="analogValue">Analog</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="analogValue" readonly />                                </div>
                                <div class="pure-g module module-counter">                                    <label class="pure-u-1 pure-u-sm-1-4" for="counterValue">Counts / last minute</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="counterValue" readonly />                                </div>
                                <div class="pure-g module module-ds">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dsTmp">Temperature (<span id="tmpUnit"></span>)</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dsTmp" readonly />                                </div>
                                <div class="pure-g module module-dht">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dhtTmp">Temperature (<span id="tmpUnit"></span>)</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dhtTmp" readonly />                                </div>
                                <div class="pure-g module module-dht">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dhtHum">Humidity (%)</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="dhtHum" readonly />                                </div>
                                <div class="pure-g module module-emon module-hlw module-v9261f module-ech1560">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrCurrent">Current</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrCurrent" post=" A" readonly />                                </div>
                                <div class="pure-g module module-emon module-hlw module-v9261f module-ech1560">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrVoltage">Voltage</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrVoltage" post=" V" readonly />                                </div>
                                <div class="pure-g module module-hlw module-v9261f">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrActive">Active Power</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrActive" post=" W" readonly />                                </div>
                                <div class="pure-g module module-emon module-hlw module-v9261f module-ech1560">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrApparent">Apparent Power</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrApparent" post=" VA" readonly />                                </div>
                                <div class="pure-g module module-hlw module-v9261f">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrReactive">Reactive Power</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrReactive" post=" VAR" readonly />                                </div>
                                <div class="pure-g module module-hlw module-v9261f">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrFactor">Power Factor</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrFactor" post="%" readonly />                                </div>
                                <div class="pure-g module module-emon module-hlw module-v9261f module-ech1560">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrEnergy">Energy</label>                                    <input class="pure-u-1 pure-u-sm-3-4" type="text" name="pwrEnergy" post=" J (aggregated)" readonly />                                </div>
                                <div class="pure-u-1 state">
                                    <div class="pure-u-1 pure-u-sm-1-4">Manufacturer</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="manufacturer"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Device</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="device"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Chip ID</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="chipid"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">MAC</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="mac"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Network</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="network"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">IP</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="deviceip"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Firmware name</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="app_name"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Firmware version</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="app_version"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Firmware build</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="app_build"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Current time</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="time"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Uptime</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="uptime"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Free heap</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="heap" post=" bytes"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Firmware size</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="sketch_size" post=" bytes"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">Free space</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="free_size" post=" bytes"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">MQTT Status</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="mqttStatus"></span></div>
                                    <div class="pure-u-1 pure-u-sm-1-4">NTP Status</div>                                    <div class="pure-u-1 pure-u-sm-17-24"><span class="right" name="ntpStatus"></span></div>

                                </div>
                            </fieldset>
                        </form>                    </div>                </div>
                <form id="formSave" class="pure-form" action="/" method="post" enctype="multipart/form-data">
                    <input class="pure-u-1 pure-u-sm-3-4" type="hidden" name="webMode" value="0" />
                    <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-md-1-4" for="hostname">Hostname</label>                                    <input name="hostname" class="pure-u-1 pure-u-md-3-4" type="text" action="reset" tabindex="1" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">This name will identify this device in your network (http://&lt;hostname&gt;.local). For this setting to take effect you should restart the wifi interface clicking the "Reconnect" button.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="relayMode">Switch boot mode</label>                                    <div class="pure-u-1 pure-u-md-3-4">                                        <select name="relayMode" class="pure-u-3-4" tabindex="2">                                            <option value="0">Always OFF</a>                                            <option value="1">Always ON</a>                                            <option value="2">Same as before</a>                                            <option value="3">Toogle before</a>                                        </select>                                    </div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Here you can define what will be the status of the switch after a reboot.</div>                                </div>
                                <div class="pure-g module module-multirelay">                                    <label class="pure-u-1 pure-u-md-1-4" for="relaySync">Switch sync mode</label>                                    <div class="pure-u-1 pure-u-md-3-4">                                        <select name="relaySync" class="pure-u-3-4" tabindex="3">                                            <option value="0">No synchonisation</a>                                            <option value="1">Zero or one switches active</a>                                            <option value="2">One and just one switch active</a>                                            <option value="3">All synchonised</a>                                        </select>                                    </div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Define how the different switches should be synchronized.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="relayPulseMode">Switch pulse mode</label>                                    <div class="pure-u-1 pure-u-md-3-4">                                        <select name="relayPulseMode" class="pure-u-3-4" tabindex="4">                                            <option value="0">Don't pulse</a>                                            <option value="1">Normally OFF (stays on for a short time)</a>                                            <option value="2">Normally ON (stays off for a short time)</a>                                        </select>                                    </div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">When pulse mode is enabled the switch will automatically switch back to its normal state after the pulse time (below).</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="relayPulseTime">Switch pulse time</label>                                    <input name="relayPulseTime" class="pure-u-1 pure-u-md-3-4" type="number" min="0" step="0.1" max="60" tabindex="5" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Pulse time in seconds (maximum value is 60s, accepts decimals).</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="btnDelay">Double click delay</label>                                    <input name="btnDelay" class="pure-u-1 pure-u-md-3-4" type="number" action="reset" min="0" step="100" max="1000" tabindex="6" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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>reset the device</strong> after updating for this setting to apply.                                    </div>                                </div>
                                <div class="pure-g module module-color">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useColor">Use colorpicker</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useColor" action="reload" tabindex="8" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Use color picker for the first 3 channels as RGB.<br />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 module module-color">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useRGB">Use RGB picker</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useRGB"  action="reload" tabindex="11" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Use RGB color picker if enabled (plus brightness), otherwise use HSV (hue-saturation-value) style</div>                                </div>
                                <div class="pure-g module module-color">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useWhite">Use white channel</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useWhite" action="reload" tabindex="9" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Use forth dimmable channel as white when first 3 have the same RGB value.<br />Will only work if the device has at least 4 dimmable channels.<br />Reload the page to update the web interface.</div>                                </div>
                                <div class="pure-g module module-color">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useGamma">Use gamma correction</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useGamma" tabindex="10" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 module module-color">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="useCSS">Use CSS style</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="useCSS" tabindex="11" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 module module-alexa">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="alexaEnabled">Alexa integration</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="alexaEnabled" tabindex="12" /></div>                                </div>
                                <div class="pure-g module module-ha">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="haEnabled">Home Assistant</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="haEnabled" tabindex="13" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 module module-ha">                                    <label class="pure-u-1 pure-u-md-1-4" for="haPrefix">Home Assistant Prefix</label>                                    <input class="pure-u-1 pure-u-md-1-4" name="haPrefix" type="text" tabindex="14" />                                </div>
                                <div class="pure-g module module-ds module-dht">                                    <label class="pure-u-1 pure-u-sm-1-4" for="tmpUnits">Temperature units</label>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="15" value="0"> Celsius (&deg;C)</input></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="radio" name="tmpUnits" tabindex="16" value="1"> Fahrenheit (&deg;F)</input></div>                                </div>
                                <div class="pure-g module module-ds module-dht">                                    <label class="pure-u-1 pure-u-md-1-4" for="tmpCorrection">Temperature correction</label>                                    <input name="tmpCorrection" class="pure-u-1 pure-u-md-1-4" type="number" action="reset" min="-100" step="0.1" max="100" tabindex="17" />                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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>
                            </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-md-1-4" for="adminPass1">Admin password</label>                                    <input name="adminPass1" class="pure-u-1 pure-u-md-3-4" type="password" action="reset" tabindex="11" autocomplete="false" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 should have at least <strong>eight characters</strong> (letters, numbers or the underscore) and at least <strong>one number</strong>, <strong>one lowercase</strong> and <strong>one uppercase</strong> letter.</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="adminPass2">Repeat password</label>                                    <input name="adminPass2" class="pure-u-1 pure-u-md-3-4" type="password" action="reset" tabindex="12" autocomplete="false" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="webPort">HTTP port</label>                                    <input name="webPort" class="pure-u-1 pure-u-md-3-4" type="text" action="reset" tabindex="13" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">                                        This is the port for the web interface and API requests.<br />                                        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">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="apiEnabled">Enable HTTP API</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="apiEnabled" /></div>                                </div>
                                <div class="pure-g">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="apiRealTime">Real time API</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="apiRealTime" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">                                        By default, some magnitudes are being preprocessed and filtered to avoid spurious values.<br />                                        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-md-1-4" for="apiKey">HTTP API Key</label>                                    <input name="apiKey" class="pure-u-3-4 pure-u-md-1-2" type="text" tabindex="14" />                                    <div class=" pure-u-1-4 pure-u-md-1-4"><button class="pure-button button-apikey pure-u-23-24">Generate</button></div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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.<br />                                        All API calls must contain the <strong>apikey</strong> parameter with the value above.<br />                                        To know what APIs are enabled do a call to <strong>/apis</strong>.                                    </div>                                </div>
                                <div class="pure-g module module-telnet">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="telnetSTA">Enable TELNET</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="telnetSTA" /></div>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="nofussEnabled">Automatic remote updates (NoFUSS)</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="nofussEnabled" /></div>                                </div>
                                <div class="pure-g module module-nofuss">                                    <label class="pure-u-1 pure-u-md-1-4" for="nofussServer">NoFUSS server</label>                                    <input name="nofussServer" class="pure-u-1 pure-u-md-3-4" type="text" tabindex="15" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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-sm-1-4">Settings</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><button class="pure-button button-settings-backup pure-u-23-24">Backup</button></div>                                    <div class="pure-u-1 pure-u-sm-1-8"><button class="pure-button button-settings-restore pure-u-23-24">Restore</button></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4">Upgrade</label>                                    <input class="pure-u-1-2 pure-u-md-1-2" name="filename" type="text" readonly />                                    <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>                                    <div class=" pure-u-1-8 pure-u-md-1-8"><button class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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>
                                <div id="networks">                                </div>
                                <button type="button" class="pure-button button-add-network">Add network</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. Leave the server field empty to disable MQTT.</h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="mqttEnabled">Enable MQTT</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="mqttEnabled" tabindex="30" /></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttServer">MQTT Broker</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttServer" type="text" size="20" tabindex="21" placeholder="IP or address of your broker" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttPort">MQTT Port</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttPort" type="text" size="6" tabindex="22" value="1883" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttUser">MQTT User</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttUser" type="text" size="20" tabindex="23" placeholder="Leave blank if no user/pass" autocomplete="false" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttPassword">MQTT Password</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttPassword" type="password" size="20" tabindex="24" placeholder="Leave blank if no user/pass" autocomplete="false" />                                </div>
                                <div class="pure-g module module-mqttssl">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="mqttUseSSL">Use secure connection (SSL)</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="mqttUseSSL" tabindex="25" /></div>                                </div>
                                <div class="pure-g module module-mqttssl">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttFP">SSL Fingerprint</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttFP" type="text" size="59" tabindex="26" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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 &lt;host&gt;:&lt;port&gt; &lt; /dev/null 2&gt;/dev/null | openssl x509 -fingerprint -noout -in /dev/stdin</pre>                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="mqttTopic">MQTT Root Topic</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="mqttTopic" type="text" size="20" tabindex="27" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">                                        This is the root topic for this device. A trailing slash will be added if not preset. The {identifier} placeholder will be replaced by the device hostname.<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-color">- <strong>&lt;root&gt;/color/set</strong> Set the color using this topic, your can either send an "#RRGGBB" value or "RRR,GGG,BBB".<br /></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/brightness/set</strong> Set the brighness using a value from 0 to 255.<br /></span>                                        <span class="module module-color">- <strong>&lt;root&gt;/channel/#/set</strong> Set the value for a single color channel (from 0 to 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>                                        - <strong>&lt;root&gt;/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">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="mqttUseJson">Use JSON payload</label></div>                                    <div class="pure-u-1 pure-u-sm-3-4"><input type="checkbox" name="mqttUseJson" tabindex="26" /></div>                                    <div class="pure-u-1 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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>&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 />                                        Subscribtions 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-md-1-4" for="ntpServer1">NTP Server 1</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="ntpServer1" type="text" size="20" tabindex="41" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="ntpServer2">NTP Server 2</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="ntpServer2" type="text" size="20" tabindex="42" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="ntpServer3">NTP Server 3</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="ntpServer3" type="text" size="20" tabindex="43" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-sm-1-4" for="ntpOffset">Time offset</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="ntpOffset" type="number" min="-11" max="14" tabindex="44" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 for UTC time</div>                                </div>
                                <div class="pure-g">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="ntpDST">Enable Daylight Saving Time</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="ntpDST" /></div>                                </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>
                                <div class="pure-g">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="dczEnabled">Enable Domoticz</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="dczEnabled" tabindex="30" /></div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczSkip">Anti-recursion time</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczSkip" type="number" min="0" max="10" tabindex="31" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Skips in/out messages from the same IDX within this time in seconds</div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="dczTopicIn">Domoticz IN Topic</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="dczTopicIn" type="text" tabindex="31" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="dczTopicOut">Domoticz OUT Topic</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="dczTopicOut" type="text" action="reconnect" tabindex="32" />                                </div>
                                <div class="pure-g module module-dht module-ds">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczTmpIdx">Temperature IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczTmpIdx" type="number" min="0" tabindex="33" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-dht">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczHumIdx">Humidity IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczHumIdx" type="number" min="0" tabindex="34" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-pwr">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczPowIdx">Power IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczPowIdx" type="number" min="0" tabindex="35" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-pwr">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczEnergyIdx">Energy increment IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczEnergyIdx" type="number" min="0" tabindex="36" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-pwr">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczVoltIdx">Voltage IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczVoltIdx" type="number" min="0" tabindex="37" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-pwr">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczCurrentIdx">Current IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczCurrentIdx" type="number" min="0" tabindex="38" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div class="pure-g module module-analog">                                    <label class="pure-u-1 pure-u-sm-1-4" for="dczAnaIdx">Analog IDX</label>                                    <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24" name="dczAnaIdx" type="number" min="0" tabindex="39" data="0" /></div>                                    <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>                                </div>
                                <div id="idxs">                                </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-md-1-4" for="idbHost">Host</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="idbHost" type="text" tabindex="41" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="idbPort">Port</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="idbPort" type="text" tabindex="42" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="idbDatabase">Database</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="idbDatabase" type="text" tabindex="43" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="idbUsername">Username</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="idbUsername" type="text" tabindex="44" autocomplete="false" />                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-md-1-4" for="idbPassword">Password</label>                                    <input class="pure-u-1 pure-u-md-3-4" name="idbPassword" type="password" tabindex="45" autocomplete="false" />                                </div>
                            </fieldset>                        </div>
                    </div>
                    <div class="panel" id="panel-power">
                        <div class="header">                            <h1>POWER CALIBRATION</h1>                            <h2>                                Configure and calibrate your power monitor device. Use a pure resistive load and introduce the expected values for active power, current and voltage. Use the nominal values or a multimeter to get the proper numbers. Set any field to 0 to leave the calibration value untouched.                            </h2>                        </div>
                        <div class="page">
                            <fieldset>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrReadEvery">Read interval</label>                                    <select class="pure-u-1 pure-u-sm-1-4" name="pwrReadEvery">                                    	<option value=2000>2 seconds</option>                                    	<option value=6000>6 seconds</option>                                    	<option value=10000>10 seconds</option>                                    	<option value=15000>15 seconds</option>                                    	<option value=30000>30 seconds</option>                                    	<option value=60000>60 seconds</option>                                    </select>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">                                        Select the interval between readings. These will be filtered and averaged for the report.<br />                                        The default and recommended value is 6 seconds.                                    </div>                                </div>
                                <div class="pure-g">                                    <label class="pure-u-1 pure-u-sm-1-4" for="pwrReportEvery">Report interval</label>                                    <select class="pure-u-1 pure-u-sm-1-4" name="pwrReportEvery">                                    	<option value=6000>6 seconds</option>                                    	<option value=10000>10 seconds</option>                                    	<option value=30000>30 seconds</option>                                    	<option value=60000>1 minute</option>                                    	<option value=300000>5 minutes</option>                                    </select>                                    <div class="pure-u-0 pure-u-md-1-2">&nbsp;</div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">                                        Select the interval between reports via MQTT.<br />                                        This can't be less than the reading interval above.<br />                                        The default and recommended value is 1 minute.                                    </div>                                </div>
                                <div class="pure-g module module-hlw module-emon module-v9261f">                                    <label class="pure-u-1 pure-u-md-1-4" for="pwrExpectedP">AC RMS Active Power</label>                                    <input class="pure-u-1 pure-u-md-3-4 pwrExpected" name="pwrExpectedP" type="text" size="8" tabindex="51" placeholder="0" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">In Watts (W). If you are using a pure resistive load like a bulb this will be writen on it, otherwise use a socket multimeter to get this value.</div>                                </div>
                                <div class="pure-g module module-v9261f">                                    <label class="pure-u-1 pure-u-md-1-4" for="pwrExpectedF">AC Power Factor</label>                                    <input class="pure-u-1 pure-u-md-3-4 pwrExpected" name="pwrExpectedF" type="text" size="8" tabindex="51" placeholder="0" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">In percentage (%). You will need to use a calibrated multimeter to get this value and a mixed resistive and reactive load.</div>                                </div>
                                <div class="pure-g module module-emon module-hlw module-v9261f">                                    <label class="pure-u-1 pure-u-md-1-4" for="pwrExpectedV">AC RMS Voltage</label>                                    <input class="pure-u-1 pure-u-md-3-4 pwrExpected" name="pwrExpectedV" type="text" size="8" tabindex="52" placeholder="0" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-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-v9261f">                                    <label class="pure-u-1 pure-u-md-1-4" for="pwrExpectedC">AC RMS Current</label>                                    <input class="pure-u-1 pure-u-md-3-4 pwrExpected" name="pwrExpectedC" type="text" size="8" tabindex="55" placeholder="0" />                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">In Ampers (A). If you are using a pure resistive load like a bulb this will the ratio between the two previous values, i.e. power / voltage. You can also use a current clamp around one fo the power wires to get this value.</div>                                </div>
                                <div class="pure-g module module-hlw module-emon module-v9261f">                                    <div class="pure-u-1 pure-u-sm-1-4"><label for="pwrResetCalibration">Reset calibration</label></div>                                    <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="pwrResetCalibration" /></div>                                    <div class="pure-u-0 pure-u-md-1-4">&nbsp;</div>                                    <div class="pure-u-1 pure-u-md-3-4 hint">Move this switch to ON and press "Update" to revert to factory calibration values.</div>                                </div>
                            </fieldset>                        </div>
                    </div>                </form>
                <div class="panel" id="panel-rfb">
                    <div class="header">                        <h1>RFBRIDGE</h1>                        <h2>                            Sonoff 433 RF Bridge Configuration<br /><br />                            To learn a new code click <strong>LEARN</strong>, the Sonoff RFBridge will beep, then press a button on the remote, the RFBridge will then double beep and the new code should show up. 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 (all codes must be 18 characters long) 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.                        </h2>                    </div>
                    <div class="page">
                        <div id="rfbNodes" />
                    </div>                </div>
            </div> <!-- content -->
        </div> <!-- layout -->
        <!-- Templates -->
        <div id="rfbNodeTemplate" class="template">
            <fieldset>
                <legend>&nbsp;Switch <span></span>&nbsp;</legend>
                <div class="pure-g">                    <label class="pure-u-1-2 pure-u-sm-1-4">Switch ON</label>                    <input class="pure-u-1-2 pure-u-sm-1-3" type="text" maxlength="18" name="rfbcode" data_id="1" data_status="1" />                    <div class="pure-u-1-3 pure-u-md-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-md-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-md-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>                </div>
                <div class="pure-g">                    <label class="pure-u-1-2 pure-u-sm-1-4">Switch OFF</label>                    <input class="pure-u-1-2 pure-u-sm-1-3" type="text" maxlength="18" name="rfbcode" data_id="1" data_status="0" />                    <div class="pure-u-1-3 pure-u-md-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-md-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-md-1-8"><button type="button" class="pure-u-23-24 pure-button button-rfb-forget">FORGET</button></div>                </div>
            </fieldset>
        </div>
        <div id="networkTemplate" class="template">
            <div class="pure-g">
                <label class="pure-u-md-1-6 pure-u-1-4" for="ssid">Network SSID</label>                <div class="pure-u-md-3-4 pure-u-5-8"><input name="ssid" type="text" action="reconnect" class="pure-u-23-24" value="" size="8" tabindex="0" placeholder="Network SSID" required autocomplete="false" /></div>                <div class="pure-u-md-1-12 pure-u-1-8"><button type="button" class="pure-button button-more-network pure-u-1">...</button></div>
                <div class="more">
                    <div class="break"></div>
                    <label class="pure-u-md-1-6 pure-u-1-4" for="pass">Password</label>                    <input class="pure-u-md-5-6 pure-u-3-4" name="pass" type="password" action="reconnect" value="" tabindex="0" autocomplete="false" />
                    <div class="break"></div>
                    <label class="pure-u-md-1-6 pure-u-1-4" for="ip">Static IP</label>                    <input class="pure-u-md-5-6 pure-u-3-4" name="ip" type="text" action="reconnect" value="" size="15" tabindex="0" autocomplete="false" />                    <div class="pure-u-md-1-6 pure-u-1-4"></div>                    <div class="pure-u-md-5-6 pure-u-3-4 hint">Leave empty for DNS negotiation</div>
                    <label class="pure-u-md-1-6 pure-u-1-4" for="gw">Gateway IP</label>                    <input class="pure-u-md-5-6 pure-u-3-4" name="gw" type="text" action="reconnect" value="" size="15" tabindex="0" autocomplete="false" />                    <div class="pure-u-md-1-6 pure-u-1-4"></div>                    <div class="pure-u-md-5-6 pure-u-3-4 hint">Set when using a static IP</div>
                    <label class="pure-u-md-1-6 pure-u-1-4" for="mask">Network Mask</label>                    <input class="pure-u-md-5-6 pure-u-3-4" name="mask" type="text" action="reconnect" value="255.255.255.0" size="15" tabindex="0" autocomplete="false" />                    <div class="pure-u-md-1-6 pure-u-1-4"></div>                    <div class="pure-u-md-5-6 pure-u-3-4 hint">Usually 255.255.255.0 for /24 networks</div>
                    <label class="pure-u-md-1-6 pure-u-1-4" for="dns">DNS IP</label>                    <input class="pure-u-md-5-6 pure-u-3-4" name="dns" type="text" action="reconnect" value="8.8.8.8" size="15" tabindex="0" autocomplete="false" />                    <div class="pure-u-md-1-6 pure-u-1-4"></div>                    <div class="pure-u-md-5-6 pure-u-3-4 hint">Set the Domain Name Server IP to use when using a static IP</div>
                    <div class="pure-u-md-1-6 pure-u-1-4"></div>                    <div class="pure-u-md-1-6 pure-u-1-4"><button type="button" class="pure-button button-del-network pure-u-5-6 pure-u-md-5-6">Del</button></div>
                </div>
            </div>
        </div>
        <div id="relayTemplate" class="template">            <div class="pure-g">                <div class="pure-u-1 pure-u-sm-1-4"><label>Switch<span class="relay_id"></span> Status</label></div>                <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" class="relayStatus pure-u-1 pure-u-sm-1-4" data="0" /></div            </div>        </div>
        <div id="idxTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-sm-1-4" for="dczRelayIdx">Switch<span class="id"></span> IDX</label>                <div class="pure-u-1 pure-u-sm-1-8"><input class="pure-u-sm-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>                <div class="pure-u-1 pure-u-sm-5-8 hint center">Set to 0 to disable notifications.</div>            </div>        </div>
        <div id="colorRGBTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-sm-1-4">Color</label>                <input class="pure-u-1 pure-u-sm-1-4" data-wcp-layout="block" name="color" readonly />            </div>
            <div class="pure-g">                <label class="pure-u-1 pure-u-sm-1-4">Brightness</label>                <input type="range" min="0" max="255" class="slider pure-u-sm-1-4" id="brightness">                <span class="slider brightness pure-u-sm-1-4"></span>            </div>        </div>
        <div id="colorHSVTemplate" class="template">            <div class="pure-g">                <label class="pure-u-1 pure-u-sm-1-4">Color</label>                <input class="pure-u-1 pure-u-sm-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-sm-1-4">Channel #</label>                <input type="range" min="0" max="255" class="slider channels pure-u-sm-1-4" data="99">                <span class="slider pure-u-sm-1-4"></span>            </div>        </div>
        <iframe id="downloader" style="display:none;"></iframe>        <input id="uploader" type="file" style="display:none;" />
    </body>
    <!-- build:js script.js -->    <script src="jquery-3.2.1.min.js"></script>    <script src="checkboxes.js"></script>    <script src="custom.js"></script>    <script src="jquery.wheelcolorpicker-3.0.3.min.js"></script>    <!-- endbuild -->
</html>