I would appreciate help in configuring @hotnipi "Yet another gauge aka 'Plums'" gauge, to dynamically change the value text color, linked to the value. The gauge is displaying wind gust speed and would like the value color to reflect the Beaufort scale.
The label, units, min, max, and segments colors have been customized but otherwise the code is unchanged from this post
Results of online search/research;
The text is a svg element and 'fill' is used to set/override the color.
Fill can be set as a variable from CSS using something like var(--svg-fill-color).
The color changing function cannot be in the svg section, as svg is not a programming language.
I believe the color changing function would be placed in the computed section of the script.
This is the end of my ability, I don't even know if i am on the right track.
What I have tried;
Set an id in the svg element.
Referenced the id from CSS.
Set the color (successfully) as a variable from CSS.
Can this goal be achieved? all of the examples I have found are static not dynamic.
How is the variable set from the function?
How is the function called from the html/svg code?
Is there a better way to accomplish this goal?
@TotallyInformation, thanks for the info. I did find online that svg.img require different method of changing the color. The svg in hotNipi is inline, therefor a correctly crafted CSS snipit will change the color. I have done this and verified it works. @hotNipi I got the CSS variable to work, thanks for your tip. I created this function to equate speed values with colors:
speedcolors:function(){
const s = this.value;
if (s <= 1){
return "#FFFFFF";
}
if (s > 1 && s <= 3){
return "#AEF1F9";
}
if (s > 3 && s <= 7){
return "#96F7DC";
}
if (s > 7 && s <= 12){
return "#96F7B4";
}
if (s > 12 && s <= 18){
return "#6FF46F";
}
if (s > 18 && s <= 24){
return "#73ED12";
}
if (s > 24 && s <= 31){
return "#A4ED12";
}
if (s > 31 && s <= 38){
return "#DAED12";
}
if (s > 38 && s <= 46){
return "#EDC212";
}
if (s > 46 && s <= 54){
return "#ED8F12";
}
if (s > 54 && s <= 63){
return "#ED6312";
}
if (s > 63 && s <= 72){
return "#ED2912";
}
if (s > 72 && s <= 100){
return "#D5102D";
}
if (s > 100){
return "#FF0068";
}
}
How do i change the CSS variable with this function, what am I missing?
Is that what the element.style.setProperty() is for?
If so, does it go at the end of the function?
This is my first attempt at javascript, excuse the beginner questions.
Also feel free to point out errors or omissions.
