stats display

master
Ondřej Hruška 8 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"?>
<!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>
<data>
<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">
<h2>WiFi</h2>
<table>
<tbody>
<tr>
<th>WiFi mode:</th>
<td id="wmode">%wifiMode%</td>
</tr>
</tbody>
</table>
</div>
@ -54,7 +52,6 @@
<div class="Box sta-only" style="display:none">
<h2>WiFi Station</h2>
<table>
<tbody>
<tr>
<th>SSID:</th>
<td id="staSSID"></td>
@ -70,14 +67,12 @@
<th>MAC:</th>
<td id="staMAC"></td>
</tr>
</tbody>
</table>
</div>
<div class="Box ap-only" style="display:none">
<h2>WiFi AP</h2>
<table>
<tbody>
<tr>
<th>SSID:</th>
<td id="apSSID"></td>
@ -102,7 +97,6 @@
<th>MAC:</th>
<td id="apMAC"></td>
</tr>
</tbody>
</table>
</div>

@ -27,7 +27,7 @@
<input id="count" type="number" value="500">
</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">
<span class="mq-normal-min">Hz</span>
</div>
@ -36,8 +36,28 @@
</div>
</div>
<div class="Box medium">
<div class="Box medium chartbox">
<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>
<script>

@ -23,7 +23,6 @@
<div class="Box">
<table>
<tbody>
<tr>
<th>WiFi mode:</th>
<td>%WiFiMode%</td>
@ -32,7 +31,6 @@
<th>Note:</th>
<td>%WiFiapwarn%</td>
</tr>
</tbody>
</table>
</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;
var lblText = labels[index];
//round (!! will brak for non-numeric)
//round (!! will break for non-numeric)
lblText = Math.round(+lblText*100)/100;
if(useForeignObject) {
@ -2907,7 +2907,8 @@ var Chartist = {
}
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 labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);
@ -2920,21 +2921,25 @@ var Chartist = {
// TODO: Find better solution for solving this problem
// 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
labelLength = projectedValues[index + 1] - projectedValue;
lastWidth = labelLength;
} else if (typeof lastWidth != 'undefined') {
labelLength = lastWidth; // EDIT. added the lastWidth thing
}
// 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);
// }
*/
var labelLength=0;
if (xy == 'Y') { // X doesnt use this
if (projectedValues[index + 1]) {
// If we still have one label ahead, we can calculate the distance to the next tick / label
labelLength = projectedValues[index + 1] - projectedValue;
// lastWidth = labelLength;
// } else if (typeof lastWidth != 'undefined') {
// labelLength = lastWidth; // EDIT. added the lastWidth thing
} 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)
if(Chartist.isFalseyButZero(labelValues[index]) && labelValues[index] !== '') {

@ -3,10 +3,10 @@ var page_waveform = (function () {
var zoomResetFn;
function buildChart(samples, xlabel, ylabel) {
var data = [];
samples.forEach(function (a, i) {
data.push({x: i, y: a});
function buildChart(obj, xlabel, ylabel) {
var points = [];
obj.samples.forEach(function (a, i) {
points.push({x: i, y: a});
});
// Build the chart
@ -45,11 +45,13 @@ var page_waveform = (function () {
}
}));
var peak = obj.stats.peak;
new Chartist.Line('#chart', {
series: [
{
name: 'a',
data: data
data: points
},
]
}, {
@ -69,6 +71,8 @@ var page_waveform = (function () {
axisY: {
type: Chartist.AutoScaleAxis,
//onlyInteger: true
high: peak,
low: -peak,
},
plugins: plugins
});
@ -81,13 +85,21 @@ var page_waveform = (function () {
return;
}
var json = JSON.parse(resp);
if (!json.success) {
var j = JSON.parse(resp);
if (!j.success) {
alert("Sampling failed.");
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() {
@ -96,7 +108,7 @@ var page_waveform = (function () {
// "success": true
// };
function clickHdl() {
function loadBtnClick() {
var samples = $('#count').val();
var freq = $('#freq').val();
@ -104,14 +116,15 @@ var page_waveform = (function () {
$().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) {
if (e.which == 13) {
clickHdl();
loadBtnClick();
}
});
// chart zooming
$('#chart').on('contextmenu', function(e) {
zoomResetFn && zoomResetFn();
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">
<h2>WiFi</h2>
<table>
<tbody>
<tr>
<th>WiFi mode:</th>
<td id="wmode">%wifiMode%</td>
</tr>
</tbody>
</table>
</div>
@ -36,7 +34,6 @@ include "_start.php"; ?>
<div class="Box sta-only" style="display:none">
<h2>WiFi Station</h2>
<table>
<tbody>
<tr>
<th>SSID:</th>
<td id="staSSID"></td>
@ -52,14 +49,12 @@ include "_start.php"; ?>
<th>MAC:</th>
<td id="staMAC"></td>
</tr>
</tbody>
</table>
</div>
<div class="Box ap-only" style="display:none">
<h2>WiFi AP</h2>
<table>
<tbody>
<tr>
<th>SSID:</th>
<td id="apSSID"></td>
@ -84,7 +79,6 @@ include "_start.php"; ?>
<th>MAC:</th>
<td id="apMAC"></td>
</tr>
</tbody>
</table>
</div>

@ -9,7 +9,7 @@ include "_start.php"; ?>
<input id="count" type="number" value="500">
</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">
<span class="mq-normal-min">Hz</span>
</div>
@ -18,8 +18,28 @@ include "_start.php"; ?>
</div>
</div>
<div class="Box medium">
<div class="Box medium chartbox">
<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>
<script>

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

@ -30,6 +30,14 @@ $c-form-highlight-a: #28bc65;
text-align: center;
}
.invis {
visibility: hidden;
}
.hidden {
display: none;
}
@import "layout/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-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);

@ -115,7 +115,7 @@
.ct-zoom-rect {
fill: rgba(200, 100, 100, 0.3);
stroke: red;
stroke: #ff2b12;
}
.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