Display frame number, object angle, object length, position and other telemetry in a text field?

Using JavaScript with Hype
1

Hello,

Is it possible to display timeline frame number, object angle, object length, position and other telemetry in text fields? Further to that, to enter parameters in those fields and have the objects react to the user text input?

Thank you!

2

I'm no JavaScript expert, but, a few Google Searches helped me compile this.

To create a text box: Create a rectangle > Edit > Edit Inner HTML > Use this code: <input type='text' id='inputID'>

  1. Timeline frame number (assuming: [a] - the timeline you want the frame number of is named Main Timeline, [b] - you have set-up a text-box with the ID as frameText):
var ti = hypeDocument.currentTimeInTimelineNamed('Main Timeline');
var fr = Math.round(ti * 30);
hypeDocument.getElementById('frameText').value = fr;
  1. Object angle (assuming: [a] - it's just rotated in z-axis, [b] - its ID is rotateObject [c] - you have set-up a text-box with the ID as rotateText):
var el = hypeDocument.getElementById('rotateObject');
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue('transform');
var values = tr.split('(')[1], values = values.split(')')[0], values = values.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var an = Math.round(Math.asin(b) * (180/Math.PI));
hypeDocument.getElementById('rotateText').value = an;
  1. Object position (assuming: [a] - its ID is positionObject [c] - you have set-up a text-box with the ID as positionText):
var re = hypeDocument.getElementById('positionObject').getBoundingClientRect();
hypeDocument.getElementById('positionText').value = 'X: ' + Math.round(re.x) + ', ' + 'Y: ' + Math.round(re.y);

What exactly?

I'm trying to figure out how to do this. I'll update the thread if I get to know.

UPDATE:

In case of rotation, you can use this (assuming: [a] - it's supposed to be rotated in z-axis only, [b] - its ID is rotateObject [c] - you have set-up a text-box with the ID as rotateText):

hypeDocument.getElementById('rotateText').addEventListener('change', rotate);
function rotate()
	{
		hypeDocument.getElementById('rotateObject').style.transform = 'rotateZ(' + hypeDocument.getElementById('rotateText').value + 'deg)';
	}

However, this will also move the object to the position of the input box. I'm not sure why this happens. Maybe, some professional can help.

I believe, the position of the object can be changed by manipulating the above code (a little).

3 Likes
3

Hype has an API to rotate z

	var rotateObject_ = hypeDocument.getElementById('rotateObject')
 
		hypeDocument.setElementProperty(rotateObject_, 'rotateZ', hypeDocument.getElementById('rotateTextInput').value, 1.0, 'easeinout')

Here is a working example off the back of @Hrishikesh code..

I use a Math function to give a live update to the initial values. ( The actual function is best run on 'On Prepare for Display' scene action)

Update: I changed the code to set the z deg via the hype API but forgot to adjust code to display it -- fixed now

timelineTele_v2.hypetemplate.zip

(26.0 KB)

3 Likes
4

Ah, brilliant! Thanks so much guys! We have a bunch of old Physics and Math Java Applets that need to be rebuilt using HTML 5/javascript. I’ve used Hype for animation with interactivity and navigation but not for these explorers. I’m quite certain now that it’s not in my skill set. I see the U of Colorado is building some really nice ones. Can these be built in Hype? https://phet.colorado.edu/sims/html/vector-addition/latest/vector-addition_en.html

Thanks again!

Cheers,
Mo

5

It's pretty much all custom code, and for the amount of code to build something like that the advantages of using Hype for certain visuals would probably diminish.

1 Like
6

Thank you for your feedback Jonathan. That makes sense. We have a ton of these things that were built by a fellow using Java back in the day. I’m a multimedia person and I have been using Hype for animation primarily. With some navigation and interactively. Really love it. These explorers are beyond my capabilities. I could do the designing, but the programming, nope. I will find the stuff Mark and Hrishikesh super useful though! Thanks again, this is the best community!

4 Likes