16 Replies Latest reply on Jan 19, 2011 7:34 PM by rockholla

    The Pan|Zoom component for Containers

      Its seems very tedious and quite an elaborate task to convert the Pan|Zoom component to work on a Container or even just a UIComponent instead of a Bitmap (The ImageViewer custom component).

      Can anyone provide some insight as to what I'm missing in case its a bliss and if not, is anyone interested in making it work on a Container (I can't imagine im the only one)...

      Otherwise, very good initiative with the FIG's... I will be watching it closely in the future...
        • 1. Re: The Pan|Zoom component for Containers
          I'm trying to do exactly this. If it still interests you, please contact gabrielaperry@hotmail.com
          • 2. Re: The Pan|Zoom component for Containers
            gabi_poa Level 1
            In fact, I already managed to make ImageViewer:
            1. receive an UIComponent
            2. add it to its display list
            3. pan it

            But the component got completely messed up.
            As I am not an experienced OO developer, I could use some help....
            As well as some guidance on overrinding UIComponents methods (but this is easier as there is a lot of material to read).
            • 3. Re: The Pan|Zoom component for Containers
              I'm looking to add a marker onto the map, when you pan, i need it to pan too. when you zoom, i need it to zoom as well.

              How do I do this?

              Where do I add the child? imageViewer.addChild() doesn't work because the thing wont pan around.
              • 4. The Pan|Zoom component for Containers
                gabi_poa Level 1
                Making the object follow the map is not a really complex issue, as long as you understand some basic matrix logic.
                You should not add your marker as a child of the viewer, because even if you manage to do it (and I think you cant, because this component in FIG do not receive other UIComps) it will zoom (and thats not what you want).
                I am using a modified version of Callout and my own pan zoom.
                I suggest that you use the Callout component (very easy to customize) and, to make the mapping, you can use this method:
                • 5. Re: The Pan|Zoom component for Containers
                  Hypothetically, if I DON'T understand basic matrix logic, which I don't...

                  I would put your function "transformCoordinates" in my main application.
                  from there, I call my imageViewer module and create a canvas above the image viewer module. I add children to the canvas.

                  Then how do I link the clicks? So when I click on the map and drag, the canvas and the imageViewer move together?

                  Would you be interested in making some money? We would pay whatever hourly rate you want to get this done as long as you take credit card... PayPal maybe or Google Checkout?

                  please contact me if you are interested:
                  • 6. Re: The Pan|Zoom component for Containers
                    I guess my biggest question is, how will the callout box know when to call transform coordinates and then move?

                    I include your function in my main application. I add a callout as a child of my canvas. do i add an event listener? what do i listen for?

                    I'm brand new to flex, if you can't tell...

                    also, will this work with multiple points that are added dynamically?
                    • 7. Re: The Pan|Zoom component for Containers
                      Here is my code if you're interested.

                      So I created a canvas at the bottom that is above imageViewer. I add my button as a child in collectionOnComplete(e:Event) to ivmap (my canvas)...

                      Then what?
                      • 8. Re: The Pan|Zoom component for Containers
                        I thought I would give the solution to everybody.

                        In imageViewer.as there is a function: updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

                        At the very bottom, I added this code:
                        if(bitmapScaleFactor > 3)

                        In the parent application, I added two functions. LoadImages() will put points on a canvas that I have placed over the ImageViewer component. Clear images, will remove the children from that canvas.

                        So when the scalefactor gets above a certain level, it will load the points onto the image. when it zooms out, it will clear them. This clear/load process happens so quickly it looks like it's instant.
                        • 9. Re: The Pan|Zoom component for Containers
                          gabi_poa Level 1
                          Making it zoom and pan was a bit tricky, but I had it done two months ago (in july). The integration of the pan zoom with callout ("kind of spots on the map", the other published FIG componet) repositioning was bit tricky.
                          I solved it with pointTransformations, but it was too expansive, in terms of memory. In my first trial, theyre positions were recalcuted as you pan and zoom.
                          Now, in the version I published here
                          you dont hav smooth zooming, and the callouts only are repositioned after your drop the map.

                          I am working now on it. Im probably going to make then blurry or transparent while panning, but as I got this message from the foruns and I had promissed another guy who contacted me a (working) version, I decided to publish it on my blog.
                          Hope it will be usefull.
                          Please, be aware that not really a small application: it has lots of classes. Please read it all before contacting me with any doubts.
                          Best luck :0)
                          • 10. Re: The Pan|Zoom component for Containers
                            This thread seems to have been stolen by the different topic of callouts on images in the Pan|Zoom component; I will try to reclaim it for the original poster. I am also curious if there is a version of this component (or another Flex component) that performs the exact same operations as the Pan|Zoom component on an arbitrary Flex component (e.g. container, canvas) instead of just on an image. An example use case would be for navigating a large organizational chart where the nodes are panels.

                            This would be a VERY useful component to lots of developers. Thanks!

                            • 11. Re: The Pan|Zoom component for Containers
                              gabi_poa Level 1
                              The link on my previous post has a PAN|ZOOM with this funcionality. But it needs serious reworking. You can use it if you like.
                              • 12. Re: The Pan|Zoom component for Containers

                                Did anyone get this working?   I included the following code after the <ns1:ImageViewer> component.


                                            x="150" y="400"
                                            title="CLOVERDALE (O60)"
                                            line1="272 L 31 122.8"
                                            line2="RP 13"

                                The callout does not update when zooming in or out.

                                • 13. Re: The Pan|Zoom component for Containers

                                  Check out http://www.rockholla.org/technology/2011/01/07/flex-as3-pan-zoom-component for an open-source pan zoom component for Flex 4 (also easily updated to work with Flex 3 apps).

                                  • 14. Re: The Pan|Zoom component for Containers
                                    Chien Andalusia

                                    @rockholla - Sorry to jump in at the end of this discussion thread but I'm a relative novice to Flex development. I'm currently working on modifying a pre-existing AIR application coded with Flex 3 and as in the case of the original post, I too have to implement a pan/zoom component for the interface. I have downloaded  your org-rockholla-flex.swc library but my question pertains to how I "downgrade" it to work with a Flex 3 app. I know this may seem very much amateur hour,  but you said it could easily be done. I've done a bit of searching on the web (perhaps with the wrong terms) but most "how-to" guides that I've found seem to pertain to upgrading a pre-existing FLex 3 app to Flex 4. Any help you could give would be sincerely appreciated.

                                    • 15. Re: The Pan|Zoom component for Containers
                                      rockholla Level 1

                                      Updating the PanZoomComponent to work with Flex 3 is primarily just about making sure the containers used are mx containers as opposed to spark (Flex 4) containers.  Additionally the spark container now utilizes a method addElement for adding children to components.  There are a few calls that will need to be updated to use the Flex 3 addChild.  I actually have a branch of the rockholla library that's designed to be Flex 3 capable, and I've started to make some of these changes there; however, it's not fully functional yet--there are other issues to contend with that I haven't had time to tackle yet.  Feel free to grab the source from there nonethless--I don't think it should be too hard to make it work for Flex 3--I, in fact, originally built this thing using Flex 3 and was just flying to update it for Flex 4, that I failed to save a copy of the previous state.