That element is rain (so far) 'today', and your 'rain rate' is a small entry that wouldn't really stand out even with its background colour changed.
The main problem is that we shouldn't mess with the actual ajax grab / format routine even though it is the ideal place to make addittions / changes. This is because it is a large 'common' file and you would have reapply your mods whenever there was an update. The script uses functions to
format the output and unfortunately for 'tweakers' it has been done properly. i.e. no variables are available outside of the functions, not even the data array (Hint to those read
)
BTW your site has a lot of broken / duplicated tags in the first few hundred lines, it's surprising the layout isn't badly broken.
Anyway, let's boldly go etc. etc. ....
It looks like you have enough space under your rain graphic / large day rain advisory to make another row with what you want. So here's the beteljuice thoughts ...
<tr>
<td valign="middle" style="text-align: center;" >
<img src="./ajax-images/raindrop.gif" alt="Current Rain" /> </td>
<td valign="middle" style="text-align: center; border: 1px solid gray;" >
Rain:<br/>
<span style="font-size: 18px" class="ajax" id="ajaxrain">
0.0 mm</span>
</td>
</tr>
<!-- additional - beteljuice NEW rain rate / warning -->
<tr>
<td valign="middle" style="text-align: center;" >
<img id="rain_alert" src="rain_white.gif" alt="Rain Warning" title="Rain Warning" />
</td>
<td id="rrateContainer" valign="middle" style="text-align: center; border: 1px solid gray;" >
Rain Rate;<br/>
<span style="font-size: 18px;" id="rain_rate2">0.0 mm</span>
</td>
</tr>
<!-- END beteljuice NEW rain rate / warning -->
.... then just before the closing <body> tag ....
<script>
// self executing function here (effectively body onload)
(function() {
// the DOM should be available here
alunsina = document.getElementById ("rain_alert"); // NEW rain alert image
hiraya = document.getElementById ("rain_rate2"); // NEW duplicate rain rate advisory
dalisay = document.getElementById ("ajaxrainratehr"); // existing 'in-use' element
melissa = document.getElementById ("rrateContainer"); // container which may 'flash'
flashCount = 0;
warn = thebg = "white";
mutateObserver = new MutationObserver(function() { // rain rate has been updated by ajax
dama = document.getElementById ("ajaxrainratehr").innerHTML; // returns the formated TEXT string (we'll be reusing this)
var chunks = dama.split(" "); // chunks[0] => value as TEXT, chunks[1] => uom (mm, in)
var check = chunks[0] *1;
if(chunks[1] == "mm") {
if(check < 7.5) warn = "white";
if(check >= 7.5 && check < 15) warn = "yellow";
if(check >= 15 && check <= 30) warn = "orange";
if(check > 30) warn = "red";
} else { // uom must be in.
if(check < 0.295) warn = "white";
if(check >= 0.295 && check < 0.590) warn = "yellow";
if(check >= 0.590 && check <= 1.180) warn = "orange";
if(check > 1.181) warn = "red";
}
// let's update the new custom advisories
alunsina.src = "rain_"+warn+".gif";
if(warn == "yellow") {
rainColour = "black";
} else {
rainColour = "white";
}
melissa.style.color = rainColour;
hiraya.innerHTML = dama;
thebg = warn;
if(thebg == "white") thebg = "black"; // optional - set background colour of new rainrate
melissa.style.background = thebg; // optional - set background colour of new rainrate
// We be done ;-)
});
mutateObserver.observe(dalisay, { // configure observer
childList: true, // capture child add/remove on target element.
characterData: true, // capture text changes on target element
subtree: true, // capture childs changes too
characterDataOldValue: true // keep prev value
});
var bertie = setInterval(function() { // optional background 'flasher' - free running timer - red 500ms, orange 1000ms
if(flashCount == 0 && (thebg == "orange" || thebg == "red")) {
melissa.style.background = thebg;
}
if(flashCount == 1 && thebg == "red") {
melissa.style.background = "black";
}
if(flashCount == 2) {
if(thebg == "red") melissa.style.background = "red";
if(thebg == "orange") melissa.style.background = "black";
}
if(flashCount == 3 && thebg == "red") melissa.style.background = "black";
flashCount++;
if(flashCount == 4) flashCount = 0;
}, 500);
})();
</script>
There are advisory graphics (which of course you can change), there is a duplicate large rainrate advisory which can have a coloured background (optional), the coloured background can be static (no warning / yellow), slow flash (orange), fast flash (red) [optional]
The code has
NOT been tested but may contain silly errors / typos, as always with these things
MAKE AND MODIFY A DUPLICATE PAGE FOR TESTING PURPOSES !! [ You are not allowed to view attachments ] [ You are not allowed to view attachments ] [ You are not allowed to view attachments ] [ You are not allowed to view attachments ]
The reason it's
untested is because I don't have a weather statiion and can't run any of the softwares !
Edit: Two typos and one logic hole fixed
Very basic test bed - a little unpolished in places, but you or others can play with that
