Wieser

puter

Kontrollcenter – Modulares Plugin-System

Ein Linux Mint-inspiriertes Kontrollcenter mit modularem Plugin-System für einfache Erweiterungen.

📁 Dateistruktur

„ kontrollcenter/ ├── kontrollcenter.html # Haupt-App ├──
settings-core.js # Core System (SettingsManager, PluginRegistry,
UIHelper) ├── plugin-theme.js # Theme-Einstellungen (Hell/Dunkel) ├──
plugin-display.js # Display-Einstellungen (Auflösung, Skalierung) ├──
plugin-autostart.js # Autostart-Programme ├── plugin-privacy.js #
Datenschutz-Einstellungen └── README.md # Diese Datei „

🚀 Installation

  1. Alle Dateien in einen Ordner kopieren
  2. kontrollcenter.html im Browser öffnen
  3. Fertig!

🔌 Neues Plugin erstellen

Schritt 1: Plugin-Datei erstellen

Erstelle eine neue Datei: plugin-mein-feature.js

„`javascript /**

  • Mein Feature Plugin
  • Beschreibung was das Plugin macht */

const MeinFeaturePlugin = { // Eindeutige ID (wichtig!) id: ‚mein-feature‘,

// Name der angezeigt wird name: ‚Mein Feature‘,

// Icon (Emoji oder Unicode) icon: ‚🎯‘,

// Beschreibung description: ‚Was macht dieses Feature?‘,

// Kategorie: ‚preferences‘, ’system‘, ‚hardware‘, ’network‘, ‚administration‘ category: ’system‘,

// Init-Funktion (optional) – wird beim Start aufgerufen init() { console.log(‚Mein Feature Plugin geladen‘); // Hier kannst du gespeicherte Einstellungen laden und anwenden },

// Render-Funktion – erstellt die UI für das Modal render() { const container = document.createElement(‚div‘);

// Beispiel: Toggle const option1 = document.createElement(‚div‘); option1.className = ’setting-option‘; option1.innerHTML = <div>
<label>Feature aktivieren</label>
<div class=“setting-option-description“>Beschreibung der
Option</div> </div>;

const toggle = UIHelper.createToggle(‚meinFeature‘, false, (enabled) => { console.log(‚Feature ist jetzt:‘, enabled ? ‚an‘ : ‚aus‘); // Hier passiert was wenn der Toggle geändert wird }); option1.appendChild(toggle); container.appendChild(option1);

// Beispiel: Dropdown const option2 = document.createElement(‚div‘); option2.className = ’setting-option‘; option2.innerHTML = <div> <label>Modus
wählen</label> <div
class=“setting-option-description“>Verschiedene
Modi</div> </div>;

const select = UIHelper.createSelect( ‚meinModus‘, [ { value: ‚mode1‘, label: ‚Modus 1‘ }, { value: ‚mode2‘, label: ‚Modus 2‘ }, { value: ‚mode3‘, label: ‚Modus 3‘ } ], ‚mode1‘, (value) => { console.log(‚Modus gewählt:‘, value); } ); option2.appendChild(select); container.appendChild(option2);

// Beispiel: Slider const option3 = document.createElement(‚div‘); option3.className = ’setting-option‘; option3.innerHTML = <div> <label>Wert
einstellen</label> <div
class=“setting-option-description“>0 bis 100</div>
</div>;

const slider = UIHelper.createSlider(‚meinWert‘, 0, 100, 50, (value) => { console.log(‚Wert geändert:‘, value); }); option3.appendChild(slider); container.appendChild(option3);

return container; } };

// Plugin registrieren – WICHTIG! PluginRegistry.register(MeinFeaturePlugin); „`

Schritt 2: Plugin einbinden

In kontrollcenter.html das neue Plugin laden:

„html <!– Plugins – einfach neue Zeile hinzufügen!
–> <script
src=“plugin-theme.js“></script> <script
src=“plugin-display.js“></script> <script
src=“plugin-autostart.js“></script> <script
src=“plugin-privacy.js“></script> <script
src=“plugin-mein-feature.js“></script> <!–
NEU –> „

Schritt 3: Testen

Seite neu laden – dein Plugin erscheint automatisch in der richtigen Kategorie!

🛠️ API Referenz

SettingsManager

„`javascript // Einstellung speichern SettingsManager.set(‚meinKey‘, ‚meinWert‘);

// Einstellung laden const wert = SettingsManager.get(‚meinKey‘, ‚defaultWert‘);

// Einstellung löschen SettingsManager.remove(‚meinKey‘);

// Alle Einstellungen abrufen const alle = SettingsManager.getAll(); „`

UIHelper

„`javascript // Toggle erstellen const toggle = UIHelper.createToggle( ’settingKey‘, // Key für LocalStorage false, // Default-Wert (enabled) => { // Callback bei Änderung console.log(‚Neuer Wert:‘, enabled); } );

// Dropdown erstellen const select = UIHelper.createSelect( ’settingKey‘, [ { value: ‚opt1‘, label: ‚Option 1‘ }, { value: ‚opt2‘, label: ‚Option 2‘ } ], ‚opt1‘, // Default-Wert (value) => { // Callback console.log(‚Gewählt:‘, value); } );

// Slider erstellen const slider = UIHelper.createSlider( ’settingKey‘, 0, // Min 100, // Max 50, // Default-Wert (value) => { // Callback console.log(‚Wert:‘, value); } );

// Status-Meldung anzeigen const status = UIHelper.showStatus(‚✓ Gespeichert‘, ’saved‘); // oder const status = UIHelper.showStatus(‚ℹ Info‘, ‚info‘); „`

PluginRegistry

„`javascript // Plugin registrieren PluginRegistry.register(MeinPlugin);

// Plugin abrufen const plugin = PluginRegistry.getPlugin(‚plugin-id‘);

// Alle Plugins einer Kategorie const plugins = PluginRegistry.getCategory(’system‘); „`

🎨 Verfügbare Kategorien

– preferences – Darstellung (Theme, Fonts, etc.) – system – System (Updates, Info, etc.) – hardware – Hardware (Display, Sound, etc.) – network – Netzwerk (WLAN, VPN, etc.) – administration – Verwaltung (Benutzer, Sicherheit, etc.)

📝 Beispiele

Einfaches Toggle

„`javascript const SimplePlugin = { id: ’simple‘, name: ‚Einfach‘, icon: ‚⚡‘, description: ‚Eine einfache Einstellung‘, category: ’system‘,

render() { const container = document.createElement(‚div‘); const option = document.createElement(‚div‘); option.className = ’setting-option‘; option.innerHTML = ‚<div><label>Feature an/aus</label></div>‘; option.appendChild(UIHelper.createToggle(’simpleFeature‘, false)); container.appendChild(option); return container; } }; PluginRegistry.register(SimplePlugin); „`

Mit Init-Funktion

„`javascript const InitPlugin = { id: ‚init-demo‘, name: ‚Init Demo‘, icon: ‚🚀‘, description: ‚Plugin mit Init‘, category: ’system‘,

init() { // Beim Start: Gespeicherte Einstellung anwenden const enabled = SettingsManager.get(‚myFeature‘, false); if (enabled) { document.body.classList.add(‚my-feature-active‘); } },

render() { const container = document.createElement(‚div‘); const toggle = UIHelper.createToggle(‚myFeature‘, false, (enabled) => { if (enabled) { document.body.classList.add(‚my-feature-active‘); } else { document.body.classList.remove(‚my-feature-active‘); } }); // … rest of render return container; } }; PluginRegistry.register(InitPlugin); „`

🌐 Puter.com Integration

Um das Kontrollcenter in puter.com zu verwenden:

Option 1: Als Website hosten

  1. Alle Dateien in puter.com hochladen
  2. Rechtsklick auf kontrollcenter.html → „Publish as Website“
  3. URL öffnen

Option 2: Mit puter.js SDK

„`html <!– Am Anfang von kontrollcenter.html einfügen –> <script src=“https://js.puter.com/v2/“></script>

<script> // In settings-core.js: SettingsManager erweitern const SettingsManager = { async get(key, defaultValue = null) { try { const value = await puter.kv.get(key); return value || defaultValue; } catch { // Fallback zu localStorage return localStorage.getItem(key) || defaultValue; } },

async set(key, value) { try { await puter.kv.set(key, value); } catch { localStorage.setItem(key, value); } this.notifyChange(key, value); } // … }; </script> „`

💡 Tipps

– LocalStorage wird automatisch verwendet – keine Datenbank nötig – Alle Plugins sind unabhängig voneinander – Einfach testen: Neue Plugin-Datei erstellen, in HTML einbinden, fertig! – CSS-Variablen nutzen für Theme-Support (z.B. var(–accent-color))

🐛 Debugging

„`javascript // Alle registrierten Plugins anzeigen console.log(PluginRegistry.plugins);

// Alle gespeicherten Einstellungen anzeigen console.log(SettingsManager.getAll());

// Plugin manuell öffnen ModalManager.open(PluginRegistry.getPlugin(‚theme‘)); „`

✨ Features

– ✅ Modulares Plugin-System – ✅ LocalStorage Persistence – ✅ Responsive Design – ✅ Hell/ Theme – ✅ Live-Suche – ✅ Linux Mint Style – ✅ Keine Dependencies (Vanilla JS)