Beiträge von Sempervivum

Sempervivum

Zitat

Kurzer Zwischenruf: Das mit dem schwingenden Vorhang sieht wirklich Klasse aus!

Danke Jav! Ich musste dafür verschüttetes Wissen über die Differenzialgleichung der harmonischen Schwingung auffrischen.

Sempervivum

Zitat

warum ist die sonne bei vw immer rund und bei prozent wird sie orval wenn man das fenster verkleinert ?

Dafür gibt es zwei Wege:

Code

#sonne {
  width: 20vw;
  height: 20vw;

Wie Du siehst, habe ich für Breite und Höhe jedes Mal 20vw genommen. Nimmst Du %, bezieht sich die Breite auf die Breite des umgebenden Containers und die Höhe auf die Höhe.

Code

background-image: radial-gradient(circle,
    yellow 70%,
    white 70%
  )

Durch das Schlüsselwort "circle" wird ein Kreis erzwungen, auch wenn der Container rechteckig ist:

https://jsfiddle.net/Sempervivum/0o8zaLdn/5/

Sempervivum

Du hast vollkommen Recht, um das Seitenverhältnis zu erhalten braucht man Javascript. Eine Ausnahme sind Bilder, dort kann man eine Seite auf 100% und die andere auf auto setzen. Bei der Sonne würde es sich anbieten, ein Bild zu nehmen.

Auch wenn man einen radialen Farbverlauf mit radial-gradient und circle verwendet, bleibt dieser kreisförmig. Würde sich für den Regenbogen anbieten:https://jsfiddle.net/Sempervivum/0o8zaLdn/4/

Sempervivum

So etwas hat mich früher auch interessiert:

http://ulrichbangert.de/am_meer/index.php

Ich glaube nicht, dass es einfacher geht, wenn der Effekt noch natürlicher sein soll, wird es eher komplizierter, wie man an dem Skript sieht, das ich verwenden.

Sempervivum

Schaut mal, ich habe den Vorhang zum Schwingen gebracht:

https://jsfiddle.net/Sempervivum/stvdbLfL/3/

Sempervivum

Vorhang mit Grafiken:

https://jsfiddle.net/Sempervivum/4gthpxp7/3/

Sempervivum

Danke für die guten Wünsche, ich wünsche ebenfalls allen Besuchern ein frohes Weihnachtsfest!
[Blockierte Grafik: http://ulrichbangert.de/div/Frohe_Weihnachten.jpg]

Sempervivum

Das ist allerdings etwas verzwickt und unerwartet. Probiere einmal dies:

Code

    for (a = 1; a <= 10; a++) {
            document.getElementById('aa').innerHTML += '<input type="text" id="jj' + a + '" value="' + a + '">';
            document.getElementById('jj' + a + '').value = 'JJ';
            console.log(document.getElementById('jj' + a + '').getAttribute('value'), document.getElementById('jj' + a + '').value);
        }

Du siehst, dass die Zuweisung an "value" das Attribut "value" nicht ändert. Jedes Mal wenn Du das innerHTML änderst, wird es neu geparst und das Attribut wird wieder angezeigt.

Die Lösung besteht darin, das Attribut zu setzen:

Code

     for (a = 1; a <= 10; a++) {
            document.getElementById('aa').innerHTML += '<input type="text" id="jj' + a + '" value="' + a + '">';
            document.getElementById('jj' + a + '').setAttribute("value", 'JJ');
            console.log(document.getElementById('jj' + a + '').getAttribute('value'), document.getElementById('jj' + a + '').value);
        }

Macht man es dagegen so:

Code

    for (a = 1; a <= 10; a++) {
            var inp = document.createElement("input");
            inp.id = "jj" + a;
            inp.value = "JJ";
            document.getElementById('aa').append(inp);
        }

sieht das Ergebnis im DOM so aus:

html-seminar.de/woltlab/attachment/1286/

Der Wert hat wie gewünscht "JJ" aber im DOM ist davon nichts zu sehen. Das HTML wird beim Einfügen nicht geparst.

Sempervivum

Das ist eine grundlegende Funktion, die man braucht, wenn man ein Grafikprogramm entwickelt: Zeichnen einer Geraden. Ein Feldelement entspricht dann einem Pixel. 0 = Pixel ist weiß, X = Pixel ist schwarz.

Sempervivum

PS: Ich hatte mir dein Bild nicht richtig angesehen und die Orientierung des Winkels nicht berücksichtigt. So sollte es passen:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var x = startX + Math.round(i * cos);
                var y = startY - Math.round(i * sin);
                if (x >= 0 && y >= 0 && x < matrix[0].length && y < matrix.length) matrix[y][x] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

Sempervivum

Meine Lösung:

Code

    <div id="o"></div>
    <script>
        var array = [
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000',
     '000000000000000000000000000000000000000000'
        ]



        Array.prototype.draw_line = function (startX, startY, length, angle) {
            var matrix = this,
            radians = (Math.PI / 180) * angle, cos = Math.cos(radians), sin = Math.sin(radians);
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].split('');

            for (var i = 0; i < length; i++) {
                var dx = Math.round(i * cos);
                var dy = Math.round(i * sin);
                matrix[startY + dy][startX + dx] = 'X';
            }
            for (var i = 0; i < matrix.length; i++) matrix[i] = matrix[i].join();
            console.log(matrix);
            document.getElementById("o").innerHTML = matrix.join("<br>");
        }


        array.draw_line(15, 3, 10, 60);

    </script>

Alles anzeigen

Sempervivum

Ich meine, ich hatte eine Lösung gepostet, aber ich sehe den Post nicht mehr. Vergessen, abzuschicken? Außerdem sieht dein Code anders aus als ich ihn erinnere. Hast Du ihn editiert?

Ich konnte mit wenig Aufwand die Funktion für das Aktualisieren erweitern, so dass man auch das Farbschema ändern kann:

Code

        function updateBarDisplay(selector, value, options) {
            $(selector).each(function (idx, ele) {
                var canv = $(this);
                var max = canv.data("max");
                var opts = canv.data("opts");
                if (options) {
                    $.extend(opts, options);
                    canv.data("opts", opts);
                }
                if (value > max) value = max;
                var barWidth = value / max * opts.barWidth;
                canv.setLayer('text', {
                    text: getText(value, max, opts)
                }).stopLayer('bar')
                .animateLayer('bar', {
                    width: barWidth,
                    fillStyle: getColor(value, opts)
                }, {
                    duration: 1000,
                    easing: 'linear',
                    step: function (now, fx, layer) {
                        console.log(now, fx);
                    }
                });
            });
        }

Alles anzeigen

Namen kannst Du ja entspr. deinem Schema ändern.

Dann würde es so aussehen:

Code

// Balken nur einmal am Anfang erstellen und im weiteren Verlauf nur ändern bzw. animieren
erstelleBalken('#balkenM1', 100, 100, {colorBar: 'red', colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' }],templateText:"{remaining} min", textPos: "left"});

function Zeichnen(strResponseText){
        var objDaten = JSON.parse(strResponseText);
    // 1: M1 //     
    if(objDaten.currentspeed[0]==0){
            if (Math.abs(objDaten.setlength[0]-objDaten.currentlength[0])>200){
                animiereBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'blue',colors: []});
                } 
            else {
                animiereBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'black',colors: []});
                }
        } 
        else {
            var zeitUmbau1 = Math.round((objDaten.setlength[0]-objDaten.currentlength[0])/(objDaten.currentspeed[0]*60));
            animiereBalken('#balkenM1', zeitUmbau1, 30, {colorBar: 'red',colors: [{ threshold: 5, colorAbove: 'yellow' },{ threshold: 10, colorAbove: 'green' },],templateText:"{remaining} min", textPos: "right"});
        }
    } // end if speed ok

Alles anzeigen

Sempervivum

Schnee habe ich auch:

http://ulrichbangert.de/heimat/index.p…htsmarkt_goslar

Sempervivum

Ja, Du hast Recht, so geht es auch. Habe mich geirrt vorhin.

Sempervivum

Ich hatte ein paar Mal den Code verbessert und meinen Post geändert. Möglicher Weise hast Du da eine fehlerhafte Version erwischt. Probiere es jetzt noch Mal. Ich habe den Code aus Post #12 noch Mal zurück in meine Testseite kopiert und dort funktioniert er.

Sempervivum

Jetzt verstehe ich es besser. Ich empfehle, alle drei Balken am Anfang nur einmal zu erzeugen und dann nur noch nach Bedarf sichtbar oder unsichtbar zu machen und den Wert zu ändern.

BTW: Wenn Du nur eine Farbe haben willst, kannst Du den Parameter colors einfach weg lassen.

Ungetestet:

Code

        $("#balkenM17S2").hide();
        $("#balkenM17S3").hide();
        erstelleBalken('#balkenM17S', 100, 100, {
            colorBar: 'red',
            colors: [{
                threshold: 5,
                colorAbove: 'yellow'
            }, {
                threshold: 10,
                colorAbove: 'green'
            }, ],
            templateText: "{remaining} min",
            textPos: "right"
        });
        erstelleBalken('#balkenM17S2', 0, 0, {
            colorBar: 'blue',
            templateText: "{remaining} min",
            textPos: "left"
        });
        erstelleBalken('#balkenM17S3', 0, 0, {
            colorBar: 'black',
            templateText: "{remaining} min",
            textPos: "left"
        });

        function Zeichnen(strResponseText) {
            var objDaten = JSON.parse(strResponseText);
            if (objDaten.currentspeed[0] >= 0) {
                if (objDaten.currentspeed[0] == 0) {
                    if (Math.abs(objDaten.setlength[0] - objDaten.currentlength[0]) > 200) {
                        $("#balkenM17S").hide();
                        $("#balkenM17S3").hide();
                        $("#balkenM17S2").show();
                        balkenDiagrammanimation('#balkenM17S2', objDaten.idletime[0]);
                    } else {
                        $('#balkenM17S').hide();
                        $('#balkenM17S2').hide();
                        $("#balkenM17S3").show();
                        balkenDiagrammanimation('#balkenM17S3', objDaten.idletime[0]);
                    }
                } else {
                    $("#balkenM17S2").hide();
                    $("#balkenM17S2").hide();
                    $("#balkenM17S").show();
                    var zeitUmbau1 = Math.round((objDaten.setlength[0] - objDaten.currentlength[0]) / (objDaten.currentspeed[0] * 60));
                    balkenDiagrammanimation('#balkenM17S', zeitUmbau1);
                }
            } // end if speed ok
        }

Alles anzeigen

Sempervivum

Zitat

sobald man ja doch ein menü punkt anklickt ,ist man ja meist auch auf einer anderen url,müsste man nicht trotzdem die aktuelle url oder so dann in cookies oder anders zwischen speichern ?

IMO nein, denn anschließend sollte ja ein anderer Menüpunkt hervor gehoben werden entspr. der neuen Seite.

Sempervivum

Schau mal, ob dieses tut, was Du erwartest:

Code

<form>
        Gewicht: <input id="gewicht1" />
        Material:
        <select id="material1">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis1"></span>
        <button id="resetbtn1" type="button">Löschen</button>
    </form>
    <form>
        Gewicht: <input id="gewicht2" />
        Material:
        <select id="material2">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis2"></span>
        <button id="resetbtn2" type="button">Löschen</button>
    </form>
    <form>
        Gewicht: <input id="gewicht3" />
        Material:
        <select id="material3">
            <option value="">Bitte auswählen</option>
            <option value="10">Baumwolle</option>
            <option value="15">Leinen</option>
            <option value="20">Seide</option>
        </select>
        <span id="ergebnis3"></span>
        <button id="resetbtn3" type="button">Löschen</button>
    </form>
    <span id="summe"></span>
    <button type="button" id="resetbtnall">Alles löschen</button>
    <script>
        var anzahl = 3;
        var ergebnisse = [];
        function summieren() {
            var endsumme = 0;
            for (var nr = 1; nr <= anzahl; nr++) endsumme += ergebnisse[nr];
            document.getElementById("summe").innerHTML = endsumme.toFixed(2).replace(".", ",") + ' €';
        }
        function berechnen(nr) {
            var gewicht = document.getElementById("gewicht" + nr);
            var material = document.getElementById("material" + nr);
            var ergebnis = document.getElementById("ergebnis" + nr);
            var valgewicht = gewicht.value.replace(",", ".");
            var idxmaterial = material.selectedIndex;
            var preis = material.options[idxmaterial].value.replace(",", ".");
            if (valgewicht != "" && idxmaterial != 0) {
                ergebnisse[nr] = (valgewicht * preis);
                ergebnis.innerHTML = (valgewicht * preis).toFixed(2).replace(".", ",") + ' €';
            } else {
                ergebnis.innerHTML = "";
            }
            summieren();
        }
        function resetOne(nr) {
            document.getElementById("gewicht" + nr).value = '';
            document.getElementById("material" + nr).selectedIndex = 0;
            document.getElementById("ergebnis" + nr).innerHTML = '';
        }
        function resetAll() {
            for (var nr = 1; nr <= anzahl; nr++) {
                resetOne(nr);
            }
            document.getElementById("summe").innerHTML = '';
        }
        document.getElementById("resetbtnall").addEventListener("click", resetAll);
        for (let nr = 1; nr <= anzahl; nr++) {
            ergebnisse[nr] = 0;
            document.getElementById("gewicht" + nr).addEventListener("input", function () { berechnen(nr); });
            document.getElementById("material" + nr).addEventListener("change", function () { berechnen(nr); });
            document.getElementById("resetbtn" + nr).addEventListener("click", function () { resetOne(nr); });
        }
    </script>

Alles anzeigen

Sempervivum

Zitat

das der Balken rumspackt

Kannst Du das genauer beschreiben?

Zitat

wenn ich den Balken innerhalb der funktion erzeuge, welche dann immer wieder wegen des Intervalls durchlaufen wird

Möglicher Weise nicht jedes Mal neu erzeugen, sondern den vorhanden aktualisieren?

Sempervivum

Zweimal die selbe ID geht gar nicht, da wirst Du immer Probleme haben.

Beiträge von Sempervivum

Javascript und Userscript

Javascript und Userscript

Javascript und Userscript

allgemeine fragen zu Javascript

Javascript und Userscript

Javascript und Userscript

Weihnachten 2017

allgemeine fragen zu Javascript

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

Gerade mit bestimmten Winkel / bestimmter Länge in array zeichnen (How to?)

AJAX String aktualisieren

Javascript und Userscript

Menü mit onclick

Tabelleninhalte löschen

Java Script Bibliotheken

Menü mit onclick

Tabelleninhalte löschen

Java Script Bibliotheken

Java Script Bibliotheken