December 2, 2013
My third day with the Beaglebone
My second day with the BBB went pretty well.
I connected and controlled an external LED, and was able to run a demo web
page that (pretty much by accident) controlled my external LED.
As a warm up today, I fiddled with a JQuery, socket.io demo application and
set up a simple GUI that just has a "togglebutton" to turn the external LED
on and off. Two files, both hosted on the beagle, 134 lines of code.
The files are eremote.js and eremote.html. I run "node eremote.js" on
the beagle and this sets up a server on port 1776. This server hands
eremote.html to whatever browser/client talks to it. It is all hosted on
the beagle, so it is self contained - which appeals to me a lot.
It has worked fine on linux firefox and chrome, as well as on firefox
on my windows 7 machine.
So it is time to step back and ponder how all the pieces are going together.
- Ignore the buggy time wasting Cloud 9 IDE.
- Use good old vim to edit files on the Beagle.
- Run server side javascript via "node file.js".
- Use the chrome javascript debugger (Ctrl-Shift-J brings it up).
Learning new tricks
I am an old hand with vim, so that is the least of my problems, other
than the fact that they have it set up oddly on the Beagle. There are
a number of new technologies to master:
- Javascript itself - which I have some experience with and like.
- Node.js - a relatively pleasant server side javascript library.
- socket.io - a very nice scheme for browser-server communication.
- JQuery - a browser side javascript library.
- HTML 5 - introduces new widgets that I don't strictly need, but like.
These are all pretty mainstream web development technologies these days.
There are other ways that could have been used to write the code that runs
on the Beagle. Many people code in python for example. This would leave
the issue of putting together a client side GUI, and python has always
annoyed me with its "meaningful whitespace" -- a bad idea whose time has come.
Given the choice of javascript versus python, it would be javascript every
time -- and with the GUI development synergy it has going for it these days,
it is an irresistable choice.
Here are some links and resources to help learn the above technologies:
JQuery version
The chrome console kept showing this warning every time my script starts up:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
This actually traces to inside of JQuery. Apparently this has been fixed in
more recent versions of JQuery (they claim 1.11 and later). My demo script is
explicitly calling out JQuery 1.9.1, when I switched to calling out 2.0.3 this
warning went away.
This raises an interesting quesiton though, and that is what version of JQuery
to call out. The recommendation is to have your application obtain JQuery from
a CDN (a public URL) and to specify an explicit 3 place version number.
This allows caching (not that it matters for this application), and giving
a specific version avoids surprises. If you call out version 2.0, you will
get whatever the latest version is, which may change unexpectedly and cause
problems if there are bugs (or API changes).
I am going with version 2.0.3
JQuery Mobile
This has a nice gadget they call a toggleswitch. So I am dragging this into my GUI also.
It is just some visual sugar on top of a select widget, but I like it.
It is currently at version 1.3.2
Feedback? Questions?
Drop me a line!
Tom's Computer Info / tom@mmto.org