Skip to content

Commit

Permalink
Basics working
Browse files Browse the repository at this point in the history
  • Loading branch information
@vanevery
vanevery committed Sep 24, 2016
1 parent 95c9d21 commit fd8a30d
Showing 1 changed file with 227 additions and 2 deletions.
229 changes: 227 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,234 @@
<script language="javascript" type="text/javascript" src="p5.js"></script>
<script language="javascript" type="text/javascript" src="p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="p5.serialport.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<style> body {padding: 0; margin: 0;} </style>
<script language="javascript" type="text/javascript">
// Declare a "SerialPort" object
var serial;

var portSelect;
var selectedPort;

var connectButton;
var disconnectButton;

var serialConsoleEnabledCheckbox;
var serialConsoleEnabled = true;
var serialConsole;

var clearButton;

var sendMessage;
var sendButton;

function setup() {
createCanvas(1, 1);

// GUI controls
portSelect = createSelect();
portSelect.option("No Ports Found");
portSelect.parent(select("#portselectdiv"));

connectButton = select("#connect");
connectButton.mousePressed(connectPressed);
disconnectButton = select("#disconnect");
disconnectButton.mousePressed(disconnectPressed);

serialConsole = select("#serialconsole");
serialConsoleEnabledCheckbox = select("#serialconsoleenabled");
serialConsoleEnabledCheckbox.elt.addEventListener('change', serialConsoleSwitch);

clearButton = select("#clear");
clearButton.elt.addEventListener('click', clearPressed);
//clearButton.mousePressed("clearPressed");

sendButton = select("#send");
sendMessage = select("#message");
sendButton.elt.addEventListener('click', sendPressed);

// Instantiate our SerialPort object
serial = new p5.SerialPort();

// Callback for list of ports available
serial.on('list', gotList);

// Get a list the ports available
// You should have a callback defined to see the results
serial.list();

// Here are the callbacks that you can register

// When we connect to the underlying server
serial.on('connected', serverConnected);

// When we get a list of serial ports that are available
// OR
//serial.onList(gotList);

// When we some data from the serial port
//serial.on('data', gotData);
// OR
//serial.onData(gotData);

// When or if we get an error
serial.on('error', gotError);
// OR
//serial.onError(gotError);

// When our serial port is opened and ready for read/write
serial.on('open', gotOpen);
// OR
//serial.onOpen(gotOpen);

// Callback to get the raw data, as it comes in for handling yourself
serial.on('rawdata', gotRawData);
// OR
//serial.onRawData(gotRawData);
}

// We are connected and ready to go
function serverConnected() {
seriallog("Connected to Server");
}

// Got the list of ports
function gotList(thelist) {
seriallog("Available Serial Ports:");

if (portSelect) {
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);


for (var i = 0; i < thelist.length; i++) {
seriallog(i + " " + thelist[i]);
portSelect.option(thelist[i]);
}
}

function portSelected() {
selectedPort = portSelect.value();
// connectButton.show();
}

function connectPressed() {
if (!selectedPort) {
selectedPort = portSelect.value();
}
seriallog("Opening: " + selectedPort);
serial.open(selectedPort);

// connectButton.hide();
// disconnectButton.show();
}

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() {
seriallog("Serial Port is Open");
}

// Ut oh, here is an error, let's log it
function gotError(theerror) {
seriallog(theerror);
}

// There is data available to work with from the serial port
function gotData() {
// var currentString = serial.readLine(); // read the incoming string
// trim(currentString); // remove any trailing whitespace
// if (!currentString) return; // if the string is empty, do no more
// log(currentString); // log the string
// latestData = currentString; // save it for the draw method
}

// We got raw from the serial port
function gotRawData(thedata) {
seriallog(thedata);
}

// Methods available
// serial.read() returns a single byte of data (first in the buffer)
// serial.readChar() returns a single char 'A', 'a'
// serial.readBytes() returns all of the data available as an array of bytes
// serial.readBytesUntil('\n') returns all of the data available until a '\n' (line break) is encountered
// serial.readString() retunrs all of the data available as a string
// serial.readStringUntil('\n') returns all of the data available as a string until a specific string is encountered
// serial.readLine() calls readStringUntil with "\r\n" typical linebreak carriage return combination
// serial.last() returns the last byte of data from the buffer
// serial.lastChar() returns the last byte of data from the buffer as a char
// serial.clear() clears the underlying serial buffer
// serial.available() returns the number of bytes available in the buffer
// serial.write(somevar) writes out the value of somevar to the serial device

function draw() {
}

function seriallog(txt) {
//console.log(txt + "\n");
if (serialConsoleEnabled) {
serialConsole.elt.value += txt + "\n";
}
}

</script>
<style>
body {padding: 10; margin: 10;}
div {padding: 10; margin: 10;}
</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>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>
</div>
<div id="portselectdiv">
<b>Select Serial Port:</b>
</div>
<div>
<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>
</div>
<div>
Send (ASCII):
<input type="text" id="message" size=80><input type="button" id="send" value="Send">
</div>
</body>
</html>

0 comments on commit fd8a30d

Please sign in to comment.