AJAX String aktualisieren

detolopez · 20. Dezember 2017

Also ich habe die ganze Sache jetzt mit Firefox gemacht und da aktualisiert er es automatisch.

jetzt habe ich schon eine Idee warum er mit den Balken rumspackt.

Warum er den Balken so versetzt weis ich nicht.

Aber ich denke mal, da ich ja immer nur die Daten aktualisiere aber nicht den Balken mit, spackt der rum. Ich versuche jetzt mal, das er mir alles aktualisiert.

detolopez · 21. Dezember 2017

Mir ist aufgefallen, ich habe den Balken so eingestellt das er erst ab 30 Minuten kleiner wird. Genau ab dem Moment schneidet der mir das min hinten ab und der Balken spackt rum. Weis vielleicht jemand warum er das da macht?

Mit welchem Befehl lösche ich den Balken ?

Sempervivum · 21. Dezember 2017

Um dir das sagen zu können, müsste man den Code sehen.

detolopez · 21. Dezember 2017

DAs ist der Code zum ausfüllen des Balken

Code

     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){
                erstelleBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'blue',colors: [{ threshold: 40, colorAbove: 'blue' },{ threshold: 70, colorAbove: 'blue' },],templateText:"{remaining} min", textPos: "left"});
                } 
            else {
                erstelleBalken('#balkenM1', objDaten.idletime[0], objDaten.idletime[0], {colorBar: 'black',colors: [{ threshold: 40, colorAbove: 'black' },{ threshold: 70, colorAbove: 'black' },],templateText:"{remaining} min", textPos: "left"});
                }
        } 
        else {
            var zeitUmbau1 = Math.round((objDaten.setlength[0]-objDaten.currentlength[0])/(objDaten.currentspeed[0]*60));
            erstelleBalken('#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 · 23. Dezember 2017

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

AJAX String aktualisieren

Jetzt mitmachen!

Teilen