Computing stuff tied to the physical world

Blink Plug meets NG

In Hardware, Software on Jan 29, 2013 at 00:01

Last month, I described how to hook up a JeeNode with a Blink Plug to Node.js via SocketStream (“SS”) and a USB connection. Physical Computing with a web interface!

That was before AngularJS (“NG”), using traditional HTML and JavaCoffeeScript code.

With NG and SS, there’s a lot of machinery in place to interface a web browser with a central Node process. I’ve added a “blink-serial” module to HouseMon to explore this approach. Here’s the resulting web page (very basic, but fully dynamic in both directions):

Screen Shot 2013-01-28 at 19.17.40

The above web page is generated from this client/templates/blink.jade definition:

Screen Shot 2013-01-28 at 18.42.02

There are two more files involved – client/code/modules/ on the client:

Screen Shot 2013-01-28 at 18.43.41

… and briqs/, which drives the whole shebang on the server:

Screen Shot 2013-01-28 at 20.17.40

I’m not quite happy yet with the exact details of all this, but these 3 files are all there is to it, and frankly I can’t quite imagine how a bidirectional real-time interface could be made any simpler – given all the pieces involved: serial interface, server, and web browser.

The one thing that can hopefully be improved upon, is the terminology of it all and the actual API conventions. But that really is a matter of throwing lots of different stuff into HouseMon, to see what sticks and what gets messy.


PS – What’s your take on these screenshots? Ok? Or was the white background preferable?

PPS – Here’s another test, code inserted as HTML – suitable for copying and pasting:

# Define a single-page client called 'main'
ss.client.define 'main',
  view: 'index.jade'
  css: ['libs', 'app.styl']
  code: ['libs', 'app', 'modules']

Update – Yet another approach, using a a WordPress plugin (no Jade / Stylus support?):

# Define a single-page client called 'main'
ss.client.define 'main',
  view: 'index.jade'
  css: ['libs', 'app.styl']
  code: ['libs', 'app', 'modules']
  1. Blue screenshots easy to look at.

  2. Especially the yellow text in the screenshots make me feel like I have to clean my glasses or buy a new monitor and it’s all a bit too colorful for me – too distracting.

  3. Just exploring for now… I switched to a dark background when I noticed that every window was the same white on my screen. With different color schemes in the terminal and editor, I find it easier to map my actions (yes, it’s again about muscle memory…) to each environment.

  4. I like the new code background and syntax coloring. It is easy on the eyes to read and highlights the variables and parameters. Thumps up!

  5. Too much color I”m afraid. Copy-pastable code. could make it slightly better ;-)

  6. I like the new colors better, personally.

  7. I think I prefer the white one, it blends in better.

    The images are especially bad, the font isn’t sharp (probably due to the fact that it was converted to an image). In that respect, the last one (where you can copy the text as well) is somewhat better (though the font size could be a tad bit larger).

  8. I like the effect

  9. Another one for the colours, looks fine to me. I like the separation it gives.

  10. Oh please go with the html, I have a habit of marking code as I read it and trying to do that on an image makes for fun times. Also I can’t hurt to be able to copy-paste the code, easier to ‘borrow’ snippets of awesome.

  11. I don’t have a particularly strong preference for either of the colour schemes—although I’d lean towards white, I can live with blue. However, whichever colour you choose, please use the html version (with a tad larger font, preferably): this would allow for searching, copy/pasting, scaling, etc. I understand how screenshots might be/have been easier to produce, but the html option is so much better so if you have it available…

  12. Thanks for all the input! As was to be expected, such preferences are personal – and are bound to vary. The blue is what I’m trying out right now in the editor, although it doesn’t quite match this weblog’s own color style.

    I hear you loud and clear on the HTML / paste-friendly version. Have made it a habit to include an URL to the code on GitHub (most of the time), but yeah – fixing it in the browser would be nice. As Tcl is nearly un-parseable, I’ve always hesitated to go there, but with the current syntax choices, it’d be feasible.

  13. I also prefer the color version, better on the eyes imho. node.js stuff is awesome, good read, planning to get my hands dirty soon.

  14. Another vote for the blue background with colors. Much easier on these aging eyes :-). Really enjoying and learning a lot from your node.js et-al journey.

  15. @JCW, not sure if you know about ninjablocks, but they seem to be using the same software stack, just with beaglebone / Rpi. check out

    Their code is on github. Looks interesting….

  16. Interesting indeed – thx for the pointer!

  17. Hey! the code is now copy-pastable! Thanks!

Comments are closed.