Seite 1 von 1

Habpanel Dateipfad mit Umlauten

Verfasst: 1. Jan 2021 19:08
von kaloschke
Hallo,

erstmal wünsche ich allen hier ein tolles 2021.
Und dann kommt auch schone meine Frage:

Ich benutze (jetzt in OH 3.0) das Openweather-Binding. Dieses liefert mir die Beschreibung der Wetterlage in deutsch.
Diese Beschreibung benutze ich, um das passende Icon in Habpanel einzubinden. Ich weiß, ich kann auch die aus dem Binding benutzen, aber die gefallen mir nicht.

Probleme gibt es jetzt mit den deutschen Umlauten ect, denn der Apache auf meinem RP4 kann damit wohl nichts anfangen.

Code: Alles auswählen

<img id="weather-icon" src="{{ServerPath}}/images/{{IconDay}}/{{itemState('TodayCondition').split(' ').join('') | lowercase }}.png" />
Mit .split und .join beseitige ich Leerzeichen, lowercase spricht für sich.
Aus "Überwiegend bewölkt" wird also "überwiegendbewölkt". Eine URL Encodierung würde hier ja wohl auch nichts bringen.

Hat jemand einen Tipp?

Vielleicht könnte ich mir die Wetterdaten auch auf Englisch ausgeben lassen, müsste sie dann aber für die Klartextanzeige irgendwie übersetzten. Im PaperUI könnte ich dafür doch eine Transformation nutzen oder? Geht das auch mit Habpanel?

Bin gespannt ...

Re: Habpanel Dateipfad mit Umlauten

Verfasst: 2. Jan 2021 16:27
von kaloschke
Habe mir einen eigenen Filter basteln können :D
Wie oben schon überlegt, habe ich das Binding auf Englisch zurückgestellt.
Dann Javascriptdatei weathertranslate.js im HTML-Ordner angelegt ...

Code: Alles auswählen

var app = angular.module('translateweather', []);
app.filter('translateweather', function() {
    return function(input) {
        var weather = [
            ['snow', 'Schnee'],
            ['rain', 'Regen'],
            ['cloudy', 'Bedeckt']
            .
            .
            .
        ];
        for (var i = 0; i < weather.length; i++) {
            if (weather[i][0] == input)
                return weather[i][1]
        }
        return 'Unbekannt'
    }
});

app.controller('translateweather', function($scope) {

    $scope.tutorial = "Angular";
});
und im Widgetcode folgendes eingefügt ...

Code: Alles auswählen

<div oc-lazy-load="['/static/weathertransformation.js']">
        .
        .
     <div class="wa2">{{itemState('TodayCondition') | translateweather}}</div>
	-
	-


</div>
Kann man ähnlich vielleicht auch für was anderes brauchen.

Viele Grüße