Magnification Lens

Demo:
HypeMutationObserverMagnification.html

Download:
HypeMutationObserverMagnification.hype.zip

Based on Hype MutationObserver:

7 Likes

Hi Max,

I try to use this magnifier in my project. When I put this on the first scene it works perfect, but when I put it on a second scene it doesn’t work anymore. It sure has to do with the timer function I use. When I uncheck this on sceneload this it works like it should. Is there a way to unload the timer script in the second scene like you use in your script with ‘Kill Mutation Observer for document on scene changes’. My javascript knowledge is not sufficient to solve this. Is there an easy way, or is this a complicated issue.

The timer script I found somewhere in this forum. Not sure who wrote this anymore.

Many thanks!

Olav

Magnifier.hypetemplate.zip (1.2 MB)

The problem is that the myCallback() function for the "HypeSceneLoad" event returns false. By doing so, it is communicating to not run any additional scene load actions, which includes the startMutationObserver() required for the magnifying glass to run.

I’m guessing the point of the timer() is that after some idle period to go to a different scene… as such it seems like it would be safe to remove the return false; line but would wonder why it was added there in the first place.

1 Like

@jonathan nailed the problem!

So, this basically has nothing to do with the magnifier. It comes down to your Hype event handler. I like that more user are getting into leveraging them in code. I got some suggestions for you:

Format your JavaScript properly. Helps keeping it readable.

You can read about the expected return values for Hype Events here

There is a CDN version of the Mutation Observer. Read about it here:

Just use this in your head and delete the JS file from your project to get the latest version.

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeMutationObserver/HypeMutationObserver.min.js"></script>
2 Likes

Many thanks you both !

I’ll give it a try!

Olav

I tried your suggestions and it works flawlessly now, so again may thanks!!

Olav

1 Like

Dear Max,

That magnifier looks really good!

I am trying to apply it to my project but I cannot figure it out.

There is the action on scene load "run javascript". Which variables do I need to adjust in the JavaScript? What else to format?
And how do I connect images with the mutation event?
For the html-head, is adding this script "" sufficient?

Many thanks !
Marieke