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"> <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://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://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> </head>
<body class="py-4"> <body class="py-4">
@ -88,14 +89,15 @@
<input type="text" name="id" id="id" hidden> <input type="text" name="id" id="id" hidden>
<div class="row mb-3"> <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 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>
<div class="form-group row"> <div class="form-group row">
<label class="col-sm-2 col-form-label">#:</label> <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> <label class="col-sm-4 col-form-label">Gravity (SG):</label>
</div> </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-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>
</div> </div>
</div> </div>
<hr class="my-4"> <hr class="my-4">
<div>
<canvas id="gravityChart"></canvas>
</div>
<hr class="my-4">
</div> </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"> <script type="text/javascript">
g1.onchange = setFourNumberDecimal g1.onchange = setFourNumberDecimal
g2.onchange = setFourNumberDecimal g2.onchange = setFourNumberDecimal
@ -190,12 +250,53 @@
function setTwoNumberDecimal(event) { function setTwoNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(2); this.value = parseFloat(this.value).toFixed(2);
populateChart();
} }
function setFourNumberDecimal(event) { function setFourNumberDecimal(event) {
this.value = parseFloat(this.value).toFixed(4); 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 ) { function setButtonDisabled( b ) {
$("#calculate-btn").prop("disabled", b); $("#calculate-btn").prop("disabled", b);
} }
@ -225,6 +326,8 @@
$("#g3").val( parseFloat(cfg["g3"]).toFixed(4) ); $("#g3").val( parseFloat(cfg["g3"]).toFixed(4) );
$("#g4").val( parseFloat(cfg["g4"]).toFixed(4) ); $("#g4").val( parseFloat(cfg["g4"]).toFixed(4) );
$("#g5").val( parseFloat(cfg["g5"]).toFixed(4) ); $("#g5").val( parseFloat(cfg["g5"]).toFixed(4) );
populateChart();
}) })
.fail(function () { .fail(function () {
showError('Unable to get data from the device.'); 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 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=\""\"" # =\""myssid\""
-D USER_SSID_PWD=\""\"" # =\""mypwd\"" -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. lib_deps = # Switched to forks for better version control.
# Using local copy of this library # Using local copy of this library
#https://github.com/mp-se/i2cdevlib # https://github.com/jrowberg/i2cdevlib.git #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 //Returned value is 0 if no error
if( ret == 0 ) { 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] ); 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] ); 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] ); sprintf( formulaBuffer, "%.8f*tilt+%.8f", coeffs[0], coeffs[1] );
}
bool valid = true; 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, "angle": 45,
"a1": 25, "a1": 25,
"a2": 35, "a2": 35,
@ -8,7 +8,7 @@
"a5": 65, "a5": 65,
"g1": 1.000, "g1": 1.000,
"g2": 1.010, "g2": 1.010,
"g3": 1.020, "g3": 1.025,
"g4": 1.030, "g4": 1.040,
"g5": 1.040 "g5": 1.060
} }