Skip to main content

FishEye - Carousel style list menu

7 replies [Last post]
Anonymous

Hi all,

I was wondering if someone could help me or give me a couple of hints on how
to create a horizontal Fisheye or Carousel style menu from a List in LWUIT.
I'm trying to get a similar effect as the ones that are available in J2ME
Polish Fisheye or Carousel Lists items.

Thank you for any help provided.

Cheers
alex
[att1.html]

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Shai Almog

Hi Alex,
this is very easy to achieve in LWUIT. First you need to create your
own renderer that returns a different component for the selected
component (see the fisheye renderer in the LWUIT demo).
You obviously only need to return images in the labels (or align the
text bellow the images etc...).

Then set the renderer to the list and use:
list.setOrientation(List.HORIZONTAL);
list.setFixedSelection(List.FIXED_CENTER);

Thanks,
Shai.

> Hi all,
>
> I was wondering if someone could help me or give me a couple of
> hints on how to create a horizontal Fisheye or Carousel style menu
> from a List in LWUIT.
> I'm trying to get a similar effect as the ones that are available
> in J2ME Polish Fisheye or Carousel Lists items.
>
> Thank you for any help provided.
>
> Cheers
> alex

---------------------------------------------------------------------
To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
For additional commands, e-mail: users-help@lwuit.dev.java.net

az lists

Thanks Shai for your quick reply.

The solution you propose is a good begining.
However I'm trying to acheive a more nifty / cool / professional animation
effect.
I'm not an animation pro and I really like the way the fish eye and carousel
style menus look like on other frameworks. Maybe you can take a look
HERE
or HERE
(on the very first screen of the
media player) and you will understand what I'm really trying to achieve.
I understand I will have to develop the animation and item transition myself
but I'd need some hints on how to create these animations myself.

Is it possible to acheive what I want with LWUIT easily or do I need to
become a 2D / 3D animation professional first ? :)

Thanks again for your feedback.

Cheers,

Alex

On Sat, Jun 21, 2008 at 7:50 AM, Shai Almog wrote:

> Hi Alex,
> this is very easy to achieve in LWUIT. First you need to create your own
> renderer that returns a different component for the selected component (see
> the fisheye renderer in the LWUIT demo).
> You obviously only need to return images in the labels (or align the text
> bellow the images etc...).
>
> Then set the renderer to the list and use:
> list.setOrientation(List.HORIZONTAL);
> list.setFixedSelection(List.FIXED_CENTER);
>
> Thanks,
> Shai.
>
>
> Hi all,
>>
>> I was wondering if someone could help me or give me a couple of hints on
>> how to create a horizontal Fisheye or Carousel style menu from a List in
>> LWUIT.
>> I'm trying to get a similar effect as the ones that are available in J2ME
>> Polish Fisheye or Carousel Lists items.
>>
>> Thank you for any help provided.
>>
>> Cheers
>> alex
>>
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>
>
[att1.html]

Shai Almog

Hi Alex,
we don't have this type of carousel at the moment. You don't really
need to be a huge 2D/3D expert to achieve it though.
In the past I implemented a more elaborate effect using M3G 184 API
but that was far more elaborate than these examples (and the code
can't be published since its copyrighted).
You can achieve this effect by building a new component with
animation and drawing the elements in the right position while
scaling them to the proper size, since LWUIT supports fast scaling
while keeping translucency this should work rather well. I suggest
scaling at least some of the images in advance though and avoiding a
large number of images.

If you need allot of images and runtime scaling you can use 184 to
achieve this effect.

Thanks,
Shai.

> Thanks Shai for your quick reply.
>
> The solution you propose is a good begining.
> However I'm trying to acheive a more nifty / cool / professional
> animation effect.
> I'm not an animation pro and I really like the way the fish eye and
> carousel style menus look like on other frameworks. Maybe you can
> take a look HERE or HERE (on the very first screen of the
> media player) and you will understand what I'm really trying to
> achieve.
> I understand I will have to develop the animation and item
> transition myself but I'd need some hints on how to create these
> animations myself.
>
> Is it possible to acheive what I want with LWUIT easily or do I
> need to become a 2D / 3D animation professional first ? :)
>
> Thanks again for your feedback.
>
> Cheers,
>
> Alex
>
>
>
>
>
> On Sat, Jun 21, 2008 at 7:50 AM, Shai Almog
> wrote:
> Hi Alex,
> this is very easy to achieve in LWUIT. First you need to create
> your own renderer that returns a different component for the
> selected component (see the fisheye renderer in the LWUIT demo).
> You obviously only need to return images in the labels (or align
> the text bellow the images etc...).
>
> Then set the renderer to the list and use:
> list.setOrientation(List.HORIZONTAL);
> list.setFixedSelection(List.FIXED_CENTER);
>
> Thanks,
> Shai.
>
>
> Hi all,
>
> I was wondering if someone could help me or give me a couple of
> hints on how to create a horizontal Fisheye or Carousel style menu
> from a List in LWUIT.
> I'm trying to get a similar effect as the ones that are available
> in J2ME Polish Fisheye or Carousel Lists items.
>
> Thank you for any help provided.
>
> Cheers
> alex
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>
>

[att1.html]

az lists

Hi Shai and thanks again for your quick responses !

I've started developing my own coponent for the past couple of days based on
your feedback.
I encounter a litle problem though.
I initialize the position of each item based on the width and height of the
component.
My initilization (obviously) occurs in the initComponent() method. The only
problem is that Ican't get a hold on width and height of the component at
this point. the getWidth() and getHeight() methods both return 0 ... both
my dimenstion methods are as follow :

public int getPreferredH() {return 200;}
public int getPreferredW() {return 200;}

I even tried calling super.initComponent(); at the very beginning if my
initComponent implementation. still 0 values for width and height.

What am I doing wrong ? Aren't these values available at this point ? I'd
really need to have them to be able to set the initial position of each Icon
/ Menu Item properly.

Thanks again for your help !

Alex

On Sun, Jun 22, 2008 at 4:04 PM, Shai Almog wrote:

> Hi Alex,
> we don't have this type of carousel at the moment. You don't really need to
> be a huge 2D/3D expert to achieve it though.
> In the past I implemented a more elaborate effect using M3G 184 API but
> that was far more elaborate than these examples (and the code can't be
> published since its copyrighted).
> You can achieve this effect by building a new component with animation and
> drawing the elements in the right position while scaling them to the proper
> size, since LWUIT supports fast scaling while keeping translucency this
> should work rather well. I suggest scaling at least some of the images in
> advance though and avoiding a large number of images.
>
> If you need allot of images and runtime scaling you can use 184 to achieve
> this effect.
>
> Thanks,
> Shai.
>
> Thanks Shai for your quick reply.
>
> The solution you propose is a good begining.
> However I'm trying to acheive a more nifty / cool / professional animation
> effect.
> I'm not an animation pro and I really like the way the fish eye and
> carousel style menus look like on other frameworks. Maybe you can take a
> look HERE or HERE
> (on the very first screen of the
> media player) and you will understand what I'm really trying to achieve.
> I understand I will have to develop the animation and item transition
> myself but I'd need some hints on how to create these animations myself.
>
> Is it possible to acheive what I want with LWUIT easily or do I need to
> become a 2D / 3D animation professional first ? :)
>
> Thanks again for your feedback.
>
> Cheers,
>
> Alex
>
>
>
>
>
> On Sat, Jun 21, 2008 at 7:50 AM, Shai Almog wrote:
>
>> Hi Alex,
>> this is very easy to achieve in LWUIT. First you need to create your own
>> renderer that returns a different component for the selected component (see
>> the fisheye renderer in the LWUIT demo).
>> You obviously only need to return images in the labels (or align the text
>> bellow the images etc...).
>>
>> Then set the renderer to the list and use:
>> list.setOrientation(List.HORIZONTAL);
>> list.setFixedSelection(List.FIXED_CENTER);
>>
>> Thanks,
>> Shai.
>>
>>
>> Hi all,
>>>
>>> I was wondering if someone could help me or give me a couple of hints on
>>> how to create a horizontal Fisheye or Carousel style menu from a List in
>>> LWUIT.
>>> I'm trying to get a similar effect as the ones that are available in J2ME
>>> Polish Fisheye or Carousel Lists items.
>>>
>>> Thank you for any help provided.
>>>
>>> Cheers
>>> alex
>>>
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
>> For additional commands, e-mail: users-help@lwuit.dev.java.net
>>
>>
>
>
[att1.html]

Shai Almog

Hi Alex,
these values are only available on layout which can physically occur
after adding.
However in your case I think the implementation of overriding
getPreferredH()/getPreferredW() is incorrect. You should override the
method:
protected Dimension calcPreferredSize()

Did you follow the example in the developer guide as a starting point?

Thanks,
Shai.

> Hi Shai and thanks again for your quick responses !
>
> I've started developing my own coponent for the past couple of days
> based on your feedback.
> I encounter a litle problem though.
> I initialize the position of each item based on the width and
> height of the component.
> My initilization (obviously) occurs in the initComponent() method.
> The only problem is that Ican't get a hold on width and height of
> the component at this point. the getWidth() and getHeight() methods
> both return 0 ... both my dimenstion methods are as follow :
>
> public int getPreferredH() {return 200;}
> public int getPreferredW() {return 200;}
>
>
> I even tried calling super.initComponent(); at the very beginning
> if my initComponent implementation. still 0 values for width and
> height.
>
> What am I doing wrong ? Aren't these values available at this
> point ? I'd really need to have them to be able to set the initial
> position of each Icon / Menu Item properly.
>
> Thanks again for your help !
>
> Alex
>
>
>
> On Sun, Jun 22, 2008 at 4:04 PM, Shai Almog
> wrote:
> Hi Alex,
> we don't have this type of carousel at the moment. You don't really
> need to be a huge 2D/3D expert to achieve it though.
> In the past I implemented a more elaborate effect using M3G 184 API
> but that was far more elaborate than these examples (and the code
> can't be published since its copyrighted).
> You can achieve this effect by building a new component with
> animation and drawing the elements in the right position while
> scaling them to the proper size, since LWUIT supports fast scaling
> while keeping translucency this should work rather well. I suggest
> scaling at least some of the images in advance though and avoiding
> a large number of images.
>
> If you need allot of images and runtime scaling you can use 184 to
> achieve this effect.
>
> Thanks,
> Shai.
>
>> Thanks Shai for your quick reply.
>>
>> The solution you propose is a good begining.
>> However I'm trying to acheive a more nifty / cool / professional
>> animation effect.
>> I'm not an animation pro and I really like the way the fish eye
>> and carousel style menus look like on other frameworks. Maybe you
>> can take a look HERE or HERE (on the very first screen of the
>> media player) and you will understand what I'm really trying to
>> achieve.
>> I understand I will have to develop the animation and item
>> transition myself but I'd need some hints on how to create these
>> animations myself.
>>
>> Is it possible to acheive what I want with LWUIT easily or do I
>> need to become a 2D / 3D animation professional first ? :)
>>
>> Thanks again for your feedback.
>>
>> Cheers,
>>
>> Alex
>>
>>
>>
>>
>>
>> On Sat, Jun 21, 2008 at 7:50 AM, Shai Almog
>> wrote:
>> Hi Alex,
>> this is very easy to achieve in LWUIT. First you need to create
>> your own renderer that returns a different component for the
>> selected component (see the fisheye renderer in the LWUIT demo).
>> You obviously only need to return images in the labels (or align
>> the text bellow the images etc...).
>>
>> Then set the renderer to the list and use:
>> list.setOrientation(List.HORIZONTAL);
>> list.setFixedSelection(List.FIXED_CENTER);
>>
>> Thanks,
>> Shai.
>>
>>
>> Hi all,
>>
>> I was wondering if someone could help me or give me a couple of
>> hints on how to create a horizontal Fisheye or Carousel style menu
>> from a List in LWUIT.
>> I'm trying to get a similar effect as the ones that are available
>> in J2ME Polish Fisheye or Carousel Lists items.
>>
>> Thank you for any help provided.
>>
>> Cheers
>> alex
>>
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
>> For additional commands, e-mail: users-help@lwuit.dev.java.net
>>
>>
>
>

[att1.html]

az lists

Hi,

I've just overriden calcPreferedSize() as follow :

protected Dimension calcPreferredSize(){
int w = maxItemWidth * 3;
int h = maxItemHeight * 3;
return new Dimension(w,h);
}

NOTE: this is a quick and dirty way. I did it this way only for the sake of
testing my component while developing it. I will certainly change it later
on to something more precise. maxItemHeight and maxItemWidth are calculated
inside initComponent. Do I need to calculate it inside the constructor ?

Should I work with getPreferedSize to initialize my menu items' positions in
the initComponent method ?
Or maybe I should initialize menu item positions upon the first call to the
paint() method ?

Cheers,

Alex

On Wed, Jun 25, 2008 at 5:29 AM, Shai Almog wrote:

> Hi Alex,
> these values are only available on layout which can physically occur after
> adding.
> However in your case I think the implementation of overriding
> getPreferredH()/getPreferredW() is incorrect. You should override the
> method:
> protected Dimension calcPreferredSize()
>
> Did you follow the example in the developer guide as a starting point?
>
> Thanks,
> Shai.
>
>
>
[att1.html]

Shai Almog

Hi Alex,
we generally tend to lazily initialize positions and sizes so these
would be calculated on paint. The calculation should probably occur
only once.

I would however reset the cached calculation whenever
calcPreferredSize() is invoked, this will allow us to to resize in
case of screen orientation change etc...

Thanks,
Shai.

> Hi,
>
> I've just overriden calcPreferedSize() as follow :
>
> protected Dimension calcPreferredSize(){
> int w = maxItemWidth * 3;
> int h = maxItemHeight * 3;
> return new Dimension(w,h);
> }
>
>
> NOTE: this is a quick and dirty way. I did it this way only for the
> sake of testing my component while developing it. I will certainly
> change it later on to something more precise. maxItemHeight and
> maxItemWidth are calculated inside initComponent. Do I need to
> calculate it inside the constructor ?
>
> Should I work with getPreferedSize to initialize my menu items'
> positions in the initComponent method ?
> Or maybe I should initialize menu item positions upon the first
> call to the paint() method ?
>
> Cheers,
>
> Alex
>
>
> On Wed, Jun 25, 2008 at 5:29 AM, Shai Almog
> wrote:
> Hi Alex,
> these values are only available on layout which can physically
> occur after adding.
> However in your case I think the implementation of overriding
> getPreferredH()/getPreferredW() is incorrect. You should override
> the method:
> protected Dimension calcPreferredSize()
>
> Did you follow the example in the developer guide as a starting point?
>
> Thanks,
> Shai.
>
>
>

[att1.html]