Tumult Genius of the month comp. Can you guess the HYPE Error

1

Some Background:

I have been building a Video wall with Hype for a Friend.

The Wall comprises of a wall of Thumbnails of his dvd collection he has stored on HD and over a home network
A user can click a thumb and it will play the video, select to see child, adult or all rated videos.
Each can show a description of the video and the whole thing is searchable.

Anyone can access it from any computer in the house on his network. Think home grown netflix type of interface for you own movies.

And all easy for hime to update with new movies without touching the project.

A lot of work getting everything to work. Right!

So imagine my joy, when I think I am all good go, I try and trigger a scene load through an event and JS…

and get:

    [Error] TypeError: undefined is not an object (evaluating 'v[h].v[P[s.id]].cL')
Ke HYPE-518.thin.js:1794:303
Hb HYPE-518.thin.js:1797
(anonymous function)
f HYPE-518.thin.js:1132

Er What!!
I mean what does that mean. When we all speak about having JS variable names that we can understand trying to go through this sort of errors in the debugger make you a true believer.

I discovered even from a simple button I could not transition to another scene.

The only way I could figure this problem out was to disable all my JS loads and calls and then bring them up one by one. Not as easy as it sounds trust me. And you have to get creative.

Remember my JS had already loaded and everything else was working ok. But any scene load action from UI or from the likes of:

*hypeDocument.showSceneNamed('somescene', hypeDocument.kSceneTransitionCrossfade, 1.1)*

would fail .

So who can guess what type of code would stop ALL Hype scene loads in their tracks and give this undefined error.
(and it is not a bad var) :grin: that would be too easy… and this is not an obvious bit of code.

I bet no one can … :imp:
Who ever does gets the title of Tumult Genius of the month.

2

I’d humbly suggest there is opportunity here for the Hype team to give us some extra tooling to identify JS issues such as this and other such as identifying duplicate id’s etc.

1 Like
3

That would be nice.

Although we probably could write our own JS to check ids while debugging.

And as a Clue because this is actually way out there as an issue ( and I do not know why it actually was a problem)

ID Dolly.

4

was it perhaps using / not using a certain comparison operator?

1 Like
5

Sorry nope. :cry:

6

The clue really does give away what the line of code that broke Hype’s scene transition API was doing. …argh said too much.

7

Well now it’s obvious … well maybe.

Did you give some of your scenes the same name?

8

Lol,
Sorry no. Nothing to do with scene names.

9

give up!

10

Ok another clue.

Dolly lived on The Island and did not know who she was until I told her…

11

I may have to give this to a friend at work who is not a coder by a million miles but got the first clue straight away after literally 5 seconds thought…
:open_mouth:

12

Ok. So this was a big fail. Probably trying to be too smart :stuck_out_tongue_winking_eye:

To put us all out of our pain of this thread

ID Dolly.

Dolly was the first Cloned mammal, who had three parents i think.

The Island Was a film about clones who did not know who they really were.

See it was not so hard, I was making clones and trying to give them IDs.

What I was doing to get Hype to break down.

I had cloned an off scene element a number of times in a for loop that would place a clone of the element within each thumbnail div, them selves being generated dynamically.

Each clone was given some attributes with different values.

for example:

        infoBoxGroupClone.id = 'infoBoxGroupClone' + i;
	infoBoxGroupClone.className = 'infoBoxGroupClone';

	infoBoxGroupClone.style.top = '0px';
	infoBoxGroupClone.style.left = '0px'; 
	infoBoxGroupClone.style.zIndex = '2000';

This was all well and good.

The cloning also cloned the children of the original element.

And I wanted to give the new children some attributes also.

setting up the child’s innerHTML, I had no problem.

infoBoxGroupClone.children[0].children[0].innerHTML =  btn.getAttribute('info');

But giving it an ID is what stopped any scene transitions working even though there is no relation.

infoBoxGroupClone.children[0].children[0].id = 'infoText' +i;

So I am not sure whats going on with it but suspect it is some sort of bug that is only apparent when trying to id children of a clone??.

1 Like
13

I can’t think of how this would affect the scene transition process; can you post a zip of the .hype doc?

What I’ll take a look at (and you can do too) is replacing the minified hype runtime with a non-minified version (found in the app’s package contents) to get a better grasp on the failure.

14

Thanks @jonathan,

I will try that.

I created a test project. I have removed everything that I can, functions, element, css the works to leave a bare bones project.

The line that errors is un commented , so you should see the error.

films.zip (213.5 KB)

Also here is what the what I get when I change the file

// run any symbol unload actions
var domElements = getElementsByClassName("HYPE_element", currentSceneElement());
for (var i = 0; i < domElements.length; i++) {
var element = domElements[i];
var persistentSymbolOid = _scenes[sceneIndex]["v"][_idReverseMapping[element.id]]['cL'];
if (persistentSymbolOid) {
continue;
}

This line is lit up -->> var persistentSymbolOid = _scenes[sceneIndex][“v”][_idReverseMapping[element.id]][‘cL’];

15

Ah, that’a fun one. The root of the problem is this line:

var domElements = getElementsByClassName("HYPE_element", currentSceneElement());

Hype’s runtime is doing a DOM search of elements with the HYPE_element class (likely we use the DOM method for simplicity sake). We expect to know about all items with this class, and have internal data structures in the runtime that map to it. Since you’re cloning a group containing a HYPE_element (and then changing the id which we use as the key on that child), it is failing in the lookup and throwing an error.

A solution would be to remove the HYPE_element class from the child.

So to ruin the “tumult genius of the month” party the general problem is that you shouldn’t manually make elements with the HYPE_element class otherwise the runtime will barf :smile:.

16

Do you know why the parent element ( the parent clone of the child ) does not throw an error.
It has also has a named class and I also change it’s id before I try and change it’s child’s id ?

@jonathan,

This did indeed work,

infoBoxGroupClone.children[0].children[0].classList.remove("HYPE_element");

And I just realised the answer to my above question, The other change works because I change the class for the parent element. It never had a class of HYPE_Element"

This means I could if I want just make sure I do the same to the child.

infoBoxGroupClone.children[0].children[0].className = 'infoBoxText';
infoBoxGroupClone.children[0].children[0].id = 'infoText' +i;

I bow to you almighty winner of the Clone wars Tumult Genius of the Month. :grinning:

Many thanks.

17

Correct.

I somehow don't think I should qualify ;). But it was an interesting problem! I always hesitate a bit when the runtime uses the DOM for knowledge, and this is one example where it can interfere with expected results from someone using Javascript!

18

I guess, No one got the clues ( apart from someone who I work with, poor sod) which was the real comp. :smile:
You may of wondered why I did not post the full problem straight away. Once I found the line of code that was the issue, I made some small changes else where so that I no longer needed the child element to require an ID, so there was no rush for me.. But It did need solving..

I only could say that after I spent over an hour working through all my lines of code in all my functions to find the offending line.. :scream:

But in the end I learnt some stuff.