DM-Schmiede
Zusatzinhalte, die dein Spiel bereichern.

Eigene Seiten für AdventureControl erstellen

AdventureControl ermöglicht es Anwendern, über das Stift-Icon (✏️) im Menü oder direkt
über die Seite "/custom_editor" eigene HTML-Seiten zu erstellen.

Diese Seiten können GPIO-Pins schalten, Servos bewegen oder Statusinformationen anzeigen.

Diese Anleitung zeigt Schritt für Schritt, wie eine eigene Seite aufgebaut ist und wie die verfügbaren API-Routen verwendet werden.

1. Grundstruktur jeder Custom-Page

Jede Seite muss mit folgendem Block beginnen:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title id="title">AdventureControl</title>
<link rel="icon" type="image/png" href="/icon-192.png">
<link rel="stylesheet" href="/style.css">
<style>
</style>
</head>
<body>

<div id="menu_header"></div>

<h2 id="header">Meine Seite</h2>

Und mit diesem Block enden:

<div style="margin-top:10px;" id="registration_div"></div>
<script src="load_header.js"></script>
</body>
</html>

2. GPIO-Pins schalten

AdventureControl stellt eine einfache Route bereit, um Pins zu schalten:

/toggle?pin=PINNUMMER&state=0|1

- state=1 → Pin einschalten
- state=0 → Pin ausschalten
- Ohne state wird der Pin getoggelt

Beispiel: Pin einschalten

fetch('/toggle?pin=4&state=1');

Beispiel: Pin ausschalten

fetch('/toggle?pin=4&state=0');

JS-Funktion zum Schalten eines Pins

function setPin(pin, state) {
    fetch('/toggle?pin=' + pin + '&state=' + (state ? 1 : 0));
}

3. Alle Pins gleichzeitig schalten

AdventureControl bietet zwei Routen:

/all_on

/all_off

Diese schalten ausschließlich Output-Pins (Servo-Pins werden ignoriert).

Beispielbuttons

<button onclick="fetch('/all_on')">Alle AN</button>
<button onclick="fetch('/all_off')">Alle AUS</button>

4. Pin-Zustände abfragen

Die Route:

/states

liefert ein JSON-Objekt mit allen Pin-Zuständen:

{
  "4":1,
  "5":0,
  "12":1,
  ...
}

JS-Beispiel: Zustände laden

fetch('/states')
  .then(r => r.json())
  .then(states => {
      console.log("Pin 4 ist:", states["4"] ? "AN" : "AUS");
  });

5. Servos steuern

Servo-Pins werden über die Route:

/servo?pin=PIN&angle=WINKEL&delay=MS

- angle: 0–180°
- delay: optional, verlangsamt die Bewegung

Beispiel: Servo auf 90°

fetch('/servo?pin=12&angle=90');

Beispiel: Langsame Bewegung

fetch('/servo?pin=12&angle=180&delay=20');

JS-Funktion

function moveServo(pin, angle, delay = 0) {
    fetch('/servo?pin=' + pin + '&angle=' + angle + '&delay=' + delay);
}

6. Beispiel: Einfache Custom-Page mit zwei Buttons

Diese Seite schaltet Pin 4 ein und aus.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title id="title">AdventureControl</title>
<link rel="stylesheet" href="/style.css">
<style>
</style>
</head>
<body>

<div id="menu_header"></div>

<h2 id="header">Meine Seite</h2>


<button onclick="setPin(4, 1)" class="button on">AN</button>
<button onclick="setPin(4, 0)" class="button off">AUS</button>

<script>
function setPin(pin, state) {
    fetch('/toggle?pin=' + pin + '&state=' + (state ? 1 : 0));
}
</script>

<div style="margin-top:10px;" id="registration_div"></div>
<script src="load_header.js"></script>
</body>
</html>

7. Beispiel: Servo-Steuerung

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title id="title">AdventureControl</title>
<link rel="stylesheet" href="/style.css">
<style>
</style>
</head>
<body>

<div id="menu_header"></div>

<h2 id="header">Meine Seite</h2>


<button onclick="moveServo(12, 45)">45°</button>
<button onclick="moveServo(12, 90)">90°</button>
<button onclick="moveServo(12, 180, 30)">Langsam 180°</button>

<script>
function moveServo(pin, angle, delay = 0) {
    fetch('/servo?pin=' + pin + '&angle=' + angle + '&delay=' + delay);
}
</script>

<div style="margin-top:10px;" id="registration_div"></div>
<script src="load_header.js"></script>
</body>
</html>

8. Wichtige Hinweise

- Servo-Pins können nicht getoggelt werden
- Output-Pins können nicht als Servo verwendet werden
- Alle Custom-Pages müssen die Grundstruktur einhalten
- JavaScript wird direkt im Browser ausgeführt
- Fehler werden im Browser-Konsolenfenster angezeigt

Fertig!

Mit diesen Bausteinen können Anwender beliebige Steuerseiten erstellen – von einfachen Schaltflächen bis hin zu komplexen Automationen.