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>

MarcAThing.com

Pure HTML ioBridge Proxy example (no javascript)

Flickr.com