Welcome to the Athom Community Forum! This is a place to share ideas, ask for help and discuss about Homey in general.

Please read Welcome to the forum to get started.

Magic mirror / smart mirror (main)

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

  • 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 :-)
  • 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™
  • 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: 
  • This is definitely my next hobby project! Would be awesome to link this to homey 
  • 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>
  • Twalef?
  • Yeah Twalef. That is how a dyslexic writes 12 in Dutch. Feel free to wait for a version in your language.
  • Well, u can wright it like u say it aye? Het viel me alleen op. No problem at all m8!
  • Np. Normally I would let someone check this stuf but as it's just a simple code test I didn't bother.
  • Haha sweet.
  • Have any of you guys found a good comprehensive tutorial on how to build the mirror?
  • No. Not yet. It shouldn't be to hard though.
  • 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.
  • 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 :)
  • 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 modulesthis one can do a REST API call.
    Like to hear what you think!
  • The better logic app already has this feature.

    Nice!
  • 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.
  • I use better logic to store or get variables.

    the webpage js gets these values
  • 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 :-)
  • 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
  • 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
     ;) 
  • 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
  • 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.

  • 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)

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