-4
\$\begingroup\$

I really hate looking up to the top right of the screen to look at the time on OS X's clock widget; I'd much rather keep my eyes at least somewhere near my workspace to check the time. I also hate other people using my clock to check the time as they walk by -- after all, it's called a personal computer, right? But we've got a great community here that can surely help me out, right? So here's my really really so much very hard challenge for you guys that would help me so much: write me a clock app. It can be analog or digital or whatever other amazing forms you can think of. Minimum requirements:

  • It should be very visible
  • It should display the time in a format that not many people would comprehend (the less people, the better)

This is a popularity contest, so fulfill these requirements creatively, and go above and beyond! Ready... Set... Go!

\$\endgroup\$
3
  • 5
    \$\begingroup\$ This question appears to be off-topic because it appears to be a clock design question, not a programming question. \$\endgroup\$ Jun 21, 2014 at 8:28
  • \$\begingroup\$ How is this a puzzle or code golf? \$\endgroup\$
    – DBedrenko
    Jun 21, 2014 at 9:23
  • 2
    \$\begingroup\$ Gah. This question is seriously off-topic for this site, and I originally wanted to delete it. But some of the answers were pretty nice, and I don't want to lose them, either. :-( \$\endgroup\$ Jun 21, 2014 at 10:46

5 Answers 5

8
\$\begingroup\$

Bash

#!/bin/bash

T="The time is now:"

case $1 in
--12)    F=82;M=0;S=%r;;
--24)    F=120;M=100;S=%R;;
--ipv6)  F=112;M=0;S=%H::%M:%S;T="Started download from:";;
--posix) F=82;M=0;S=%s;;
esac

watch 'notify-send "'"$T"'" "<div style=\"font-size:'"$F"'px;margin-left:'"$M"'px;\">
    $(date +'"$S"')</div>"'

Displays the current time as a desktop notification, updating every two seconds.

Usage

whattimeisit FORMAT

--12     May be understood by Australians, Chinese and North Americans.
--24     May be understood by everyone else.
--ipv6   May be understood by illiterates.
--posix  May be understood by nerds.

Example output

\$\endgroup\$
5
  • \$\begingroup\$ What OS is that? Looks KDE-based (given Kate & Kile) \$\endgroup\$
    – Kyle Kanos
    Jun 21, 2014 at 1:51
  • \$\begingroup\$ @KyleKanos: Fedora 20 Scientific KDE, with a lot of modifications. \$\endgroup\$
    – Dennis
    Jun 21, 2014 at 1:54
  • \$\begingroup\$ That looks pretty nice. What kind of mods are you talking about? \$\endgroup\$
    – Kyle Kanos
    Jun 21, 2014 at 2:03
  • \$\begingroup\$ @KyleKanos: Nothing fancy, just a lot of them. Custom theme (mainly Oxygen, but with Air widgets), Oxygen Blue cursor theme, reduced the task bar to notification area and clock (I use Present Windows for navigation), got rid of the hot corners (replaced by extra mouse button/touchpad edges), Application Launcher (QML) widget on the desktop, Ubuntu font, improved font rendering, Elarun wallpaper, Title bar button menu style, borderless windows, etc. \$\endgroup\$
    – Dennis
    Jun 21, 2014 at 2:21
  • \$\begingroup\$ Okay. I was just wondering if you had made mods to the kernel or if you meant prettyifying it (which it does like very nice). \$\endgroup\$
    – Kyle Kanos
    Jun 21, 2014 at 2:23
6
\$\begingroup\$

Javascript

This encodes the hours, minutes, and seconds, as hex, and sets the background color of the page to the concatenation of the string. For example, for the time 9:18:13 PM, the background color would be set to #15120D. It is right on a webpage for you, all you have to do is drag a little bit of the window to a different place on the screen or flip tabs. Here is a JSFiddle demo.

To tell the time, you can use your handy color-picking and base changing skills.

function hex(number) {
    return number.toString(16).length == 1 ? "0" + number.toString(16): number.toString(16);
}
var display = function() {
    
    var now = new Date();
    var base = "00"
    var hours = hex(now.getHours());   
    var minutes = hex(now.getMinutes());
    var seconds = hex(now.getSeconds());
    document.body.style.background = "#" + hours + minutes + seconds;
    console.log("#" + hours + minutes + seconds)
}

setInterval(display, 1000);
\$\endgroup\$
1
  • 2
    \$\begingroup\$ Finally! An application for my accurate hex color intuition \$\endgroup\$
    – wrongu
    Jun 21, 2014 at 1:51
1
\$\begingroup\$

HTML + CSS + JavaScript

I made a binary clock, pretty self-explanatory. I have a binary watch and even those who know what binary numbers are may have a hard time telling what time it is sometimes. Like scrblnrd3 said in his answer, all you have to do is position your browser window properly to make it visible. Here's a fiddle of clock in action.

P.S.: The hour part has 5 positions in order to support 24 hour format.

JavaScript

function pad(number, digits) {
    return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}

var updateClock = function() {
    var date = new Date();

    var childDivs = [
        document.getElementsByClassName('hours')[0].children,
        document.getElementsByClassName('minutes')[0].children,
        document.getElementsByClassName('seconds')[0].children
    ];

    var binaryTime = [
        pad(date.getHours().toString(2), 5),   
        pad(date.getMinutes().toString(2), 6),
        pad(date.getSeconds().toString(2), 6)        
    ];    

    for(i=0; i < childDivs.length; i++) { 
        for(j=0; j < childDivs[i].length; j++) {
            childDivs[i][j].className = binaryTime[i][j] == '1' ? 'highlight' : '';
        }
     }    
}

setInterval(updateClock, 1000);

CSS

.wrapper div {
    width: 30px;
    height: 30px;
    border-radius: 50px; 
    border: 1px solid black;
    display: inline-block;
    margin: auto;
}

.highlight {
    background-color: green;   
}

HTML

<div class="wrapper hours">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="wrapper minutes">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="wrapper seconds">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
\$\endgroup\$
1
\$\begingroup\$

C

I have been finding it annoying, that though computers can easily keep time with an accuracy of a few ms by using NTP, some software displaying time haven't bothered with updating it at the right time. For example if you display time with hours and minutes by simply displaying the time and then sleep for 60 seconds in a loop, the displayed clock will on average be 30 seconds behind.

Here is my suggestion on how to implement a highly accurate clock (which displays time as seconds since midnight GMT in octal).

#include <stdio.h>
#include <time.h>
#include <sys/time.h>

int main()
{
  struct timeval tv;
  struct timespec ts;
  while (1) {
    do {
      gettimeofday(&tv,NULL);
    } while ((ts.tv_nsec=((999999-tv.tv_usec)*1000)-1)<1);
    printf("\x0d%lo    ", tv.tv_sec%86400);
    fflush(stdout);
    ts.tv_sec=0;
    nanosleep(&ts,NULL);
  }
}

Replace the printf with s=ctime(&tv.tv_sec); c=strchr(s,'\n'); if (c) *c=0; printf("\x0d%s ",s); if you want human readable output.

\$\endgroup\$
0
\$\begingroup\$

Javascript

This is an ASCII clock with A=0.

<body onload="tick()">
    <p id="p">0</p>
    <script>        
        function tick() {
            console.log("tick");
            var a = "A";
            var i = a.charCodeAt(0);
            var dt = new Date();
            var h = String.fromCharCode(i+dt.getHours());
            var m = String.fromCharCode(i+dt.getMinutes());
            var s = String.fromCharCode(i+dt.getSeconds());
            var t = h+":"+m+":"+s;
            document.getElementById("p").innerHTML = t;
            setTimeout('tick()',1000);
        }
    </script>
</body>
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.