Web browser a propeller and a com port = how?

Bits

I would like to develop a webpage that communicates to the propeller on a com port. I don't want to send data over the net just commands from a web browser to a com port local machine style.

My idea is to use something like java to bring commands into the browser but I have no clue at this point if java can access a com port. Any ideas?

An example would be to create a button and when clicked it sends a command to the usb port where a propeller sits

<!-- HTML code-->
<input type="button" value="Click me!" onclick="JavaScript:alert('Communicate to propeller here com 3')" />

Thanks

Bits

Loading the driver might be the most difficult part, hum.

Heater.

Easy. On Linux at least.
Install node.js. That is basically the V8 Java script engine from the Google Chrome browser that allows you to run JavaScript as command line apps.
Now install node-serialport. That allows you to then write a Javascript command line app that talks to the Prop over a serial link.
Now install socketio.js. That allows you to add a web socket server to your JavaScript app in about 10 lines of code. That websocket server can relay serial data from the serial port to a web page in a browser.
Now write a web page including some Java script that connects to the web socket server and dislplays the data how you like. Can also send data back to the prop.
Ther you have it, prop to web page with no web server in the middle.
I was about to start a thread on how to do this as it is so simple to create a gui app in a web page talking to your local prop this way.

LoopyByteloose

If you really want a Web browser interface with a com port and more that is programable in JAVA, Maxim's Tini390, 400, 410 is really a better choice for a quick start. I have three boards here, but never really mastered the JAVA.

It does Web pages, Telnet, has 1-wire, a RTC, an I-button socket, CANbus, and more.

http://www.maxim-ic.com/app-notes/index.mvp/id/2792

If you want, you could hang a Propeller on one of the two RS232 ports or connect via I2C

http://www.maxim-ic.com/datasheet/index.mvp/id/3609

Focus on the evaluation kit as the motherboard provides the RTC which is important.
http://www.maxim-ic.com/datasheet/index.mvp/id/4983

And since I see that these are NO LONGER AVAILABLE, I could sell you one at my cost. The biggest advantage is this can be on 24/7 without passing through your desktop computer and it is very low power.

mindrobots

Bits,

I've been playing with socat (a netcat utility on steroids) to make my USB connected propeller visible as an IP address and a port so I could use socket I/O to talk to it. I figured almost everything can support IP:port type I/O in one fashion or another but sometimes pure serial port I/O is hard to find.

It has worked well in my limited testing. I am able to hang a Propeller off a USB port and then map its serial port (COMx: or /dev/ttyUSBxx) to an IP port. OK, now here's the painful part for most folks. My Propellers are often running PropForth, so once socat is running, I can telnet to my PropForth session from the local host or any host on the network. Plus, I can write programs that do socket I/O and carry them from OS to OS more easily without worrying about the com port support or go from language to language without scrounging for a serial library (most everything supports socket I/O).

The next step is to replace the USB with Bluetooth or Wixel and go wireless.

Your experiences may vary but it's worked for me so far. Search for socat, it's available for most linux distros and also there is a Windows version.

[EDIT: Ooooh, I like Heater's solution! I'll patiently wait for his demo thread about node.js]

Bits

Ah,

Its has to be windows, Linux would have to come later. It also would have to run on all browsers so would java indeed be best avenue to proceed? Ill have to learn java but I want to make sure its the best choice.

I would also like to create a plots that receives data from the propeller PCB I designed.

absorbance vs. wavelength (nm)
Temperature vs. time
etc.

Heater.

Javascript (not Java) is available on all main stream browsers.
The beauty of node.js is that you can write that 50 lines or so to connect between browser and serial port in the same language, Javascript, so not too many things to learn.

The only reason I say Linux is that while node.js runs on Windows I'm not sure yet if the serial port module works on Windows yet.

That socat solution sounds like the linux ser2net that moves data from a serial port to a socket connection. But that still leaves the problem of connecting to a web page. Unless your prop implements HTTP and perhaps the web socket protocol
Which sounds like a bit much to ask.

mindrobots

@Heater, you're right about socat!

socat = bad solution!
node.js = good solution!!

Heater.

OK. I'll try to find time to press ahead with my Prop->serial->node.js->browser thread A.S.A.P.
Now that I know what to call it:)

Phil Pilgrim (PhiPi)

Bits,

Attached is a program that will do what you want. It runs from a console window, but you can create a Windows shortcut for it, once you have determined the correct parameters to run it. Type serial_data_server without arguments for a help screen that describes the parameters that it takes. Once started, it creates a link between an IP port and a serial port on the same computer. To halt the server, hit Ctrl-C in the console window.

Here is a simple web page that illustrates its use. You will have to change the part in red to match your own server's address:

<html>
  <script>
    var xmlDoc = null ;

    function send_data(data) {
      if (typeof window.ActiveXObject != 'undefined' ) {
        xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      }
      else {
        xmlDoc = new XMLHttpRequest();
      }
      xmlDoc.open( "GET", 'http://[color=red]rhino:12345[/color]/data?'.concat(data), true );
      xmlDoc.send( null );
    }
  </script>

  <body>
  	Press a button:&nbsp;
    <button onclick="send_data('1')">Turn On</button> &nbsp;
    <button onclick="send_data('0')">Turn Off</button>
  </body>
</html>

Here is a Prop program that responds to requests from the above webpage. It should be stored in EEPROM, since the server may reset the Prop when started or stopped.

CON

  _clkmode      = xtal1 + pll16x
  _xinfreq      = 5_000_000

  LED_PIN       = 26

OBJ

  sio   : "FullDuplexSerial"

PUB start | ch

  sio.start(31, 30, 0, 9600)
  dira[LED_PIN]~~
  repeat
    if ((ch := sio.rx) == "1")
      outa[LED_PIN]~~
    elseif (ch == "0")
      outa[LED_PIN]~

BTW, the program also works to receive data from the Prop. Anything the Prop sends after receiving data from the server, and before a 100 ms timeout, gets sent back to the browser as an HTTP text/plain document.

-Phil

Bits

Phil

So far this looks cool but here is what I am wondering.

I have my PC and next to it is the propeller device. Do I still need an ip-address on the client side of things? Can I use 127.0.0.1 as a substitute?

Heater.

Phil,
That is a good solution in many simple cases.
It does require that your Prop implements HTTP and the web pages that it serves up.
What if you want a web page that displays a real time graph of various measurements the Prop is making? Say temperture, pressure, acceleration, whatever.
Then your Prop is full of code doing that and only producing a simple telemetry stream over serial.
Then what if you want command back to the Prop to control this and that?
At that point you have a serious web server in the Prop which it does not have space to handle.
Putting a little inteligence in the PC gives you the chance to have simple data out from the Prop and simple commands back to the Prop. All the heavy lifting happens in the browser. Perhaps even 3d visualization of the data the Prop is producing with webgl.
With node.js and web sockets you can get real time display. I have a system doing this that updates the web page graph 10 times per second.

Bits

Phil
I run the server doing the following

I type

serial_data_server.exe com=70 baud=19200 port=12345 echo=tx

I keep getting an error. Where did i go wrong?

Error states
Missing or invalid comm parameter

Heater you bring up a good point but I have to test Phils code nevertheless.

Phil Pilgrim (PhiPi)

Bits,

It's comm, not com.

-Phil

Phil Pilgrim (PhiPi)

heater wrote:

That is a good solution in many simple cases.

And that's all it was meant to be. It's actually half of a serial-to-IP-to-serial server/client combo that I wrote awhile back, modified only slightly for Bits' app. I really should simplify it further, so that the server does not return the Prop's data with an HTTP header.

heater wrote:

What if you want a web page that displays a real time graph of various measurements the Prop is making? Say temperture, pressure, acceleration, whatever.

In that case, use HTML5 and Ajax techniques with Javascript to draw the graph in a canvas object from the raw data that the Prop returns. There really isn't much need these days for fancy servers to mediate the presentation.

-Phil

Heater.

Yes, yes. Test everything. I have used such serial to net programs many times to get old gear on to the net. Normally though there is some custom software needed to get the data out of the old serial protocol and into xpsome web server.

Heater.

Phil,
Yes HTML5 and AJAX.
But my plan is HTML5 and a dead simple websocket connection.
There is no fancy web server, if you are doing this locally on your PC, only a few tens of lines of Javascript running under node.js and your browser picking up the web page from a file in your local file system.
No more onerous than using a Perl script as an intermediory.

Phil Pilgrim (PhiPi)

Bits,

'Sorry I missed your first question. Yes, you can use 127.0.0.1, followed by a colon and the port number, e.g. 127.0.0.1:12345. For some reason, Windows does not like localhost, though.

-Phil

Bits

Perhaps that is my issue, I was using 12345 as noted in the console. Tomorrow ill try again, so far no luck.

Time to go home have some wine, relax in a hot bath and read data sheets! Yea.

Phil Pilgrim (PhiPi)

Bits,

The correct way for you to start the program, based on what you've told me so far is:

serial_data_server.exe comm=COM70 baud=19200 port=12345 echo=tx (Note: two m's in comm; COM in value.)

In your webpage, the line that specifies the host address would read:

xmlDoc.open( "GET", 'http://127.0.0.1:12345/data?'.concat(data), true );

-Phil

Bits

Phil,

Got a new error states

[b]C:\>serial_data_server.exe comm=COM70 baud=19200[/b]


*** PhiPi Serial-Network-Serial Server ***


Please connect using URL: http://electronics:12345
Connecting to COM70...
Access is denied.


PLEASE SEE THE PERL2EXE USER MANUAL UNDER "Can't locate somemodule.pm in @INC"
FOR AN EXPLANATION OF THE FOLLOWING MESSAGE:
Can't locate Carp/Heavy.pm in @INC (@INC contains: PERL2EXE_STORAGE C: C:\Users\
Michael\AppData\Local\Temp/p2xtmp-4260) at PERL2EXE_STORAGE/Carp.pm line 178, <D
ATA> line 164.

I think its time to learn javascript. Thanks for giving me a shot at it.

Phil Pilgrim (PhiPi)

Bits,

You give up too easily. The program is doing what it's supposed to. Access was denied to COM70, either because another program on your PC is using it, or because there's no device with that number plugged into the machine. In the former case, stop the other program that's using it, and try again. In the latter case, make sure the Prop is plugged in, and use F7 in the Prop Tool to find the correct COM port number. (Ignore the other garbage that came after. There's an error-reporting module missing from the exe, but that's a non-issue when you're connected properly.)

-Phil

Bits

Yes!

I did not give up but found that com 70 is being used by another prop. :frown: Ill do again this time com 25. Thanks

Bits

Impressive Phil. I have it running a stepper motor instead of leds and its awesome.

Questions

1, is the source code available for the server program?
2, can I create a text box on the webpage and send the number to the server program? Floating and non-floating values?

Phil Pilgrim (PhiPi)

Answers:

1. Yes, attached with a new version of the exe that includes the missing module.
2. Yes, yes, and yes. The data are sent to the Prop as text, so your Spin program will have to convert the ASCII to the values you want to use. Sending text from a text box (i.e. <input> tag) requires accessing it in the DOM and retrieving the value property when a Send button is pressed. I would bypass the usual form/submit routine, because that will entail waiting for and displaying a response from the server, and you don't want your original webpage to go away So you will have to do it in JavaScript.

-Phil

Bits

Okay the more complex question

How would I connect through a gateway. I see the webpage has this ip address

xmlDoc.open( "GET", 'http://192.167.1.1:12345/data?'.concat(data), true );

But this is my network ip-address my real ip address is something closer to 208.89.163.80

Phil Pilgrim (PhiPi)

To connect from outside your local network, you would have to make sure that your firewall lets you accept connections via the chosen port (e.g. 12345), and set your router to direct those connections to the PC on which serial_data_server is running. Then use your real IP address in the xmlDocOpen command instead of the local network address.

-Phil

Bits

Thank you Phil

Where can I obtain the source code? The attachment you left is only executable form.

Phil Pilgrim (PhiPi)

The Perl source code for the server is in the zip I posted above (post #25). Do you program in Perl? What were you planning to do with the source?

-Phil

Bits

Nope never programmed in pearl and I don't intend on doing anything more than looking around. I take it I cant simply open this file up in a text editor.

If I see that if this will work out, I would like to somehow make an application that can install the FTDI driver and scan the PC ports, find my spectrometer PCB (using the propeller I might add, and boy do I need a prop II soon) and connect to it.

Again thanks.

Phil Pilgrim (PhiPi)

Bits wrote:

I take it I cant simply open this file up in a text editor.

The serial_data_server.pl file is just ASCII text, so yes, you can open it in a text editor.

BTW, here's an HTML file that shows how to send data from a text field:

<html>
  <script>
    var xmlDoc = null ;

    function send_data(data) {
      if (typeof window.ActiveXObject != 'undefined' ) {
        xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
      }
      else {
        xmlDoc = new XMLHttpRequest();
      }
      xmlDoc.open("GET", 'http://127.0.0.1:12345/data?'.concat(data, 'x'), true );
      xmlDoc.send(null);
    }
  </script>

  <body>
  	Press a button:&nbsp;
    <button onclick="send_data('255')">Turn On</button> &nbsp;
    <button onclick="send_data('0')">Turn Off</button> or<p>
    Set Brightness: <input id="brightness" size="3"><button onclick="send_data(document.getElementById('brightness').value)">&lt; Send</button>
  </body>
</html>

Here's the Spin program that it controls:

CON

  _clkmode      = xtal1 + pll16x
  _xinfreq      = 5_000_000

  LED_PIN       = 26

OBJ

  sio   : "fullduplexserial"

PUB start

  sio.start(31, 30, 0, 9600)
  ctra := %00110 << 26 | LED_PIN
  dira[LED_PIN]~~
  repeat
    frqa := (decin #> 0 <# 255) << 24

PUB decin : value | ch

  repeat while ((ch := sio.rx) => "0" and ch =< "9")
    value := value * 10 + ch - "0"

-Phil