Change an elements colour from text


(Chris Hardy) #1

Hi all,

I’m wondering if it’s possible to change an elements color from text set in ‘text element’. I’m exploring if it’s possible for a text element to show a number and change a simple box element to the related color - for example:

The number 1 will make the box turn green
The number 2 will make the box turn red
The number 3 will make the box turn yellow

Does anyone have an idea if this is possible using JavaScript?

Thanks In advance,

Chris

PS - to the guys at Tumult - hype is excellent and thank you for all your hard work in continuously making it better :blush:


#2

not sure if I’ve got this 100% but you can use this function on mouse click of the text element(s)

var targetElement = hypeDocument.getElementById("box");
if(element.innerHTML === "1"){ // element is the shape being clicked
    targetElement.style.backgroundColor = "green"; // or #00ff00 or rgb(0, 255, 0);
} else if (element.innerHTML === "2"){
    targetElement.style.backgroundColor = "red"; // or #ff0000 or rgb(255, 0, 0);
} else if (element.innerHTML === "3"){
    targetElement.style.backgroundColor = "yellow"; // or #ffff00 or rgb(255, 255, 0);
}

the “element” (text element clicked) can also have an ID instead of using the innerHTML

// then you would target as
if(element.id === "1"){ .... etc

(Pete) #3

As an alternative to @DBear javascript solution you have an option of creating different timelines and animating their states. You can also make 3 individual scenes depending on what you want to achieve and what is comfortable for you.

Timeline Examples
https://tumult.com/hype/gallery/IconicStructures/IconicStructures.hype.zip
https://tumult.com/hype/gallery/EmailSwipe/EmailSwipe.hype.zip


(Chris Hardy) #4

Thanks guys :blush:


(Chris Hardy) #6

Thanks for this it works well. I’m just wondering if it’s possible to run the code to do the same thing when the timeline hits a certain point rather than having to click the element containing the number to start the javascript?


#7

Mind if I jump in here? :smiley:

Demo Hype Project: TriggerScript_JHSv1.hype.zip (11.7 KB)


Overview
The target element (rectangle with ID of “box”) changes color at the 2 second mark triggered by a “Timeline Action” which runs the function “changeBoxColor”:

var targetElement = hypeDocument.getElementById("box");
targetElement.style.backgroundColor = "green";

Details
Please reference Fig.1 below for the following steps…

1) Move the Timeline playhead to the time You wish to trigger the script.
2) Click the diamond symbol with the “+” inside it (magenta rectangle), on the same row as"Timeline Actions".
3) A diamond symbol displays at the playhead (magenta circle) which shows the “Timeline Action” dialog.
4) Select “Run JavaScript” from the “Action” drop down menu in the dialog.
5) Select the function You wish to trigger.

Fig.1
Timeline%20trigger

For more info on using “Timeline Actions” please see the Documentation.


(Hans-Gerd Claßen) #8

He’s back :slight_smile:


(Chris Hardy) #9

hi Jim,

That’s great thanks. However, I’m pulling data from a database which will determine the colour of the box displayed. So if the number from the database is 1, then a green box is displayed, if its 2 then a red box is displayed. The idea behind using the timeline is to delay the script running to allow the data to be pulled from the database. Any idea?

Just in case anyone is wondering what I’m creating, I’m building web based apps for people with learning / intellectual disabilities to allow them or their carers to monitor various health parameters so they can get advice from a nurse on what to do next :slight_smile:


(Hans-Gerd Claßen) #10

@JimScott puh Jim … i was hardly thinking of doing your job in this forum … but now it’s all solved :wink: you’re back! … you’re welcome back!:clap:


#11

ThankYou Hans!

I was just released from the Institute a few days ago - they tell me I’m doing really well now. :stuck_out_tongue_winking_eye:


#12

I am not sure I have the full scope of your need.

So a quick mock-up of how I am understanding your set-up…

  1. The user presses a button.
  2. A slight delay is needed to retrieve the number. (e.g. half a second?)
  3. Once the number is retrieved the script should be executed.

Is this an accurate assessment? If not what needs to be adjusted (or added to) in these steps?

If the above speculation is accurate I am thinking JavaScript - no timeline - might be more utilitarian.

Something like a “setInterval”.


(Chris Hardy) #13

Hi again,

I’m hoping to pull the data from the database upon the scene loading but was concerned that there might be a slight delay hence using the timeline. Although if there is a javascript solution where it holds initiating before the data is received then that would be an all round better and more reliable option.

I’m hoping to pull 10 sets of data consisting of only single numbers from a database so its not that much information and therefore it shouldn’t take too long to receive. However a delay / hold would help just incase theres an issue with receiving the data.

Thanks for all your help with this,

Chris


#14

Hi Chris!

First, before we dive in here, I want to make clear that the total tonnage of what I do not know about database communications would sink a battleship.

So we pick up our story at the point where the data sets are placed into variables, arrays, whatever.

TriggerScript_JHSv2.hype.zip (12.4 KB)

Overview
“On Scene Load” the function “dataCheck” is triggered (please see code at bottom). Here the variable “whatNum” is set to zero. (“whatNum” is used as the data download stand-in.) This function also runs a “setInterval” routine which checks every 250 milliseconds to see if the “whatNum” variable is set to “3”.

Two seconds in on the “Main Timeline” a Timeline Action triggers the function “dataDownload” that changes the variable “whatNum” to “3”. The sole purpose of the “dataDownload” function is to simulate the (surprise!) downloading of the data sets, here represented by one number: “3”. The download should take much less than 2 seconds I would imagine; this length is used to make it easier to see the trigger occurring in this demo. (You would not use this Timeline Action in your actual set-up of course.)

When the “whatNum” variable is set to “3” it is detected by the “setInterval” part of the “dataCheck” function and the number “3” is placed in the target element (id “box”).

Note: The checking for “3” is arbitrary. You could also check to see if “whatNum” is not = 0… (whatNum != 0) or any other value touchstone that You choose.


dataCheck()

window.whatNum = 0; // a simple data sets stand-in
targetElement = hypeDocument.getElementById("box");
	
var dataReceived = setInterval(data, 250);
// "data" refers to the function below, "250" = milliseconds
	
function data() {
    // run your actual code here the code below is an example
	if (whatNum == 3){
	targetElement.innerHTML = whatNum;
	clearInterval(dataReceived); // keep this line - important!
	}
}

Note that “250” milliseconds is a number I arbitrarily picked for this demo - it could be 500 milliseconds or 75 milliseconds, etc.


(Chris Hardy) #15

Hi Jim,

Thanks for this! I’ll have a play around with it this week to see if I can get the idea working with pulling data from a database :+1:

Thanks again for all your help :blush:


(Chris Hardy) #16

Hi Jim,

Just wanted to let you know that this worked great and I’ve altered the code a little bit so that the box changes colour depending on the number:

window.whatNum = 0;

var dataReceived = setInterval(data, 250);

function data() {
	if (whatNum == 3){
	targetElement = hypeDocument.getElementById("box");
	targetElement.style.backgroundColor = "red";
	} else if (whatNum == 2){
	targetElement = hypeDocument.getElementById("box2");
targetElement.style.backgroundColor = "blue";

	clearInterval(dataReceived);
	}
}

Thanks again for your help,

Chris