documentation

This commit is contained in:
2017-01-24 20:57:16 +01:00
parent 6f823e94a2
commit 42d4d70a68
6 changed files with 72 additions and 45 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 KiB

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

+58 -31
View File
@@ -90,7 +90,7 @@ h2, h3 {
<h1>AudioSphere</h1>
<p id="subtitle">An easy-to-use music player for children based on the Raspberry Pi Zero and the JBL On Stage IIIp</p>
<p style="font-weight: 700;">In spring 2016 I finalized the <a href="http://tilman.de/projekte/musikrakete/">Musikrakete</a>, an MP3 player that our boys could use without assistance. This is the second version: Not a rocket anymore, but with many improvements. <!-- Music is played by simply placing QR code cards on the window on top. --></p>
<p style="font-weight: 700;">In spring 2016 I finalized the <a href="http://tilman.de/projekte/musikrakete/">Musikrakete</a>, an MP3 player that our boys could operate without assistance. This is the second version, that is even easier to use. Music is played by simply placing a QR code card on top of the sphere.</p>
<p class="gallery" style="float:right;">
<a href="photos/02.jpg" class="fancybox"><img src="images/audiosphere-02.jpg"
@@ -109,7 +109,7 @@ h2, h3 {
<h2 id="idea">The Idea</h2>
<p>
This project started about a year ago, when Anica asked me if buying a <a href="https://de-de.hoerbert.com/">hörbert</a> MP3 player would be a good idea. After all 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 the device. In order to get new files on the SD card of the player, the case had to be opened, the navigation with 11 buttons also seemed a little confusing and a single speaker operated with four batteries also did not seem promising to me.
This project started about a year ago, 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 also seemed a little confusing and a single speaker operated with four batteries also did not seem promising to me.
</p>
<p>
@@ -117,7 +117,7 @@ h2, h3 {
</p>
<p>
As good as the description seemed to be, I wanted to make some improvements on the original design: The player should detect the QR cards on its own, all components should be put together in a single case and, most important, the MP3 should be delivered directly from our home server. No SD card replacement needed.
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 cards on its own, all components should be put together in a single case and, most important, the MP3 files should be delivered directly from our home server. No SD card replacement needed.
</p>
<p>
@@ -131,11 +131,11 @@ h2, h3 {
<h2 id="piplayer2">PiPlayer 2.0: AudioSphere</h2>
<p>
The major improvement in handling was switching from a QR card slot to a window on top where the QR cards are placed on. I had seen that especially the smaller one had problems getting the cards into the narrow slot. Unfortunately, this also meant that a rocket shape was not an option anymore. At first I tried to put only a hemisphere on top of the JBL speaker which would make it look like a UFO. But the webcam needed at least 10&nbsp;cm distance to the card in order have the entire QR code covered. Technically, it would be possible to further reduce the size of the ball but fitting all the components in there is hard enough as it is. Also, I wanted to be able to use the cards from the first player in the new one as well.
The major improvement in handling was switching from a QR card slot to a window on top where the QR cards are placed on. I had seen that especially the smaller one had problems getting the cards into the narrow slot. Unfortunately, this also meant that a rocket shape was not an option anymore. At first I tried to put only a hemisphere on top of the JBL speaker which would make it look like a UFO. But the webcam needed at least 8&nbsp;cm distance to the card in order have the entire QR code covered. Technically, it would be possible to further reduce the size of the ball but fitting all the components in there is hard enough as it is. Also, I wanted to be able to use the relatively large cards from the first player in the new one as well.
</p>
<p>
Also, an ethernet port is now available (since we had problems with the Wi-Fi connection in the boy's room) and thanks to switching to the Raspberry Pi Zero, the Apple dock port is now able to provide power for all the components. No additonal power source needed. By incorporating a <a href="https://shop.pimoroni.com/products/phat-dac">Pimoroni PHAT DAC</a> I removed all the audio-related headaches.
Also, an ethernet port is now available (since we had problems with the Wi-Fi connection in the boy's room) and thanks to switching to the Raspberry Pi Zero, the Apple dock port is now able to power all the components. No additonal power source needed. By incorporating a <a href="https://shop.pimoroni.com/products/phat-dac">Pimoroni PHAT DAC</a> I removed all the audio-related headaches.
</p>
<p>
@@ -149,7 +149,7 @@ h2, h3 {
<h2 id="case">3D Printed Case</h2>
<p>
First step was the design of the new case. Like the first <a href="https://cad.onshape.com/documents/56f3cf83e4b02f6312a93771/w/785ccf8684baed006305bb0d/e/c68592f13fbf9a2c69b8dd05">rocket case</a> it's public, you can find it <a href="https://cad.onshape.com/documents/584e7d080f617710a60fc5d3/w/28f44a0afe402320fa3f3faa/e/765c3d5ab7a1032836866ac8">here on Onshape</a>. (You will need to create an account to open the document.) Or you can download the <a href="https://github.com/tliero/audiosphere/tree/master/case">STL files</a> for printing if you are using the very same components. Please note that you will need to rotate the top of the sphere 180° for printing. Also be careful about the Raspberry holder: The Raspberry Pi together with the PHAT DAC should have a height of about 7 mm (or less) which depends on the GPIO header that is used to solder the PHAT DAC to the RasPi. If the height exeeds 7 mm the distance has to be adjusted before printing.
First step was the design of the new case. Like the first <a href="https://cad.onshape.com/documents/56f3cf83e4b02f6312a93771/w/785ccf8684baed006305bb0d/e/c68592f13fbf9a2c69b8dd05">rocket case</a> it's public, you can find it <a href="https://cad.onshape.com/documents/584e7d080f617710a60fc5d3/w/28f44a0afe402320fa3f3faa/e/765c3d5ab7a1032836866ac8">here on Onshape</a>. (You will need to create an account to open the document.) Or you can download the <a href="https://github.com/tliero/audiosphere/tree/master/case">STL files</a> for printing if you are using the very same components. Please note that you will need to rotate the top of the sphere 180° for printing. Also be careful about the Raspberry holder: The Raspberry Pi together with the PHAT DAC should have a <a href="images/phat_dac_measure.jpg" class="fancybox">height of 7.2 mm</a> (or less) which depends on the GPIO header that is used to solder the PHAT DAC to the RasPi. If the height exeeds that, the distance needs to be adjusted before printing.
</p>
<p class="gallery">
@@ -169,15 +169,15 @@ h2, h3 {
<ul>
<li>The sphere case, printed via <a href="https://www.3dhubs.com/">3dhubs.com</a></li>
<li>JBL On Stage IIIP (used via ebay for less than 20 €)</li>
<li>3 &times; M3 screws with nuts and washers for mounting the case on the speaker</li>
<li>Raspberry Pi Zero with an SD card</li>
<li>Raspberry Pi Zero with a micro SD card</li>
<li><a href="https://shop.pimoroni.com/products/phat-dac">Pimoroni PHAT DAC</a></li>
<li>cheap USB Wi-Fi adapter</li>
<li>ultra-cheap <a href="images/micro-usb-hub.jpg">Micro USB HUB with ethernet port</a></li>
<li>ultra-cheap <a href="images/micro-usb-hub.jpg" class="fancybox">Micro USB HUB with ethernet port</a></li>
<li>even cheaper <a href="http://www.penguin.cz/~utx/hardware/USB_Camera_AX2311/">USB webcam</a></li>
<li><a 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><a href="images/30-pin-apple-dock-to-micro-usb-and-audio-adapter.jpg" class="fancybox">30-pin Apple dock adapter to micro USB and 3.5 mm audio</a></li>
<li>2 mm acrylic glass circle with 75 mm diameter. You can order these on ebay.</li>
<li>5 &times; M2.5 screws for the Raspberry Pi and the case</li>
<li>3 &times; M3 nylon screws with nuts and washers for mounting the case on the speaker</li>
<li>5 &times; M2.5 nylon screws (with 3 washers and 8 nuts) for the Raspberry Pi and the case</li>
<li>
Electronic components:
<ul>
@@ -189,6 +189,7 @@ h2, h3 {
<li>Infrared LED (904 nm) for remote controlling the speaker</li>
<li>Jumper wires</li>
<li>copper wire, circuit board, solder</li>
<li>probably a breadboard for testing everything out before soldering</li>
</ul>
<li>
Tools:
@@ -198,14 +199,14 @@ h2, h3 {
<li>Screwdriver</li>
<li>Cutting knife</li>
<li>Power drill</li>
<li>Superglue (for the window)</li>
<li>Superglue (for the window and the case nuts)</li>
</ul>
</li>
</ul>
<h3 id="jblpreparation">Preparing the JBL IIIp Speaker</h3>
<p>
In order to drill the holes for the screws, the JBL On Stage IIIp has to be disassembled. The procedure is described <a href="https://de.ifixit.com/Guide/JBL+On+Stage+II+Speakers+Replacement/22462">here at ifixit.com for the predecessor</a> which works basically the same way: Remove the rubber pads, then remove all screws from the case. (Don't forget the center screw in the battery case.) Once the speaker case is opened, the circuit board is unscrewed and removed.
In order to drill the holes for the screws, the speaker has to be disassembled. The procedure is described <a href="https://de.ifixit.com/Guide/JBL+On+Stage+II+Speakers+Replacement/22462">here at ifixit.com for the predecessor</a> which works basically the same way: Remove the rubber pads, then remove all screws from the case. (Don't forget the center screw in the battery case.) Once the speaker case is opened, the circuit board is unscrewed and removed.
</p>
<p>
@@ -213,11 +214,11 @@ h2, h3 {
</p>
<p>
After drilling, washers and screws are added and the infrared LED is glued directly in front of the speaker's IR sensor in order to send it commands. Before that the PINs of the IR LED are soldered to cables, that are long enough to connect it to the circuit board through one of the additional holes. Also, all the electronics should be tested together before anything is hot-glued into the case.
After drilling, washers and screws are added and the infrared LED is glued directly in front of the speaker's IR sensor in order to send it commands. Before that the PINs of the IR LED are soldered to cables that are long enough to connect it to the circuit board through one of the additional holes. Also, all the electronics should be tested together before anything is hot-glued into the case.
</p>
<p>
(Disclaimer: I only did a proof of concept test script for remote contolling the speaker via the IR LED until now. I am planning on using that component later on via a web app but for the time being you could as well leave it out.)
(Disclaimer: Until now, I only did a proof of concept test script for remote contolling the speaker via the IR LED. I am planning on using that component later on via a web app but for the time being you could as well leave it out.)
</p>
<p class="gallery">
@@ -228,28 +229,53 @@ h2, h3 {
<h3 id="electronics">Electronics</h3>
<p>
There are four electronic parts: The reflective optical sensor that triggers the QR recognition process, the LED that illuminates the QR card from within the case, the infrared LED that passes commands to the speaker and the 3 momentary push buttions that are used to pause/unpause playback and move within the current playlist. While the buttons and the LEDs are put directly in the case, all other elements are brought together on a circuit board from where they are connected to the RasPi via jumper cables. (Below is a diagram of the electronics and <a href="https://github.com/tliero/audiosphere/blob/master/misc/electronics-final.fzz">here's the source file</a> for <a href="http://fritzing.org">fritzing</a>.)
</p>
<p>
After <!-- http://www.instructables.com/id/Multiroom-Client-With-Raspberry-Pi-ZERO-and-PHAT-D/?ALLSTEPS --><a href="https://learn.pimoroni.com/tutorial/sandyj/soldering-phats">soldering the PHAT DAC onto the Raspberri Pi</a> (preferably using a <a href="images/gpio-header.jpg">GPIO header</a> that directly routes through all the GPIOs) the used PINs are connected with the jumper cables. Where these were not soldered to the contact, I used hot glue to fix the connection which worked pretty well.
There are four electronic parts: The reflective optical sensor that triggers the QR recognition process, the LED that illuminates the QR card from within the case, the infrared LED that passes commands to the speaker and the 3 momentary push buttions that are used to pause/unpause playback and move within the current playlist. While the buttons and the LEDs are put directly in the case, all other elements are brought together on a circuit board from where they are connected to the RasPi via jumper cables. So this is what we're aiming for:
</p>
<p class="gallery">
<a href="images/audiosphere-electronics.png" class="fancybox" rel="collection03"><img src="images/audiosphere-electronics.png" width="320" alt="The electronics in a single diagram with the optical sensor on the left, the LED, the infrared LED for remote controlling the speaker and the three buttons." /></a>
<a href="images/circuit_board.jpg" class="fancybox" rel="collection03"><img src="images/circuit_board.jpg" width="320" alt="The circuit board after soldering with all resistors and the LED for illumination. Buttons, optical sensor and infrared LED are installed directly in the case." /></a>
<a href="images/piplayer-opened.jpg" class="fancybox" rel="collection03"><img src="images/piplayer-opened.jpg" width="320" alt="Interior view of the AudioSphere player with all components assebled. The circuit board is glued to the front side (not visible from this angle)." /></a>
<a href="images/audiosphere-electronics.png" class="fancybox"><img src="images/audiosphere-electronics.png" width="480" alt="The electronics in a single diagram with the optical sensor on the left, the LED, the infrared LED and the three buttons on the right. (<a href='https://github.com/tliero/audiosphere/blob/master/misc/electronics-final.fzz'>Source file</a> for <a href='http://fritzing.org'>fritzing</a>)" /></a>
</p>
<p>
Assembling the circuit is pretty straight forward. Be careful about the optical sensor, though: There are two versions out there, <a href="http://www.vishay.com/docs/83751/cny70.pdf">one from Vishay</a> and <a hreaf="http://smallsystems.isn-oldenburg.de/smallrobots/ws2001/Tischkante/cny70.pdf">one from TEMIC</a> that has the detector transistor upside down compared to the other one. Also note that I used a LED that can operate directly on the RasPi's 3.3&nbsp;V without a series resistor. If you use a smaller one (which should also be sufficient for illumination), you will need one.
</p>
<p>
After <!-- http://www.instructables.com/id/Multiroom-Client-With-Raspberry-Pi-ZERO-and-PHAT-D/?ALLSTEPS --><a href="https://learn.pimoroni.com/tutorial/sandyj/soldering-phats">soldering the PHAT DAC onto the Raspberri Pi</a> (preferably using a <a href="images/gpio-header.jpg">GPIO header</a> that directly routes through all the GPIOs) the used PINs are connected with the jumper cables. <!-- Where these were not soldered to the contact, I used hot glue to fix the connection which worked pretty well. -->
</p>
<p>
Once everything is connected together, it can be put in the case for the software installation and final adjustments. Wait with the hot glue until everything has been tested, especially on the camera!
</p>
<p class="gallery">
<a href="images/buttons_and_circuit_board.jpg" class="fancybox" rel="collection03"><img src="images/buttons_and_circuit_board.jpg" width="320" alt="The circuit board after soldering with all resistors, the transistor and open contacts to be connected via jumper cables. In order to protect the wire cables and soldering points from breaking, I applied hot glue after testing." /></a>
<a href="images/phat_dac_soldering.jpg" class="fancybox" rel="collection03"><img src="images/phat_dac_soldering.jpg" width="320" alt="The PHAT DAC after soldering." /></a>
<a href="images/phat_dac_soldering_back.jpg" class="fancybox" rel="collection03"><img src="images/phat_dac_soldering_back.jpg" width="320" alt="By my low standards, that is a pretty decent soldering. You can also see the nylon nuts I used as spacers." /></a>
</p>
<p class="gallery">
<a href="images/circuit_board.jpg" class="fancybox" rel="collection04"><img src="images/circuit_board.jpg" width="320" alt="I did not solder the jumper wires to the RasPi but also fixed them with hot glue. This keeps them together as a unit, isolates them from one another, and the hot glue can be peeled off if something goes wrong." /></a>
<a href="images/piplayer-opened.jpg" class="fancybox" rel="collection04"><img src="images/piplayer-opened.jpg" width="320" alt="Interior view of the AudioSphere player with all components assebled. The circuit board is glued to the front side (not visible from this angle)." /></a>
</p>
<p>
What's missing in the pictures is how to get a screw thread behind the holes in the case: Use super glue to put three M3 nuts on washers (in order to enlarge the surface). When dried, use the super glue again to attach these nuts-on-washers behind the screw holes of the case. (Use the screws to adjust them so you can turn them in and out. I used <a href="http://www.uhu.com/produkte/alleskleber/detail/uhu-alleskleber-superstrong-safe.html?cHash=6d17927cfdf1797595540fe083329e0a">UHU Super Strong and Safe</a> which gives you some time for corrections after applying.) Et voilà, you now got yourself screw holes with threads on the player's case.
</p>
<h2 id="software">Software</h2>
<h3 id="system">System Installation</h3>
<p>
Before installing anything additionally, <a href="https://www.raspberrypi.org/downloads/raspbian/">Raspbian Lite</a> has to be <a href="https://www.raspberrypi.org/documentation/installation/installing-images/README.md">installed on the SD card</a>. When the SD card is ready, it is necessary to at least once connect a monitor and a keyboard to the RasPi for the initial setup since SSH is disabled by default. As soon as wi-fi is configured, we can remove all the cables and continue to work remotely over ssh.
Before installing anything additionally, <a href="https://www.raspberrypi.org/downloads/raspbian/">Raspbian Lite</a> has to be <a href="https://www.raspberrypi.org/documentation/installation/installing-images/README.md">installed on the SD card</a>. When the card is ready, it is necessary to at least once connect a monitor and a keyboard to the RasPi for the initial setup since SSH is disabled by default. As soon as SSH is enabled and Wi-Fi is configured, we can remove all the cables and continue to work remotely over ssh.
</p>
<p>
Basic setup:
<em>From here on it's basically copy-and-paste to your SSH terminal. You might need to confirm or close something every now and then. Where a configuration file has to be edited, the contents that go to the file are also put in comments with a leading tab.</em>
</p>
<p>
Basic setup (with links to the references):
</p>
<pre class="pre-scrollable">
@@ -257,7 +283,7 @@ h2, h3 {
sudo apt update
sudo apt dist-upgrade
# Basic setup: password, keyboard layout, wi-fi channels, hostname, ssh
# Basic setup: change the password, set the keyboard layout, Wi-Fi channels and hostname and enable SSH
sudo raspi-config
# Check kernel messages for errors
@@ -266,10 +292,10 @@ dmesg
# Check for connected USB devices
lsusb
# Install wi-fi client (<a href="https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md">https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md</a>)
# Install Wi-Fi client (<a href="https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md">https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md</a>)
sudo apt install iw
# If not done yet, plug in wi-fi adapter and reboot
# If not done yet, plug in the Wi-Fi adapter and reboot
sudo reboot
# Scan networks and add wi-fi network to configuration
@@ -280,7 +306,7 @@ sudo nano /etc/wpa_supplicant/wpa_supplicant.conf
# psk="Your_wifi_password"
# }
# Restart wi-fi
# Restart Wi-Fi
sudo ifdown wlan0
sudo ifup wlan0
@@ -292,16 +318,17 @@ sudo shutdown -h now
</pre>
<p>
From here on you can connect via SSH over wi-fi. Unplug monitor, keyboard and the ethernet cable. It might also be helpful to configure a static IP for the wi-fi adapter in your router, before continuing. Then restart the RasPi, <a href="https://www.raspberrypi.org/documentation/remote-access/ssh/">connect via SSH</a> from a different computer and go on with the setup procedure.
From here on you can connect via SSH over wi-fi. Unplug monitor, keyboard and the ethernet cable. It might also be helpful to configure a static IP for the Wi-Fi adapter in your router before continuing. Then restart the RasPi, <a href="https://www.raspberrypi.org/documentation/remote-access/ssh/">connect via SSH</a> from a different computer and go on with the setup procedure.
</p>
<pre>
# Now that remote connection is available, disable HDMI (<a href="http://www.jeffgeerling.com/blogs/jeff-geerling/raspberry-pi-zero-conserve-energy">http://www.jeffgeerling.com/blogs/jeff-geerling/raspberry-pi-zero-conserve-energy</a>)
# (This line has to go *before* "exit 0" at the end of the file)
sudo nano /etc/rc.local
# # disable HDMI
# /usr/bin/tvservice -o
# Disable the ACT LED
# Add this to config.txt to disable the ACT LED
sudo nano /boot/config.txt
# dtparam=act_led_trigger=none
# dtparam=act_led_activelow=off