This discussion is archived
11 Replies Latest reply: Oct 27, 2011 7:31 PM by Narayan RSS

ScrollView that list thumbnails images

895137 Newbie
Currently Being Moderated
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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    Please format your code by keeping your codes inside { code } and { code }


    Thanks.
    Narayan
  • 4. Re: ScrollView that list thumbnails images
    895137 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    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 Newbie
    Currently Being Moderated
    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 Pro
    Currently Being Moderated
    Currently visage is in develooment phase. I think New visage will arriv mmme with in a month.

    -narayan

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points