Javascript Callback/hypeDocument variable control from inner HTML

Hi Everyone!

I’ve got a doozy of a request!

So I’ve embedded a slider puzzle into my project (using jqPuzzle.js).

I would like to have the project go to the next scene scenes when the puzzle is completed.

In the jqPuzzle.js there is a place to add a callback once the puzzle is completed (line 36). Is there any way that I can make that callback control a hypeDocument variable that advances to the next scene?

Any ideas would be appreciated!

Logan

On Puzzle complete.zip (2.6 MB)

Hi,

I am sure that one of the tumult experts will point out a better way of doing this.

But working with your project.

First, we need to move the :

<script language="JavaScript">
	//--
	function myCallback(hypeDocument, element, event) {
window.myhypedocument = hypeDocument;

}
if("HYPE_eventListeners" in window === false) {
 
 
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":myCallback});
</script>

Out of the HTML widget and into the Hype documents <head.>

Document Inspector --> Edit Head Html.


In the jqPuzzle.js you need to setup the user defined callback:

// perform actions when the puzzle is solved sucessfully 
    success: { 
        fadeOriginal: false,    // cross-fade original image [true|false] 
        callback: undefined,    // callback a user-defined function [function] 
                                // the function is passed an object as its argument 
                                // which includes the fields 'moves' and 'seconds' 
        callbackTimeout: 300    // time in ms after which the callback is called 
    },

Setup like this:

// perform actions when the puzzle is solved sucessfully
		success: {
			fadeOriginal: true,		// cross-fade original image [true|false]
 
        callback: function myCallBack(results) {
            // window.parent.window.myhypedocument.showNextScene();
        window.parent.window.myhypedocument.functions().myFunction(window.parent.window.myhypedocument);} ,	// callback a user-defined function [function]
									// the function is passed an object as its argument
									// which includes the fields 'moves' and 'seconds'
			callbackTimeout: 100	// time in ms after which the callback is called
		},

Notice in that, a commented out:

 window.parent.window.myhypedocument.showNextScene();

This if used will call the scene directly.

Notice that we call the window.parent then the window.myhypedocument

We have to do this since the (I think) we have two window objects. The main one for the page and one for the HTML widget.
We need to get the stuff in the The main one.

We then have the line I left working:

window.parent.window.myhypedocument.functions().myFunction(window.parent.window.myhypedocument);

This calls the function in the hype documents.

An important things about the syntax of that linet.

window.parent.window.myhypedocument is basically the hypdocument

In the hype function to show the next scene we would use:

 hypeDocument.showNextScene(hypeDocument.kSceneTransitionCrossfade, 1.1)

The hypeDocument.showNextScene… function needs to be told about the hypeDocument the the arguments in its parent function.

function myFunction(hypeDocument ......

The Parent Hype Function will get hypedocument * from the the first argument in the callback.

…ctions().myFunction(window.parent.window.myhypedocument);

So in the callback we must use window.parent.window.myhypedocument as the argument.

But in the hype document function we also need to change the function to.

window.myhypedocument.showNextScene(window.myhypedocument.kSceneTransitionCrossfade, 1.1)

I know, convoluted right. But once figured out not too hard.


Update:

@lriley3 correct a mistake in the project and post.

On Puzzle complete.hypetemplate.zip (2.6 MB)


3 Likes

Mark to the rescue once again!!

Wow I didn’t even think about using window.parent. I was literally banging my head against my table trying to figure this one out yesterday.

Thank you so much for not only updating the project, but for explaining it step by step. I’m relatively new to JS so it helps seeing how you came to that solution.

Thanks again! Please let me know if there is anything I can do to in return!!

Logan

1 Like

Sorry to bother with what is probably a stupid question, or in fact a possibly totally incorrect question! .

Why is the image loaded from a web site?
img src=“http://www.2meter3.de/jqPuzzle/street.jpg

instead of placed in the scene directly in Hype? Wouldn’t that be easier?

Joe

I tried replacing the url image with an image I had. It didn’t work. The image is not displaying.
I replaced the image in the HTML widget.

script type="text/javascript" src="${resourcesFolderName}/jquery-2.1.1.min.js"
link rel="stylesheet" type="text/css" href="${resourcesFolderName}/jquery.jqpuzzle.css"
script type="text/javascript" src="${resourcesFolderName}/jquery.jqpuzzle.full.js"

img src="${resourcesFolderName}/2017CadenzaPremium.png" class="jqPuzzle"

Did anyone get this to work correctly by changing the image?
Much appreciated!!
Marian :slight_smile:

<head><script type="text/javascript" src="${resourcesFolderName}/jquery-2.1.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${resourcesFolderName}/jquery.jqpuzzle.css" />
	<script type="text/javascript" src="${resourcesFolderName}/jquery.jqpuzzle.full.js"></script>
	
	

		</head>

<body> 
<img src="${resourcesFolderName}/day_2.JPG" class="jqPuzzle"/></body>

Works for me ?

You also need to make sure that the image is in scale for the puzzle size…

Can we see your project…

Wow, it’s working for you!?
Well, I tried everything I can think of. I’ve been working with Hype for about a month now. I’m really enjoying it.
Here’s my file. jqPuzzleMR.zip (2.7 MB)

Please let me know what I’m doing wrong.
Much appreciated.
Marian

I will have a quicklook at that,

I am also setting up a simpler example that is a bit more transparent in it’s usage.

A quick answer her for you.

The png is being converted to jpg because you have the ‘Automaticly Optimise when Exportingchecked. Like so

Uncheck it.

As I said above I will post a more transparent example. The one we used above does not really need to be done in a widget and also the js file was edited for that user.

It will be better using an original version of the JS file from the creator and as a plugin.

2 Likes

Awesome! Thank you so much MarkHunte!!! It finally works.
I would have never have figured out that check box in a timely manner. I’ve already spent too much time on this but I’ve learned a lot in the mean time. I wasn’t going to give up. I’m so happy I posted here on the forum. I’m going to master Hype.
Looking forward to your new example.
You rock!
Marian

2 Likes

@MResio

Here is the simpler one ( I think ) to understand and set up.

We add the

jquery.jqpuzzle.css
jquery.jqpuzzle.full.js

files to Hype.

And also the Jquery plugin.

I used the 'jQuery.min.js’ as I found/find that many with version numbers give errors.

The Puzzle can be made in 3 ways. This is the third way which offers full control over the puzzle’s behaviour , style and display.

You can see all the options from the creators site http://www.2meter3.de/jqPuzzle/


We place the image in the Inner HTML of a rectangle. We do not need to add any of the flags or puzzle styling here.

<img src=" ${resourcesFolderName}/flower.jpg">

We must give the Rectangle an ID to use later on.

We then add a Hype function which will have the JQuery+Puzzle code.

The below code declares and creates the puzzle and u shows some of the optional settings

$(document).ready(function() { 
        // define your own settings 
        var mySettings = { 
            cols: 3,      // Number of columes
            shuffle: true,  // Initial shuffle
            hole: 11,  // Hole placement
            numbers: true, //  show numbers
            //-- CONTROLS
          control: { 
         toggleNumbers: false, 
         counter: false, 
         timer: false ,
         shufflePieces: false,    // display 'Shuffle' button [true|false] 
        confirmShuffle: false,   // ask before shuffling [true|false] 
        toggleOriginal: false,   // display 'Original' button [true|false] 
        toggleNumbers: false,    // display 'Numbers' button [true|false] 
        counter: false,          // display moves counter [true|false] 
        timer: false,            // display timer (seconds) [true|false] 
        pauseTimer: false 
            },
            // additional style information not specified via css 
    style: { 
        gridSize: 2,            // space between two pieces in px 
        overlap: true,          // if true, adjacent piece borders will overlap 
                                // applies only if gridSize is set to 0 
        backgroundOpacity: 0.0  // opacity of the original image behind the pieces 
                                // [0 ... 1] (0 means no display) 
    } , 
            
            //-- CALLBACK  function
           success: { 
                 callback: function(results) { 
                 
                 window.theResults = results
                  hypeDocument.functions().done(hypeDocument, element,event)
                  }
            }, 
            animation: { 
                shuffleRounds: 1, 
                slidingSpeed: 100, 
                shuffleSpeed: 200 
            } 
        }; 
        
        $('#box img').jqPuzzle(mySettings); //-- Recangle with InnerHML set to image
    });	

puzzle_2_MHv1.hype.zip (123.8 KB)

3 Likes

Thank you so much for this Mark! Yes, it’s much simpler and easier to
understand.
I really appreciate you taking this effort to help me understand how to
incorporate this puzzle in Hype.
As I mentioned before, You Rock! and You’re the best!
Thanks again!
Marian

2 Likes