24 Mar 2009

Whilst playing around with some ideas for a project I have in mind, I have created something else along the way.

I needed the ability to draw lines between elements on a webpage, with some built-in intelligence on how to route the lines so they look sensible. I couldn’t find anything in jQuery, Dojo or elsewhere that did this type of thing out of the box, although I’ll admit I didn’t look too hard.

Having got something basically working, I decided to throw together a demo to help see if they did what I wanted. As is often the case, my little demo has taken a life of its own and has distracted me from the original project I was doing this for.

And so came to life the Logic Gate Thing.

Logic Gate Thing

A couple disclaimers to make: it has only been tested with Firefox on Linux and is reliant on Javascript. That said, I’d be happy to hear how other browsers get on with it.

Update: It should now work on WebKit based browsers; Safari, Epiphany, etc and Chrome. As Jamie points out in the comments, it does work in IE8 albeit with some slightly weird lines.

  1. Jamie • March 25, 2009

    Nice idea! Works perfectly on FF/Win but won’t let me past the instructions notice on Chrome/Win.

  2. nickMarch 25, 2009

    Thanks Jamie. Interesting to hear about Chrome. @amcewen has tried it on Safari and IE7 without much luck either.

    I wonder what I’m doing that is so broken on everything but FF… I’ll have to investigate.

  3. nickMarch 25, 2009

    I’ve now fixed it for Epiphany/WebKit which should apply to Safari as well. With a bit of luck, the fix will be good for Chrome as well.

  4. Jamie • March 25, 2009

    Excellent quick fix, it now works on Chrome as well!

    But I also discovered the strangest thing? It actually works on IE8/Win7!.. the lines are drawn a little strangely as you can see in the screenshot but it works perfectly well!
    http://img217.imageshack.us/img217/8645/logicgatethingie8.png

  5. kybMarch 25, 2009

    That’s excellent.

  6. James Thomas • April 2, 2009

    This is great Nick, well done!

  7. Oliver SmithJune 25, 2010

    This contraption is amazing. The yellow circle at the top comes together with the grey citcle at the bottom in to the ‘Happy D Zone’. This, I belive, is where most of the central prossesing is done. However, as shown by the visual aid the grey circle is the victor!! What a champ, I just hope the Mr. yellow dosnt get too… jelous/aroused.

  8. Vamsi • July 2, 2012

  9. leave a comment

    You must be logged in to post a comment.