Things used in this project

Hardware components:
Pi 3 02
Raspberry Pi 3 Model B
×1
two way mirror
×1
monitor
×1
Software apps and online services:
10
Microsoft Windows 10 IoT Core
Vs2015logo
Microsoft Visual Studio 2015

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

Read/Write Data from/to USB Thumb Drive on Windows IoT Core
Easy
  • 821
  • 13

Protip

Work around universal apps that block you from reading/writing data files.

How to Get Terminal to Raspberry Via SSL from Anywhere
Easy
  • 5,317
  • 22

Protip

Sometimes we want terminal capabilities from outside the bounds our network. That is, terminal to web with no port forwarding.

WebVR Mixed Reality Video Capture for HTC Vive
Easy
  • 529
  • 12

Protip

Create WebVR Mixed Reality Video - Chrome browser, a green screen room, a webcam, and an HTC Vive.

Telegram Bot with Raspberry Pi
Easy
  • 2,149
  • 19

Full instructions

Host a Telegram Bot on your Raspberry Pi and chat with your brand new IoT device!

Toggle an LED with Real HTTPS to Raspberry PI - no Public IP
Easy
  • 5,703
  • 18

Protip

Simple, easy & free way to expose Raspberry Pi to the Web w/a real public SSL certificate + e2e encryption. No public IP/port forwarding.

Particle + Raspberry Pi
Easy
  • 3,219
  • 19

Protip

The world's favorite low-cost computer now connects to the world's most popular IoT platform.

ProjectsCommunitiesContestsLiveJobsFree StoreBlogAdd projectSign up / Login
Respect project