{"id":303,"date":"2014-06-17T19:06:27","date_gmt":"2014-06-17T17:06:27","guid":{"rendered":"http:\/\/www.viesurip.fr\/?p=303"},"modified":"2014-10-20T22:22:05","modified_gmt":"2014-10-20T20:22:05","slug":"un-cadre-en-couleurs","status":"publish","type":"post","link":"https:\/\/www.viesurip.fr\/en\/2014\/06\/17\/un-cadre-en-couleurs\/","title":{"rendered":"A decorative LED frame"},"content":{"rendered":"<p>Here is a small personal project to brighten my home made from a cheap IKEA photo frame, and Arduino and a multicolor &#8220;NeoPixel&#8221; LEDs strip. The goal is simple: to realize a matrix of 12&#215;10 big square pixels able to emit light in any color, and controllable from a smartphone. A simple demo video will explain the principle better (the LED flicker is due to the video and not normally visible): <iframe loading=\"lazy\" style=\"display: block; width: 480px; margin: 5px auto;\" src=\"\/\/www.dailymotion.com\/embed\/video\/x1zonmc\" width=\"480\" height=\"270\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe> The video shows different working modes of the frame: clock, random pixels, gradual color change, sliding message. It is obviously possible to invent many other modes. Here are pictures of the frame:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1889\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-2-300x225.jpg\" alt=\"Cadre couleurs : affichage\" width=\"400\" height=\"300\" \/><\/a> <a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1890\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-1-e1403005352954-300x225.jpg\" alt=\"Cadre couleurs : contr\u00f4le\" width=\"400\" height=\"300\" \/><\/a><a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1895\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-145x300.png\" alt=\"Cadre couleurs : smartphone\" width=\"145\" height=\"300\" \/><\/a><\/p>\n<p>The first picture shows the frame itself, with the white cable used to power the LEDs and to control them. The second image shows the power supply and the control circuit. The white cable attached to the frame can be seen. The last image shows the application used to control the frame from a smartphone. Let&#8217;s now see how this frame is built.<\/p>\n<h2>Material<\/h2>\n<p>Let me list\u00a0what I used to build the frame\u00a0:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.ikea.com\/fr\/fr\/catalog\/products\/00078051\/\">a cheap IKEA photo frame<\/a>\u00a0made for a 23x23cm image, and deep of\u00a04.5cm;<\/li>\n<li><a href=\"https:\/\/www.adafruit.com\/products\/1461\">an Adafruit Neopixel LED strip<\/a>\u00a0of 2m\u00a0with 120 RGB (multicolor) LEDs that can be controlled \u00a0individually;<\/li>\n<li>a sheet of tracing\u00a0paper (23&#215;23 cm at least) to diffuse the light;<\/li>\n<li><a href=\"http:\/\/arduino.cc\/en\/Main\/arduinoBoardUno\">one\u00a0Arduino Uno<\/a>\u00a0to control the strip;<\/li>\n<li><a href=\"http:\/\/arduino.cc\/en\/Main\/ArduinoEthernetShield\">one\u00a0Ethernet shield<\/a>\u00a0to connect the frame to the local network;<\/li>\n<li><a href=\"https:\/\/www.adafruit.com\/product\/658\">a\u00a05V 10A power supply<\/a>\u00a0to power the\u00a0strip;<\/li>\n<li><a href=\"https:\/\/www.adafruit.com\/products\/1589\">a\u00a04700\u03bcF capacitor<\/a>\u00a0to protect the circuit;<\/li>\n<li><a href=\"http:\/\/www.ebay.fr\/itm\/relais-1-RT-10A-au-choix-bobine-de-5-12v-ou-24V-de-2-a-100pcs-12v-relay-\/140932417451?ssPageName=ADME:L:OU:FR:3160\">a 5V 10A relay<\/a>\u00a0 to control the strip power;<\/li>\n<li>a diode to protect the relay;<\/li>\n<li>a <a href=\"http:\/\/fr.rs-online.com\/web\/p\/transistors-mosfet\/4862206\/\">MOSFET N STP16NF06 transistor<\/a> to manage the relay;<\/li>\n<li>a push button to ask the frame to display its IP address;<\/li>\n<li>a\u00a0protoboard to soldier all components;<\/li>\n<li>a\u00a02,5m cable with at least 3 big enough wires to put a distance between the controller and the display;<\/li>\n<li>a 5-pin DIN to plug the display into the controller;<\/li>\n<li>an\u00a0M3 10mm screw and a nut to close the control box;<\/li>\n<li>black\u00a0ABS\u00a0plastic for the\u00a0control box and the square pixels;<\/li>\n<li>some white spray paint for the pixels grid;<\/li>\n<li><a href=\"http:\/\/fr.rs-online.com\/web\/p\/horloges-temps-reel\/5402726\/\">a DS1307+ real-time clock<\/a>\u00a0to remember the time and the state of the frame;<\/li>\n<li><a href=\"http:\/\/fr.rs-online.com\/web\/p\/quartz\/5476985\/\">a\u00a00.033MHz 12.5pF quartz<\/a>\u00a0to rhythm the clock;<\/li>\n<li><a href=\"Pile%20bouton lithium CR2032\">a\u00a0lithium CR2032 battery<\/a>\u00a0to power the clock when the frame is unplugged;<\/li>\n<li>two\u00a02.2k\u03a9 resistors to connect the clock to the Arduino (pull-up).<\/li>\n<\/ul>\n<p>I also needed some tools, found at the\u00a0<a href=\"http:\/\/telefab.fr\">T\u00e9l\u00e9fab<\/a> (FabLab of\u00a0T\u00e9l\u00e9com Bretagne): drill, file, screwdriver, soldering station and 3D printer. I used\u00a0<a href=\"http:\/\/www.openscad.org\">OpenSCAD<\/a>\u00a0to design the plastic parts.<\/p>\n<h2>The display<\/h2>\n<p>To realize the display, I started by modifying the LED strip. This strip is interesting because each LED contains a small control chip, which allows to chain a large number of LEDs with only 3 wires: ground, 5V and the control signal. Only one Arduino pin is used to control the whole strip, thanks to\u00a0<a href=\"https:\/\/github.com\/adafruit\/Adafruit_NeoPixel\">a library provided by Adafruit<\/a>. Another interest of the strip is that each LED can be cut and soldered again to build different shapes, in our case a LED matrix. The best would be to fill the frame with pixels as big as possible, but that would mean cutting each pixel and soldering it again with the right spacing. To avoid that, I decided to use the spacing between two LEDs (120 \/ 200 = 0.6cm) as pixel size. This way, I can put a 12&#215;10 LED matrix in the frame, with some spacing around it. So I cut the strip into 10 bits of 12 LEDs and soldered them again in a matrix shape. The power wires are connected only on one side to shorten the path between the power supply and each LED. The control signal has to be always connected in the right direction, so it has to be connected in an S shape. Here is the result: <a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-11.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1897\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-11-300x225.jpg\" alt=\"Cadre couleurs : ruban\" width=\"400\" height=\"300\" \/><\/a><\/p>\n<p>It can be useful to test sometimes that the strip is still working, using the Arduino and the example provided with the NeoPixel library.<\/p>\n<p>Now the matrix is done, but pixels are not square. To change that, I printed a plastic grid using the 3D printer. All 3D parts are\u00a0<a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/tree\/master\/things\">available on Github<\/a>.\u00a0As the grid is big, I first divided it into 4 parts to assemble. But an imperfect assembly left space for the light to shine between the parts. So I ended up printing the grid in one part on an Asimov 3D printer with a 20x20cm build surface at the\u00a0<a href=\"http:\/\/www.lesfabriquesduponant.net\">fabriques du ponant<\/a>.\u00a0I printed black parts and then painted them in white. I had first tried printing them in black but the grid was overly transparent. The grid\u00a0has\u00a0some space to put the strip, but it may be necessary to file where the soldier is. I also attempted to cut the grid into white 1.1mm cardboard with a laser cutter (SVG file generated by the Python script with the same name). The result was very clean but the cardboard is a bit overly transparent.<\/p>\n<p>To block the gird inside the frame, I designed a spacer (holder file)\u00a0to print 4 times. To hide wires and empty spaces, I cut into the provided white cardboard a square of the size of the grid. To assemble, put everything inside the frame in this order:<\/p>\n<ul>\n<li>the wooden frame, visible side down;<\/li>\n<li>the provided glass;<\/li>\n<li>the tracing paper cut at the right size\u00a0;<\/li>\n<li>the white cardboard with the cut square\u00a0;<\/li>\n<li>the plastic grid and spacers.<\/li>\n<\/ul>\n<p>Here is the result\u00a0: <a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-21.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1899\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-21-300x225.jpg\" alt=\"Cadre couleur : grille\" width=\"400\" height=\"300\" \/><\/a> The tracing paper is used to diffuse the light, otherwise pixels would not appear square. I tried using normal paper but the light was overly attenuated. I also tried using a plastic diffusion film, but the warmth from the LEDs damaged it. To let the control cable get out, a hole has to be drilled (middle down) inside \u00a0the two sheets that close the frame. Then there is just to put the LED matrix over the grid and to close everything (first the small sheet\u00a0inside the frame, and then the big sheet over it). It should hold by itself. It may be needed to add some small pieces of wood between the sheets if some space remains:<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-22.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1946 size-thumbnail\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-22-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-4.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1901 size-thumbnail\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-4-150x150.jpg\" alt=\"Cadre couleurs : \u00e9tape 2\" width=\"150\" height=\"150\" \/><\/a><a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-5.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1902 size-thumbnail\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-5-150x150.jpg\" alt=\"Cadre couleurs : \u00e9tape 3\" width=\"150\" height=\"150\" \/><\/a><\/p>\n<p style=\"text-align: left;\">The display is over! Let&#8217;s now start the controller.<\/p>\n<h2 style=\"text-align: left;\">The controller<\/h2>\n<p>The controller is used to drive the LED strip. It includes the Arduino Uno and the Ethernet shield, and it is connected to the display through the control cable. It also icludes an RTC clock with a small battery to keep the time and save the state of the frame when it is unplugged. The battery should last more than 10 years. In addition to the clock, the circuit includes a relay that is used to cut the strip power when it is not used. This allows to reduce the power consumption (0.19A with the power cut compared to 0.5A with the LEDs set to black) and to avoid useless wear of the strip. As the relay requires an intensity higher than one Arduino pin can provide, it is controlled through a MOSFET N transistor. The diode in parallel to the relay coil avoid overloads when the relay is switched. The circuit is realized on a\u00a0protoboard used as a shield over the Ethernet shield. Here is the electronic drawing: <a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/control-circuit1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1944 size-medium\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/control-circuit1.png\" alt=\"\" width=\"242\" height=\"300\" \/><\/a> It is quite simple. A 5-pin female DIN connector is used to connect the display. Le male connector is soldiered to the control cable (make sure you use the same pins).\u00a0Here is the result\u00a0: <a href=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-1905\" src=\"http:\/\/telefab.fr\/wp-content\/uploads\/2014\/06\/photo-300x225.jpg\" alt=\"Cadre couleurs : montage\" width=\"300\" height=\"225\" \/><\/a> I made\u00a0a small plastic box using the 3D printer to hide the circuit. The model is\u00a0<a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/blob\/master\/things\/box_full.stl\">here<\/a>\u00a0for the box and\u00a0<a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/blob\/master\/things\/box_end.stl\">here<\/a>\u00a0for the lid (<a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/blob\/master\/things\/box.scad\">source<\/a>). Both parts are closed using a screw and a nut. Once everything is done, only the control software is missing.<\/p>\n<h2>The software<\/h2>\n<p>The control software is divided into two parts: the code running on the Arduino, and the control interface for smartphones. I tried commenting the code properly, do not hesitate to ask questions if necessary.<\/p>\n<h3>The Arduino code<\/h3>\n<p>The Arduino code\u00a0<span style=\"color: #0000ee;\"><span style=\"text-decoration: underline;\">is<\/span><\/span><a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/tree\/master\/cadre\">\u00a0available on Github<\/a>. It used\u00a0<a href=\"https:\/\/github.com\/adafruit\/Adafruit_NeoPixel\">the Adafruit NeoPixel library<\/a>\u00a0to control the strip and\u00a0<a href=\"http:\/\/www.pjrc.com\/teensy\/td_libs_Time.html\">the Time and DS1307 libraries<\/a>\u00a0to keep track of time. The\u00a0<a href=\"http:\/\/arduino.cc\/en\/reference\/wire\">standard Wire library<\/a>\u00a0is also used by\u00a0DS1307. Finally, the\u00a0<a href=\"http:\/\/arduino.cc\/en\/reference\/ethernet\">standard Ethernet library<\/a>\u00a0is used to implement a web server listening to requests sent by the control interface. The web server answers only on one address: http:\/\/ARDUI.NO.IP.ADDRESS\/setMode?MODE_PARAMS.\u00a0ARDUI.NO.IP.ADDRESS is the IP address automatically attributed to the Arduino using DHCP. To know it, one only has to push the button on the controller. The address then slides on the display. MODE_PARAMS is a string allowing the Arduino to know which mode should be displayed. To allow the interface to send requests to the frame, the header\u00a0&#8220;<strong>Access-Control-Allow-Origin: *<\/strong>&#8221; is inserted into each reply. It allows any website to contact the frame directly. The code is divided into different classes, with a header and implementation file each:<\/p>\n<ul>\n<li>The\u00a0<strong>RTCControl<\/strong>\u00a0class is based on the DS1307 library. But it also contains the ability to access the RAM of the RTC chip. Indeed, the chip contains 56 bytes of unused RAM memory. These bytes are used by the frame to save the last displayed mode, so as to start with this mode next time\u00a0it is powered on.<\/li>\n<li>The\u00a0<strong>WebServer<\/strong>, <strong>WebRequest<\/strong>\u00a0and\u00a0<strong>WebResponse<\/strong>\u00a0classes form a generic dynamic web server reusable for other projects.<\/li>\n<li>The\u00a0<strong>Pixels<\/strong>\u00a0class simplifies the LED addressing by using (x, y) coordinates instead of the number of the LED on the strip.<\/li>\n<li>The\u00a0<strong>cadre.ino<\/strong>\u00a0file uses all these classes to let the frame work.<\/li>\n<\/ul>\n<h3>The\u00a0smartphone interface<\/h3>\n<p>The smartphone interface is actually built as a simple website. It is\u00a0<a href=\"https:\/\/github.com\/twisterss\/CadreCouleurs\/tree\/master\/cadre\/web\">available on Github<\/a>. You can\u00a0<a href=\"http:\/\/viesurip.fr\/projets\/cadre\/\">see it work here<\/a>. Once downloaded the first time, the interface works without Internet connection thanks to the HTML5 offline features. Everything is done on the client side in javascript. The first time, the IP address of the frame has to be entered by clicking the plus in the top right corner. Settings are saved for next uses. Requests are sent to the frame to change its mode. So the smartphone has to be able to access the frame through the IP network.<\/p>\n<p>The interface is optimized for the iPhone but also works on Android.<\/p>\n<p>The interface is not served by the Arduino, instead it is hosted on an external server. I tried hosting it on the Arduino, but it is way too slow.<\/p>\n<p>For most modes, the interface simply sends the displayed settings (colors, text&#8230;) to the frame, but in &#8220;clock&#8221; mode, the interface also sends the local time of the smartphone. This way, the RTC clock is set automatically every time someone sets the frame in &#8220;clock&#8221; mode.<\/p>\n<h2>To improve<\/h2>\n<p>The frame works very well in its current state, but like any project, it is never really finished. Here are some details that I would like to improve. If you have ideas, do not hesitate:<\/p>\n<ul>\n<li>The grid used to separate pixels is not perfect. Printed parts are not really straight. And the grid is divided into 4 parts, with some open pixels on the sides that are closed by another part. This should be modified to prevent the light from going through the small holes created.<\/li>\n<li>The LEDs do not work at their maximum capacity! They draw at most 3.6A, while they should be able to draw up to 8A. This is probably due to the cable I use between the controller and the display, which should be bigger.<\/li>\n<li>The frame can become quite hot when it is against a wall, I am not sure yet how I could fix that.<\/li>\n<\/ul>\n<h2>You are up!<\/h2>\n<p>Do not hesitate to use this project, copy it, modify it, and keep me informed in the comments. I will update the article if things evolve.<\/p>","protected":false},"excerpt":{"rendered":"<p>This article describes how I built a decorative LED frame using a cheap photo frame, an RGB LED strip and an Arduino.<\/p>\n","protected":false},"author":6,"featured_media":311,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[72,14,69],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino","category-site-internet","category-telefab"],"_links":{"self":[{"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":33,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"predecessor-version":[{"id":348,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/posts\/303\/revisions\/348"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/media\/311"}],"wp:attachment":[{"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.viesurip.fr\/en\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}