QUELLCODE / HTML
index.html
project-site/index.html
1<!doctype html>2<!--3OpenAss: nur privat und experimentell. Bau, Download und Nutzung auf eigene Verantwortung.4Niemals Unternehmensrechner, Produktivsysteme, Industrieanlagen oder sicherheitskritische Systeme anschließen oder bedienen.5Keine freiwillige Funktions-/Sicherheitsgarantie; zwingende gesetzliche Ansprüche bleiben unberührt. Siehe DISCLAIMER.txt.6-->7<html lang="de">8<head>9 <meta charset="utf-8">10 <meta name="viewport" content="width=device-width,initial-scale=1">11 <meta name="theme-color" content="#f5f4ef">12 <title>OpenAss · LINK — Computer Use zum Anstecken</title>13 <meta name="description" content="LINK ist ein privater, experimenteller Hardware-Referenzprototyp für beaufsichtigtes Computer Use über HDMI und USB. Bau, Downloads und Nutzung auf eigene Verantwortung. Mit 3D-Modell, Quellcode und Dokumentation.">14 <link rel="canonical" href="https://openass.wolperdinger.at/">15 <meta property="og:type" content="website">16 <meta property="og:title" content="OpenAss · LINK — Computer Use zum Anstecken">17 <meta property="og:description" content="Nur privat und experimentell, auf eigene Verantwortung. HDMI sehen, USB bedienen — mit Freigabe vor jeder Eingabe. Quellcode, Firmware, Blender-Modell und 3D-Druckdateien.">18 <meta property="og:url" content="https://openass.wolperdinger.at/">19 <meta property="og:image" content="https://openass.wolperdinger.at/assets/social.jpg">20 <meta name="twitter:card" content="summary_large_image">21 <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">22 <link rel="stylesheet" href="styles.css">23 <link rel="preload" as="image" href="assets/ivory.webp">24 <script src="app.js" defer></script>25 <script type="application/ld+json">{"@context":"https://schema.org","@type":"CreativeWork","name":"OpenAss · LINK Hardware Box","description":"Privater, experimenteller HDMI/USB-HID-Referenzprototyp auf eigene Verantwortung; mit Freigabe vor jeder Eingabe, Python-Host, Pico-Firmware und 3D-Druckgehäuse.","url":"https://openass.wolperdinger.at/","dateModified":"2026-10-09","inLanguage":"de"}</script>26</head>27<body>28 <a class="skip-link" href="#main">Zum Inhalt</a>29 <header class="site-header">30 <a class="brand" href="./" aria-label="OpenAss Startseite">openass<span>.</span><small>HARDWARE LAB</small></a>31 <button class="menu-toggle" aria-label="Navigation öffnen" aria-controls="main-nav" aria-expanded="false"><span></span><span></span></button>32 <nav id="main-nav" aria-label="Hauptnavigation">33 <a href="#idee">Die Idee</a><a href="#hardware">Die Box</a><a href="docs/">Dokumentation</a><a href="source/">Quellcode</a><a class="nav-cta" href="#downloads">Downloads <span aria-hidden="true">↗</span></a>34 </nav>35 </header>36 <div class="wrap"><!-- USE_NOTICE --></div>37 <main id="main">38 <section class="hero wrap" aria-labelledby="hero-title">39 <div class="hero-copy">40 <div class="eyebrow"><span class="status-dot"></span> LINK / HARDWARE BOX</div>41 <h1 id="hero-title">Computer Use.<br><em>Zum Anstecken.</em></h1>42 <p class="hero-description">Eine Box, die den Bildschirm über HDMI sieht und Maus und Tastatur über USB bedient. Mit Raspberry Pi, Pico und deiner Freigabe vor jeder Eingabe.</p>43 <div class="hero-actions"><a class="button button-dark" href="downloads/openass-complete-project.zip" download>Gesamtes Projekt <span aria-hidden="true">↗</span></a><a class="text-link" href="#idee">So funktioniert’s <span aria-hidden="true">↓</span></a></div>44 <p class="hero-note">Experimenteller Referenzprototyp · Nur für private Testaufbauten</p>45 </div>46 <div class="product-stage" id="product-stage">47 <div class="stage-caption"><span>01 / PRINT EDITION</span><span>LINK</span></div>48 <img class="hero-product" id="hero-product" src="assets/ivory.webp" width="1600" height="1179" alt="Matte weiße LINK-Box mit gerundeten Ecken, kleinem roten Not-Aus-Pilz und USB-A-Kabel">49 <div class="viewer-container" id="viewer-container" hidden></div>50 <div class="stage-controls">51 <div class="color-options" role="group" aria-label="Gehäusefarbe">52 <button class="color-button active" data-color="ivory" aria-pressed="true"><i class="swatch swatch-ivory"></i><span>Kreideweiß</span></button>53 <button class="color-button" data-color="anthracite" aria-pressed="false"><i class="swatch swatch-anthracite"></i><span>Anthrazit</span></button>54 </div>55 <button class="viewer-button" id="viewer-button"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m12 3 8 4.5v9L12 21l-8-4.5v-9L12 3Zm0 0v9m8-4.5-8 4.5-8-4.5m8 4.5v9"/></svg><span>3D ansehen</span></button>56 </div>57 <p class="viewer-status" id="viewer-status" aria-live="polite"></p>58 </div>59 </section>60 <div class="fact-bar wrap" aria-label="Projekt auf einen Blick">61 <div><strong>HDMI + USB</strong><span>Bild rein. Eingaben raus.</span></div><div><strong>Pi 5 + Pico 2</strong><span>Zwei klare Aufgaben.</span></div><div><strong>215 × 145 × 47 mm</strong><span>Kompaktes Druckgehäuse.</span></div><div><strong>Alles an einem Ort</strong><span>Code, Firmware, Modelle.</span></div>62 </div>6364 <section class="idea-section wrap section" id="idee" aria-labelledby="idea-title">65 <div class="section-heading"><div><p class="eyebrow">DIE IDEE / 02</p><h2 id="idea-title">Der Bildschirm ist<br>die Schnittstelle.</h2></div><p>Auf dem Zielrechner braucht es keine spezielle Fernsteuerungssoftware. Die Box arbeitet mit dem sichtbaren Bild und normalen USB-Eingaben.</p></div>66 <div class="architecture-panel">67 <div class="architecture-top"><span class="panel-label">ZWEI WEGE. EIN GESCHLOSSENER LOOP.</span><div class="flow-tabs" role="group" aria-label="Signalweg hervorheben"><button data-flow="video" class="active" aria-pressed="true">Bildweg</button><button data-flow="control" aria-pressed="false">Steuerweg</button></div></div>68 <div class="diagram-scroll"><svg class="signal-diagram" id="signal-diagram" viewBox="0 0 1000 390" role="img" aria-labelledby="diagram-title diagram-desc">69 <title id="diagram-title">Signalwege der LINK Hardware Box</title><desc id="diagram-desc">HDMI führt vom Zielcomputer zur Capture-Karte und direkt zum Monitor. USB-Video führt zum Raspberry Pi. Nach API-Analyse und lokaler Freigabe führt isolierte UART zum Pico und USB-HID zurück zum Zielcomputer.</desc>70 <defs><marker id="arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0 0 8 4 0 8" fill="context-stroke"/></marker></defs>71 <g class="route route-video"><path d="M216 95H376"/><path d="M576 95H784"/><path d="M476 134V224"/><text x="290" y="78">HDMI</text><text x="677" y="78">HDMI LOOP</text><text x="490" y="182">USB 3 · UVC</text></g>72 <g class="route route-control"><path d="M576 267H784"/><path d="M784 287H576"/><path d="M376 267H216"/><path d="M116 224V135"/><text x="682" y="247">SCREENSHOT / API</text><text x="682" y="312">AKTIONSVORSCHLAG</text><text x="292" y="247">ISOLIERTE UART</text><text x="92" y="186" transform="rotate(-90 92 186)">USB HID</text></g>73 <g class="diagram-node"><rect x="16" y="55" width="200" height="80" rx="17"/><text x="116" y="92" class="node-title">Zielcomputer</text><text x="116" y="115" class="node-sub">Laptop oder PC</text></g>74 <g class="diagram-node"><rect x="376" y="55" width="200" height="80" rx="17"/><text x="476" y="92" class="node-title">HDMI Capture</text><text x="476" y="115" class="node-sub">Bild aufnehmen & weiterleiten</text></g>75 <g class="diagram-node"><rect x="784" y="55" width="200" height="80" rx="17"/><text x="884" y="92" class="node-title">Dein Monitor</text><text x="884" y="115" class="node-sub">Direkter Hardware-Bildweg</text></g>76 <g class="diagram-node"><rect x="16" y="224" width="200" height="86" rx="17"/><text x="116" y="261" class="node-title">Pico 2</text><text x="116" y="285" class="node-sub">Maus & Tastatur</text></g>77 <g class="diagram-node node-pi"><rect x="376" y="224" width="200" height="86" rx="17"/><text x="476" y="261" class="node-title">Raspberry Pi 5</text><text x="476" y="285" class="node-sub">Capture · Prüfung · Freigabe</text></g>78 <g class="diagram-node"><rect x="784" y="224" width="200" height="86" rx="17"/><text x="884" y="261" class="node-title">OpenAI / Astra</text><text x="884" y="285" class="node-sub">Bild verstehen & planen</text></g>79 <text class="diagram-footnote" x="500" y="365">Neue Eingabe → neues Bild → nächste Entscheidung.</text>80 </svg></div><p class="diagram-scroll-hint">Signalplan seitlich verschieben →</p>81 <p class="flow-caption" id="flow-caption" aria-live="polite">Der HDMI-Loop gibt das Bild direkt an deinen Monitor weiter. Parallel empfängt der Pi das Capture-Bild über USB.</p>82 </div>83 <div class="steps-grid"><article><span>01</span><h3>Sehen</h3><p>Die Capture-Karte liefert das aktuelle HDMI-Bild. Der normale Monitor bleibt im direkten Hardwarepfad.</p></article><article><span>02</span><h3>Verstehen</h3><p>Der Pi bereitet den Screenshot auf. Astra schlägt passende Maus- und Tastaturaktionen vor.</p></article><article><span>03</span><h3>Freigeben</h3><p>Die lokale Prüfung zeigt die konkrete Aktion. Erst deine einzelne Bestätigung gibt eine Eingabe frei.</p></article><article><span>04</span><h3>Bedienen</h3><p>Der Pico erzeugt USB-HID-Reports. Ein neues Bildschirmbild zeigt, was die Eingabe bewirkt hat.</p></article></div>84 </section>8586 <section class="hardware-section section" id="hardware" aria-labelledby="hardware-title"><div class="wrap">87 <div class="section-heading"><div><p class="eyebrow">DIE BOX / 03</p><h2 id="hardware-title">Kleine Form.<br>Durchdachter Aufbau.</h2></div><p>Weiche Radien, matte Oberfläche und eine schmale Schattenfuge. Alle Anschlüsse sitzen zusammen auf der Rückseite, die Schrauben verschwinden darunter.</p></div>88 <div class="hardware-layout"><div class="gallery">89 <div class="gallery-image"><img id="gallery-image" src="assets/internals.webp" width="1600" height="1179" loading="lazy" alt="Innenaufbau mit Raspberry Pi 5, Active Cooler, Pico 2, Capture-Modul und Kabeln"></div>90 <div class="gallery-tabs" role="group" aria-label="Produktansicht wählen"><button class="active" data-view="internals" aria-pressed="true">Innenaufbau</button><button data-view="rear" aria-pressed="false">Anschlüsse</button><button data-view="open" aria-pressed="false">Explosionsansicht</button></div>91 <p id="gallery-caption">Modellierte Elektronik und Kabelführung. Die endgültige Hardwarepassung wird am Prototyp geprüft.</p>92 </div><div class="component-list"><article><span>01</span><div><h3>Raspberry Pi 5</h3><p>Capture, API-Verbindung und lokaler Leitstand. Mit aktiver Kühlung für den Host.</p></div></article><article><span>02</span><div><h3>Pico 2 / USB HID</h3><p>Ein eigener Mikrocontroller für Maus und Tastatur. Zum Pi führt ein isolierter UART-Rückkanal.</p></div></article><article><span>03</span><div><h3>HDMI mit Loop-through</h3><p>HDMI IN und OUT für den Monitor. Der Referenzaufbau nutzt ein UVC-Capture-Gerät.</p></div></article><article><span>04</span><div><h3>Mini-Not-Aus & ARM</h3><p>Roter Pilzkopf mit gelbem Sockelring und separate Freigabetaste. Der Pilz ist eine Formreferenz für ein reales Schaltelement.</p></div></article><a class="text-link" href="docs/hardware.html">Hardwareliste & Verkabelung <span aria-hidden="true">↗</span></a></div></div>93 <div class="print-heading"><h3>Drei Teile für deinen 3D-Drucker.</h3><a class="text-link" href="docs/printing.html">Druck- und Montagehinweise ↗</a></div>94 <div class="print-parts"><a href="downloads/01-upper-shell.stl" download><span class="part-index">01 / STL</span><svg viewBox="0 0 150 70" aria-hidden="true"><path d="M17 41 56 18q7-4 16-2l58 15q7 2 7 8v9q0 5-7 8L91 69q-6 2-13 0L21 51q-5-2-4-10Zm0 0 63 20q5 2 12-1l45-22M80 61v9"/></svg><div><h4>Oberschale</h4><p>215 × 145 × 38,5 mm</p></div><span class="part-arrow" aria-hidden="true">↓</span></a><a href="downloads/02-bottom-tray.stl" download><span class="part-index">02 / STL</span><svg viewBox="0 0 150 70" aria-hidden="true"><path d="m17 44 42-24q6-3 12-1l62 17q7 2 1 6L94 63q-6 3-12 1L20 49q-8-2-3-5ZM17 44v6q0 4 6 5l59 14q7 2 13-1l39-21v-5M49 34v-8m29 15v-8m16 0v-8m17 16v-8"/></svg><div><h4>Bodenwanne</h4><p>213 × 143 × 10,7 mm</p></div><span class="part-arrow" aria-hidden="true">↓</span></a><a href="downloads/03-rear-cartridge.stl" download><span class="part-index">03 / STL</span><svg viewBox="0 0 150 70" aria-hidden="true"><path d="m16 26 114 12v24L16 49V26Zm0 0 5-4 114 12v24l-5 4M29 33l16 2v7l-16-2v-7Zm31 3 16 2v7l-16-2v-7Zm31 3 11 1v12l-11-1V39Zm21 3 10 1v5l-10-1v-5Z"/></svg><div><h4>Anschluss-Einsatz</h4><p>171 × 3 × 29 mm</p></div><span class="part-arrow" aria-hidden="true">↓</span></a></div>95 <p class="quiet-note">Alle drei STL-Teile sind auf geschlossene Geometrie geprüft. Passung, Kühlung und elektrische Funktionen benötigen noch einen realen Prototyp.</p>96 </div></section>9798 <section class="section wrap" id="dokumentation" aria-labelledby="docs-title"><div class="section-heading"><div><p class="eyebrow">WISSEN & AUFBAU / 04</p><h2 id="docs-title">Von der Idee<br>bis zum ersten Test.</h2></div><p>Die vollständigen Unterlagen direkt im Browser lesen oder herunterladen. Mit konkreter Hardware, nachvollziehbaren Signalwegen und dokumentierten Grenzen.</p></div>99 <div class="doc-grid"><a class="doc-card" href="docs/hardware.html"><span>01 / HARDWARE</span><h3>Bauteile & Verkabelung</h3><p>Stückliste, Versorgung, HDMI-Pfad und isolierter Rückkanal.</p><i aria-hidden="true">↗</i></a><a class="doc-card" href="docs/installation.html"><span>02 / STARTEN</span><h3>Installation</h3><p>Pi vorbereiten, Firmware flashen und den lokalen Leitstand öffnen.</p><i aria-hidden="true">↗</i></a><a class="doc-card" href="docs/software.html"><span>03 / SOFTWARE</span><h3>API & Agentenloop</h3><p>Screenshot, Aktionsvorschlag, Freigabe und visuelle Rückkopplung.</p><i aria-hidden="true">↗</i></a><a class="doc-card" href="docs/protocol.html"><span>04 / SCHNITTSTELLEN</span><h3>HID & Protokoll</h3><p>HB1, Koordinaten, USB-Reports und Tastaturlayouts.</p><i aria-hidden="true">↗</i></a><a class="doc-card" href="docs/safety.html"><span>05 / KONTROLLE</span><h3>Freigabe & Stop</h3><p>Lokale Schutzschicht, physischer ARM und Grenzen des Not-Aus.</p><i aria-hidden="true">↗</i></a><a class="doc-card" href="docs/testplan.html"><span>06 / VALIDIERUNG</span><h3>Tests & Abnahme</h3><p>Softwareprüfungen und die noch offene Abnahme echter Hardware.</p><i aria-hidden="true">↗</i></a></div>100 <div class="reference-status"><div><span class="status-dot"></span><strong>Ein nachvollziehbarer Referenzstand.</strong><p>Hosttests und Firmware-Crossbuild sind dokumentiert. Der physische Aufbau und die reale API-Verbindung sind noch abzunehmen.</p></div><a class="text-link" href="docs/verification.html">Prüfnachweis lesen ↗</a></div>101 </section>102103 <section class="start-section wrap section" aria-labelledby="start-title"><div><p class="eyebrow">ERSTER EINBLICK / 05</p><h2 id="start-title">Erst ausprobieren.<br>Dann aufbauen.</h2><p class="start-description">Die lokale Demo zeigt den Leitstand und die Freigaben mit simuliertem Bildschirm und protokollierten Eingaben. Ohne Hardware und ohne API-Schlüssel.</p><a class="text-link" href="docs/installation.html">Zur vollständigen Einrichtung ↗</a></div><div class="terminal"><div class="terminal-header"><span><i></i><i></i><i></i></span><span>DEMO / PYTHON 3.11+</span><button class="copy-command" data-copy-target="demo-command" aria-label="Demo-Befehle kopieren">Kopieren</button></div><pre id="demo-command"><code>cd hardware-box104python3 -m venv .venv105.venv/bin/python -m pip install -e '.[test]'106.venv/bin/hardware-box --demo</code></pre><p>Projekt-ZIP zuerst entpacken. Danach <strong>127.0.0.1:8080</strong> öffnen und den beim Start ausgegebenen Sitzungstoken eingeben.</p></div></section>107108 <!-- SHORT_VIDEO -->109110 <section class="downloads-section section" id="downloads" aria-labelledby="download-title"><div class="wrap"><div class="section-heading"><div><p class="eyebrow">BAUEN & WEITERENTWICKELN / 06</p><h2 id="download-title">Das gesamte Projekt.<br>Dein nächster Schritt.</h2></div><p>Quellcode, Firmware, 3D-Modelle und Bauunterlagen. Als Gesamtpaket oder genau die Dateien, die du gerade brauchst.</p></div>111 <!-- DOWNLOAD_NOTICE -->112 <!-- FEATURED_DOWNLOAD -->113 <div class="download-toolbar"><div class="download-filters" role="group" aria-label="Downloads filtern"><button data-group="all" class="active" aria-pressed="true">Alle</button><button data-group="source" aria-pressed="false">Quellcode</button><button data-group="design" aria-pressed="false">3D & Druck</button><button data-group="firmware" aria-pressed="false">Firmware</button><button data-group="docs" aria-pressed="false">Dokumentation</button><button data-group="render" aria-pressed="false">Bilder</button></div><label class="download-search"><svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="8" cy="8" r="5.5"/><path d="m12 12 5 5"/></svg><input id="download-search" type="search" placeholder="Datei oder Thema finden" aria-label="Downloads durchsuchen"></label></div>114 <div class="download-summary"><span id="download-count" aria-live="polite"></span><a href="downloads/SHA256SUMS.txt" download>Alle SHA-256-Prüfsummen ↗</a></div>115 <div class="download-grid" id="download-grid"><!-- DOWNLOAD_CARDS --></div><p class="empty-state" id="download-empty" hidden>Keine passende Datei gefunden. Versuche einen anderen Begriff oder Filter.</p>116 <div class="source-banner"><div><span>NEUGIERIG AUF DEN CODE?</span><h3>Direkt im Browser entdecken.</h3><p>Python-Module, Pico-Firmware, Tests und Blender-Aufbauskripte.</p></div><a class="button button-outline" href="source/">Quellcode ansehen <span aria-hidden="true">↗</span></a></div>117 </div></section>118 <section class="faq-section section wrap" aria-labelledby="faq-title"><div><p class="eyebrow">NOCH GUT ZU WISSEN / 07</p><h2 id="faq-title">Ein paar klare<br>Antworten.</h2></div><div class="faq-list"><details><summary>Wofür darf ich OpenAss verwenden?</summary><p>Nur für private, beaufsichtigte Experimente auf einem eigenen, isolierten Testrechner mit entbehrlichen Testdaten. Bau, Downloads und Nutzung erfolgen auf eigene Verantwortung. Niemals Unternehmensrechner, Produktivsysteme, Industrieanlagen oder sicherheitskritische Systeme anschließen oder bedienen. <a href="disclaimer.html">Vollständige Haftungshinweise lesen ↗</a></p></details><details><summary>Was muss auf dem Zielcomputer installiert werden?</summary><p>Keine spezielle Fernsteuerungssoftware. Die Referenz nutzt die HDMI-Ausgabe und einen USB-HID-Eingang. Ein sichtbarer Desktop, passende Auflösung und funktionierende USB-Annahme müssen trotzdem am eigenen Testsystem geprüft werden.</p></details><details><summary>Ist das bereits ein fertig geprüftes Gerät?</summary><p>Es ist ein experimenteller Referenzprototyp mit Software, erfolgreich gebauter Pico-Firmware und modelliertem Druckgehäuse. Softwaretests wurden mit Ersatzgeräten ausgeführt. Reale Elektronik, API-Verbindung, Betriebssystem-Kompatibilität und Kühlung benötigen noch die dokumentierte Abnahme. Es gibt keine zugesicherte Funktion, Sicherheit oder Zweckeignung.</p></details><details><summary>Arbeitet die Box vollständig autonom?</summary><p>Die Referenz verlangt eine einzelne Bestätigung vor jeder HID-Eingabe. Astra schlägt die Aktionen vor; du prüfst und bestätigst sie auf dem privaten Testrechner. Konzeptbilder und Videos demonstrieren eine Idee und belegen keinen zuverlässigen autonomen Betrieb.</p></details><details><summary>Kann ich das Gehäuse sofort drucken?</summary><p>Die drei STL-Gehäuseteile sind geschlossen geprüft und in Millimetern exportiert. Prüfe Druckbettgröße, Orientierung und Stützbedarf im Slicer. Bauteilpassung, echte Taster, Gewindeeinsätze und Kühlung werden mit einem Probedruck angepasst. Der rote Pilz ist ein modelliertes Kaufteil; er belegt keine zertifizierte Not-Halt- oder Maschinensicherheitsfunktion.</p></details><details><summary>Wo finde ich alle Quellen und ältere Modelle?</summary><p>Das Gesamtpaket enthält die Projektquellen, Dokumentation, Firmware und beide Designgenerationen. In der Downloadliste stehen zusätzlich das reine Quellcodepaket und ein klar gekennzeichnetes Designarchiv. Der experimentelle Verwendungszweck gilt auch für ältere Entwürfe. Eine separate Projektlizenz wurde bisher nicht festgelegt.</p></details></div></section>119 </main>120 <!-- SITE_FOOTER -->121</body>122</html>