Genii Weblog

Stuff I bought (and a devious rich text challenge)

Thu 16 Dec 2010, 10:00 AM



by Ben Langhinrichs
It being the last day for free shipping from Amazon before Christmas, and thus a good day to do a bit of cyber-shopping, I thought I'd use a Carousel widget to show a few things I might or might not have just bought (depending on whether you are one of my family peeking, in which case pretend you never saw this).  While this might spark a few ideas, it also sparks a bit of a challenge I have set for myself for the Lotusphere Sessions db.

I want to make a Carousel in rich text that works like this, but without XPages and without the web browser.  I want it to work in any version of Notes from 6.5 or so, up to 8.5.2, so obviously it has to work in both Notes Standard and Notes Basic, but without embedding flash objects or requiring Midas to run or anything else that would send Warning Warning Danger Danger, Will Robinson  vibes out.  Last night, I woke up with a possible idea of how to do this, and I'd like to see if I can make it work and put it into the sessions database, perhaps just for the books, but perhaps in the sessions for a different purpose.

Look at the Carousel below, and let me know if you think it is possible.


Copyright © 2010 Genii Software Ltd.

What has been said:


938.1. Ulrich krause
(16.12.2010 15:57)

perhaps possible wth layers ?


938.2. Rob McDonagh
(12/16/2010 04:03 PM)

There's no way I'm going to tell Ben that something is or is not possible in Rich Text. Talk about teaching your grandma to suck eggs. heh.

Ben, if you think you can do it, I would bet that you're right.


938.3. Ben Langhinrichs
(12/16/2010 04:16 PM)

Yes, I imagine it would take layers, but they would have to be used in a creative way. Also, I'd like it not to be too "heavy" or "slow".


938.4. Richard Schwartz
(12/16/2010 06:42 PM)

Have seen many badly implemented carousels that move too fast on fast machines, too slow on slow machines. This isn't so much of a problem when there's a relatively small number of images being shuffled around, but for large numbers it is hard to get it to stop in the right place on the fast machine, hard to figure out why to bother on the slow machine. Can your solution control the UI speed well enough to compensate for machine speed?


938.5. Ben Langhinrichs
(12/16/2010 06:57 PM)

I don't think that will be a problem, but I have to actually code the solution first to be sure. The general idea is to have a carousel that works like the Amazon one above. It will cycle to start with, perhaps, but then will be responsive to the buttons. The toughest technical problem is figuring out how to know when the button is unpressed, which Notes doesn't handle.


938.6. Nathan T. Freeman
(12/16/2010 07:44 PM)

Are you targeting only the positional translation and scaling of the images? Or also the hover popups and reflections?

I can imagine doing it with layers and/or programmatic tables to get the animation behavior. I'd think you'd need at least two layers (foreground & backgroun), each containing some type of cycleable animation frame collection. I've seen examples of that with both tables and layers.

Then if you had computed image references, you could simply cycle through the image that they actually display. Actually, that's probably how you'd even handle the scaling, since runtime rescaling of an image is handled by the display reference, not the computation itself.

My off-the-cuff counting of frames from one position to another is 58, so for the same resolution, you'd need at least that many transition points.

I'm curious about performance. If you have to hide the image references that aren't currently referencing an animation render, then it's probably expensive. However, if you can simply compute them to a 1x1 transparent GIF, then it's probably cheap.

Now, if you figure out a way to generate the image reflection in rich text, I'll genuflect to you in Orlando.


938.7. Nathan T. Freeman
(12/16/2010 08:01 PM)

Also, for the button unpress, if instead of a real button, you use an image reference, then you can at least get an onMouseOut Javascript event. Maybe you change the UI vector slightly to make it a hover rather than click behavior to scroll the carousel.


938.8. Ben Langhinrichs
(12/16/2010 08:01 PM)

For various reasons, the computed image reference is more performance-deadening than hide-when formulas, and also requires refresh. If you can avoid refresh, you get far better performance and smoother presentation. The table trick is not bad, but it makes it hard to cycle back and forth (not impossible, but harder).

I haven't thought of any easy way to do image reflections, but then I have thought of how to add fields below the images to allow comments, rating, etc., which might be cool. Imagine if I showed multiple images, and you could rate each one you choose to, or add it to a wish list, or add a comment.

Obviously, layers are required for that. What I like about my plan, if it works, is that it is completely dynamic and fed from a view or search results. If I can get that to work smoothly, something like the "Sessions in the room" could be displayed as a series of document frames. It would be harder to handle the scaling with anything other than images, though.


938.9. Ben Langhinrichs
(12/16/2010 08:02 PM)

@Nathan - I thought onMouseOut didn't work in the Notes client? I'll double check, but that was my impression.


938.10. Nathan T. Freeman
(12/16/2010 08:09 PM)

@Ben - The client says it won't do a UI event from there, but you can at least increment a variable. So there's probably a way to trick it into some kind of callback behavior. Or maybe even just wrap it in an eval();


938.11. Nathan T. Freeman
(12/16/2010 08:10 PM)

P.S: I'm certain about the variable thing 'cause I tested it before I posted this. So in 8.5.2 GA on Windows, at least -- it will change a global variable on the onMouseOut (and onMouseOver, too)

However, onMouseDown and onMouseUp didn't fire anything at all.


938.12. Ben Langhinrichs
(12/16/2010 08:14 PM)

You can't even enter them in Notes 8, if I recall correctly. I'll test and try it out. I'd prefer to have something that worked in earlier versions, but maybe I can get it to degrade nicely.