Concept Virtual Corkboard With Handwriting Recognition for Large Interactive Walls


I’ve been playing with the idea of an inexpensive large collaborative wall. Part of the requirements for my large interactive touch screen is that it has to be multitouch and provide a more natural way of interfacing with it other than mouse and keyboard. Johnny Lee has shown that you can build one pretty cheaply. You can set one up using just a couple Wii remotes, a projection screen, and a homemade IR pen. You can then create a virtual whiteboard application pretty easily.

The problem with virtual whiteboards is that all the drawings and text are just graphics. They don’t mean anything to the system. The text isn’t really text. It would be better if you could write the letters and have them be interpreted as real text.

Using an open source Flash based mouse gesture library, I put together a concept virtual corkboard that lets you write letters with your mouse (or IR pen) and put that text on virtual PostIt notes that you can place anywhere on the board.

Check out the video:

Of course, this isn’t the only way to tackle this problem. One could just do OCR on the drawings and figure out the text that way like the mobile app EverNote, but this is just one solution.

Open demo in lightbox

Open demo in new browser

Popularity: 16% [?]

Adobe Max 2008: Unconference Flex + Papervision

No Comments

The Flex + Papervision Unconference talk was given by Vic Cekvenich CEO of PointCast Network. His company provides software solutions based on opensource packages but also provides services and additional libraries to facilitate development.

His talk was an intro to Papervision, so I won’t cover some of the material that’s pretty much all over the web. What I found interesting was that he uses FlashDevelop to do Flex development. His opinion is that it’s smaller, leaner, and much faster. He just has the Flex 4 SDK installed and when he builds, he targets the Flash Player 10 runtime, and that’s pretty much all he needs.

His talk was also geared towards people who want to build great experiences online that rival consumer apps like what you see on CNN, or the Xbox360 interface. His argument is that web experiences fall short of other experiences even though the PC is a much more powerful medium because developers are too lazy. His other focus was Papervision for online game development.

One insightful comment that he had was that people have this silly notion that you build great applications, then some magic happens, and then you become rich. The web world has convoluted that second step, that magic step. People think they out to give things away for free, and somehow they’ll get rich. He says charge for the damn thing. For the Flash games that he develops, he provides a free version with limited options, and if you want to use better guns, or have better clothes for your avatar, you pony up cash. Magic.

The other thing I learned from the talk which I will be trying out soon is adding lighting to my Papervision scene. Basically you use a Phong Shader which you apply to your material and specify lights for it, and voila – lighted objects. Look for a tutorial in the near future.

Popularity: 3% [?]

Adobe Max 2008 Session: Flex Tips & Tricks

No Comments

This was probably the MOST useful session I’ve ever attended in a while. The guy knew his Flex Builder IDE inside and out. Here are some very useful tips to getting the most out of the Flex IDE:

  • Configure your Flex Builder startup parameters. Update the JVM to the latest version, and make Flex Builder use that one – it will compile much faster. Use the -vm flag
  • Configure the flexbuilder.ini file to have Flex use more memory. This will also result in a performance gain.
  • Use the Rename variable shortcut when refactoring. Don’t use the Edit/Replace because it could have adverse consequences of renaming other variables that have that string inside it. The Rename function won’t do that.
  • Use Manage Webservices to automatigically generate all the necessary webservices code. All you need to do is feed it the wsdl.
  • If you have your Flex IDE all pimped out to your liking, use the Export Preferences to save those settings so you won’t have to reconfigure it for other machines.
  • When editing the visual properties of components, use the Convert to CSS to be able to edit all those properties in Designer Mode and have the CSS generalized to apply to all the components of that type, not just that instance.
  • Cntrl + tab and Alt + tab to shift between project files.
  • Cntrl + Shift + P to jump between matching braces.
  • Cntrl + M to maximize or restore IDE panels
  • Cntrl + Alt to duplicate selected lines
  • In the Preferences, just type what you are searching for, it’s got type-ahead functionality
  • Using Build Framework Linkage, you’ll be able to shave the size of your swf down while refactoring out the Flex built in components into a separate swf file which will be cached.

Popularity: 2% [?]

Set Up Papervision 2.0 for Flex 3 in 3 Minutes Flat


Anybody who knows me knows that I’m all about quick and dirty, get it done, up and running and worry about it later. I don’t like to waste time and I’m sure you don’t either. If you want to set up Papervision Great White for Flex fast, you’ve come to the right place. You got your timer ready? Here we go:

  1. Create a new Flex project, called it FlexPapervision Base. Time elapsed: 20 seconds.
  2. Drop the Papervision library into your libs folder. You can download the Papervision library at the Google Code repository, but that’s too messy and going to take too much time. I’ve taken the liberty of downloading it and compiling it into an easy to consume swc right here. Time elapsed: 15 seconds. [If you are using Eclipse, create a libs folder in your project. You'll also need to add the libs folder to your build path - Go to Project -> Properties -> Flex Build Path -> Library Path, and add the libs folder]
  3. Assuming you have some Flex basics and Papervision basics, here’s the essential code:
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );

    canvasPv3D is just a regular Flex Canvas. You add a Papervision viewport to a UIComponent which can then be added to a Flex Canvas. That’s it. Here’s the complete FlexPapervisionBase.mxml file

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="" layout="absolute" creationComplete="onInit(event);">
    import mx.core.UIComponent;

    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.objects.DisplayObject3D;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;

    import org.papervision3d.materials.ColorMaterial;
    import org.papervision3d.objects.primitives.Plane;

    private var renderer:BasicRenderEngine = new BasicRenderEngine();
    private var scene:Scene3D = new Scene3D();
    private var camera:Camera3D = new Camera3D;
    private var viewport:Viewport3D;

    private var plane:Plane;
    private var angle:int = 0;
    protected function onInit( event:Event ) : void {

            viewport = new Viewport3D(canvasPv3D.width, canvasPv3D.height, true, true);
            // these 3 lines are key to putting Papervision in Flex
            var uicomp:UIComponent = new UIComponent();
            canvasPv3D.addChild( uicomp );
            uicomp.addChild( viewport );
            camera.z = -500;
            var mat:ColorMaterial = new ColorMaterial();
            mat.doubleSided = true;
            plane = new Plane(mat, 200, 200, 4, 4);
            // update the scene every frame

    private function onEnterFrame( event : Event ):void {
            angle = angle+=1%360;
            plane.rotationY = angle;
            // render the scene on every frame
            <mx:Canvas id="canvasPv3D" width="100%" height="100%"/>

    All this project does is put a 3D plane in the scene and rotates it 1 degree every frame.

    Time to read this bullet point and copy paste this piece of code into your project: 40 seconds.

If you’re feeling super lazy and can’t even be bothered to create a project of your own, here’s the project:

This is what the end product looks like:

Your welcome.

Popularity: 17% [?]

Notes from Chicago Flex Users Group meeting August 2008

No Comments

Just got back from the monthly Flex Users Group meeting in Chicago. James Ward was scheduled to come present but he couldn’t make it and so Adam Lehman came instead. It was a good turn up with about 20 some people there. There were a bunch of Flex n00bs and when people went around introducing themselves, it felt like I was in a Flexaholics Anonymous support group.

Some of the stuff covered was old material, like the Pixel Bender (pixel shading formerly known as Hydra), Thermo, announcement of Flex 4 codename Gumbo and Flash Player 10.

The biggest things I got out of this were:

  • Pixel Bender – it’s not just about pixel shading. You can use it to offload number crunching. This reminds me of a research project out of the Accenture Technology Labs done by my colleague Manoj S. who used the graphics card GPU to do number crunching unrelated to graphics and textures.
  • Application level audio mixing of MP3s. Think of this as being able to go into MP3 files at a very low level to be able to mix audio. I already can dream up some cool visualizations that could go along really well with audio mixing.
  • Degrafa Flex skinning to be baked into Flex 4. This was news to me, but then again, I’m not up to speed on Degrafa stuff. I guess I will be for my project at work.

The schwag this time were some training DVDs – eh. Last time it was a copy of CS3 Master Suite. I’ll probably end up going every other month or so on this as stuff just won’t change that much and it’s not like you get inside scoop stuff. Adobe’s awfully mum about stuff.

Popularity: 1% [?]

Older Entries Newer Entries