Moved advanced features, added a bit more functionality

p5-serial · Sep 26, 2016 · e0b3fde · e0b3fde
1 parent fd8a30d
commit e0b3fde
Showing 1 changed file with 60 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -8,9 +8,13 @@
 		// Declare a "SerialPort" object
 		var serial;
 
+		var portListDiv;
+
 		var portSelect;
 		var selectedPort;
 
+		var rescanPorts;
+
 		var connectButton;
 		var disconnectButton;
 
@@ -26,17 +30,24 @@
 		function setup() {
 			createCanvas(1, 1);
 
+			portListDiv = select("#serialports");
+
 			// GUI controls
  			portSelect = createSelect();
  			portSelect.option("No Ports Found");
 			portSelect.parent(select("#portselectdiv"));
 
+			rescanPorts = select("#rescan");
+			rescanPorts.mousePressed(function() {
+				serial.list();
+			});
+
 			connectButton = select("#connect");
 			connectButton.mousePressed(connectPressed);
 			disconnectButton = select("#disconnect");
 			disconnectButton.mousePressed(disconnectPressed);
 
-			serialConsole = select("#serialconsole");
+			serialConsole = select("#serialconsole");	
 			serialConsoleEnabledCheckbox = select("#serialconsoleenabled");
 			serialConsoleEnabledCheckbox.elt.addEventListener('change', serialConsoleSwitch);
 
@@ -107,11 +118,17 @@
 			//This isn't working - Looks like p5.dom bug
 			//newPortSelect.changed(portSelected);
 			portSelect.elt.addEventListener('change', portSelected);
-
+
+			if (portListDiv) {
+				portListDiv.elt.innerHTML = "";
+			}
 
 			for (var i = 0; i < thelist.length; i++) {
 				seriallog(i + " " + thelist[i]);
 				portSelect.option(thelist[i]);
+				if (portListDiv) {
+					portListDiv.elt.innerHTML += "<br />\n" + thelist[i];
+				}
 			}
 		}
 
@@ -199,37 +216,71 @@
 		function seriallog(txt) {
 			//console.log(txt + "\n");
 			if (serialConsoleEnabled) {
+				if (serialConsole.elt.value.length >= 800)
+				{
+					serialConsole.elt.value = serialConsole.elt.value.substring(400);
+				}
 				serialConsole.elt.value += txt + "\n";
+				serialConsole.elt.scrollTop = serialConsole.elt.scrollHeight;
 			}
 		}
 
+ 	  function keyPressed() {
+		  if (keyCode === ESCAPE) {
+		  	toggleAdvancedFeatures();
+		  }
+	  }
+
+	  function toggleAdvancedFeatures() {
+		var advancedFeatures = document.getElementsByClassName("advanced");
+		for (var i = 0; i < advancedFeatures.length; i++) {
+			if (advancedFeatures[i].style.visibility == "hidden") {
+				advancedFeatures[i].style.visibility = "visible";
+				advancedFeatures[i].style.height = "auto";
+			} else {
+				advancedFeatures[i].style.visibility = "hidden";
+				advancedFeatures[i].style.height = "0px";
+			}
+		}	   
+	  }
+
  	  </script>
 	  <style> 
 	  	body {padding: 10; margin: 10;} 
-	  	div {padding: 10; margin: 10;}
+	  	div {padding: 5; margin: 5;}
+	  	.advanced {visibility: hidden; height: 0px;}
 	  </style>
 	</head>
 	<body>
 		<div>
 			<h1>p5 Serial Control</h1>
-			<p>A GUI application for running, monitoring, and basic control of the p5.serialserver.</p>
+			<p>A GUI application for running and monitoring of the p5.serialserver.</p>
 			<p>This application runs the p5.serialserver which enables connectivity between a local serial device and a web application via the p5.serialport p5.js library. </p> 
-			<p>It is recommended that you select, open, and close serial ports via your p5 sketch rather than this application but the methods for doing so for simple debugging are available here as well.  Please note that if you "Open" or "Close" here it will also effect your sketch (opening/closing here will also open/close it for your sketch).</p>
+			<p class="advanced">It is recommended that you select, open, and close serial ports via your p5 sketch rather than this application but the methods for doing so for simple debugging are available here as well.  Please note that if you "Open" or "Close" here it will also effect your sketch (opening/closing here will also open/close it for your sketch).</p>
+
 		</div>
-		<div id="portselectdiv">
+		<div id="availablePorts">
+			<b>Available Ports</b>
+
+			<div id="serialports">
+				No Ports Found
+			</div>
+			<input type="button" id="rescan" value="List Ports">
+		</div>
+		<div id="portselectdiv" class="advanced">
 			<b>Select Serial Port:</b>
 		</div>
-		<div>
+		<div id="controls" class="advanced">
 			<input type="button" id="connect" value="Open">
 			<input type="button" id="disconnect" value="Close">
 		</div>
 		<div>
 			<b>Serial Console:</b> <br />
 			<b>Enabled:</b> <input id="serialconsoleenabled" type="checkbox" value="true" checked><br />
 			<input type="button" id="clear" value="Clear">
-			<textarea id="serialconsole" cols=80 rows=20></textarea>
+			<textarea id="serialconsole" cols=80 rows=20></textarea><br />
 		</div>
-		<div>
+		<div id="sendserial" class="advanced">
 			Send (ASCII):
 			<input type="text" id="message" size=80><input type="button" id="send" value="Send">
 		</div>