Results 1 to 3 of 3

Thread: DIY Water Temp Icon's Question

  1. #1
    Tuner in Training
    Join Date
    Jan 2022
    Posts
    13

    DIY Water Temp Icon's Question

    RaceRender has the "E Image" category, which contains "Style Icon - Temp". I tried to play with it and found that it can be customized by choosing "Image Mode" as "Data: Proportional" or "Data: Greater or Equal", to change the icon color (by selecting "Output Type" as "Color Hue").
    So far so good, so that I can set the icon to turn red when temperature ("Water Temp ℃" in "Input Field")is greater than 65℃, or make it change its color as gradient in a certain temperature interval.
    However, it cannot satisfy my requirement. My requirement is more complicated:

    1. When 45 ≤ Water Temp ≤ 65, the icon is white.
    2. When Water Temp < 45, the icon is blue.
    3. When Water Temp > 65, the icon is red.
    4. (Optional but optimal) When 54 ≤ Water Temp ≤ 55, the icon is green

    So the "E Image" is obviously not clever enough to fulfill the requirement. Maybe an "Enhanced Display Object" can do this. However, there is no somthing like "Style Icon - Temp" under "Enhanced Display Object". I want to know that how to DIY a "Enhanced Display Object" from scratch, or could anyone help me create a "Style Icon - Temp" that can change its color when it falls in the four above temperature intervals specifically?

    Thank you in advance.

  2. #2
    Advanced Tuner
    Join Date
    Apr 2018
    Posts
    296
    Quote Originally Posted by le8gn View Post
    RaceRender has the "E Image" category, which contains "Style Icon - Temp". I tried to play with it and found that it can be customized by choosing "Image Mode" as "Data: Proportional" or "Data: Greater or Equal", to change the icon color (by selecting "Output Type" as "Color Hue").
    So far so good, so that I can set the icon to turn red when temperature ("Water Temp ℃" in "Input Field")is greater than 65℃, or make it change its color as gradient in a certain temperature interval.
    However, it cannot satisfy my requirement. My requirement is more complicated:

    1. When 45 ≤ Water Temp ≤ 65, the icon is white.
    2. When Water Temp < 45, the icon is blue.
    3. When Water Temp > 65, the icon is red.
    4. (Optional but optimal) When 54 ≤ Water Temp ≤ 55, the icon is green

    So the "E Image" is obviously not clever enough to fulfill the requirement. Maybe an "Enhanced Display Object" can do this. However, there is no somthing like "Style Icon - Temp" under "Enhanced Display Object". I want to know that how to DIY a "Enhanced Display Object" from scratch, or could anyone help me create a "Style Icon - Temp" that can change its color when it falls in the four above temperature intervals specifically?

    Thank you in advance.
    With an Enhanced Display Object, you'd need to draw the lines that make up the icon which is doable but would probably be pretty time consuming.

    A single E Image definitely can't do this, but you could get about 95% of the way there with multiple Display Objects stacked on top of each other at the exact same position with the exact same Width/Height all with Output Type of Transparency:

    1. Red Image in Greater or Equal otherwise 100; 65 -> 0
    2. Blue Image in Less or Equal 45 -> 0; otherwise 100
    3. White Image in Greater or Equal otherwise 100; 55 -> 0
    4. White Image in Less or Equal 54 -> 0; otherwise 100
    5. Green Image in Simple Image mode


    At input less than 45, you'll get Blue on top of White on top of Green (i.e. only see the Blue). Between 45 and 54, you'll get White on top of Green (i.e. only see the White). Between 54 and 55, only the Green will show. Between 55 and 65, you'll get White on top of Green, and above 65, you'll get Red on top of White on top of Green.

    This seemed to work decently well, but does give some slight outlines with the green showing through on the white images. Not sure if that would be a deal breaker for you or if the images will be small enough that it won't be noticeable. You can also select all of the Display Objects and Group them to make it easier to move all of them at once.

    If that's not good enough, then we can look into drawing all of the lines for the icon using an Enhanced Display Object to have very fine control over the colors being used.

  3. #3
    Tuner in Training
    Join Date
    Jan 2022
    Posts
    13
    Quote Originally Posted by HoboBob View Post
    With an Enhanced Display Object, you'd need to draw the lines that make up the icon which is doable but would probably be pretty time consuming.

    A single E Image definitely can't do this, but you could get about 95% of the way there with multiple Display Objects stacked on top of each other at the exact same position with the exact same Width/Height all with Output Type of Transparency:

    1. Red Image in Greater or Equal otherwise 100; 65 -> 0
    2. Blue Image in Less or Equal 45 -> 0; otherwise 100
    3. White Image in Greater or Equal otherwise 100; 55 -> 0
    4. White Image in Less or Equal 54 -> 0; otherwise 100
    5. Green Image in Simple Image mode


    At input less than 45, you'll get Blue on top of White on top of Green (i.e. only see the Blue). Between 45 and 54, you'll get White on top of Green (i.e. only see the White). Between 54 and 55, only the Green will show. Between 55 and 65, you'll get White on top of Green, and above 65, you'll get Red on top of White on top of Green.

    This seemed to work decently well, but does give some slight outlines with the green showing through on the white images. Not sure if that would be a deal breaker for you or if the images will be small enough that it won't be noticeable. You can also select all of the Display Objects and Group them to make it easier to move all of them at once.

    If that's not good enough, then we can look into drawing all of the lines for the icon using an Enhanced Display Object to have very fine control over the colors being used.

    You are such a genius! This works perfectly!
    The green outlines you mentioned did not affect the rendered output video. They only showed up during preview stage. Icons cover each other neatly, since they are the same in size and position. Thank you so much!
    BTW I'm posting my template here if anyone is interested: Data - X30_Water_Temp.rrt
    I design this range because I'm using IAME X30 for my kart. According to its spec sheet, its working temperature ranges between 45 ℃ and 65 ℃. So I set it blue ≤ 44.9999 ℃, and red ≥ 65.0001 ℃. Its optimal working temperature is 54.5 ℃, so I set it white ≤ 54.3 ℃ and ≥ 54.7 ℃, to keep it green otherwise.
    Of course, you all can change the thresholds to fit your own engine.