MarcAThing.com > "physically mashed-up"

Pure HTML ioBridge Proxy example (no javascript)

Wednesday, June 24th, 2009

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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

Sunday, June 21st, 2009

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)