Announcement

Collapse
No announcement yet.

Timerto update div in FeaturePage?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • dcorsus
    replied
    I started out that way as well when I first began converting HS3 to HS4. Only problem with that is that you can only regenerate a whole page if anything on it is dynamic, no?

    Click image for larger version

Name:	player.png
Views:	136
Size:	306.9 KB
ID:	1443274

    Leave a comment:


  • alexbk66
    replied
    That's whole html file:

    Click image for larger version  Name:	html.jpg Views:	0 Size:	106.8 KB ID:	1443267

    C#

    Click image for larger version  Name:	html1.jpg Views:	0 Size:	90.2 KB ID:	1443269


    Result:

    Click image for larger version

Name:	mydevices.jpg
Views:	123
Size:	77.6 KB
ID:	1443508

    Leave a comment:


  • alexbk66
    replied
    Note that for the timer ajax callback the html file name doesn't include plugin subfolder, only the file name.

    And the best part is - since I generate HTML in C# code - I can reuse both html files between all my plugins, just need to change the plugin name in the plugin_function call

    Leave a comment:


  • alexbk66
    replied
    Thanks dcorsus , I did it simpler, still not best, but looks cleaner.

    I have two separate html files - one for whole page where in addition to the ususal headers, liguid, bootstrap, etec. I have only a div for my stuff, and the whole HTML page is created in C#:

    Code:
    <div id="plugin">
         {{ plugin_function 'AKGoogleCast' 'GetHTML' ['my-devices'] }}
    </div>

    And for the timer html I have only one line:
    Code:
    {{ plugin_function 'AKGoogleCast' 'GetHTML' ['my-devices'] }}
    In JS I start the timer using
    Code:
    $(window).on('load', function() {
        setInterval(function(){ $('#plugin').load('my-timer.html'); }, 2000);
    });

    Leave a comment:


  • dcorsus
    replied
    by the way, this is to set up the periodic timer

    Code:
    
            function docready() {
                refreshID = setInterval(deviceUpdateAjax, 2000);
    
            }
    
    
            function deviceUpdateAjax() {
                if (muteSliderUpdates > 0 ) { 
                    muteSliderUpdates = muteSliderUpdates - 1;
                }
                else 
                {
                    muteSliderUpdates = 0;
                }
                AjaxPost_("deviceudn="+deviceUdn+"&nav-item=refresh","SonosV4/sonos-player.html");
                //console.log("Ajax Refresh :" + muteSliderUpdates);
            }

    Leave a comment:


  • dcorsus
    replied
    Hi Alex, I'm by far NO expert on HTML but I ended up writting my own code to update individual divs. Recall asking Rich about it, how I would use the AJAX functions, meaning the functions that HS used/delivered and he told me to write my own because they could always change theirs. So I looked at their code and realized (something probably many people just know) that AJAX is nothing more than a periodic check in with the server (and you can send data along with that to be specific about what you want from the server), write functions on the server that do something based on the data that was provided in the server call, respond in a specific way so the client side can understand what needs updating.

    Example:
    - my player html code, uses a JQuery AJAX call, 2 seconds periodicity, that triggers a post to my (through HS3) registered URL, the HS3 embedded server calls my PI
    - In the PI, the call has data indicating this is an AJAX call, the PI quickly checks if any state of the player has changed and if it did, it generate the inner HTML of the div that changed and return that in a sort of list of key (div id) and value (inner HTML) back to the client
    - In the client, you go throught the list (javascript), take the div id and inner HTML value and use that to update the div on your page.

    This is how that code looks like:

    Code:
      $('#' + sResponse[i]).empty();
      $('#' + sResponse[i]).html(sResponse[i+1]);


    To make this all work, the divs you want updated needs to have a unique ID. Secondly, whatever info is in the DIV, your server needs to generate exactly the same content (inner HTML) and it is the latter that makes generic use of AJAX updates hard and why I think you cannot rely on HS procedures. If you study the code in say the devices.html code, you see that the HS team is using the reference ID as DIV ids, so they can in a more generic way, when a device changed state/value, do updates. This is "generic" but comes with major limitations if you want to do more complex things. Example: say my player would like to present different buttons depending on what it is doing ....

    I hope this helps, this was new to me. Here is an example of AJAX processing Javascript (called every 2 seconds by the timer on the client). If you do some digging you would see that this is a a copy from what HS is doing but with changes and renamed so only my PI would use this.


    Code:
        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 '':                          
                        }
                    }
    
    // this is my PI's code, but note how you can use response tags to show little messages etc (above here w popmessage) or open a new page or complete reload (refresh) the current page
    
                    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");
            }
        });
    I hope this is helpful, for me it hasn't been an easy ride, and now I start running into yet more issues and complexity (Bootstrap related)

    Leave a comment:


  • alexbk66
    replied
    Hmm, not really, I need to make ajax call from timer and update div.

    It was implemented in HS3:

    pageCommands.Add("starttimer", "");

    Leave a comment:


  • w.vuyk
    replied
    I am using

    Code:
     document.getElementById(reply.ElementID).innerHTML = reply.content;
    Instead of your

    Code:
    $('#plugin').load('" + FileName + @"');
    This wil only update the div (element ID) you want. In this case both .content and .ElementID are an JSON attribute name returned by the plugin.

    Maybe this helps you on track?

    Wim

    Leave a comment:


  • alexbk66
    started a topic Timerto update div in FeaturePage?

    Timerto update div in FeaturePage?

    How do I add a timer to update div in FeaturePage?

    If I add js:

    setInterval(function(){ $('#plugin').load('" + FileName + @"'); }, 2000);

    then it loads whole page. But how do I return just a content of single div? AbstractFeaturePage has virtual GetHtmlFragment - can I use that?
Working...
X