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();