How to build an HS4 html page that will display process status updates

[mnsandler]

In my hs3 plugin, i have several user initiated routines that can run for a while. I have an auto refresh html page that I update with messages and status.

How do I do something similar in HS4? the routine will run on a thread in the background, and i want to post status updates to the hs4 UI

[dcorsus]

Hi Mark, if I understand the question properly, you would use things like AJAX. Your webpage on the client, is running a timer and periodically checks with your PI for updates. Once there is a change you would update the page and you can just update a section (could be as small as some value somewhere) or whole page, your choice.
If you look at the HTML pages that HS4 provides, say the devices.html page, you see in the javascript at pageload to start a 2 second timer, this will trigger the page to post to your PI, your PI checks for updates and provides them as a response.
I could post one of my pages, it is pretty straight forward .... once you get your head around it (took me a while as well)

[mnsandler]

Dirk,
thanks for the reply. Yah i guess this is what i need. wasn't sure if I needed the client side timer to do this. i will give it a try.

I'm also trying to get the PostBackProc called from an html page.

I basically need a Go btn on an html page to postback so i can start a plugin routine. I'm trying to following the disc on the following thread but is difficult

https://forums.homeseer.com/forum/de...er-stuff/page3

why can't we just have simple "working" examples in the SDK or on the wiki page, or somewhere .

[dcorsus]

Here are the 3 steps:

Drop in something like this to get the timer going

        function docready() {
            refreshID = setInterval(deviceUpdateAjax, 2000);
            $.ajaxSetup({ cache: false });       
        }

Then the actual code to post back, this is what will tickle your PI and you should use to check on updates and respond with updates

        function deviceUpdateAjax() {

            AjaxPost_("deviceudn="+deviceUdn+"&nav-item=refresh","SonosV4/sonos-player.html");
            //console.log("Ajax Refresh :" + muteSliderUpdates);
        }

Then the code to process your response from you PI, the below is a bit of remnants of how HS does it with my extensions but hopefully you get the gist

   function AjaxPost_(data,page){
    $.ajax({
        type: "POST",
        async: "true",
        url: '/'+page,
        cache:false,
        data: data,
        success: function (response) {

            if (response == '') {
                after_postback();
                return;
            }
            var sResponse;
            sResponse = eval('(' + response + ')');
            //alert(response);
            for(i=0; i<sResponse.length; i+=2) {
                if(sResponse[i]==null) continue;
                if(sResponse[i].substr(0,5) == 'PAGE_') {
                    var pageCmd=sResponse[i].substr(5);
                    switch(pageCmd.toLowerCase()) {
                        case 'popmessage':
                            alert(sResponse[i + 1]);
                            after_postback();
                            break;
                        case 'newpage':
                            location.assign(sResponse[i+1]);
                            //window.location.replace(sResponse[i+1]);
                            break;
                        case 'refresh':
                           // alert(sResponse);
                            if(sResponse[i+1].toLowerCase() == 'true') {
                                returnTrue = true;
                                location.reload();
                            }
                            break;  
                         //   case '':                          
                    }
                }
                else {
                    if(sResponse[i].substr(0,13) == 'navigatemore_') {
                        var itemTable = document.querySelector ("#sonosplayernav > tbody ");
                        itemTable.removeChild (itemTable.lastChild);
                        itemTable = itemTable.innerHTML + sResponse[i+1];
                        $('#sonosplayernav > tbody ').empty();
                        $('#sonosplayernav > tbody ').html(itemTable);
                    }
                    else{
                        if ( (muteSliderUpdates > 0) && ((sResponse[i].substr(0,22) == 'playertrackpositiondiv') || (sResponse[i].substr(0,29) == 'playertrackcurrentpositiondiv') || (sResponse[i].substr(0,20) == 'playertracklengthdiv')) ) {
                            // no updating!
                        }
                        else {
                            $('#' + sResponse[i]).empty();
                            $('#' + sResponse[i]).html(sResponse[i+1]);
                            after_postback();
                        }
                    }
                }
            }            
        },
        error: function(){
          //  alert("Error");
        }
    });
}

In your PI you would respond sorta like this:

["id of div to update","value"]

[mnsandler]

what actually calls the postbackproc in the plugin from the javascript? i thought it was the ajaxpost function. but i dont see my plugin code being called.

i dont see any errors when i view the javascript in dev mode

ps. i'm using the built-in hs ajaxpost routine.

[dcorsus]

You need to have the html file registered by calling RegisterFeaturePage. You override the PostBackProc function and add your code. If you look close to this code


AjaxPost_("deviceudn="+deviceUdn+"&nav-item=refresh","SonosV4/sonos-player.html"); //console.log("Ajax Refresh :" + muteSliderUpdates); }

You see that I add some parameters to my post (UDN &nav-item=refresh) that refers to the relative path name of the html file