Rough update to bootstrap 5 done

This commit is contained in:
Magnus Persson 2022-04-10 15:33:00 +02:00
parent 2e3820ca73
commit 635d788ba6
9 changed files with 1754 additions and 1696 deletions

View File

@ -5,74 +5,92 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/index.htm">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calibration.htm">Calibration</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><b>About</b></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbar"> <!-- START BODY -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calibration.htm">Calibration</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/about.htm">About</a>
</li>
</ul>
</div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="container"> <div class="accordion row-margin-10" id="accordion">
<hr class="my-4"> <div class="accordion-item">
<div class="row mb-3"> <h2 class="accordion-header" id="headingAbout">
<h3>Beer Gravity Monitor</h3> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAbout" aria-expanded="true" aria-controls="collapseAbout">
This is a piece of software for the iSpindle hardware and will work in a similar way. No part of this software is copied from the iSpindle project. <b>About</b>
</div> </button>
<div class="row mb-3"> </h2>
<h3>MIT License</h3> <div id="collapseAbout" class="accordion-collapse collapse show" aria-labelledby="headingAbout" data-bs-parent="#accordion">
<div class="accordion-body">
Permission is hereby granted, free of charge, to any person obtaining a copy <div class="row h3 col-sm-8">
of this software and associated documentation files (the "Software"), to deal Beer Gravity Monitor
in the Software without restriction, including without limitation the rights </div>
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell <div class="row col-sm-8 mb-3">
copies of the Software, and to permit persons to whom the Software is This is a piece of software for the iSpindle hardware and will work in a similar way. No part of this software is copied from the iSpindle project.
furnished to do so, subject to the following conditions: </div>
<div class="row h3 col-sm-8 mb-3">
The copyright notice and this permission notice shall be included in all MIT License
copies or substantial portions of the Software. </div>
<div class="row col-sm-8 mb-3">
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR Permission is hereby granted, free of charge, to any person obtaining a copy
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, of this software and associated documentation files (the "Software"), to deal
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE in the Software without restriction, including without limitation the rights
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, copies of the Software, and to permit persons to whom the Software is
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE furnished to do so, subject to the following conditions:
SOFTWARE.
The copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
</div>
</div>
</div>
</div>
</div>
</div> </div>
<hr class="my-4"> <!-- START FOOTER -->
</div>
<!-- START FOOTER --> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -5,379 +5,365 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/index.htm">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#"><b>Calibration</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.htm">About</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <!-- START BODY -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/calibration.htm">Calibration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.htm">About</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="container"> <script type="text/javascript">
function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<hr class="my-2"> function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> $("#alert-btn").click(function(e){
<div id="alert-msg">...</div> $('.alert').addClass('hide').removeClass('show').addClass('d-none');
<button type="button" id="alert-btn" class="close" aria-label="Close"> });
<span aria-hidden="true">&times;</span> </script>
</button>
</div>
<script type="text/javascript"> <div class="accordion" id="accordion">
function showError( msg ) { <div class="accordion-item">
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') <h2 class="accordion-header" id="headingFormula">
$('#alert-msg').text( msg ); <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormula" aria-expanded="true" aria-controls="collapseFormula">
} <b>Formula calculation</b>
function showSuccess( msg ) {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show')
$('#alert-msg').text( msg );
}
$("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show')
});
</script>
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseCalibration" aria-expanded="true" aria-controls="collapseCalibration">
Formula calculation
</button> </button>
</h2> </h2>
</div> <div id="collapseFormula" class="accordion-collapse collapse show" aria-labelledby="headingFormula" data-bs-parent="#accordion">
<div class="accordion-body">
<form action="/api/formula" method="post">
<input type="text" name="gravity-format" id="gravity-format" hidden>
<input type="text" name="id" id="id" hidden>
<div id="collapseCalibration" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion"> <div class="row mb-3">
<div class="card-body"> Here you can create your gravity formula by entering angles/tilt and the corresponding gravity. These values
<form action="/api/formula" method="post"> will be saved for future use. Angles with 0 (zero) will be skipped. The values below will be used to check the
<input type="text" name="gravity-format" id="gravity-format" hidden> formula and if the deviation is more than 1.5SG / 0.38P on any of the provided points then the forumla will be
<input type="text" name="id" id="id" hidden> rejected. On the bottom of the page you can see a graph over the entered values + values calcualated by the formula.
</div>
<div class="row mb-3"> <div class="row">
Here you can create your gravity formula by entering angles/tilt and the corresponding gravity. These values <label class="col-sm-1 col-form-label">#</label>
will be saved for future use. Angles with 0 (zero) will be skipped. The values below will be used to check the <label class="col-sm-4 col-form-label">Angle/Tilt</label>
formula and if the deviation is more than 1.5SG / 0.38P on any of the provided points then the forumla will be <label class="col-sm-4 col-form-label" id="gravity-header">Gravity</label>
rejected. On the bottom of the page you can see a graph over the entered values + values calcualated by the formula. </div>
</div>
<div class="form-group row"> <div class="row mb-3">
<label class="col-sm-2 col-form-label">#:</label> <label for="angle1" class="col-sm-1 col-form-label">1.</label>
<label class="col-sm-4 col-form-label">Angle/Tilt:</label> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1"></div>
<label class="col-sm-4 col-form-label" id="gravity-header">Gravity (SG):</label> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g1" id="g1"></div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle1" class="col-sm-2 col-form-label">1.</label> <label for="angle2" class="col-sm-1 col-form-label">2.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a1" id="a1"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g2" id="g2"></div>
</div> </div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g1" id="g1">
</div>
</div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle2" class="col-sm-2 col-form-label">2.</label> <label for="angle3" class="col-sm-1 col-form-label">3.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a2" id="a2"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g3" id="g3"></div>
</div> </div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g2" id="g2">
</div>
</div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle3" class="col-sm-2 col-form-label">3.</label> <label for="angle4" class="col-sm-1 col-form-label">4.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a3" id="a3"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g4" id="g4"></div>
</div> </div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g3" id="g3">
</div>
</div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle4" class="col-sm-2 col-form-label">4.</label> <label for="angle5" class="col-sm-1 col-form-label">5.</label>
<div class="col-sm-4"> <div class="col-sm-4"><input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5"></div>
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a4" id="a4"> <div class="col-sm-4"><input type="number" min="0" max="26" step="0.0001" class="form-control" name="g5" id="g5"></div>
</div> </div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g4" id="g4">
</div>
</div>
<div class="form-group row"> <div class="row mb-3">
<label for="angle5" class="col-sm-2 col-form-label">5.</label> <div class="col-sm-8 offset-sm-1"><button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button></div>
<div class="col-sm-4">
<input type="number" min="0" max="90" step="0.001" class="form-control" name="a5" id="a5">
</div> </div>
<div class="col-sm-4">
<input type="number" min="0" max="26" step="0.0001" class="form-control" name="g5" id="g5">
</div>
</div>
<div class="form-group row"> <hr class="my-2">
<div class="col-sm-8 offset-sm-0">
<button type="submit" class="btn btn-primary" id="calculate-btn">Save & Calculate</button>
</div>
</div>
<div class="form-group row"> <div class="row">
<label for="calculate-btn" class="col-sm-2 col-form-label">Current angle: </label> <label for="calculate-btn" class="col-sm-2 col-form-label">Current angle: </label>
<label for="calculate-btn" class="col-sm-2 col-form-label" id="angle"></label> <label for="calculate-btn" class="col-sm-2 col-form-label" id="angle"></label>
</div> </div>
<div class="form-group row"> <div class="row">
<label for="calculate-btn" class="col-sm-2 col-form-label">Formula: </label> <label for="calculate-btn" class="col-sm-2 col-form-label">Formula: </label>
<label for="calculate-btn" class="col-sm-8 col-form-label" id="formula">Loading...</label> <label for="calculate-btn" class="col-sm-8 col-form-label" id="formula">Loading...</label>
</div> </div>
</form> </form>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingGraph">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGraph" aria-expanded="false" aria-controls="collapseGraph">
<b>Formula graph</b>
</button>
</h2>
<div id="collapseGraph" class="accordion-collapse collapse" aria-labelledby="headingGraph" data-bs-parent="#accordion">
<div class="accordion-body">
<canvas id="gravityChart"></canvas>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr class="my-4">
<div>
<canvas id="gravityChart"></canvas>
</div>
<hr class="my-4">
</div>
<script type="text/javascript"> <script type="text/javascript">
var chartDataForm = []; var chartDataForm = [];
var chartDataCalc = []; var chartDataCalc = [];
const dataSetChart = { const dataSetChart = {
datasets: [{ datasets: [{
label: 'Raw data', label: 'Raw data',
borderColor: 'blue', borderColor: 'blue',
backgroundColor: 'blue', backgroundColor: 'blue',
data: chartDataForm data: chartDataForm
}, { }, {
label: 'Calculated', label: 'Calculated',
borderColor: 'green', borderColor: 'green',
backgroundColor: 'green', backgroundColor: 'green',
data: chartDataCalc data: chartDataCalc
}] }]
} }
const configChart = { const configChart = {
type: 'line', type: 'line',
data: dataSetChart, data: dataSetChart,
options: { options: {
responsive: true, responsive: true,
interaction: { interaction: {
intersect: false, intersect: false,
},
scales: {
x: {
display: true,
type: 'linear',
grace: '5%',
title: {
display: true,
text: 'Angle/Tilt'
},
ticks: {
crossAlign: 'far'
},
suggestedMin: 25
}, },
y: { scales: {
display: true, x: {
title: {
display: true, display: true,
text: 'Gravity' type: 'linear',
grace: '5%',
title: {
display: true,
text: 'Angle/Tilt'
},
ticks: {
crossAlign: 'far'
},
suggestedMin: 25
}, },
suggestedMin: 1.000 y: {
display: true,
title: {
display: true,
text: 'Gravity'
},
suggestedMin: 1.000
}
} }
} }
} };
};
var myChart = 0; var myChart = 0;
</script> </script>
<script type="text/javascript"> <script type="text/javascript">
g1.onchange = setGravityDecimal g1.onchange = setGravityDecimal
g2.onchange = setGravityDecimal g2.onchange = setGravityDecimal
g3.onchange = setGravityDecimal g3.onchange = setGravityDecimal
g4.onchange = setGravityDecimal g4.onchange = setGravityDecimal
g5.onchange = setGravityDecimal g5.onchange = setGravityDecimal
a1.onchange = setAngleDecimal a1.onchange = setAngleDecimal
a2.onchange = setAngleDecimal a2.onchange = setAngleDecimal
a3.onchange = setAngleDecimal a3.onchange = setAngleDecimal
a4.onchange = setAngleDecimal a4.onchange = setAngleDecimal
a5.onchange = setAngleDecimal a5.onchange = setAngleDecimal
window.onload = getConfig; window.onload = getConfig;
setButtonDisabled( true );
function convertToPlato(sg) {
return 259-(259/sg);
}
function convertToSG(plato) {
return 259/(259-plato);
}
function setAngleDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
populateChart();
}
function setGravityDecimal(event) {
if(isPlato())
this.value = parseFloat(this.value).toFixed(1);
else
this.value = parseFloat(this.value).toFixed(4);
populateChart();
}
function populateChartForm(a, g) {
if( a != 0)
chartDataForm.push( { x: parseFloat(a), y: parseFloat(g) });
chartDataForm.sort(function (a, b) {
return a.x - b.x;
});
}
function populateChartCalc(a, g) {
chartDataCalc.push( { x: parseFloat(a), y: parseFloat(g) });
}
function isPlato() {
return $("#gravity-format").text() == "P";
}
function populateChart() {
chartDataCalc.length = 0
for( i = 25.0; i<80.0; i+=5.0) {
var formula = $("#formula").text();
var angle = i.toString();
formula=formula.replaceAll( "tilt^3", angle+"*"+angle+"*"+angle );
formula=formula.replaceAll( "tilt^2", angle+"*"+angle );
formula=formula.replaceAll( "tilt", angle );
var g = eval( formula );
if(isPlato())
g = convertToPlato(g);
populateChartCalc( i, g );
}
chartDataForm.length = 0
populateChartForm( $("#a1").val(), $("#g1").val() );
populateChartForm( $("#a2").val(), $("#g2").val() );
populateChartForm( $("#a3").val(), $("#g3").val() );
populateChartForm( $("#a4").val(), $("#g4").val() );
populateChartForm( $("#a5").val(), $("#g5").val() );
if( myChart )
myChart.destroy();
myChart = new Chart(
document.getElementById('gravityChart'),
configChart
);
}
function setButtonDisabled( b ) {
$("#calculate-btn").prop("disabled", b);
}
// Get the configuration values from the API
function getConfig() {
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/formula"; function convertToPlato(sg) {
//var url = "/test/formula.json"; return 259-(259/sg);
$('#spinner').show(); }
$.getJSON(url, function (cfg) {
console.log( cfg );
$("#id").val(cfg["id"]);
$("#angle").text(cfg["angle"]);
$("#formula").text(cfg["gravity-formula"]);
$("#gravity-format").text(cfg["gravity-format"]); // Sets the variable used by isPlato()
if(isPlato()) { function convertToSG(plato) {
$("#gravity-header").text("Gravity (Plato):"); return 259/(259-plato);
$("#g1").val( parseFloat(cfg["g1"]).toFixed(1) ); }
$("#g2").val( parseFloat(cfg["g2"]).toFixed(1) );
$("#g3").val( parseFloat(cfg["g3"]).toFixed(1) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(1) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(1) );
} else {
$("#gravity-header").text("Gravity (SG):");
$("#g1").val( parseFloat(cfg["g1"]).toFixed(4) );
$("#g2").val( parseFloat(cfg["g2"]).toFixed(4) );
$("#g3").val( parseFloat(cfg["g3"]).toFixed(4) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(4) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(4) );
}
$("#a1").val( parseFloat(cfg["a1"]).toFixed(2) ); function setAngleDecimal(event) {
$("#a2").val( parseFloat(cfg["a2"]).toFixed(2) ); this.value = parseFloat(this.value).toFixed(2);
$("#a3").val( parseFloat(cfg["a3"]).toFixed(2) ); populateChart();
$("#a4").val( parseFloat(cfg["a4"]).toFixed(2) ); }
$("#a5").val( parseFloat(cfg["a5"]).toFixed(2) );
if( cfg["error"]!="" ) { function setGravityDecimal(event) {
showError(cfg["error"]); if(isPlato())
} this.value = parseFloat(this.value).toFixed(1);
else
this.value = parseFloat(this.value).toFixed(4);
populateChart(); populateChart();
}) }
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
setButtonDisabled( false );
});
}
</script>
<!-- START FOOTER --> function populateChartForm(a, g) {
if( a != 0)
chartDataForm.push( { x: parseFloat(a), y: parseFloat(g) });
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> chartDataForm.sort(function (a, b) {
return a.x - b.x;
});
}
function populateChartCalc(a, g) {
chartDataCalc.push( { x: parseFloat(a), y: parseFloat(g) });
}
function isPlato() {
return $("#gravity-format").text() == "P";
}
function populateChart() {
chartDataCalc.length = 0
for( i = 25.0; i<80.0; i+=5.0) {
var formula = $("#formula").text();
var angle = i.toString();
formula=formula.replaceAll( "tilt^3", angle+"*"+angle+"*"+angle );
formula=formula.replaceAll( "tilt^2", angle+"*"+angle );
formula=formula.replaceAll( "tilt", angle );
var g = eval( formula );
if(isPlato())
g = convertToPlato(g);
populateChartCalc( i, g );
}
chartDataForm.length = 0
populateChartForm( $("#a1").val(), $("#g1").val() );
populateChartForm( $("#a2").val(), $("#g2").val() );
populateChartForm( $("#a3").val(), $("#g3").val() );
populateChartForm( $("#a4").val(), $("#g4").val() );
populateChartForm( $("#a5").val(), $("#g5").val() );
if( myChart )
myChart.destroy();
myChart = new Chart(
document.getElementById('gravityChart'),
configChart
);
}
function setButtonDisabled( b ) {
$("#calculate-btn").prop("disabled", b);
}
// Get the configuration values from the API
function getConfig() {
setButtonDisabled( true );
var url = "/api/formula";
var url = "/test/formula.json";
showError(url);
//showSuccess(url);
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
$("#id").val(cfg["id"]);
$("#angle").text(cfg["angle"]);
$("#formula").text(cfg["gravity-formula"]);
$("#gravity-format").text(cfg["gravity-format"]); // Sets the variable used by isPlato()
if(isPlato()) {
$("#gravity-header").text("Gravity (Plato):");
$("#g1").val( parseFloat(cfg["g1"]).toFixed(1) );
$("#g2").val( parseFloat(cfg["g2"]).toFixed(1) );
$("#g3").val( parseFloat(cfg["g3"]).toFixed(1) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(1) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(1) );
} else {
$("#gravity-header").text("Gravity (SG):");
$("#g1").val( parseFloat(cfg["g1"]).toFixed(4) );
$("#g2").val( parseFloat(cfg["g2"]).toFixed(4) );
$("#g3").val( parseFloat(cfg["g3"]).toFixed(4) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(4) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(4) );
}
$("#a1").val( parseFloat(cfg["a1"]).toFixed(2) );
$("#a2").val( parseFloat(cfg["a2"]).toFixed(2) );
$("#a3").val( parseFloat(cfg["a3"]).toFixed(2) );
$("#a4").val( parseFloat(cfg["a4"]).toFixed(2) );
$("#a5").val( parseFloat(cfg["a5"]).toFixed(2) );
if( cfg["error"]!="" ) {
showError(cfg["error"]);
}
populateChart();
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
setButtonDisabled( false );
});
}
</script>
<!-- START FOOTER -->
<div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff

View File

@ -5,184 +5,191 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/firmware.htm">Beer Gravity Monitor - Firmware upgrade</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbar"> <!-- START MAIN INDEX -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="container"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<hr class="my-4"> <script type="text/javascript">
function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> function showSuccess( msg ) {
<div id="alert-msg">...</div> $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
<button type="button" id="alert-btn" class="close" aria-label="Close"> $('#alert').text( msg );
<span aria-hidden="true">&times;</span> }
</button>
</div>
<script type="text/javascript"> $("#alert-btn").click(function(e){
function showError( msg ) { $('.alert').addClass('hide').removeClass('show').addClass('d-none');
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show') });
$('#alert-msg').text( msg ); </script>
}
function showSuccess( msg ) { <div class="accordion" id="accordion">
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') <div class="accordion-item">
$('#alert-msg').text( msg ); <h2 class="accordion-header" id="headingFirmware">
} <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFirmware" aria-expanded="true" aria-controls="collapseFirmware">
<b>Upload firmware</b>
</button>
</h2>
<div id="collapseFirmware" class="accordion-collapse collapse show" aria-labelledby="headingFirmware" data-bs-parent="#accordion">
<div class="accordion-body">
$("#alert-btn").click(function(e){ <div class="row mb-3">
$('.alert').addClass('d-none').removeClass('show') <div class="col-md-12 themed-grid-col bg-light">Here you can upload a new firmware version, it will not check the version number so you can also downgrade the firmware here.
}); </div>
</script> </div>
<div class="row mb-3"> <div class="row mb-3">
<div class="col-md-12 themed-grid-col bg-light">Here you can upload a new firmware version, it will not check the version number so you can also downgrade the firmware here. <div class="col-md-2 themed-grid-col bg-light">Current version:</div>
<div class="col-md-10 themed-grid-col bg-light" id="app-ver">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">Platform:</div>
<div class="col-md-10 themed-grid-col bg-light" id="platform">Loading...</div>
</div>
<form id="uploadForm" enctype="multipart/form-data">
<div class="row mb-3">
<div class="col-md-8 custom-file">
<input type="file" accept=".bin" class="custom-file-input" name="name" id="name" onchange="checkName()">
</div>
</div>
<div class="row mb-3">
<div class="col-md-2">
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button>
</div>
</div>
</form>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="row mb-3"> <script type="text/javascript">
<div class="col-md-8 themed-grid-col bg-light">Current version:</div> window.onload = getStatus;
<div class="col-md-4 themed-grid-col bg-light" id="app-ver">Loading...</div>
</div> $(document).ready(function() {
<div class="row mb-3"> $("#uploadForm").on('submit', function(e) {
<div class="col-md-8 themed-grid-col bg-light">Platform:</div> e.preventDefault();
<div class="col-md-4 themed-grid-col bg-light" id="platform">Loading...</div> $.ajax( {
</div> xhr: function() {
var xhr = new window.XMLHttpRequest();
<div class="row mb-3"> xhr.upload.addEventListener("progress", function(evt) {
<!-- if (evt.lengthComputable) {
<form action="/api/upload" method="post" enctype="multipart/form-data"> progressHandler(evt);
<div class="col-md-8 custom-file"> }
<input type="file" accept=".bin" class="custom-file-input" name="name" id="name"> }, false);
<label class="custom-file-label" for="name">Choose file</label> return xhr;
</div> },
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button> type: 'POST',
</form> url: '/api/upload',
--> data: new FormData(this),
<form id="uploadForm" enctype="multipart/form-data"> contentType: false,
<div class="col-md-8 custom-file"> cache: false,
<input type="file" accept=".bin" class="custom-file-input" name="name" id="name" onchange="checkName()"> processData:false,
<label class="custom-file-label" for="name">Choose file</label> beforeSend: function() {
</div> setProgress(0);
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Flash firmware</button> },
</form> error:function() {
</div> showError("Upload failed");
},
<div class="progress"> success: function(resp) {
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> showSuccess("Upload completed, device is restarting. Waiting 10 seconds to refresh browser.");
</div> setTimeout(() => {
window.location = "/";
<hr class="my-4"> }, 10000);
</div> }
});
<script type="text/javascript">
window.onload = getStatus;
$(document).ready(function() {
$("#uploadForm").on('submit', function(e) {
e.preventDefault();
$.ajax( {
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
progressHandler(evt);
}
}, false);
return xhr;
},
type: 'POST',
url: '/api/upload',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function() {
setProgress(0);
},
error:function() {
showError("Upload failed");
},
success: function(resp) {
showSuccess("Upload completed, device is restarting. Waiting 10 seconds to refresh browser.");
setTimeout(() => {
window.location = "/";
}, 10000);
}
}); });
}); });
});
function checkName() { function checkName() {
setButtonDisabled( $("#name").val()!="" ? false : true ); setButtonDisabled( $("#name").val()!="" ? false : true );
} }
function progressHandler(event) { function progressHandler(event) {
var percent = (event.loaded / event.total) * 100; var percent = (event.loaded / event.total) * 100;
setProgress(Math.round(percent)); setProgress(Math.round(percent));
} }
function setProgress(val) { function setProgress(val) {
$('.progress-bar').css('width', val+'%').attr('aria-valuenow', val).text(val + "%"); $('.progress-bar').css('width', val+'%').attr('aria-valuenow', val).text(val + "%");
} }
function setButtonDisabled( b ) { function setButtonDisabled( b ) {
$("#upload-btn").prop("disabled", b); $("#upload-btn").prop("disabled", b);
} }
function getStatus() { function getStatus() {
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/status"; var url = "/api/status";
//var url = "/test/status.json"; var url = "/test/status.json";
$('#spinner').show(); $('#spinner').show();
$.getJSON(url, function (cfg) { $.getJSON(url, function (cfg) {
console.log( cfg ); console.log( cfg );
$("#app-ver").text(cfg["app-ver"]); $("#app-ver").text(cfg["app-ver"]);
$("#platform").text(cfg["platform"]); $("#platform").text(cfg["platform"]);
}) })
.fail(function () { .fail(function () {
showError('Unable to get data from the device.'); showError('Unable to get data from the device.');
}) })
.always(function() { .always(function() {
$('#spinner').hide(); $('#spinner').hide();
}); });
} }
function start() { function start() {
setInterval(getStatus, 3000); setInterval(getStatus, 3000);
} }
</script> </script>
<!-- START FOOTER --> <!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -5,264 +5,262 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <!-- START MAIN INDEX -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="container"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<hr class="my-2"> <script type="text/javascript">
function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> function showSuccess( msg ) {
<div id="alert-msg">...</div> $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
<button type="button" id="alert-btn" class="close" aria-label="Close"> $('#alert').text( msg );
<span aria-hidden="true">&times;</span> }
</button>
</div>
<script type="text/javascript"> $("#alert-btn").click(function(e){
function showError( msg ) { $('.alert').addClass('hide').removeClass('show').addClass('d-none');
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show'); });
$('#alert-msg').text( msg ); </script>
}
function showSuccess( msg ) { <div class="accordion" id="accordion">
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show'); <div class="accordion-item">
$('#alert-msg').text( msg ); <h2 class="accordion-header" id="headingFormat">
} <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFormat" aria-expanded="true" aria-controls="collapseFormat">
<b>Push Format Templates</b>
$("#alert-btn").click(function(e){
$('#alert').addClass('d-none').removeClass('show');
});
</script>
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="headingFormat">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseFormat" aria-expanded="true" aria-controls="collapseFormat">
Push Format Templates
</button> </button>
</h2> </h2>
</div> <div id="collapseFormat" class="accordion-collapse collapse show" aria-labelledby="headingFormat" data-bs-parent="#accordion">
<div id="collapseFormat" class="collapse show" aria-labelledby="headingFormat" data-parent="#accordion"> <div class="accordion-body">
<div class="card-body">
<input type="text" name="id" id="id" hidden> <input type="text" name="id" id="id" hidden>
<input type="text" name="http-1" id="http-1" hidden> <input type="text" name="http-1" id="http-1" hidden>
<input type="text" name="http-2" id="http-2" hidden> <input type="text" name="http-2" id="http-2" hidden>
<input type="text" name="http-3" id="http-3" hidden> <input type="text" name="http-3" id="http-3" hidden>
<!--<input type="text" name="brewfather" id="brewfather" hidden>-->
<input type="text" name="influxdb" id="influxdb" hidden> <input type="text" name="influxdb" id="influxdb" hidden>
<input type="text" name="mqtt" id="mqtt" hidden> <input type="text" name="mqtt" id="mqtt" hidden>
<div class="form-group row"> <div class="row mb-3">
<label for="push-target" class="col-sm-2 col-form-label">Push target:</label> <label for="push-target" class="col-sm-2 col-form-label">Push target:</label>
<select class="custom-select col-sm-4" required name="push-target" id="push-target"> <select class="custom-select col-sm-4" required name="push-target" id="push-target">
<option value="http-1">HTTP option 1 (post)</option> <option value="http-1">HTTP option 1 (post)</option>
<option value="http-2">HTTP option 2 (post)</option> <option value="http-2">HTTP option 2 (post)</option>
<option value="http-3">HTTP option 3 (get)</option> <option value="http-3">HTTP option 3 (get)</option>
<!--<option value="brewfather">Brewfather</option>-->
<option value="influxdb">Influx DB</option> <option value="influxdb">Influx DB</option>
<option value="mqtt">MQTT</option> <option value="mqtt">MQTT</option>
</select> </select>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-12"> <div class="col-sm-12">
<textarea rows="5" class="form-control" name="format" id="format"> <textarea rows="5" class="form-control" name="format" id="format">
</textarea> </textarea>
</div> </div>
</div> </div>
<div class="form-group row"> <div class="row mb-3">
<div class="col-sm-8 offset-sm-2"> <div class="col-sm-8 offset-sm-2">
<button class="btn btn-primary" id="format-btn">Save</button> <button class="btn btn-primary" id="format-btn">Save</button>
<button class="btn btn-secondary" id="test-btn">Test</button> <button class="btn btn-secondary" id="test-btn">Test</button>
</div> </div>
</div> </div>
<hr class="my-2">
<pre class="card-preview" id="preview" name="preview"></pre> <pre class="card-preview" id="preview" name="preview"></pre>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<hr class="my-4"> <script type="text/javascript">
</div> window.onload = getConfig;
<script type="text/javascript">
window.onload = getConfig;
setButtonDisabled( true );
// Opens the targetet according (if URL has #collapseOne to #collapseFour)
$(document).ready(function () {
if(location.hash != null && location.hash != ""){
$('.collapse').removeClass('in');
$(location.hash + '.collapse').collapse('show');
}
});
$("#push-target").change(function(e){
console.log(e)
selectFormat();
});
// Store the format
$("#format-btn").click(function(e) {
var s = $("#format").val();
s = s.replaceAll("\n", "");
var obj = 'id=' + $("#id").val() + '&' + $("#push-target").val() + '=' + encodeURIComponent(s);
console.log(obj);
$.ajax( {
type: "POST",
url: "/api/config/format",
data: obj,
success: function(result) { showSuccess('Format stored successfully.'); getConfig(); },
error: function(result) { showError('Unable to store format.'); }
} );
});
// Test the calibration
$("#test-btn").click(function(e) {
var url = "/api/status";
//var url = "/test/status.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
var doc = $("#format").val();
if (cfg["temp-format"]=="C")
doc = doc.replaceAll("${temp}", cfg["temp-c"]);
else
doc = doc.replaceAll("${temp}", cfg["temp-f"]);
if (cfg["gravity-format"]=="G") {
var sg = cfg["gravity"];
doc = doc.replaceAll("${gravity-sg}", sg);
doc = doc.replaceAll("${corr-gravity-sg}", sg);
var plato = 259 - (259 - sg);
doc = doc.replaceAll("${gravity-plato}", plato);
doc = doc.replaceAll("${corr-gravity-plato}", plato);
}
else {
var plato = cfg["gravity"];
doc = doc.replaceAll("${gravity-plato}", plato);
doc = doc.replaceAll("${corr-gravity-plato}", plato);
var sg = 259 / (259 - plato);
doc = doc.replaceAll("${gravity-sg}", sg);
doc = doc.replaceAll("${corr-gravity-sg}", sg);
}
doc = doc.replaceAll("${mdns}", cfg["mdns"]);
doc = doc.replaceAll("${id}", cfg["id"]);
doc = doc.replaceAll("${sleep-interval}", cfg["sleep-interval"]);
doc = doc.replaceAll("${token}", cfg["token"]);
doc = doc.replaceAll("${token2}", cfg["token2"]);
doc = doc.replaceAll("${temp-c}", cfg["temp-c"]);
doc = doc.replaceAll("${temp-f}", cfg["temp-f"]);
doc = doc.replaceAll("${temp-unit}", cfg["temp-format"]);
doc = doc.replaceAll("${battery}", cfg["battery"]);
doc = doc.replaceAll("${rssi}", cfg["rssi"]);
doc = doc.replaceAll("${run-time}", cfg["runtime-average"]);
doc = doc.replaceAll("${gravity}", cfg["gravity"]);
doc = doc.replaceAll("${gravity-unit}", cfg["gravity-format"]);
doc = doc.replaceAll("${corr-gravity}", cfg["gravity"]);
doc = doc.replaceAll("${angle}", cfg["angle"]);
doc = doc.replaceAll("${tilt}", cfg["angle"]);
// Format in a readable json string.
try {
var json = JSON.parse(doc);
doc = JSON.stringify(json, null, 2);
} catch(e) {
console.log("Not a javascript object!")
}
$("#preview").text(doc);
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
});
function setButtonDisabled( b ) {
$("#format-btn").prop("disabled", b);
$("#test-btn").prop("disabled", b);
}
function selectFormat() {
var s = "#" + $("#push-target").val()
console.log(s);
s = decodeURIComponent($(s).val());
console.log(s);
s = s.replaceAll("|", "|\n");
console.log(s);
$("#format").val(s);
$("#preview").text("");
}
// Get the configuration values from the API
function getConfig() {
setButtonDisabled( true ); setButtonDisabled( true );
var url = "/api/config/format"; // Opens the targetet according (if URL has #collapseOne to #collapseFour)
//var url = "/test/format.json"; $(document).ready(function () {
$('#spinner').show(); if(location.hash != null && location.hash != ""){
$.getJSON(url, function (cfg) { $('.collapse').removeClass('in');
console.log( cfg ); $(location.hash + '.collapse').collapse('show');
$("#id").val(cfg["id"]); }
$("#http-1").val(cfg["http-1"]);
$("#http-2").val(cfg["http-2"]);
$("#http-3").val(cfg["http-3"]);
//$("#brewfather").val(cfg["brewfather"]);
$("#influxdb").val(cfg["influxdb"]);
$("#mqtt").val(cfg["mqtt"]);
selectFormat();
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
setButtonDisabled( false );
}); });
}
</script>
<!-- START FOOTER --> $("#push-target").change(function(e){
console.log(e)
selectFormat();
});
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div> // Store the format
$("#format-btn").click(function(e) {
var s = $("#format").val();
s = s.replaceAll("\n", "");
var obj = 'id=' + $("#id").val() + '&' + $("#push-target").val() + '=' + encodeURIComponent(s);
console.log(obj);
$.ajax( {
type: "POST",
url: "/api/config/format",
data: obj,
success: function(result) { showSuccess('Format stored successfully.'); getConfig(); },
error: function(result) { showError('Unable to store format.'); }
} );
});
// Test the calibration
$("#test-btn").click(function(e) {
var url = "/api/status";
//var url = "/test/status.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
var doc = $("#format").val();
if (cfg["temp-format"]=="C")
doc = doc.replaceAll("${temp}", cfg["temp-c"]);
else
doc = doc.replaceAll("${temp}", cfg["temp-f"]);
if (cfg["gravity-format"]=="G") {
var sg = cfg["gravity"];
doc = doc.replaceAll("${gravity-sg}", sg);
doc = doc.replaceAll("${corr-gravity-sg}", sg);
var plato = 259 - (259 - sg);
doc = doc.replaceAll("${gravity-plato}", plato);
doc = doc.replaceAll("${corr-gravity-plato}", plato);
}
else {
var plato = cfg["gravity"];
doc = doc.replaceAll("${gravity-plato}", plato);
doc = doc.replaceAll("${corr-gravity-plato}", plato);
var sg = 259 / (259 - plato);
doc = doc.replaceAll("${gravity-sg}", sg);
doc = doc.replaceAll("${corr-gravity-sg}", sg);
}
doc = doc.replaceAll("${mdns}", cfg["mdns"]);
doc = doc.replaceAll("${id}", cfg["id"]);
doc = doc.replaceAll("${sleep-interval}", cfg["sleep-interval"]);
doc = doc.replaceAll("${token}", cfg["token"]);
doc = doc.replaceAll("${token2}", cfg["token2"]);
doc = doc.replaceAll("${temp-c}", cfg["temp-c"]);
doc = doc.replaceAll("${temp-f}", cfg["temp-f"]);
doc = doc.replaceAll("${temp-unit}", cfg["temp-format"]);
doc = doc.replaceAll("${battery}", cfg["battery"]);
doc = doc.replaceAll("${rssi}", cfg["rssi"]);
doc = doc.replaceAll("${run-time}", cfg["runtime-average"]);
doc = doc.replaceAll("${gravity}", cfg["gravity"]);
doc = doc.replaceAll("${gravity-unit}", cfg["gravity-format"]);
doc = doc.replaceAll("${corr-gravity}", cfg["gravity"]);
doc = doc.replaceAll("${angle}", cfg["angle"]);
doc = doc.replaceAll("${tilt}", cfg["angle"]);
// Format in a readable json string.
try {
var json = JSON.parse(doc);
doc = JSON.stringify(json, null, 2);
} catch(e) {
console.log("Not a javascript object!")
}
$("#preview").text(doc);
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
});
function setButtonDisabled( b ) {
$("#format-btn").prop("disabled", b);
$("#test-btn").prop("disabled", b);
}
function selectFormat() {
var s = "#" + $("#push-target").val()
console.log(s);
s = decodeURIComponent($(s).val());
console.log(s);
s = s.replaceAll("|", "|\n");
console.log(s);
$("#format").val(s);
$("#preview").text("");
}
// Get the configuration values from the API
function getConfig() {
setButtonDisabled( true );
var url = "/api/config/format";
var url = "/test/format.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
$("#id").val(cfg["id"]);
$("#http-1").val(cfg["http-1"]);
$("#http-2").val(cfg["http-2"]);
$("#http-3").val(cfg["http-3"]);
//$("#brewfather").val(cfg["brewfather"]);
$("#influxdb").val(cfg["influxdb"]);
$("#mqtt").val(cfg["mqtt"]);
selectFormat();
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
setButtonDisabled( false );
});
}
</script>
<!-- START FOOTER -->
<div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -5,237 +5,261 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#"><b>Home</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calibration.htm">Calibration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.htm">About</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbar"> <!-- START MAIN INDEX -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/index.htm">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/config.htm">Configuration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/calibration.htm">Calibration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about.htm">About</a>
</li>
</ul>
<div class="spinner-border text-light" id="spinner" role="status"></div> <div class="container row-margin-10">
</div>
</nav>
<!-- START MAIN INDEX --> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<div class="container"> <script type="text/javascript">
function showError( msg ) {
console.log("Error:" + msg);
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<hr class="my-4"> function showSuccess( msg ) {
console.log("Success:" + msg);
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> $("#alert-btn").click(function(e){
<div id="alert-msg">...</div> console.log("Disable");
<button type="button" id="alert-btn" class="close" aria-label="Close"> $('.alert').addClass('hide').removeClass('show').addClass('d-none');
<span aria-hidden="true">&times;</span> });
</button> </script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingSoftware">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSoftware" aria-expanded="true" aria-controls="collapseSoftware">
<b>Device</b>
</button>
</h2>
<div id="collapseSoftware" class="accordion-collapse collapse show" aria-labelledby="headingSoftware" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3">
<div class="col-md-4 bg-light">Current version:</div>
<div class="col-md-4 bg-light" id="app-ver">Loading...</div>
</div>
<div class="row mb-3" id="h-app-ver-new" hidden>
<div class="col-md-4 bg-light">New version:</div>
<div class="col-md-4 bg-light" id="app-ver-new">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Host name:</div>
<div class="col-md-4 bg-light" id="mdns">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Device ID:</div>
<div class="col-md-4 bg-light" id="id">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Platform:</div>
<div class="col-md-4 bg-light" id="platform">Loading...</div>
</div>
<script>
$("#log-btn").click(function(e){
loadLog();
});
setInterval(function() {
loadLog();
}, 3000); //5 seconds
function loadLog() {
//$("#logContent").load("/log");
$("#logContent").load("/test/status.json");
};
</script>
<button class="btn btn-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLog" aria-expanded="false" aria-controls="collapseLog">
View error log
</button>
<div class="collapse row-margin-10" id="collapseLog">
<div class="card card-body">
<pre><code class="card-text" id="logContent"></code></pre>
</div>
</div>
</div>
</div>
</div>
<h2 class="accordion-header" id="headingData">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseData" aria-expanded="true" aria-controls="collapseData">
<b>Measurement</b>
</button>
</h2>
<div id="collapseData" class="accordion-collapse collapse show" aria-labelledby="headingData" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3">
<div class="col-md-4 bg-light">Gravity:</div>
<div class="col-md-4 bg-light" id="gravity">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Temperature:</div>
<div class="col-md-4 bg-light" id="temp">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Angle/Tilt:</div>
<div class="col-md-4 bg-light" id="angle">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Battery:</div>
<div class="col-md-4 bg-light" id="battery">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-4 bg-light">Average runtime:</div>
<div class="col-md-4 bg-light" id="runtime">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 bg-light custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="sleep-mode" id="sleep-mode" disabled>
<label class="custom-control-label" for="sleep-mode">Do not enter sleep mode when floating (check this if you are collecting angles/tilt for calibration).</label>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { window.onload = start;
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
$('#alert-msg').text( msg ); $("#sleep-mode").click(function(e){
console.log( "Blocking sleep mode = " + $("#sleep-mode").is(":checked"));
$.ajax( {
type: "POST",
url: "/api/status/sleepmode",
data: { "id": $("#id").text(), "sleep-mode": $("#sleep-mode").is(":checked") },
success: function(result) { },
error: function(result) { showError('Could not update sleep mode for device.'); },
} );
});
function getStatus() {
var url = "/api/status";
var url = "/test/status.json";
showError(url);
//showSuccess(url);
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
$("#app-ver").text(cfg["app-ver"] + " (" + cfg["app-build"] + ")");
$("#mdns").text(cfg["mdns"]);
$("#id").text(cfg["id"]);
$("#platform").text(cfg["platform"]);
$("#runtime").text(cfg["runtime-average"] + " seconds");
var angle = cfg["angle"];
if(angle==0) {
$("#angle").text("Gyro moving");
$("#gravity").text("Gyro moving");
} else {
$("#angle").text(cfg["angle"]);
if( cfg["gravity-format"] == "G")
$("#gravity").text(cfg["gravity"] + " SG");
else
$("#gravity").text(cfg["gravity"] + " °P");
}
var batt = cfg["battery"];
var charge = 0;
if(batt>4.15) charge = 100;
else if(batt>4.05) charge = 90;
else if(batt>3.97) charge = 80;
else if(batt>3.91) charge = 70;
else if(batt>3.86) charge = 60;
else if(batt>3.81) charge = 50;
else if(batt>3.78) charge = 40;
else if(batt>3.76) charge = 30;
else if(batt>3.73) charge = 20;
else if(batt>3.67) charge = 10;
else if(batt>3.44) charge = 5;
$("#battery").text(batt + " V (" + charge + "%)" );
if( cfg["temp-format"] == "C")
$("#temp").text(cfg["temp-c"] + " C");
else
$("#temp").text(cfg["temp-f"] + " F");
if( cfg["sleep-mode"] )
$("#sleep-mode").attr("checked", true );
else
$("#sleep-mode").attr("checked", false );
$("#sleep-mode").removeAttr("disabled");
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
} }
function showSuccess( msg ) { function start() {
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') setInterval(getStatus, 3000);
$('#alert-msg').text( msg );
} }
$("#alert-btn").click(function(e){
$('.alert').addClass('d-none').removeClass('show')
});
</script> </script>
<div class="row mb-3"> <!-- START FOOTER -->
<div class="col-md-8 themed-grid-col bg-light">Current version:</div>
<div class="col-md-4 themed-grid-col bg-light" id="app-ver">Loading...</div>
</div>
<div class="row mb-3" id="h-app-ver-new" hidden>
<div class="col-md-8 themed-grid-col bg-light">New version:</div>
<div class="col-md-4 themed-grid-col bg-light" id="app-ver-new">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Host name:</div>
<div class="col-md-4 themed-grid-col bg-light" id="mdns">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Device ID:</div>
<div class="col-md-4 themed-grid-col bg-light" id="id">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Platform:</div>
<div class="col-md-4 themed-grid-col bg-light" id="platform">Loading...</div>
</div>
<script> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
$("#log-btn").click(function(e){
loadLog();
});
setInterval(function() {
loadLog();
}, 3000); //5 seconds
function loadLog() {
$("#logContent").load("/log");
//$("#logContent").load("/test/status.json");
};
</script>
<div class="row mb-3">
<a class="badge badge-primary" data-toggle="collapse" href="#collapseLog" role="button" aria-expanded="false" aria-controls="collapseLog" id="log-btn">
View error log
</a>
</div>
<div class="collapse" id="collapseLog">
<div class="card card-body">
<pre><code id="logContent"></code></pre>
</div>
</div>
<hr class="my-4">
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Gravity:</div>
<div class="col-md-4 themed-grid-col bg-light" id="gravity">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Temperature:</div>
<div class="col-md-4 themed-grid-col bg-light" id="temp">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Angle/Tilt:</div>
<div class="col-md-4 themed-grid-col bg-light" id="angle">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Battery:</div>
<div class="col-md-4 themed-grid-col bg-light" id="battery">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-8 themed-grid-col bg-light">Average runtime:</div>
<div class="col-md-4 themed-grid-col bg-light" id="runtime">Loading...</div>
</div>
<div class="row mb-3">
<div class="col-md-12 px-md-5 themed-grid-col bg-light custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="sleep-mode" id="sleep-mode" disabled>
<label class="custom-control-label" for="sleep-mode">Do not enter sleep mode when floating (check this if you are collecting angles/tilt for calibration).</label>
</div>
</div>
<hr class="my-4">
</div>
<script type="text/javascript">
window.onload = start;
$("#sleep-mode").click(function(e){
console.log( "Blocking sleep mode = " + $("#sleep-mode").is(":checked"));
$.ajax( {
type: "POST",
url: "/api/status/sleepmode",
data: { "id": $("#id").text(), "sleep-mode": $("#sleep-mode").is(":checked") },
success: function(result) { },
error: function(result) { showError('Could not update sleep mode for device.'); },
} );
});
function getStatus() {
var url = "/api/status";
//var url = "/test/status.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
//$("#app-ver").text(cfg["app-ver"] + " (html 0.8.0)");
$("#app-ver").text(cfg["app-ver"] + " (" + cfg["app-build"] + ")");
$("#mdns").text(cfg["mdns"]);
$("#id").text(cfg["id"]);
$("#platform").text(cfg["platform"]);
$("#runtime").text(cfg["runtime-average"] + " seconds");
var angle = cfg["angle"];
if(angle==0) {
$("#angle").text("Gyro moving");
$("#gravity").text("Gyro moving");
} else {
$("#angle").text(cfg["angle"]);
if( cfg["gravity-format"] == "G")
$("#gravity").text(cfg["gravity"] + " SG");
else
$("#gravity").text(cfg["gravity"] + " °P");
}
var batt = cfg["battery"];
var charge = 0;
if(batt>4.15) charge = 100;
else if(batt>4.05) charge = 90;
else if(batt>3.97) charge = 80;
else if(batt>3.91) charge = 70;
else if(batt>3.86) charge = 60;
else if(batt>3.81) charge = 50;
else if(batt>3.78) charge = 40;
else if(batt>3.76) charge = 30;
else if(batt>3.73) charge = 20;
else if(batt>3.67) charge = 10;
else if(batt>3.44) charge = 5;
$("#battery").text(batt + " V (" + charge + "%)" );
if( cfg["temp-format"] == "C")
$("#temp").text(cfg["temp-c"] + " C");
else
$("#temp").text(cfg["temp-f"] + " F");
if( cfg["sleep-mode"] )
$("#sleep-mode").attr("checked", true );
else
$("#sleep-mode").attr("checked", false );
$("#sleep-mode").removeAttr("disabled");
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
}
function start() {
setInterval(getStatus, 3000);
}
</script>
<!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -5,213 +5,221 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a> <!-- START MAIN INDEX -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:history.back()">Back to configuration</a>
</li>
</ul>
</div>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="container"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<hr class="my-2"> <script type="text/javascript">
function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> function showSuccess( msg ) {
<div id="alert-msg">...</div> $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
<button type="button" id="alert-btn" class="close" aria-label="Close"> $('#alert').text( msg );
<span aria-hidden="true">&times;</span> }
</button>
$("#alert-btn").click(function(e){
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
});
</script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTest">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTest" aria-expanded="true" aria-controls="collapseTest">
<b>Testing push targets</b>
</button>
</h2>
<div id="collapseTest" class="accordion-collapse collapse show" aria-labelledby="headingTest" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3">
<pre class="card-preview" id="preview" name="preview">Press test button to start testing all defined push targets.</pre>
</div>
<div class="row mb-3">
<div class="col-sm-8">
<button class="btn btn-primary" id="test-btn">Test</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { $('#spinner').hide();
$('#alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show');
$('#alert-msg').text( msg ); function clearLog() {
$("#preview").text("");
} }
function showSuccess( msg ) { function appendLog(log) {
$('#alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show'); doc = $("#preview").text();
$('#alert-msg').text( msg ); doc += log + "\n";
$("#preview").text(doc);
} }
$("#alert-btn").click(function(e){ // Get the configuration values from the API
$('#alert').addClass('d-none').removeClass('show'); $("#test-btn").click(function(e) {
}); clearLog();
appendLog( "Starting test of push targets" );
var url = "/api/status";
//var url = "/test/status.json";
$("#test-btn").prop("disabled", true);
$('#spinner').show();
$.getJSON(url, function (cfg) {
var id = cfg["id"];
console.log( id );
testHttp( id, "http-1" );
testHttp( id, "http-2" );
testHttp( id, "http-3" );
testHttp( id, "brewfather" );
testInfluxdb( id );
testMqtt( id );
$('#spinner').hide();
$("#test-btn").prop("disabled", false);
})
.fail(function () {
showError('Unable to get data from the device.');
$('#spinner').hide();
$("#test-btn").prop("disabled", false);
})
.always(function() {
});
});
function testMqtt(id) {
var url = "/api/test/push";
url += "?id=" + id + "&format=mqtt";
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target 'mqtt' is not configured/used" );
} else if(success) {
appendLog( "Push target 'mqtt' successful" );
} else{
if(code==-3)
appendLog( "Push target 'mqtt' failed to connect" );
else if(code==-4)
appendLog( "Push target 'mqtt' failed with error timeout" );
else if(code==-10)
appendLog( "Push target 'mqtt' failed with error denied" );
else
appendLog( "Push target 'mqtt' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target 'influxdb'");
})
}
function testInfluxdb(id) {
var url = "/api/test/push";
url += "?id=" + id + "&format=influxdb";
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target 'influxdb' is not configured/used" );
} else if(success) {
appendLog( "Push target 'influxdb' successful" );
} else{
if(code==400)
appendLog( "Push target 'influxdb' failed with error code 400, bad request" );
else if(code==401)
appendLog( "Push target 'influxdb' failed with error code 401, unauthorized" );
else if(code==404)
appendLog( "Push target 'influxdb' failed with error code 404, url not found" );
else
appendLog( "Push target 'influxdb' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target 'influxdb'");
})
}
function testHttp(id, target) {
var url = "/api/test/push";
url += "?id=" + id + "&format=" + target;
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target '" + target + "' is not configured/used" );
} else if(success) {
appendLog( "Push target '" + target + "' successful" );
} else{
if(code==400)
appendLog( "Push target '" + target + "' failed with error code 400, bad request" );
else if(code==401)
appendLog( "Push target '" + target + "' failed with error code 401, unauthorized" );
else if(code==404)
appendLog( "Push target '" + target + "' failed with error code 404, url not found" );
else
appendLog( "Push target '" + target + "' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target '" + target + "'");
})
}
</script> </script>
<div> <!-- START FOOTER -->
<div class="card">
<div class="card-body">
<pre class="card-preview" id="preview" name="preview"></pre>
</div>
</div>
<div class="form-group row"> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
</div>
<div class="form-group row">
<div class="col-sm-8">
<button class="btn btn-primary" id="test-btn">Test</button>
</div>
</div>
<hr class="my-4">
</div>
<script type="text/javascript">
$('#spinner').hide();
function clearLog() {
$("#preview").text("");
}
function appendLog(log) {
doc = $("#preview").text();
doc += log + "\n";
$("#preview").text(doc);
}
// Get the configuration values from the API
$("#test-btn").click(function(e) {
clearLog();
appendLog( "Starting test of push targets" );
var url = "/api/status";
//var url = "/test/status.json";
$("#test-btn").prop("disabled", true);
$('#spinner').show();
$.getJSON(url, function (cfg) {
var id = cfg["id"];
console.log( id );
testHttp( id, "http-1" );
testHttp( id, "http-2" );
testHttp( id, "http-3" );
testHttp( id, "brewfather" );
testInfluxdb( id );
testMqtt( id );
$('#spinner').hide();
$("#test-btn").prop("disabled", false);
})
.fail(function () {
showError('Unable to get data from the device.');
$('#spinner').hide();
$("#test-btn").prop("disabled", false);
})
.always(function() {
});
});
function testMqtt(id) {
var url = "/api/test/push";
url += "?id=" + id + "&format=mqtt";
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target 'mqtt' is not configured/used" );
} else if(success) {
appendLog( "Push target 'mqtt' successful" );
} else{
if(code==-3)
appendLog( "Push target 'mqtt' failed to connect" );
else if(code==-4)
appendLog( "Push target 'mqtt' failed with error timeout" );
else if(code==-10)
appendLog( "Push target 'mqtt' failed with error denied" );
else
appendLog( "Push target 'mqtt' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target 'influxdb'");
})
}
function testInfluxdb(id) {
var url = "/api/test/push";
url += "?id=" + id + "&format=influxdb";
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target 'influxdb' is not configured/used" );
} else if(success) {
appendLog( "Push target 'influxdb' successful" );
} else{
if(code==400)
appendLog( "Push target 'influxdb' failed with error code 400, bad request" );
else if(code==401)
appendLog( "Push target 'influxdb' failed with error code 401, unauthorized" );
else if(code==404)
appendLog( "Push target 'influxdb' failed with error code 404, url not found" );
else
appendLog( "Push target 'influxdb' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target 'influxdb'");
})
}
function testHttp(id, target) {
var url = "/api/test/push";
url += "?id=" + id + "&format=" + target;
//var url = "/test/push.json";
$.getJSON(url, function (cfg) {
var code = cfg["code"];
var success = cfg["success"];
var enabled = cfg["enabled"];
if(!enabled) {
appendLog( "Push target '" + target + "' is not configured/used" );
} else if(success) {
appendLog( "Push target '" + target + "' successful" );
} else{
if(code==400)
appendLog( "Push target '" + target + "' failed with error code 400, bad request" );
else if(code==401)
appendLog( "Push target '" + target + "' failed with error code 401, unauthorized" );
else if(code==404)
appendLog( "Push target '" + target + "' failed with error code 404, url not found" );
else
appendLog( "Push target '" + target + "' failed with error code " + code );
}
})
.fail(function () {
appendLog( "Failed to test push target '" + target + "'");
})
}
</script>
<!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -5,160 +5,176 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content=""> <meta name="description" content="">
<title>Beer Gravity Monitor</title> <title>Beer Gravity Monitor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> <style>
.row-margin-05 { margin-top: 0.5em; }
.row-margin-10 { margin-top: 1.0em; }
</style>
</head> </head>
<body class="py-4"> <body class="py-4">
<!-- START MENU --> <!-- START MENU -->
<nav class="navbar navbar-expand-sm navbar-dark bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="/upload.htm">Beer Gravity Monitor - Missing html files</a> <div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <a class="navbar-brand" href="/index.htm">Beer Gravity Monitor</a>
<span class="navbar-toggler-icon"></span> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
</button> <span class="navbar-toggler-icon"></span>
</button>
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<div class="collapse navbar-collapse" id="navbar"> <!-- START MAIN INDEX -->
<div class="spinner-border text-light" id="spinner" role="status"></div>
</div>
</nav>
<!-- START MAIN INDEX --> <div class="container row-margin-10">
<div class="container"> <div class="alert alert-success alert-dismissible hide fade d-none" role="alert">
<div id="alert"></div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<hr class="my-4"> <script type="text/javascript">
function showError( msg ) {
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
$('#alert').text( msg );
}
<div class="alert alert-success alert-dismissible fade hide show d-none" role="alert" id="alert"> function showSuccess( msg ) {
<div id="alert-msg">...</div> $('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('hide').addClass('show').removeClass('d-none');
<button type="button" id="alert-btn" class="close" aria-label="Close"> $('#alert').text( msg );
<span aria-hidden="true">&times;</span> }
</button>
$("#alert-btn").click(function(e){
$('.alert').addClass('hide').removeClass('show').addClass('d-none');
});
</script>
<div class="accordion" id="accordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingUpload">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUpload" aria-expanded="true" aria-controls="collapseUpload">
<b>Upload missing html files</b>
</button>
</h2>
<div id="collapseUpload" class="accordion-collapse collapse show" aria-labelledby="headingUpload" data-bs-parent="#accordion">
<div class="accordion-body">
<div class="row mb-3">
<div class="col-md-8 bg-light">The listed files below needs to be uploaded to the FileSystem in order for the GUI to work.
You can also flash the LittleFS filesystem but in that case you will loose your device settings. An OTA upgrade will automatically download
the files if they are found in the same location as the firmware.bin. This page is a fallback option.
</div>
<div class="col-md-8 bg-light"><br><strong>Once all the files are confirmed, please reboot the device for normal operation.</strong></div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">index.min.htm</div>
<div class="col-md-6 bg-light" id="index">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">config.min.htm</div>
<div class="col-md-6 bg-light" id="config">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">calibration.min.htm</div>
<div class="col-md-6 bg-light" id="calibration">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">format.min.htm</div>
<div class="col-md-6 bg-light" id="format">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">test.min.htm</div>
<div class="col-md-6 bg-light" id="test">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 bg-light">about.min.htm</div>
<div class="col-md-6 bg-light" id="about">Checking...</div>
</div>
<form action="/api/upload" method="post" enctype="multipart/form-data">
<div class="row mb-3">
<div class="col-md-8 custom-file">
<input type="file" accept=".min.htm" class="custom-file-input" name="name" id="name">
</div>
</div>
<div class="row mb-3">
<div class="col-md-3">
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Upload</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
function showError( msg ) { window.onload = getUpload;
$('.alert').removeClass('alert-success').addClass('alert-danger').removeClass('d-none').addClass('show')
$('#alert-msg').text( msg );
}
function showSuccess( msg ) { // Add the following code if you want the name of the file appear on select
$('.alert').addClass('alert-success').removeClass('alert-danger').removeClass('d-none').addClass('show') $(".custom-file-input").on("change", function() {
$('#alert-msg').text( msg ); var fileName = $(this).val().split("\\").pop();
} $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
$("#alert-btn").click(function(e){ function getUpload() {
$('.alert').addClass('d-none').removeClass('show') var url = "/api/upload";
}); var url = "/test/upload.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
if( cfg["index"] )
$("#index").text("Completed.");
else
$("#index").text("File is missing.");
if( cfg["config"] )
$("#config").text("Completed.");
else
$("#config").text("File is missing.");
if( cfg["calibration"] )
$("#calibration").text("Completed.");
else
$("#calibration").text("File is missing.");
if( cfg["test"] )
$("#test").text("Completed.");
else
$("#test").text("File is missing.");
if( cfg["format"] )
$("#format").text("Completed.");
else
$("#format").text("File is missing.");
if( cfg["about"] )
$("#about").text("Completed.");
else
$("#about").text("File is missing.");
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
}
</script> </script>
<div class="row mb-3"> <!-- START FOOTER -->
<div class="col-md-8 themed-grid-col bg-light">The listed files below needs to be uploaded to the FileSystem in order for the GUI to work.
You can also flash the LittleFS filesystem but in that case you will loose your device settings. An OTA upgrade will automatically download
the files if they are found in the same location as the firmware.bin. This page is a fallback option.
</div>
<div class="col-md-8 themed-grid-col bg-light"><br><strong>Once all the files are confirmed, please reboot the device for normal operation.</strong></div>
</div>
<div class="row mb-3"> <div class="container themed-container bg-primary text-light row-margin-10">(C) Copyright 2021-22 Magnus Persson</div>
<div class="col-md-2 themed-grid-col bg-light">index.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="index">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">config.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="config">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">calibration.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="calibration">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">format.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="format">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">test.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="test">Checking...</div>
</div>
<div class="row mb-3">
<div class="col-md-2 themed-grid-col bg-light">about.min.htm</div>
<div class="col-md-6 themed-grid-col bg-light" id="about">Checking...</div>
</div>
<div class="row mb-3">
<form action="/api/upload" method="post" enctype="multipart/form-data">
<div class="col-md-8 custom-file">
<input type="file" accept=".min.htm" class="custom-file-input" name="name" id="name">
<label class="custom-file-label" for="name">Choose file</label>
</div>
<button type="submit" class="btn btn-primary" id="upload-btn" value="upload">Upload</button>
</form>
</div>
<hr class="my-4">
</div>
<script type="text/javascript">
window.onload = getUpload;
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
var fileName = $(this).val().split("\\").pop();
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
function getUpload() {
var url = "/api/upload";
//var url = "/test/upload.json";
$('#spinner').show();
$.getJSON(url, function (cfg) {
console.log( cfg );
if( cfg["index"] )
$("#index").text("Completed.");
else
$("#index").text("File is missing.");
if( cfg["config"] )
$("#config").text("Completed.");
else
$("#config").text("File is missing.");
if( cfg["calibration"] )
$("#calibration").text("Completed.");
else
$("#calibration").text("File is missing.");
if( cfg["test"] )
$("#test").text("Completed.");
else
$("#test").text("File is missing.");
if( cfg["format"] )
$("#format").text("Completed.");
else
$("#format").text("File is missing.");
if( cfg["about"] )
$("#about").text("Completed.");
else
$("#about").text("File is missing.");
})
.fail(function () {
showError('Unable to get data from the device.');
})
.always(function() {
$('#spinner').hide();
});
}
</script>
<!-- START FOOTER -->
<div class="container-fluid themed-container bg-primary text-light">(C) Copyright 2021-22 Magnus Persson</div>
</body> </body>
</html> </html>

View File

@ -10,5 +10,6 @@
"g3": 1.010, "g3": 1.010,
"g2": 1.025, "g2": 1.025,
"g4": 1.040, "g4": 1.040,
"g5": 1.005 "g5": 1.005,
"error": ""
} }