1
0
Files
www.creative-crafter.de/rp-build-instructions/index.html
2025-11-22 22:23:34 +01:00

176 lines
4.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Crafter: Retro Portable Manual</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/quantum.js"></script>
<style>
@font-face {
font-family: "Lato";
src: url("/Lato-Black.ttf");
}
body, html {
font-family: 'Lato', sans-serif;
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
background-color: #ffffff;
}
.loader-container {
display: none;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(173, 216, 230, 0.8);
z-index: 9999;
}
.loading .loader-container {
display: flex;
}
body {
font-family: 'Titillium Web', sans-serif;
}
h1 {
font-family: 'Honk', system-ui;
text-align: center;
}
footer {
text-align: center;
}
a {
color: rgb(0, 41, 175)
}
.center-img {
display: block; /* Bild zu Blockelement machen */
margin-left: auto; /* Linken Rand automatisch setzen */
margin-right: auto; /* Rechten Rand automatisch setzen */
/* Kurzform: margin: 0 auto; */
}
h2 {
text-align: center;
}
pre {
background-color:rgb(0, 0, 0);
width: 225px
}
.pre-text {
color: #ffffff;
}
</style>
</head>
<br>
<img class="center-img" src="logo.png" alt="Logo" width="15%">
<h2>
Material:
</h2>
<div style="padding-left: 30%">
<h3>
- Micro SD card (rec. min. 32GB)
<br>
- <a href="https://www.raspberrypi.com/products/raspberry-pi-3-model-b-plus/" >Raspberry Pi 3 Model B+</a>
<br>
- <a href="https://www.amazon.de/-/en/gp/product/B093K2HDZF" >5 inch TFT LCD 800×480, DSI interface</a>
<br>
- <a href="https://www.amazon.de/dp/B09JK728MB?th=1" >I2S Soundcard (GPIO)</a>
<br>
- <a href="https://www.amazon.de/dp/B0DK37CSHP" >XBox-styled Bluetooth Gamepad</a>
<br>
- <a href="https://retropie.org.uk/download/" >RetroPie for Raspberry Pi 3B+</a>
<br>
- <a href="viewer.html" >3D printed Case</a>
<br>
- Keyboard for the Alsa Setup
<pre class="pre-text" >
pcm.!default {
type plug
slave.pcm "softvol"
}
pcm.softvol {
type softvol
slave {
pcm "dmix"
}
control {
name "Master"
card 0
}
}
</pre>
<br>
- <a href="https://www.amazon.de/dp/B0F5BQWHK3?th=1" >USB C Female charging module</a>
<br>
- <a href="https://www.amazon.de/dp/B086QGZRKG" >sliding switch</a>
<br>
- lipo battery with the capacity of 3.7V / 3800 mAh (measure.: 684mm x 81.3mm x 3.4mm)</a>
<br>
- <a href="https://www.amazon.de/dp/B0D2CSHWC4" >DC DC step Up Module 3.7V to 5V</a>
<br>
</h3>
</div>
<h2>
Instructions:
</h2>
<div style="padding-left: 30%">
<h3>
1. Flash RetroPie to the SD card using Raspberry Pi Imager and insert it into the Raspberry Pi.
<img src="raspimager.png" alt="pic of the raspi imager" width="60%">
<br><br>
2. Attach the Raspberry Pi to the display and connect the soundcard.
<br>
2.1. Align the Pis screw holes with the display.
<br>
2.2. Secure with mounting screws.
<br>
2.3. Insert the FPC cable into the DSI interface.
<br>
2.4. Connect the soundcard to the GPIO pins.
<br><br>
3. Plug in your keyboard, shut down EmulationStation, and configure the ALSA softvol.
<br><br>
4. Reboot the Raspberry Pi.
<br><br>
5. Solder the USB-C female charging module, sliding switch, LiPo battery, and the 3.7V-to-5V DC-DC step-up module together as shown.
<img src="schematic.png" alt="schematic.png" width="60%">
<br>
(5.1. In our module, the output voltage had to be set using two solder bridges. Both bridges must be open.)
<br><br>
6. Place the assembled components into the case and glue the USB-C module and sliding switch in their respective openings.
<br>
(6.1. Insert foam into the cavity.)
<br><br>
7. Attach the lid.
<br><br>
8. Mount the case onto the Xbox-style gamepad.
<br><br>
9. Start gaming!
</h3>
</div>