Annotations / hotspots #36
Comments
|
Ya, this one is a long-time wish list entry and it deserves its own ticket here, that's for sure. I've been writing the hotspots module long ago, but unfortunatelly lost a good half of it in the process of backuping (how ironic) and that cut my steam a bit. It's actually rather easy to code (like you suggest it is just a matter of additional But it would definitely make a great 1.2 feature ;) |
|
Yeah. I will write this code, and commit it to my forked version. I'll let you know when I have it working. cheers, |
ghost
assigned
|
Very cool! I welcome any kind of collaboration on jQuery Reel. If you don't mind then, I've added you as Reel project collaborator here on Github and assigned you this ticket for the 1.2 milestone. Planning-wise speaking, 1.2 wouldn't be shipped till 2012. Oh, and I will dig out the WIP code of mine, undust it and will get back to you soon to see if I can be of any assistance. |
|
Thanks! |
|
Nice! You are right, For example the current frame can be determined simply by retrieving Please, inspect |
…ery-reel-annotations` transparent DIV visually overlaying the Reel image. For that the instantiation of human interface DOM node was removed from `"start"` handler and put a little earlier into `"setup"`. #36
…node and rendering the node only for non-empty `annotations` option. #36
…ons for this instance. Its definition would have to have a dedicated wiki page. #36
…erated inside `.jquery-reel-annotations` carrying the member key as node's DOM `id`. Attributes of this "holder" node can be defined as `holder` hash of the annotation member. #36
…and/or a link defined by the `link` hash of the annotation member. It can also hold both - in that case the image is wrapped in the link. #36
…n the `"frameChange"` event handler, which would first attempt to get X and Y positions for each node. #36 Visibility on stage is driven by `start` and `end` members defining a range of frames in which the annotation is visible. For example `start:5, end:7` keep the annotation visible for frames 5, 6 and 7 and hidden for the rest of frames. Position on stage is defined by `x` and `y` annotation object members. It can be defined as a single numeric value and in that case the annotation will hold the same position. Or it can be an array of numeric values for `start` to `end`, whose length is equal to the visibility range length. For example having the same `start` and `end` as above, setting `x:[ 20, 40, 60 ]` would place the annotation on 20 for frame 5, 40 for frame 6 and 60 for 7. Both X and Y coordinates need to be resolved in order to have the annotation visible.
…rings with non-default units (like em and %). Using type-based Array detection. #36
…ery-reel-annotations` transparent DIV visually overlaying the Reel image. For that the instantiation of human interface DOM node was removed from `"start"` handler and put a little earlier into `"setup"`. #36
…node and rendering the node only for non-empty `annotations` option. #36
…ons for this instance. Its definition would have to have a dedicated wiki page. #36
…erated inside `.jquery-reel-annotations` carrying the member key as node's DOM `id`. Attributes of this "holder" node can be defined as `holder` hash of the annotation member. #36
…and/or a link defined by the `link` hash of the annotation member. It can also hold both - in that case the image is wrapped in the link. #36
…n the `"frameChange"` event handler, which would first attempt to get X and Y positions for each node. #36 Visibility on stage is driven by `start` and `end` members defining a range of frames in which the annotation is visible. For example `start:5, end:7` keep the annotation visible for frames 5, 6 and 7 and hidden for the rest of frames. Position on stage is defined by `x` and `y` annotation object members. It can be defined as a single numeric value and in that case the annotation will hold the same position. Or it can be an array of numeric values for `start` to `end`, whose length is equal to the visibility range length. For example having the same `start` and `end` as above, setting `x:[ 20, 40, 60 ]` would place the annotation on 20 for frame 5, 40 for frame 6 and 60 for 7. Both X and Y coordinates need to be resolved in order to have the annotation visible.
…rings with non-default units (like em and %). Using type-based Array detection. #36
…esorts to checking its detachement from the `head` rather than its entire non-existence. #36
…and CSS properties hash as CSS rule string and pushing it to the list of rules. #36
…f bounds of the reeled image wouldn't be visible unless the new Boolean `crop` option is set to `false`. #36
…ay I could think of to achieve transparent wrapper to wrap the annotations in, which really reacts to mouse input in IE8) I came to decision to skip the `.jquery-reel-interface` "human interface" middle node and leave out the transparent absolute inner stage idea altogether and hook mouse/touch events directly on the instance's outter shell, which is much cleaner in think. #36
…d of mixing-in the functionality, let's use event namespace this time - we want to bind to `"setup"` and "`frameChange"` events and we do this by extending the private `on` variable holding all handlers with events in the `".annotations"` namespace. This sounds fine, but in order for us to be able to do multiple bindings to the same event, we need to stop `.trigger()`ing followup events manually or else our second binding would be triggered well after the whole event-initiated chain of events fired off. So there's another namespace `.fu` (a.k.a. FollowUp) intended only for internal purposes - events in this namespace had been bound very last and will fire after all preceding bindings have. #36
…'setup.annotations']` and ..`'frameChange.annotations'`.. and especially removing the positioning rule in favor fo direct position manipulation once again (its measured performance is just better) #36 Also class frame-X instead of being applied to the outter most instance wrapper is now applied to the annotations wrapper node. The former solution has been measured to be more expensive in performance #69
That led to uncovering of an incorrect annotation position index bug, which got fixed right away.
…pace get unbinded completely #36 For that we also needed to re-reference the `$overlay`, which is quite mysteriously broken after the wraping application.
|
The annotations (formerly hotspots) feature is very close to finish. I've put together a little wiki page describing what annotations are and how they are used in Reel - Annotations. Gentlemen, please if you could check it out. I would appreciate a feedback on the document if it's understandable enough. Thanks |
…` handlers were picking up the events anyway. Making the stop immediate. #36
…y over image and mouse events couldn't pass through in IE8. To solve it, the annotations node was removed completely and annotations are now direct childs of the instance wrapper (= siblings of the image). #36 This lead to several changes: - annotations themselves alwas have `reel-annotation` class name added - the node receiving the `frame-X` class is the instance wrapper `.reel-overlay`
…ions` definition object is mirrored in the data. #36
…led by new option `crop`. Better way of cropping the dimensionaly defined stage would be to disable the overflow and by doing it in the stylesheet, so it can be customized on `.reel-overlay` node very easily without ever needing any option - so the `crop` gets removed. #36
|
I'm happy with the annotations code. Merged it into development. I would still very much appreciate all testing and any feedback anyone can give me on it and this. Just some work on samplesto be included is needed and it should be done. |
…ty. #36 It accepts a string of pluses and minuses each character being one frame. When it is used it overcharges both `start` and `end`.
…when dragged & thrown). #36 For this the braking mechanism has been refactored to (1) fix bug when a very low velocity got occasinally sticked and hasn't been released and (2) simplify.
Just missing annotations examples - the'll be in the beta. Changes: * Non-`wheelable` Reels now allow scrolling of the page when wheeling above the Reel instance. * New option `attr` allows to set custom attributes of the IMG tag (useful for re-using DOM nodes). * Instances being re-instantiated now perform automatic teardown (GH-62). * Proper image preload events unbinding on teardown (GH-64). * Option `scrollable` can disable page scrolling (if needed) on touch devices. * New event `"openingDone"` now announces the end of opening animation (GH-65). * Internal event `slide` renamed to `pan` (GH-51). * Actual frame number is manifested with a wrapper class name, e.g. `frame-8` (GH-69). * Improved order of preloaded images gradually increasing fidelity of the image, thus the name `"fidelity"` and this mode is now default. The former order is designated `"linear". Preloading mode is chosen by new `preload` option accepting a mode name. (GH-10). * Deprecated options `hotspot`, `tooltip` and `reversed` have been removed. * Bare click on left/right half of the image steps the Reel one frame forward/back. Set `steppable` to false to disable. Comes with `"stepLeft"` and `"stepRight"` events (GH-20). * Custom text/graphics can augment the frames using the brand new `annotations` feature (GH-36). * New complementary `.unreel()` function to revert effects of `.reel()` on the DOM. * Control event `play` now accepts optional `speed` parameter. * Mouse cursor is now customizable with the new `cursor` option. The new failsafe cursor is now `"move"`.
|
I finalized the annotations feature today and released 1.2alpha. Examples will come later in the beta (I didn't want to hold it any longer just because the examples aren't ready yet). How annotations work is documented in the Annotations wiki article. |
======== Lovely new features: * in-picture annotations * new image preloading method * frame by frame stepping * new data change model * full documentation * jQuery 1.5+ New options: * `annotations`, `attr`, `cursor`, `steppable`, improved `images` New events: * `stepLeft`, `stepRight`, `openingDone`, improved `play` New methods: * `.unreel()`, improved `.reel()` Includes fixes for issues #10, #20, #36, #51, #62, #64, #65, #69, #103, #110, #111, #113, #115, #117, #122, #124, #125, #126 Enjoy!
Feature request.
The position will need to be based on each frame.
The text was updated successfully, but these errors were encountered: