Liebe Leserinnen und Leser,
Ab sofort steht euch mit dem MomoSystems Desktop (momosystems.netlify.app/desktop) eine vollwertige Desktop-Umgebung direkt im Browser zur Verfügung. Egal, ob auf Windows, macOS oder Linux – euer persönlicher Workspace folgt euch überall hin. Im Folgenden stelle ich alle zentralen Funktionen vor und erkläre, wie sie im Detail zusammenwirken.
1. Mehrere Seiten (Tabs) wie auf eurem System
- Seitenleiste oben: Eine horizontale Navigationsleiste („Top-Bar“) ganz oben im Browserfenster zeigt euch alle angelegten Seiten (vergleichbar mit Desktops oder virtuellen Desktops). Per Klick wechselt ihr blitzschnell zwischen euren Projekt-Umgebungen.
- Seite hinzufügen:
Rechts in der Leiste befindet sich ein „+“-Button, um eine neue Seite anzulegen. Nach Eingabe eines Namens wird sie direkt erstellt und auf sie gewechselt.
- Seiten löschen:
Jede Seite (außer der letzten) lässt sich einzeln löschen – so behaltet ihr nur die Workspaces, die ihr wirklich nutzt.
2. Hintergrundverwaltung
- Hintergrund ändern-Button: Unten rechts findet ihr einen Rahmen-Button mit Bildsymbol (🖼️). Klickt ihr darauf, öffnet sich ein Overlay mit fünf voreingestellten Wallpaper-Bildern, außerdem könnt ihr eine eigene Bild-URL einfügen.
- Dauerhaft speichern: Eure Auswahl wird im LocalStorage abgelegt, bleibt also auch nach Browser-Neustart erhalten.
3. Icons und Texte frei platzieren
- Icons- bzw. Text-Einfügen: Über das "+"-Symbol unten rechts öffnet ihr ein Auswahlmenü, um entweder
1. eine vorgefertigte Web-App (z.B. Google, YouTube, Wikipedia) per Klick als Icon hinzuzufügen,
2. eine eigene URL als Icon mit automatischem Favicon-Abruf oder individuellem Bild-Link,
3. einen frei formatierten Text-Block mit Farbe, Hintergrundfarbe, Schriftgröße und Stil (fett/kursiv/unterstrichen).
- Verschieben & Anordnen: Icons und Textblöcke lassen sich per Drag & Drop an jede beliebige Position ziehen. Klickt und haltet einfach irgendwo auf das Icon/Text, zieht es an den neuen Ort und lasst los – die Position wird sofort gespeichert.
- Bearbeiten & Löschen: Jedes Element hat kleine „✎“- und „ד-Buttons, um es zu bearbeiten oder zu entfernen. Änderungen – etwa an Label, Link, Farben oder Passwortschutz – werden direkt ins LocalStorage übernommen.
4. Fenster für Web-Apps (iFrame-Apps)
- Doppelklick auf Icon: Wenn ihr ein Icon doppelt anklickt, öffnet sich euer Web-App-Fenster direkt im Desktop als AppWindow:
1. Mit Header-Leiste inklusive Titel und Buttons „In neuem Tab öffnen“, „Minimieren“, „Maximieren“ und „Schließen“.
2. Das Fenster lässt sich verschieben (ziehen an der Header-Leiste) und mit einem Resize-Handle unten rechts in der Ecke beliebig vergrößern oder verkleinern.
3. Beim Maximieren spannt es zwischen Top-Bar und Taskbar aus, minimierte Fenster landen in der Taskbar am unteren Rand.
- Kompatible Domains: iFrames sind zugelassen für momosystems.netlify.app selbst sowie ausgewählte Partner-Domains (momofit.netlify.app). Externe Links werden standardmäßig in einem neuen Tab geöffnet.
5. Taskbar & Kontextmenü:
- Rechtsklick-Manü: Klickt mit der rechten Maustaste auf den Hintergrund, um ein Kontextmenü zu öffnen, das schnellen Zugriff erlaubt auf:
1. Neues Icon/Text hinzufügen
2. Hintergrund ändern
3. Daten importieren/exportieren
4. Desktop zurücksetzen
- Taskbar: Unten im Desktop seht ihr die Taskbar für sämtliche minimierten Fenster. Jeder Button zeigt Icon-Symbol und Namen der App; ein Klick restauriert das Fenster.
6. Daten Import/Export & Reset:
- Daten synchen: Mit dem „⇵“-Button unten rechts könnt ihr eure gesamte Desktop-Konfiguration als JSON exportieren oder eine gespeicherte Datei wieder importieren. Ideal, um zwischen Geräten zu synchronisieren oder Backups zu erstellen.
- Zurücksetzen: Der „↺“-Button öffnet eine Sicherheitsabfrage; bestätigt ihr, werden alle lokalen Daten gelöscht und der Desktop auf Werkseinstellungen zurückgesetzt.
7. Uhr & News-Ticker
- Live-Uhr: Oben rechts zeigt eine einblendbare Uhr permanent die aktuelle Systemzeit im Format HH : MM : SS. - News-Widget: Direkt darunter findet ihr ein kleines Text-Widget mit einem Newsticker, das Begrüßungs- oder Statusnachrichten anzeigt – im nächsten Update werden hier auch RSS-Feeds unterstützt.
Wie funktioniert das Ganze technisch?
- Rechtsklick-Manü: Klickt mit der rechten Maustaste auf den Hintergrund, um ein Kontextmenü zu öffnen, das schnellen Zugriff erlaubt auf:
1. LocalStorage für Persistenz: Alle Einstellungen – Seiten, Hintergrundbilder, Icons, Texte und ihre Positionen – werden als JSON in localStorage.desktopPages abgelegt.
2. Dynamische DOM-Erzeugung: JavaScript-Skripte lesen beim Laden die gespeicherten Daten, bauen per createElement die Icons, Textblöcke und Fenster auf und hängen Events für Drag&Drop, Klicks und Kontextmenü an.
3. Drag&Drop & Resize: Durch Mousedown/Mousemove/Mouseup-Handler werden Elemente verschiebbar; Resize-Handles ermöglichen freie Größeneinstellung. Snap-Funktionen sorgen dafür, dass Fenster beim Ziehen an Bildschirmränder einrasten.
4. Javascript-Verschlüsselung: Auf Wunsch lassen sich Icons optional passwortschützen. Die Passwortzeichen werden per einfacher XOR-Verschlüsselung (Base64-Encoding) im Datensatz abgelegt und beim Zugriff über ein Prompt wieder entschlüsselt.
5. Overlay-Architektur: Popups und Menüs (z. B. für Hintergrundwahl oder Neue Seite) sind alle als versteckte