html optimized: data is loaded with javascript, Wifi mode added
This commit is contained in:
nightflyer88
parent
cf64e3b901
commit
7f62fc479d
817
CG_scale.ino
817
CG_scale.ino
File diff suppressed because it is too large
Load Diff
BIN
data/bootstrap.min.css.map.gz
Normal file
BIN
data/bootstrap.min.css.map.gz
Normal file
Binary file not shown.
124
data/index.html
Executable file
124
data/index.html
Executable file
@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="M. Lehmann">
|
||||
<title>CG scale by M. Lehmann</title>
|
||||
<link href="/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="/bootstrap.min.js"></script>
|
||||
<script>
|
||||
var CG_trans_visible = true;
|
||||
var batVolt_visible = true;
|
||||
function getHead(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
document.getElementById("ssid").innerHTML = value[0];
|
||||
document.getElementById("errMsg").innerHTML = value[1];
|
||||
document.getElementById("cgscaleVersion").innerHTML = value[2];
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getHead", true);
|
||||
request.send();
|
||||
}
|
||||
function getParameter(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
if(value[0] == "2"){
|
||||
CG_trans_visible = false;
|
||||
document.getElementById("cglrContainer").outerHTML = "";
|
||||
}
|
||||
if(value[11] == "OFF"){
|
||||
batVolt_visible = false;
|
||||
document.getElementById("batContainer").outerHTML = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getParameter", true);
|
||||
request.send();
|
||||
}
|
||||
function getValue(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
document.getElementById("weightTotal").innerHTML = value[0];
|
||||
document.getElementById("CG_length").innerHTML = value[1];
|
||||
if(CG_trans_visible == true){
|
||||
document.getElementById("CG_trans").innerHTML = value[2];
|
||||
}
|
||||
if(batVolt_visible == true){
|
||||
document.getElementById("batVolt").innerHTML = value[3];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getValue", true);
|
||||
request.send();
|
||||
setTimeout('getValue()', 1000);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload=getValue()>
|
||||
<script>
|
||||
getHead();
|
||||
getParameter();
|
||||
</script>
|
||||
<nav class="navbar navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#"><span id="ssid"></span></a>"
|
||||
</div>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<button type="button" onclick="location.href = '/settings.html'" class="btn btn-danger">
|
||||
<img src="settings.png" alt="" style="width:auto;height:30px">
|
||||
</button>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<br><br><br>
|
||||
<main role="main" class="container">
|
||||
<div class="jumbotron">
|
||||
<div class="container" id="wgContainer">
|
||||
<div class="row mt-3">
|
||||
<div class="col-xs-6"><img src="weight.png" class="pull-left mr-4" alt="Weight" style="width:auto;height:50px"></div>
|
||||
<div class="col-xs-6 d-flex align-items-center"><font size="6"><span id="weightTotal">-</span></font></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" id="cgContainer">
|
||||
<div class="row mt-3">
|
||||
<div class="col-xs-6"><img src="cg.png" class="pull-left mr-4" alt="CG" style="width:auto;height:50px"></div>
|
||||
<div class="col-xs-6 d-flex align-items-center"><font size="6"><span id="CG_length">-</span></font></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" id="cglrContainer">
|
||||
<div class="row mt-3">
|
||||
<div class="col-xs-6"><img src="cglr.png" class="pull-left mr-4" alt="CG left/right" style="width:auto;height:50px"></div>
|
||||
<div class="col-xs-6 d-flex align-items-center"><font size="6"><span id="CG_trans">-</span></font></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" id="batContainer">
|
||||
<div class="row mt-3">
|
||||
<div class="col-xs-6"><img src="battery.png" class="pull-left mr-4" alt="Battery" style="width:auto;height:50px"></div>
|
||||
<div class="col-xs-6 d-flex align-items-center"><font size="6"><span id="batVolt">-</span></font></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container"><font size="6"><span id="errMsg"></span></font></div>
|
||||
</div>
|
||||
</main>
|
||||
<p><font size="2"><center>(c) 2019 M. Lehmann - Version: <span id="cgscaleVersion">0.0</span></center></font></p>
|
||||
</body>
|
||||
</html>
|
||||
295
data/settings.html
Executable file
295
data/settings.html
Executable file
@ -0,0 +1,295 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="M. Lehmann">
|
||||
<title>CG scale by M. Lehmann</title>
|
||||
<link href="/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="/bootstrap.min.js"></script>
|
||||
<script>
|
||||
var CG_trans_visible = true;
|
||||
function getHead(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
document.getElementById("ssid").innerHTML = value[0];
|
||||
//document.getElementById("errMsg").innerHTML = value[1];
|
||||
document.getElementById("cgscaleVersion").innerHTML = value[2];
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getHead", true);
|
||||
request.send();
|
||||
}
|
||||
function getRawValue(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
document.getElementById("lc1").innerHTML = value[0];
|
||||
document.getElementById("lc2").innerHTML = value[1];
|
||||
if(CG_trans_visible == true){
|
||||
document.getElementById("lc3").innerHTML = value[2];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getRawValue", true);
|
||||
request.send();
|
||||
setTimeout('getRawValue()', 1000);
|
||||
}
|
||||
function getParameter(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
setValue("nLoadcells", value[0]);
|
||||
setValue("distanceX1", value[1]);
|
||||
setValue("distanceX2", value[2]);
|
||||
setValue("distanceX3", value[3]);
|
||||
setValue("refWeight", value[4]);
|
||||
setValue("refCG", value[5]);
|
||||
setValue("calFactorLoadcell1", value[6]);
|
||||
setValue("calFactorLoadcell2", value[7]);
|
||||
setValue("calFactorLoadcell3", value[8]);
|
||||
setValue("resistorR1", value[9]);
|
||||
setValue("resistorR2", value[10]);
|
||||
setValue("enableBatVolt", value[11]);
|
||||
setValue("ssid_STA", value[12]);
|
||||
setValue("password_STA", value[13]);
|
||||
setValue("ssid_AP", value[14]);
|
||||
setValue("password_AP", value[15]);
|
||||
if(value[0] == "2"){
|
||||
CG_trans_visible = false;
|
||||
document.getElementById("lc3_div").outerHTML = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getParameter", true);
|
||||
request.send();
|
||||
}
|
||||
function getWiFiNetworks(){
|
||||
var request = new XMLHttpRequest();
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText != null){
|
||||
var responseString = this.responseText;
|
||||
var value = responseString.split("&");
|
||||
var select = document.getElementById('ssid_STA');
|
||||
for (var i = 0; i<value.length; ++i){
|
||||
var opt = document.createElement('option');
|
||||
opt.value = value[i];
|
||||
opt.innerHTML = value[i];
|
||||
select.appendChild(opt);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
request.open("GET", "getWiFiNetworks", true);
|
||||
request.send();
|
||||
}
|
||||
function saveParameter(){
|
||||
var data = "?";
|
||||
data += "nLoadcells=" + document.getElementById("nLoadcells").value;
|
||||
data += "&distanceX1=" + document.getElementById("distanceX1").value;
|
||||
data += "&distanceX2=" + document.getElementById("distanceX2").value;
|
||||
data += "&distanceX3=" + document.getElementById("distanceX3").value;
|
||||
data += "&refWeight=" + document.getElementById("refWeight").value;
|
||||
data += "&refCG=" + document.getElementById("refCG").value;
|
||||
data += "&calFactorLoadcell1=" + document.getElementById("calFactorLoadcell1").value;
|
||||
data += "&calFactorLoadcell2=" + document.getElementById("calFactorLoadcell2").value;
|
||||
data += "&calFactorLoadcell3=" + document.getElementById("calFactorLoadcell3").value;
|
||||
data += "&resistorR1=" + document.getElementById("resistorR1").value;
|
||||
data += "&resistorR2=" + document.getElementById("resistorR2").value;
|
||||
data += "&enableBatVolt=" + document.getElementById("enableBatVolt").value;
|
||||
data += "&ssid_STA=" + document.getElementById("ssid_STA").value;
|
||||
data += "&password_STA=" + document.getElementById("password_STA").value;
|
||||
data += "&ssid_AP=" + document.getElementById("ssid_AP").value;
|
||||
data += "&password_AP=" + document.getElementById("password_AP").value;
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", "saveParameter" + data, true);
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText == "ok"){
|
||||
alert("Parameters saved");
|
||||
getParameter();
|
||||
}else{
|
||||
alert("Save parameter failed !");
|
||||
}
|
||||
}
|
||||
}
|
||||
request.send();
|
||||
}
|
||||
function autoCalibrate(){
|
||||
alert("Please put the reference weight on the scale.");
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", "autoCalibrate", true);
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText == "ok"){
|
||||
alert("Calibration successful");
|
||||
getParameter();
|
||||
}else{
|
||||
alert("Calibration failed !");
|
||||
}
|
||||
}
|
||||
}
|
||||
request.send();
|
||||
}
|
||||
function resetDefault(){
|
||||
if (confirm("Reset to factory defaults ?")) {
|
||||
var request = new XMLHttpRequest();
|
||||
request.open("GET", "resetDefault", true);
|
||||
request.onreadystatechange = function(){
|
||||
if(this.readyState == 4 && this.status == 200){
|
||||
if(this.responseText == "ok"){
|
||||
alert("Reset to factory defaults successful");
|
||||
getParameter();
|
||||
}else{
|
||||
alert("Reset to factory defaults failed !");
|
||||
}
|
||||
}
|
||||
}
|
||||
request.send();
|
||||
}
|
||||
}
|
||||
function setValue(id, value)
|
||||
{
|
||||
var element = document.getElementById(id);
|
||||
element.value = value;
|
||||
}
|
||||
function getValue(id)
|
||||
{
|
||||
return document.getElementById(id).value;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload=getRawValue()>
|
||||
<script>
|
||||
getHead();
|
||||
getWiFiNetworks();
|
||||
getParameter();
|
||||
</script>
|
||||
<nav class="navbar navbar-dark fixed-top bg-dark">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#"><span id="ssid"></span></a>"
|
||||
</div>
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<button type="button" onclick="location.href = '/'" class="btn btn-danger">Home</button>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<br><br><br>
|
||||
<main role="main" class="container">
|
||||
<h3>WiFi settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Home WiFi name (SSID):</label>
|
||||
<select class="form-control" id="ssid_STA">
|
||||
</select>
|
||||
<small class="form-text text-muted">Connect to existing network</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>WiFi password:</label>
|
||||
<input type="password" class="form-control" id="password_STA" value="-">
|
||||
</div>
|
||||
<br>
|
||||
<div class="form-group">
|
||||
<label>Access point WiFi name (SSID):</label>
|
||||
<input type="text" class="form-control" id="ssid_AP" value="-">
|
||||
<small class="form-text text-muted">If no network is present, a private network is created</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>WiFi password:</label>
|
||||
<input type="password" class="form-control" id="password_AP" value="-">
|
||||
<small class="form-text text-muted">At least 8 characters</small>
|
||||
</div>
|
||||
<br><br>
|
||||
<h3>CG scale settings</h3>
|
||||
<div class="form-group">
|
||||
<label>Number of load cells:</label>
|
||||
<select class="form-control" id="nLoadcells">
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Distance X1 [mm]:</label>
|
||||
<input type="text" class="form-control" id="distanceX1" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Distance X2 [mm]:</label>
|
||||
<input type="text" class="form-control" id="distanceX2" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Distance X3 [mm]:</label>
|
||||
<input type="text" class="form-control" id="distanceX3" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Reference weight [g]:</label>
|
||||
<input type="text" class="form-control" id="refWeight" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Reference CG [mm]:</label>
|
||||
<input type="text" class="form-control" id="refCG" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Calibration factor of load cell 1:</label>
|
||||
<input type="text" class="form-control" id="calFactorLoadcell1" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Calibration factor of load cell 2:</label>
|
||||
<input type="text" class="form-control" id="calFactorLoadcell2" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Calibration factor of load cell 3:</label>
|
||||
<input type="text" class="form-control" id="calFactorLoadcell3" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Value of resistor R1 [ohm]:</label>
|
||||
<input type="text" class="form-control" id="resistorR1" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Value of resistor R2 [ohm]:</label>
|
||||
<input type="text" class="form-control" id="resistorR2" value="-">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Voltage measurement:</label>
|
||||
<select class="form-control" id="enableBatVolt">
|
||||
<option value="ON">ON</option>
|
||||
<option value="OFF">OFF</option>
|
||||
</select>
|
||||
</div>
|
||||
<br><br>
|
||||
<button class="btn btn-success btn-lg" onclick="saveParameter()">save</button>
|
||||
<button class="btn btn-primary btn-lg" onclick="autoCalibrate()">auto calibrate</button>
|
||||
<button class="btn btn-danger btn-lg" onclick="resetDefault()">reset</button>
|
||||
<img src="CG_scale_mechanics.png" class="pull-left mr-4" alt="mechanics" style="width:100%">
|
||||
<font size="4">
|
||||
<div>
|
||||
<p><center>Lc1: <span id="lc1">-</span></center></p>
|
||||
</div>
|
||||
<div>
|
||||
<p><center>Lc2: <span id="lc2">-</span></center></p>
|
||||
</div>
|
||||
<div id="lc3_div">
|
||||
<p><center>Lc3: <span id="lc3">-</span></center></p>
|
||||
</div>
|
||||
</font>
|
||||
<br><br>
|
||||
<!--<p><font size="4"><center>Lc1: <span id="lc1">-</span> Lc2: <span id="lc2">-</span><div id="lc3_div"> Lc3: <span id="lc3">-</span></div></center></font></p>-->
|
||||
</main>
|
||||
<!--<div class="container"><font size="6"><span id="errMsg">-</span></font></div>-->
|
||||
<p><font size="2"><center>(c) 2019 M. Lehmann - Version: <span id="cgscaleVersion">0.0</span></center></font></p>
|
||||
</body>
|
||||
</html>
|
||||
@ -124,12 +124,16 @@ U8G2_SH1106_128X64_NONAME_1_HW_I2C oledDisplay(U8G2_R0, /* reset=*/ U8X8_PIN_NON
|
||||
|
||||
|
||||
|
||||
// **** Web server settings ****
|
||||
// **** Wifi settings ****
|
||||
|
||||
// Wifi works as an access point
|
||||
const char* ssid = "CG scale"; // wifi name
|
||||
const char* password = ""; // wifi password
|
||||
#define MAX_SSID_PW_LENGHT 32
|
||||
|
||||
// Station mode: connect to available network
|
||||
#define SSID_STA "myWiFi"
|
||||
#define PASSWORD_STA ""
|
||||
#define TIMEOUT_CONNECT 12000 //ms
|
||||
|
||||
// Access point mode: create own network
|
||||
#define SSID_AP "CG scale"
|
||||
#define PASSWORD_AP ""
|
||||
const char ip[4] = {1,1,1,1}; // default IP address
|
||||
|
||||
#define REFRESH_TIME 3 // [s], reload the main page
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user