Multilingual Website or at least English

[dbambus]

Hallo @tali ,

da ich in den letzten Tagen etwas Zeit gefunden habe wieder am Code rumzubasteln hab ich mir Gedanken gemacht, wie es weiter gehen kann mit dem Projekt. So würde ich neben anderen Verbesserungen auch gerne mehrere Sprachen unterstützen. Wie im Issue https://github.com/ESPWortuhr/Wortuhr/issues/141 dargestellt. Im Zuge wäre es Angeracht wenn die Website auch in mehreren Sprachen zur Verfügung stehen würde oder einfach nur in Englisch.

Ich habe das mal zur Probe getestet und wollte jetzt fragen, ob dass denn eine sinnige Implementierung darstellt. Ich denk das sollte besser gehen, aber irgendwie muss man ja anfangen.

So sieht mein Konzept aus:

In dem Script.js werden Variablen in einem Array (JSON Format) hinterlegt, aus welchem dann die Attribute und Werte für die HTML gelesen werden. Eine Variable languageSelector wird dabei aus dem Speicher vom Mikrocontroller gelesen und geschrieben, in dem gespeichert ist welche Sprache die Website darstellen soll. Im Anschluss soll über document.getElementById Aufrufe die Texte ersetzt werden.

var language = [{
    "wordclock": "Wordlclock",
    "colors":"Colors", 
    "functions":"Functions",
    "settings":"Settings", 
    "smart_home":"Smart Home",
    "about":"About"},
    {
    "wordclock": "Wordlclock",
    "colors":"Farben", 
    "functions":"Funktionen",
    "settings":"Einstellungen", 
    "smart_home":"Smart Home",
    "about":"Über"
    }];

var languageSelector = 1;

    document.getElementById("wordclock_text").textContent = language[languageSelector].wordclock;
    document.getElementById("color_text").textContent = language[languageSelector].colors;
    document.getElementById("functions_text").textContent = language[languageSelector].functions;
    document.getElementById("settings_text").textContent = language[languageSelector].settings;
    document.getElementById("smart_home_text").textContent = language[languageSelector].smart_home;
    document.getElementById("about_text").textContent = language[languageSelector].about;

In der HTML würde das so aussehen:

    <div id="menu">
        <div class="pure-menu">
            <a id="wordclock_text" class="pure-menu-heading" href="#"></a>

            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a id="color_text" href="#" class="pure-menu-link" data-navigation="main"></a></li>
                <li class="pure-menu-item"><a id="functions_text" href="#" class="pure-menu-link" data-navigation="functions"></a></li>
                <li class="pure-menu-item"><a id="settings_text" href="#" class="pure-menu-link" data-navigation="settings"></a></li>
                <li class="pure-menu-item"><a id="smart_home_text" href="#" class="pure-menu-link" data-navigation="smart-home"></a></li>
                <li class="pure-menu-item"><a id="about_text" href="#" class="pure-menu-link" data-navigation="about"></a></li>
            </ul>
        </div>
    </div>

Das alles hat aber den erheblichen Nachteil, dass es aus sehr viele kopierten Passagen besteht. Was ist dein Eindruck davon?

[Eisbaeeer]

Hier wurde sowas schon realisiert. Eventuell kann man das übernehmen. https://github.com/maakbaas/esp8266-iot-framework/blob/master/docs/getting-started.md#changing-the-language-of-the-web-interface

[dbambus]

Hey @Eisbaeeer,

soweit ich das verstanden habe, müsste das nur für den Build Prozess gelten jedoch nicht für ein fertiges Release, oder ? Hier wäre es schmackhaft, wenn man innerhalb eines fertigen Releases auf der Website selbst die Sprache ändern kann, anschließender Reload der Website wird aber wohl nötig sein.

[Eisbaeeer]

Ja, in diesem Fall ist es vor dem Build. Wenn man alle Sprachen zur Laufzeit haben möchte, würde ich das in den Flash Bereich auslagern und nicht in PROGMEM.

[Wandmalfarbe]

Hier ist übrigens noch ein Projekt auf dem ESP, was mehrsprachig ist.

https://github.com/samdenty/Wi-PWN

Hier finden sich die Übersetzungsdateien (https://github.com/samdenty/Wi-PWN/tree/master/web_server/html/_i18n). Den Build-Prozess habe ich mir jetzt nicht genau angeschaut, aber ich denke mal, es werden per Templating verschiedensprachige HTMLs gebaut und dann auch je Sprache ein Binary zum Flashen. Das spart natürlich ordentlich Speicherplatz. Eine Sprachänderung zur Laufzeit ist aber bestimmt auch nicht so teuer in puncto Speicherplatz.

[dbambus]

Added with https://github.com/ESPWortuhr/Wortuhr/pull/226