Homey.ink on a tablet/desktop

@PetervdK

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 :slight_smile:

.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

4 Likes