I don't like computers.

Category: flex

Flex component EditImage rewritten

Past releases of the free EditImage component have seen some interest. So I thought, I could also share the new version which is written from scratch. EditImage suits the needs of the BlocStac wiki, but maybe you can tweak it for your own purpose. Just to make it clear, EditImage is for Flex developers.

The current features are:

  • scale
  • crop
  • rotate
  • undo/redo
  • zooming (not scaling) and panning the image
  • zoom the image to maximum allowed width
  • 3 states: zoomable, editable and only readable
  • import/export

Demo

As before, the source code is under the liberal BSD license and you can find it on Google code. As we use this code internally, expect changes in the source. However, note that we will not tag any release in mercurial. EditImage requires Flex 4 and Flash Player 10.

Have fun using it,

Marc

Mocking in Flex/ActionScript has arrived: mockito-flex

The announcement of Google Chrome OS is certainly a big bang in the IT world. However, this didn’t made my day but the public release of mockito-flex. It’s been quite painful to create mock objects up to now in Flex. mock-as3 was best until I read on InfoQ about mockito-flex. It’s based on asmock but the syntax feels very much like mockito for Java (which is in my opinion the best mock library in Java). The documentation is still sparse, so below are all the things I need to know:


given(mockie.foo(10)).willReturn("10")
given(mockie.foo(10)).willThrow(new Error("oups"))
given(mockie.foo()).will(new GenericAnswer(incrementCounter))
verify().that(array.push("1"))
verify().that(array.pop())
verify().that(mockie.baz(eq("one"), any()))
verify().that(mockie.baz(argThat(new GenericMatcher("two", contains)), eq(10)))
verify(never()).that(testClass.foo())
verify(times(3)).that(testClass.foo()) // atLeast(4), atLeastOnce(), once()

Multi-touch for Adobe Flex: Introduction in Hardware and Software


I’m convinced that keyboards and mice are going to be complemented with multi-touch screens in a staggering short period. This believe drives me to check the current state of the technology. I split the analysis into three areas: the hardware, the “software engine room” and “user gestures and applications”. Because we need a presentation wall at Faindu, I confine all aspects to large screen applications.

Generally, NUI Group is the hot spot. For diving into the technology, I also found the master thesis of Laurence Muller published this September quite useful.

Multi-touch Screens

All commercial hardware I found starts with a price tag of several 1’000 €. And until the 3D-camera sits in every laptop, we will need to settle for 2D surface interaction. There is a thread on NUIgroup that summarizes nicely the following four technologies. All four options are based on the same physical principle: finger tips or any other objects emit infrared (IR) light and are tracked by an IR-filtered camera. Those artifacts detected by an image processing algorithms are called “blobs“. The tracked object could actively emit light with an IR-LED but this required the user to wear gloves or something like a mini-torch. Because this is not geeky enough, all principles rely on reflecting IR-light on the object. So the real challenge is to illuminate several objects on the surface with evenly distributed intensity and indirection.

  • Diffused Illumination, DI: Several IR-lamps spot form the the back onto the surface.
  • Diffused Surface Illumination, DSI: Tim Roth introduced the DSI technology. Contrary to what the name implies, the setup is very similar to FTIR
  • Frustrated Total Internal Reflection, FTIR: While DSI relies on scattering the light in the material, FTIR uses optical reflections at the surface. Think of a thick telceom multimode fiber that is pressed into a flat form. A nice diagramm of Jeff Han’s former group, comprehensive instructions pdf by Harry van der Veen and other instructions by Christopher Jette.
  • Laser curtain or Laser Light Plane (LLP): One or several lasers span a curtain of light beams one millimeter in front of the screen. It was introduced by AlexP (update, newest post) on the NUIgroup forum and very well explained by Georg Kaindl.

If security issues can be resolved, LLP is my clear favorite.

Software on the “operating system” level

With “operating system” (OS) I mean the software that reads the data from the camera/s, processes it and sends the appropriate events in Actionscript. For the mouse or keyboard, this is on the operating system level, so I name it that way. TUIO is the standard for the communication between the multi-touch screen and applications.

I will explore tbeta and IDEO in more depth.

User gestures and Flex multi-touch applications

Apart from Bill Buxton’s page that also features an excellent overview, I could not find yet a lot of research about gestures. I want to know what people intuitively understand. Wiping horizontally with two fingers means to most users…? Tipping with three finger should do…? And the combination with two hands? Anyway, there are may applications around:

  • A blog of Harry van der Veen list three Actionscript applications developed by the NUIgroup.
  • Multi Touch Flickr Viewer lets you play with images.
  • mapstouch is an Air application and lets you navigate google maps. It is based on touchlib.
  • sparsh-ui is developed at the Iowa State University and features a gestures server. However, I could not find an Actionscript API.
  • There are no Flex components optimized for the multi-touch paradigm yet.
  • Website that collects videos of multi-touch applications.

Free Flex component: EditImage 0.3

There is an update of the component.

Demo / Source

Just an other alpha release of EditImage with some work in it:

  • Introduced interfaces for EditImage and the tools
  • Quite frequently, I use EditImage as an image display and non of the tools are needed. That is the reason I disabled all tools by default. They are not initialized until a tool is enabled.
  • Squashed some bugs like correct resizing of EditImage and positions of cursor
  • More refactoring and more API documentation
  • First unit tests added but many more needed
  • EditImage.swc, API documentation (/tmp/ant-doc/index.html) and link-report (/tmp/ant-swf/EditImageReport.html) included in EditImage.zip

What is still on the wish list?

  • As reported by Gireesh, when snap to top/left is disabled, the image can be move to any position on the screen.
  • More refactoring
  • Plug in new tools such as adding shapes, drawing with a pencil, adding text

Image editing component in Flex, Updated

There is an update of the component.

I found some more time to update EditImage. What’s now in the component?

  1. Cropping including constrains to size ratio and minimal height and width.
  2. Scaling including constrains to size ratio
  3. Rotating including constrains to steps. Rotating snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
  4. Snap to the initial top left position.
  5. Serialize the sum of the transformations so you can store and retrieve the image edits.
  6. Reset the image to the original image dimension and orientation
  7. Reset image transformations to last set state.
  8. Source code is under the BSD license. Some icons are under LGPL.

What’s missing?

  1. No single test has been written.
  2. More documentation
  3. There are some low hanging fruits for performance improvements.
  4. Provide user feedback when hitting limits.
  5. Visual frames for picture

Have fun and report bugs.

Image editing component in Flex: EditImage

There is an update of the component.

I needed a simple image manipulation tool, similar to the one in Word. As I may want to use it in commercial products, the license is of importance. Here are the three options I found:

TransformManager

Jack Doyle has written the TransformManager component. On his blog, you also find some interesting image effects. Unfortunately, he excludes commercial use without explicit permission in his license.

ObjectHandles

Marc Hughes published ObjectHandles. It works just fine and it is under the MIT license. I might use it somewhen but the next component was just a better fit:

TransformTool

TransformTool has been hacked by Trevor McCauley and extended by Alessandro Crugnola. Trevor’s license is found in the About section and says All source files and downloads on this site are completely free to use any way you see fit for personal or commercial use. They are provided as is with no guarantee or warranty and are to be used at your own risk. I guess this allows the BSD license. Alessandro agreed by mail.

With about 80 private variables and a whopping 1’790 lines of code, TransformTool.as implements most of the functionality. I started refactoring this class at first but I haven’t finished it yet. Before we go into the details, here is the Demo and the Source see Update.

What’s new in EditImage?

  1. Cropping including constrains to size ratio
  2. Serialize the sum of the transformations so you can store and retrieve the image edits.
  3. Reset the image to the original image dimension and orientation
  4. Reset image transformations to last set state.
  5. If rotated, controls are rotated as well
  6. Rotate snaps to 0 degrees and a multiple of a defined value. It does not step through the angle with a fixed value disregarding of the starting angle like 3.456 degrees.
  7. Snap to the initial top left position.
  8. Refactored the different tools like scaling and cropping into their own package.
  9. Minimal height and width for cropping.
  10. Removed things I don’t need like registration point or skewing.
  11. It is under the BSD license.

What’s missing?

  1. This is a prototype, not a production-ready component!
  2. No single test has been written.
  3. Further clean up of code including documentation.
  4. I have not yet touched the cursors. They currently don’t work at all.
  5. Hunting some more bugs like reseting sometimes confuses the orientation of the controls.
  6. Provide user feedback when hitting limits.

IE7 + SSL + XML? = Flex “Error #2032: Stream Error”

I’m developing a Flex application that runs smoothly in Firefox over SSL. Today, I just wanted to verify whether Internet Explorer 7 (IE7) hosts the application as nicely. Somehow, I wasn’t surprised that the Microsoft browser invoked an “Error #2032: Stream Error”.

Don’t assume, test!

Searching brought me to judah’s blog, but the blog is only about URL paths. Because the application runs in Firefox and in non-SSL mode in IE7, this was not causing my problem. However, some comments on judad’s blog and on this blog were interesting: An Adobe TechNote warns of this issue. However, the note was last updated in 2005 what meant that it could not relate to IE7. I also found a Microsoft bug report describing the issue but it only links the bug to IE5 and below. The assumption that Microsoft has corrected this bug since 2005 was probably my biggest mistake in this hole story.

The search could go on. Barton has some nice input and proposes to tamper the HTTP header: remove Pragma and set Cache-Control: no-store. So I did and checked the HTTP headers in the SSL connection with Wireshark (which is also quite bogus for decrypting SSL packets, at least 1.0.0). This made the whole thing running. And in details:

Works:

  1. Cache-Control: no-store
  2. Cache-Control: no-store, must-revalidate
  3. Cache-Control: no-store,max-age=0,must-revalidate
  4. Cache-Control: max-age=0,must-revalidate
  5. Cache-Control: must-revalidate

Does not work:

    1. Pragma: no-cache <+whatever header like Cache-control: no-store>
    2. Cache-control: no-cache
    3. Cache-control: no-cache, must-revalidate
    4. Cache-control: no-cache,<+whatever>
    5. <empty = no Cache-control at all>

      Controlling Cache-Control

      In Firefox, you can check the content of the cache by entering about:cache in the URL. You will notice that Firefox caches all data coming from an SSL connection in memory. Hence, closing a tab does not delete the data but a restart of Firefox does.

      IE7 caches data coming from SSL normally to the disk. The HTTP header Cache-Control: no-store prevents this default behaviour. Unfortunately, I don’t know a similar command like about:cache in IE7, so haven’t investigated the exact caching behaviour. Cache stored on the disk can be checked with “Tools menu > Internet Options > General Tab > Browsing History section > Settings Button >View Files button” but I don’t know how to see the cache in the memory.


      From “drawRoundRect to Modules to link-reports to SDK-9485″ or Hunting a known bug without knowing

      When I recently deployed an application to the server, I got this lovely error message that is easily worth a few hours:

      ArgumentError: Error #2004: One of the parameters is invalid.
      at flash.display::Graphics/drawRoundRect()
      at mx.skins::ProgrammaticSkin/drawRoundRect()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\ProgrammaticSkin.as:745]
      at mx.skins.halo::ButtonSkin/updateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\halo\ButtonSkin.as:217]
      at mx.skins::ProgrammaticSkin/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\skins\ProgrammaticSkin.as:421]
      at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:602]
      at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:675]
      at Function/http://adobe.com/AS3/2006/builtin::apply()
      at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
      at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]

      It came from a loaded Module and only appeared on the server. While debugging, all went smoothly. So first I found out that it appeared only in the remote sandbox (though I still don’t know why, any suggestions?). Then, the Module was somewhat suspicious, so I dived into ApplicationDomains, SecurityDomains and the like. Besides the docs and forums, Alex Harui has a few nice images in a presentation and Roger Gonzalez posts where also helpful. After all, this was not the point.

      Getting closer

      The second difference between the debug- and the deployed application was that I linked in FlexSpy. This meant that for example ColorPicker or ComboBox were already sitting in ApplicationDomain.currentDomain.

      Ok, lets have a look a the different link-reports and hey, there was a difference: “mx/skins/halo/ColorPickerSkin” and “_ColorPickerStyle.as” were missing in the Module! The second hit of Googling “flex module halo” brings you to the Flex release notes. There, I “happily” discovered bug SDK-9485 that states… well, read it yourself but afterwards put the following in your CSS:

      ColorPicker
      {
      upSkin: ClassReference(“mx.skins.halo.ColorPickerSkin”);
      overSkin: ClassReference(“mx.skins.halo.ColorPickerSkin”);
      downSkin: ClassReference(“mx.skins.halo.ColorPickerSkin”);
      disabledSkin: ClassReference(“mx.skins.halo.ColorPickerSkin”);
      }

      ComboBox
      {
      upSkin: ClassReference(“mx.skins.halo.ComboBoxArrowSkin”);
      overSkin: ClassReference(“mx.skins.halo.ComboBoxArrowSkin”);
      downSkin: ClassReference(“mx.skins.halo.ComboBoxArrowSkin”);
      disabledSkin: ClassReference(“mx.skins.halo.ComboBoxArrowSkin”);
      }

      The End

      The moral of the story is that first, I hope that you save time with this post. And second, that I really don’t like computers!

      Beauty Contest between Red5, Wowza and Adobe LiveCycle…

      Beauty contests are a matter of taste. Also take the points below as such. I’m only stating my judgment for my needs. Apropos needs, I assemble a Flex/Air application that draws its data from a server. The format of the data is mostly strings and XML but also video, audio and proprietary file formats such as doc, xls, pdf, etc. So, which server suits my application best?

      Adobe LiveCycle Data Services Enterprise Suite

      Who ever made up this name, he was stoned – really! Because this contest is about beauty, the name alone would already disqualify the nominee. However, the real killer comes from the price. I suspect that the same person that created the name also set the prices. When you see after a search odyssey these prices, you skip to the next option.

      To be fair, I should add that Adobe clearly targets the enterprise world and not small and medium-sized businesses, let alone the geek ‘market’. If you happily spend more than 50’000$ for e.g. a single Oracle database, go for the Adobe Liveblabla.

      Wowza Media Server Pro

      Functionally spoken, this server is a clone of the Flash Media Server: It’s focused on streaming data. Everything implemented is done in a way I like (this doesn’t imply that it’s best). It starts with a clear and clean file structure. I also appreciate the straight posting of the product prices.

      Getting to the server code, documentation and forum is a real pain. The sign up for the free license and the forum is ridiculously tedious. What do you need the address for? Once you’re through, documentation and in particularly the forum are very useful. The support of Charlie in the forum is world class. He is very responsive and knowledgeable what you can verify yourself in the forum. In my opinion, they should point potential customer more to this unique selling point. However, since I’m used to browse the source of Red5, I have missed this many times with the Wowza server. I don’t like to program against a black box. This is 90′. Another point is that phrases in the sense of “it’s like in FMS” should be banned. I don’t learn first FMS when I want to use Wowza.

      Basically, Wowza does not support Flex. They also don’t advertise it. This means that RemoteObject or RemoteClass are not supported. Communication is only over AMF0 because AMF3 is not yet implemented. I also miss some details useful in the Flex world, for example there’s no helper method for XML. Another interesting aspect is that Wowza and Red5 leverage both the power of Apache Mina. I think Wowza handles the traffic without an off-the-shelf servlet container.

      I few things are still unclear because I did not bump into the answer at first look: I was not able to find out how to create a SharedObject by the server or whether something similar to ISharedObjectSecurity is available. What about the Red5 rooms? The virtual hosts do certainly not replace the room concept of Red5. Keep in mind that all those questions asked on the forum, I would have the answers within a few hours. Again, I love this service and eventually, it might turn me into a paying customer.

      Wowza offers a customized Eclipse IDE that helps you getting off the ground. Unfortunately, this is also optimized for the Flash folks. Because I have already an Eclipse installation for Java, Flex, Scala, etc, I’d get a second Eclipse…grumblegrumble.

      Red5

      Being under the LGPL, Red5 is our only open source candidate what gives the project a bonus. Red5 is wired together with Spring, leverages Mina for low-level network stuff and takes advantage of quite a number of other libraries. Generally, it feels a bit cluttered. Let’s take the spring configuration as an example: You find four packed configuration files for the Red5 part. On top of this, you find in the files the alternative beans for the Tomcat container instead of Jetty.

      Talking about Jetty, it’s definitely a project of my gusto. I perceive it as a focused project that simply does its job. Also in another context, it features some nice things. I have not done performance tests but Jetty might be slower than Tomcat. In a different setup, Jetty was not yet up to Tomcat. Does anybody have a solid comparison?

      The architecture and the quality in general are fairly well, particularly when considering the number of current contributors to the core features of the server. There are very few and for this year, Joachim Bauch has done the bulk of the load. Even though this is not optimal, keep in mind that it’s open source and the situation might be even worse with Wowza. There are many others that update the samples, configuration or give some answers in the forum. However, the forum is not as useful as the one of Wowza.

      Recently, a few examples for Flex have been added to the samples. Also a first implementation of RemoteObject is done but not yet ready for prime time. It seems that they have paid more attention to the Flex crowd recently (everything done for Flash?). Concerning tests, there are 20-30 unit tests what certainly leaves room for improvement.

      Bottom line

      There are many more solutions to consider: I haven’t looked at WebOrb, OpenAMF, GraniteDS and the other servers that do not support Java. Some of them are  RubyAMF, AMfPHP, PHPObject, SabreAMF, DjangoAMF and more.

      For the moment, Wowza fits best my needs for real time stuff and I will try to combine it with my Scala code. For data exchange, I use good old HTTPService. “good old” relates to HTTP not HTTPService as the Flex class is very restricted in features. More about that in another blog.

      How Flex exchanges data with red5

      Let’s focus on what happens between Hugo, the user and NetConnection: What are the options for exchanging data between red5 and Flex?data communication with red5
      (click image to enlarge)

      • All of these options are asynchronous.
      • Besides loading video or audio streams, I also save some other loading mechanisms for future blogs:
      • Note that RemoteClass is a different story. This is a metadata tag in ActionScript and tells Flex and red5 that a class in ActionScript corresponds to a class on the Java-side. You can use RemoteClasses with all options except Messaging (I believe).
      • Sources are Joachim’s tutorials, Create new Java red5 application, Flex docs , particularly the API, red5 mailing list and red5 wiki.

      1. Remote Shared Object (RSO)

      • Flex API: SharedObject
      • red5 API: SharedObject
      • See previous entry.
      • Some explanations to the drawing: Each dinosaur represents objects like a string, number, xml, class, etc. There is only one real group of dinosaurs. However, Hugo, Fiona and the server have one local copy of the group. As soon as anybody changes the SharedObject, it is automatically communicated to the others.
      • Anna does not have the same SharedObject, so she knows nothing about dinosaurs.
      • You can have any number SharedObjects in your system only limited by resource restrictions (pretty much the same as with groups of dinosaurs on earth).
      • Groups of dinosaurs live in the wild (everybody can access them) or locked in the zoo (restrict access on the server)

      2. Remote Procedure Call (RPC), Flex to red5

      3. Remote Procedure Call (RPC), red5 to Flex

      • Flex API: set netConnection.client = class with the public method “flexMethodName”
      • red5 API: iServiceCapableConnection.invoke(”flexMethodName”)
      • It’s basically the same as option 2. The main difference is that you need a ServiceCapableConnection. This can be done with all options 1-5 from here, but I suspect very different loads of network traffic. (Has anybody analyzed this?)
      • As above, see Joachim’s guide.

      4. Remote Object

      • Flex API: RemoteObject, sample of a call
      • red5: declarative, in code?
      • This is the newest baby of red5. It has been just implemented. You find a sample in the echo application in red5.
      • The dinosaurs symbolize an ancient Java object that hasn’t been necessarily created by the red5 programmer. In other words, you can use POJOs for RemoteObjects including Java classes from third-party libraries.
      • RemotObjects are basically the same as RPC in option 2. It is nicely integrated into Flex so it looks like the other RPC services HTTPService and WebService.

      5. Messaging

      • Flex API: Producer, Consumer
      • red5: ???
      • The entire infrastructure like AsyncMessage exists in red5 but I haven´t invested in the how-to/whether.
      • Consumer confirm each message with an ACK. I assume that the acknowledgment does not only go to the server but also to the Producer?
      • Besides the ACK, messaging is a one-way communication. However, nobody will hold you off establishing Consumers also as Producers.
      • There is always one Producer and 0 to infinite Consumer.

      Suggestions, corrections, etc are welcome.

      Follow

      Get every new post delivered to your Inbox.