Keeping DataTips in Charts boundaries

Here goes a little trick I used for an application some time ago. The problem was that data tips that are displayed on mouse overing Flex Charts, fly over the Application content, and in some cases do not respect the visible boundaries of it. This effect can be undesired, and a usability problem because can make the information impossible to read in some situations.

The attached application shows the problem in action.

If you hover the first pair of charts, you'll see the custom created data tip appearing at the right of the central point of the sector being pointed. For the pie on the right, the information is unreadable. The second set of charts, use another data tip renderer implementation that keeps the data tip in the pie boundaries, making the information always visible.




Get the source code here.



It's so simple, just take care when displaying the data tip in the default position that it fits into its owner chart, and if it's not possible, adjust its position. Hope it helps! And if you find a better way to solve the problem... or see anything that could be improved, please write! ;-)

Webcam picture taking with Flash and AS3

Long time since last post... It's been nearly 2 months since I changed my internet provider at home... and have no connection yet :-(


I recently had to implement a cool feature for a project, consisting in a picture-taker using the webcam, for a user registration process. The feature has been added recently in Facebook, allowing users to upload pictures and videos directly to their friends' walls.


Displaying the webcam content in a Flash movie is quite easy:

// 1. Access the default camera
var cam:Camera = Camera.getCamera();
// 2. Create a video display object
var video:Video = new Video(550,400);
// 3. Attach the camera to the video display
video.attachCamera(cam);
// 4. Add the video display object to the stage
stage.addChild(video);


Then, through the BitmapData object, it's possible to take a snapshot at the desired moment drawing the data from the Video object into a ByteArray (and encoding this information using an encoder JPEG/PNG/...). This binary data can be sent to the server, with a URLRequest and there processed by whatever server side technology.

// 1. Create the request object
var req:URLRequest = new URLRequest(remoteURL);
// 2. Specify we're sending binary data
req.contentType = "application/octet-stream";
// 3. Send by POST (GET doesn't allow enough data)
req.method = URLRequestMethod.POST;
// 4. Put the image binary data in the request body
req.data = binaryArray;

It's quite easy to get this point. But there's a usability issue with all this stuff, which is that to access the webcam, Flash needs the user authorization, requested through a dialog. First thing that drove me crazy, because if the Flash movie doesn't have the minimum dimensions (215 x 138) to show this dialog, there's no advice, but the video won't be displayed. It's clearly explained in the ActionScript 3 language reference (link to API), it's true. My fault, my fault :-P


But then, a second usability problem. Camera.getCamera() retrieves the "default" camera in the computer. In my MacBook Pro, Flash detects 3 webcams (even I just have the built-in one), which are displayed as "FireWire Video","DV Video" and "USB Video Class Video".


The problem is that just from the "USB Video Class Video" I'm able to capture video images. So it's not just asking for permission to access the webcam to the user, but also requiring him/her to go to the camera tab in the Flash settings menu, to try between this unknown video devices to check which one works? But wait, Facebook is detecting my webcam automatically! Even if I choose one of the non valid... when I try again the "USB Video Class Video" it's being used. So it must be possible to select the correct one somehow. And then I came across this article (Sander Kruger's blog):

Here, the author explains a tricky way to detect the valid one. The basics:

- Camera.getCameras() returns an array of Camera objects with the system cameras (in my MacBook Pro [FireWire Video, DV Video. USB Video Class Video], so we can know how many are accessible.
- Camera.getCamera() will get the default one (could be any of the system ones, available or not), but there's a second method, Camera.getCamera(String), that retrieves one specifically, from the total we discovered using Camera.getCameras(). The String parameter, represents the index of every camera in the array Camera.getCameras(), [0 to N-1]. So in my case, we can get the USB Video Class Video Cam for example, doing Camera.getCamera("2").
- The Camera object will dispatch a StatusEvent notifying if the user has accepted or rejected the access to the webcam from the Flash built dialog.
- The Camera object will dispatch ActivityEvents when it detects movement in the scene, but only if the camera is attached to a Video object where to be displayed.

With all this ingredients then you can cook a camera detection process. Once the Camera says it's accessible from the user request dialog (StatusEvent), you can loop over each cam object from Camera.getCameras, adding an activity handler for the ActivityEvents it could dispatch, and attach the Camera to a Video object, that's not added to the Stage (always hidden then). Then starting a Timer, we can give the Camera some time to detect activity... if it was not the case and the countdown finishes, then we should remove the activity event, detach the camera from the video and move to try the next Camera from the Array. Keep looping this way until one of the Cameras gives some activity news... or all of them are checked and none response to activity.

Hope the experience is helpful to someone :-)

WWWWW?

So... I was very excited last week about the idea of starting this blog, and I forgot to introduce myself :-S


Who? This is Marc Baiges, Multimedia Engineer by La Salle Engineering School, Barcelona.

Where? Born, growed up and living in Barcelona, working at Strands.

What? I've been working with Java/JEE technologies for almost 3 years and for the last year I've been programming with Flex. I enjoy working with Flex and spend a lot of time reading about it. So I'll try to write about my daily experience with it, the problems I face, solutions I find, examples I see... everything I think is worth sharing with others.

When? Heheheh, good one... I'll try to do it regulary, as often as I can, I promise.

Why? This is the important one. Why... I can think of many reasons why. Three of them:

• I'd like to make people know about me. Because community is very impotant in our sector. We're asking for help daily in forums, mailing lists, blogs, etc... and I think it's easier for people to get involved in your business when they know something about you, what you do, remember you for trying to help some others time ago, read once an interesting article you wrote... anything.
• I like Flex, as I said before, and like reading about it, evaluating this new graphics library, that other MVC framework... And I don't have so many people to talk about it and feel the need to share it with others!!!
• To practice my English. May sound stupid, but is a very important reason for me. I want to improve it so, any mistake I make, anything that sounds "unnatural", please tell me. I'll be very grateful!

hope to see you around :-)

Flex performance tips

One of the most interesting sessions I assisted in MIF Onsite III was "Flex optimization" by Alberto Alacaraz. He talked about optimizing Flex applications, performance and memory usage, and some tips to achieve it by using the Flex Profiler.

Performance/memory usage are both equally important issues while developing successful applications, but focusing in performance, it's a key aspect when talking about user experience. When working with interactive aplications, the user expects an inmediate response to a button click, or a key press, a drag & drop... and if these events fire any inefficient processes, the overall user impression about the application can be damaged.

Alberto pointed some simple tips to have in mind when coding Flex applications. Very simple things in fact, but I often forget those when coding...

• Remembering ActionScript statements such as "break" or "continue" when iterating in loops can save some precious time. Come on, review ActionScript3.0 statements!
• Bindings in Flex are very powerful, but involve some overhead we must be aware of. They are very useful to ensure we're displaying the latest data in our views, but do we want to notify the view of every change we make over this data? Perhaps notifying sets of changes, between consistent states could be enough...
• The object pool pattern, that a very elegant way to improve object instantiation times.

Here, I try reproduce some of the examples Alberto showed (here the source code):

MadeInFlex OnSite III

Last friday (October 17th 2008) I had the chance to attend to MIF OnSite III, a Flex event that MadeInFlex (the most active Spanish community in Flex) organized in Madrid. It was a single day event.

The scheduling:

• KeyNote, by Enrique Duvós
• Flex Optimization, by Alberto Alacaraz
• Domestika, an online community, by Borja Delgado
• Advanced Architectures Flex/JEE - RIAlity, by Carlos Rovira
• WedTool.com, a Startup in Flex, by Angel Blesa
• Papervision3D for dummies, by Joan Garnet
• The Future, by Joseba Alonso and Xavi Beumala
  

It was the 3rd edition of this event, having attended the previous ones in Barcelona. There's no possible comparison with events like 360Flex or MAX, neither for its size, nor for big announcements. Adobe speakers leave some comments on how great new things will be announced... in future events, like Max.

Anyway, it's a great way to see what's going on close to you, what Flex recipe is cooking the neighbour next door.

For work reasons I missed the "Wedtool" conference, so, a part from that, I really enjoyed Flex Optimization by Alberto Alcaraz , and the one about the close future, with CS4, Gumbo and AIR 1.5. I'll try to reproduce some of the situations Alberto talked about in an upcoming post.

The Papervision for dummies, was really "entry level". I'm not complaining about it, for some reason Joan Garnet had few time to prepare it and did a good job. The Domestika one was perhaps a little out of place, but loved the work they've done in the site redisign.

My overall impression after this 3 events is that the spanish Flex community is not very communicative. I was checking my RSS subscriptions about Flex... and there is just 2 over 40 sites I follow. Man, do we only know how to communicate while in the bar holding a "caña" in our hand??? (I guess is difficult to type in this situation :-P)

I forgot to mention the event was 100% free, so I'd like to thank the organization for its effort and encourage them to keep on working in building community.

thanks MadeInFlex.