Cumulus Support

Posted: **Tue 26 May 2015 11:05 pm**

Hi All,
this may be off topic
I have been trying to get this to work

Where have i gone wrong I see the data but can not use it in the code
http://n9mfk.info/newidea/mynow3.html

Code: Select all




window.onload = function() {
    var updateTimer;
    var cp = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

    $('[id$=Table]').DataTable({
        'paging': false,
        'searching': false,
        'info': false,
        'ordering': false
    });

   

    function updateTimeout() {
        // Change the icon on the last update to show that there has been no update for a while
        $('#LastUpdateIcon').attr('src', 'img/down.png');
    }

   
var data = returndata();
   
        var data = JSON.parse(data);

        // restart the timer that checks for the last update
        window.clearTimeout(updateTimer);
        updateTimer = setTimeout(updateTimeout, 60000);

        // Get the keys from the object and set
        // the element with the same id to the value
        Object.keys(data).forEach(function(key) {
            var id = '#' + key;
            if ($(id).length) {
                $(id).text(data[key]);
            }
        });

        $('#BearingCP').html(cp[Math.floor(((parseInt(data.Bearing) + 11) / 22.5) % 16)]);
        $('#AvgbearingCP').html(cp[Math.floor(((parseInt(data.Avgbearing) + 11) / 22.5) % 16)]);

        $('.WindUnit').text(data.WindUnit);
        $('.PressUnit').text(data.PressUnit);
        $('.TempUnit').text(data.TempUnit);
        $('.RainUnit').text(data.RainUnit);

        var lastupdatetime = new Date();
        var hours = lastupdatetime.getHours();
        var minutes = lastupdatetime.getMinutes();
        var seconds = lastupdatetime.getSeconds();

        if (hours < 10) {
            hours = '0' + hours;
        }
        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }

        var time = hours + ':' + minutes + ':' + seconds;

        $('#lastupdatetime').text(time);
   

   
    function returndata() {
$.ajax({
       url: './realtime2.php',
       dataType: 'json',
       success: function(data) {
       console.log(data)   
       }
   });
};
return data;
}

Posted: **Wed 27 May 2015 5:33 pm**

You have at least three different items all called 'data'. The 'data' which is a parameter to your success callback is not the same as the data in the return statement for your returndata() function. I think you will also have problems if you fix that because your Ajax call is asynchronous, so won't have the data to return synchronously anyway.

Posted: **Wed 27 May 2015 7:35 pm**

Steve Wold This Work If not can you point me to the info i need to get data loaded
thanks

Code: Select all

window.onload = function() {
    var updateTimer;
    var cp = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

    $('[id$=Table]').DataTable({
        'paging': false,
        'searching': false,
        'info': false,
        'ordering': false
    });

   

    function updateTimeout() {
        // Change the icon on the last update to show that there has been no update for a while
        $('#LastUpdateIcon').attr('src', 'img/down.png');
    }

   

   
        var data = JSON.parse(mydata);

        // restart the timer that checks for the last update
        window.clearTimeout(updateTimer);
        updateTimer = setTimeout(updateTimeout, 60000);

        // Get the keys from the object and set
        // the element with the same id to the value
        Object.keys(data).forEach(function(key) {
            var id = '#' + key;
            if ($(id).length) {
                $(id).text(data[key]);
            }
        });

        $('#BearingCP').html(cp[Math.floor(((parseInt(data.Bearing) + 11) / 22.5) % 16)]);
        $('#AvgbearingCP').html(cp[Math.floor(((parseInt(data.Avgbearing) + 11) / 22.5) % 16)]);

        $('.WindUnit').text(data.WindUnit);
        $('.PressUnit').text(data.PressUnit);
        $('.TempUnit').text(data.TempUnit);
        $('.RainUnit').text(data.RainUnit);

        var lastupdatetime = new Date();
        var hours = lastupdatetime.getHours();
        var minutes = lastupdatetime.getMinutes();
        var seconds = lastupdatetime.getSeconds();

        if (hours < 10) {
            hours = '0' + hours;
        }
        if (minutes < 10) {
            minutes = '0' + minutes;
        }
        if (seconds < 10) {
            seconds = '0' + seconds;
        }

        var time = hours + ':' + minutes + ':' + seconds;

        $('#lastupdatetime').text(time);
   
var = mydata
 $.ajax({
       url: './realtime2.php',
       dataType: 'json',
       success: function(data) {
       console.log(data)   
       }
   });
};

Posted: **Thu 28 May 2015 6:48 am**

What I would do - and I am by no means an expert - is to have the ajax call triggered directly from a timer, and have the success callback function update the page when it gets called (when the data has arrived). Look at the jQuery documentation for ajax() - http://api.jquery.com/jquery.ajax/

Posted: **Thu 28 May 2015 7:35 pm**

HI Steve How that look

Code: Select all

indow.onload = function() {
    var updateTimer;
    var cp = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];

    $('[id$=Table]').DataTable({
        'paging': false,
        'searching': false,
        'info': false,
        'ordering': false
    });

    $.ajax({
        url: './realtime2.php',
        dataType: 'json',
        success: function(data) {
            function updateTimeout() {
                // Change the icon on the last update to show that there has been no update for a while
                $('#LastUpdateIcon').attr('src', 'img/down.png');
            }
            // restart the timer that checks for the last update
            window.clearTimeout(updateTimer);
            updateTimer = setTimeout(updateTimeout, 60000);

            // Get the keys from the object and set
            // the element with the same id to the value
            Object.keys(data).forEach(function(key) {
                var id = '#' + key;
                if ($(id).length) {
                    $(id).text(data[key]);
                }
            });

            $('#BearingCP').html(cp[Math.floor(((parseInt(data.Bearing) + 11) / 22.5) % 16)]);
            $('#AvgbearingCP').html(cp[Math.floor(((parseInt(data.Avgbearing) + 11) / 22.5) % 16)]);

            $('.WindUnit').text(data.WindUnit);
            $('.PressUnit').text(data.PressUnit);
            $('.TempUnit').text(data.TempUnit);
            $('.RainUnit').text(data.RainUnit);

            var lastupdatetime = new Date();
            var hours = lastupdatetime.getHours();
            var minutes = lastupdatetime.getMinutes();
            var seconds = lastupdatetime.getSeconds();

            if (hours < 10) {
                hours = '0' + hours;
            }
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            if (seconds < 10) {
                seconds = '0' + seconds;
            }

            var time = hours + ':' + minutes + ':' + seconds;

            $('#lastupdatetime').text(time);

             setTimeout(infiniteLoop,60000);
        }
    });
};

Posted: **Fri 29 May 2015 6:28 am**

Something like that for the ajax callback, yes. You need the ajax call on a timer (if you want the data to update automatically).

Posted: **Fri 29 May 2015 12:46 pm**

hi Steve,
where does data for lastupdate come from i do not see it in the json

it loads but no update http://n9mfk.info/newidea/mynow3.html
how would you fix it

Code: Select all

var cp = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
$(function(){
    $('[id$=Table]').DataTable({
        'paging': false,
        'searching': false,
        'info': false,
        'ordering': false
    });
    infiniteLoop()
});
function infiniteLoop() {
    var updateTimer;


    $.ajax({
        url: './realtime2.php',
        dataType: 'json',
        success: function(data) {
            function updateTimeout() {
                // Change the icon on the last update to show that there has been no update for a while
                $('#LastUpdateIcon').attr('src', 'img/down.png');
            }
            // restart the timer that checks for the last update
            window.clearTimeout(updateTimer);
            updateTimer = setTimeout(updateTimeout, 60000);

            // Get the keys from the object and set
            // the element with the same id to the value
            Object.keys(data).forEach(function(key) {
                var id = '#' + key;
                if ($(id).length) {
                    $(id).text(data[key]);
                }
            });

            $('#BearingCP').html(cp[Math.floor(((parseInt(data.Bearing) + 11) / 22.5) % 16)]);
            $('#AvgbearingCP').html(cp[Math.floor(((parseInt(data.Avgbearing) + 11) / 22.5) % 16)]);

            $('.WindUnit').text(data.WindUnit);
            $('.PressUnit').text(data.PressUnit);
            $('.TempUnit').text(data.TempUnit);
            $('.RainUnit').text(data.RainUnit);

            var lastupdatetime = new Date();
            var hours = lastupdatetime.getHours();
            var minutes = lastupdatetime.getMinutes();
            var seconds = lastupdatetime.getSeconds();

            if (hours < 10) {
                hours = '0' + hours;
            }
            if (minutes < 10) {
                minutes = '0' + minutes;
            }
            if (seconds < 10) {
                seconds = '0' + seconds;
            }

            var time = hours + ':' + minutes + ':' + seconds;

            $('#lastupdatetime').text(time);

            setTimeout(infiniteLoop,60000);
        }
    });
}

Posted: **Fri 29 May 2015 1:11 pm**

In the UI, lastupdatetime is set every time it receives new data from Cumulus - it just sets it to the current time (in the viewer's time zone, which is probably inconsistent with the rest of the display). It's that code you have there after the units get set. The up/down icon gets set to 'up' when it gets new data, and 'down' when it hasn't received any data for 60 seconds (using a timer which gets reset every time data arrives).

Posted: **Fri 29 May 2015 1:16 pm**

It's updating for me - every 60 seconds. I missed the fact that you were starting a 60 seconds timer earlier.

Cumulus Support

jquery

jquery

Re: jquery

Re: jquery

Re: jquery

Re: jquery

Re: jquery

Re: jquery

Re: jquery

Re: jquery