MarcAThing.com » iobridge

Pure HTML ioBridge Proxy example (no javascript)

Marc Fonteijn — Wed, 24 Jun 2009 20:20:47 +0000

I described earlier how you can use the ioBridge proxy as an easy API to control your ioBridge module with anything that can make a http call. The examples I in that post and also in the one on how to control your Serial LCD both utilize Javascript. There might be situations where you can’t (or don’t want to) use Javascript, for instance on an phone with an outdated browser. The good thing about the ioBridge proxy is that you don’t have to use javascript at all, just create correctly formed urls to control the ioBridge module.

There are just 3 url’s that let you control everything:

Execute widget / get value: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx
Set the digital output state of a widget: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=[0|1]
Set the value of a serial widget: http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=somevalue

I’ve created an example that uses only plain HTML. The examples uses an iFrame as target for the links, this prevents the browser from navigating away from the current page.


<html>
  <head>
    <title>ioBridge Proxy API example</title>
  </head>
  <body>
    <div id="container">
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx" target="placeholder">execute</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx" target="placeholder">getValue</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=1" target="placeholder">setState(on)</a>
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&state=0" target="placeholder">setState(off)</a>      
      <a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=abcd" target="placeholder">setValue</a>
    </div>
    <iframe id="placeholder" name="placeholder">Your browser does not support iframes. Too bad for you.</iframe> 
  </body>
</html>

And here’s a example on how to control the LCD just by using HTML.


<html>
  <head>
    <title>ioBridge Serial LCD control</title>
    <style>
      textarea {
        color: #8DF; 
        background-color: #023; 
        padding: 0.25em;
        margin: 0em;
        line-height: 1.2em;
        border: 1px solid #000; 
        font-size: 36px; 
        font-family: monospace;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div>
        <form action="http://yourserver.com/iobridge-proxy.php" method="get" target="placeholder">
          <textarea row="2" cols="16" id="message" name="value"></textarea>
          <input type="hidden" name="widgetID" value="xxxxxxxxxxxx" />          
          <input type="submit" value="Submit" />          
        </form>
      </div>
      <div class="pane">
        <h2>General</h2>
        <ul>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%FE%01" target="placeholder">clear screen</a></li>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%7C%9D%FE%0C" target="placeholder">LCD on</a></li>
          <li><a href="http://yourserver.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx&value=%7C%80%FE%08" target="placeholder">LCD off</a></li>
        </ul>
      </div>
      <iframe id="placeholder" name="placeholder">Your browser does not support iframes. Too bad for you.</iframe> 
    </div>
  </body>
</html>

Controlling the SparkFun.com Serial LCD (HD44780) using your ioBridge

Marc Fonteijn — Sun, 21 Jun 2009 13:52:39 +0000

In this previous post I demonstrated the a new API which makes it very easy to control your ioBridge. In this post I’m building upon that API to show how you can control a Serial LCD from sparkfun.com. You can buy a nice serial LCD directly from the ioBridge store at almost the same price but the display is only available in 1 color (white) whereas sparkfun has more choice (red/yellow/black/white). The displays are almost identical as they both use the worlds most popular LCD, the HD44780. The LCD from ioBridge has some nice off the shelf build in that the sparkfun LCD’s don’t have like the option to draw a gauge. But you should be able to mimic all those functions with some creative programming (as I’ve already done in the examples that follow below).

To make life easier I’ve build a small JavaScript library that provides simple functions to control your LCD and also a library that provides some very basic animation functions which you see in the video below.

Some things you should know before you get started

You can control the LCD using the I/O Serial Out widget, in this case you can use wire the LCD up to a Terminal Board and plug it directly into an free channel on your ioBridge module.
You can also control the LCD using the Serial Smart Board (as shown in this example). In this case you need to create a Send Serial Message (variable message) widget. I’ve hooked a terminal board up to my serial smart board but in this case the wiring is different! The input pins on the terminal board don’t match the output pins on the serial smart board. The 3 things you need to know are [AI -> +5v] / [DO -> RX] / [+5v -> GND].
Don’t forget to set the channel mode to “serial” in your ioBridge dashboard.
Have your signal mode set to true. If it’s set to inverted you’ll get gibberish on your display.

How to use
Once you’ve setup the ioBridge proxy it’s a breeze to get the LCD demo working.
1. Make sure you have the iobridge-proxy up and running (see this article)
2. Download iobridge.js, serial-lcd.js, serial-lcd-anim.js and lcd.html
3. Open iobridge.js and set the baseUrl to you iobridge-proxy url.
4. Open serial-lcd.js and set the widgetID to your widget that controls the LCD.

5. Upload all the files to your webserver
6. Fire up a browser and go to http://yourserver.com/lcd.html and see if your LCD is working

What’s next
* The animations are really basic, please help to extend this. If you’ve created some animation share them in the comments below.

Bugs
* Because there is a rather big delay between requests send to the ioBridge module >0.5s it somewhat limits how smooth some animations work. It would be nice if we could send a “sleep” command to the ioBridge along with the string for the LCD. In that way you’d send 1 long command that includes sleeps instead of making separate calls to the ioBridge.
* ~~Somehow programming the CGRAM with custom characters doesn’t work. If you have any clues why please leave a comment here.~~ This issue is fixed with the help of the ioBridge team! See the example in the video below

Download files
* iobridge-serial-lcd-1.0.zip (all files)

An easy API for the ioBrigde to use with Ajax/PHP/Java/Phyton/etc

Marc Fonteijn — Sun, 21 Jun 2009 13:42:21 +0000

If you don’t know what an ioBridge is I suggest you first read this page. It’s basically enables you to hookup all kinds of physical stuff (sensors, readers, led’s, lcd’s, servo’s, motors, etc) and control them true the web with great ease.

The people from ioBrigde have done a great job making it very easy to get your first project up and running. Just hook the ioBrigde up to any internet connection, browse to you personal ioBridge control panel and create some widgets to control the input and output channel. I got my first project running in under 10 minutes without any prior knowledge about the system!

There are different ways to talk to your ioBridge module. One of the are the widgets on the iobrigde.com site but there are also different API’s available. Unfortunately it was pretty hard to access your module using regular http calls. You best shot was to make use of the JavaScript Widget Control API but this isn’t a very flexible API as it forces html code onto your page and is useless if you want to make http calls from Java/PHP/Phyton/etc.

Another problem with the available ioBridge API’s is that they are slow. If you for instance want to make a background call to your ioBrigde when someone opens your website to blink a light you don’t want the visitor of your website to wait for 2 seconds before the ioBridge module returns a response. The event should be triggered without the user hardly noticing any delay. The way to make background calls on the web is of course by using Ajax. This brings another challenge along. As the ioBridge is located at iobridge.com every request goes to that domain. And as we all know you can’t make cross-domain Ajax calls.

So the ioBridge that has 3 issues
1. No easy API to control the module from anything else then a webpage
2. The module isn’t very fast and can become a bottleneck
3. Can’t make Ajax calls as the module is located at iobridge.com

The code that you’ll find below fixes all these things!

My solution to this was to create an ioBridge Proxy that resides on you local server, parses your requests and forwards them to your module. To this I added a new JavaScript API that utilizes this proxy and by default makes it’s call using Ajax.

How to use this?
Follow these very simple steps to use this new ioBridge API.
1. Download iobridge-proxy.php to your computer
2. Upload iobridge-proxy.php to your webserver (requires PHP >5)
3. Now create a widget using your iobridge.com portal. One that activates a lights or reads an analog value are probably the best to test.
4. Next up copy the widgetID (not the actionID!) and open the url in your browser, this should look something like http://yourdomain.com/iobridge-proxy.php?widgetID=xxxxxxxxxxxx.

5. If you just want to make http calls from lets say PHP then you’re done!

The next steps are useful if you want to use the Ajax API.
6. Download iobridge.js and example.html
7. Open iobridge.js and change the baseUrl variable so that it matches your domain and directory structure
8. Open example.html and change the widgetID’s.
* execute should be an Digital Output Pulse widget
* getValue should be an I/O Monitor widget
* setState(on) and setState(off) should be an Digital Output Control widget
* setValue should be an Serial Out or Send Serial Message widget
9. Upload iobridge.js and example.html to the same server as your iobridge-proxy.php
10. Open http://yourserver.com/example.html and test the functions
The current example uses JQuery to make the Ajax calls but of course you can change this to anything you like.

That’s it, with these 3 files you’ve freed your ioBridge from the constraints of the current API’s. It’s should now be a lot easier to use the ioBridge in any of your mashup projects!

update
See this article if you’re looking for an example that doesn’t use any javascript to control the module.

Download files
* iobridge-1.0.zip (all required files)