Re-use functions


#1

Hey gang, I’m creating a scene where lines are drawn dynamically between moveable dots:

1

In the attached example, I have object AB (the line from A to B) and BC (the line sitting on its ass below). Everything works fine, except I’m going to have multiple lines and multiple dots, and I’d prefer not to create a separate function for BC (and CD and DE, etc). Is there a way to call a js function and provide variables, ie, “Call ConnectDots when I drag B and drive AB and BC, but not CD”?

Here’s the scene so far:

dots.hype.zip (15.2 KB)

Thanks!

PS:

@Thiago - this also prints your innerHTML that you raised in your question " Set element property inside innerHTML box, though it is commented out. This is the suggestion @Daniel alluded to:

hypeDocument.getElementById(‘AB’).innerHTML = DistanceAB;


(Hans-Gerd Claßen) #2

one possibilty:
on scene or documentload ->

yourGlobalFunction	= function(elementA, elementB, lineElement){	
	var AL = hypeDocument.getElementProperty(elementA, 'left');
	var AT = hypeDocument.getElementProperty(elementA, 'top');
	var BL = hypeDocument.getElementProperty(elementB, 'left');
	var BT = hypeDocument.getElementProperty(elementB, 'top');
	var Y = BT-AT;
	var X = BL-AL;
	var AngleAB = Math.atan2(Y,X)*180/Math.PI;
	var DistanceAB = Math.sqrt((Y*Y)+(X*X));
	
	hypeDocument.setElementProperty(AB, 'top', AT+25, 1);
	hypeDocument.setElementProperty(AB, 'left', AL+25, 1);
	hypeDocument.setElementProperty(AB, 'rotateZ', AngleAB, 1);
	hypeDocument.setElementProperty(AB, 'width', DistanceAB, 1);
//	hypeDocument.getElementById('AB').innerHTML = DistanceAB;
}

call it anywhere:
yourGlobalFunction(A,B,AB)


#3

Hi Hans-Gerd, thank you for jumping in so quickly. So I gave it a shot by throwing it into Head HTML:

connect_dots.hype.zip (15.5 KB)

I fixed the lineElement variable, but no love. I have the sneaking suspicion I should read some more chapters on Photics’ book :wink:

<script type="text/javascript">

function ConnectDots(elementA, elementB, lineElement){	
	var AL = hypeDocument.getElementProperty(elementA, 'left');
	var AT = hypeDocument.getElementProperty(elementA, 'top');
	var BL = hypeDocument.getElementProperty(elementB, 'left');
	var BT = hypeDocument.getElementProperty(elementB, 'top');
	var Y = BT-AT;
	var X = BL-AL;
	var AngleAB = Math.atan2(Y,X)*180/Math.PI;
	var DistanceAB = Math.sqrt((Y*Y)+(X*X));

	hypeDocument.setElementProperty(lineElement, 'top', AT+25, 1);
	hypeDocument.setElementProperty(lineElement, 'left', AL+25, 1);
	hypeDocument.setElementProperty(lineElement, 'rotateZ', AngleAB, 1);
	hypeDocument.setElementProperty(lineElement, 'width', DistanceAB, 1);
//	hypeDocument.getElementById('AB').innerHTML = DistanceAB;
}

ConnectDots(A,B,AB);
ConnectDots(B,C,BC);
</script>

So wouldn’t that be loaded automatically on scene load, and no need to use On Scene Load?

Thanks again…


(Hans-Gerd Claßen) #4

if you want to place the code in the head you’ve got to register an event to be run after the e.G. -> HypeDocumentLoad event has occurred … and attach a function …

have look at the documentation:
https://tumult.com/hype/documentation/3.0/#examples


#5

lol, ok, I’ll bite: where else would you have put the function call?


(Hans-Gerd Claßen) #6

please ¿ ! :thinking:


#7

Ha! Ok, I’m guessing we have a translation error, or else I’ve missed something so obvious. Let’s hope the first condition. You imply that the function call could be placed in places other than the Head. I tried as Inner HTML:

<script type="text/javascript">
	ConnectDots(A,B,AB);
</script>

…and sadly the GUI function calls don’t take variables. I suppose I could start coding up On Click events in JS.


(Thiago Ribeiro Nogueira) #8

Sorry Hans,

I don’t understand how this could help with my question. Can you explain with a example please?


#9

Hi @Thiago

That was actually my link to you. The example I submitted (see the first example, not the second) sets the position, size, and angle of the line AB based on the calculation of the 2 circles as you move them.


(Thiago Ribeiro Nogueira) #10

ouch! My mistake… :sweat:

I understood your code, but what’s this line is supposed to do? And how to use to solve my problem.

hypeDocument.getElementById('AB').innerHTML = DistanceAB;


#11

Ah, well, that line is a way to grab whatever value is in variable DistanceAB and print it out in the element with the AB id. Its just another way of setting something other than setelementbyid. Perhaps its not as pertinent as i thought :wink:


(Hans-Gerd Claßen) #12

you’re mixing scopes and did not read the documentation linked above.
leads to a question: what exactly are you trying to achieve¿ :slight_smile:


#13

@ouch_stop

… snip …


My take on Hans' above suggestions... dots_JHSv1.hype.zip (13.1 KB)

Called by "On Scene Load"

connectDotsSetup



"On Drag" Action for an element

connectDotsGlobal

ConnectDotsAction