forked from j3d1/fiatlux
basic webconf
This commit is contained in:
parent
0814fc837f
commit
f89f3e1816
5 changed files with 1349 additions and 2 deletions
1
firmware/fsdata/fs/css/picnic.min.css
vendored
Normal file
1
firmware/fsdata/fs/css/picnic.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
62
firmware/fsdata/fs/css/style.css
Normal file
62
firmware/fsdata/fs/css/style.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
main {
|
||||
padding: 4em 2em 2em 2em;
|
||||
max-width: 960px;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
canvas{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main[data-page="dashboard"] section[id="dashboard"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main[data-page="ota"] section[id="ota"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main[data-page="wifi"] section[id="wifi"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main[data-page="io"] section[id="io"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
.table>.row{
|
||||
display: table-row;
|
||||
}
|
||||
.table>.row:nth-child(2n) {
|
||||
background: rgba(17,17,17,0.05);
|
||||
}
|
||||
.table>.row>*{
|
||||
display: table-cell;
|
||||
padding: .3em 2.4em .3em .6em;
|
||||
}
|
||||
.table>header.row>*{
|
||||
text-align: left;
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
background-color: #0074d9;
|
||||
}
|
||||
|
||||
.table>.row>input{
|
||||
border: none;
|
||||
background: none;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.plain{
|
||||
opacity: initial;
|
||||
width: initial;
|
||||
}
|
||||
477
firmware/fsdata/fs/index.html
Normal file
477
firmware/fsdata/fs/index.html
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>fiatlux v0.2</title>
|
||||
<link rel="stylesheet" href="css/picnic.min.css">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="#" class="brand">
|
||||
<!--img class="logo" src="/img/basket.png" /-->
|
||||
<span>fiatlux v0.2</span>
|
||||
<span class="label warning" id="status_box">Loading...</span>
|
||||
</a>
|
||||
|
||||
<!-- responsive-->
|
||||
<input id="bmenub" type="checkbox" class="show">
|
||||
<label for="bmenub" class="burger pseudo button">☰</label>
|
||||
|
||||
<div class="menu">
|
||||
<a href="/" class="button icon-picture" onclick="use_page('dashboard'); return false">Dashboard</a>
|
||||
<a href="/io" class="button icon-puzzle" onclick="use_page('io'); return false">I/O</a>
|
||||
<a href="/wifi" class="button icon-puzzle" onclick="use_page('wifi'); return false">Wifi Settings</a>
|
||||
<a href="/ota" class="button icon-picture" onclick="use_page('ota'); return false">System</a>
|
||||
</div>
|
||||
</nav>
|
||||
<main data-page="dashboard" id="page">
|
||||
<section id="dashboard">
|
||||
<h2>Status</h2>
|
||||
<div class="flex">
|
||||
<div>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>System</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span>Chip ID</span>
|
||||
<span><span class="postfill_chipid">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Hostname</span>
|
||||
<span><span class="postfill_hostname">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Firmware Version</span>
|
||||
<span>N/A</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Flash ID</span>
|
||||
<span><span class="postfill_flashid">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Flash size</span>
|
||||
<span><span class="postfill_flashsize">N/A</span> KiB</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Free heap</span>
|
||||
<span><span class="postfill_heap">N/A</span> bytes</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Uptime</span>
|
||||
<span><span class="postfill_uptime">N/A</span> s</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Network <span class="label success postfill_clientip">current connection</span></h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span>Mode</span>
|
||||
<span><span class="postfill_opmode">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Station SSID</span>
|
||||
<span><span class="postfill_stassid">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Station IP</span>
|
||||
<span><span class="postfill_staip">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Station MAC</span>
|
||||
<span><span class="postfill_stamac">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>AP SSID</span>
|
||||
<span><span class="postfill_apssid">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>AP IP</span>
|
||||
<span><span class="postfill_apip">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>AP MAC</span>
|
||||
<span><span class="postfill_apmac">N/A</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Power</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span>Input</span>
|
||||
<span><span class="label success">5V</span><span class="label success">12V</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Output</span>
|
||||
<span><span class="label warning"><span id="out_voltage">11.2</span>V</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<canvas id="chartCanvas" style="height:100px"></canvas>
|
||||
</article>
|
||||
</div>
|
||||
<div>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>I/O</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span>Channel 1-6</span>
|
||||
<span>SPI Dimmer</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Channel 7-127</span>
|
||||
<span>WS2812 via I2S</span>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<label>
|
||||
<input type="checkbox" name="onoffswitch" id="led-switch" onclick="gpio()">
|
||||
<span class="toggle button">Toggle Something</span>
|
||||
</label>
|
||||
</footer>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="ota">
|
||||
<h2>System</h2>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Firmware Update</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span><input type="file"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span><input type="submit" value="Upload"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Restart</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span><input type="submit" value="Restart" onclick="wsWrite('R')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Reset Config</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<span><input type="submit" class="warning" value="Reset" onclick="wsWrite('X')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</section>
|
||||
<section id="io">
|
||||
<h2>I/O</h2>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Protocols</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<label>MQTT</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span><input type="reset" class="button"/></span>
|
||||
<span><input type="submit" value="Save"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Station Mode <span class="label success">current connection</span></h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<label>WS2812 via I2S</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
<span><input type="color"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>APA102C via SPI</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
<span><input type="color"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>6 Channel SPI Dimmer</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
<span><input type="color"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Binary Output on GPIO4</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
<span><button class="toggle button">Toggle</button></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Binary Output on GPIO5</label>
|
||||
<span><input type="checkbox" class="plain"/></span>
|
||||
<span><button class="toggle button">Toggle</button></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span><input type="reset" class="button"/></span>
|
||||
<span><input type="submit" value="Save"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
<section id="wifi">
|
||||
<h2>Wifi Settings</h2>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>AP Mode</h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<label>Enable</label>
|
||||
<span><input id="ap_toggle" type="checkbox" class="plain"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>SSID</label>
|
||||
<span><input id="ap_ssid" type="text" placeholder="SSID"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Password</label>
|
||||
<span><input id="ap_pw" type="password" placeholder="Password"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>AP IP</span>
|
||||
<span><span class="postfill_apip">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>AP MAC</span>
|
||||
<span><span class="postfill_apmac">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span><input type="reset" class="button"/></span>
|
||||
<span><input onclick="ap_update();" type="submit" value="Save"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="card">
|
||||
<header>
|
||||
<h3>Station Mode <span class="label success">current connection</span></h3>
|
||||
</header>
|
||||
<div class="table">
|
||||
<div class="row">
|
||||
<label>Eanable</label>
|
||||
<span><input id="sta_toggle" type="checkbox" class="plain"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>SSID</label>
|
||||
<span><input id="sta_ssid" type="text" placeholder="SSID"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label>Password</label>
|
||||
<span><input id="sta_pw" type="password" placeholder="Password"/></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Sation IP</span>
|
||||
<span><span class="postfill_staip">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Station MAC</span>
|
||||
<span><span class="postfill_stamac">N/A</span></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span><input type="reset" class="button"/></span>
|
||||
<span><input onclick="sta_update();" type="submit" value="Save"></span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
<div id="unused_values" style="display:none;"></div>
|
||||
<script type="text/javascript" src="js/smoothie_min.js"></script>
|
||||
<script>
|
||||
var section = document.getElementById("page");
|
||||
var menu = document.getElementById("bmenub");
|
||||
var voltage = document.getElementById("out_voltage");
|
||||
|
||||
var unused_values = {};
|
||||
|
||||
DataView.prototype.setChar = function(pos, char) {
|
||||
this.setInt8(pos++, char.charCodeAt(0));
|
||||
return pos;
|
||||
};
|
||||
|
||||
DataView.prototype.setString = function(pos, str) {
|
||||
for(var i = 0; i < str.length; i++) {
|
||||
this.setInt8(pos++, str.charCodeAt(i));
|
||||
}
|
||||
this.setInt8(pos++, 0);
|
||||
return pos;
|
||||
};
|
||||
|
||||
function use_page(name) {
|
||||
section.dataset.page = name;
|
||||
menu.checked = false
|
||||
}
|
||||
|
||||
var ws;
|
||||
var retries;
|
||||
var series = new TimeSeries();
|
||||
|
||||
function setMsg(cls, text) {
|
||||
sbox = document.getElementById('status_box');
|
||||
sbox.className = "label " + cls;
|
||||
sbox.innerHTML = text;
|
||||
console.log(text);
|
||||
}
|
||||
|
||||
function startPolling() {
|
||||
var chart = new SmoothieChart({
|
||||
millisPerPixel: 111, grid: {fillStyle: '#ffffff', strokeStyle: '#ffffff', borderVisible: false},
|
||||
labels: {fillStyle: '#000000'}, maxValue: 1024, minValue: 0
|
||||
});
|
||||
chart.addTimeSeries(series, {lineWidth: 2, strokeStyle: '#03a9f4', fillStyle: '#f1f5fa'});
|
||||
var canvas = document.getElementById("chartCanvas");
|
||||
canvas.width = canvas.clientWidth;
|
||||
canvas.height = canvas.clientHeight;
|
||||
chart.streamTo(canvas, 500);
|
||||
setInterval(function () {
|
||||
wsWrite('V');
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function onMessage(evt) {
|
||||
retries = 0;
|
||||
if (typeof evt.data == 'string') {
|
||||
var data = JSON.parse(evt.data);
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
const elements = document.querySelectorAll(".postfill_" + key);
|
||||
if (!elements.length)
|
||||
unused_values[key] = value;
|
||||
else
|
||||
for (i = 0; i < elements.length; ++i) {
|
||||
elements[i].innerHTML = value;
|
||||
}
|
||||
}
|
||||
document.getElementById("unused_values").innerHTML = JSON.stringify(unused_values);
|
||||
} else {
|
||||
var dv = new DataView(evt.data);
|
||||
var cmd = String.fromCharCode(dv.getUint8(0));
|
||||
var val = dv.getUint16(1);
|
||||
|
||||
if (cmd === 'G')
|
||||
console.log("LED switched");
|
||||
else if (cmd === 'V') {
|
||||
voltage.innerHTML = (val * 13 / 1024).toFixed(2);
|
||||
series.append(new Date().getTime(), val);
|
||||
} else
|
||||
console.log('unknown command', cmd, val);
|
||||
}
|
||||
}
|
||||
|
||||
function wsOpen() {
|
||||
var uri = "/stream"
|
||||
if (ws === undefined || ws.readyState != 0) {
|
||||
if (retries)
|
||||
setMsg("warning", "WebSocket timeout, retrying..");
|
||||
else
|
||||
setMsg("primary", "Opening WebSocket..");
|
||||
ws = new WebSocket("ws://" + location.host + uri);
|
||||
ws.binaryType = 'arraybuffer';
|
||||
ws.onopen = function (evt) {
|
||||
retries = 0;
|
||||
setMsg("success", "WebSocket is open.");
|
||||
};
|
||||
ws.onerror = function (evt) {
|
||||
console.error(evt);
|
||||
setMsg("error", "WebSocket error!"); /*window.location.reload(true);*/
|
||||
};
|
||||
ws.onmessage = function (evt) {
|
||||
onMessage(evt);
|
||||
};
|
||||
retries = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function buf2hex(buffer) { // buffer is an ArrayBuffer
|
||||
return [...new Uint8Array(buffer)].map(x => x.toString(16).padStart(2, '0')).join('');
|
||||
}
|
||||
|
||||
function wsWrite(data) {
|
||||
console.log(buf2hex(data));
|
||||
if (ws.readyState === 3 || retries++ > 5)
|
||||
wsOpen();
|
||||
else if (ws.readyState === 1)
|
||||
ws.send(data);
|
||||
}
|
||||
|
||||
function gpio() {
|
||||
if (document.getElementById('led-switch').checked)
|
||||
wsWrite('E');
|
||||
else
|
||||
wsWrite('D');
|
||||
}
|
||||
|
||||
var sta_toggle = document.getElementById("sta_toggle");
|
||||
var sta_ssid = document.getElementById("sta_ssid");
|
||||
var sta_pw = document.getElementById("sta_pw");
|
||||
|
||||
function sta_update() {
|
||||
var en = sta_toggle.checked;
|
||||
|
||||
const ssid = sta_ssid.value;
|
||||
const password = sta_pw.value;
|
||||
|
||||
const buffer = new ArrayBuffer(ssid.length + password.length + 4);
|
||||
const view1 = new DataView(buffer);
|
||||
var tx_len = 0;
|
||||
view1.setChar(tx_len++, 'S');
|
||||
view1.setChar(tx_len++, (en ? "E" : "D"));
|
||||
tx_len = view1.setString(tx_len, ssid);
|
||||
tx_len = view1.setString(tx_len, password);
|
||||
wsWrite(buffer);
|
||||
}
|
||||
|
||||
var ap_toggle = document.getElementById("ap_toggle");
|
||||
var ap_ssid = document.getElementById("ap_ssid");
|
||||
var ap_pw = document.getElementById("ap_pw");
|
||||
|
||||
function ap_update() {
|
||||
var en = ap_toggle.checked;
|
||||
|
||||
const ssid = ap_ssid.value;
|
||||
const password = ap_pw.value;
|
||||
|
||||
const buffer = new ArrayBuffer(ssid.length + password.length + 4);
|
||||
const view1 = new DataView(buffer);
|
||||
var tx_len = 0;
|
||||
view1.setChar(tx_len++, 'A');
|
||||
view1.setChar(tx_len++, (en ? "E" : "D"));
|
||||
tx_len = view1.setString(tx_len, ssid);
|
||||
tx_len = view1.setString(tx_len, password);
|
||||
wsWrite(buffer);
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
wsOpen();
|
||||
startPolling();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
15
firmware/fsdata/fs/js/smoothie_min.js
Normal file
15
firmware/fsdata/fs/js/smoothie_min.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue