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.
326 lines
16 KiB
326 lines
16 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-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">
|
|
<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">
|
|
<label class="pure-u-1 pure-u-sm-1-4" for="temperature">Temperature (ºC)</label>
|
|
<input class="pure-u-1 pure-u-sm-3-4" type="text" name="temperature" readonly />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-sm-1-4" for="humidity">Humidity (%)</label>
|
|
<input class="pure-u-1 pure-u-sm-3-4" type="text" name="humidity" readonly />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<label class="pure-u-1 pure-u-sm-1-4" for="power">Power (W)</label>
|
|
<input class="pure-u-1 pure-u-sm-3-4" type="text" name="power" readonly />
|
|
</div>
|
|
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-sm-1-4"><label for="relayStatus">Relay Status</label></div>
|
|
<div class="pure-u-1 pure-u-sm-1-4"><input type="checkbox" name="relayStatus" /></div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="formSave" class="pure-form pure-form-stacked" 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-u-1">
|
|
<label class="form-label" for="hostname">Hostname</label>
|
|
<div class="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>
|
|
<input name="hostname" type="text" class="pure-u-1-4" tabindex="1">
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="relayMode">Relay boot mode</label>
|
|
<div class="hint">Here you can define what will be the status of the relay after a reboot.</div>
|
|
<select name="relayMode" class="pure-u-1-4" tabindex="2">
|
|
<option value="0">Always OFF</a>
|
|
<option value="1">Always ON</a>
|
|
<option value="2">Same as before</a>
|
|
</select>
|
|
</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">
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="mqttServer">MQTT Server</label>
|
|
<input name="mqttServer" type="text" class="pure-u-23-24" value="" size="20" tabindex="10" placeholder="MQTT Server">
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="mqttPort">MQTT Port</label>
|
|
<input name="mqttPort" type="text" class="pure-u-23-24" value="" size="21" tabindex="11" placeholder="1883">
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="mqttUser">MQTT User</label>
|
|
<input name="mqttUser" type="text" class="pure-u-23-24" value="" size="22" tabindex="12" placeholder="Leave blank if no user/pass">
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="mqttPassword">MQTT Password</label>
|
|
<input name="mqttPassword" type="text" class="pure-u-23-24" value="" size="23" tabindex="13" placeholder="Leave blank if no user/pass">
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="mqttTopic">MQTT Topic</label>
|
|
<div class="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>
|
|
<input name="mqttTopic" type="text" class="pure-u-23-24" value="" size="24" tabindex="13" placeholder="Leave blank if no user/pass">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</fieldset>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel" id="panel-power">
|
|
|
|
<div class="header">
|
|
<h1>POWER</h1>
|
|
<h2>
|
|
Configure your power monitor variables.
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="page">
|
|
|
|
<fieldset>
|
|
|
|
<div class="pure-g">
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="pwMainsVoltage">AC RMS Voltage</label>
|
|
<div class="hint">This is your house nominal voltage, you probably know this or you wont be playing with this device...</div>
|
|
<select name="pwMainsVoltage" class="pure-u-1-4" tabindex="40">
|
|
<option value="125">125</a>
|
|
<option value="220">220</a>
|
|
<option value="230">230</a>
|
|
<option value="240">240</a>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="pure-u-1">
|
|
<label class="form-label" for="pwCurrentRatio">Current Ratio</label>
|
|
<div class="hint">This is the value in amps for a 1V output for your sensor. Some current sensors like the YHDC SCT-013-030 have it written in the enclosure: 30A 1V. If you are using a current sensor that outputs a current (no built in burden resistor) it will depend on the turns ratio between the primary and secondary coils in the sensor and the burden resistor you use. Check about this constant in the <a href="https://openenergymonitor.org/emon/buildingblocks/calibration" target="_blank">post about calibration</a> in the Open Energy Monitor site.</div>
|
|
<input name="pwCurrentRatio" type="text" class="pure-u-1-4" value="" size="8" tabindex="41" placeholder="0">
|
|
</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>
|