Überwachen der Anlage

Heute will ich mal darauf eingehen, wie ich meine Anlage überwachen kann. Die verschiedenen Komponenten bieten unterschiedliche Möglichkeiten und heute fange ich mit meinem Wechselrichter an.

Ich habe einen Wechselrichter von SMA, genauer gesagt Sunny Tripower 7000TL-20. Den habe ich mir jetzt nicht selbst ausgesucht, sondern der hat mein Installateur aufgrund meiner Anlagengröße empfohlen. Während der Installation konnten die Installateure per Software sich mit dem Wechselrichter verbinden, da habe ich mich natürlich gleich erkundigt, ob ich das denn auch könnte, man sei ja schließlich neugierig.

Überwachen der Anlage weiterlesen

Photovoltaik

Kurz vor Weihnachten habe ich mir eine Photovoltaikanlage mit einem Speichersystem gegönnt. Das ganze ist nun seit wenigen Tagen in Betrieb und da ja heute alles smart ist, kann ich nun auf dem Handy ganz viele Werte auslesen.

Dazu gehören dann unter anderem, was grade von der PV-Anlage an Strom generiert wird oder was grade durch meinen Haushalt verbraucht wird.

So ist genau erkennbar, wann der Fön benutzt wurde, oder wann die Waschmaschine lief. Dies hat zu zwei für mich bekannten aber dennoch überraschenden Erkenntnissen geführt. Photovoltaik weiterlesen

Vorschau bei Bildupload

Ich finde es ein nettes Feature, eine kleine Vorschau anzuzeigen, wenn ich ein Bild auf einer Webseite hochladen will.
Dazu folgendes kleines Snippet:

$(function() {
    $("#fileUpload").change(function() {
        if (this.files && this.files[0]) {
            var file = this.files[0];

            var preview = $('#imagePreview');

            var isImage = typeof file.type !== "undefined" && file.name.match(/\.(png|jpe?g)$/i);

            if (isImage && typeof FileReader !== "undefined") {
                var reader = new FileReader();

                reader.onload = function(e) {
                    preview.empty();
                    var img = $('<img>');
                    img.attr('src', e.target.result);

                    if (preview.css('max-height') != 'none') {
                        img.css('max-height', parseInt(preview.css('max-height'), 10));
                    }

                    preview.html(img);
                }

                reader.readAsDataURL(this.files[0]);

                preview.show();
            } else {
                preview.empty();
                preview.html($('<p>').text('Dateiname: ' + file.name));
                preview.show();
            }
        }
    });
});

Das passende Formular dazu:

<div class="form-group">
    <label for="fileUpload" class="control-label col-md-2">Datei: </label>
    <div class="col-md-10">
        <input type="file" name="fileUpload" id="fileUpload"/>
    </div>
</div>
                    
<div class="form-group">
    <div class="col-md-10 col-md-offset-2 fileInputPreview" id="imagePreview">
        <!-- empty tag for preview image -->
    </div>
</div>

Die passenden CSS Klassen, damit das Bild auch nicht aus dem Design rauswandert 🙂

.fileInputPreview {
    display: inline-block;
    max-height: 200px;
    width: 500px;
}

.fileInputPreview img {
    max-width: 100%;
    height: auto;
}

Am Ende sieht es dann etwa so aus:
imagePreview

Den File-Upload habe ich mit Bootstrap FileStyle optisch etwas ansprechender gestaltet.

jQuery – Seitennavigation abbrechen

Fast jedes Programm weißt den Benutzer darauf hin, wenn es ungespeicherte Änderungen gibt, sobald man das Programm verlassen will.
Im Browser gibt es sowas standardmäßig nicht, aber dank JavaScript ist das kein Problem. Und mit jQuery wird die ganze Sache sogar noch einfacher.

Und zwar kann man sich an das „beforeUnload“-Event hängen. Hier wird der zu erscheinene Text hinterlegt. Weiteren Einfluss auf die Gestaltungsmöglichkeit hat man nicht, dies hängt vom Browser ab.

$("form").one("change", ":input", function() {
    // einen Hinweis anzeigen (wer es möchte)
    $('#saveInfo').show();

    // Bevor die Seite verlassen wird, wird der folgende Text angezeigt.
    $(window).on('beforeunload', function (e) {
            return "Es gibt ungespeicherte Änderungen.";
    });

    // Verhindern, dass ein Submit-Button (also z.B. "Speichern") auch den Hinweis hervorruft.
    $(this).parents("form:first").find(":submit").click(function() { $(window).off("beforeunload"); });
});

In dem Beispiel überwache ich alle Eingabefelder („:input„) innerhalb meiner Form. Sobald ein Feld geändert wird das „beforeunload“-Event scharf gemacht. Achtet auch auf die letzte Zeile, sollte ich über einen Submit-Button kommen („:submit„), wird das Event wieder aufgehoben. Schließlich will ich ja beim Klick auf „Speichern“ nicht den Hinweis bekommen.