mirror of https://github.com/jeelabs/esp-link.git
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.
106 lines
4.3 KiB
106 lines
4.3 KiB
<!doctype html>
|
|
<html><head>
|
|
<title>esp-link</title>
|
|
<link rel="stylesheet" href="pure.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<div id="layout">
|
|
<div id="main">
|
|
<div class="header">
|
|
<h1>REST & MQTT</h1>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="pure-g">
|
|
<div class="pure-u-1"><div class="card">
|
|
<p>The REST & MQTT support uses the SLIP protocol over the serial port to enable
|
|
the attached microcontroller to initiate outbound connections.
|
|
The REST support lets the uC initiate simple HTTP requests while the MQTT support
|
|
lets it communicate with an MQTT server bidirectionally at QoS 0 thru 2.</p>
|
|
<p>The MQTT support is in the form of a built-in client that connects to a server
|
|
using parameters set below and stored in esp-link's flash settings. This allows
|
|
esp-link to take care of connection parameters and disconnect/reconnect operations.</p>
|
|
<p>The MQTT client also supports sending periodic status messages about esp-link itself,
|
|
including WiFi RSSI, and free heap memory.</p>
|
|
<div class="form-horizontal">
|
|
<input type="checkbox" name="slip-enable"/>
|
|
<label>Enable SLIP on serial port</label>
|
|
</div>
|
|
</div></div>
|
|
</div>
|
|
<div class="pure-g">
|
|
<div class="pure-u-1 pure-u-md-1-2">
|
|
<div class="card">
|
|
<h1>MQTT
|
|
<div id="mqtt-spinner" class="spinner spinner-small"></div>
|
|
</h1>
|
|
<form action="#" id="mqtt-form" class="pure-form" hidden>
|
|
<div>
|
|
<input type="checkbox" name="mqtt-enable"/>
|
|
<label>Enable MQTT client</label>
|
|
</div>
|
|
<div>
|
|
<label>MQTT client state: </label>
|
|
<b id="mqtt-state"></b>
|
|
</div>
|
|
<br>
|
|
<legend>MQTT server settings</legend>
|
|
<div class="pure-form-stacked">
|
|
<label>Server hostname or IP</label>
|
|
<input type="text" name="mqtt-host"/>
|
|
<label>Server port</label>
|
|
<input type="text" name="mqtt-port"/>
|
|
<label>Client ID</label>
|
|
<input type="text" name="mqtt-client-id"/>
|
|
<label>Client Timeout (seconds)</label>
|
|
<input type="text" name="mqtt-timeout" />
|
|
<label>Keep Alive Interval (seconds)</label>
|
|
<input type="text" name="mqtt-keepalive" />
|
|
<label>Username</label>
|
|
<input type="text" name="mqtt-username"/>
|
|
<label>Password</label>
|
|
<input type="password" name="mqtt-password"/>
|
|
</div>
|
|
<button id="mqtt-button" type="submit" class="pure-button button-primary">
|
|
Update server settings!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="pure-u-1 pure-u-md-1-2">
|
|
<div class="card">
|
|
<h1>Status reporting
|
|
<div id="mqtt-status-spinner" class="spinner spinner-small"></div>
|
|
</h1>
|
|
<form action="#" id="mqtt-status-form" class="pure-form" hidden>
|
|
<div class="form-horizontal">
|
|
<input type="checkbox" name="mqtt-status-enable"/>
|
|
<label>Enable status reporting via MQTT</label>
|
|
</div>
|
|
<br>
|
|
<div class="pure-form-stacked">
|
|
<label>Status topic</label>
|
|
<input type="text" name="mqtt-status-topic"/>
|
|
Message: <tt id="mqtt-status-value"></tt>
|
|
<div class="popup">MQTT topic to which status message is sent</div>
|
|
</div>
|
|
<button id="mqtt-status-button" type="submit" class="pure-button button-primary">
|
|
Update status settings!
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="card">
|
|
<h1>REST</h1>
|
|
<p>REST requests are enabled as soon as SLIP is enabled.
|
|
There are no REST-specific settings.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="ui.js"></script>
|
|
<script src="mqtt.js"></script>
|
|
</body></html>
|
|
|