How do I mimic the mouse scroll wheel in Captivate 2017
Hi everyone,
I am trying to find a way to having participants use the scroll wheel on their mouse to work as a zoom. In particular, zooming in on an X-ray or MRI. The application I am trying to mirror is PACS, which allows physicians to use the scroll wheel to zoom in and out.
Any help is greatly appreciated!
That would be awesome if you have the time
Wow, Greg, thanks for sharing that code. That is an extremely cool use of manipulating Captivate content with javascript. Saving this for future reference!
Glad you find it useful. A question had come up a while back asking about how to use the scroll wheel to go forward and reverse through the slide deck and this seemed like a relatively uncomplicated solution to implement.
All one has to do is swap out commands for changing states to nav to next and previous slides.
I have kept this little script in my book of tricks ever since.
Here is some code that you can place as an onEnter success action to your slide.
I would uncheck the box that says Continue playing the project.
In the example below – the scroll wheel will cycle through various states of an image. (Name of image is “myImage” in this example)
I see this as the easiest path at the moment and would be more of a simulated zoom than a true zoom that you would experience in the software.
I might think of creating an image with as many additional “zoomed in” shots as needed and add them all as states to the main image. The code could get quite a bit more complicated depending on certain other functionalities you might want to incorporate.
At any rate, this would essentially be the baseline to start with.
// Begin code below
$(window).on(“wheel”, function(event) {
if(event.originalEvent.deltaY<0) {
// This is the scroll up action
cp.goToNextState(“myImage”);
}
else {
// This is the scroll down action
cp.goToPreviousState(“myImage”);
}
});
// End of code
Thanks Greg for the code! Appreciate the code so much. Do you happen to have a file I could see as reference by chance? Thanks.
I made this quick for you as a reference.
All it does is scroll through states of a box with numbers showing they have changed.
Hopefully it helps.
Thank you!
Hi Greg, is this file created in 2019 or 2017 version. I have 2017.
It is with 2019.
Sorry I do not have a copy of 2017 to make this.
I can record a short video if you think it would help.
Here is a short narrative of the setup.
I know it isn’t a project but at least you can see a little more.
I know you can’t actually see me scrolling but I am… 🙂
Thank you so much Greg! Appreciate it!
This code worked perfectly for me, except when coming back to the slide. It only seems to work the first time the slide pops up, but I have a button to return to this slide from multiple others as an option. Is there any way to make sure the scrolling function will work every time?
I think I would need a little bit more context surrounding your particular use.
I took the project file I posted above and created a second slide and put a next and previous button on each slide.
The scrolling on the first slide continued to work fine.
You would need JavaScript because Captivate has no events linked with the scrolling wheel of a mouse. It exists in JS: ‘onwheel”. However it is not supported by all browsers (not by Safari nor IE). I don’t know which image type you will be using, but in this case I would recommend SVG (vector based) since you’ll want to have a crisp image whatever the size of the image.
Crossing my fingers that a JS expert helps you more. There are many around in the community.
Thanks for the information Lieve! Most likely will being use .png graphics.
For the solution with states it matters less, since you can have a good quality image for each state. But if it was a real zoom solution with one image, SVGs which are vector images should be a much better choice than PNGs which are bitmap.
I had expected a JS solution taking advantage of the many possibilities of SVGs.
You must be logged in to post a comment.
