›
This is the forum archive of Homey. For more information about Homey, visit the Official Homey website.

The Homey Community has been moved to https://community.athom.com.

This forum is now read-only for archive purposes.

Magic mirror / smart mirror (main)

nklerknklerk Member
in Developers
A magic mirror or smart mirror is a mirror that can display information. The idea is quite simple, it's a display behind a interrogation window. It will look like a normal mirror but when the display produces light it will be visible through the mirror. Ideally powered by a raspberry pi browser.

As multiple forum members are interested I have created this thread.
«134

Comments

  • nklerknklerk Member
    There is a raspberry pi solution named magicmirror this is an existing nodejs solution to provide information. We all want to include homey information off course :-)
  • nklerknklerk Member
    My nodejs skills are as bad as it can be. I have made a few JavaScript based HTML pages that I probably will use for my project. I'll share them soon™
  • DieterKoblenzDieterKoblenz Member
    Just installed MagicMirror2 on my pi for testing, looks great. Smart mirror in every room would rock haha

    https://magicmirror.builders/ for the software

    https://www.novoda.com/blog/content/images/2016/07/IMG_0516_crop.jpg for example :dizzy: 
  • EvertorNEvertorN Member
    This is definitely my next hobby project! Would be awesome to link this to homey 
  • nklerknklerk Member
    I now have 3 test pages that i have made.
    these are just to see if i am able to pull it of .

    A "Buienradar" image without color and neighboring countries visible.

    <body style='background-color: black; margin: 0px; '>
<style>
div {
	width: 425px;
	color: white;
	text-align-last: justify;
	position: absolute; }
	
.holder{
    width: 256px;
    height:256px;
    position:relative;
	-webkit-filter: contrast(185%);
}

.frame{
    width: 100%;
    height:100%;
	-webkit-filter: grayscale(100%);}
	
.bar{
    position:absolute;
    top:0;
    left:0;
    width:100%;
	width: 256px;
    height:256px;
	}

</style>
<div class="holder" style="">
	<iframe class="frame" src="http://gadgets.buienradar.nl/gadget/zoommap/?lat=52.10583&lng=5.01528&overname=2&zoom=6&naam=vleuten&size=2&voor=0" scrolling=no width=256 height=256 frameborder=no></iframe>
	<div class="bar"><img src="buienradar_mask.png"></div>
</div>
</body>

    A digital Clock

    <body style='background-color: black; margin: 0px; '>
<style>

@font-face{
	font-family:"Roboto";
	src:url(./Roboto-Thin.ttf);
	font-weight:200}
	
div {
    font-family: "Roboto";         
    font-weight: 100;
	width: 425px;
	color: white;
	text-align-last: justify;
	position: absolute; }

</style>

<div id="tijd" 				style='font-size:180; top: -30px;'></div>
<div id="tijduitgeschreven" style='font-size:21; color: white; top: 154px;'></div>
<div id="datum" 			style='font-size:35; color: white; top: 180px;'></div>


</body>
<script>
//variables
var weekday = new Array(7);
	weekday[0]=  "zondag";
	weekday[1] = "maandag";
	weekday[2] = "disndag";
	weekday[3] = "woensdag";
	weekday[4] = "donderdag";
	weekday[5] = "vrijdag";
	weekday[6] = "zaterdag";
	
var month = new Array(13);
	month[0]=  "twighlight";
	month[1] = "januari";
	month[2] = "februari";
	month[3] = "maart";
	month[4] = "april";
	month[5] = "mei";
	month[6] = "juni";
	month[7] = "juli";
	month[8] = "augustus";
	month[9] = "september";
	month[10] = "october";
	month[11] = "november";
	month[12] = "december";
	
var numbers = new Array(60);
	numbers[0]=  "nul";
	numbers[1] = "een";
	numbers[2] = "twee";
	numbers[3] = "drie";
	numbers[4] = "vier";
	numbers[5] = "vijf";
	numbers[6] = "zes";
	numbers[7] = "zeven";
	numbers[8] = "acht";
	numbers[9] = "negen";
	numbers[10] = "tien";
	numbers[11] = "elf";
	numbers[12] = "twalef";
	numbers[13] = "dertien";
	numbers[14] = "veertien";
	numbers[15] = "vijftien";
	numbers[16] = "zestien";
	numbers[17] = "zeventien";
	numbers[18] = "achtien";
	numbers[19] = "negentien";
	numbers[20] = "twintig";
	numbers[21] = "eenentwintig";
	numbers[22] = "tweeentwintig";
	numbers[23] = "drieentwintig";
	numbers[24] = "vierentwintig";
	numbers[25] = "vijfentwintig";
	numbers[26] = "zesentwintig";
	numbers[27] = "zevenentwintig";
	numbers[28] = "achtentwintig";
	numbers[29] = "negenentwintig";
	numbers[30] = "dertig";
	numbers[31] = "eenendertig";
	numbers[32] = "tweeendertig";
	numbers[33] = "drieendertig";
	numbers[34] = "vierendertig";
	numbers[35] = "vijfendertig";
	numbers[36] = "zesendertig";
	numbers[37] = "zevenendertig";
	numbers[38] = "achtendertig";
	numbers[39] = "negenendertig";
	numbers[40] = "veertig";
	numbers[41] = "eenenveertig";
	numbers[42] = "tweeenveertig";
	numbers[43] = "drieenveertig";
	numbers[44] = "vierenveertig";
	numbers[45] = "vijfenveertig";
	numbers[46] = "zesenveertig";
	numbers[47] = "zevenenveertig";
	numbers[48] = "achtenveertig";
	numbers[49] = "negenenveertig";
	numbers[50] = "vijftig";
	numbers[51] = "eenenvijftig";
	numbers[52] = "tweeenvijftig";
	numbers[53] = "drieenvijftig";
	numbers[54] = "vierenvijftig";
	numbers[55] = "vijfenvijftig";
	numbers[56] = "zesenvijftig";
	numbers[57] = "zevenenvijftig";
	numbers[58] = "achtenvijftig";
	numbers[59] = "negenenvijftig";
	
	

function startTime() {
	//Variables.
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    
	//Update screen
	document.getElementById('tijd').innerHTML = h + ":" + m ;
	document.getElementById('datum').innerHTML = weekday[today.getDay()] + "  " + today.getDate() + "</b>  " + month[today.getMonth()] + "  " + today.getFullYear();
	document.getElementById('tijduitgeschreven').innerHTML = numbers[h] + " uur en " + numbers[m] + " minuten";
	
	
	var t = setTimeout(startTime, 1000);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
startTime()
</script>

    A JSON call returning the state of devices

    <body>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>
<div id="id5"></div>
<div id="id6"></div>
<div id="id7"></div>
<div id="id8"></div>
<div id="id9"></div>
<div id="id10"></div>
<div id="id11"></div>
<div id="id12"></div>
<div id="id13"></div>
<div id="id14"></div>
<div id="id15"></div>
<div id="id16"></div>
<div id="id17"></div>
<div id="id18"></div>
<div id="id19"></div>
<div id="id20"></div>

<script>
// Var defenitions.
var xmlhttp = new XMLHttpRequest();
var url = "http://10.0.198.10/api/Test";

//xmlhttp respone
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myJSON = JSON.parse(this.responseText);
        UpdateWebpageInfo(myJSON);
    }
};



xmlhttp.open("GET", url, true);
xmlhttp.send();
setInterval(function() {
	xmlhttp.open("GET", url, true);
	xmlhttp.send();
}, 4000);



function UpdateWebpageInfo(arr) {
	var i = 1;
	for(var light in arr.lights)
    {
		if(arr.lights[light].state.on == true){
			document.getElementById("id" + i).innerHTML = '<b style="color:white;">' + arr.lights[light].name ;
		} else {
			document.getElementById("id" + i).innerHTML = '<b style="color: #101010;">' + arr.lights[light].name ;
		}
		i++;
    }
}
</script>
</body>
  • RocodamelsheRocodamelshe Member
    Twalef?
  • nklerknklerk Member
    Yeah Twalef. That is how a dyslexic writes 12 in Dutch. Feel free to wait for a version in your language.
  • RocodamelsheRocodamelshe Member
    Well, u can wright it like u say it aye? Het viel me alleen op. No problem at all m8!
  • nklerknklerk Member
    Np. Normally I would let someone check this stuf but as it's just a simple code test I didn't bother.
  • DieterKoblenzDieterKoblenz Member
    Haha sweet.
  • EvertorNEvertorN Member
    Have any of you guys found a good comprehensive tutorial on how to build the mirror?
  • nklerknklerk Member
    No. Not yet. It shouldn't be to hard though.
  • DieterKoblenzDieterKoblenz Member
    EvertorN said:
    Have any of you guys found a good comprehensive tutorial on how to build the mirror?
    No real tutorial but if you google there are plenty of examples.

    You need at least a flat tv or monitor, an observation mirror (from either glass, plastic or you can buy foil cheap (for Dutchies: https://raamspiegel.nl/) and a computer (easiest is a Raspberry Pi).. The way you build it is dependent on those items, I haven't found any "kits" you can screw together.
  • DieterKoblenzDieterKoblenz Member
    This post comes closest to a tutorial:
    http://michaelteeuw.nl/post/80391333672/magic-mirror-part-i-the-idea-the-mirror
  • EvertorNEvertorN Member
    Yeah I saw that too, but still leaves too much to the imagination. I will 100% fuck up the hardware  :D. If you guys come across any good tutorials / kits, let me know :)
  • JBenjaminsJBenjamins Member
    This is a useful tutorial: https://atticuswhite.com/blog/react-native-smart-mirror-lab/

  • PBaan93PBaan93 Member
    I think this could be a start to link Homey to the Magic Mirror.
    - A small homey app with a web API, when a GET request comes in, reply with homey variableX.
    - Update Homey variableX with a flow action card.
    - Use one of the Magic Mirror modules, this one can do a REST API call.
    Like to hear what you think!
  • PBaan93PBaan93 Member
    The better logic app already has this feature.

    Nice!
  • nklerknklerk Member
    For my test i use variabels in Homey that i get with rest. Works perfect.

    i have installed chromium-browser on raspbian. i now have my info displayed in fullscreen.

    i am currently searching for a way to automatically start the browser upon boot. If someone has an idea then please let me know 
  • PBaan93PBaan93 Member
    edited September 2016
    Aha nice. So no better logic needed. I understand your post now, nice test.
  • nklerknklerk Member
    I use better logic to store or get variables.

    the webpage js gets these values
  • nklerknklerk Member
    I just have created my index.html page. It only has a 1920x1080 iframe and a script that every 3 seconds checks a variable in homey

    the variable in homey holds the URL the iframe will display. If the variable changes the index.html will use the new URL in its iframe.

    this allows me to use homey to brows  through different information pages. With a maximum delay of 3 seconds.

    if I now want to view weather data I activate the mirror_wearher flow. This flow will set a better logic variable with the weather URL. When the index.html script noticed the changed URL it will load it and I see the weather details on my mirror. Well my future to be mirror :-)
  • nklerknklerk Member
    Mirror mirror on the wall which traffic jam is the most magnificent of them all. 

    The mirror shows all traffic jams. 
  • posthokposthok Member
    edited September 2016
    Would be better if the reflection would show a handsome man.
    Already have a name for it. The Adonis mirror
  • nklerknklerk Member
    Every mirror does that already, at least every mirror i encountered in my live showed me a handsome man. 
  • posthokposthok Member
    edited September 2016
    nklerk said:
    Every mirror does that already, at least every mirror i encountered in my live showed me a handsome man. 
    Then you are a lucky man, but then again i'm rich. Think that's a compensation. You can't have both i think
     ;) 
  • Trustme2Trustme2 Member
    posthok said:
    nklerk said:
    Every mirror does that already, at least every mirror i encountered in my live showed me a handsome man. 
    Then you are a lucky man, but then again i'm rich. Think that's a compensation. You can't have both i think
     ;) 
    Moviestars
  • nklerknklerk Member
    I have the code samples ready. I have tested with my doorbell, when someone presses the doorbell, a near live camera image is shown. Now comes the hard part. Actually building it....

    I made some mock-ups so i have a better view of a  possible end result.

  • DieterKoblenzDieterKoblenz Member
    Just ordered a piece of acrylic glass and and observation mirror foil. I'll make a build log for my first attempt.

    Cost so far:
    Acrylic glass (60x40cm 3mm):  €25,-
    Observation mirror foil (60x40cm): €4,21 (raamfoliewebshop.nl)

  • Trustme2Trustme2 Member
    Are you planning on using glass+foil or a premade mirror?
Sign In or Register to comment.