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
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
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.
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?
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
For more info on using "Timeline Actions" please see the Documentation.
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
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.
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.
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.
you’re back! … you’re welcome back!
