You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Gabriele Campi <ga...@medialogic.eu> on 2014/07/01 09:02:44 UTC
Re: list of images: poor performances
Hi Alex,
this is the code of the itemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="false" cacheAsBitmap="true"
opaqueBackground="0x555555"
width="150" height="80"
<fx:Script>
<![CDATA[
override public function set data(value:Object):void{
super.data=value;
if(value !=null)
bmp.source = value.my_local_url;
}
]]>
</fx:Script>
<s:BitmapImage id="bmp" width="150" height="80"
contentLoader="{MyAssetsManager.instance.imageCache}"
/>
</s:ItemRenderer>
Il 30/06/14 18:55, Alex Harui ha scritto:
> Can you post the code for your renderer? How many bytes total for 150 images at this lower resolution? Can you pre-compute the total set of images?
>
> Thanks,
> -Alex
> ________________________________________
> From: Gabriele Campi [gabriele.campi@medialogic.eu]
> Sent: Monday, June 30, 2014 9:34 AM
> To: users@flex.apache.org
> Subject: Re: list of images: poor performances
>
> Hi Alex,
>
> I've created a 150x80 version of my images but performances are almost
> the same (at least on Android)
>
> Gabri
>
>
> Il 30/06/14 17:19, Alex Harui ha scritto:
>> Hi Gabriele,
>>
>> You say your renderer is 150x80, yet the source images are 400x400 and up to 100KB.
>>
>> Image loading is asynchronous, but bitmap rendering is not. If a 400x400 image has to be shrunk to 150x80, that will take a lot of CPU power. It would be better to have the images re-sampled before downloading. There will be less data and the bitmap renderer will not have to shrink images. As a test, chop a bunch of images to the right size and see if it performs better.
>>
>> -Alex
>> ________________________________________
>> From: Gabriele Campi [gabriele.campi@medialogic.eu]
>> Sent: Monday, June 30, 2014 8:11 AM
>> To: users@flex.apache.org
>> Subject: Re: list of images: poor performances
>>
>> My custom ItemRenderer is 150x80
>> I display 18 items at the same time
>> Using an IconItemRenderer doesn't help
>>
>>
>> *GABRIELE CAMPI*
>> Graphical Department
>>
>>
>> Il 30/06/14 17:09, Gabriele Campi ha scritto:
>>> 150 images
>>> Size 10 to 100 KB
>>> 400x400 pixel
>>>
>>> On iPad retina is almost ok. On iPad2/Mini is slow. On Android (galaxy
>>> tab 2) the list is unusable.
>>> Every new row of the list seems to freeze the ui while images are loading.
>>> I don't understand, Isn't the load process of the images asynchronous?
>>>
>>> Gabri
>>>
>>>
>>>
>>> Il 30/06/14 16:49, Alex Harui ha scritto:
>>>> How many images are we talking about? What pixel dimensions are the images in the list? What are some of the sizes in bytes of the images being downloaded?
>>>>
>>>> -Alex
>>>> ________________________________________
>>>> From: Gabriele Campi [gabriele.campi@medialogic.eu]
>>>> Sent: Monday, June 30, 2014 6:30 AM
>>>> To: Javier Guerrero García; users
>>>> Subject: Re: list of images: poor performances
>>>>
>>>> Nothing seems to work... performances are even worse with a timer or delay
>>>> I cannot cache all the images because of memory consumption
>>>>
>>>> Il 28/06/14 10:44, Javier Guerrero García ha scritto:
>>>>> Also adjust the opaqueBackground, don't set the image sources
>>>>> inmediately but after a short timeout (so if you scroll down fast
>>>>> skipping lets say 50 images you DON'T load 50 images before loading
>>>>> the 51st), and use a contentCache loader with queueing
>>>>> (http://corlan.org/2011/08/16/flex-mobile-development-caching-images-using-contentcache/)
>>>>>
>>>>>
>>>>> P.S. you can use the ContentCache straight from MXML, not like the
>>>>> sources in the link. Just declare it, set an ID and the rest of the
>>>>> parameters, and set contentCache="{id}" in your itemRenderer.
>>>>>
>>>>>
>>>>> On Sat, Jun 28, 2014 at 6:58 AM, Alex Harui <aharui@adobe.com
>>>>> <ma...@adobe.com>> wrote:
>>>>>
>>>>> Make sure you are using a bitmap cache and that the images are not
>>>>> being scaled down on the device.
>>>>> Sent via the PANTECH Discover, an AT&T 4G LTE smartphone.
>>>>>
>>>>> Gabriele Campi <gabriele.campi@medialogic.eu
>>>>> <ma...@medialogic.eu>> wrote:
>>>>>
>>>>>
>>>>> Hi,
>>>>> in a mobile app I need to display a list of 200 images. On the list I
>>>>> use a tileLayout with virtualLayout=true and a custom itemRenderer
>>>>> that
>>>>> only contains a Spark Image. On the set value method of the
>>>>> itemrenderer
>>>>> I change the source of the image with the path to the new bitmap.
>>>>> It works, but performances are poor and the list doesn't scroll
>>>>> well. On
>>>>> iPad it's almost acceptable, but on Android I have to scroll row
>>>>> by row
>>>>> and wait until every image of the row is loaded.
>>>>> Any suggestions to improve the situation?
>>>>> Thanks
>>>>>
>>>>> Gabriele
>>>>>
>>>>>
>
RE: list of images: poor performances
Posted by Cosma Colanicchia <co...@gmail.com>.
Maybe you could use adobe scout to check what is taking so much time in
each frame processing.
Il 01/lug/2014 16:24 "Alex Harui" <ah...@adobe.com> ha scritto:
> OK, the renderer looks reasonable. I assume you've played with the values
> of autoDrawBackground and cacheAsBitmap and it didn't make much difference?
>
> So now that you have tuned your images to the final resolution, are you
> still running out of memory in the image cache?
>
> And does the scrolling get better after you've scrolled all of the images
> into the image cache?
>
> Another option, if you can pre-compute the data set, is to use something
> like sprite-sheets.
>
> -Alex
> ________________________________________
> From: Gabriele Campi [gabriele.campi@medialogic.eu]
> Sent: Tuesday, July 1, 2014 12:02 AM
> To: users@flex.apache.org
> Subject: Re: list of images: poor performances
>
> Hi Alex,
>
> this is the code of the itemRenderer
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> autoDrawBackground="false" cacheAsBitmap="true"
> opaqueBackground="0x555555"
> width="150" height="80"
> <fx:Script>
> <![CDATA[
>
> override public function set data(value:Object):void{
> super.data=value;
>
> if(value !=null)
> bmp.source = value.my_local_url;
> }
>
> ]]>
> </fx:Script>
>
> <s:BitmapImage id="bmp" width="150" height="80"
> contentLoader="{MyAssetsManager.instance.imageCache}"
> />
> </s:ItemRenderer>
>
>
>
>
>
> Il 30/06/14 18:55, Alex Harui ha scritto:
> > Can you post the code for your renderer? How many bytes total for 150
> images at this lower resolution? Can you pre-compute the total set of
> images?
> >
> > Thanks,
> > -Alex
> > ________________________________________
> > From: Gabriele Campi [gabriele.campi@medialogic.eu]
> > Sent: Monday, June 30, 2014 9:34 AM
> > To: users@flex.apache.org
> > Subject: Re: list of images: poor performances
> >
> > Hi Alex,
> >
> > I've created a 150x80 version of my images but performances are almost
> > the same (at least on Android)
> >
> > Gabri
> >
> >
> > Il 30/06/14 17:19, Alex Harui ha scritto:
> >> Hi Gabriele,
> >>
> >> You say your renderer is 150x80, yet the source images are 400x400 and
> up to 100KB.
> >>
> >> Image loading is asynchronous, but bitmap rendering is not. If a
> 400x400 image has to be shrunk to 150x80, that will take a lot of CPU
> power. It would be better to have the images re-sampled before
> downloading. There will be less data and the bitmap renderer will not have
> to shrink images. As a test, chop a bunch of images to the right size and
> see if it performs better.
> >>
> >> -Alex
> >> ________________________________________
> >> From: Gabriele Campi [gabriele.campi@medialogic.eu]
> >> Sent: Monday, June 30, 2014 8:11 AM
> >> To: users@flex.apache.org
> >> Subject: Re: list of images: poor performances
> >>
> >> My custom ItemRenderer is 150x80
> >> I display 18 items at the same time
> >> Using an IconItemRenderer doesn't help
> >>
> >>
> >> *GABRIELE CAMPI*
> >> Graphical Department
> >>
> >>
> >> Il 30/06/14 17:09, Gabriele Campi ha scritto:
> >>> 150 images
> >>> Size 10 to 100 KB
> >>> 400x400 pixel
> >>>
> >>> On iPad retina is almost ok. On iPad2/Mini is slow. On Android (galaxy
> >>> tab 2) the list is unusable.
> >>> Every new row of the list seems to freeze the ui while images are
> loading.
> >>> I don't understand, Isn't the load process of the images asynchronous?
> >>>
> >>> Gabri
> >>>
> >>>
> >>>
> >>> Il 30/06/14 16:49, Alex Harui ha scritto:
> >>>> How many images are we talking about? What pixel dimensions are the
> images in the list? What are some of the sizes in bytes of the images
> being downloaded?
> >>>>
> >>>> -Alex
> >>>> ________________________________________
> >>>> From: Gabriele Campi [gabriele.campi@medialogic.eu]
> >>>> Sent: Monday, June 30, 2014 6:30 AM
> >>>> To: Javier Guerrero García; users
> >>>> Subject: Re: list of images: poor performances
> >>>>
> >>>> Nothing seems to work... performances are even worse with a timer or
> delay
> >>>> I cannot cache all the images because of memory consumption
> >>>>
> >>>> Il 28/06/14 10:44, Javier Guerrero García ha scritto:
> >>>>> Also adjust the opaqueBackground, don't set the image sources
> >>>>> inmediately but after a short timeout (so if you scroll down fast
> >>>>> skipping lets say 50 images you DON'T load 50 images before loading
> >>>>> the 51st), and use a contentCache loader with queueing
> >>>>> (
> http://corlan.org/2011/08/16/flex-mobile-development-caching-images-using-contentcache/
> )
> >>>>>
> >>>>>
> >>>>> P.S. you can use the ContentCache straight from MXML, not like the
> >>>>> sources in the link. Just declare it, set an ID and the rest of the
> >>>>> parameters, and set contentCache="{id}" in your itemRenderer.
> >>>>>
> >>>>>
> >>>>> On Sat, Jun 28, 2014 at 6:58 AM, Alex Harui <aharui@adobe.com
> >>>>> <ma...@adobe.com>> wrote:
> >>>>>
> >>>>> Make sure you are using a bitmap cache and that the images
> are not
> >>>>> being scaled down on the device.
> >>>>> Sent via the PANTECH Discover, an AT&T 4G LTE smartphone.
> >>>>>
> >>>>> Gabriele Campi <gabriele.campi@medialogic.eu
> >>>>> <ma...@medialogic.eu>> wrote:
> >>>>>
> >>>>>
> >>>>> Hi,
> >>>>> in a mobile app I need to display a list of 200 images. On
> the list I
> >>>>> use a tileLayout with virtualLayout=true and a custom
> itemRenderer
> >>>>> that
> >>>>> only contains a Spark Image. On the set value method of the
> >>>>> itemrenderer
> >>>>> I change the source of the image with the path to the new
> bitmap.
> >>>>> It works, but performances are poor and the list doesn't
> scroll
> >>>>> well. On
> >>>>> iPad it's almost acceptable, but on Android I have to scroll
> row
> >>>>> by row
> >>>>> and wait until every image of the row is loaded.
> >>>>> Any suggestions to improve the situation?
> >>>>> Thanks
> >>>>>
> >>>>> Gabriele
> >>>>>
> >>>>>
> >
>
RE: list of images: poor performances
Posted by Alex Harui <ah...@adobe.com>.
OK, the renderer looks reasonable. I assume you've played with the values of autoDrawBackground and cacheAsBitmap and it didn't make much difference?
So now that you have tuned your images to the final resolution, are you still running out of memory in the image cache?
And does the scrolling get better after you've scrolled all of the images into the image cache?
Another option, if you can pre-compute the data set, is to use something like sprite-sheets.
-Alex
________________________________________
From: Gabriele Campi [gabriele.campi@medialogic.eu]
Sent: Tuesday, July 1, 2014 12:02 AM
To: users@flex.apache.org
Subject: Re: list of images: poor performances
Hi Alex,
this is the code of the itemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
autoDrawBackground="false" cacheAsBitmap="true"
opaqueBackground="0x555555"
width="150" height="80"
<fx:Script>
<![CDATA[
override public function set data(value:Object):void{
super.data=value;
if(value !=null)
bmp.source = value.my_local_url;
}
]]>
</fx:Script>
<s:BitmapImage id="bmp" width="150" height="80"
contentLoader="{MyAssetsManager.instance.imageCache}"
/>
</s:ItemRenderer>
Il 30/06/14 18:55, Alex Harui ha scritto:
> Can you post the code for your renderer? How many bytes total for 150 images at this lower resolution? Can you pre-compute the total set of images?
>
> Thanks,
> -Alex
> ________________________________________
> From: Gabriele Campi [gabriele.campi@medialogic.eu]
> Sent: Monday, June 30, 2014 9:34 AM
> To: users@flex.apache.org
> Subject: Re: list of images: poor performances
>
> Hi Alex,
>
> I've created a 150x80 version of my images but performances are almost
> the same (at least on Android)
>
> Gabri
>
>
> Il 30/06/14 17:19, Alex Harui ha scritto:
>> Hi Gabriele,
>>
>> You say your renderer is 150x80, yet the source images are 400x400 and up to 100KB.
>>
>> Image loading is asynchronous, but bitmap rendering is not. If a 400x400 image has to be shrunk to 150x80, that will take a lot of CPU power. It would be better to have the images re-sampled before downloading. There will be less data and the bitmap renderer will not have to shrink images. As a test, chop a bunch of images to the right size and see if it performs better.
>>
>> -Alex
>> ________________________________________
>> From: Gabriele Campi [gabriele.campi@medialogic.eu]
>> Sent: Monday, June 30, 2014 8:11 AM
>> To: users@flex.apache.org
>> Subject: Re: list of images: poor performances
>>
>> My custom ItemRenderer is 150x80
>> I display 18 items at the same time
>> Using an IconItemRenderer doesn't help
>>
>>
>> *GABRIELE CAMPI*
>> Graphical Department
>>
>>
>> Il 30/06/14 17:09, Gabriele Campi ha scritto:
>>> 150 images
>>> Size 10 to 100 KB
>>> 400x400 pixel
>>>
>>> On iPad retina is almost ok. On iPad2/Mini is slow. On Android (galaxy
>>> tab 2) the list is unusable.
>>> Every new row of the list seems to freeze the ui while images are loading.
>>> I don't understand, Isn't the load process of the images asynchronous?
>>>
>>> Gabri
>>>
>>>
>>>
>>> Il 30/06/14 16:49, Alex Harui ha scritto:
>>>> How many images are we talking about? What pixel dimensions are the images in the list? What are some of the sizes in bytes of the images being downloaded?
>>>>
>>>> -Alex
>>>> ________________________________________
>>>> From: Gabriele Campi [gabriele.campi@medialogic.eu]
>>>> Sent: Monday, June 30, 2014 6:30 AM
>>>> To: Javier Guerrero García; users
>>>> Subject: Re: list of images: poor performances
>>>>
>>>> Nothing seems to work... performances are even worse with a timer or delay
>>>> I cannot cache all the images because of memory consumption
>>>>
>>>> Il 28/06/14 10:44, Javier Guerrero García ha scritto:
>>>>> Also adjust the opaqueBackground, don't set the image sources
>>>>> inmediately but after a short timeout (so if you scroll down fast
>>>>> skipping lets say 50 images you DON'T load 50 images before loading
>>>>> the 51st), and use a contentCache loader with queueing
>>>>> (http://corlan.org/2011/08/16/flex-mobile-development-caching-images-using-contentcache/)
>>>>>
>>>>>
>>>>> P.S. you can use the ContentCache straight from MXML, not like the
>>>>> sources in the link. Just declare it, set an ID and the rest of the
>>>>> parameters, and set contentCache="{id}" in your itemRenderer.
>>>>>
>>>>>
>>>>> On Sat, Jun 28, 2014 at 6:58 AM, Alex Harui <aharui@adobe.com
>>>>> <ma...@adobe.com>> wrote:
>>>>>
>>>>> Make sure you are using a bitmap cache and that the images are not
>>>>> being scaled down on the device.
>>>>> Sent via the PANTECH Discover, an AT&T 4G LTE smartphone.
>>>>>
>>>>> Gabriele Campi <gabriele.campi@medialogic.eu
>>>>> <ma...@medialogic.eu>> wrote:
>>>>>
>>>>>
>>>>> Hi,
>>>>> in a mobile app I need to display a list of 200 images. On the list I
>>>>> use a tileLayout with virtualLayout=true and a custom itemRenderer
>>>>> that
>>>>> only contains a Spark Image. On the set value method of the
>>>>> itemrenderer
>>>>> I change the source of the image with the path to the new bitmap.
>>>>> It works, but performances are poor and the list doesn't scroll
>>>>> well. On
>>>>> iPad it's almost acceptable, but on Android I have to scroll row
>>>>> by row
>>>>> and wait until every image of the row is loaded.
>>>>> Any suggestions to improve the situation?
>>>>> Thanks
>>>>>
>>>>> Gabriele
>>>>>
>>>>>
>
Re: list of images: poor performances
Posted by Tom Chiverton <tc...@extravision.com>.
Try also checking bmp.source != value.my_local_url before refreshing the
source.
Tom
On 01/07/14 08:02, Gabriele Campi wrote:
> if(value !=null)
> bmp.source = value.my_local_url;
> }