stats display

esp_meas.pro.user

@@ -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>

html/pages/status.tpl

@@ -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>
 

html/pages/waveform.html

@@ -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>

html/pages/wifi.tpl

@@ -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>
 

html_src/js-src/lib/chartist.js

@@ -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]) {
+
+
+      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);
-      // }
-		*/
+        //  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] !== '') {

html_src/js-src/page_waveform.js

@@ -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;

html_src/page_status.php

@@ -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>
 

html_src/page_waveform.php

@@ -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>

html_src/page_wifi.php

@@ -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>
 

html_src/sass/app.scss

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

html_src/sass/lib/chartist/_chartist-settings.scss

@@ -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);
 
 

html_src/sass/lib/chartist/_chartist.scss

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

html_src/sass/pages/_wfm.scss

@@ -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"}
+	}
+}