OpenSim.Webinterface

[Manfred Aabye]

Jau, hab ich vergessen.
Passwörter können jetzt in der config.php eingestellt werden, es ist bereits in der config vorhanden und auch im Passwortgenerator.
Unter: $registration_passwords_events
Link Github

Danke für den Hinweis.
Wenn ihr was haben möchtet, postet das bitte am besten ausführlich, dann kann ich schauen, ob ich das umsetzen kann.

[Bogus Curry]

Moin Manni ;D

Erstmal grosses Danke schön von mir, ich bin ja kein GridOwner und will auch keiner werden. Aber mir kommen so paar Ideen in den Kopf, die vielleicht für GridOwners intressant werden könnten.

Zum einen denke ich an einer Möglichkeit, das WebInterface in eine eigene Webseite zu setzen. So das vielleicht man in der Webseite, ein Forum, das Interface und vielleicht noch ein Blogsystem drin hat. Das ist aber nur so ne Gedanke von mir, ob das ganze umsetzbar ist oder nicht, muss du entscheiden, wenn nicht. Ist es für mich nicht tragisch, denke aber wäre super Idee ;D

Vielleicht mit einem Framework wie Astro oder wie alle heissen. Fern ab von Wordpress und ein bisschen unabhängiger ;D Und das ganze noch so, das man das Layout selbst gestalten kann ;D

[Manfred Aabye]

Danke Bogus genau das ist der Zweck dieser OpenSim Viewer Seiten.
Im Verzeichnis /include sind 12 header.php Dateien für 11 unterschiedliche Frameworks die sich in der config.php einbinden lassen.
Wordpress, Jomla, Drupal und andere Content-Management-Systeme können eigene Implementierungen haben wie RSS oder ähnliches, welches so manche Seite überflüssig macht, da sie einfach, über deren Admin Bereich der Content-Management-Systeme eingefügen lassen.

Wenn man die für den Viewer erstellten Seiten aufrufen möchte, funktioniert das ungefähr so:
Destination Guide hat keinen header da dieser im OpenSim Viewer nur stört.
Deswegen muss man eine Seite erstellen die das ganze aufruft.

Nennen wir sie indexguide.php

PHP-Code:

<?php
// Framework ausfrufen:
include_once('include/headerW3.php');
// Die Seiten einfügen:
include_once('guide.php');
?>

Du siehst, wie einfach das ist, das ganze mit Eurem bestehenden Web einzusetzen.

P.S. Die Destination Guide Beispiele wurden von mir willkürlich ausgewählt über https://opensimworld.com/dir/?vm=traffic und wenn ihr diese erweitert gebt bitte anderen die Möglichkeit eure Favoriten bei sich einzufügen.

[Manfred Aabye]

Das Astro 5.5 Web Framework
Astro ist ein modernes Web-Framework, das sich auf die Erstellung von schnellen, statischen Websites konzentriert.
Es verwendet keine traditionellen CSS-Frameworks wie Bootstrap, sondern setzt auf moderne Web-Standards und ermöglicht die Integration von verschiedenen UI-Bibliotheken.

1. Astro-Projekt erstellen
Zuerst musst du ein neues Astro-Projekt erstellen. Führe dazu die folgenden Befehle aus:

bash

Code:

npm create astro@latest
cd dein-projekt
npm install

2. Astro-Komponenten erstellen
Erstelle eine neue Astro-Komponente für deine Seite, z.B. `src/pages/index.astro`.

3. Angepasster Code für Astro
Hier ist der angepasste Code für deine Seite in Astro:

astro
---

PHP-Code:

import '../styles/global.css';

const title = 'Deine Seite';
const SITE_NAME = 'Deine Seite';
const FONT_FAMILY = 'Arial, sans-serif';
const BACKGROUND_IMAGE = '/images/background.jpg';
const FOREGROUND_IMAGE = '/images/foreground.png';
const BACKGROUND_OPACITY = 0.9;
const FOREGROUND_OPACITY = 0.8;
const INITIAL_COLOR_SCHEME = 'default';

const colorSchemes = {
    default: {
        header: '#007bff',
        footer: '#343a40',
        secondary: '#f8f9fa',
        primary: '#212529'
    },
    dark: {
        header: '#343a40',
        footer: '#212529',
        secondary: '#121212',
        primary: '#ffffff'
    }
};

function setColorScheme(scheme) {
    document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
    document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
    document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
    document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
}
---

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{title}</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <style>
        body {
            font-family: {FONT_FAMILY};
            background-color: var(--secondary-color);
            color: var(--primary-color);
            background-image: url({BACKGROUND_IMAGE});
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            height: 100vh;
            width: 100vw;
            opacity: {BACKGROUND_OPACITY};
        }
        header {
            background-color: var(--header-color);
            padding: 10px;
            text-align: center;
            color: white;
        }
        footer {
            background-color: var(--footer-color);
            margin: 0;
            padding: 0;
            text-align: center;
            color: white;
            position: fixed;
            width: 100%;
            bottom: 0;
            line-height: 0;
        }
        .container {
            background-image: url({FOREGROUND_IMAGE});
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            padding: 20px;
            border-radius: 8px;
            opacity: {FOREGROUND_OPACITY};
        }
        .color-button {
            margin: 1px;
            padding: 1px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            font-size: 10px;
            color: white;
        }
    </style>
    <script>
        const colorSchemes = {JSON.stringify(colorSchemes)};

        function setColorScheme(scheme) {
            document.documentElement.style.setProperty('--header-color', colorSchemes[scheme].header);
            document.documentElement.style.setProperty('--footer-color', colorSchemes[scheme].footer);
            document.documentElement.style.setProperty('--secondary-color', colorSchemes[scheme].secondary);
            document.documentElement.style.setProperty('--primary-color', colorSchemes[scheme].primary);
        }

        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.color-button').forEach(function(button) {
                button.addEventListener('click', function() {
                    setColorScheme(this.dataset.scheme);
                });
            });
            // Set the initial color scheme
            setColorScheme('{INITIAL_COLOR_SCHEME}');
        });
    </script>
</head>
<body>
<header class="bg-primary text-white p-3">
    <h1>Welcome to {SITE_NAME}</h1>
</header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">{SITE_NAME}</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                {Object.entries(colorSchemes).map(([scheme, colors]) => (
                    <li class="nav-item">
                        <button class="btn btn-sm btn-secondary color-button" data-scheme={scheme} style={`background-color: ${colors.header};`}>{scheme.charAt(0).toUpperCase() + scheme.slice(1)}</button>
                    </li>
                ))}
            </ul>
        </div>
    </div>
</nav>
<div class="container mt-5">
    <!-- Inhalt der Seite -->
</div>
<footer class="bg-dark text-white text-center py-3">
    &copy; {new Date().getFullYear()} {SITE_NAME}
</footer>
</body>
</html> 


### 4. Globale CSS-Datei
Erstelle eine globale CSS-Datei `src/styles/global.css`, um die CSS-Variablen zu definieren:

css

Code:

:root {
    --header-color: #007bff;
    --footer-color: #343a40;
    --secondary-color: #f8f9fa;
    --primary-color: #212529;
}

5. Bilder hinzufügen
Lege die Bilder `background.jpg` und `foreground.png` in den `public/images`-Ordner.

6. Astro-Projekt starten
Starte das Astro-Projekt mit:

bash

Code:

npm run dev

Erläuterungen:
- Astro-Komponenten: Astro verwendet `.astro`-Dateien, die eine Mischung aus HTML, CSS und JavaScript sind.
- CSS-Variablen: Wir verwenden CSS-Variablen, um die Farben dynamisch zu ändern.
- JavaScript: Das JavaScript wird direkt in der Astro-Komponente eingebettet, um die Farben zu ändern.

[Bogus Curry]

Hätte nicht gedacht, das es so einfach gehen würde. Danke für die Anleitung

[Manfred Aabye]

PHP 8.3 Registration ein flexibles Anmeldesystem

Dies ist eine generelle Konstruktion, also nicht an OpenSim gebunden.

Dieses Anmeldesystem unterstützt zwei verschiedene Speichermethoden
und bietet Optionen zur Aktivierung/Deaktivierung der Registrierung und Anmeldung.

Captcha ist ein generiertes Bild, welches sich bei jeder Session ändert.

Die Konfiguration erfolgt über die Datei config.php oder direkt im Skript,
falls keine config.php vorhanden ist.

Verfügbar über Github