Inside FLARManager: 2D Marker Tracking
<– Getting Started | Basic Augmented Reality –>
At the core, flare*tracker, FLARToolkit, and ARToolkit are simply fiducial-tracking engines, similar to other initiatives like reacTIVision and Trackmate. flare*NFT (and other natural feature-tracking engines) does not track fiducials, but reports the same information about its targets that fiducial trackers do. The ability of these libraries to produce augmented reality applications is an added bonus, but they are also well-suited to many 2D applications that leverage the markers as a new interface to the computer.
In addition to easing the creation of augmented reality applications, FLARManager exposes the data needed to allow new forms of interaction with 2D applications. The following tutorial explains the basics of setting up a FLARManager application, and demonstrates how to retrieve 2D data of detected markers.
FLARManager Tutorial: 2D
Download source for this tutorial here:
FLARManagerTutorial_2D
and place it in the root of the /src/ FLARManager folder.
Print out any of the pattern .pngs in /resources/flarToolkit/patterns, found in the FLARManager distro, to use with the tutorial.
FLARManager can be integrated into any application, at any point in the code. For this tutorial, we’ll create a new application and initialize FLARManager directly from the application class.
In the application class’ constructor, we wait for the class to be added to the stage, so that we have a reference to the stage:
this.addEventListener(Event.ADDED_TO_STAGE, this.onAdded);
Once the application is added to the stage, we can begin setting things up. First, we create a FLARManager instance and pass it the path to an external xml configuration file. For now, we’ll use flarConfig.xml (located in the /resources/flar/ folder in the FLARManager distro). We also pass an instance of FLARToolkitManager, to use the FLARToolkit tracking library, and a reference to the stage.
var flarManager:FLARManager = new FLARManager("flarConfig.xml", new FLARToolkitManager(), this.stage);
Once you’re comfortable with the basics of FLARManager, you can edit the config file, or create your own, as you see fit. More information on configuration options lives here.
Now, let’s add a Sprite into which to draw over the detected marker.
this.drawSurface = new Sprite();
this.addChild(this.drawSurface);
We want to see the video capture, so let’s add it to the stage. FLARManager creates a default video source all ready to go, though the source can also be modified via the configuration file.
this.addChild(Sprite(this.flarManager.flarSource));
FLARManager uses an event model to notify any interested parties of newly-detected markers, changes in already-detected markers, and marker removal. We add FLARMarkerEvent handlers to respond to these changes.
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_ADDED, this.onMarkerAdded);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_UPDATED, this.onMarkerUpdated);
this.flarManager.addEventListener(FLARMarkerEvent.MARKER_REMOVED, this.onMarkerRemoved);
and the handler functions themselves:
private function onMarkerAdded (evt:FLARMarkerEvent) :void {
this.graphics.clear();
this.graphics.lineStyle(4, 0xFF0000);
this.drawSurface.graphics.drawCircle(evt.marker.centerpoint.x, evt.marker.centerpoint.y, 40);
}
private function onMarkerUpdated (evt:FLARMarkerEvent) :void {
this.graphics.clear();
this.graphics.lineStyle(1, 0x00FF00);
this.drawSurface.graphics.drawCircle(evt.marker.centerpoint.x, evt.marker.centerpoint.y, 40);
}
private function onMarkerRemoved (evt:FLARMarkerEvent) :void {
this.graphics.clear();
}
These event handlers access information about the marker whose state changed (added, updated, removed) via FLARMarkerEvent.marker, which is a FLARMarker instance. FLARMarker provides us all sorts of delicious information about markers, including position in two dimensions (FLARMarker.centerpoint), three dimensions (FLARMarker.vector3D), rotation in three axes ((FLARMarker.rotationX/Y/Z), pattern id ((FLARMarker.patternId), and more.
Here, we’re just drawing circles over detected markers — thick red ones for newly-detected markers, and thin green ones for existing, updated markers.
That’s about it!
For more 2D-tracking ideas, take a look at the /apps/ package, and FlarManager_AppLauncher.as, both in the FLARManager distro. These examples include:
- a painting application that uses markers as brushes;
- a whack-a-mole game starring everyone’s favorite punching bag;
- a 4-directional pong game, with a marker-controlled paddle; and
- a drum machine-style sequencer using markers to trigger audio samples.
To see more about the marker data FLARMarkers provide, and to see how to manage multiple markers displaying multiple patterns, take a look at FLARManagerExample_2D and FLARManagerExample_Flash3D. Both of these examples are also included in the FLARManager distro.
<– Getting Started | Basic Augmented Reality –>
Thank you so very much for FLARManager and these tutorials
Chauncey Frend | 2009/06/29 | 11:06 pmThank you so very much for FLARManager and these tutorials they are EXTREMELY helpful and fun to mess around with. My question is:
created FLARManagerTutorial_2D.as and ran it once it worked fine, but now all of the sudden it has 5 errors that read
“1046: Type was not found or was not a compile-time constant: FLARMarkerEvent.”
FLARMarker.as is still in com.transmote.flar and FLARManagerTutorial_2D.as still has an import statement for FLARMarkerEvent as it did “import com.transmote.flar.marker.FLARMarkerEvent;”
Any idea why this has happened in Flex?
odd that it worked once and then stopped working after
ericsoco | 2009/06/29 | 11:18 pmodd that it worked once and then stopped working after that…what are the class and line numbers reported along with the FLARMarkerEvent errors?
My other flex projects started doing the same thing, I
Chauncey Frend | 2009/06/30 | 10:17 amMy other flex projects started doing the same thing, I think my copy of Flex is broken. Sorry to bother you with this. I am just going to reinstall Flex 3 and Flash player. Thank you for the reply.
[...] Inside FLARManager: 2D Marker Tracking [...]
transmote speaks… » FLARManager v0.5 (for FLARToolkit) | 2009/07/18 | 6:28 pm[...] Inside FLARManager: 2D Marker Tracking [...]
Hi there, Im having trouble figuring out how to use multiple
Stewie | 2009/08/18 | 3:30 pmHi there,
Im having trouble figuring out how to use multiple markers with mulitple papervision3d objects. I don’t want it to be random, i want to designate a specific object to a specific pattern. But i can’t see a clear indication of how to do that. Can you point me in the right direction?
Many thanks in advance!
@stewie -- take a look at FLARManagerExample_PV3D. that should
ericsoco | 2009/08/19 | 9:35 pm@stewie — take a look at FLARManagerExample_PV3D. that should be enough to get you started.
I can not afford Flex Builder and so I'm trying
Paul Peterson | 2009/09/04 | 8:11 pmI can not afford Flex Builder and so I’m trying to do this tutorial using FlashDevelop with the FLEX SDK installed. I’ve accomplished that setup fine, but since I’m am a procedural programmer and struggle grasping OO concepts and terminology, I’m having trouble understanding how the supplied FLARManagerTutorial_2D.as file is to be used and how it works with the blocks of code above. Anyone willing to spend a little time helping me out with some answers?
@paul -- there are a lot of FlashDevelop users in
ericsoco | 2009/09/05 | 7:57 am@paul — there are a lot of FlashDevelop users in the FLARToolkit world; unfortunately, i’m not one of them. you might want to check out the FLARToolkit forum. basically, if you set FLARManagerExampleLauncher.as as your main class, then uncomment the line for FLARManagerTutorial_2D and compile, you should be up and running.
@ericsoco - Thanks for trying to help me. I
Paul Peterson | 2009/09/05 | 12:44 pm@ericsoco – Thanks for trying to help me. I guess beyond the differences between FlashDevelop and FlexBuilder, I’d still be lost because I’m not familiar with development basics in ANY OO environment.
I really need a tutorial that takes you step by step. I was fine following the above steps until he said, “In the application class’ constructor, we first create a FLARManager instance …”. Huh?? It doesn’t take much to add, “First start up FlexBuilder and open …, then select …, then insert (line of code) at this location, because …” That is a tutorial.
Sorry – just frustrated . In an ideal world, technical writers would explaining cutting stuff like this, not solid programmers who assume everyone is at their level of expertise. I realize you have to make SOME basic assumptions about your reader, but just a little more grace is all I’m wanting. lol
My plan for now is to look at the package that Mikko put together (http://www.mikkoh.com/blog/?p=182) and see if I can figure that out. I really wanted to work with FLARManager because it looked like a much more refined system. Will probably be back, once things start clicking for me in OO world.
@paul -- sorry my tutorials are not basic enough for
ericsoco | 2009/09/06 | 12:15 am@paul — sorry my tutorials are not basic enough for you, but yes, i have to assume a certain level of understanding of the environment, and the level of understanding these tutorials assume includes basic knowledge of AS coding and environments. i can’t write a tutorial that includes instructions on how to use a coding environment, that becomes too wordy, and i just don’t have the time to go into basics beyond that. if i was getting paid a salary to do this, things might be different. but there’s only so much i can do.
if, after experimenting with mikko’s code, you come back to FLARManager, and want to suggest additions to these tutorials, by all means please do — i would appreciate the assistance. best of luck.
Is the source posted elsewhere, I get a 404
Andrew | 2009/09/08 | 12:30 pmIs the source posted elsewhere, I get a 404 error. Thanks for the manager, and the tuts.
whoops. fixed now.
ericsoco | 2009/09/08 | 12:46 pmwhoops. fixed now.
Hi Eric! First of all i must thank you for
Mauro | 2009/09/13 | 4:18 pmHi Eric! First of all i must thank you for this framework, it looks really nice.
I’ve downloaded It and I could run the tutorials, but now I want to integrate FlarManager with an application that I’ve already make. How can I do it? I mean, I understand that I have to create an instance of FLARManager class, but what’s next..? I don’t know if I can continue using my methods to detect markers or I have to replace It with those that you explained above (event listeners). In my application I create an instance of Video and Camera and I don’t know if it’s ok or if I need to use flarsource instead.
(sorry for my English, i speak Spanish. I hope you will understand)
@mauro -- your english is excellent, don't worry about that
ericsoco | 2009/09/14 | 11:30 am@mauro — your english is excellent, don’t worry about that
if you’ve already created an application that uses FLARToolkit but not FLARManager, it’s best to remove the FLARToolkit code you wrote (including your Video and Camera instances) and replace it with FLARManager code, including the FLARManager instance and FLARMarkerEvent handlers.
Hey. Great code, it sure is easier to use
stuart roos | 2009/09/15 | 6:37 amHey. Great code, it sure is easier to use FLARToolkit now. One thing, gonig through your code I can’t see how to feed marker values into a switch to return string values to a tween engine. Say you wanted to use TweenMax to move movieclips around for example, you’d get the marker id, use the switch in the same way you did to assign colour values based on marker id, but you’d return string values into a TweenMax command. That is the one thing bugging me.
Any pointers?
Thanks again.
Oh, I'm trying to use TweenMax to move multiple markers
stuart roos | 2009/09/15 | 6:43 amOh, I’m trying to use TweenMax to move multiple markers around btw, and I’m usnig it to ‘clean’ the on screen motion up. It works well, with one marker, but I just cannot get it work work with more than one.
@ stuart -- you know there's a tweening option built
ericsoco | 2009/09/15 | 9:25 am@ stuart — you know there’s a tweening option built into FLARManager? look here for more info on how to use it, and via flarConfig.xml.
if you want to write your own smoothing engine, you can replace the default smoother, FLARMatrixSmoother_Average, with your own, using TweenMax or whatever. once you’ve built it, tell FLARManager to use it by pointing FLARManager.smoother at your new class.
Hello. I didn't know that, but do now :)
stuart | 2009/09/15 | 11:24 amHello. I didn’t know that, but do now
However, is there a way to pass these values to TweenMax simply? I’m not great at AS3 at all, still learning a lot. I think I’m almost there, I can use the switch to get my marker id, convert that o the string value of my movieclip, but then I get odd errors when trying to pass that to TweenMax. I think maybe it’s a display object issue as it’s buggering up on rotationZ.
@stuart: I was trying the very same thing, and
Andrew | 2009/09/17 | 6:38 am@stuart: I was trying the very same thing, and now have it working. E-mail me for the source. It will be on my blog soon, fingerpuk.tumblr.com . The reason you are getting your errors could be because FLARManager is seeing markers but your switch doesn’t reference them.
I just noticed that (at least in my svn downloaded
Boochy | 2009/10/21 | 12:50 amI just noticed that (at least in my svn downloaded src) for the FLARManagerTutorial_3D that the FLARPVGeomUtils were not found as the import was missing the .geom part of the path.
The src I had said: import com.transmote.flar.utils.FLARPVGeomUtils;
But needs to be: import com.transmote.flar.utils.geom.FLARPVGeomUtils;
Just a little thing.
Thanks for the tutorials and examples.
@boochy -- yeah, i just noticed that a day or
ericsoco | 2009/10/21 | 12:52 am@boochy — yeah, i just noticed that a day or two ago. the latest in SVN has this fixed. thanks for catching that.
Thanks for the great tutorials and well commented code.
weasley | 2009/10/29 | 1:33 pmThanks for the great tutorials and well commented code. Unfortunately, I’m having trouble figuring out why the FLARManager examples work great locally but the video fails to display when I run them from my website and no markers appear to be detected. If anyone has any suggestions, I’d appreciate them. I’m relearning programming after working with p-system pascal in a former life and so I may be missing something obvious.
@weasley: most likely you didn't upload all of the resources
ericsoco | 2009/10/29 | 1:45 pm@weasley: most likely you didn’t upload all of the resources files that FLARManager/Toolkit needs to load at runtime. try running in Safari with your Activity window open, or in Firefox with LiveHTTPHeaders running, to see what’s not getting loaded.
Eric, Thank you for the suggestion. Before I got
weasley | 2009/10/29 | 3:26 pmEric, Thank you for the suggestion. Before I got your response, I discovered that video works when I uncomment the source video line “this.addChild(this.video);” in the camera source file. I get a mirror image of the video, better than no video at all when the line is commented out. The markers aren’t found, but it’s progress.
With LiveHTTPHeaders running, it’s reporting 404 Not Found errors on the cameral parameters and pattern files, files that I can see in the directory structure on the site where the URL says they should be?! I copied the entire blasted project folder to the server in my mad attempt to make sure nothing was missing, yet still am having trouble.
Thanks again for your help and suggestions.
@Eric: Thank you much! I found the problem
weasley | 2009/10/29 | 8:56 pm@Eric: Thank you much! I found the problem and have fixed it. My old IISA server would not deal with the .pat, .dat or .dae files because the MIME type was unknown. Here’s a Microsoft link with more info in case anyone else is running into similar problems:
http://support.microsoft.com/kb/326965
Couldn’t have solved it without your recommendation for using LiveHTTPHeaders.
What am I supposed to do with the source code
Vier | 2010/01/20 | 9:46 amWhat am I supposed to do with the source code you provide? I removed everything that had to do with squareContainer and squareShape and instead copied the lines in this page. My webcam is working and the marker is detected, but no circle appears. Could you help me? Thanks!
Thanks to Eric and to weasley who reported the solution
thrillofit | 2010/02/22 | 11:16 amThanks to Eric and to weasley who reported the solution he found.
I spent an entire day in trying to understand why everything was working nicely on my PC but not with my web site and I finally understood.
Hej. I am working on a project very similar to yours.
Aleksandar Predragovic | 2010/06/13 | 6:21 pmHej.
I am working on a project very similar to yours. Trying to display F4v video but I am having a problem.
My video shows even when marker is not detected and it jumps randomly on the screen. When marker is detected I notice that it follows it but it is far away from smooth
My video is changing positions and sizes all the time.
Hope someone can give me advise about what might be wrong.
Thanks a lot.