Controling Hardware Through Web Page problem

I have tried at least 6 different tutorials to turn an LED on and off through a web page. None of them work and all get one error or another.

The most common one is right after the line

var socket = io.connect();

Uncaught ReferenceError: io is not defined.

I followed the instruction to install socket.io 2 or 3 times and think this worked successfully.

I did have to change the src line with socket.io.js in it to stop that from getting an error and I changed it to

I have a new Rev C Beaglebone Black running Debian. Any suggestion or any link or example I can try that can do something as simple as control a GPIO from a web page?

Buy my book, it comes with java script code to do just that J

See link below …

“No one could make a greater mistake than he who did nothing because he could do only a little.”

“All that is necessary for the triumph of evil is that good men do nothing” Edmond Burke (1729 - 1797)

http://www.packtpub.com/building-a-home-security-system-with-beaglebone/book

John,

You have not given us enough information. socket.io does work on the beaglebone black. But a pastebin of the code you’re having problems with would be a good start. Also a step by step of what you’ve done would also be helpful.

Ok Here is a little better explanation of what I did with links to the exact code I used.

I watched and went through 3 tutorials for setting up a web server to control BBB GPIO and even went through the Simon Monk book and downloaded this simple IO example

Here are 3 of the examples I have tried:

Beaglebone and Websockets, a full example that turn on/off a led

http://isolasoftware.it/2012/04/23/beaglebone-and-websockets-a-full-example-that-turn-onoff-a-led/

BoneScript SocketIO Example

https://github.com/lgxlogic/BoneScript-SocketIO

From the Simon Monk book use 09_01_led_control.html and 09_01_led_control_server.js

https://github.com/simonmonk/prog_bbb/find/master

None of these examples work on my BBB. I can control hardware/GPIO using Javascript through Cloud9 or python running directly on the BBB but cannot get it to change an IO through an HTML web app as are shown in these tutorials. And the only way javascript actually ran until I turned off the debugger was to drag and drop it into the autorun folder otherwise they will not run with the debugger on through the cloud9 interface.

When I served up the jQuery/Flot examples on the BBB through a browser at least they seem to work I do not have a bacon cape I have my own custom cape. For now I would like to control only 3 GPIO on the beaglebone through a web page. So far I can only do it through directly running Py or JS. I do get this error, I will eventually need to read/write the UART but I will worry about that once I get the simple GPIO working.

Failed to load resource: the server responded with a status of 404 (Not found)

Which is weird since the “livecss.js” line is not even in the HTML as far as I can see

I did install socket IO and had to change the src line to this(Specific directory link) in order to get it to NOT give an error. Errors are using Chrome debugger. (CTRL-SFT-J)

the first error happens right after the line

var socket = io.connect();

Uncaught ReferenceError: io is not defined.

Then I get an error whenever a button is pushed which is

Uncaught TypeError: Cannot read property ‘emit’ of undefined

Any suggestions or recommendations? I am a hardware engineer trying to learn software to develop code to control a Beaglebone based product I designed. I need to develop remote menus that run on PC, Cell Phone, tablets etc. and after watching these videos/tutorials it seem like using HTML/JS through the server is the way to go. The other option is to add an LCD and develop a Menu through that and do the Server HTML menus later but that adds the LCD acquisition/development,/test to the equation right now, and I want to put that off until we get the system working. I have designed simulated and tested all of the pieces of hardware with simple Python programs but I need to develop an interactive menu based approach so the consumer can control the product.

Any help or suggestion would be greatly appreciated.

Did you install socket.io in the var/lib/cloud9 directory?
I was setting up a fresh flash & forgot to change to the cloud9 directory when running npm install on a few things & bonescript/cloud9 balked all over.
I used the ‘beaglebone & websockets’ code as a base to figure out what I was doing, so I know it works on Angstrom & Debian.

Yes I did try this it didn’t seem to help.

OK I got this one, simpleLED.html to work

https://gist.github.com/jadonk/f89a0f1f0ddef06777de

once I got Ethernet connected. But it ONLY works for USR0-USR3 and not for any other GPIO. If I change the USR to p9_23 it will not toggle p9_23 does anyone know why? I can toggle p9_23 using Python or js but not from the web page.

Bottom line was that the socket IO functions did not quite work right when the BBB was only connected through the USB. Once I connected through an Ethernet connection it all started to work.

Bottom line was that the socket IO functions did not quite work right when
the BBB was only connected through the USB. Once I connected through an
Ethernet connection it all started to work.

They work just fine over USB. The problem is you aren't documenting
enough of your steps for us to tell you where you are going wrong.

OK I got this one, simpleLED.html to work

https://gist.github.com/jadonk/f89a0f1f0ddef06777de

once I got Ethernet connected. But it ONLY works for USR0-USR3 and not for
any other GPIO. If I change the USR to p9_23 it will not toggle p9_23 does
anyone know why? I can toggle p9_23 using Python or js but not from the web
page.

The current BoneScript library tries to load a device tree overlay to
enable the GPIO pin mode. That might cause it to have some delay or
not work the first time you try. The roadmap to fix this is to switch
to cape-universal. That'll be included in the next BoneScript release.

If it works directly with the BoneScript library, it should work the
same via the web interface. All the calls on the web interface are
asynchronous, however, so you might be calling them before the pinMode
completes.

After playing with it I did figure out why it did not work when I linked to it through the USB. I linked through it with the :3000 in the which is the link that I get from Cloud9 when I preview the page. The link was:

192.168.7.2:3000/preview/thermostat.html

I didn’t know that the default/root directory for web pages was /var/lib/cloud9 , I had thought it was the root directory /root and I also didn’t think it mattered where the HTML file was located or how it was linked to through the browser, I thought it would work from any directory through any route. Once I linked to the HTML through a direct route without the :3000 it worked fine.

So when you point to the link given in Cloud9 the HTML/JS program won’t work and I think this is why the Cloud9 preview doesn’t actually run the javascript when you preview the file you create and edit.

So once I linked directly as such
USB
192.168.7.2/thermostat.html

or
Ethernet
130.140.37.188/thermostat.html

Everything did work in both cases.

Some things do work through the preview link in cloud9 and others do not.

Thanks Jason and everyone else for all the help.

John

You specify the .html file location in the server code.
In the isolasoftware.it websockets example:

function handler (req, res) {
```fs.readFile('sock123/index.html',`

When the socketio server receives a request on the specified port (in the example 8090), it reads the file ‘sock123/index.html’
192.128.7.2:3000 is the cloud9 ‘server’
192.168.7.2:8090 would be the sock123 page with buttons to control the LEDs. (assuming you put index.html in the correct location…)
I’m assuming you have thermostat.html in the / directory, I think that’s why it is working, but I’m not sure since you haven’t given us any code to confirm.
When I ran the example, I used ‘/var/lib/cloud9/sock123/index.html’ as the location so I didn’t have to change directories all the time & Could keep the sock123.js & index.html in the same folder under cloud9.