External JS function call


#1

I’ve included this into my hype document by using a HTML Widget.

Here’s the code I’ve used:


	<script src="siriwave.js"></script>
	<script src="siriwave9.js"></script>
	<script>
		var $siri_ios9 = document.getElementById('container-ios9');
		var SW9 = new SiriWave9({
			width: 259,
			height: 40,
			speed: 0.2,
			amplitude: 1,
			container: $siri_ios9,
			autostart: true,
		});
	</script>

This works, but I have this problem:
You can set autostart to false and use SW9.start() and SW9.stop() in the console, but when implemented into hype this no longer works. Is there a reason why?

Wave.hype.zip (13.1 KB)


#2

I would guess you are trying to use those methods within a Hype function? The trouble is that your call for the Javascript (siriwave.js / siriwave9.js) is in an iFrame (which is what the HTML widget is). An iframe is it’s own document and therefore treated separately to it’s parent. What you need to do is move everything outside the HTML widget.

So in your Head HTML you can pass a call to the script using the same code as above adding the special ${resourceFolderName} variable. And then place the instantiating code into a function to run on scene load and then you can create functions on mouse click of elements with the methods SW9.start() and SW9.stop() in them.

Head HTML code:

<script src="${resourcesFolderName}/siriwave9.js"></script>

(Edit: If you have placed the resource into your resources folder and “include in document head” is checked then you don’t need to do this as it will already be done for you)

Function on scene load:

var $siri_ios9 = document.getElementById('container-ios9');
SW9 = new SiriWave9({
	width: 259,
	height: 40,
	speed: 0.2,
	amplitude: 1,
	container: $siri_ios9,
	autostart: true,
});

Code on Mouse Click of whatever element you want:

SW9.start(); // SW9.stop() whichever you need

Note: Finally you would of course have to create an element and give it an id in the inspector of “container-ios9”


(Mark Hunte) #3

Pretty much what @DBear said,.

I was also having a look at this,

I would take the code out of a widget.

Use a normal rectangle and give it the id you are using for the container. ( don’t add any inner code)

You can the place this code in a new hype functions and called on scene load

var $siri_ios9 = hypeDocument.getElementById('siri_ios9');
			window.SW9 = new SiriWave9({
				width: 518,
				height: 80,
				speed: 0.2,
				amplitude: 1,
				container: $siri_ios9,
				autostart: true,
			});

The external .js will already be in your head html because you have included the file in your project.

Notice I put the SirWave object in global var.

This will enable you to call it’s command from anywhere including the console.

with for example.

window.SW9.stop()

Wave_v2.hype.zip (15.3 KB)


#4

great minds!!

oops forgot to edit the code above to compensate for the global var. :slight_smile:

+1 for bothering to add a document. :smiley:


#5

Thanks guys! works perfectly! The only strange thing is that the console commands work when autostart is true, but when its false, I cant use SW9.start().


(Mark Hunte) #6

Works on the one I exampled…


#7

Strange… What I was planning on making was a looped animation anyway. There is a start animation for the wave but stop just pauses the animation, so I was going to just reduce transparency. Then for the loop somehow delete and remake or reset the wave, do you know a good way to do this?


(Mark Hunte) #8

I would set the siri element to color =none.
Put it in a group.
Set the groups colour = green.

Add

window.SiriPlaying =false;

To the top of the existing siri creation code.
So it looks like;

window.SiriPlaying =false;
	
	var $siri_ios9 = hypeDocument.getElementById('siri_ios9');
			window.SW9 = new SiriWave9({
				width: 518,
				height: 80,
				speed: 0.2,
				amplitude: 1,
				container: $siri_ios9,
				autostart: false,
			});

Add a button that calls the new function.

var siri_ios9 = hypeDocument.getElementById('siri_ios9');

window.SiriPlaying ? (
    window.SiriPlaying = false,
   window.SW9.stop(),
  hypeDocument.setElementProperty( siri_ios9, 'opacity', 0, 0.2, 'easeinout') 
) : (
     window.SiriPlaying = true,
    window.SW9.start(),
     hypeDocument.setElementProperty( siri_ios9, 'opacity', 1, 1.0, 'easeinout') 
);

Wave_v3.hype.zip (17.5 KB)


#9

I modified your code a little to make the wave go up and down, but for some reason when export (advanced), the wave doesn’t show up on the website when it works perfectly in the preview. Any ideas why?

Wave.hype.zip (104.5 KB)


(Mark Hunte) #10

Uncheck the Use external runtime Url in the Advanced export.


#11

You have to understand Javascript and scope in order to understand this. I won’t explain because frankly it would just confuse matters

.[quote=“MarkHunte, post:6, topic:7986, full:true”]
Works on the one I exampled…
[/quote]

because Mark used window. to assign it to the window. Which is arguably the better way to do it. At least this way you can track it better if you use the “window” syntax. Makes it easier to see! Also, as you’ve witnessed you can access it in the console.

Just to highlight the complexities …

\\ the following assumes you are declaring these before document load
var myVariable = 0;
myVariable = 0;
let myVariable = 0;
const myVariable = 0;
window.myVariable = 0;
this.myVariable = 0;

All of these are “globally scoped” but have differences i.e they do not become a property of the global object. And if they do, some can be implicit or explicit.

Here endeth the lesson. :slight_smile:


#12

Ive tried that, and also exported as HTML5 and it still didn’t work :confused:


(Mark Hunte) #13

Normal export works on my site


#14

Got it working now, everything works perfectly! Thanks!


#15

@MarkHunte Im having some trouble with resizing; I’m using JS to resize the size of the document, and to create a different layout I have to recall a modified version of the JS.

This messes up the wave function, and I remade all of the JS functions and changed the rectangle element ID for the smaller layout but it still doesn’t seem to work. Any ideas?

Wave.hype.zip (124.5 KB)


#16

hi @PappaSmalls

SiriWave9 is a ‘constructor’ function (basically this is a function that can be used several times with different information for each instance)

Your problem here is that you changed the call to SiriWave99 so therefore the variable you were trying to set (window.SW99) could not find the SiriWave99 constructor function. You should be pointing to the same SiriWave9 constructor function.

So, change

new SiriWave99 ({ ...

to

new SiriWave9 ({...

#####(line 8 Siri2 function in Hype)

And you should be good to go!