Jump to content
zlalanne

Serial Data GUI

Recommended Posts

I created a quick project to start learning nodejs. To those that are unfamiliar nodejs allows you to write javascript for the server side. So I decided to write a small gui that plots serial data. The GUI itself is written in javscript/html and uses node-webkit to package it into a .exe file (or the correct package for your os).

 

This could easily be extended to visualize a lot more I/O from the launchpad, and given that the GUI is written in html/javascript it is really easy to create new elements.

 

post-3-0-10932700-1393852095_thumb.png

 

Here is the source:

https://github.com/zlalanne/node-serial-gui

 

The repository includes the nodejs code as well as a simple Energia sketch to send a random value over serial.

Share this post


Link to post
Share on other sites

I created a quick project to start learning nodejs. To those that are unfamiliar nodejs allows you to write javascript for the server side. So I decided to write a small gui that plots serial data. The GUI itself is written in javscript/html and uses node-webkit to package it into a .exe file (or the correct package for your os).

 

This could easily be extended to visualize a lot more I/O from the launchpad, and given that the GUI is written in html/javascript it is really easy to create new elements.

 

attachicon.gifnodejs_msp430_serial_gui.png

 

Here is the source:

https://github.com/zlalanne/node-serial-gui

 

The repository includes the nodejs code as well as a simple Energia sketch to send a random value over serial.

 

Very neat application. Always wanted to do some server side plotting. Will have to take a look into this.

Share this post


Link to post
Share on other sites

Thanks. My favorite part about this is that it it's just HTML/CSS/JS so it's really easy to expand and customize. Plus there are so many open source javascript libraries that there is a lot you could do. I've recently started looking at http://d3js.org/.

Share this post


Link to post
Share on other sites

Glad it worked on Linux, didn't have a chance to try it yet. Any modifications needed to the html/js?

 

I'd like to put some sort of Grunt task to build and run the executable. Haven't done too much with Grunt yet though.

Share this post


Link to post
Share on other sites

I added a \r\n to the output and used the parser feature of serialport to strip it off.  Initially there seemed to be a buffering problem and I was only getting half reads of the data values.

@@ -113,11 +113,13 @@
             $("#formData").html(html);
         });

-        var SerialPort = require("serialport").SerialPort;
+       var com = require('serialport');
+
         $("#serialForm").submit(function(event) {
           portNum = $("#formData").val();
-          var port = new SerialPort(portNum, {
-            baudrate: 9600
+          var port = new com.SerialPort(portNum, {
+            baudrate: 9600,
+           parser: com.parsers.readline('\r\n')
           });
           port.on("open", function() {
             console.log('open');

Share this post


Link to post
Share on other sites

For me i think think the biggest benefit is writing and designing a simple GUI is way easier in JS/HTML/CSS. And node-webkit makes it really simple to build and distribute a GUI out of those.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...