508 lines
32 KiB
HTML
508 lines
32 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Qudio - a QR-enabled Audio Player for Children</title>
|
||
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
|
||
|
||
<meta property="og:url" content="http://tilman.de/projekte/qudio/" />
|
||
<meta property="og:title" content="Qudio - a QR-enabled Audio Player for Children" />
|
||
<meta property="og:description" content="After building the first version of this music player for my oldest son in 2016, I recently had to update my project for his younger brother. As before, music can be played by simply placing a card with a QR code on the player. The new version has an improved case and is cheaper and easier to build. Internally it uses the volumio player which allows to not only play all MP3s from the local network, but also to connect streaming services like Spotify. Oh, and there is a rocket again, too. But this time it is optional." />
|
||
<meta property="og:image" content="http://tilman.de/projekte/qudio/images/qudio-01-space-02.jpg" />
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
|
||
|
||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css' />
|
||
<!-- <link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic' rel='stylesheet' type='text/css' /> -->
|
||
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet" type='text/css'>
|
||
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||
|
||
<style type="text/css" media="all">
|
||
<!--
|
||
body {
|
||
background-color: #FFFFFF;
|
||
color: black;
|
||
font-family: 'Roboto Slab', serif;
|
||
font-size: 160%;
|
||
}
|
||
|
||
p {
|
||
margin-top: 1.5em;
|
||
}
|
||
|
||
h1 {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
color: #303030;
|
||
}
|
||
|
||
h2, h3, h4 {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
font-weight: 800;
|
||
color: #303030;
|
||
margin-top: 1em;
|
||
}
|
||
|
||
#subtitle {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
font-weight: 800;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
color: #303030;
|
||
font-size: 120%;
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.gallery {
|
||
text-align: center;
|
||
margin-top: 2em;
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
.timestamp {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
text-align: right;
|
||
color: #888;
|
||
margin-top: 2em;
|
||
}
|
||
|
||
.fancybox-title {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
}
|
||
|
||
.fancybox-caption {
|
||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
}
|
||
-->
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
|
||
|
||
<div id="content" class="container">
|
||
<p class="timestamp">2019-01-26</p>
|
||
<h1>Qudio Player</h1>
|
||
<p id="subtitle">An easy-to-use music player for children based on the Raspberry Pi Zero and the JBL On Stage IIIp (again)</p>
|
||
|
||
<p class="well" style="text-align: center;">In spring 2016 I finalized the <a href="http://tilman.de/projekte/musikrakete/">"Musikrakete"</a>, a music player that our boys could operate without assistance. Later on, there was a <a href="http://www.tilman.de/projekte/audiosphere/">second version</a>. This is the third version, with all of the improvements I came up with during the last three years. It is easier and cheaper to build, the case is way smaller and much more robust. By switching to volumio the player now supports remote control from the phone and streaming services like Spotify. This is all combined with the existing features like playing MP3s from the local network and, most importantly, being easy to use even for small children. So if your children love music and audio books just like mine, this might be a project for you.</p>
|
||
|
||
<h2 id="history">The Idea</h2>
|
||
|
||
<a data-fancybox style="float:right;margin: 2em;" href="images/qudio-01-space.jpg" data-caption="The Qudio player (with the additional rocket). The QR cards are placed on the window on top of the case, where they are detected by a photo sensor that triggers the recognition process. After the code has been read by the webcam, the stream or MP3s it point to start playing."><img src="images/qudio-01-space-02.jpg"
|
||
width="320" alt="The Qudio player (with the additional rocket). The QR cards are placed on the window on top of the case, where they are detected by a photo sensor that triggers the recognition process. After the code has been read by the webcam, the stream or MP3s it point to start playing." /></a>
|
||
|
||
<p>
|
||
This project started in 2016, when Anica asked me if buying a <a href="https://de-de.hoerbert.com/">hörbert</a> MP3 player would be a good idea. At the time our boys wasted two to three CDs every week, trying to get some music out of the small player in their room. And the player in the living room also seemed to reach its end of life pretty soon due to their enthusiasm. Still I wasn't too sure about this hörbert thing. In order to get new files on the SD card of the player, the case had to be opened, the navigation with 11 buttons seemed a little confusing and a single speaker operated with four batteries also did not seem promising to me.
|
||
</p>
|
||
|
||
<p>
|
||
I had seen a <a href="http://www.die-schembergs.de/index.php?page=qr-music">project description of an MP3 player for small children</a> shortly before: A Raspberry Pi mini computer, connected to a webcam and speakers, reads QR codes and plays the respective track or playlist. So this was what I suggested and to my surprise it was considered a better solution right away. And I had a project.
|
||
</p>
|
||
|
||
<p>
|
||
As good as the project description seemed to be, I wanted to make some improvements on the original design: The player should detect the QR automatically, it should have buttons for play/pause and skipping and all components should be put together in a single case. Most importantly, the MP3 files should be delivered directly from our home server. No SD card replacement needed.
|
||
</p>
|
||
|
||
<p>
|
||
Since we had an old <a href="https://www.manualslib.com/manual/684236/Jbl-On-Stage-Iiip.html">JBL <em>On Stage IIIp</em></a> speaker lying around that wasn't used anymore due to its outdated iPhone dock connector, I decided to use this as a base. After playing around with <a href="https://www.onshape.com/">Onshape</a>, soldering and programming for three months, I had the <a href="http://tilman.de/projekte/musikrakete/">Musikrakete</a> ready by end of March 2016. It was a huge success with the boys and has been in heavy use ever since.
|
||
</p>
|
||
|
||
<p>
|
||
Over the last years I came up with some improvements on the original design and created a <a href="http://www.tilman.de/projekte/audiosphere/">second version</a>. But I always had some things in the back of my mind that I wanted to make better about both the hard- and the software and when the little brother moved into a room of his own, I knew it was time to bring all that to life. So this is the smaller, better and cheaper third version. The rocket on top is optional, by the way. But little brother would never have accepted a player that did not somehow include a rocket, since the original, rocket-shaped design is still used by the older one.
|
||
</p>
|
||
|
||
<div style="margin: 2em; text-align: center;">
|
||
<a data-fancybox href="images/qudio-assembly.gif"><img src="images/qudio-assembly.gif"
|
||
width="480" alt="Assembling the Qudio player" /></a>
|
||
<!--video controls><source src="Video to follow" type="video/mp4" /></video-->
|
||
</div>
|
||
|
||
<h2 id="piplayer3">PiPlayer 3.0: Qudio</h2>
|
||
|
||
<p>
|
||
This third version now relies on <a href="https://volumio.org/">volumio</a> which can play music from streaming services like Spotify Premium or LastFM, has a nice web interface and makes configuration easy. The case is much smaller than before, which makes it sturdier and easier to print. The electronic parts are all easily obtainable standard compontents and even cheaper than before. Again, it is built on top of the JBL On Stage IIIp speaker, that can still be found on ebay for little money and provides a perfect base for a player like this.
|
||
</p>
|
||
|
||
<p>
|
||
The main component is now a Raspberry Pi Zero W, that can be run off the dock connector without an additional power source. I replaced the Pimoroni PHAT DAC with a dirt cheap audio module based on the same chip. The IR sensor that detects the QR cards is now a ready-made module which makes assembly easier. The buttons have been replaced by the ubiqitous standard components that come with every Arduino starter kit.
|
||
</p>
|
||
|
||
<h2 id="parts">Parts list</h2>
|
||
|
||
<a data-fancybox style="float:right;margin: 2em;" href="images/IMG_20190122_094245.jpg"><img src="images/IMG_20190122_094245.jpg"
|
||
width="480" alt="Electronic parts for the Qudio player" /></a>
|
||
|
||
<ul>
|
||
<li>JBL On Stage IIIP - can be found on ebay for little money<br/><span style="color:red;">Caution:</span> The older On Stage III with the mini USB port will probably <em>not work!</em> I tried several and they either did not power the Raspberry Pi properly or I had noise issues that I could not resolve.</li>
|
||
<li>The <a href="https://github.com/tliero/qudio/tree/master/case">case, which consists of four parts</a>. I printed mine in standard PLA.</li>
|
||
<li>Raspberry Pi Zero W with a micro SD card a pin header</li>
|
||
<li><a href="images/IMG_20190122_091336.jpg" data-fancybox="part" data-caption="CJMCU-5102 with 10 kΩ resistor">CJMCU-5102 plus a 10 kΩ resistor</a>, some PCM5102A based module or any other I2S DAC that is supported by volumio. Search for 'pHAT DAC'. A USB sound card will not work, since the USB port is used by the webcam. (And the sound of the DAC modules is usually better.)</li>
|
||
<li><a href="images/IMG_20190122_091612.jpg" data-fancybox="part" data-caption="TCRT5000 sensor module">TCRT5000 reflective sensor module</a></li>
|
||
<li>The ultra-cheap <a href="images/IMG_20190122_082801.jpg" data-fancybox="part" data-caption="USB webcam">USB webcam</a> that can be found on ebay, aliexpress and the like (just sort for price). Some versions come with a small cable reel. This fits perfectly in the holder at the bottom of the case.</li>
|
||
<li><a href="images/IMG_20190122_091508.jpg" data-fancybox="part" data-caption="Micro USB adapter that goes directly into the plug">USB A to micro USB adapter</a> that connects the webcam to the Raspberry Pi's micro USB port</li>
|
||
<li><a href="images/IMG_20190123_110730.jpg" data-fancybox="part" data-caption="30-pin Apple dock adapter to micro USB and 3.5 mm audio">30-pin Apple dock adapter to micro USB and 3.5 mm audio. Search for '30-pin micro-usb adapter audio'.</a></li>
|
||
<li><a href="images/IMG_20190122_093929.jpg" data-fancybox="part" data-caption="3 mm white LED (with optional 220 Ω resistor)">White LED (preferably diffused) for illumination of the QR cards with a proper resistor</a></li>
|
||
<li>3 <a href="images/IMG_20190122_082511.jpg" data-fancybox="part" data-caption="Push buttons with 12 mm caps">push buttons with 12 mm caps</a></li>
|
||
<li>Jumper cables: 6x 10 cm M-F or F-F for the buttons, 5x 10 cm F-F for the audio module, 5x 20 cm F-F for the sensor and the LED</li>
|
||
<li>A small sheet of acrylic glass / plexiglass (around 2 mm)</li>
|
||
<li><a href="images/IMG_20190122_093439.jpg" data-fancybox="part" data-caption="M3 screws and nuts">2 M3×16 screws, 6 M3×8 screws and 3 nuts</a></li>
|
||
<li>5 M3 <a href="images/IMG_20190122_091418.jpg" data-fancybox="part" data-caption="Threaded inserts">threaded heat-set inserts</a></li>
|
||
<li>Soldering iron, drill, screwdriver, glue gun, box cutter</li>
|
||
</ul>
|
||
|
||
<!--p class="gallery">
|
||
<a href="images/IMG_20190122_091336.jpg" data-fancybox="parts" data-caption="CJMCU-5102 with 10 kΩ resistor"><img src="images/IMG_20190122_091336.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_091612.jpg" data-fancybox="parts" data-caption="TCRT5000 sensor module"><img src="images/IMG_20190122_091612.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_082801.jpg" data-fancybox="parts" data-caption="USB webcam"><img src="images/IMG_20190122_082801.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_091508.jpg" data-fancybox="parts" data-caption="Micro USB adapter that goes directly into the plug"><img src="images/IMG_20190122_091508.jpg"
|
||
width="180" alt="" /></a>
|
||
</p>
|
||
<p class="gallery">
|
||
<a href="images/IMG_20190122_092518.jpg" data-fancybox="parts" data-caption="30-pin Apple dock adapter to micro USB and 3.5 mm audio"><img src="images/IMG_20190122_092518.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_093929.jpg" data-fancybox="parts" data-caption="3 mm white LED (with optional 220 Ω resistor)"><img src="images/IMG_20190122_093929.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_082511.jpg" data-fancybox="parts" data-caption="Push buttons with 12 mm caps"><img src="images/IMG_20190122_082511.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_093439.jpg" data-fancybox="parts" data-caption="M3 screws and nuts"><img src="images/IMG_20190122_093439.jpg"
|
||
width="180" alt="" /></a>
|
||
<a href="images/IMG_20190122_091418.jpg" data-fancybox="parts" data-caption="Threaded inserts"><img src="images/IMG_20190122_091418.jpg"
|
||
width="180" alt="" /></a>
|
||
</p-->
|
||
|
||
|
||
|
||
<h2 id="components">Assembling the Components</h2>
|
||
|
||
<h3 id="mount">Preparing Speaker and Printed Case</h3>
|
||
|
||
<h4 id="jbl">Disassembling the JBL and Mounting the Bottom of the Case</h4>
|
||
|
||
<p>
|
||
In order to mount the case on the JBL, we have to disassemble the speaker and drill some holes. The screw in the center is hidden in the battery case, while the eight others are hidden under the rubber pads. Just peel them off carefully, we can glue them back on later.
|
||
</p>
|
||
|
||
<p>
|
||
After removing the screws you can upen up the case. (<a href="images/IMG_20190123_154258.jpg" data-fancybox="mounting" data-caption="The holes are placed where the drill should not hit the circuit board.">It is possible to drill the holes without removing the circuit board from the case. However, it might be a good idea to play it safe and get it out.</a>) The circuit board is fastened with another four screws that have to be removed. Then the board can be pulled out of the case carefully. The power button of the speaker is the most sensitive part here. To make life easier, you can also pull off the speaker cables from the board. Now the cover is completely separated from the bottom and the circuit board.
|
||
</p>
|
||
|
||
<p>
|
||
The next step is to drill the three mounting holes into the cover, for which you can use <a href="misc/JBL_screws_drilling_template.pdf">this template</a>. (Make sure to print without scaling.) Finally, we need to mount the base of the printed case to the speaker case using thee M3 screws with nuts. Afterwards, we can put the circuit board back in the case and put all the screws back in place.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<!--a href="images/IMG_20181211_093736_cr.jpg" data-fancybox="mounting" data-caption="The backside of the JBL speaker. The screws are hidden under the rubber pads and in the battery case."><img src="images/IMG_20181211_093736_cr.jpg"
|
||
width="320" alt="The backside of the JBL speaker. The screws are hidden under the rubber pads and in the battery case." /></a-->
|
||
<a href="images/IMG_20181211_094955_cr.jpg" data-fancybox="mounting" data-caption="The rubber pads can be peeled off the speaker bottom. Remove all glue residues. The pads can be glued back on later."><img src="images/IMG_20181211_094955_cr.jpg"
|
||
width="320" alt="The rubber pads can be peeled off the speaker bottom. Remove all glue residues. The pads can be glued back on later." /></a>
|
||
<a href="images/IMG_20181211_100827_cr.jpg" data-fancybox="mounting" data-caption="Carefully remove the circuit board from the case"><img src="images/IMG_20181211_100827_cr.jpg"
|
||
width="320" alt="Carefully remove the circuit board from the case" /></a>
|
||
<a href="images/IMG_20181211_113036_cr.jpg" data-fancybox="mounting" data-caption="Drilling the holes using the template"><img src="images/IMG_20181211_113036_cr.jpg"
|
||
width="320" alt="Drilling the holes using the template" /></a>
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20181211_113151_cr.jpg" data-fancybox="mounting" data-caption="The speaker case with the mounting holes"><img src="images/IMG_20181211_113151_cr.jpg"
|
||
width="320" alt="The speaker case with the mounting holes" /></a>
|
||
<a href="images/IMG_20181211_113620_cr.jpg" data-fancybox="mounting" data-caption="Attaching the printed base"><img src="images/IMG_20181211_113620_cr.jpg"
|
||
width="320" alt="Attaching the printed base" /></a>
|
||
<a href="images/IMG_20181211_114121_cr.jpg" data-fancybox="mounting" data-caption="The JBL case before reassembly"><img src="images/IMG_20181211_114121_cr.jpg"
|
||
width="320" alt="The JBL case before reassembly" /></a>
|
||
</p>
|
||
|
||
<h4 id="inserts">Putting the Threaded Inserts into the Printed Parts</h4>
|
||
|
||
<p>
|
||
Now is also a good moment to put the threaded inserts into the printed parts. This is done by carefully pushing them into the plastic with a heated soldering iron. As soon as the plastic has cooled down, the inserts will stay in place and allow to close and open the connections without tearing the plastic apart. This <a href="https://www.3dhubs.com/knowledge-base/how-assemble-3d-printed-parts-threaded-fasteners#inserts">video on 3Dhubs shows how it is done</a>.
|
||
</p>
|
||
|
||
<p>
|
||
We put two M3 inserts into the bottom of the case, one into the cover to hold the TCRT5000 sensor and the remaining two into the curb that goes on top of the case.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20181212_091832_cr.jpg" data-fancybox data-caption="The printed curb after adding two threaded inserts with a soldering iron"><img src="images/IMG_20181212_091832_cr.jpg"
|
||
width="320" alt="The printed curb after adding two threaded inserts with a soldering iron" /></a>
|
||
</p>
|
||
|
||
<h4 id="inserts">Installing the Window</h4>
|
||
|
||
<p>
|
||
For the window on top of the case, we need to cut a 47 × 27 mm part of acrylic glass. This can be done with a normal cutter knife by (carefully!) repeatedly cutting along your marker line with a ruler until you can break it off. You might need to file the edges a bit until it fits into the 48 × 28 mm slot inside the cover.
|
||
</p>
|
||
|
||
<p>
|
||
When the glass fits into the case, point through the screw holes to mark where you have to drill. The acrylic glass can then be drilled just like the speaker case in the first step. With all the parts of the case now being ready, you can to a first test on putting everything together and closing the case.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20181211_122139_cr.jpg" data-fancybox="window" data-caption="Cutting the window glass"><img src="images/IMG_20181211_122139_cr.jpg"
|
||
width="320" alt="Cutting the window glass" /></a>
|
||
<!--a href="images/IMG_20181211_122508_cr.jpg" data-fancybox="window" data-caption=""><img src="images/IMG_20181211_122508_cr.jpg"
|
||
width="320" alt="" /></a-->
|
||
<a href="images/IMG_20181211_130234_cr.jpg" data-fancybox="window" data-caption="The two screws hold both the window and the curb in place"><img src="images/IMG_20181211_130234_cr.jpg"
|
||
width="320" alt="The two screws hold both the window and the curb in place" /></a>
|
||
<a href="images/IMG_20181211_130454_cr.jpg" data-fancybox="window" data-caption="The empty case, fully assembled"><img src="images/IMG_20181211_130454_cr.jpg"
|
||
width="320" alt="The empty case, fully assembled" /></a>
|
||
</p>
|
||
|
||
<h3 id="wiring">Wiring</h3>
|
||
|
||
<p>
|
||
Apart from preparing the audio module there is not much soldering involved. All the components are plugged together with jumper wires and put into the case.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="misc/qudio_connections.png" data-fancybox data-caption="All Qudio component connections in a <a href='misc/qudio.fzz'>Fritzing schema</a>"><img src="misc/qudio_connections.png"
|
||
width="640" alt="All Qudio component connections in a Fritzing schema" /></a>
|
||
</p>
|
||
|
||
<h4 id="audio-module">Audio Module</h4>
|
||
|
||
<p>
|
||
If you are also using the CJMCU-5102 module, you will have to <a href="https://blog.sengotta.net/connecting-a-pcm5102a-breakout-board-to-a-raspberry-pi/">pull the XMT pin to high by connecting it to the 3.3V pin via a 10 kΩ resistor.</a> This will unmute the audio output. Also, the FLT, DMT, SCL and FMT pins should be <a href="images/IMG_20190122_120812.jpg" data-fancybox data-caption="While not being the nicest soldering job known to man, the connection of the FLT, DMT, SCL and FMT pins to GND serves its purpose.">connected to the module's GND pin on the backside</a>. That way, only a single cable connection to GND on the Raspberry Pi is needed.
|
||
</p>
|
||
|
||
<p>
|
||
The other pins are connected to the Raspberry Pi as follows:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>VCC ↔ pin 2 (5V)</li>
|
||
<li>GND ↔ pin 6 (GND)</li>
|
||
<li>FLT ↔ GND</li>
|
||
<li>DMP ↔ GND</li>
|
||
<li>SCL ↔ GND</li>
|
||
<li>BCK ↔ pin 12 (GPIO 18)</li>
|
||
<li>DIN ↔ pin 40 (GPIO 21)</li>
|
||
<li>LCK ↔ pin 35 (GPIO 19)</li>
|
||
<li>FMT ↔ GND</li>
|
||
<li>XMT ↔ 10k Resistor <–> 3,3V of the PCM5102A board</li>
|
||
|
||
</ul>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20181214_084813_cr.jpg" data-fancybox data-caption="The CJMCU-5102 audio module needs a 10 kΩ resistor between XMT and 3.3V to unmute. I just soldered the biggest one I had directly on the board. The FLT, DMT, SCL and FMT pins are all connected to the GND pin on the backside."><img src="images/IMG_20181214_084813_cr.jpg"
|
||
width="320" alt="The CJMCU-5102 audio module needs a 10 kΩ resistor between XMT and 3.3V to unmute. I just soldered the biggest one I had directly on the board. The FLT, DMT, SCL and FMT pins are all connected to the GND pin on the backside." /></a>
|
||
</p>
|
||
|
||
<h4 id="camera">Camera</h4>
|
||
|
||
<p>
|
||
Before the <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">camera</a> can be put into the case, the clip on the backside has to be removed. Simply push out the pin and take it off. Now you can clip off the clip holders from the camera case.
|
||
</p>
|
||
|
||
<p>
|
||
Unfortunately, the cable also has to be moved from the back of the case to the bottom, in order to be able to place the camera at the bottom. You can just make a small cutout with a sharp knife to make space for the cable. However, if you want to play it safe it might be better to open the case up with a screwdriver before cutting it.
|
||
</p>
|
||
|
||
<p>
|
||
With the cable out of the way, the camera can be shoved into the holder at the center of the bottom part.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20190122_221540.jpg" data-fancybox data-caption="We have to put a small hole into the camera case in order to move the cable from the back to the bottom. The clip is also being removed."><img src="images/IMG_20190122_221540.jpg"
|
||
width="320" alt="We have to put a small hole into the camera case in order to move the cable from the back to the bottom. The clip is also being removed." /></a>
|
||
</p>
|
||
|
||
<p>
|
||
Finally, the focus has to be adjusted. The best way for that is connect the camera to another computer to get a live picture. You can also do it later on, but then you will have to take a snapshot and readjust the lens in turns. It is just easier with direct feedback.
|
||
</p>
|
||
|
||
<p>
|
||
Put the cover on top for the correct distance, then check if you get a clear picture. If not, turn the lens a bit and check again until you have a sharp image.
|
||
</p>
|
||
|
||
<h4 id="micro-usb-adapter">Dock Adapter Cable</h4>
|
||
|
||
<p>
|
||
Now insert the adapter cable on the dock connector in front of the camera. It should fit in nicely without any adjustments.
|
||
</p>
|
||
|
||
<h4 id="buttons">Buttons</h4>
|
||
|
||
<p>
|
||
The three buttons go directly in the small pockets on the bottom part of the printed case. While the front pins are put into the small holes in order to fasten them tightly, the pins on the other end should be bent up and soldered to the male end of the jumper wires. Connect the buttons to pins 9 (for PREV), 10 (for PLAY/PAUSE) and 11 (for NEXT). The other sides go to the ground pins 20, 30 and 34.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20190122_213553.jpg" data-fancybox="buttons" data-caption="The straightened pins can be directly soldered onto the M-F jumper wires"><img src="images/IMG_20190122_213553.jpg"
|
||
width="320" alt="The straightened pins can be directly soldered onto the M-F jumper wires" /></a>
|
||
<a href="images/IMG_20190123_163719.jpg" data-fancybox="buttons" data-caption="The straightened pins need to be bent upwards in order to leave enough space for the camera and the dock adapter"><img src="images/IMG_20190123_163719.jpg"
|
||
width="320" alt="The straightened pins need to be bent upwards in order to leave enough space for the camera and the dock adapter" /></a>
|
||
<!--a href="images/IMG_20181211_134417_cr.jpg" data-fancybox="buttons" data-caption="In the case, the straightened pins need to be bent even more upwards in order to leave enough space for the camera"><img src="images/IMG_20181211_134417_cr.jpg"
|
||
width="320" alt="In the case, the straightened pins need to be bent even more upwards in order to leave enough space for the camera" /></a-->
|
||
</p>
|
||
|
||
<h4 id="sensor">Sensor</h4>
|
||
|
||
<p>
|
||
The TCRT5000 sensor module is connected as follows:
|
||
</p>
|
||
|
||
<ul>
|
||
<li>VCC ↔ pin 4 (5V)</li>
|
||
<li>GND ↔ pin 14 (GND)</li>
|
||
<li>DO ↔ 29 (GPIO 5)</li>
|
||
</ul>
|
||
|
||
<p>
|
||
The pins of the module need to be bent up to fit in the case. (For some reason all the modules have 90 degree pins.) We can then use the M3 screw hole to fasten it to the top. The little potentiometer on board allows to adjust the sensitivity of the sensor in place.
|
||
</p>
|
||
|
||
<p>
|
||
My sensor permanently fired whenever if tightened the scew. Apparently the threaded insert connected two of the pins. I solved this by covering the pins on the back side with some hot glue.
|
||
</p>
|
||
|
||
<p>
|
||
The next problem was a little red power LED on the module. While being tiny, it put the whole printed case in a permanent red glow that did not look pretty and also would have been disturbing given that the player was to be put on a nightstand. I bypassed the LED with a tiny piece of wire that you can see in the pictures.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<!--a href="images/IMG_20181214_132419_cr.jpg" data-fancybox="sensor" data-caption=""><img src="images/IMG_20181214_132419_cr.jpg"
|
||
width="320" alt="" /></a-->
|
||
<a href="images/IMG_20181214_103426_cr.jpg" data-fancybox="sensor" data-caption="With the small wire replacing the red LED the permanent glow was stopped"><img src="images/IMG_20181214_103426_cr.jpg"
|
||
width="320" alt="With the small wire replacing the red LED the permanent glow was stopped" /></a>
|
||
<!--a href="images/IMG_20181214_083437_cr.jpg" data-fancybox="sensor" data-caption=""><img src="images/IMG_20181214_083437_cr.jpg"
|
||
width="320" alt="" /></a-->
|
||
<a href="images/IMG_20181214_132353_cr.jpg" data-fancybox="sensor" data-caption="Some hot glue on the back of the pins prevents the brass insert from shortening them"><img src="images/IMG_20181214_132353_cr.jpg"
|
||
width="320" alt="Some hot glue on the back of the pins prevents the brass insert from shortening them" /></a>
|
||
<a href="images/IMG_20181212_092149_cr.jpg" data-fancybox="sensor" data-caption="The pins on the sensor board have to be bent up before fastening it inside the cover"><img src="images/IMG_20181212_092149_cr.jpg"
|
||
width="320" alt="The pins on the sensor board have to be bent up before fastening it inside the cover" /></a>
|
||
</p>
|
||
|
||
<h4 id="led">LED</h4>
|
||
|
||
<p>
|
||
The led is put in the small holder at the front side inside the cover. Connect the long leg to pin 15 (GPIO 22) of the Raspberry Pi (with a resistor in between, if needed), the short one to pin 9 (GND). I dimmed the LED with a 220 Ω resistor even though it could work on 3.3 V because it was just too bright.
|
||
</p>
|
||
|
||
<h4 id="cables">Closing the Case</h3>
|
||
|
||
<p>
|
||
Now it is time to put the remaining parts in place: Hook up the camera to the Raspberry Pi using the micro USB adapter. Also connect the two ends of the dock adapter cable to the audio module and the Raspberry Pi. Move all the cables in a place where they do not block the camera and close the case.
|
||
</p>
|
||
|
||
<p class="gallery">
|
||
<a href="images/IMG_20181212_092937_cr.jpg" data-fancybox="close" data-caption="All these wires need to go somewhere..."><img src="images/IMG_20181212_092937_cr.jpg"
|
||
width="320" alt="All these wires need to go somewhere..." /></a>
|
||
<a href="images/IMG_20181219_102734_cr.jpg" data-fancybox="close" data-caption="This is not how this should look like"><img src="images/IMG_20181219_102734_cr.jpg"
|
||
width="320" alt="This is not how this should look like" /></a>
|
||
<a href="images/IMG_20181214_083322_cr.jpg" data-fancybox="close" data-caption="Our player, ready to go"><img src="images/IMG_20181214_083322_cr.jpg"
|
||
width="320" alt="Our player, ready to go" /></a>
|
||
</p>
|
||
|
||
|
||
<h2 id="software">Software Installation and Configuration</h2>
|
||
<pre style="background-color:#ff9999">
|
||
TODO
|
||
|
||
Etcher?
|
||
</pre>
|
||
|
||
|
||
<h3 id="volumio">Volumio</h3>
|
||
|
||
<p>
|
||
First of all, you will have to download the <a href="https://volumio.org/get-started/">volumio image for Raspberry Pi</a> and put it on your micro SD card. Once you have done that, put it in and start the Raspberry Pi by powering the speaker.
|
||
</p>
|
||
|
||
<p>
|
||
The initial configuration is pretty straight forward. Open up <a href="http://volumio.local">volumio.local</a> (or the Raspberry Pi's IP address) in your browser and click through the installation assistant. Set the output to "Generic I2S DAC", activate the software mixer and connect to your network share (if any). You can also already set up plugins for streaming services like Spotify. Finally, activate SSH on the developer page <a href="http://volumio.local/dev">volumio.local/dev</a> for the next steps.
|
||
</p>
|
||
|
||
<h3 id="python">Python Script</h3>
|
||
|
||
<p>
|
||
You can now connect to the Raspberry Pi via SSH as user volumio. The initial password is <em>volumio</em> which you might want to change with <code>passwd</code>.
|
||
</p>
|
||
|
||
<p>
|
||
The next step is to install the necessary software packages:
|
||
</p>
|
||
|
||
<pre><code>sudo apt-get install fswebcam zbar-tools</code></pre>
|
||
|
||
<pre style="background-color:#ffff99">
|
||
Install python 3.6 and socketio-client
|
||
Copy over script
|
||
</pre>
|
||
|
||
<h3 id="configuration">Configuration und Test</h3>
|
||
|
||
<pre style="background-color:#ffff99">
|
||
Test LED, Webcam
|
||
</pre>
|
||
|
||
<p>
|
||
For testing purposes you can print <a href="misc/test-cards.pdf">these QR code cards</a>.
|
||
</p>
|
||
|
||
|
||
<h2 id="qr-cards">QR Cards</h2>
|
||
|
||
<p>
|
||
The QR code on the cards should be about 10×10 mm large following this schema:
|
||
</p>
|
||
|
||
<a href="images/curb.png" data-fancybox data-caption="The window is 24×24 mm, the camera should see at least 10×10 mm in the center"><img src="images/curb.png"
|
||
width="320" alt="The window is 24×24 mm, the camera should see at least 10×10 mm in the center" /></a>
|
||
|
||
<p>
|
||
While the curb leaves 34 mm space for the card's width, it is a good practice to print the cards with a width of 33 mm. That way they do not get stuck and you can place exactly 9 cards in a line on an A4 sheet.
|
||
</p>
|
||
|
||
<p>
|
||
Since the creation of the cards can be a bit of a hassle when the collection grows larger, I have written a card generator for Spotify links. It takes a list of Spotify URIs as input and generates a PDF with the QR codes, the title and the album art. The information is printed both on the front and the back of the cards in order to make sorting of card stacks easier. I will put the generator online as soon as possible.
|
||
</p>
|
||
|
||
|
||
<h2>What's Left</h2>
|
||
|
||
<p>
|
||
</p>
|
||
|
||
|
||
<p>
|
||
If you have any questions or improvements please send me an e-mail to <a href="mailto:tliero@gmx.net">tliero@gmx.net</a>.
|
||
</p>
|
||
|
||
<pre style="display:none;background-color:#ffff99">
|
||
Intro-Video (evtl. mit Jacob)
|
||
Komponenten-Fotos:
|
||
Jumper-Kabel
|
||
Plexiglas
|
||
|
||
Live-Bild Kamera-Einstellung
|
||
|
||
LED im Case
|
||
|
||
IIIP!!!! noise, power supply
|
||
|
||
Fritzing-Schema
|
||
|
||
Test-QR
|
||
|
||
Druck säubern, insbes. Button holes
|
||
|
||
Link zu OnShape
|
||
|
||
|
||
deactivate microphone?
|
||
deactivate RasPi LED
|
||
12 mm caps?
|
||
acrylic glass --> size?
|
||
Bohrergröße
|
||
</pre>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|