|
|
- <!DOCTYPE html>
- <html>
- <head>
-
- <title>ESPurna 0.0.0</title>
- <meta charset="utf-8" />
- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <!-- build:css style.css -->
- <link rel="stylesheet" href="pure-min.css" />
- <link rel="stylesheet" href="side-menu.css" />
- <link rel="stylesheet" href="grids-responsive-min.css" />
- <link rel="stylesheet" href="checkboxes.css" />
- <link rel="stylesheet" href="custom.css" />
- <!-- endbuild -->
-
- </head>
-
- <body>
-
- <div id="layout">
-
- <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-pow">
- <a href="#" class="pure-menu-link" data="panel-power">POWER</a>
- </li>
-
- </ul>
-
- <div class="main-buttons">
- <button class="pure-button button-update">Update</button>
- <button class="pure-button button-reconnect">Reconnect</button>
- <button class="pure-button button-reset">Reset</button>
- </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 class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="manufacturer">Manufacturer</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="manufacturer" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="device">Device</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="device" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="chipid">Chip ID</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="chipid" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="mac">MAC</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="mac" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="network">Network</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="network" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="ip">IP</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="ip" readonly />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-sm-1-4" for="mqtt">MQTT Status</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="mqttStatus" readonly />
- </div>
-
- <div class="pure-g module module-ds">
- <label class="pure-u-1 pure-u-sm-1-4" for="dsTmp">Temperature (ºC)</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 (ºC)</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-pow">
- <label class="pure-u-1 pure-u-sm-1-4" for="powActivePower">Power (W)</label>
- <input class="pure-u-1 pure-u-sm-3-4" type="text" name="powActivePower" readonly />
- </div>
-
- <div id="relays">
- </div>
-
- <div id="relayTemplate">
- <div class="pure-g">
- <div class="pure-u-1 pure-u-sm-1-4"><label >Relay<span class="relay_id"></span> Status</label></div>
- <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" class="relayStatus" data="0" /></div>
- </div>
- </div>
-
-
- </fieldset>
-
- </form>
- </div>
- </div>
-
- <form id="formSave" class="pure-form" action="/" method="post">
-
- <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" tabindex="1" />
- <div class="pure-u-0 pure-u-md-1-4"> </div>
- <div class="pure-u-1 pure-u-md-3-4 hint">This name will identify this device in your network (http://<hostname>.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">Relay boot mode</label>
- <div class="pure-u-1 pure-u-md-3-4">
- <select name="relayMode" class="pure-u-1-2" tabindex="2">
- <option value="0">Always OFF</a>
- <option value="1">Always ON</a>
- <option value="2">Same as before</a>
- </select>
- </div>
- <div class="pure-u-0 pure-u-md-1-4"> </div>
- <div class="pure-u-1 pure-u-md-3-4 hint">Here you can define what will be the status of the relay after a reboot.</div>
- </div>
-
- <div class="pure-g module module-multirelay">
- <label class="pure-u-1 pure-u-md-1-4" for="relaySync">Relay sync mode</label>
- <div class="pure-u-1 pure-u-md-3-4">
- <select name="relaySync" class="pure-u-1-2" tabindex="2">
- <option value="0">No synchonization</a>
- <option value="1">Zero or one relays active</a>
- <option value="2">One and just one relay active</a>
- </select>
- </div>
- <div class="pure-u-0 pure-u-md-1-4"> </div>
- <div class="pure-u-1 pure-u-md-3-4 hint">Define how the different relays should be synchronized.</div>
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-md-1-4" for="adminPass">Admin password</label>
- <input name="adminPass" class="pure-u-1 pure-u-md-3-4" type="text" tabindex="3" />
- <div class="pure-u-0 pure-u-md-1-4"> </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).</div>
- </div>
-
- <div class="pure-g module module-fauxmo">
- <div class="pure-u-1 pure-u-sm-1-4"><label for="fauxmoEnabled">Enable WeMo emulation</label></div>
- <div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="fauxmoEnabled" /></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">
- <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="4" />
- <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"> </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.</div>
- </div>
-
- </fieldset>
- </div>
- </div>
-
- <div class="panel" id="panel-wifi">
-
- <div class="header">
- <h1>WIFI</h1>
- <h2>You can configure up to 3 different WiFi networks. The device will try to connect in order of signal strength.</h2>
- </div>
-
- <div class="page">
-
- <fieldset>
-
- <legend>First network</legend>
-
- <div class="pure-g">
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="ssid">SSID</label>
- <input type="text" class="pure-u-23-24" tabindex="10" name="ssid" />
- </div>
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="pass">Password</label>
- <input type="text" class="pure-u-23-24" tabindex="11" name="pass" />
- </div>
- </div>
-
- <legend>Second network</legend>
-
- <div class="pure-g">
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="ssid">SSID</label>
- <input type="text" class="pure-u-23-24" tabindex="12" name="ssid" />
- </div>
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="pass">Password</label>
- <input type="text" class="pure-u-23-24" tabindex="13" name="pass" />
- </div>
- </div>
-
- <legend>Third network</legend>
-
- <div class="pure-g">
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="ssid">SSID</label>
- <input type="text" class="pure-u-23-24" tabindex="14" name="ssid" />
- </div>
- <div class="pure-u-1 pure-u-md-1-2">
- <label for="pass">Password</label>
- <input type="text" class="pure-u-23-24" tabindex="15" name="pass" />
- </div>
- </div>
-
- </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">
- <label class="pure-u-1 pure-u-md-1-4" for="mqttServer">MQTT Server</label>
- <input class="pure-u-1 pure-u-md-3-4" name="mqttServer" type="text" size="20" tabindex="10" placeholder="MQTT Server" />
- </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="11" placeholder="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="12" placeholder="Leave blank if no user/pass" />
- </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="text" size="20" tabindex="13" placeholder="Leave blank if no user/pass" />
- </div>
-
- <div class="pure-g">
- <label class="pure-u-1 pure-u-md-1-4" for="mqttTopic">MQTT Topic</label>
- <input class="pure-u-1 pure-u-md-3-4" name="mqttTopic" type="text" size="20" tabindex="14" />
- <div class="pure-u-0 pure-u-md-1-4"> </div>
- <div class="pure-u-1 pure-u-md-3-4 hint">Send a 0 or a 1 as a payload to the provided topic below to switch it on or off. You can also send a 2 to toggle its current state. The switch will also report its current open/close status to the same topic and its IP address, hertbeat, firmware version and file system version to the topic you define plus "/ip", "/heartbeat", "/version" and "/fsversion" respectively. </div>
- </div>
-
- </fieldset>
- </div>
-
- </div>
-
- <div class="panel" id="panel-power">
-
- <div class="header">
- <h1>POWER</h1>
- <h2>
- 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-md-1-4" for="powExpectedPower">AC RMS Active Power</label>
- <input class="pure-u-1 pure-u-md-3-4 powExpected" name="powExpectedPower" type="text" size="8" tabindex="40" placeholder="0" />
- <div class="pure-u-0 pure-u-md-1-4"> </div>
- <div class="pure-u-1 pure-u-md-3-4 hint">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>
-
- </fieldset>
- </div>
-
- </div>
- </form>
-
- </div> <!-- content -->
-
- </div> <!-- layout -->
-
- </body>
-
- <!-- build:js script.js -->
- <script src="jquery-1.12.3.min.js"></script>
- <script src="checkboxes.js"></script>
- <script src="custom.js"></script>
- <!-- endbuild -->
-
- </html>
|
