Bitlash Commander: Web UI toolkit for Arduino

Here's a fun little project that provides yet another answer to the frequently-asked question "How can I control my Arduino from a web page?"

Bitlash Commander is a web interface toolkit for Arduino. It is a node.js application that runs on your PC and serves a web page containing buttons and slider controls, easily customized, which trigger Bitlash scripts you specify to control the Arduino over the usb-serial link. The default interface provides basic control over each Arduino I/O pin, and looks like this in the browser:

It's easy to add buttons and sliders connected to your custom scripts on the Bitlash side. A nice feature is that the displays are synchronized across multiple browsers looking at the same dashboard, so the display is always current without refreshing the page.

Bitlash Commander on GitHub: GitHub - billroy/bitlash-commander: Web-based dashboard builder for Arduino.

Happy hacking,

-br

Some updated Commander screenshots:

-br

Man this look exactly like what I have been searching for!

My plan is to have an internet controlled wifi/webcam rover to drive around the house/yard. My biggest issue was that I didn't want to have to install any software on the PC I was controlling it from. So, I plan to have a small PC on the rover with a usb video capture device with a camera connected and will stream the video via windows media encoder. I would have an arduino to handle the forward, backward, left, right of the rover with 2 more channels for the camera pan and tilt and a couple channels for lights, a video switcher etc. I wanted to have a website hosted on the rovers PC that would allow me to open a page with controls for the arduino and the video from the camera. This looks perfect!

Now for the questions;

  1. So, how difficult is it to modify the Bitlash controls? Ideally I would like to have a virtual joystick, basically just a circle with a dot in it that can be dragged with the mouse for driving the rover. Like putting it in the top left would make it steer left while moving forward. Is there a GUI I can use to redesign the Bitlash GUI to be something like this? Do the controls act like a continuous input until released and "auto center" when released? If not, how hard would that be to program? I would want it to stop as soon as I released the slider/joystick or if there was an interruption in the connection.

  2. Could the Bitlash webpage be hosted on the arduino itself like on an ethernet/wifi shield? If possible, I could use an RF solution of getting the video to another PC for the video encoding and not have to have a PC on the rover. Or maybe it would be better to use an XBee between the server and the rover/arduino and only have arduino, and XBee and an RF video TX on the rover.

I think there is a lot of interest in this and will be happy to post the final product/info for others to use.

Thanks!

Thanks for your note…

  1. So, how difficult is it to modify the Bitlash controls? Ideally I would like to have a virtual joystick, basically just a circle with a dot in it that can be dragged with the mouse for driving the rover. Like putting it in the top left would make it steer left while moving forward. Is there a GUI I can use to redesign the Bitlash GUI to be something like this? Do the controls act like a continuous input until released and "auto center" when released? If not, how hard would that be to program? I would want it to stop as soon as I released the slider/joystick or if there was an interruption in the connection.

Moving the controls you see around, changing their size/shape/contents is easy.

But you are proposing something a little more, a new control, an XY-type joystick control. Cool idea. New controls are not hard, but they are integrated pretty deep. They're implemented in javascript in public/svg-controls.js if you want to take a look.

What you're proposing isn't hard. Let me think about it a bit. Meanwhile, you can get a lot of what you want with sliders, for a prototype. Give that a think and see where you can get with it.

  1. Could the Bitlash webpage be hosted on the arduino itself like on an ethernet/wifi shield? If possible, I could use an RF solution of getting the video to another PC for the video encoding and not have to have a PC on the rover. Or maybe it would be better to use an XBee between the server and the rover/arduino and only have arduino, and XBee and an RF video TX on the rover.

Sorry, the smallest thing I believe Commander will run on (so far) is the Raspberry Pi, which I haven't tested yet but understand runs node.js.

But you could use any remote serial connection you like between the PC hosting Commander and Arduino; I routinely talk to remote Bitlash over Bluetooth, for example. I understand it's possible to use XBee for similar, but haven't done it. As long as Commander can open it as a serial port, it can send commands to it.

-br

Well I don't have much programming experience so what environment do I need to use to modify the controls? Also, in searching for something like this, I read that dual inputs, like forward and left can be difficult to implement. Do you think that would be a problem? I am going to give this a try but I am sure it will be a slow process as I will have to learn the programming at the same time.

Thanks

To work on the controls requires only a browser and text editor.

I'm actively developing Commander, so if you check back in a couple days it will probably have an XY control. No guarantees...

Your bigger task is building out the robot side and getting the software to drive it hooked up and under control of the Bitlash interpreter on Arduino. Once you can control your robot from the command line, it's ready for a Commander control panel.

The tricky part about implementing "go forward" and "go left" at the same time is not at the control panel end, it's on the Arduino where you have to work out how to walk and chew gum at the same time. To go forward 10 and left 5, for example, you can just go forward 10 and then go left 5, but most people probably expect that a robot will go forward a little and left a little to more or less move in a straight line. So you end up breaking larger moves into smaller ones you can interlace. That requires a little thought.

-br

Cool, thanks for your efforts. Right now the platform I have is a traditional RC chassis with steerable front wheels and 4wd power. I imagine using a tank control platform like this,

Would be easier.

Regards

That is one cool tank.

Here's a first look at the XY-control. Still some little bugs, but it will be stable soon:

-br

Very cool!

Just brainstorming here but it would be great to have the larger one auto center when released (for driving) and the smaller one to stay where you put it (for pan and tilt). Is that possible?

Yes, there is a property you can specify on the control that controls whether or not an XY slider returns to center.

-br

Sorry, noob here.
In the Install tutorial, i was at the npm install command when it just stopped doing requests. I opened another terminal window, did the node index.js command and I get this error:

module.js:340
    throw err;
          ^
Error: Cannot find module '/Users/Max/index.js'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.runMain (module.js:492:10)
    at process.startup.processNextTick.process._tickCallback (node.js:244:9)

Any help?

Thanks for your note. Hard to know why npm install failed without seeing the output, but it needs to succeed to install all the modules that Commander needs.

The error when you try to start Commander with "node index.js" is the complaint one usually sees when there is no file by the name "index.js" in the current directory. You need to be in the same directory as index.js for "npm install" to succeed, too.

The whole issue may be "standing in the wrong directory". Did you do the "cd bitlash-commander", I wonder? Worth double checking what directory you're in. You'll see the LICENSE and README.md file as well as a few others in that directory, too.

Be standing in the bitlash-commander directory where index.js is and try npm install and node index.js again; it might all work.

Let me know how it goes, and thanks for giving Commander a try.

Best,

-br

I did cd bitlash-commander, node index.js, and now got this:

/Users/Max/bitlash-commander/node_modules/serialport/node_modules/bindings/bindings.js:85
  throw err
        ^
Error: Could not load the bindings file. Tried:
 -> /Users/Max/bitlash-commander/node_modules/serialport/build/Debug/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/build/Release/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/out/Debug/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/Debug/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/out/Release/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/Release/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/build/default/serialport.node
 -> /Users/Max/bitlash-commander/node_modules/serialport/compiled/0.8/darwin/x64/serialport.node
    at bindings (/Users/Max/bitlash-commander/node_modules/serialport/node_modules/bindings/bindings.js:82:13)
    at Object.<anonymous> (/Users/Max/bitlash-commander/node_modules/serialport/serialport.js:7:44)
    at Module._compile (module.js:449:26)
    at Object.Module._extensions..js (module.js:467:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:362:17)
    at require (module.js:378:17)
    at Object.<anonymous> (/Users/Max/bitlash-commander/lib/bitlash.js:6:18)
    at Module._compile (module.js:449:26)

Thanks for sticking with this. It seems to be missing the npm modules, still. In the bitlash-comander directory:

    $ npm install
    $ node index.js

Thanks for your persistence,

-br

Still doesn't work.... same error. Thanks for your help by the way.

Sorry for the delay; I didn't see your reply.

Puzzled here. It's installed correctly many places.

Maybe it would be worth nuking the directory and starting over.

A question: do you have a development environment with a C compiler on that PC? It is required for the node.js serial port driver, and I wonder if that's the issue.

If you have time to give it another try after deleting what you have there, I'd appreciate the feedback.

Best,

-br

Nice work!

Seeing the thread above, I recalled a problem with node and serial port communication I ran into a couple of weeks ago.

It seems like node-serialport has some kind of issue on Mac OSX.
Reported here Problems installing on OSX 10.7.4 w/ Node 0.8.14 · Issue #111 · serialport/node-serialport · GitHub

Could that be lawm's problem?

Anders

How hard is it to come up with my own web interface?