br0tkasten/www.creative-crafter.de
1
0
Fork 0
Code Releases Activity

rpbuildinstructions

Browse Source
This commit is contained in:
matt
2025-11-22 22:00:50 +01:00
parent 3093a2b37e
commit 6ae9d0705f
8 changed files with 3067 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
rp-build-instructions/index.html Normal file
View File

@ -0,0 +1,199 @@
<!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;
}
.button {
padding: 16px 32px;
border-radius: 8px;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
margin-top: 20px;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
.button:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}
.button:active {
box-shadow: 0 0px 1px rgba(0,0,0,0.8);
transform: scale(0.995);
}
.button-text {
font-weight: 600;
color: white;
font-size: 1.5em;
}
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;
}
</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>
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 Pi’s 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>

BIN
rp-build-instructions/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
rp-build-instructions/models/RetroPortable.glb Normal file
View File

Binary file not shown.

2748
rp-build-instructions/models/RetroPortable.obj Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
rp-build-instructions/models/RetroPortable.stl Normal file
View File

Binary file not shown.

BIN
rp-build-instructions/raspimager.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
rp-build-instructions/schematic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 MiB

120
rp-build-instructions/viewer.html Normal file
View File

@ -0,0 +1,120 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Retro Portable</title>
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: #1a1a1a;
font-family: Arial, sans-serif;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
h1 {
margin-bottom: 20px;
font-size: 2em;
color: #f0f0f0;
text-shadow: 0 0 5px #666;
}
model-viewer {
width: 80vw;
height: 80vh;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
border-radius: 12px;
background-color: #222;
}
.tooltip {
margin-top: 12px;
font-size: 0.95em;
color: #ccc;
}
.button-container {
display: flex; /* Buttons nebeneinander */
gap: 16px; /* Abstand zwischen den Buttons */
margin-top: 20px; /* Abstand zum oberen Inhalt */
}
.button {
padding: 16px 32px;
border-radius: 8px;
background: linear-gradient(to bottom, #ffffff); /* optional anpassen */
box-shadow: 0 2px 4px rgba(0,0,0,0.7);
transition: all 0.2s;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.button:hover {
box-shadow: 0 4px 8px rgba(255, 255, 255, 0.6);
}
.button:active {
box-shadow: 0 0px 1px rgba(0,0,0,0.8);
transform: scale(0.995);
}
.button-text {
font-weight: 600;
color: rgb(0, 0, 0);
font-size: 1.5em;
}
</style>
</head>
<body>
<h1>Retro Portable</h1>
<model-viewer
src="models/RetroPortable.glb"
alt="Retro Portable"
auto-rotate
camera-controls
interaction-prompt="none"
ar
shadow-intensity="1.5"
exposure="0.75"
environment-image="neutral"
tone-mapping="commerce"
></model-viewer>
<div class="tooltip">Click and drag to rotate the model. Use the mouse wheel to zoom.</div>
<div class="button-container">
<button class="button" onclick="window.location.href='models/RetroPortable.glb'">
<div class="button-inner">
<span class="button-text">.GLB</span>
</div>
</button>
<button class="button" onclick="window.location.href='models/RetroPortable.obj'">
<div class="button-inner">
<span class="button-text">.OBJ</span>
</div>
</button>
<button class="button" onclick="window.location.href='models/RetroPortable.stl'">
<div class="button-inner">
<span class="button-text">.STL</span>
</div>
</button>
</div>
<br>
<br>
</body>
</html>