Johannes Stecklein
Published

Windows 10 Core IoT Magic Mirror

A simple solution for a Magic Mirror using only HTML and some Javascript.

Beginner42,651
Windows 10 Core IoT Magic Mirror

Things used in this project

Hardware components

Raspberry Pi 3 Model B
Raspberry Pi 3 Model B
×1
two way mirror
×1
monitor
×1

Software apps and online services

Windows 10 IoT Core
Microsoft Windows 10 IoT Core
Visual Studio 2015
Microsoft Visual Studio 2015

Story

Read more

Schematics

The Scr Folder you need for the Clock + Date

The layout for the files + folders

Code

Clock javascript

JavaScript
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 javascript

JavaScript
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;
}

Index

HTML
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>

stylesheet

CSS
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 javascript

JavaScript
<!-- 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 javascript

JavaScript
small javascript to make the clock and the date work
window.onload = function () {
    dotime();
    setInterval(dotime, 1000);

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

Credits

Johannes Stecklein
1 project • 13 followers
Contact

Comments

Please log in or sign up to comment.

Related channels and tags
  • Displays
  • Displays
  • Microsoft
  • Raspberry Pi