PDA

View Full Version : Fisheye?



Ronaldo
3 Jul 2007, 1:14 PM
Heja,

I noticed that there's a request for a fisheye thingy.
If someone's interested, I got a working fisheye based on some html and prototype.
As I only discovered Ext.js two days ago, it has to be rewritten in ext.js style.
It took me a while to figure it all out (like the non-lineair resizing stuff based on the approximity of the mouse pointer) so I guess it might help someone a little bit.
I think it runs pretty smootly, and in the costructor are some options to set the resize ratio for example.
Drop me a mail if you're interested, I don't have a webpage and I couldn't upload it on the extensions-wiki.

Ronaldo

brian.moeskau
3 Jul 2007, 1:56 PM
If you can zip it up and attach it here, I can move it to the extensions page if you want. It would be a start at least, and I'm sure some others might appreciate it.

Ronaldo
4 Jul 2007, 9:09 AM
Here it is. I think it would be great to rewrite this for ext.js myself, but I do not have much time for it in the very near future (next week or so).

Hope it helps...

Ronald

brian.moeskau
4 Jul 2007, 10:24 AM
Thanks Ronaldo, it looks like a good start. I updated the fisheye extension page (http://extjs.com/learn/Extension:Fisheye).

aconran
5 Jul 2007, 10:50 AM
Great job Ronaldo, here is another implementation of the fish eye which I was impressed with.
http://www.safalra.com/programming/javascript/mac-style-dock/

brian.moeskau
5 Jul 2007, 2:22 PM
Thanks, Aaron. That's the most solid implementation I've seen (closest to OS X). I added the link and some comments to the extension page.

cluettr
11 Jul 2007, 6:23 PM
Agreed... That's the best one so far.

netsuo
13 Jul 2007, 12:08 AM
But.. this is horribly slow :/

matjaz
6 Aug 2007, 9:57 PM
Hello !

I just rewrote Ronaldos FishEye so it works with Ext.
I rewrote just dependencies with prototaculous and replaced them Ext equivalent.
Some code can be adjusted for Ext, but it's a start.
It's JSLint (http://jslint.com/) compliant. ;)

Cheers !! :)

brian.moeskau
6 Aug 2007, 9:59 PM
Do you mind updating this page as appropriate, following other existing extensions as examples?

http://extjs.com/learn/Extension:Fisheye

Also, a working example would be great if possible. Thanks for contributing!

matjaz
6 Aug 2007, 10:52 PM
Added zip with example and modified wiki page. B)

brian.moeskau
6 Aug 2007, 11:03 PM
I tried the example and it works well. One suggestion, change the first include to use the default relative file path:

<script src="../../adapter/ext/ext-base.js" type="text/javascript"></script>

That way you can just drop your zipped folder directly into the Examples folder of Ext and it will work without modification (I would add a note that that's where you can put it by default). Thanks again.

matjaz
6 Aug 2007, 11:15 PM
Ahhh, silly me. Fixed ! :)

matjaz
7 Aug 2007, 1:35 AM
I have just rewritten some parts of code with Exts built-in functionality, optimized code and CSS. Added docs and example.

Enjoy !B)

DeeZ
7 Aug 2007, 1:53 AM
Great example, thx to share / to update it to Ext
Just a notice : the link to "Download Ext FishEye" in the page http://extjs.com/learn/Extension:Fisheye is broken

matjaz
7 Aug 2007, 4:38 AM
Looks like you clicked right after I edited post but didn't updated wiki. Now it's working !

mkidder
7 Aug 2007, 8:38 AM
I have always liked the Interface Fisheye for jQuery ... be sure to keep your mouse movement within the iframe of the demo page, otherwise, you may mistaken glitchy or choppy movement of the icons.

Brian do you notice the "sea sickness" effect on Interface as you described above.

mystix
8 Aug 2007, 4:54 AM
I have just rewritten some parts of code with Exts built-in functionality, optimized code and CSS. Added docs and example.

Enjoy !B)

sweet =D>

one suggested improvement is to add the wrapper div with the fisheye class via Ext.Element's wrap (http://extjs.com/deploy/ext/docs/output/Ext.Element.html#wrap) method, instead of hardcoding it in the source.

you can find a good example of this technique in the source for Ext.form.DateField.

rodiniz
8 Aug 2007, 6:16 AM
Live sample:
http://www.rodrigodiniz.qsh.eu/fisheye.html
No ads

matjaz
8 Aug 2007, 7:20 AM
I have just updated the code with wrap as mystix suggested.
rodiniz do you mind updating your example ?

Cheers ! B)

violinista
8 Aug 2007, 7:29 AM
Just an idea: try to add smooth fade-in and fade-out effects when icon titles appear/disappear.

great work!

rodiniz
8 Aug 2007, 10:24 AM
I have just updated the code with wrap as mystix suggested.
rodiniz do you mind updating your example ?

Cheers ! B)
Example updated.:)

mystix
8 Aug 2007, 10:46 AM
I have just updated the code with wrap as mystix suggested.
rodiniz do you mind updating your example ?

Cheers ! B)

the wiki download link's broken... :(

mystix
8 Aug 2007, 10:48 AM
Example updated.:)

the example html still contains the hardcoded wrapper div with class="fisheye".
is this intended?

@matjaz / @rodiniz, there's 2 things i've noticed with the Ext version
- transitions are smoother and more responsive (yay ;) )
- pixelation occurs at maximum magnification :-/

matjaz
8 Aug 2007, 11:09 AM
I've already notified rodiniz.
Yes, pixelation occurs at maximum magnification, because it's bigger than it's original resolution.

mystix
8 Aug 2007, 11:32 AM
I've already notified rodiniz.
Yes, pixelation occurs at maximum magnification, because it's bigger than it's original resolution.

alritey. managed to download it from this thread.

good job :D

i'll check back here again when i've had time to play with it. ~o)

rodiniz
9 Aug 2007, 3:25 AM
The html file was updated ...I didn't know it had to be updated ...

mystix
9 Aug 2007, 8:12 AM
The html file was updated ...I didn't know it had to be updated ...

no worries. thanks for putting up the example on your site ;)

Ronaldo
13 Aug 2007, 11:11 AM
Thanks guys! works great and I even recognize some parts of the code... B)

DragonFist
31 Aug 2007, 2:59 PM
Any chance to have this support vertical orientation of the list?

rodneyj
14 Sep 2007, 6:28 AM
Is this live demo still working?

DragonFist
17 Sep 2007, 8:16 AM
I can't reach it.

I am also realizing that this control has no built in way to add functions to the clicking of the icons.

Edit: NM, realized can do it from the html, doh.

DragonFist
17 Sep 2007, 10:46 AM
I am having some difficulting with the mouseOver behavior after a resize of the containing region or page.

Anyone have an idea how to get this to adjust properly?

mystix
8 Oct 2007, 1:21 AM
woah.. another really smooth + fast fisheye implementation in actual use... haven't dug into the source yet though:

http://www.linkmatrix.de/tutorials.php (it's right at the top of the page, under the search field)

violinista
12 Oct 2007, 12:35 AM
This one of the best implementation of FishEye I have ever seen:: http://www.ndesign-studio.com/blog/mac/css-dock-menu

13 Oct 2007, 4:45 PM
can someone explain to me what the appeal this has for the web?

aconran
13 Oct 2007, 5:13 PM
I'd imagine it'd be nice for your OS Ext Desktop wouldn't it? :-D

13 Oct 2007, 5:45 PM
i'm flirting with the idea. but i don't like the idea of including prototype.

:-?

violinista
29 Oct 2007, 6:49 AM
For someone interested in further Fisheye development (if any), here is overview of available Fisheye implementations:

http://www.webappers.com/2007/10/29/nice-list-of-open-source-fish-eye-menu/

myke
3 Dec 2007, 2:30 PM
Any progress on ExtJs2.0 compatibility?

Shmoo
4 Dec 2007, 7:51 PM
Is the demo link broken again?

jbum
29 Jan 2009, 2:05 PM
is this something that could possibly be integrated as a feature in let's say a toolbar or anything else that could utilize this same behavior?

I guess for now we have to use this as a standalone widget.