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?
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.
(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)
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().
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?
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?
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.
@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?
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.
