Added graph + updated formula creation

This commit is contained in:
Magnus Persson 2022-01-04 11:22:11 +01:00
parent d796794602
commit 0783a206b2
5 changed files with 171 additions and 13 deletions

View File

@ -8,6 +8,7 @@
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" 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://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="py-4">
@ -88,14 +89,15 @@
<input type="text" name="id" id="id" hidden>
<div class="row mb-3">
Here you can create your gravity formula by entering angles and the corresponding gravity (SG). These values
Here you can create your gravity formula by entering angles/tilt and the corresponding gravity (SG). These values
will be saved for future use. Angles with 0 (zero) will be skipped. The values below will be used to check the
formula and if the deviation is more than 1.5 SG then the forumla will be rejected.
formula and if the deviation is more than 1.5 SG then the forumla will be rejected. On the bottom of the page you can
see a graph over the entered values + values calcualated by the formula.
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">#:</label>
<label class="col-sm-4 col-form-label">Angle:</label>
<label class="col-sm-4 col-form-label">Angle/Tilt:</label>
<label class="col-sm-4 col-form-label">Gravity (SG):</label>
</div>
@ -163,15 +165,73 @@
<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>
</div>
</form>
</div>
</div>
</div>
</div>
<hr class="my-4">
<div>
<canvas id="gravityChart"></canvas>
</div>
<hr class="my-4">
</div>
<script type="text/javascript">
var chartDataForm = [];
var chartDataCalc = [];
const dataSetChart = {
datasets: [{
label: 'Raw data',
borderColor: 'blue',
backgroundColor: 'blue',
data: chartDataForm
}, {
label: 'Calculated',
borderColor: 'green',
backgroundColor: 'green',
data: chartDataCalc
}]
}
const configChart = {
type: 'line',
data: dataSetChart,
options: {
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
display: true,
type: 'linear',
grace: '5%',
title: {
display: true,
text: 'Angle/Tilt'
},
ticks: {
crossAlign: 'far'
},
suggestedMin: 25
},
y: {
display: true,
title: {
display: true,
text: 'Gravity'
},
suggestedMin: 1.000
}
}
}
};
var myChart = 0;
</script>
<script type="text/javascript">
g1.onchange = setFourNumberDecimal
g2.onchange = setFourNumberDecimal
@ -190,12 +250,53 @@
function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2);
populateChart();
}
function setFourNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(4);
populateChart();
}
function populateChartForm(a, g) {
if( a != 0)
chartDataForm.push( { x: parseFloat(a), y: parseFloat(g) });
}
function populateChartCalc(a, g) {
chartDataCalc.push( { x: parseFloat(a), y: parseFloat(g) });
}
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 );
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);
}
@ -225,6 +326,8 @@
$("#g3").val( parseFloat(cfg["g3"]).toFixed(4) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(4) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(4) );
populateChart();
})
.fail(function () {
showError('Unable to get data from the device.');

File diff suppressed because one or more lines are too long

View File

@ -34,7 +34,7 @@ build_flags =
-D EMBED_HTML # If this is not used the html files needs to be on the file system (can be uploaded)
-D USER_SSID=\""\"" # =\""myssid\""
-D USER_SSID_PWD=\""\"" # =\""mypwd\""
-D CFG_APPVER="\"0.4.0\""
-D CFG_APPVER="\"0.4.9\""
lib_deps = # Switched to forks for better version control.
# Using local copy of this library
#https://github.com/mp-se/i2cdevlib # https://github.com/jrowberg/i2cdevlib.git

View File

@ -61,12 +61,16 @@ int createFormula( RawFormulaData& fd, char *formulaBuffer, int order ) {
//Returned value is 0 if no error
if( ret == 0 ) {
if( noAngles==5 )
// Print the formula based on 'order'
if( order == 4 ) {
sprintf( formulaBuffer, "%.8f*tilt^4+%.8f*tilt^3+%.8f*tilt^2+%.8f*tilt+%.8f", coeffs[0], coeffs[1], coeffs[2], coeffs[3], coeffs[4] );
} else if( order == 3 ) {
sprintf( formulaBuffer, "%.8f*tilt^3+%.8f*tilt^2+%.8f*tilt+%.8f", coeffs[0], coeffs[1], coeffs[2], coeffs[3] );
else if( noAngles==4 )
} else if( order == 2 ) {
sprintf( formulaBuffer, "%.8f*tilt^2+%.8f*tilt+%.8f", coeffs[0], coeffs[1], coeffs[2] );
else // ==3
} else { // order == 1
sprintf( formulaBuffer, "%.8f*tilt+%.8f", coeffs[0], coeffs[1] );
}
bool valid = true;

View File

@ -1,5 +1,5 @@
{
"gravity-formula": "0.0*tilt^3+0.0*tilt^2+0.0017978*tilt+0.9436",
"gravity-formula": "0.00000166*tilt^3+-0.00024799*tilt^2+0.01344400*tilt+0.79358248",
"angle": 45,
"a1": 25,
"a2": 35,
@ -8,7 +8,7 @@
"a5": 65,
"g1": 1.000,
"g2": 1.010,
"g3": 1.020,
"g4": 1.030,
"g5": 1.040
"g3": 1.025,
"g4": 1.040,
"g5": 1.060
}