Merge branch 'master' of https://gitlab.com/tliero/piplayer

documentation/qudio/index.html

@@ -8,7 +8,7 @@
 <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, an 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.jpg" />
+<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" />
 
@@ -92,8 +92,8 @@ h2, h3, h4 {
 
 		<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.jpg"
-				width="480" 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>
+		<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.
@@ -116,7 +116,8 @@ h2, h3, h4 {
 		</p>
 
 		<div style="margin: 2em; text-align: center;">
-			<em>TODO - Short intro video</em>
+			<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>
 
@@ -131,26 +132,51 @@ h2, h3, h4 {
 		</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</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</li>
-			<li><a href="https://blog.sengotta.net/connecting-a-pcm5102a-breakout-board-to-a-raspberry-pi/">CJMCU-5102 plus a 10 k&#8486; resistor</a>, some other 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.</li>
-			<li>TCRT5000 reflective sensor module</li>
-			<li>The ultra-cheap <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">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 data-fancybox href="images/usb-a-to-micro-usb-adapter.jpg">USB A to micro USB adapter</a> that connects the webcam to the Raspberry Pi's micro USB port</li>
-			<li><a data-fancybox href="images/30-pin-apple-dock-to-micro-usb-and-audio-adapter.jpg">30-pin Apple dock adapter to micro USB and 3.5 mm audio</a></li>
-			<li>White LED (preferably diffused) for illumination of the QR cards with a proper resistor</li>
-			<li>3 push buttons with 12 mm caps</li>
+			<li><a href="images/IMG_20190122_091336.jpg" data-fancybox="part" data-caption="CJMCU-5102 with 10 k&#8486; resistor">CJMCU-5102 plus a 10 k&#8486; 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_20190122_092518.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</a></li>
+			<li><a href="images/IMG_20190122_093929.jpg" data-fancybox="part" data-caption="3 mm white LED (with optional 220 &#8486; 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 M-F 10 cm for the buttons, 5x F-F 10 cm for the audio module,  4x F-F 20 cm for the sensor and the LED</li>
 			<li>A small sheet of acrylic glass / plexiglass (around 2 mm)</li>
-			<li>2 M3&times;16 screws</li>
-			<li>6 M3&times;8 screws with 3 nuts</li>
-			<li>5 M3 <a href="https://www.3dhubs.com/knowledge-base/how-assemble-3d-printed-parts-threaded-fasteners#inserts">threaded heat-set inserts</a></li>
+			<li><a href="images/IMG_20190122_093439.jpg" data-fancybox="part" data-caption="M3 screws and nuts">2 M3&times;16 screws, 6 M3&times;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&#8486; 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 &#8486; 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>
@@ -232,7 +258,7 @@ h2, h3, h4 {
 		<h4 id="audio-module">Audio Module</h3>
 		
 		<p>
-		If you are also using the CMJCU-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&#8486; resistor.</a> This will unmute the audio output. Also, the FLT, DMT, SCL and FMT pins should be connected to the module's GND pin on the backside. That way, only a single cable connection to GND on the Raspberry Pi is needed.
+		If you are also using the CMJCU-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&#8486; 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>
@@ -311,13 +337,13 @@ h2, h3, h4 {
 		<h4 id="led">LED</h3>
 		
 		<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 100 &#8486; resistor even though it could work on 3.3 V because it was just too bright.
+		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 &#8486; resistor even though it could work on 3.3 V because it was just too bright.
 		</p>
 
 		<h4 id="camera">Camera</h3>
 		
 		<p>
-		The webcam is simply shoved into the holder at the center of the bottom. Afterwards, we need to adjust the focus. 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.
+		The <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">webcam</a> is simply shoved into the holder at the center of the bottom. Afterwards, we need to adjust the focus. 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>
@@ -390,20 +416,11 @@ h2, h3, h4 {
 		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="background-color:#ffff99">
+<pre style="display:none;background-color:#ffff99">
 Intro-Video (evtl. mit Jacob)
 Komponenten-Fotos:
-	Gesamt-Aufnahme mit Elektronik-Komponenten (plus Raspi, Kamera)
-	CJMCU-5102, 10K-Widerstand, Rückseite
-	TCRT5000 (beide Seiten)
-	USB-Adapter
-	Dock-Adapter
-	LED
-	Buttons
 	Jumper-Kabel
 	Plexiglas
-	Schrauben
-	Gewindeeinsätze
 
 Screenshots OnShape