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

Theremino HAL 7.2 – Hardware Abstraction Layer.
Easy
  • 82
  • 3

Full instructions

The HAL connects the hardware of InOut with high-level software via USB and Slots.

Theremino, Windows 10 and HAL. The link with the real world
Easy
  • 158
  • 4

Full instructions

Windows 10 and the HAL (Hardware Abstraction Layer). How to communicate with sensors and actuators in the most easy way.

Read the signal of the AB quadrature encoder with Theremino.
Easy
  • 296
  • 4

Full instructions

The simplest way to read A B quadrature encoder using Theremino Master.

Theremino SlotViewer, the simplest way to manage slots.
Easy
  • 146
  • 4

Full instructions

Theremino SlotViewer is the very simple way to manage the slots, read the value and modify in real time the value of each slot.

Eddystone beacons with the micro:bit
Easy
  • 192
  • 3

Protip

Experiment with the Physical Web by turning your micro:bit into an Eddystone beacon.

DIY Smart Home Doorbell 2.0 (works with Alexa)
Easy
  • 2,620
  • 16

Full instructions

Build your own DIY smart home doorbell for cheap, get notified when your guest knock at your door and remotely open by voice command

ProjectsCommunitiesContestsLiveAppsBetaFree StoreBlogAdd projectSign up / Login
Respect project
Feedback