Drag and interactive results

1

Hi guys

I have attached a hype file with a set of questions on my hype file (a mock up before I create a polished version) and was wondering if someone on the community can help. I tend to use Hype for online digital advertisement and interactive pages for Apps and have a very basic understanding of .js and code and how to implement. Apologies if the file structure seems messy but would be very grateful in finding a solution my query, please download the hype file and open to understand my question.Drag dose tablet.zip (168.7 KB)

Many thanks

John

2

If only the right value will change, and you need to change the color if the total is above 80MG, then I think your best bet is to use a regular timeline to show the added value in the bottom circle. You’ll also need to handle going back in time, so the JavaScript would get a bit complex if you wanted to add and subtract values based on the timeline direction and time.

If you record while changing the text, you can record a change in the actual text content of the circle. Record, move to a new point in the timeline, then modify the text and you’ll get a ‘inner html’ keyframe that represents that change.

If this becomes much more complex than I think JS is the answer for you, but for just seven different positions I think this is easiest using just Hype timelines and adjusting the text to match.

3

Hi Daniel

Many thanks for your response, I would actually need both left and right figures, whatever they may be, added together to create the final figure in the circle at the bottom.

Can this be created using Hype timelines/scenes etc then?

Many thanks for your help

4

Here is a quick idea of doing it with JS to get you started but you will probably need to do some research/reading if you want to progress beyound this.

The drag we are using is from the left_drag right_drag groups not the individual elements within.
Each drag call a javascript function.

    //-- wait for Drag to end.  
	if ( event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseEnd ) {
	
	
	//-- give time for animation to complete with a 1s timeout
	
	setTimeout(function(){ 
	
	
	 //-- use the timelines time  to calculate mg points
	var playhead1_  =  Math.floor(hypeDocument.currentTimeInTimelineNamed('playhead1')) 
	
	
	var playhead2_ =  Math.floor(hypeDocument.currentTimeInTimelineNamed('playhead2')) 
	
	 	//  Multiply and Add up both timeline numbers.
	 	
	 	var theResult = (playhead1_  *10 + playhead2_  *10)  
	
	//-- check if time line number is at the start. if so add 5 to result number.
	
	if (playhead1_ == 0){
	theResult += 5
	}
	if (playhead2_ == 0){
	theResult += 5
	}
	
	
	var total_roundel_ = hypeDocument.getElementById('total_roundel')
	var warningText_ = hypeDocument.getElementById('warningText')
		
	//-- update result text	
	total_roundel_.innerHTML = theResult +'mg'
	
	//-- check if we are  above 80mg
	if (theResult >  80){
	
	
	//-- change warning colours
	
	warningText_.style.color = 'red'
	} else {
	warningText_.style.color = 'black'
	}
	 
	}, 1000);
	}

Drag tablet_mhv1.hype.zip (45.9 KB)

This example I have given some elements ids and moved the Main timeline animations to a new timeline.

4 Likes
5

Wow exactly the requirement here, many thanks for your help, I will post the polished example up, many thanks for your JS example, Im at the beginning of learning this so this has been amazing

thank you

1 Like
6

So the piece works well except on little thing that is frustrating me, I want two elements to highlight red (total roundel and warningText)

My thoughts were just to combine the code

 text_roundel_.style.color = 'red'
} else {
text_roundel_.style.color = 'rgb(175, 159, 205)'
}

with:

 warningText_.style.color = 'red'
} else {
warningText_.style.color = 'rgb(175, 159, 205)'

This would allow both to highlight once dosage exceeds 80

//-- wait for Drag to end.  
if ( event['hypeGesturePhase'] === hypeDocument.kHypeGesturePhaseEnd ) {


//-- give time for animation to complete with a 1s timeout

setTimeout(function(){ 


 //-- use the timelines time  to calculate mg points
var playhead1_  =  Math.floor(hypeDocument.currentTimeInTimelineNamed('playhead1')) 


var playhead2_ =  Math.floor(hypeDocument.currentTimeInTimelineNamed('playhead2')) 

 	//  Mutiple and add up both timeline numbers.
 	
 	var theResult = (playhead1_  *10 + playhead2_  *10)  

//-- check if time line number is at the start. if so add 5 to result number.

if (playhead1_ == 0){
theResult += 5
}
if (playhead2_ == 0){
theResult += 5
}


var total_roundel_ = hypeDocument.getElementById('total_roundel')
var warningText_ = hypeDocument.getElementById('warningText')

	
//-- update result text	
total_roundel_.innerHTML = theResult +'mg'

//-- check if we are above 80mg
if (theResult >   80){


//-- change warning colours
	
 warningText_.style.color = 'red'
} else {
warningText_.style.color = 'rgb(175, 159, 205)'
}
 
}, 1000);
}
7

Thats how I would do it

warningText_.style.color = 'red'
	total_roundel_.style.color = 'red'
	} else {
	warningText_.style.color = 'rgb(175, 159, 205)'
	total_roundel_.style.color = 'rgb(175, 159, 205)'
	}