stats display

master
Ondřej Hruška 9 years ago
parent aac5a78974
commit a778eb6d64
  1. 2
      esp_meas.pro.user
  2. 2
      html/css/app.css
  3. 4
      html/js/all.js
  4. 6
      html/pages/status.tpl
  5. 24
      html/pages/waveform.html
  6. 2
      html/pages/wifi.tpl
  7. 2
      html_src/css/app.css
  8. 2
      html_src/css/app.css.map
  9. 39
      html_src/js-src/lib/chartist.js
  10. 35
      html_src/js-src/page_waveform.js
  11. 4
      html_src/js/all.js
  12. 2
      html_src/js/all.js.map
  13. 6
      html_src/page_status.php
  14. 24
      html_src/page_waveform.php
  15. 2
      html_src/page_wifi.php
  16. 8
      html_src/sass/app.scss
  17. 2
      html_src/sass/lib/chartist/_chartist-settings.scss
  18. 2
      html_src/sass/lib/chartist/_chartist.scss
  19. 43
      html_src/sass/pages/_wfm.scss

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE QtCreatorProject> <!DOCTYPE QtCreatorProject>
<!-- Written by QtCreator 3.6.1, 2016-03-29T21:49:40. --> <!-- Written by QtCreator 3.6.1, 2016-03-29T21:53:03. -->
<qtcreator> <qtcreator>
<data> <data>
<variable>EnvironmentId</variable> <variable>EnvironmentId</variable>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -40,12 +40,10 @@
<div class="Box"> <div class="Box">
<h2>WiFi</h2> <h2>WiFi</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>WiFi mode:</th> <th>WiFi mode:</th>
<td id="wmode">%wifiMode%</td> <td id="wmode">%wifiMode%</td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>
@ -54,7 +52,6 @@
<div class="Box sta-only" style="display:none"> <div class="Box sta-only" style="display:none">
<h2>WiFi Station</h2> <h2>WiFi Station</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>SSID:</th> <th>SSID:</th>
<td id="staSSID"></td> <td id="staSSID"></td>
@ -70,14 +67,12 @@
<th>MAC:</th> <th>MAC:</th>
<td id="staMAC"></td> <td id="staMAC"></td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>
<div class="Box ap-only" style="display:none"> <div class="Box ap-only" style="display:none">
<h2>WiFi AP</h2> <h2>WiFi AP</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>SSID:</th> <th>SSID:</th>
<td id="apSSID"></td> <td id="apSSID"></td>
@ -102,7 +97,6 @@
<th>MAC:</th> <th>MAC:</th>
<td id="apMAC"></td> <td id="apMAC"></td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>

@ -27,7 +27,7 @@
<input id="count" type="number" value="500"> <input id="count" type="number" value="500">
</div> </div>
<div> <div>
<label for="freq">Freq. <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label> <label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4000"> <input id="freq" type="number" value="4000">
<span class="mq-normal-min">Hz</span> <span class="mq-normal-min">Hz</span>
</div> </div>
@ -36,8 +36,28 @@
</div> </div>
</div> </div>
<div class="Box medium"> <div class="Box medium chartbox">
<div id="chart" class="ct-chart ct-wide"></div> <div id="chart" class="ct-chart ct-wide"></div>
<div class="stats invis">
<table>
<tr>
<th>#</th>
<td id="stat-count"></td>
</tr>
<tr>
<th>f<sub>s</sub></th>
<td id="stat-f-s"></td>
</tr>
<tr>
<th>I<sub>peak</sub></th>
<td id="stat-i-peak"></td>
</tr>
<tr>
<th>I<sub>RMS</sub></th>
<td id="stat-i-rms"></td>
</tr>
</table>
</div>
</div> </div>
<script> <script>

@ -23,7 +23,6 @@
<div class="Box"> <div class="Box">
<table> <table>
<tbody>
<tr> <tr>
<th>WiFi mode:</th> <th>WiFi mode:</th>
<td>%WiFiMode%</td> <td>%WiFiMode%</td>
@ -32,7 +31,6 @@
<th>Note:</th> <th>Note:</th>
<td>%WiFiapwarn%</td> <td>%WiFiapwarn%</td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -907,7 +907,7 @@ var Chartist = {
positionalData[axis.counterUnits.len] = axisOffset - 10; positionalData[axis.counterUnits.len] = axisOffset - 10;
var lblText = labels[index]; var lblText = labels[index];
//round (!! will brak for non-numeric) //round (!! will break for non-numeric)
lblText = Math.round(+lblText*100)/100; lblText = Math.round(+lblText*100)/100;
if(useForeignObject) { if(useForeignObject) {
@ -2907,7 +2907,8 @@ var Chartist = {
} }
function createGridAndLabels(gridGroup, labelGroup, useForeignObject, chartOptions, eventEmitter) { function createGridAndLabels(gridGroup, labelGroup, useForeignObject, chartOptions, eventEmitter) {
var axisOptions = chartOptions['axis' + this.units.pos.toUpperCase()]; var xy = this.units.pos.toUpperCase();
var axisOptions = chartOptions['axis' + xy];
var projectedValues = this.ticks.map(this.projectValue.bind(this)); var projectedValues = this.ticks.map(this.projectValue.bind(this));
var labelValues = this.ticks.map(axisOptions.labelInterpolationFnc); var labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);
@ -2920,21 +2921,25 @@ var Chartist = {
// TODO: Find better solution for solving this problem // TODO: Find better solution for solving this problem
// Calculate how much space we have available for the label // Calculate how much space we have available for the label
var labelLength=0;/*
if(projectedValues[index + 1]) {
// If we still have one label ahead, we can calculate the distance to the next tick / label var labelLength=0;
labelLength = projectedValues[index + 1] - projectedValue;
lastWidth = labelLength;
} else if (typeof lastWidth != 'undefined') { if (xy == 'Y') { // X doesnt use this
labelLength = lastWidth; // EDIT. added the lastWidth thing if (projectedValues[index + 1]) {
} // If we still have one label ahead, we can calculate the distance to the next tick / label
// else { labelLength = projectedValues[index + 1] - projectedValue;
// // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to // lastWidth = labelLength;
// // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will // } else if (typeof lastWidth != 'undefined') {
// // still be visible inside of the chart padding. // labelLength = lastWidth; // EDIT. added the lastWidth thing
// labelLength = Math.max(this.axisLength - projectedValue, 30); } else {
// } // If we don't have a label ahead and we have only two labels in total, we just take the remaining distance to
*/ // on the whole axis length. We limit that to a minimum of 30 pixel, so that labels close to the border will
// still be visible inside of the chart padding.
labelLength = Math.max(this.axisLength - projectedValue, 30);
}
}
// Skip grid lines and labels where interpolated label values are falsey (execpt for 0) // Skip grid lines and labels where interpolated label values are falsey (execpt for 0)
if(Chartist.isFalseyButZero(labelValues[index]) && labelValues[index] !== '') { if(Chartist.isFalseyButZero(labelValues[index]) && labelValues[index] !== '') {

@ -3,10 +3,10 @@ var page_waveform = (function () {
var zoomResetFn; var zoomResetFn;
function buildChart(samples, xlabel, ylabel) { function buildChart(obj, xlabel, ylabel) {
var data = []; var points = [];
samples.forEach(function (a, i) { obj.samples.forEach(function (a, i) {
data.push({x: i, y: a}); points.push({x: i, y: a});
}); });
// Build the chart // Build the chart
@ -45,11 +45,13 @@ var page_waveform = (function () {
} }
})); }));
var peak = obj.stats.peak;
new Chartist.Line('#chart', { new Chartist.Line('#chart', {
series: [ series: [
{ {
name: 'a', name: 'a',
data: data data: points
}, },
] ]
}, { }, {
@ -69,6 +71,8 @@ var page_waveform = (function () {
axisY: { axisY: {
type: Chartist.AutoScaleAxis, type: Chartist.AutoScaleAxis,
//onlyInteger: true //onlyInteger: true
high: peak,
low: -peak,
}, },
plugins: plugins plugins: plugins
}); });
@ -81,13 +85,21 @@ var page_waveform = (function () {
return; return;
} }
var json = JSON.parse(resp); var j = JSON.parse(resp);
if (!json.success) { if (!j.success) {
alert("Sampling failed."); alert("Sampling failed.");
return; return;
} }
buildChart(json.samples, 'Sample number', 'Current - mA'); j.stats.peak = Math.max(-j.stats.min, j.stats.max);
buildChart(j, 'Sample number', 'Current - mA');
$('#stat-count').html(j.stats.count);
$('#stat-f-s').html(j.stats.freq);
$('#stat-i-peak').html(j.stats.peak);
$('#stat-i-rms').html(j.stats.rms);
$('.stats').removeClass('invis');
} }
wfm.init = function() { wfm.init = function() {
@ -96,7 +108,7 @@ var page_waveform = (function () {
// "success": true // "success": true
// }; // };
function clickHdl() { function loadBtnClick() {
var samples = $('#count').val(); var samples = $('#count').val();
var freq = $('#freq').val(); var freq = $('#freq').val();
@ -104,14 +116,15 @@ var page_waveform = (function () {
$().get('/api/raw.json?n='+samples+'&fs='+freq, onRxData, true, true); $().get('/api/raw.json?n='+samples+'&fs='+freq, onRxData, true, true);
} }
$('#load').on('click', clickHdl); $('#load').on('click', loadBtnClick);
$('#count,#freq').on('keyup', function(e) { $('#count,#freq').on('keyup', function(e) {
if (e.which == 13) { if (e.which == 13) {
clickHdl(); loadBtnClick();
} }
}); });
// chart zooming
$('#chart').on('contextmenu', function(e) { $('#chart').on('contextmenu', function(e) {
zoomResetFn && zoomResetFn(); zoomResetFn && zoomResetFn();
zoomResetFn = null; zoomResetFn = null;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -22,12 +22,10 @@ include "_start.php"; ?>
<div class="Box"> <div class="Box">
<h2>WiFi</h2> <h2>WiFi</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>WiFi mode:</th> <th>WiFi mode:</th>
<td id="wmode">%wifiMode%</td> <td id="wmode">%wifiMode%</td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>
@ -36,7 +34,6 @@ include "_start.php"; ?>
<div class="Box sta-only" style="display:none"> <div class="Box sta-only" style="display:none">
<h2>WiFi Station</h2> <h2>WiFi Station</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>SSID:</th> <th>SSID:</th>
<td id="staSSID"></td> <td id="staSSID"></td>
@ -52,14 +49,12 @@ include "_start.php"; ?>
<th>MAC:</th> <th>MAC:</th>
<td id="staMAC"></td> <td id="staMAC"></td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>
<div class="Box ap-only" style="display:none"> <div class="Box ap-only" style="display:none">
<h2>WiFi AP</h2> <h2>WiFi AP</h2>
<table> <table>
<tbody>
<tr> <tr>
<th>SSID:</th> <th>SSID:</th>
<td id="apSSID"></td> <td id="apSSID"></td>
@ -84,7 +79,6 @@ include "_start.php"; ?>
<th>MAC:</th> <th>MAC:</th>
<td id="apMAC"></td> <td id="apMAC"></td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>

@ -9,7 +9,7 @@ include "_start.php"; ?>
<input id="count" type="number" value="500"> <input id="count" type="number" value="500">
</div> </div>
<div> <div>
<label for="freq">Freq. <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label> <label for="freq">Rate <span class="mq-tablet-max" style="font-weight:normal;">(Hz)</span></label>
<input id="freq" type="number" value="4000"> <input id="freq" type="number" value="4000">
<span class="mq-normal-min">Hz</span> <span class="mq-normal-min">Hz</span>
</div> </div>
@ -18,8 +18,28 @@ include "_start.php"; ?>
</div> </div>
</div> </div>
<div class="Box medium"> <div class="Box medium chartbox">
<div id="chart" class="ct-chart ct-wide"></div> <div id="chart" class="ct-chart ct-wide"></div>
<div class="stats invis">
<table>
<tr>
<th>#</th>
<td id="stat-count"></td>
</tr>
<tr>
<th>f<sub>s</sub></th>
<td id="stat-f-s"></td>
</tr>
<tr>
<th>I<sub>peak</sub></th>
<td id="stat-i-peak"></td>
</tr>
<tr>
<th>I<sub>RMS</sub></th>
<td id="stat-i-rms"></td>
</tr>
</table>
</div>
</div> </div>
<script> <script>

@ -5,7 +5,6 @@ include "_start.php"; ?>
<div class="Box"> <div class="Box">
<table> <table>
<tbody>
<tr> <tr>
<th>WiFi mode:</th> <th>WiFi mode:</th>
<td>%WiFiMode%</td> <td>%WiFiMode%</td>
@ -14,7 +13,6 @@ include "_start.php"; ?>
<th>Note:</th> <th>Note:</th>
<td>%WiFiapwarn%</td> <td>%WiFiapwarn%</td>
</tr> </tr>
</tbody>
</table> </table>
</div> </div>

@ -30,6 +30,14 @@ $c-form-highlight-a: #28bc65;
text-align: center; text-align: center;
} }
.invis {
visibility: hidden;
}
.hidden {
display: none;
}
@import "layout/index"; @import "layout/index";
@import "form/index"; @import "form/index";

@ -2,7 +2,7 @@
$ct-scales_orig: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; $ct-scales_orig: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default;
$ct-scales-names_orig: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; $ct-scales-names_orig: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default;
$ct-scales: ((9/16), (2/3)); $ct-scales: ((10/16), (2/3));
$ct-scales-names: (ct-wide, ct-narrow); $ct-scales-names: (ct-wide, ct-narrow);

@ -115,7 +115,7 @@
.ct-zoom-rect { .ct-zoom-rect {
fill: rgba(200, 100, 100, 0.3); fill: rgba(200, 100, 100, 0.3);
stroke: red; stroke: #ff2b12;
} }
.ct-axis-title { .ct-axis-title {

@ -27,3 +27,46 @@
} }
} }
} }
.Box.chartbox {
display: flex;
flex-direction: row;
@include media($phone) {
flex-direction: column;
}
.stats {
flex: 0 1;
@include media($phone) {
table {
margin: 0 auto;
} // center the table
td,th {
width: 50%;
}
}
th,td {
@include nowrap;
}
th sub { font-weight: normal;}
td {
min-width: 100px;
}
td:after {
font-size: 90%;
padding-left: .5em;
}
//#stat-count
#stat-f-s:after {content: "Hz"}
#stat-i-peak:after {content: "mA"}
#stat-i-rms:after {content: "mA"}
}
}

Loading…
Cancel
Save