Pure HTML ioBridge Proxy example (no javascript)

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>

Comments (3)

ohararp wrote:

Marc…great stuff…I am playing with things now to tweak for the led sign. I’ll report back on how things went. Ryan.

Thursday, June 25, 2009 at 16:28 #
Matt wrote:

How would you use this with the LCD that IOBridge sells? Or is that the LCD your using?

Monday, June 29, 2009 at 4:20 #
Marc Fonteijn wrote:

@Matt I’m using an LCD thats 98% the same as the one ioBridge is selling. There might be some commands you need to change (%FE%0C -> %FEC clear screen) for the ioBridge serial LCD but other than that you can use the example as is.

Monday, June 29, 2009 at 9:16 #

Trackback/Pingback (1)

An easy API for the ioBrigde to use with Ajax/PHP/Java/Phyton/etc < MarcAThing.com on Wednesday, June 24, 2009 at 22:31

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

MarcAThing.com