Call javascript functions with parameters

Feature Requests
1

It would be very helpful to be able to pass parameters to javascript functions. I know we can create functions that call other functions and pass params, but the resource folder turns into a mess on complex projects.

1 Like
2

I’m not sure I’m understanding this correctly.

Where are you wanting to pass them from and where to?

D

3

Agreed, can you give a clear example of what you want to do.

There are ways to pass parameters along to hype functions or you can use global vars

4

If I understand the javascript functions in Hype correctly, they are pre-defined with hypeDocument, element, event parameters. So for example, if you wanted to create a generic function that takes scene and user_id as parameters, the predefined functions can’t be modified to take additional parameters. I think it would be helpful if there was a way to pass parameters from the action menu to a function. Then in the function, you can access a variable like var scene = event.params.scene; or something like that. Maybe this is stupid or there’s a better way to do it… I did a mockup of what I was thinking for how it would work in the Action panel.

1 Like
5

I like this idea. But it would need fleshing out.

But remember a parameters/argument that is passed to the function can be pretty much anything.

When Hype functions are setup to be called in the Hype Actions inspector called using user interaction with the likes of buttons or scene loads/unloads etc. The parameters/argument are fixed.

But you can call a Hype function from another function. In doing so you can change type of parameters/argument is passed on.

 function pushValues(hypeDocument, element, event) {
    var  textArea =  hypeDocument.getElementById('textAreaA')  
     
    	var  textAreaValue  = textArea.value ;
    	
    	var  currentScene  = hypeDocument.currentSceneName();
    	
    	//-- Call another function and pass on your arguments
    	hypeDocument.functions().updateConsole(hypeDocument, [element, textAreaValue, currentScene ], event);
    	
    	
    	
    	//-- OR  hypeDocument.functions().updateConsole(hypeDocument, textAreaValue, currentScene);
    	
}

Other Hype function:

function updateConsole(hypeDocument, element, event) {
	hypeDocument.showSceneNamed('Scene 2', hypeDocument.kSceneTransitionCrossfade, 1.1)
	
 var console  =  hypeDocument.getElementById('console');
	
 console.innerHTML = "User ID: <strong>" +element[1] + '</strong><br>' + "From Scene :<strong>" +element[2] + "</strong>";
	}

HypeFunctionUserArguments.hype.zip (19.6 KB)

6

Thanks for the reply, @MarkHunte.

If I understand you correctly, you are suggesting to call a second function and pass in any variables I want. That would definitely work, but wouldn’t that render the updateConsole() function non-reusable (or at least unreliable) for other Hype actions? If you can’t expect the parameters to be exactly hypeDocument, element, event every time, then I couldn’t reuse that in other places. I’m trying to adapt some standard programming practices to Hype, mainly DRY (and maybe that’s where I’m going wrong). I can definitely hack some things together to accomplish what I’m trying to do, but I want to be able to look at this project in 6 months an understand exactly how (and why) things were built within.

7

You are probably correct there in passing an array. Which was to show how to keep the original element value and pass some extras.

If I was also passing arguments from other functions then I would add checks for type or length of the item being received.

But in the pushValues function comments you will see I included a second way of doing it.

hypeDocument.functions().updateConsole(hypeDocument, textAreaValue, currentScene);

If that was used, the updateConsole would then just use the single item in the element argument from any other function.

But in most cases I would use Global variables to pass around stuff.

8

My concern about the global is I will be adding this Hype animation to an Angular app and I don’t want to pollute the scope. Although, since the Hype doc is in an iframe, that may create it’s own scope. I’ll need to test that, but the global idea may work.