You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
387 lines
20 KiB
387 lines
20 KiB
<!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-security">SECURITY</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 synchonisation</a>
|
|
<option value="1">Zero or one relays active</a>
|
|
<option value="2">One and just one relay active</a>
|
|
<option value="3">All synchonised</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 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>
|
|
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel" id="panel-security">
|
|
|
|
<div class="header">
|
|
<h1>SECURITY</h1>
|
|
<h2>Device 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" 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">
|
|
<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="3" />
|
|
</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>
|