Merge pull request #13 from kaganjd/master

Show IP address in app, restructure project, add dev documentation

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -6,4 +6,32 @@ Runs and controls p5.serialserver (no need to install and run it separately)
 
 Download a release here: [releases](https://github.com/vanevery/p5.serialcontrol/releases)
 
-(push ESC twice to see all features)
+## OSX Development
+**Install dependencies**
+
+1.  `npm install`
+
+**Rebuild serialport library (more on this [here](https://stackoverflow.com/questions/40254287/electron-and-serial-ports))**
+
+1.  `rm -rf node_modules/serialport/build/*`
+1.  `node_modules/.bin/electron-rebuild -w serialport -f`
+
+## OSX Compilation
+1.  `npm install electron-packager`
+1.  `electron-packager ./ p5.serialcontrol --arch=x64 --platform=darwin --overwrite`
+
+## Windows Development
+**Install dependencies**
+
+1.  `npm install`
+
+**Rebuild serialport library**
+
+1.  `cd p5.serialcontrol/node_modules/p5.serialserver/node_modules/serialport`
+1.  `HOME=~/.electron-gyp node-gyp rebuild --target=1.7.8 --arch=x64 --dist-url=https://atom.io/download/atom-shell`
+
+Note: `target` is the Electron version and should match `version` below
+
+## Windows Compilation
+1.  `npm install electron-packager`
+1.  `electron-packager ./ p5.serialcontrol --version=1.7.8`

client/css/style.css

@@ -0,0 +1,9 @@
+body {
+  padding: 10; 
+  margin: 10;
+} 
+
+div {
+  padding: 5; 
+  margin: 5;
+}

client/script.js

@@ -0,0 +1,3 @@
+require('electron').ipcRenderer.on('send-ip', (event, message) => {
+  document.getElementById('serialIp').innerHTML = message
+})

sketch.js → client/sketch.js

@@ -1,37 +1,53 @@
 // Declare a "SerialPort" object
 var serial;
-var latestData = "waiting for data";  // you'll use this to write incoming data to the canvas
-
-var portText = "Select a Port:";
-var portDiv;
+var portListDiv;
 var portSelect;
-var portParagraph;
 var selectedPort;
-
-var connectText = "Connect";
-var connectDiv;
+var rescanPorts;
 var connectButton;
-
-var closeText = "Close Connection";
-var closeDiv;
-var closeButton;
+var disconnectButton;
+var serialConsoleEnabledCheckbox;
+var serialConsoleEnabled = false;
+var serialConsole;
+var clearButton;
+var sendMessage;
+var sendButton;
+var consoleBuffer = [];
+var lastConsoleLogTime = Date.now();
+var LOGWAIT = 500;
 
 function setup() {
 	createCanvas(1, 1);
 
-	portDiv = createDiv();
-	portParagraph = createP(portText);
-	portParagraph.parent(portDiv);
+	portListDiv = select("#serialports");
 
-	connectDiv = createDiv("");
-	connectButton = createButton(connectText);
-	connectButton.parent(connectDiv);
+	// 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");	
+	serialConsoleEnabledCheckbox = select("#serialconsoleenabled");
+	serialConsoleEnabledCheckbox.elt.checked = false;
+	serialConsoleEnabledCheckbox.elt.addEventListener('change', serialConsoleSwitch);
+
+	clearButton = select("#clear");
+	clearButton.elt.addEventListener('click', clearPressed);
+	//clearButton.mousePressed("clearPressed");
 
-	closeDiv = createDiv("");
-	closeButton = createButton(closeText);
-	closeButton.parent(closeDiv);
-	closeButton.mousePressed(closePressed);
+	sendButton = select("#send");
+	sendMessage = select("#message");
+	sendButton.elt.addEventListener('click', sendPressed);
 
 	// Instantiate our SerialPort object
 	serial = new p5.SerialPort();
@@ -80,28 +96,71 @@ function serverConnected() {
 
 // Got the list of ports
 function gotList(thelist) {
-	log("List of Serial Ports:");
-
+	seriallog("Available Serial Ports:");
+		
 	if (portSelect) {
-		portSelect.remove();	
+		portSelect.remove();
+	}
+
+	portSelect = createSelect();
+	portSelect.parent(select("#portselectdiv"));
+
+	//This isn't working - Looks like p5.dom bug
+	//newPortSelect.changed(portSelected);
+	portSelect.elt.addEventListener('change', portSelected);
+
+	if (portListDiv) {
+		portListDiv.elt.innerHTML = "";
 	}
- 	portSelect = createSelect();	
-	portSelect.parent(portDiv);
 
 	for (var i = 0; i < thelist.length; i++) {
-		log(i + " " + thelist[i]);
+		seriallog(i + " " + thelist[i]);
 		portSelect.option(thelist[i]);
+		if (portListDiv) {
+			portListDiv.elt.innerHTML += "<br />\n" + thelist[i];
+		}
 	}
 }
 
+function portSelected() {
+	selectedPort = portSelect.value();
+		connectButton.show();
+}
+
 function connectPressed() {
-	seriallog("Here");
-	seriallog("Opening: " + portSelect.value());
-	serial.open(portSelect.value());
+	if (!selectedPort) {
+		selectedPort = portSelect.value();
+	}
+	seriallog("Opening: " + selectedPort);
+	serial.open(selectedPort);
+
+		connectButton.hide();
+		disconnectButton.show();
 }
 
-function closePressed() {
+function disconnectPressed() {
+	seriallog("Closing: " + selectedPort);
 	serial.close();
+
+		disconnectButton.hide();
+		connectButton.show();
+}
+
+function serialConsoleSwitch() {
+	if (serialConsoleEnabledCheckbox.checked()) {
+		serialConsoleEnabled = true;
+	} else {
+		serialConsoleEnabled = false;
+	}
+}		
+
+function clearPressed() {
+	serialConsole.elt.value = "";
+}
+
+function sendPressed() {
+	serial.write(sendMessage.elt.value);
+	sendMessage.elt.value = "";
 }
 
 function gotOpen() {
@@ -145,5 +204,28 @@ function draw() {
 }
 
 function seriallog(txt) {
-	console.log(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;
+
+	consoleBuffer.push(txt);
+		if (lastConsoleLogTime + LOGWAIT < Date.now()) {
+			if (serialConsole.elt.value.length >= 800)
+			{
+				serialConsole.elt.value = serialConsole.elt.value.substring(400);
+			}
+			serialConsole.elt.value += consoleBuffer.join("\n");
+			serialConsole.elt.scrollTop = serialConsole.elt.scrollHeight;
+
+			lastConsoleLogTime = Date.now();
+			consoleBuffer.length = 0;
+			console.log("wrote to text area " + consoleBuffer.length);
+		}
+	}
 }