diff --git a/mobile.html b/mobile.html
index 37b4bcb..688deae 100644
--- a/mobile.html
+++ b/mobile.html
@@ -10,6 +10,15 @@ font-weight:bold;
line-height:140%;
}
+@keyframes flash {
+ 0% { background-color: yellow; }
+ 100% { background-color: transparent; }
+}
+
+.flash-bg {
+ animation: flash 0.5s ease-in-out;
+}
+
#status {
background-color: #FFFFFF;
border-radius: 15px;
@@ -94,7 +103,12 @@ line-height:140%;
}
if (loopObj.outTemp_C) {
console.log("LOOP OAT " + loopObj.outTemp_C);
- document.getElementById("OAT").innerHTML = Number(loopObj.outTemp_C).toFixed(0) + " °C";
+ myDiv = document.getElementById("OAT");
+ newHtml = Number(loopObj.outTemp_C).toFixed(0) + " °C";
+ if (newHtml != myDiv.innerHTML) {
+ myDiv.innerHTML = newHtml;
+ flashBackground(myDiv);
+ }
}
}
}
@@ -123,14 +137,32 @@ line-height:140%;
}
function updateWind() {
- document.getElementById("windSpeed").innerHTML = zeroFilledDir + "/" + instantWindSpeed;
+ myDiv = document.getElementById("windSpeed");
+ newHtml = zeroFilledDir + "/" + instantWindSpeed;
+ if (newHtml != myDiv.innerHTML) {
+ myDiv.innerHTML = newHtml;
+ flashBackground(myDiv);
+ }
}
function updateAvgWind() {
- updateWindDirection(avgWindDir);
- document.getElementById("avgWindSpeed").innerHTML = avgWindDir + "/" + avgWindSpeed;
- document.getElementById("avgWindGust").innerHTML = avgWindGustDir + "/" + avgWindGustSpeed;
+ myDiv = document.getElementById("avgWindSpeed");
+ newHtml = avgWindDir + "/" + avgWindSpeed;
+ if (newHtml != myDiv.innerHTML) {
+ myDiv.innerHTML = newHtml;
+ flashBackground(myDiv);
+ updateWindDirection(avgWindDir);
+ }
+
+ myDiv = document.getElementById("avgWindGust");
+ newHtml = avgWindGustDir + "/" + avgWindGustSpeed;
+ if (newHtml != myDiv.innerHTML) {
+ myDiv.innerHTML = newHtml;
+ flashBackground(myDiv);
+ }
+
windAvgValid = 1;
+
}
function invalidateDisplay() {
@@ -314,6 +346,11 @@ line-height:140%;
drawCompass();
}
+ function flashBackground(element) {
+ element.classList.add("flash-bg");
+ setTimeout(() => element.classList.remove("flash-bg"), 500);
+ }
+
function statusLoop() {
var dt = new Date();