So i added a simple smalll clock to homey dash, for those who are interested see code below.
First i added this code to /app/index.html, you can place it anywhere you want but i placed it in the ‘detail’ pane <div id="details">
<div id="timeclock" class="clock" ></div>
Also add this <script type="text/javascript" src="./js/time.js"></script>
in the <head>
section.
And finally for the index.html add onload=“showTime()” so it should look like this <body id="body" onload="showTime()">
Creat a file time.js in app/js folder and paste the following code in it:
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
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("timeclock").innerText = time;
document.getElementById("timeclock").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
And last but not least the css code, should be placed in the css file you use, originally /app/css/homeydash.css and, ofcourse, you can edit it to fit your own needs
.clock {
display: inline-block;
font-size: 30px;
font-weight: 600;
margin-left: 80px;
color: white;
}
Hope it is clear, if not please let me know and i’ll do my best to help you.
this is how it looks on my dash