Things used in this project

Schematics

The Scr Folder you need for the Clock + Date
Q9q0bAlI8QsDKmzrN5Qv.7z
The layout for the files + folders
Av4zncd79evt4sybcjrk

Code

Clock javascriptJavaScript
a simple solution for a clock using number pictures
// Clock

dg = new Array();
dg[0]=new Image();dg[0].src="src/Clock/dg0.gif";
dg[1]=new Image();dg[1].src="src/Clock/dg1.gif";
dg[2]=new Image();dg[2].src="src/Clock/dg2.gif";
dg[3]=new Image();dg[3].src="src/Clock/dg3.gif";
dg[4]=new Image();dg[4].src="src/Clock/dg4.gif";
dg[5]=new Image();dg[5].src="src/Clock/dg5.gif";
dg[6]=new Image();dg[6].src="src/Clock/dg6.gif";
dg[7]=new Image();dg[7].src="src/Clock/dg7.gif";
dg[8]=new Image();dg[8].src="src/Clock/dg8.gif";
dg[9]=new Image();dg[9].src="src/Clock/dg9.gif";



function dotime(){ 
	var clock=new Date();
	var hr=clock.getHours(),mn=clock.getMinutes(),se=clock.getSeconds();

	document.hr1.src = getSrcDg(hr,10);
	document.hr2.src = getSrcDg(hr,1);
	document.mn1.src = getSrcDg(mn,10);
	document.mn2.src = getSrcDg(mn,1);
	document.se1.src = getSrcDg(se,10);
	document.se2.src = getSrcDg(se,1);
}


function getSrcDg(digit,index){
	return dg[(Math.floor(digit/index)%10)].src;
}
Date javascriptJavaScript
Same solution as the Clock ( Using pictures for the Numbers
// Date 

dd = new Array();
dd[0]=new Image();dd[0].src="src/Datum/dd0.gif";
dd[1]=new Image();dd[1].src="src/Datum/dd1.gif";
dd[2]=new Image();dd[2].src="src/Datum/dd2.gif";
dd[3]=new Image();dd[3].src="src/Datum/dd3.gif";
dd[4]=new Image();dd[4].src="src/Datum/dd4.gif";
dd[5]=new Image();dd[5].src="src/Datum/dd5.gif";
dd[6]=new Image();dd[6].src="src/Datum/dd6.gif";
dd[7]=new Image();dd[7].src="src/Datum/dd7.gif";
dd[8]=new Image();dd[8].src="src/Datum/dd8.gif";
dd[9]=new Image();dd[9].src="src/Datum/dd9.gif";

function dodate(){ 
	var data = new Date();
	var dy=data.getDate(),mn=(data.getMonth()+1),yr=data.getYear();

	if(yr<1000) yr+=1900;

	document.dy1.src=getSrc(dy,10);
	document.dy2.src=getSrc(dy,1);
	document.mt1.src=getSrc(mn,10);
	document.mt2.src=getSrc(mn,1);
	document.yr1.src=getSrc(yr,1000);
	document.yr2.src=getSrc(yr,100);
	document.yr3.src=getSrc(yr,10);
	document.yr4.src=getSrc(yr,1);
}

function getSrc(digit,index){
	return dd[(Math.floor(digit/index)%10)].src;
}
IndexHTML
Main HTML file
<!doctype html>
<html lang="de">
<head>

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WinMirror1</title>
    <link rel="stylesheet" type="text/css" href="css\mystyle.css">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script src="script/jquery-3.1.1.js"></script> 
    <script src="script/clock.js"></script>
    <script src="script/data.js"></script>
    <script src="script/weather.js"></script>
    <script src="script/onload.js"></script>
    <script src="script/jquery.simpleWeather.js"></script>

</head>

    <body>

        <header>

            <!-- TIME-->
            <div id="clock">
                <img src="src/Clock/dg8.gif" name="hr1">
                <img src="src/Clock/dg8.gif" name="hr2">
                <img src="src/Clock/dgc.gif">
                <img src="src/Clock/dg8.gif" name="mn1">
                <img src="src/Clock/dg8.gif" name="mn2">
                <img src="src/Clock/dgc.gif">
                <img src="src/Clock/dg8.gif" name="se1">
                <img src="src/Clock/dg8.gif" name="se2">
            </div>

            <!-- DATE-->
            <div id="data">
                <img src="src/Datum/dd8.gif" name="dy1">
                <img src="src/Datum/dd8.gif" name="dy2">
                <img src="src/Datum/ddh.gif">
                <img src="src/Datum/dd8.gif" name="mt1">
                <img src="src/Datum/dd8.gif" name="mt2">
                <img src="src/Datum/ddh.gif">
                <img src="src/Datum/dd8.gif" name="yr1">
                <img src="src/Datum/dd8.gif" name="yr2">
                <img src="src/Datum/dd8.gif" name="yr3">
                <img src="src/Datum/dd8.gif" name="yr4">
            </div>

            <!-- WEATHER-->
            <div id="weather"></div>

        </header>

    </body>

</html>
stylesheetCSS
the css file
@font-face {
    font-family: 'weather';

    src: url('src/artill_clean_icons.otf');
   
}



body {
  
  font: 25px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background:black;
  color: #fff;
   
}





#weather {
	
    margin:-280px 0 0 5px;
	text-align: left;
	text-transform: uppercase;
}

i {
  color: #fff;
  font-family: weather;
  font-size: 300px;
  font-weight: normal;
  font-style: normal;
  line-height: 1.0;
  text-transform: none;
  text-align:left;
  display:inline;
}

.icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

#weather h2 {
  display:inline;
  color: #fff;
  font-size: 50px;
  font-weight: 300;
  
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}

#weather ul {
  display:inline;
  margin: 0;
  padding: 0;
}

#weather li {
  
  background: #fff;
  background: rgba(255,255,255,0.90);
  
  display: inline-block;
  
}

#weather .currently {
    color: #fff;
    display:inline;
  
}




#clock {
	
	text-align: right;
    margin:0 5px 0 0;
}

#data {
	
	text-align: right;
    margin:0 5px 0 0;
}
Weather javascriptJavaScript
<!-- Docs at http://http://simpleweatherjs.com -->
// Update Function !

$(document).ready(function() {  
  getWeather(); //Get the initial weather.
  setInterval(getWeather, 600000); //Update the weather every 10 minutes.
});

// Get Weather

function getWeather() {
   $.simpleWeather({
    location: 'Austin, TX',
    woeid: '',
    unit: 'f', 
    success: function(weather) {
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>';
  
      $("#weather").html(html);
    },
    error: function(error) {
      $("#weather").html('<p>'+error+'</p>');
    }
  });
}
On load javascriptJavaScript
small javascript to make the clock and the date work
window.onload = function () {
    dotime();
    setInterval(dotime, 1000);

    dodate();
    setInterval(dodate, 30000);
}                           

Credits

Replications

Did you replicate this project? Share it!

I made one

Love this project? Think it could be improved? Tell us what you think!

Give feedback

Comments

Similar projects you might like

Setting Up Your Pi Cap on the Raspberry Pi 1, 2 or 3
Easy
  • 24
  • 2

Protip

Follow this tutorial to set up your Pi Cap with a Raspberry Pi 1 A+/B+, Raspberry Pi 2 or Raspberry Pi 3.

Setting Up Your Pi Cap on the Raspberry Pi Zero
Easy
  • 31
  • 2

Protip

Follow this tutorial to set up your Pi Cap with a Raspberry Pi Zero.

One Small Step For a Yedi, One Giant Leap for Mankind
Easy
  • 145
  • 4

Work in progress

Counting your steps with the Calliope Mini. Hearing the Star Wars theme is always a huge motivator.

Secure Simple Remote Access for Camera Viewing
Easy
  • 1,700
  • 5

Full instructions

Turn your RPi into a full featured camera with remote access, end2end encryption, and easy user enrollment.

Microsoft Workshop Setup Guide
Easy
  • 664
  • 8

Protip

A collection of screencasts for setting up your laptop for the Hackster/Microsoft IoT Roadshow events.

PiCorder
Easy
  • 3,550
  • 14

Full instructions

A simple Pi-based camcorder using the very nice HyperPixel touchscreen from Pimoroni.

ProjectsCommunitiesTopicsContestsLiveAppsBetaFree StoreBlogAdd projectSign up / Login