11 Replies Latest reply: Oct 27, 2011 7:31 PM by Narayan RSS

    ScrollView that list thumbnails images

    895137
      I am currently trying to display my images from a selected path by the users.

      images are display in thumbnails format. Somehow i have a few problems as below


      Problem 1
      Any idea how to set the scrollview limit for scrolling? it somehow cuts off my last image into half.

      Problem2
      Whenever i selected my folder, the wall of images does not updates to the latest array of images i have.

      i created a Scrollview with a node Wall (custom node) that stores my thumbnails so that i will be able to scroll.
      I tried implementing my file browser and scrollview onto a Container as it allows me to override a doLayout().
      With the doLayout it will update my file browser(treeview) but it doesnt seems to update my wall of pictures.



      Any ideas whats wrong with this? Or any examples that i could reference?






      [application print screen|http://imageshack.us/photo/my-images/84/screenshot20111019atam0.png/]
        • 1. Re: ScrollView that list thumbnails images
          Narayan
          Hi user,

          I think you are not using the layout for the images. It would be easy to identify your problem if you paste your some code of the images container.

          Thanks.
          Narayan
          • 2. Re: ScrollView that list thumbnails images
            895137
            Narayan wrote:
            Hi user,

            I think you are not using the layout for the images. It would be easy to identify your problem if you paste your some code of the images container.

            Thanks.
            Narayan
            This is the wall class which containts my thumbnails. It will display the array of data for the photo and display each thumbnails accordingly.

            Edited by: 892134 on Oct 20, 2011 2:45 PM
            • 3. Re: ScrollView that list thumbnails images
              Narayan
              Please format your code by keeping your codes inside { code } and { code }


              Thanks.
              Narayan
              • 4. Re: ScrollView that list thumbnails images
                895137
                Narayan wrote:
                Please format your code by keeping your codes inside { code } and { code }


                Thanks.
                Narayan
                Edited by: 892134 on Oct 20, 2011 2:43 PM

                Edited by: 892134 on Oct 20, 2011 2:44 PM

                Edited by: 892134 on Oct 20, 2011 2:45 PM
                • 5. Re: ScrollView that list thumbnails images
                  895137
                  Narayan wrote:
                  Please format your code by keeping your codes inside { code } and { code }


                  Thanks.
                  Narayan
                  Hi narayan,

                  do you have any idea if the way i set my url for my image is correct?
                  It seems like not all of my images load it out correctly. Some remain as black boxes.
                  • 6. Re: ScrollView that list thumbnails images
                    Narayan
                    Hi user,

                    The url which you are giving is not right way.

                    For getting files of LOCAL HOST/SERVER : http://yourdomain.com/dir_of_img/img.extension
                    For getting files of LOCAL COMPUTER : file:///c:/abc.jpg
                    For gettting files of inside your project: "{__DIR__}abc.jpg" {__DIR__} is the main project directory


                    Sorry but I couldn't understand your codes of above .


                    Thanks.
                    Narayan
                    • 7. Re: ScrollView that list thumbnails images
                      895137
                      Narayan wrote:
                      Hi user,

                      The url which you are giving is not right way.

                      For getting files of LOCAL HOST/SERVER : http://yourdomain.com/dir_of_img/img.extension
                      For getting files of LOCAL COMPUTER : file:///c:/abc.jpg
                      For gettting files of inside your project: "{__DIR__}abc.jpg" {__DIR__} is the main project directory


                      Sorry but I couldn't understand your codes of above .


                      Thanks.
                      Narayan
                      Hi Narayan,

                      i am using local computer but i am using a MACBOOK PRO. I tried the url by dragging and image to a window explorer and it gives me a output of
                      file://localhost/Users/username/Pictures/camera/test/1.JPG
                      but i tried with
                      file:/Users/username/Pictures/camera/test/1.JPG

                      both of this display my most of my images, but somehow it didnt display it entirely correct. A few of them will be gone missing and initiate with the rectangle i draw to store that image.

                      I am using netbeans. Is it cause of my ide heap space or stuff?
                      • 8. Re: ScrollView that list thumbnails images
                        895137
                        Narayan wrote:
                        Hi user,

                        The url which you are giving is not right way.

                        For getting files of LOCAL HOST/SERVER : http://yourdomain.com/dir_of_img/img.extension
                        For getting files of LOCAL COMPUTER : file:///c:/abc.jpg
                        For gettting files of inside your project: "{__DIR__}abc.jpg" {__DIR__} is the main project directory


                        Sorry but I couldn't understand your codes of above .


                        Thanks.
                        Narayan
                        hi narayan,
                        Here are some codes that i implemented, i hope you could help :)




                        // this is the method that i called to update my images. Each image is an ThumbImage object
                        function updateImages(photos: Photo[]) {
                            delete  thumbGroup.content;
                           
                            if (photos == null) {
                                println("updateImages photos==null");
                                return;
                            }
                        
                            for (photo in photos) {
                                println("updateImages Photo in Photos");
                        
                                insert ThumbImage {
                                    url: photo.filePath
                                    photoIndex: indexof photo
                                    option: 2
                                } into thumbGroup.content;
                        
                            }
                           
                        }
                        
                        public class ThumbImage extends CustomNode {
                        
                            var width = Constants.THUMB_WIDTH; //180
                            var height = Constants.THUMB_HEIGHT; //180
                            var fromX = 0.0;
                            var fromY = 0.0;
                            var toX = 0.0;
                            var toY = 0.0;
                            var finalR = 0;
                            var startX = 0.0;
                            var startY = 0.0;
                            var mouseDragged = false;
                            var alignment = 0;
                            public var photoIndex: Integer;
                        
                            public var imageView = ImageView {
                            
                                        //The width & height of the bounding box within which the source image is resized as necessary to fit.
                                        fitWidth: bind (width - 4)
                                        fitHeight: bind (height - 4)
                                        //Indicates whether to use a better quality filtering algorithm or a faster one when transforming or scaling the source image to fit within the bounding box provided by fitWidth and fitHeight.
                                        smooth: true
                                    };
                           
                            public var url: String on replace {
                        
                                            imageView.image = Image {
                                                        url: "{Constants.urlMAC}{url}"
                           
                                                        backgroundLoading: true
                                                        //Indicates whether to use a better quality filtering algorithm or a faster one when transforming or scaling the source image to fit within the bounding box provided by fitWidth and fitHeight.
                                                        smooth: true
                                                        width: width
                                                        height: height
                                                    placeholder:Constants.PHOTO_PLACEHOLDER
                                              
                                                    }
                        
                                 
                                        
                                        visible = false;
                        
                                    }
                            //The approximate percentage of image's loading that has been completed.
                            var progress = bind imageView.image.progress on replace {
                                       
                                        // if (progress >= 90.0) {
                                        if (progress >= 100.0) {
                          
                                
                                            visible = true;
                             
                                        }
                               
                                    }
                         
                            var zoomTimeline: Timeline;
                            var hoverRotateTransition: RotateTransition;
                        
                            override function create(): Node {
                        
                                cursor = Cursor.HAND;
                                blocksMouse = true;
                                visible = false;
                        
                                hoverRotateTransition = RotateTransition {
                                            duration: 300ms
                                            node: this
                                        };
                        
                                zoomTimeline = Timeline {
                                        };
                        
                                var borderRect = Rectangle {
                                            width: bind width
                                            height: bind height
                                            strokeWidth: 2.0
                                            stroke: Color.WHITE
                                        }
                        
                                rotate();
                        
                                Group {
                                    content: [borderRect, imageView]
                                }
                            }
                        
                            function initFinalPoint(): Void {
                        
                                var column = javafx.util.Math.round((MosiacMain.scrollView.width / width) - 0.5);
                                var xIndex = photoIndex mod column; //column index
                                var yIndex = photoIndex / column; //row index
                        
                        
                                toX = (xIndex * width);
                                toY = (yIndex * height);
                        
                            }
                        
                            public function rotate(): Void {
                        
                                initFinalPoint();
                        
                                var translateTransition = TranslateTransition {
                                            duration: 2s
                                            node: this
                                            fromX: fromX
                                            toX: toX
                                            fromY: fromY
                                            toY: toY
                                            repeatCount: 1
                                        };
                        
                                zoomTimeline.keyFrames = [
                                            KeyFrame {
                                                time: 500ms
                                                values: [scaleX => 0.5 tween Interpolator.EASEOUT]
                                            },
                                            KeyFrame {
                                                time: 500ms
                                                values: [scaleY => 0.5 tween Interpolator.EASEOUT]
                                            },
                                            KeyFrame {
                                                time: 1s
                                                values: [translateX => toX tween Interpolator.EASEOUT]
                                            },
                                            KeyFrame {
                                                time: 1s
                                                values: [translateY => toY tween Interpolator.EASEOUT]
                                            }
                                        ];
                        
                             
                                var parallelTransition = ParallelTransition {
                                          
                                            content: [
                                                PauseTransition { duration: 1s },
                                                translateTransition
                                            ]
                                        };
                                parallelTransition.play();
                            }
                        
                            public function cancel(): Void {
                                if (imageView.image != null) {
                                    imageView.image.cancel();
                                }
                            }
                        Edited by: 892134 on Oct 20, 2011 2:44 PM
                        • 9. Re: ScrollView that list thumbnails images
                          Narayan
                          I don't think there is any fault in your code. If still the images are not updated when the array is updated then you can try this approach:
                          // this is the method that i called to update my images. Each image is an ThumbImage object
                          function updateImages(photos: Photo[]) {
                          delete  thumbGroup.content;
                          
                          if (photos == null) {
                          println("updateImages photos==null");
                          return;
                          }
                          
                          for (photo in photos) {
                          println("updateImages Photo in Photos");
                          
                          insert ThumbImage {
                          url: photo.filePath
                          photoIndex: indexof photo
                          option: 2
                          } into thumbGroup.content;
                          
                          }
                          
                          }
                          function updateImages(photos: Photo[]) {
                              thumbGroup.content = null;
                              // or thumbGroup.content = [];
                             
                              if (photos == null) {
                                  println("updateImages photos==null");
                                  return;
                              }
                           
                              for (photo in photos) {
                                  println("updateImages Photo in Photos");
                           
                                  insert ThumbImage {
                                      url: photo.filePath
                                      photoIndex: indexof photo
                                      option: 2
                                  } into thumbGroup.content;
                           
                              }
                             
                          }
                          -----------
                          i am using local computer but i am using a MACBOOK PRO. I tried the url by dragging and image to a window explorer and it gives me a output of
                          file://localhost/Users/username/Pictures/camera/test/1.JPG
                          but i tried with
                          file:/Users/username/Pictures/camera/test/1.JPG
                          both of this display my most of my images, but somehow it didnt display it entirely correct. A few of them will be gone missing and initiate with the rectangle i draw to store that image.
                          I have not used mac os x much but i think when you dragged the file to explorer then the mac osx calls it's own built-in localhost or some server inside your computer then displays the content of the images in that server. So that's why there is file://localhost/.
                          When your image are not loaded properly then re-initialize them. You can better keep the images inside your project folder or some http:// server for getting your images loaded properly.



                          My views:
                          The javafx 1.3 is slow comparing to javafx 2.0. Even i've faced, when I used to do multi-thread software ,my javafx usually takes more resource and sometimes hangs and the graphics doesn't update too. So I would like recommend you to divert at JAVAFX 2.0 or Visage Language (http://code.google.com/p/visage/).



                          Thanks.
                          Narayan
                          • 10. Re: ScrollView that list thumbnails images
                            895137
                            Hi,

                            about the visage language , how do i use it?

                            I didnt see any libraries file for me to add it into my java project .

                            regards,
                            yuwen
                            • 11. Re: ScrollView that list thumbnails images
                              Narayan
                              Currently visage is in develooment phase. I think New visage will arriv mmme with in a month.

                              -narayan