Rough update to bootstrap 5 done
This commit is contained in:
Magnus Persson
132
html/about.htm
132
html/about.htm
@ -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>
|
||||||
@ -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">×</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>
|
||||||
858
html/config.htm
858
html/config.htm
File diff suppressed because it is too large
Load Diff
@ -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">×</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>
|
||||||
408
html/format.htm
408
html/format.htm
@ -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">×</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>
|
||||||
446
html/index.htm
446
html/index.htm
@ -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">×</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>
|
||||||
384
html/test.htm
384
html/test.htm
@ -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">×</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>
|
||||||
288
html/upload.htm
288
html/upload.htm
@ -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">×</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>
|
||||||
@ -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": ""
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user