1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    flixmeplease is on a distinguished road

      0  

    Default Problem with carousel and lot's of pictures

    Problem with carousel and lot's of pictures


    Hi all,

    i'am currently working on a mobile App for the iPad. In this app i'am using a carousel, to show a slideshow of images, located on a different server.

    So the Problem is, i don't know, how many pictures i have to show in the carousel.
    To fix this issue i'am adding on the fly new items in the carousel for every picture i receive from the server.

    Source-Code (just the adding-part):
    Code:
    if (myCondition) {
    ...
    		carousel1.add({html: tempHtml}); // tempHtml is the generated HTML-code for setting up my image-tag
    		carousel1.doLayout();
    		
    		tempImage = new Image();
    		tempImage.src = stringToUrl;
    	
    		document.getElementById(idCounter).src = tempImage.src; // adding the source to the generated image-tag
    ...
    }
    This works fine.
    But after adding a view images by this way, i get a crashed mobile Safari on my iPad. I think that browsers cache is overloaded.

    I've tried to remove previous items from the carousel to free a little bit of memory, but it doesn't solve the problem.
    So any idea what i can do to prevent these crashes?

    kind regards

    flixmeplease

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    8
    TommyMaintz will become famous soon enough

      0  

    Default


    It might be another issue unrelated to memory on the iPad that we aren't aware of. Would it be possible to see the source code of the app so that we can investigate this further?

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    flixmeplease is on a distinguished road

      0  

    Default


    Hi Tommy,

    thanks for your fast reply.
    My source-code is based on the carousel-example and differs not much from it.

    Lets see what we have

    - Index.js
    Code:
    var carousel1;
    
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
    	layout: 'card',
    	indicator: false,		
        onReady: function() {
    
            // Create a Carousel of Items
            carousel1 = new Ext.Carousel({
               defaults: { cls: 'cardtest' },
    	// Adding the first 5 items for precaching   
                items: [{
    				id: 'card-0',
               		html: '<img width="768px" height="939px" id="0" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0003.jpg&width=768&height=939" />'
              },{
    			  id: 'card-1',
                  html: '<img width="768px" height="939px" id="1" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0004.jpg&width=768&height=939" />'
              },{
    			  id: 'card-2',
                  html: '<img width="768px" height="939px" id="2" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0005.jpg&width=768&height=939" />'
              },{
    			  id: 'card-3',
                  html: '<img width="768px" height="939px" id="3" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0006.jpg&width=768&height=939" />'
              },{
    			  id: 'card-4',
                  html: '<img width="768px" height="939px" id="4" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0007.jpg&width=768&height=939" />'
              }]
            });
            new Ext.Panel({
              fullscreen: true,
              layout: {
                  type: 'vbox',
                  align: 'stretch'
              },
              defaults: {
                  flex: 1
              },
              items: [carousel1]
            });
        }	
    });
    So the only thing i have done here is to add 5 items with html-img tags.


    - ext-touch-debug.js

    Code:
    // URL index
    // i have to start with this index, because the url-index on the server starts with a 3, don't ask me why ... 
    var urlIndex = 8;
    var idCounter = 5;
    
    function setNext() {
    		
    stringToUrl = "http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F";
    
    	if(urlIndex <= 9) {
    		stringToUrl = stringToUrl + "000"; 
    		stringToUrl = stringToUrl + urlIndex;
    	}
    	else if (urlIndex > 9 && urlIndex <= 99) {
    		stringToUrl = stringToUrl + "00"; 
    		stringToUrl = stringToUrl + urlIndex;
    	}
    	else if (urlIndex > 99 && urlIndex <= 999) {
    		stringToUrl = stringToUrl + "0"; 
    		stringToUrl = stringToUrl + urlIndex;
    	}
    
    	stringToUrl = stringToUrl + ".jpg&width=768&height=939";
    
            var tempHtml = "<img width='768px' height='939px' id='";
    	tempHtml = tempHtml + idCounter;
    	tempHtml = tempHtml + "' />";
    
    	carousel1.add({html: tempHtml});
    	carousel1.doLayout();
    		
    	tempImage = new Image();
    	tempImage.src = stringToUrl;
    	
    	document.getElementById(idCounter).src = tempImage.src;
    		
    	tempImage = null;
    	
    	urlIndex++;
    	idCounter++;
    }
    The setNext() function is called here:

    Code:
    ...
        onScrollEnd: function(scroller) {
            var activeX = this.activeItemX,
                deltaX = scroller.offset.x - activeX,
                width = this.el.getWidth();
    
            
            if (deltaX < 0 && Math.abs(deltaX) > width / 2) {
                this.next();
    			setNext();
    
            }
            
            else if (deltaX > 0 && Math.abs(deltaX) > width / 2) {
                this.previous();
            }
    ...
    nothing else is changed in this file.

    Index.html is without any changes.

    I know this code isn't realy cleaned up, i have to add some 'if's' and 'else' more to clean it a little, but this is my way to code, first the basic function and after that the cosmetic-stuff .

    When i run this code on my mac in the safari everything works like it should. Only on the iPad after maybe 25 items added safari crashes.
    Adding that numbers of items directly in the index.js and not on the fly results in the same, safari starts and after 1 second crashed.


    Kind regards

    flixmeplease

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    8
    TommyMaintz will become famous soon enough

      0  

    Default


    First of all, I would highly advice not to just add code in the global namespace, especially not in ext-touch-debug.js. Also, you might want to bundle your functionality inside an extension of our components. For example, I moved the behavior that you want into a subclass called InfiniteCarousel. The following code works for me without crashing my iPad up until the point that there are no more images available on the server. You might want to implement logic in the InfiniteCarousel that removes the first items each time another item is added, and puts it back in when you navigate close to the first card again.

    Code:
    Ext.ns('Ext.ux');
    
    Ext.ux.InfiniteCarousel = Ext.extend(Ext.Carousel, {
        fetchThreshold: 1,
        
        onCardSwitch : function(card) {
            Ext.ux.InfiniteCarousel.superclass.onCardSwitch.call(this, card);
            
            if (this.items.length - this.items.indexOf(card) <= (this.fetchThreshold + 1)) {
                this.scroller.on('scrollend', function() {
                    var nextCard = this.fetchNextCard();
                    if (nextCard) {
                        this.add(nextCard);
                        this.doComponentLayout();                    
                    }
                }, this, {single: true});
            }
        },
        
        // Template method
        fetchNextCard : function() {
            return null;
        }
    });
    
    
    Ext.setup({
        tabletStartupScreen: 'tablet_startup.png',
        phoneStartupScreen: 'phone_startup.png',
        icon: 'icon.png',
        glossOnIcon: false,
        layout: 'card',
        indicator: false,
        onReady: function() {
            // URL index
            // i have to start with this index, because the url-index on the server starts with a 3, don't ask me why ... 
            var urlIndex = 8;
            var idCounter = 5;
            
            new Ext.ux.InfiniteCarousel({
                fullscreen: true,
                fetchThreshold: 2,
                items: [{
                    id: 'card-0',
                    html: '<img width="768px" height="939px" id="0" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0003.jpg&width=768&height=939" />'
                },
                {
                    id: 'card-1',
                    html: '<img width="768px" height="939px" id="1" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0004.jpg&width=768&height=939" />'
                },
                {
                    id: 'card-2',
                    html: '<img width="768px" height="939px" id="2" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0005.jpg&width=768&height=939" />'
                },
                {
                    id: 'card-3',
                    html: '<img width="768px" height="939px" id="3" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0006.jpg&width=768&height=939" />'
                },
                {
                    id: 'card-4',
                    html: '<img width="768px" height="939px" id="4" src="http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F0007.jpg&width=768&height=939" />'
                }],
                
                fetchNextCard : function() {
                    var stringToUrl = "http://84.201.68.228:8080/fsi/server?type=image&source=onlinekat%2Fonlinekat_mm%2Ffsi-test%2FHeine%2F";
    
                	if (urlIndex <= 9) {
                		stringToUrl = stringToUrl + "000"; 
                		stringToUrl = stringToUrl + urlIndex;
                	}
                	else if (urlIndex > 9 && urlIndex <= 99) {
                		stringToUrl = stringToUrl + "00"; 
                		stringToUrl = stringToUrl + urlIndex;
                	}
                	else if (urlIndex > 99 && urlIndex <= 999) {
                		stringToUrl = stringToUrl + "0"; 
                		stringToUrl = stringToUrl + urlIndex;
                	}
    
                	stringToUrl = stringToUrl + ".jpg&width=768&height=939";
    
                    var tempHtml = '<img width="768" height="939" id="card-' + idCounter + '" ';
                	tempHtml += 'src="' + stringToUrl + '" />';
    
                	urlIndex++;
                	idCounter++;
                	
                    return {html: tempHtml};
                }
            });
        }
    });

  5. #5
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    flixmeplease is on a distinguished road

      0  

    Default


    Wow... what a kind of superb support.
    Mr TommyMaintz i have to thank you a lot.

    So i'm going to use your code as a awesome base for my app
    And now its time for me to do the cosmetics

    Again thanks a lot.

    __Edit:

    Hmpf i think i was a little euphoric
    So i copy/pasted your code, added it to a clean project (index.js) and getting the same problems again. After adding 31 images i get a crashed Safari.

    Tried to fix the problem with:
    - Adding a remove-function (removing the last card after adding a new card), results in pictures are no more displayed after 36 added (just empty cards). But i can slide to infinity, no crashes.

    -Resizing the images to something really small (5 x 5 px) allows me to slide through all of them located on the server (70 and more).

    I have no more further idea what the problem is. Especially you said, you can slide trough all the images on the server.

    Any idea?

  6. #6
    Ext User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    0
    arpecop is on a distinguished road

      0  

    Default thanks

    thanks


    your help is extremely helpful, 
    as the previous member I am completely lost with this , can you help me with feature that disables - 2 state so the load would not overheat our devices

    thanks

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    8
    TommyMaintz will become famous soon enough

      0  

    Default


    Ok, I will see what I can do in terms of providing an example that does this. We are planning on extending our carousel to support dynamic loading of new cards, I'm just not sure if we can guarantee to have this included in the initial 1.0 release.

  8. #8
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    flixmeplease is on a distinguished road

      0  

    Default


    Hi all,

    after a break i'am back :-)
    At the first, it seems that this problem is a known issue coming from the memory management of the ipad.
    By my experience after adding something like 6-7 mb of images, the application crashes or shows just empty image-boxes.

    So for me i found 2 ways to get this problem 'fixed'.

    1st:
    If you only use a fixed value of image-tags (i tested it with 1 to 5) and never (re)move them from the DOM, just override the src of them, you can 'refresh' those with as much images as you want.
    Using the add and remove function provided by the sencha-touch api you will run into an memory-crash.
    In my opinion, this is not really a fix, because imho you have to add new items, to be able to slide in the carousel. Moving the img-Tag to a newly added empty div results in a memory-crash too.

    2nd:
    I added an iframe. There i placed my carousel. When the carousel slides to another card, i add a new item to it.
    After adding a few of items (depends on how big the size of your images is) i reload the iframe with a parameter holding the current page to start from this after reload.
    Reloading the iframe fixes the memory-crash. I can add as many images as i want.
    But this even sounds not very clean to me.

    So i wil go on and see what can be figured out.

    Greets

  9. #9
    Ext User
    Join Date
    Jul 2010
    Posts
    1
    Vote Rating
    0
    jpadilla is on a distinguished road

      0  

    Default


    Hey flixmeplease,

    Im also having this problem. The iframe idea could be a solution. Ive tried removing carousel items after loading new ones, but i still get black pages after a few images. Im using this with a UIWebView on an iPad App. If you find a nice solution to this please post us what you did! Kinda stuck with this

    Thanks

  10. #10
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    flixmeplease is on a distinguished road

      0  

    Default


    Hi jpadilla,

    as soon as i get a version running, i will post it here.
    But for me it seems like a bigger problem, taking some days to fix.
    At the moment i am trying to use canvas-tags instead of img-tags and the most important thing, a caching-strategy.
    I can run to a lot of images with it but it has a horrible performance :-(.

    Because you are using an UIWebView you must have some native code. Why you do not use a native Objectiv-C image slider? Its maybe the faster and easier way until the safari memory problem is fixed.

    Greets.

Similar Threads

  1. [OPEN] [FIXED-110] Carousel indicator breaks down after changing carousel content.
    By Mphasize in forum Sencha Touch 1.x: Bugs
    Replies: 6
    Last Post: 1 Jul 2010, 11:41 AM
  2. How to Get Pictures From Sql Server
    By ScytheV in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 24 Nov 2009, 6:27 AM
  3. Template with some pictures only shows the first one again and again...
    By wurstkuchen in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 22 Sep 2009, 10:27 AM
  4. Resizeable Pictures/Demos
    By sheddy in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 13 Feb 2009, 10:48 AM

Thread Participants: 4

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar