PyIDE lädt Pyodide standardmäßig vom versionierten jsDelivr-CDN. Die vollständige Laufzeitumgebung mit ihren mitgelieferten Paketen ist sehr groß und bleibt deshalb außerhalb des exportierten Hyperbooks. Leser benötigen eine Internetverbindung. Ihr Browser lädt die Laufzeitumgebung und angeforderte Pakete und kann diese Dateien für spätere Besuche zwischenspeichern.

Für selbst gehostete oder offline nutzbare Bücher kannst du Pyodide lokal einbinden. Setze dafür elements.pyide.cdn in hyperbook.json auf false:

{
  "name": "Mein Offline-Hyperbook",
  "elements": {
    "pyide": { "cdn": false }
  }
}

Die CLI lädt dann beim ersten Build mit PyIDE die vollständige Distribution herunter und speichert sie im Cache. Führe für einen Offline-Build zunächst mit Internetverbindung npx hyperbook assets fetch und anschließend npx hyperbook build --offline aus. Führe in VS Code zusätzlich Hyperbook: Download Element Runtimes... aus und wähle PyIDE. Mitgelieferte Pakete funktionieren dann ohne CDN-Verbindung. Pakete, die über das Attribut packages von PyPI installiert werden, benötigen weiterhin eine Netzwerkverbindung.

Siehe CDN-Konfiguration für eigene Server und Hosting und Caching für Browser- und Build-Caches.

Das pyide-Element repräsentiert eine Python-Integrated-Development-Environment (IDE)-Komponente. Es wird verwendet, um eine Python-Coding-Umgebung in die Hyperbook-Website einzubetten. Dieses Element ermöglicht es Benutzern, Python-Code direkt im Browser zu schreiben, zu bearbeiten und auszuführen.

:::pyide
 
```python
a = 5 + 2
print(a)
```
 
:::

Sie können auch jedes Paket verwenden, das hier aufgeführt ist: https://pyodide.org/en/stable/usage/packages-in-pyodide.html

Wenn Sie Pakete aus PyPI benötigen, verwenden Sie das Attribut packages mit einer kommaseparierten Liste. Hyperbook lädt micropip und installiert diese Pakete vor der Ausführung Ihres Skripts.

:::pyide{packages="snowballstemmer"}
 
```python
import snowballstemmer
stemmer = snowballstemmer.stemmer("english")
print(stemmer.stemWords(["running", "runner", "runs"]))
```
 
:::

:::pyide
 
```python
import numpy as np
 
a = np.arange(15).reshape(3, 5)
print(a)
```
 
:::

Testfälle hinzufügen

Sie können Testfälle zu den Code-Snippets hinzufügen, indem Sie ein test-Tag zum Codeblock hinzufügen. Der Kommentar #SCRIPT# wird durch den geschriebenen Code ersetzt. Er kann an jeder Stelle des Codeblocks platziert werden.

:::pyide
 
```python test
#SCRIPT#
r = check_palindrom("uhu")
if r:
    print("Pass")
else:
    print("Fail")
```
 
```python test
#SCRIPT#
r = check_palindrom("test")
if not r:
    print("Pass")
else:
    print("Fail")
```
 
```python
def check_palindrom(s):
    return True
```
 
:::

Wenn Ihr Code input() aufruft, zeigt der Browser einen Prompt-Dialog für die Eingabe an.

:::pyide
 
```python
a = input("Enter a value: ")
print(a)
```
 
:::

Ausführung stoppen

Bibliotheken mit SDL

PyGame

Top-Level-PyGame-Schleifen werden fuer die Browser-Ausfuehrung automatisch verpackt, daher koennen Sie die Schleife direkt ohne asyncio.run(...) schreiben.

Die Zeichenflaeche uebernimmt ihre Groesse aus pygame.display.set_mode, der Canvas ist also so gross wie die Flaeche, die Ihr Skript anfordert.

:::pyide{canvas}
 
```python
import pygame
 
pygame.init()
screen = pygame.display.set_mode((400, 300))
clock = pygame.time.Clock()
r = 0
g = 0
b = 0
running = True
 
while running:
    for event in pygame.event.get():
        if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_r:
                r = (r + 50) % 256
            elif event.key == pygame.K_g:
                g = (g + 50) % 256
            elif event.key == pygame.K_b:
                b = (b + 50) % 256
            elif event.key == pygame.K_ESCAPE:
                running = False
        elif event.type == pygame.QUIT:
            running = False
    screen.fill((r, g, b))
    pygame.display.flip()
    clock.tick(60)
```
 
:::

Pytamaro

Verwenden Sie packages="pytamaro", um show_graphic(...) und show_animation(...) im Ausgabebereich darzustellen.

:::pyide{packages="pytamaro"}
 
```python
from pytamaro import *
 
block_size = 25
num_blocks = 16
line = empty_graphic()
for col in range(num_blocks):
    if col % 2 == 0:
        color = black
    else:
        color = white
    block = rectangle(block_size, block_size, color)
    line = beside(line, block)
second_line = rotate(180, line)
finish_line = above(line, second_line)
show_graphic(finish_line)
```
 
:::

Turtle

import turtle stellt das Turtle-Modul von Python selbst bereit (das aus Python 3.14), das auf dem Canvas des Elements zeichnet. Programme verhalten sich wie mit einem auf dem Computer installierten Python: Die Turtle zeichnet in derselben Reihenfolge und Geschwindigkeit, und clear(), undo(), Füllungen, Stempel, Text und Ereignisse funktionieren wie in der Python-Dokumentation beschrieben.

Weil das Canvas Teil der Seite ist, gibt es ein paar Unterschiede:

• Das Canvas ist 640×480 Pixel groß. screensize() und setup() ändern seine Größe; ein größeres Canvas bekommt Scrollbalken.
• mainloop(), done() und exitonclick() werden nicht benötigt. Mit onkey(), onscreenclick() oder ontimer() angemeldete Funktionen reagieren auch nach dem Ende des Programms, bis es erneut ausgeführt oder gestoppt wird. Tastendrücke erreichen das Canvas nach listen() oder einem Klick darauf.
• textinput() und numinput() fragen im Eingabefeld unter dem Canvas.
• bgpic() und register_shape() laden GIF-, PNG- oder JPEG-Dateien aus dem Dateisystem des Elements.
• save() steht nicht zur Verfügung.
• Der Stoppen-Button hält auch das Zeichnen und die Ereignisse an.

Die Tabellen zeigen die gebräuchlichsten Funktionen.

Bewegung

Stift und Zeichnen

Status

Bildschirm und Reset

Ereignisse

Mehrere Turtles

Mit Turtle() lassen sich weitere unabhängige Turtles erstellen, die dasselbe Canvas teilen. Jede Turtle hat ihre eigene Position, Ausrichtung, Farbe, Form und Stiftzustand und wird über das zurückgegebene Objekt gesteuert.

:::pyide{canvas}
 
```python
from turtle import *
from random import randint
 
speed(0)
penup()
goto(-140, 140)
 
for step in range(15):
  write(step, align='center')
  right(90)
  for num in range(8):
    penup()
    forward(10)
    pendown()
    forward(10)
  penup()
  backward(160)
  left(90)
  forward(20)
 
red = Turtle()
red.color('red')
red.shape('turtle')
red.penup()
red.goto(-160, 100)
red.pendown()
 
blue = Turtle()
blue.color('blue')
blue.shape('turtle')
blue.penup()
blue.goto(-160, 70)
blue.pendown()
 
green = Turtle()
green.shape('turtle')
green.color('green')
green.penup()
green.goto(-160, 40)
green.pendown()
 
for turn in range(100):
  red.forward(randint(1, 5))
  blue.forward(randint(1, 5))
  green.forward(randint(1, 5))
```
 
:::

:::pyide{canvas}
 
```python
from turtle import *
 
speed(50)
colormode(255)
screensize(900, 700, "#0f172a")
bgcolor("#0f172a")
pensize(2)
 
colors = [
    (244, 114, 182),
    (56, 189, 248),
    (251, 191, 36),
    (74, 222, 128),
]
 
for step in range(48):
    pencolor(colors[step % len(colors)])
    circle(160 - step * 2)
    right(15)
 
penup()
goto(0, -20)
pencolor("#f8fafc")
write("Hyperbook", align="center", font=("Arial", 24, "bold"))
hideturtle()
```
 
:::