I recently developed a basic web watch application using Tizen Studio specifically designed for Gear watches and similar devices.
Within this web watch, I implemented 6 conditions that are intended to change the background of the watch based on the current time of day. These conditions represent different phases of the day such as early morning, morning, afternoon, early evening, evening, and night.
These conditions are integrated with the digital clock feature of the watch. This setup was necessary for the functionality to work properly. However, I have encountered an issue.
The night condition seems to be malfunctioning, and I'm unable to pinpoint the cause since it follows the same logic as the other daytime conditions. Furthermore, transitioning back to the 'day mode' after nighttime does not seem to be functioning correctly either. Additionally, after a few days, the watch appears to enter into a loop.
JS
window.onload = function() {
// TODO:: Initialization tasks
// variables for image transitions
// add event listener for tizenhwkey
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
if(h === 0){
h = 24;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
// Daytime transitions
if('10:00:05' <= time && time < '16:00:00')
{
document.getElementById("day1").style.opacity = "0";
document.getElementById("day2").style.opacity = "1";
}
if('16:00:05' <= time && time < '20:00:00')
{
document.getElementById("day2").style.opacity = "0";
document.getElementById("day3").style.opacity = "1";
}
if('20:00:05' <= time && time < '23:00:00')
{
document.getElementById("day3").style.opacity = "0";
document.getElementById("night1").style.opacity = "1";
}
if('23:00:05' <= time && time < '04:00:00')
{
document.getElementById("night1").style.opacity = "0";
document.getElementById("night2").style.opacity = "1";
}
if('04:00:05' <= time && time < '06:00:00')
{
document.getElementById("night2").style.opacity = "0";
document.getElementById("night3").style.opacity = "1";
}
if('06:00:05' <= time && time < '10:00:00')
{
document.getElementById("nigth3").style.opacity = "0";
document.getElementById("day1").style.opacity = "1";
}
setTimeout(showTime, 1000);
}
showTime();
function showdate(){
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
}
showdate();
};
HTML
.clock {
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 30px;
/* font-family: Orbitron; */
letter-spacing: 7px;
}
img {
position: fixed;
top: 0%;
left: 0%;
height: 360px;
width: 360px;
transition: all 5s ease;
}
#components-main {
position: absolute;
width: 100%;
height: 100%;
}
.showsPM {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 28px;
/* font-family: Orbitron; */
letter-spacing: 7px;
}
.showsDate {
position: absolute;
top: 55%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #FFFFFF;
font-size: 22px;
/* font-family: Orbitron; */
letter-spacing: 5px;
}
HTML
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<img id="day1" src="/images/day1.png" style="opacity: 0"/>
<img id="day2" src="/images/day2.png" style="opacity: 1"/>
<img id="day3" src="/images/day3.png" style="opacity: 0"/>
<img id="night1" src="/images/night1.png" style="opacity: 0"/>
<img id="night2" src="/images/night2.png" style="opacity: 0"/>
<img id="night3" src="/images/night3.png" style="opacity: 0"/>
<!-- <div id="backgroundNight" style="opacity: 0;"></div>-->
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<div id="date" class="showsDate"></div>
</div>
<script src="js/main.js"></script>
Are there any alternative approaches I could take to achieve the desired functionality? Any suggestions or observations regarding my code?