New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Annotations / hotspots #36

Closed
danieltome opened this Issue May 13, 2011 · 8 comments

Comments

Projects
None yet
2 participants
@danieltome
Collaborator

danieltome commented May 13, 2011

Feature request.
The position will need to be based on each frame.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 13, 2011

Owner

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 frameChange event handler, which would each time re-render the hotspots), it's just that my priorities lie elsewhere right now.

But it would definitely make a great 1.2 feature ;)

Owner

pisi commented May 13, 2011

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 frameChange event handler, which would each time re-render the hotspots), it's just that my priorities lie elsewhere right now.

But it would definitely make a great 1.2 feature ;)

@danieltome

This comment has been minimized.

Show comment
Hide comment
@danieltome

danieltome May 16, 2011

Collaborator

Yeah. I will write this code, and commit it to my forked version. I'll let you know when I have it working.
If you have any half-baked code that could help out, let me know. I couldn't find any other branch. I'm quite new to github, so maybe I'm looking in the wrong place.

cheers,

Collaborator

danieltome commented May 16, 2011

Yeah. I will write this code, and commit it to my forked version. I'll let you know when I have it working.
If you have any half-baked code that could help out, let me know. I couldn't find any other branch. I'm quite new to github, so maybe I'm looking in the wrong place.

cheers,

@ghost ghost assigned danieltome May 17, 2011

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 17, 2011

Owner

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.

Owner

pisi commented May 17, 2011

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.

@danieltome

This comment has been minimized.

Show comment
Hide comment
@danieltome

danieltome May 18, 2011

Collaborator

Thanks!
I created a quick prototype with hotspots: http://danieltome.com/tests/reel/
At the moment it was just a test, I have to include this into the plugin somehow, and make easier to extend.
That would be my next goal. As well as creating a hotspot generator.
I had to add a trigger event called frameUpdate to jquery.reel.js, because the frameChange wasn't firing the framenumber.

Collaborator

danieltome commented May 18, 2011

Thanks!
I created a quick prototype with hotspots: http://danieltome.com/tests/reel/
At the moment it was just a test, I have to include this into the plugin somehow, and make easier to extend.
That would be my next goal. As well as creating a hotspot generator.
I had to add a trigger event called frameUpdate to jquery.reel.js, because the frameChange wasn't firing the framenumber.

@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi May 19, 2011

Owner

Nice!

You are right, frameChange doesn't return a frame number. Actually, Reel stores all internal affairs on the respective DOM image node using jQuery .data. So instead of passing the value, I often rather favor retrieving of any value using the .data, against direct passing of just one or few arguments.

For example the current frame can be determined simply by retrieving .data("frame"):

$reel.bind("frameChange", function(){
    $(this).data("frame");
});

Please, inspect test/unit/data.js tests for all other possible data keys one can read from Reel. Names are intended to be straightforward, but I will gladly explain whatever value isn't understood.

Owner

pisi commented May 19, 2011

Nice!

You are right, frameChange doesn't return a frame number. Actually, Reel stores all internal affairs on the respective DOM image node using jQuery .data. So instead of passing the value, I often rather favor retrieving of any value using the .data, against direct passing of just one or few arguments.

For example the current frame can be determined simply by retrieving .data("frame"):

$reel.bind("frameChange", function(){
    $(this).data("frame");
});

Please, inspect test/unit/data.js tests for all other possible data keys one can read from Reel. Names are intended to be straightforward, but I will gladly explain whatever value isn't understood.

pisi added a commit that referenced this issue Nov 8, 2011

Annotations will be displayed within the `.jquery-reel-interface .jqu…
…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

pisi added a commit that referenced this issue Nov 8, 2011

Established an private variable to hold reference to the annotations …
…node and rendering the node only for non-empty `annotations` option. #36

pisi added a commit that referenced this issue Nov 8, 2011

Added `annotations` option, which accepts an object defining annotati…
…ons for this instance. Its definition would have to have a dedicated wiki page. #36

pisi added a commit that referenced this issue Nov 8, 2011

For every `annotations` object member, a `<div>` "holder" node is gen…
…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

pisi added a commit that referenced this issue Nov 8, 2011

The "holder" can contain either an image defined by the `image` hash …
…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

pisi added a commit that referenced this issue Nov 8, 2011

Now that annotations are rendered into the DOM, we can animate them i…
…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.

pisi added a commit that referenced this issue Nov 8, 2011

pisi added a commit that referenced this issue Nov 8, 2011

The `.length` based Array detection had a side-effect of excluding st…
…rings with non-default units (like em and %). Using type-based Array detection. #36

@ghost ghost assigned pisi and danieltome Nov 8, 2011

pisi added a commit that referenced this issue Nov 9, 2011

Annotations will be displayed within the `.jquery-reel-interface .jqu…
…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

pisi added a commit that referenced this issue Nov 9, 2011

Established an private variable to hold reference to the annotations …
…node and rendering the node only for non-empty `annotations` option. #36

pisi added a commit that referenced this issue Nov 9, 2011

Added `annotations` option, which accepts an object defining annotati…
…ons for this instance. Its definition would have to have a dedicated wiki page. #36

pisi added a commit that referenced this issue Nov 9, 2011

For every `annotations` object member, a `<div>` "holder" node is gen…
…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

pisi added a commit that referenced this issue Nov 9, 2011

The "holder" can contain either an image defined by the `image` hash …
…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

pisi added a commit that referenced this issue Nov 9, 2011

Now that annotations are rendered into the DOM, we can animate them i…
…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.

pisi added a commit that referenced this issue Nov 9, 2011

pisi added a commit that referenced this issue Nov 9, 2011

The `.length` based Array detection had a side-effect of excluding st…
…rings with non-default units (like em and %). Using type-based Array detection. #36

pisi added a commit that referenced this issue Nov 24, 2011

Removing the stylesheet the standard way on teardown. The test then r…
…esorts to checking its detachement from the `head` rather than its entire non-existence. #36

pisi added a commit that referenced this issue Nov 24, 2011

Added a `rule()` private function used to formulate a given selector …
…and CSS properties hash as CSS rule string and pushing it to the list of rules. #36

pisi added a commit that referenced this issue Nov 24, 2011

The stage is cropped, which means no annotation (or part of it) out o…
…f bounds of the reeled image wouldn't be visible unless the new Boolean `crop` option is set to `false`. #36

pisi added a commit that referenced this issue Nov 24, 2011

Due to IE8's deficiency in `rgba` color values (which were the only w…
…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

pisi added a commit that referenced this issue Nov 24, 2011

Instead of putting annotations stuff inside existing handlers and kin…
…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

pisi added a commit that referenced this issue Nov 24, 2011

Moving the annotations "stuff" into its own handlers in `on.instance[…
…'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

pisi added a commit that referenced this issue Nov 26, 2011

Adding frame-based positioning tests #36
That led to uncovering of an incorrect annotation position index bug, which got fixed right away.

pisi added a commit that referenced this issue Nov 26, 2011

When no `annotations` are defined, events in the `.annotations` names…
…pace get unbinded completely #36

For that we also needed to re-reference the `$overlay`, which is quite mysteriously broken after the wraping application.
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Nov 26, 2011

Owner

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

Owner

pisi commented Nov 26, 2011

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

pisi added a commit that referenced this issue Nov 27, 2011

While stopping propagation of `"frameChange"` event the `.annotations…
…` handlers were picking up the events anyway. Making the stop immediate. #36

pisi added a commit that referenced this issue Dec 4, 2011

The annotations wrapper node was ultimately causing a inactive overla…
…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`

pisi added a commit that referenced this issue Dec 4, 2011

For openness and external manipulation with annotations, the `annotat…
…ions` definition object is mirrored in the data. #36

pisi added a commit that referenced this issue Dec 4, 2011

pisi added a commit that referenced this issue Dec 4, 2011

Propagation of `click` event on link annotation is prevented and will…
… not cause Reel advance/step left or right. #79 #36

On other annotation types there's no default propagation stopping.

pisi added a commit that referenced this issue Dec 4, 2011

The former annotations node had a clipping applied, which was control…
…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
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Dec 17, 2011

Owner

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.

Owner

pisi commented Dec 17, 2011

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.

pisi added a commit that referenced this issue Dec 30, 2011

For a precise annotations visibility control, I added the `at` proper…
…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`.

pisi added a commit that referenced this issue Dec 30, 2011

Making it so that annotations are not shown, when Reel has velocity (…
…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.

pisi added a commit that referenced this issue Dec 30, 2011

1.2 ALPHA is out!
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"`.
@pisi

This comment has been minimized.

Show comment
Hide comment
@pisi

pisi Dec 30, 2011

Owner

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.

Owner

pisi commented Dec 30, 2011

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.

@pisi pisi closed this Dec 30, 2011

pisi added a commit that referenced this issue Jul 16, 2012

Reel 1.2
========

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!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment