Smart Nanoleaf Replica

prusaprinters

<p>3D-Printable cheap Nanoleaf replica with Webinterface and Alexa support using a WS2812 RGB LED strip, it's easy to print and cheap to build, a must have.</p> <h3>Print instructions</h3><h3>3D-Printed DIY Nanoleafs (<strong>NEW UPDATE</strong>)</h3> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/rgb_preview2.gif?raw=true" width="550px"/></p> <h3>Update 24.02.2019</h3> <h3>Node-RED &amp; Alexa Integration (optional)</h3> <ul> <li>Added Node-RED integration which is fully optional</li> <li>Added Amazon Alexa support in Node-RED</li> <li>Added Function to the webserver to support custom patterns</li> </ul> <p><strong>Node-RED setup is instructions are found on <a href="https://github.com/NimmLor/esp8266-nanoleaf-webserver">GitHub</a></strong></p> <p>I've designed and built an alternative version of the <a href="https://www.thingiverse.com/thing:3230905">Nanoleaf Light Panel Replica</a> and forked a good software for controlling WS2812b led-strips to work well with the diy nanoleafs. <strong>The software and detailed setup instructions can be found on <a href="https://github.com/NimmLor/esp8266-nanoleaf-webserver">GitHub</a> and is compatible with <em>Harvahammas</em> Nanoleaf version.</strong> The nanoleafs were designed in Fusion 360.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/interface.jpg?raw=true" width="550px"/></p> <h3>Bill of Materials</h3> <ul> <li>1x <a href="http://s.click.aliexpress.com/e/cBDdafPw">Wemos D1 mini</a> is recommended, but any other ESP8266 variant should work too, but it might require an additional step-down converter.</li> <li><a href="http://s.click.aliexpress.com/e/FyMPRmo">WS2812b led strip</a>, make sure you choose IP30 any other IP rating wouldn't make any sense and might not even fit.I would recommend buying a strip with 60 leds/m or more.</li> <li>1x <a href="http://s.click.aliexpress.com/e/buDr0PT2">3.3V to 5V Logic Level Shifter</a> (required if LEDs "glitch")</li> <li>1x <a href="http://s.click.aliexpress.com/e/bLG4vPiu">Power Jack</a></li> <li>1x <a href="http://s.click.aliexpress.com/e/Vi3I19O">3 pin wire</a></li> <li>1x <a href="http://s.click.aliexpress.com/e/b8rZBdwg">5V 3A Power supply</a></li> <li><a href="http://s.click.aliexpress.com/e/bYUDfMek">M4*10mm</a> Bolts</li> <li>White PLA is recommended</li> </ul> <h6>The links above are affiliate links</h6> <h3>Assembly</h3> <h3>Step 1, Plan your setup</h3> <p>I would recommend making a plan how your leafs should be arranged. Afterwards make a quantity table of all parts that need to be 3D-printed.</p> <p>Choose how many led pixels you will use in the corners. Every corner must have the same amount of leds in each corner.<br/> I've used 4x leds in each corner, thats 12 led pixels per leaf → 1m of 60 leds/m = 5 leafs<br/> I would <strong>not</strong> go for more than 5 leds per corner on the 60leds/m led strip, because the strip might interfere with the connector on the side.</p> <h3>Step 2, Choose your diffuser variant</h3> <p>There are 3 different variants of the diffuser available:</p> <ul> <li>PLA diffuser</li> <li>Paper diffuser</li> <li>Edged Paper diffuser</li> </ul> <p><strong>PLA diffuser:</strong><br/> The PLA diffuser is recommended if you print on a flat print surface and you get a consistant first layer, for instance if you print on a glass plate.</p> <p><strong>Paper diffuser:</strong><br/> If you don't get consistant first layers choose the paper diffuser, cut photo paper into pieces using the cutting_tool.stl.</p> <p><strong>Edged Paper diffuser:</strong><br/> Choose this one, if you don't like the round edges of the regular paper diffuser.</p> <h3>Step 3, Print your parts</h3> <p>Make sure you print all diffusers at <strong>100% infill</strong> with <strong>white</strong> PLA, if you don't print at 100% the infill pattern might shine through.</p> <p>The base can be printed in <strong>black</strong> PLA, but any other color will work too. Choose white PLA for the base if you prefer that the leds should shine through a bit on the sides. The base is also available as an M3 variant. The base can be printed at amount any infill.</p> <p>You can either print the electronics box or just glue the ESP8266 directly onto the first base.</p> <h3>Step 4, Assemble the Leafs</h3> <p>First remove the tape of the backside of the led strip and put it into the corners. <strong>All</strong> led strip pieces must have the <strong>GND line facing downwards</strong>. Cut the wire into pieces. Make sure your wire pieces aren't too long, otherwise they might be visible when they are too close to the diffuser. When soldering, mind the arrow, it must face always in the same direction, the arrow must face <strong>away</strong> from the ESP8266.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/DSC_8615.JPG?raw=true" width="550px"/></p> <p><strong>Important:</strong> All led pieces must be connected in series, <strong>no parallel</strong> connections!</p> <h3>Step 5, Connect the Leafs</h3> <p>Connect all leafs together with the M4 bolts together. Leave a 4mm gap between all leaf connections. Afterwards connect the endpoint of the leaf to the starting point of the next leaf.<br/> <strong>Mind the arrow!</strong></p> <h3>Step 6, Connect the electronics box</h3> <p>Mount the power jack and the Wemos D1 inside. Connect the start of the strip to the pin D4 of ther ESP8266. Connect the remaining wires as shown below.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/circuit.jpg?raw=true" width="550px"/><br/> <img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/electronics_box.jpg?raw=true" width="550px"/></p> <hr/> <p><strong>Use this circuit if the leds 'glitch'</strong><br/> <img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/circuit_logic_level_Steckplatine.jpg?raw=true" width="550px"/><br/> Use electrician tape to isolate the logic level shifter.<br/> <img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/electronics_box_level_shift.jpg?raw=true" width="550px"/></p> <h3>Final Step, Mount the Nanoleafs</h3> <p>Make sure you flash the software first and test the leafs. If glitches occur use a logic-level converter. If there are still glitches, check if the data line interferes with other lines. If your leds start to dimm or change color along the strip you might want to connect another power supply at the end of the strip.</p> <p>If everything works fine, push the diffusers from the top in and use an allen key or a screwdriver to tighten the connections between the leafs.</p> <p>You can either mount the 'Nanoleafs' using:</p> <ul> <li>Nails (recommended)</li> <li>A rawlplug and a screw</li> <li>double sided tape</li> </ul> <h3>Software</h3> <h3>Simple Client</h3> <p>The software runs on the ESP8266. The web app is stored in SPIFFS (on-board flash memory). I've forked <a href="https://github.com/jasoncoon/esp8266-fastled-webserver">jasoncoon's esp8266 fastled webserver</a> and adjusted all the patterns to look better on the leafs and implemented a way to color individual leafs.</p> <p><strong>The software and detailed setup instructions can be found on <a href="https://github.com/NimmLor/esp8266-nanoleaf-webserver">GitHub</a>.</strong></p> <h3>Advanced Node-RED &amp; Alexa Integration</h3> <h4>Node-RED GUI</h4> <p>The Node-RED GUI is an addition to the regular UI that is running on the Wemos D1 mini. It allows to create and save custom patterns and also control all regular parameters same as the ESP8266 webserver. It can be accessed by any device.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/full.png?raw=true" width="550px"/></p> <h5>Nanoleaf Designer</h5> <p>In the Node-RED GUI you can easily create your nanoleaf setup by using the <em>Nanoleaf Designer</em>. It's easy to use and allows almost any design that is possible. But it might have still some minor bugs.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/nanoleaf_designer.png?raw=true" width="550px"/></p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/nanoleaf_designer_2.png?raw=true" width="550px"/></p> <h5>Nanoleaf Custom Pattern Designer</h5> <p>With the <em>Nanoleaf Custom Pattern Designer</em> you can create custom patterns with effects. Currently the individual leafs can be set to <em>Static</em> mode and <em>Breathe</em> mode that allows to set a phase shift and lets the leafs breathe. Flow-mode follows in the next update.</p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/pattern_designer.png?raw=true" width="550px"/></p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/pattern_designer_2.png?raw=true" width="550px"/></p> <p><img src="https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/NodeRED_UI/patternlist.png?raw=true" width="550px"/></p> <h3>Additional Hardware required for Node-RED &amp; Alexa</h3> <ul> <li>Any device that runs Node-RED, examples would be:<ul> <li>(recommended) <a href="https://www.amazon.de/gp/product/B01CD5VC92?ie=UTF8&amp;tag=surrbradl08-21&amp;camp=1638&amp;linkCode=xm2&amp;creativeASIN=B01CD5VC92">Raspberry Pi</a></li> <li>Any Linux machine</li> <li>(instructions are provided for linux) Any Windows machine</li> </ul> </li> <li>Any Amazon Alexa device for Alexa integration, works on Android and IOS too (<strong>OPTIONAL</strong>)</li> </ul> <h4>Alexa Phrases</h4> <ul> <li>Turn on/off</li> <li>Control Brightness</li> <li>Control Pattern Speed </li> <li>Set Color</li> <li>Set into Rainbow mode </li> <li>Enable Autoplay and set Duration </li> <li>Activate custom activities </li> </ul> <blockquote><p><em>Alexa, turn Nanoleafs <strong>on/off</strong></em><br/> <em>Alexa, set Nanoleafs 70%</em><br/> Alexa, dim Nanoleafs<br/> <em>Alexa, Nanoleaf speed 20%</em><br/> <em>Alexa, set Nanoleafs pink</em><br/> <em>Alexa, turn Nanoleaf rainbow on</em><br/> <em>Alexa, turn Nanoleaf Autoplay on</em><br/> <em>Alexa, set Nanoleaf Autoplay 40</em></p> <p>Alexa, Nanoleaf Default<br/> Alexa, Nanoleaf Mode 1<br/> Alexa, Nanoleaf Mode 2<br/> Alexa, Nanoleaf Mode 3</p> </blockquote> <h3>Creating Designs and Patterns</h3> <p>First click <strong>Open Designer</strong>.<br/> Then choose a starting tile by either using <strong>Add Position A</strong> or <strong>Add Position B</strong>, you can always reset the whole config.<br/> When you add a starting tile a triangle should pop up at the canvas, the letters present the position where the next leaf is added corresponding to the buttons.</p> <p>With the arrow buttons you can go back and continue your leafs on another location, but keep in mind that it has to be wiried all in order, the numbers represent the wiring order of your leafs.</p> <p>When you are done click save design.</p> <h3>My Setup</h3> <p>I've built my Nanoleafs using 12 leafs with 4 leds in each corner. Thats a total of 144 leds (~2.5m of 60leds/m).</p> <p>I've tested the setup using my lab bench power supply and came to the conclusion that even a 2 amp power supply would be enough. But I went on the safe side with the 3 amp one.</p> <p>Preview videos can be found <a href="https://www.youtube.com/watch?v=FX3BafYGkDQ">here</a> and <a href="https://www.youtube.com/watch?v=purKRyXAarA">here</a></p>