MarcAThing.com

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)

Nomophobia – are you scared to live without that phone?

Marc Fonteijn — Thu, 01 May 2008 18:54:11 +0000

Never heard of Nomophobia? Don’t worry Nick has written a great article about this disease and it’s various symptoms thats quickly spreading under the western-civilization.

I think I’ve got a mix of 7. The 3-minute fidget and 12. The trumper. Have to check with my health insurance to see if I can get a professional diagnose.

England soccer-kit comes with a QR Code

Marc Fonteijn — Fri, 14 Mar 2008 10:04:13 +0000

QR Codes are making their way to the general public. Umbro has equipted the away kit of the english national soccer-team with an QR Code!

Via picturephoning.com, source metro

The new Nokia E71, codename LIAM, the E61i successor

Marc Fonteijn — Sun, 09 Mar 2008 21:14:23 +0000

We’ve seen new Nokia models released faster than the downfall of the dollar. But it has been quite on successors of the E61i, the full QWERTY wonder. Well here’s some news. It looks like the Nokia E71, codename LIAM is right around the corner. See the first photo’s below. The E61i is great but not flawless so I can’t wait to get my hands on this baby.

Open letter to Nokia: get the PIM up to todays standard

Marc Fonteijn — Sat, 08 Mar 2008 13:20:41 +0000

This is my open letter to Nokia
Please, just spend 1% of your hardware R&D budget and give us a decent PIM.
Although you give us fantastic hardware and keep innovating in the features of new devices, we’ve had to put up with a PIM that just doesn’t cut it if you want to do something more than a basic calendar entry for several years now. The PIM is probably the most used application on my phone. I use it way more that making phone calls for instance. It’s just

You keep giving us firmware updates (which is nice), but please just give the guys at the PIM development department some budget (and a tray of Jolt) to get the stuff up to the level we expect from Nokia. The active users are contributing their ideas on how you can improve our Nokia experience so you just need to grab the list and off you go.

My no. 1 feature request would be the ability to have multiple calendars. I know everything is miscellaneous but that doesn’t mean I don’t wont to have a “work” and “personal” calendar. Imagine syncing iCal/Thunderbird/Outlook, Goolge Calendar and the Nokia Calendar, wouldn’t that just be great? The main thing lacking in order to get this setup working is … the support for multiple calendars in the Nokia Calendar. Just start out by adding an extra field called “calendar” which I can select when entering a meeting , thats all I ask from you.

Do you have any question concerning this open letter, please feel free to contact me anytime.

Sincere,
Marc Fonteijn

08/03/2008

Augmented reality screens are so 2005

Marc Fonteijn — Sat, 01 Mar 2008 22:12:10 +0000

There’s been a buzz lately about some images of how future internet search will look (see below).

Well guess what, its no future. Johnny Lee, you know the guy who amazed the world with his wii hacks, showed off the “Moveable Interactive Projected Displays Using Projector Based Tracking” technique that basicly does what the image above show in 2005 (!). Check out the video, it’s truly amazing!

His new project called “Foldable Interactive Displays” completely blows you away. Apple, Nokia, Microsoft (surface) … eat your heart out or even better, hire this guy!

QRitter = twitter + QR Codes

Marc Fonteijn — Fri, 29 Feb 2008 08:26:01 +0000

Dennis created QRitter, a combination between twitter and qr codes. What is basicly does is it shows you last tweet as an QR Code. My French is a bit rusty so I hope I got the message right. Whats the use? Who cares, but I bet somebody will find one.

Thats a Mount Everest of rice you have there

Marc Fonteijn — Thu, 28 Feb 2008 15:32:33 +0000

If you want to impress your date over diner a candle just won’t do. So check out the Topoware tableware serie by Alexandra. There’s nothing IKEA about this! Topoware is available on Etsy but you’ll need to be quick because the’re jsut 47 left…

It comes with a price tag, but hey whats the price of a first impression! It helps to mention to your date that it was featured in the NY Times magazine ;)