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

Running Native .NET Core Apps on Raspberry Pi (ARM)
Easy
  • 2,504
  • 28

Protip

Finally you can run your .NET Core apps on ARM versions of Ubuntu 16.04, 14.04 and Windows 10 IoT. We'll be making a Pi calculation app.

The $10 RPi Zero W - First Impressions
Easy
  • 6,880
  • 14

Protip

Seriously, can a $10 Raspberry Pi Zero-W actually perform useful work? I'm typing this while the "W" is streaming YouTube to my HDMI 4K TV.

ExaGear Desktop Virtual Machine for Raspberry Pi
Easy
  • 47
  • 2

Full instructions

Make common solutions for PC work on ARM-based for any purpose and level of difficulty.

PlatformIO for Visual Studio Code
Easy
  • 650
  • 6

Protip

PlatformIO is an open source ecosystem for IoT development. And now, PlatformIO for Visual Studio Code is coming!

Network Monitoring using R-Pi and Node Red
Easy
  • 1,522
  • 11

Work in progress

Using the R-Pi 3 and Node Red I created a simple network monitoring appliance.

Run Dropbox on Raspberry Pi
Easy
  • 157
  • 3

Protip

Host files with popular app Dropbox on your Raspberry Pi device. Easy and fast step-by-step guide.

ProjectsCommunitiesContestsLiveAppsBetaFree StoreBlogAdd projectSign up / Login
Respect project
Feedback