Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
351 lines (328 loc) · 27.5 KB
/
Copy pathindex.html
File metadata and controls
351 lines (328 loc) · 27.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>try{if(localStorage.getItem('pydevices-theme')==='light'){document.documentElement.setAttribute('data-theme','light');}}catch(e){}</script>
<!-- PYDEVICES-HEAD-TAGS: START -->
<title>PyDevices - PyDevices.github.io</title>
<meta name="description" content="The same driver, event, and display code runs unchanged on bare-metal MicroPython and CircuitPython boards, as native CPython wheels on desktop and Android, and directly in a browser tab, once the board or host has its board_config — no rewrites, no plugins.">
<link rel="icon" type="image/svg+xml" href="/assets/img/logo.svg">
<!-- PYDEVICES-HEAD-TAGS: END -->
<meta property="og:title" content="PyDevices">
<meta property="og:description" content="One display & hardware contract across 5 Python interpreters: MicroPython, CircuitPython, CPython, PyScript, and Android.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pydevices.github.io/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap">
<link rel="stylesheet" href="/assets/chrome/site.css">
</head>
<body>
<!-- PYDEVICES-ABOVE-THE-FOLD: START -->
<div id="pydevices-site-header"></div>
<!-- Hero Banner -->
<section class="hero wrap has-hero-canvas">
<div class="hero-main">
<div class="hero-lead">
<div class="logo-badge logo-badge--free"><img src="/assets/img/logo.svg" alt="PyDevices" width="112" height="112"></div>
<span class="eyebrow" style="color: var(--accent);">PyDevices Portal</span>
</div>
<h1>One display & hardware contract for MicroPython, CircuitPython, and CPython — from bare metal to the browser.</h1>
<p>The same driver, event, and display code runs unchanged on bare-metal MicroPython and CircuitPython boards, as native CPython wheels on desktop and Android, and directly in a browser tab, once the board or host has its board_config — no rewrites, no plugins.</p>
<p>Get Started installs the Python packages, with pip on a desktop or mip on a board. To build MicroPython firmware with the modules compiled in, run <code>curl -fsSL https://pydevices.github.io/install.sh | sh</code> and follow the guide on the <a href="https://pydevices.github.io/micropython-pydevices/">micropython-pydevices page</a>.</p>
<div class="cta">
<a class="btn primary" style="background: var(--github-ink); color: var(--on-accent); border-color: var(--github-ink);" href="https://github.com/PyDevices">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.4 3.4 0 0 0-1-2.6c3-.3 6-1.5 6-6.5a5 5 0 0 0-1.4-3.5 4.6 4.6 0 0 0-.1-3.5s-1.1-.3-3.5 1.3a12 12 0 0 0-6 0C6.6 1.7 5.5 2 5.5 2a4.6 4.6 0 0 0-.1 3.5A5 5 0 0 0 4 9c0 5 3 6.2 6 6.5a3.4 3.4 0 0 0-1 2.6V22"/></svg>
GitHub Org
</a>
<a class="btn" style="border-color: var(--accent); color: var(--accent);" href="https://pydevices.github.io/pydevices/">Get Started</a>
<a class="btn" style="border-color: var(--accent); color: var(--accent);" href="https://pydevices.github.io/pydevices-examples/gallery/">Gallery</a>
<a class="btn" style="border-color: var(--accent); color: var(--accent);" href="https://pydevices.github.io/mip/">MIP Index</a>
</div>
</div>
<div class="hero-canvas-wrap" data-hero-canvas="hero_canvas" data-hero-app="watch" data-hero-app-url="https://PyDevices.github.io/assets/apps/watch.py">
<div class="hero-canvas-circle">
<div class="hero-canvas-loader">
<div class="hero-spinner"></div>
<span class="hero-canvas-status">Live Pure-Python Device</span>
</div>
<canvas id="hero_canvas" width="240" height="240" tabindex="0"></canvas>
</div>
</div>
</section>
<!-- PYDEVICES-ABOVE-THE-FOLD: END -->
<main class="cards wrap">
<!-- PYDEVICES-PORTAL-GRIDS: START -->
<!-- Tier 1 Section -->
<div class="section-head">
<h2>1: Core Platform & Board Contract</h2>
<span class="hint">Standard hardware driver engine and companion reference code.</span>
</div>
<div class="grid">
<a class="card card-tier-1" href="/pydevices/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg></span>
<span class="tag tag-tier-1">Core Flagship</span>
</div>
<h3>pydevices</h3>
<p>Unified pure-Python hardware abstraction layer and core device contract for MicroPython, CircuitPython, CPython, direct WebAssembly, Pyodide, and Android.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-1" href="/audiodsp/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4M8 7v10M12 4v16M16 7v10M20 10v4"/></svg></span>
<span class="tag tag-tier-1">C Audio Usermod</span>
</div>
<h3>audiodsp</h3>
<p>CircuitPython's audio system (audiocore, synthio, audiomixer, effects, audiomp3) ported to MicroPython and CPython, extending CircuitPython along the way: dynamics, routing, convolution, and offline rendering. On PyPI as pydevices-audiodsp; the instrument and effect libraries built on it ship from audiocomponents.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-1" href="/audiocomponents/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/></svg></span>
<span class="tag tag-tier-1">Pure-Python Audio</span>
</div>
<h3>audiocomponents</h3>
<p>The instrument and effect libraries for audiodsp: audioinstruments (55 modelled classics, from the TR-808 to the DX7) and audioeffects (45 effect classes and racks), pure Python on MicroPython and CPython. Ships as pydevices-audioinstruments and pydevices-audioeffects, each a standalone distribution on TestPyPI and a MIP package.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-1" href="/pydevices-examples/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6M9 12h6M9 15h4"/><circle cx="17" cy="15" r="1.5"/></svg></span>
<span class="tag tag-tier-1">Companion Showcase</span>
</div>
<h3>pydevices-examples</h3>
<p>Comprehensive example code, direct MicroPython WebAssembly demos, board configurations, and multi-interpreter showcase benchmarks.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</div>
<!-- Tier 2 Section -->
<div class="section-head" style="margin-top: 40px;">
<h2>2: Python Framebuffers & GUI Toolkits</h2>
<span class="hint">Pure Python on any Python 3 host; pygraphics adds native wheels for Linux x86_64, Windows, Android and Pyodide.</span>
</div>
<div class="grid">
<a class="card card-tier-2" href="/pygraphics/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a13 13 0 0 1 0 18 13 13 0 0 1 0-18z"/></svg></span>
<span class="tag tag-tier-2">0-Dependency</span>
</div>
<h3>pygraphics</h3>
<p>Native C and pure-Python 2D graphics library with drawing primitives, bitmap font rendering, paletted surface blitting, and area-dirtying pipelines.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-2" href="/pdwidgets/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 8h10M7 12h6M7 16h8"/></svg></span>
<span class="tag tag-tier-2">Pure-Python UI</span>
</div>
<h3>pdwidgets</h3>
<p>Lightweight object-oriented UI widget framework including buttons, sliders, progress bars, labels, and event routing for PyDevices screens.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-2" href="/palettes/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg></span>
<span class="tag tag-tier-2">Color Engine</span>
</div>
<h3>palettes</h3>
<p>Color management library with RGB565 / RGB888 output, an HSV color wheel, RGB color cubes, Material Design swatches, and Win16 color names.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</div>
<!-- Tier 3 Section -->
<div class="section-head" style="margin-top: 40px;">
<h2>3: LVGL Native Extensions & Binding Generator</h2>
<span class="hint">Single-source LVGL C header binding generator and native interpreter modules.</span>
</div>
<div class="grid">
<a class="card card-tier-3" href="/lvgl-bindings/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
<span class="tag tag-tier-3">LVGL Generator</span>
</div>
<h3>lvgl-bindings</h3>
<p>Automated binding generator parsing LVGL C headers into native CPython extensions, MicroPython usermods, and CircuitPython modules.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-3" href="/lvgl-micropython/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17V7l8-4 8 4v10l-8 4z"/><path d="M4 7l8 4 8-4M12 11v10"/></svg></span>
<span class="tag tag-tier-3">MicroPython C</span>
</div>
<h3>lvgl-micropython</h3>
<p>Native MicroPython C module integrating LVGL v9 graphics engine with displayif bus drivers on ESP32 targets.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-3" href="/lvgl-python/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a4 4 0 0 1 4 4v1h1a3 3 0 0 1 3 3v1a4 4 0 0 1-4 4h-1v1a4 4 0 0 1-4 4 4 4 0 0 1-4-4v-1H6a4 4 0 0 1-4-4v-1a3 3 0 0 1 3-3h1V6a4 4 0 0 1 4-4z"/></svg></span>
<span class="tag tag-tier-3">CPython / Pyodide</span>
</div>
<h3>lvgl-python</h3>
<p>Pre-built CPython extension wheels and Pyodide WASM packages bringing LVGL v9 to Linux, Windows, Android, and web browsers.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-3" href="/lvgl-circuitpython/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v3M12 18v3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M3 12h3M18 12h3M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/><circle cx="12" cy="12" r="4"/></svg></span>
<span class="tag tag-tier-3">CircuitPython C</span>
</div>
<h3>lvgl-circuitpython</h3>
<p>CircuitPython native C module providing LVGL v9 bindings and displayif integration for the Adafruit Feather RP2040 and ESP32 boards.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</div>
<!-- Tier 4 Section -->
<div class="section-head" style="margin-top: 40px;">
<h2>4: App Hosts & Mobile</h2>
<span class="hint">Deploy PyDevices apps directly to desktop browsers or mobile APKs.</span>
</div>
<div class="grid">
<a class="card card-tier-4" href="/pyscript-template/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3"/><path d="M8 9h8M8 13h5"/></svg></span>
<span class="tag tag-tier-4">PWA Template</span>
</div>
<h3>pyscript-template</h3>
<p>Progressive Web App starter template repository for deploying offline-capable client-side PyDevices applications on GitHub Pages.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-4" href="/android-template/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M10 19h4"/></svg></span>
<span class="tag tag-tier-4">Android APK</span>
</div>
<h3>android-template</h3>
<p>Pre-configured python-for-android build recipes and Buildozer project template for packaging PyDevices applications into native Android APKs.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</div>
<!-- Tier 5 Section -->
<div class="section-head" style="margin-top: 40px;">
<h2>5: Developer Tools & Infrastructure</h2>
<span class="hint">MIP package indexing, multi-usermod builds, and serial/FTP IDE extensions.</span>
</div>
<div class="grid">
<a class="card card-tier-5" href="/mpftp/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="3" width="12" height="18" rx="2"/><path d="M9 7h6M9 11h6M9 15h4"/><circle cx="15" cy="15" r="1"/><path d="M15 16v3M13 19h4"/></svg></span>
<span class="tag tag-tier-5">IDE Extension</span>
</div>
<h3>mpftp</h3>
<p>Connect MicroPython and CircuitPython boards from VS Code, Cursor, or the CLI, over USB or Wi-Fi: dual-pane file transfer, in-editor REPL, firmware builds and flashing, mip/circup, plus RPC and an optional browser PWA.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-5" href="/mip/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.3 7L12 12l8.7-5M12 22V12"/></svg></span>
<span class="tag tag-tier-5">MIP Index</span>
</div>
<h3>mip</h3>
<p>Single source of truth (SoT) for precompiled MicroPython .mpy bytecode packages and pure-Python library distributions across the PyDevices ecosystem.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-5" href="/micropython-pydevices/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>
<span class="tag tag-tier-5">Runtime Overlay</span>
</div>
<h3>micropython-pydevices</h3>
<p>The PyDevices patch queue for MicroPython, kept like a distribution keeps one: an ordered, provenance-tracked patch series over the pinned upstream (MicroPython v1.30.0-preview-160), with presets, boards and variants that build PyDevices modules into firmware with upstream's own make.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-5" href="/workbench/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M10 10l-2 2 2 2M14 10l2 2-2 2"/></svg></span>
<span class="tag tag-tier-5">Browser IDE</span>
</div>
<h3>workbench</h3>
<p>A ViperIDE fork with a built-in WebAssembly MicroPython simulator: edit, run, and debug PyDevices code against a simulated board entirely in the browser, no hardware required.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
<a class="card card-tier-5" href="/mpvst/">
<div class="card-top">
<span class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
<span class="tag tag-tier-5">VST3 Plug-in</span>
</div>
<h3>mpvst</h3>
<p>Programmable VST3 instruments and effects: every audiocomponents instrument and effect as a named plug-in, each instance running its Python in a sidecar process. Installers for Windows and Linux; nothing has to be built.</p>
<span class="go">Visit site <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span>
</a>
</div>
<!-- PYDEVICES-PORTAL-GRIDS: END -->
<!-- Hand-authored drawing: outside any generator marker pair on purpose,
so `generate_sites.py` (which only ever rewrites between START/END)
never clobbers it. Plain HTML on the site's own tokens, so a palette
or theme change reaches it with no script. -->
<style>
.arch{display:grid;grid-template-columns:1fr 250px;gap:18px;align-items:start}
.arch .stack{display:flex;flex-direction:column}
.arch .row{border:1px solid var(--border);background:var(--bg-soft);border-radius:12px;padding:12px 16px}
.arch .row.program{border-style:dashed;text-align:center}
.arch .row.omni{border:2px solid var(--accent);background:var(--panel)}
.arch .row h3{margin:0 0 8px 0;font-size:15px;font-weight:600;color:var(--accent);letter-spacing:.2px}
.arch .row.py h3,.arch .row.host h3{color:var(--ink-soft)}
.arch .sub{color:var(--muted);font-size:13px;margin-left:8px;font-weight:400}
.arch .groups{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.arch .group{background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;padding:9px 10px}
.arch .group h4{margin:0 0 6px 0;font-size:12.5px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px}
.arch .chips{display:flex;flex-wrap:wrap;gap:5px}
.arch .chip{font-size:12.5px;padding:3px 8px;border:1px solid var(--border);border-radius:6px;background:var(--panel);white-space:nowrap}
.arch .arrow{text-align:center;color:var(--muted);font-size:20px;line-height:22px;margin:2px 0}
.arch .cells{display:grid;gap:10px}.arch .cells.three{grid-template-columns:repeat(3,1fr)}.arch .cells.four{grid-template-columns:repeat(4,1fr)}
.arch .cell{border:1px solid var(--border);border-radius:9px;padding:9px 10px;background:var(--panel);text-align:center}
.arch .cell b{display:block;font-weight:600;font-size:14px}.arch .cell span{color:var(--ink-soft);font-size:12px}
.arch .tools{border:1px solid var(--border);border-radius:12px;background:var(--bg-soft);padding:12px 14px}
.arch .tools h3{margin:0 0 4px 0;font-size:15px;color:var(--indigo)}.arch .tools .sub{margin:0 0 10px 0;display:block}
.arch .tool{border:1px solid var(--border);background:var(--panel);border-radius:9px;padding:8px 10px;margin-bottom:8px}
.arch .tool b{display:block;font-size:13.5px;font-weight:600}.arch .tool span{font-size:12px;color:var(--ink-soft)}
@media (max-width: 900px){.arch{grid-template-columns:1fr}.arch .groups{grid-template-columns:1fr 1fr}.arch .cells.four{grid-template-columns:1fr 1fr}}
@media (max-width: 560px){.arch .groups,.arch .cells.three,.arch .cells.four{grid-template-columns:1fr}}
</style>
<section class="wrap" style="margin: 60px auto 20px auto; max-width: 1200px; padding: 0 20px;">
<div class="section-head" style="text-align: center; margin-bottom: 30px;">
<h2>Architecture & Layers</h2>
<span class="hint">How a program reaches the hardware: the OmniPython libraries it imports, the Python it runs on, and the host underneath. The tools stand beside the stack.</span>
</div>
<div class="arch">
<div class="stack">
<div class="row program"><b>Your program</b> <span class="sub">one codebase, unchanged on every Python below</span></div>
<div class="arrow">↓</div>
<div class="row omni"><h3>OmniPython <span class="sub">the same libraries and modules on every Python</span></h3>
<div class="groups">
<div class="group"><h4>The board contract</h4><div class="chips"><span class="chip">board_config</span><span class="chip">board_peripherals</span><span class="chip">displaydev</span><span class="chip">audiodev</span><span class="chip">appdev</span><span class="chip">multimer</span><span class="chip">events</span><span class="chip">keys</span></div></div>
<div class="group"><h4>Apps and UI</h4><div class="chips"><span class="chip">appkit</span><span class="chip">pdwidgets</span><span class="chip">pygraphics</span><span class="chip">palettes</span><span class="chip">lvgl</span></div></div>
<div class="group"><h4>Audio</h4><div class="chips"><span class="chip">audiodsp</span><span class="chip">audioinstruments</span><span class="chip">audioeffects</span></div></div>
<div class="group"><h4>Connections</h4><div class="chips"><span class="chip">midiports</span><span class="chip">usb packages</span><span class="chip">bledev</span><span class="chip">wifi</span><span class="chip">mdns</span><span class="chip">hmilink</span></div></div>
<div class="group"><h4>Silicon modules (C)</h4><div class="chips"><span class="chip c">displayif</span><span class="chip c">audioif</span><span class="chip c">cameraif</span><span class="chip c">usbhost</span><span class="chip c">castif</span><span class="chip c">jpegio</span><span class="chip c">pngio</span><span class="chip c">h264enc</span><span class="chip c">tsmux</span><span class="chip c">ppa</span><span class="chip c">tflite</span><span class="chip c">vision</span></div></div>
</div>
</div>
<div class="arrow">↓</div>
<div class="row py"><h3>Any Python</h3><div class="cells three">
<div class="cell"><b>MicroPython</b><span>boards, desktop, browser</span></div>
<div class="cell"><b>CircuitPython</b><span>boards, desktop</span></div>
<div class="cell"><b>CPython</b><span>desktop, Android, browser</span></div></div></div>
<div class="arrow">↓</div>
<div class="row host"><h3>Any host</h3><div class="cells four">
<div class="cell"><b>Boards</b><span>ESP32-S3, ESP32-P4, RP2350, ...</span></div>
<div class="cell"><b>Desktop</b><span>Windows, Linux, macOS</span></div>
<div class="cell"><b>Browser</b><span>WebAssembly, Pyodide</span></div>
<div class="cell"><b>Android</b><span>phones and tablets</span></div></div></div>
</div>
<div class="tools"><h3>PyDevices tools</h3><span class="sub">for building, flashing and running</span>
<div class="tool"><b>MCU Control</b><span>CLI, VS Code, Desktop: files, REPL, held sessions, flashing</span></div>
<div class="tool"><b>Workbench</b><span>a zero-install link, with a simulator</span></div>
<div class="tool"><b>mpvst</b><span>the stack inside a DAW</span></div>
<div class="tool"><b>Firmware and interpreters</b><span>MicroPython and CircuitPython with OmniPython built in; the desktop builds</span></div>
<div class="tool"><b>Examples and the gallery</b><span>apps you can copy, run in a tab</span></div>
</div>
</div>
<p style="margin:14px 0 0 0;color:var(--muted);font-size:13px">OmniPython is made by PyDevices.</p>
</section>
</main>
<div id="pydevices-site-footer"></div>
<script src="/assets/chrome/site-chrome.js"></script>
</body>
</html>