export buttons

Former-commit-id: d7089ee6d2d483f7029e965b96473a3e7a4b9636

html/pages/about.tpl

@@ -66,7 +66,7 @@
 </div>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/fft.html

@@ -79,12 +79,22 @@
 	</div>
 </div>
 
+<div class="Box chartexport hidden">
+	Copy:
+	<a data-sep="space">1·2·3</a>
+	<a data-sep="comma">1,2,3</a>
+	<a data-sep="newline">1↵2↵3</a>
+	<a data-sep="fft-csv">CSV</a>
+	<a data-sep="fft-json">JSON</a><br>
+	<textarea id="copybox" class="hidden" readonly onfocus="this.select();" onmouseup="return false"></textarea>
+</div>
+
 <script>
 	$().ready(page_waveform.init('fft'));
 </script>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/monitoring.tpl

@@ -94,7 +94,7 @@
 </script>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/sgm.html

@@ -71,7 +71,7 @@
 </script>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/status.tpl

@@ -120,7 +120,7 @@
 </script>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/wfm.html

@@ -68,12 +68,17 @@
 	</div>
 </div>
 
+<div class="Box chartexport hidden">
+	Copy: <a data-sep="space">1·2·3</a> <a data-sep="comma">1,2,3</a> <a data-sep="newline">1↵2↵3</a><br>
+	<textarea id="copybox" class="hidden" readonly onfocus="this.select();" onmouseup="return false"></textarea>
+</div>
+
 <script>
 	$().ready(page_waveform.init('raw'));
 </script>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html/pages/wifi.tpl

@@ -62,7 +62,7 @@
 </div>
 
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html_src/_end.php

@@ -1,5 +1,5 @@
 
-<div class="ErrMsg hidden" id="notif"></div>
+<div class="NotifyMsg hidden" id="notif"></div>
 
 </div><!-- content -->
 </div><!-- outer -->

html_src/js-src/app.js

@@ -51,5 +51,11 @@ $().ready(function () {
 
 
 function errorMsg(msg, time) {
+	$('#notif').addClass('error');
+	notify.show(msg, time || 3000);
+}
+
+function infoMsg(msg, time) {
+	$('#notif').removeClass('error');
 	notify.show(msg, time || 3000);
 }

html_src/js-src/page_waveform.js

@@ -15,6 +15,8 @@ var page_waveform = (function () {
 
 	var readXhr; // read xhr
 
+	var lastObj = null; // samples are stored here
+
 	var opts = {
 		count: 0, // sample count
 		freq: 0 // sampling freq
@@ -152,6 +154,8 @@ var page_waveform = (function () {
 			if (!j.success) {
 				errorMsg("Sampling failed.", 1000);
 			} else {
+				$('.chartexport').removeClass('hidden');
+				lastObj = j;
 				buildChart(j);
 			}
 		}
@@ -211,6 +215,40 @@ var page_waveform = (function () {
 
 		$('#load').on('click', onLoadClick);
 
+		$('.chartexport a').on('click', function() {
+			var sep = $(this).data('sep');
+			var str = '';
+
+			// for fft
+			var fftStep = (lastObj.stats.freq/lastObj.stats.count);
+
+			switch (sep) {
+				case 'space': str = lastObj.samples.join(' '); break;
+				case 'comma': str = lastObj.samples.join(','); break;
+				case 'newline': str = lastObj.samples.join('\n'); break;
+
+				case 'fft-csv':
+					str = _.map(lastObj.samples, function (a, i) {
+						return numfmt(i * fftStep,3) + "," + a;
+					}).join('\n');
+					break;
+
+				case 'fft-json':
+					str = JSON.stringify(_.map(lastObj.samples, function (a, i) {
+						return {f: +numfmt(i * fftStep, 3), m: a}
+					}));
+					break;
+			}
+
+			if (!copyToClipboard(str)) {
+				var $cb = $('#copybox');
+				$cb.removeClass('hidden');
+				$cb.val(str);
+			} else {
+				infoMsg('Copy success!');
+			}
+		});
+
 		$('#count,#freq').on('keyup', function (e) {
 			if (e.which == 13) {
 				onLoadClick();

html_src/js-src/utils.js

@@ -59,3 +59,44 @@ String.prototype.format = function () {
 
 	return out;
 };
+
+function copyToClipboard(string) {
+	if (!document.execCommand) return false;
+
+	// create hidden text element, if it doesn't already exist
+	var targetId = "_hiddenCopyText_";
+
+	// must use a temporary form element for the selection and copy
+	target = document.getElementById(targetId);
+	if (!target) {
+		var target = document.createElement("textarea");
+		target.style.position = "absolute";
+		target.style.left = "-9999px";
+		target.style.top = "0";
+		target.id = targetId;
+		document.body.appendChild(target);
+	}
+	target.textContent = string;
+
+	// select the content
+	var currentFocus = document.activeElement;
+	target.focus();
+	target.setSelectionRange(0, target.value.length);
+
+	// copy the selection
+	var succeed;
+	try {
+		succeed = document.execCommand("copy");
+	} catch(e) {
+		succeed = false;
+	}
+	// restore original focus
+	if (currentFocus && typeof currentFocus.focus === "function") {
+		currentFocus.focus();
+	}
+
+	// clear temporary content
+	target.textContent = "";
+
+	return succeed;
+}

html_src/page_fft.php

@@ -56,6 +56,16 @@
 	</div>
 </div>
 
+<div class="Box chartexport hidden">
+	Copy:
+	<a data-sep="space">1·2·3</a>
+	<a data-sep="comma">1,2,3</a>
+	<a data-sep="newline">1↵2↵3</a>
+	<a data-sep="fft-csv">CSV</a>
+	<a data-sep="fft-json">JSON</a><br>
+	<textarea id="copybox" class="hidden" readonly onfocus="this.select();" onmouseup="return false"></textarea>
+</div>
+
 <script>
 	$().ready(page_waveform.init('fft'));
 </script>

html_src/page_waveform.php

@@ -45,6 +45,11 @@
 	</div>
 </div>
 
+<div class="Box chartexport hidden">
+	Copy: <a data-sep="space">1·2·3</a> <a data-sep="comma">1,2,3</a> <a data-sep="newline">1↵2↵3</a><br>
+	<textarea id="copybox" class="hidden" readonly onfocus="this.select();" onmouseup="return false"></textarea>
+</div>
+
 <script>
 	$().ready(page_waveform.init('raw'));
 </script>

html_src/sass/app.scss

@@ -31,11 +31,11 @@ $c-form-highlight-a: #28bc65;
 }
 
 .invis {
-	visibility: hidden;
+	visibility: hidden !important;
 }
 
 .hidden {
-	display: none;
+	display: none !important;
 }
 
 .nb {
@@ -45,6 +45,7 @@ $c-form-highlight-a: #28bc65;
 @import "layout/index";
 @import "form/index";
 
+
 // import all our pages
 @import "pages/wifi";
 @import "pages/home";

html_src/sass/layout/_base.scss

@@ -12,6 +12,7 @@ html, body {
 }
 
 a, a:visited, a:link {
+	cursor: pointer;
 	color: #5abfff;
 	text-decoration: none;
 }
@@ -20,3 +21,27 @@ a:hover {
 	color: #5abfff;
 	text-decoration: underline;
 }
+
+.chartexport a {
+	background: #3b7299;
+	border-radius: 3px;
+	padding: 5px;
+	color: #0c171e;
+	text-decoration: none;
+
+	&:hover {
+		background: #4ea6dd;
+	}
+
+	&:active {
+		position: relative;
+		top: 1px;
+	}
+}
+
+.chartexport textarea {
+	margin-top: 10px;
+	width: 100%;
+	height: 10em;
+	resize: vertical;
+}

html_src/sass/layout/_modal.scss

@@ -41,7 +41,7 @@
 }
 
 // "toast"
-.ErrMsg {
+.NotifyMsg {
 	position: fixed;
 	bottom: dist(2);
 	padding: dist(-1) dist(0);
@@ -53,7 +53,11 @@
 	-webkit-font-smoothing: subpixel-antialiased;
 	-webkit-transform: translateZ(0) scale(1.0, 1.0);
 
+	background: #37a349;
+	&.error {
 		background: #d03e42;
+	}
+
 	color: white;
 	text-shadow: 0 0 2px black;
 	box-shadow: 0 0 6px 0 rgba(black, .6);