Raspberry Pi Digital Clock

20121201_193429

I recommend using a Linux operating system equipped computer (i.e. Ubuntu) with this tutorial for further learning experience, but Windows would be just fine as well.

As my Fiancée had her clock broken, I decided to start this project where I made a digital clock using a Raspberry Pi connected to a  3.5 Inch TFT LCD Monitor for Car / Automobile. The Raspberry Pi had a SD Card containing Debian Raspbian “wheezy” operating system (instructions of installing such OS on a SD card will come later in this tutorial) .

The idea here is to start an HTML page with JavaScript at full screen upon the running of Raspbian “wheezy” (that have been dumped on an SD card using dd on a Raspberry Pi connected to an external monitor. Such tutorial can be used for a monitor that can be connected to using either a composite video output yellow jack or an HDMI cable. In addition to the HTML with JavaScript file that will display day, date & time on the monitor, modification was done to a file & programs were installed to have this clock running smoothly the way we look forward to see in a digital clock.

Such file that is to be modified here is the /etc/xdg/lxsession/LXDE/autostart file that can be modified using your favourite text editor (like nano or GEdit) to add a full screen kiosk-like browser launch of Digital Clock at start-up by Debian Wheezy’s default lightweight browser (Midori), and the installation of Unclutter that will hide your mouse from the screen after a certain period of time that can be changed (it comes with a default one-second-then-hide for your cursor).

 OK, long story short, this is what you will need to get started:

HARDWARE

  • Raspberry Pi Model A or B it really does not matter, especially with our low hardware specification requirements project, maybe the only difference would be the time for the Raspbian Wheezy image to load & start your Digital Clock in Midori.
  • A Micro USB charger of 5V and 0.7 ~ 1.2A (I used my Samsung Galaxy S II charger that outputs 5V 1A) for the Raspberry Pi.
  • A 2 GB SD card (as you would not need more space, anything that can handle Raspbian Wheezy would be enough. I will use a SD card I already have).
  • A monitor with either composite or HDMI input (I got this 3.5 Inch TFT LCD Monitor for Car / Automobile from Amazon for $17.99++).
  • A 12V 0.5A power adapter for the LCD TFT Monitor (previous monitor does not come with a wall socket power adapter because it is made to be placed inside a car and have car power supplied to such monitor. I used a Western Digital Hard Disk power adapter that supplies 12V 0.25A and worked just fine with the monitor).
  • A composite cable (to be connected to the TFT LCR Monitor).

SOFTWARE

OK, let’s get started!

  • Download the Debian Raspbian “wheezy” image from RaspberryPi.org/Downloads and extract the .img file inside the downloaded ZIP file.
  • Have the image written on your SD Card using WinDD (if you are on a Windows) or dd (if you are on a Linux). Of course I am assuming that you already have an SD Card reader attached or placed to your computer, otherwise you will not be able to continue with this tutorial :-) (worst case you can buy one from any computer store around!). I will show you how you would do that using dd. Be noted that the process of writing an IMG file to any storage would mean the loss of all information on that destination permanently. USE IT WITH UTMOST CAUTION, make sure of your written commands! Make a backup of your SD Card if it contains information you do not want to lose. You’ll also need root privileges during that process. 
  • Make sure you know what the SD Card have been recognized by Linux insertion using the fdisk -l command with root privileges

sudo fdisk -l

  • fdisk is a Linux disk format utility, but with the  -l option it lists all the attached storage devices & partitions. After entering the sudo password (the password of your current account, assuming your current account have administrative privileges), hit enter & look for a line with storage space identical to the SD Card you inserted. You should get a list similar to this one (I used a 4GB SD card in this example).

Disk /dev/sda: 500.1 GB, 500107862016 bytes
255 heads, 63 sectors/track, 60801 cylinders, total 976773168 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk identifier: 0x3f938c99

Device Boot      Start         End      Blocks   Id  System
/dev/sda1   *        2048      819199      408576   27  Hidden NTFS WinRE
/dev/sda2          819200   488070887   243625844    7  HPFS/NTFS/exFAT
/dev/sda3       488073216   550789119    31357952    7  HPFS/NTFS/exFAT
/dev/sda4       550791166   976771071   212989953    f  W95 Ext’d (LBA)
/dev/sda5       550791168   874371071   161789952    7  HPFS/NTFS/exFAT
/dev/sda6       874373120   959193432    42410156+  83  Linux
/dev/sda7       959195136   976771071     8787968   82  Linux swap / Solaris

Disk /dev/sdb: 3965 MB, 3965190144 bytes
122 heads, 62 sectors/track, 1023 cylinders, total 7744512 sectors
Units = sectors of 1 * 512 = 512 bytes
Sector size (logical/physical): 512 bytes / 512 bytes
I/O size (minimum/optimal): 512 bytes / 512 bytes
Disk identifier: 0x000dbfc6

Device Boot      Start         End      Blocks   Id  System
/dev/sdb1            8192      122879       57344    c  W95 FAT32 (LBA)
/dev/sdb2          122880     7744511     3810816   83  Linux

It obvious that /dev/sdb is the one that has 4GB of storage space, therefore it is our target media device.

  • Write the image we just downloaded & extracted to the SD Card we inserted. We’ll need administrative privileges here too.

sudo dd if=/home/username/download_location/2012-10-28-wheezy-raspbian.img of=/dev/sdb

Alright, let’s breakdown the last command line: sudo was explained moments ago (dd cannot be issued without administrative privileges), dd stands for Disk Dump, a command to store a certain image file / disk as an image in a file /  disk EXACTLY the same as the destination file / disk. if is the input file, followed by the destination of the input file (Debian Wheezy image in this case. Note that at the time of writing this tutorial, the “2012-10-28-wheezy-raspbian.img” was the latest release). of is the output file, in which in this case a device, the 4GB SD card that all info on it will be wiped out & have the Debian Wheezy image written on such card instead, located on /dev/sdb.

This process will take time, so be patient :-) you might think your PC got stuck or something went wrong, but worry not! All is going well, this normally takes time ;-) go grab a cup of tea, coffee, hot hibiscus and by the time you’re done drinking your hot drink it will be done :-D

  • You should get something like that

3788800+0 records in
3788800+0 records out
1939865600 bytes (1.9 GB) copied, 698.19 s, 2.8 MB/s

OK, congratulations! you have installed Debian Wheezy on your SD Card! Now you are ready to fire up your SD Card in your Raspberry Pi device, but we shall place the Digital Clock program within our Raspberry Pi first.

  • Run your favourite text editor / HTML IDE with administrative privileges. I used Bluefish

sudo bluefish

Bluefish editor will appear. The script here for Digital Clock was created by JavaScriptKit.com. The link to the Clock tutorial is located here.

//LCD Clock script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

  • We start illustrating the file by writing an ordinary HTML file structure to the blank document we made in Bluefish.

<html>

<head>

 

</head>

 

<body>

 

 

 

 

</body>

</html>

  • Insert the following style sheet to the <HEAD> section of your page, between the <head> and the </head>

<style>
<!–
.styling{
background-color:black;
color:lime;
font: bold 16px MS Sans Serif;
padding: 3px;
}
–>
</style>

  • Add the below code into the <BODY>, where you wish the clock to appear between the <body> and the </body>

<span id=”digitalclock”></span>

<script>
<!–

//LCD Clock script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write(‘<form name=”tick”><input type=”text” name=”tock” size=”11″></form>’)

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById(“digitalclock”) : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn=”AM”

if (hours==12) dn=”PM”
if (hours>12){
dn=”PM”
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours=”0″+hours
if (minutes<=9)
minutes=”0″+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+” : “+minutes+” “+dn
else
document.tick.tock.value=hours+”   “+minutes+” “+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+” : “+minutes+” “+”<sup style=’font-size:1px’>”+dn+”</sup>”
else
clockobj.innerHTML=hours+” : “+minutes+” “+”<sup style=’font-size:1px’>”+dn+”</sup>”
}
alternate=(alternate==0)? 1 : 0
setTimeout(“show()”,1000)
}
window.onload=show

//–>
</script>

<p>This free script provided by<br />
<a href=”http://javascriptkit.com”>JavaScript
Kit</a></p>

OK! Pretty much that’s for the Digital Clock!

You should have the following script on your Bluefish editor

<html>

<head>

<style>
<!–
.styling{
background-color:black;
color:lime;
font: bold 16px MS Sans Serif;
padding: 3px;
}
–>
</style>

</head>

<body>

<span id=”digitalclock”></span>

<script>
<!–

//LCD Clock script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write(‘<form name=”tick”><input type=”text” name=”tock” size=”11″></form>’)

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById(“digitalclock”) : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn=”AM”

if (hours==12) dn=”PM”
if (hours>12){
dn=”PM”
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours=”0″+hours
if (minutes<=9)
minutes=”0″+minutes

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+” : “+minutes+” “+dn
else
document.tick.tock.value=hours+”   “+minutes+” “+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+” : “+minutes+” “+”<sup style=’font-size:1px’>”+dn+”</sup>”
else
clockobj.innerHTML=hours+” : “+minutes+” “+”<sup style=’font-size:1px’>”+dn+”</sup>”
}
alternate=(alternate==0)? 1 : 0
setTimeout(“show()”,1000)
}
window.onload=show

//–>
</script>

<p>This free script provided by<br />
<a href=”http://javascriptkit.com”>JavaScript
Kit</a></p>

</body>

</html>

Have it saved on your SD Card. I prefer having it saved in /home/pi/ and save it as digitalclock.html. Full filename would be /home/pi/digitalclock.html. But if you are using a Windows PC then you will not be able to save it directly into your SD Card. I would strongly recommend opening this page with your Raspberry Pi and save it then in /home/pi as digitalclock.html using any editor you like such as “gedit”.

Open your DigitalClock.html with your web browser on your computer. You should get something like this

Screenshot from 2012-11-29 16:58:48

Personally I was not satisfied with the very, very moderate time output. I wanted to display seconds in real time, add some style to that clock, day, day of the month, month, year… etc. So I did this

Screenshot from 2012-11-29 17:07:06-1

How I did it? I illustrated the following script

<head>
<style>
<!–
.styling{
background-color:black;
color:white;
font: bold 50px Lucida Console;
padding: 3px;
}
–>
</style>
</head>

<body bgcolor = black>

<table width=100% height=100%>
<tr>
<td style=”text-align: center; vertical-align: middle;”>

<span id=”digitalclock”></span>

<script>

//LCD Clock script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

var alternate=0
var standardbrowser=!document.all&&!document.getElementById

if (standardbrowser)
document.write(‘<form name=”tick”><input type=”text” name=”tock” size=”11″></form>’)

function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById(“digitalclock”) : document.all.digitalclock
var Digital=new Date()
var date=Digital.getDate()
var year=Digital.getFullYear()

var monthn = new Array(12)
monthn[0]=”JAN”;
monthn[1]=”FEB”;
monthn[2]=”MAR”;
monthn[3]=”APR”;
monthn[4]=”MAY”;
monthn[5]=”JUN”;
monthn[6]=”JUL”;
monthn[7]=”AUG”;
monthn[8]=”SEP”;
monthn[9]=”OCT”;
monthn[10]=”NOV”;
monthn[11]=”DEC”;
var month=monthn[Digital.getMonth()]

var weekday=new Array(7);
weekday[0]=”SUN”;
weekday[1]=”MON”;
weekday[2]=”TUE”;
weekday[3]=”WED”;
weekday[4]=”THU”;
weekday[5]=”FRI”;
weekday[6]=”SAT”;
var day=weekday[Digital.getDay()]

var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn=”AM”

if (hours==12) dn=”PM”
if (hours>12){
dn=”PM”
hours=hours-12
}
if (hours==0) hours=12
//if (hours.toString().length==1)
//hours=”0″+hours
if (minutes<=9)
minutes=”0″+minutes

if (seconds<=9)
seconds=”0″+seconds

if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+” : “+minutes+” “+dn
else
document.tick.tock.value=hours+”   “+minutes+” “+dn
}
else{
if (alternate==0)
clockobj.innerHTML=”<b style=’font-size:120′>” + day + “</b> ” +”<b style=’font-size:50′>” + month + “</b>” + ” <b style=’font-size:120px’>” + date + “</b>” + “&emsp;” + “<b style=’font-size:60px’>” + year +”</b> <br>”

+”<b style=’font-size:300px’>”+hours+”</b>”+” <sup style=’font-size:40px’>”+dn+”</sup> <b style=’font-size:200px’>”+minutes+”</b><sup> : </sup>”+”<b style=’font-size:125px’>” + seconds+”</b>”
else

clockobj.innerHTML=”<b style=’font-size:120′>” + day + “</b> ” + “<b style=’font-size:50′>” + month + “</b>” + ” <b style=’font-size:120px’>” + date + “</b>” + “&emsp;” + “<b style=’font-size:60px’>” + year +”</b> <br>”

+”<b style=’font-size:300px’>”+hours+”</b>”+” <sup style=’font-size:40px’>”+dn+”</sup> <b style=’font-size:200px’>”+minutes+”</b><sup> : </sup>”+”<b style=’font-size:125px’>” + seconds+”</b>”
}
alternate=(alternate==0)? 1 : 0
setTimeout(“show()”,1000)
}
window.onload=show

</script>

</td>
</tr>
</table>

</body>

</html>

Copy it and paste it in place of the previous script. Tada! You got a cooler Digital Clock now ;-)

Well, an HTML page with JavaScript did the trick. What remains is some modification and we shall be done with our Raspberry Pi Digital Clock.

We need to

  1. start-up the Raspberry Pi with this HTML file.
  2. Hide the mouse once the clock appears.
  3. Disable the screen saver from working.

Step by step,

  1. Modify the /etc/xdg/lxsession/LXDE/autostartlocated in your Raspberry Pi SD Card (do not mistaken it with the one you have on your computer! make sure that you don’t edit the one in your Linux operating system, but the one located WITHIN your SD Card) with your favourite text editor. I would go again with Bluefish. Add a line to the end of the file with the following script

    @midori -e Fullscreen -a /home/pi/digitalclock.html

  2. Install Unclutter

    sudo apt-get install unclutter

  3. Disable the Screen Saver by installing xset

    sudo apt-get install x11-xserver-utils

    Now open up your ~/.xinitrc file (if you don’t have one then create it) and enter this:

    xset s off # don’t activate screensaver
    xset -dpms # disable DPMS (Energy Star) features.
    xset s noblank # don’t blank the video device

    exec /etc/alternatives/x-session-manager # start lxde

We are done here! I hope you enjoyed this tutorial, and if you have any question in mind regarding any step, a suggestion in mind to make this application better or a completely different idea don’t hesitate to post it as a comment here, or even better open a topic at the forums in The Assembly.

have a great day! :-D

6 Responses

Subscribe to comments with RSS, or TrackBack to 'Raspberry Pi Digital Clock'.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>