Announcement

Collapse
No announcement yet.

I miss the old PageBuilder stuff

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

    #16
    Yes the function BuildCalendar does use stb.Append( html code) to create the page very much like the old HS3, the only difference is I am using the modified sample-blank.html as a wrapper and calling it via the

    {{plugin_function 'Calendar' 'BuildCalendar' ['']}}

    All the processing is perform in plugin prior to, or during the creation of the html page, such as current date, checking for events for for each day and displaying an icon and message if holiday or event day. The page then has 5 buttons across top for Previous Year, Previous Month, ToDay, Next Month, Next Year. Each button would cause PostBackProc to recalculate and refresh the page with new month or year etc...
    -Larry

    A member of "The HA Pioneer Group", MyWebSite

    Plugins:
    VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

    Hardware:
    Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

    Comment


      #17
      So I assume something like this in PostBackProc:

      Code:
             Select Case page
      
                  Case "Calendar.html"
      
                      name = parts("id")
                      value = parts(name)
      
                      If gTrace Then
                          OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc....Name is: " & name & ", Value is: " & value & ".")
                      End If
      
                      If name = "btnPrevYear" Then
                          value = parts(name)
      
                          If value = "Submit" Then
                              value = parts(name)
      
                              gCalDate = DateAdd("yyyy", -1, objDate)
      
                          End If
      
                      ElseIf name = "btnPrevMonth" Then
                          value = parts(name)
      
                          If value = "Submit" Then
                              gCalDate = DateAdd("m", -1, objDate)
      
                          End If
      
      ...
      ...
      
                      response = "PAGE_REFRESH,TRUE"
      and of course the Java code in the HTML.
      -Larry

      A member of "The HA Pioneer Group", MyWebSite

      Plugins:
      VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

      Hardware:
      Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

      Comment


        #18
        Originally posted by rjh View Post
        Based on your post you don't have any javascript to handle clicking on your elements. Does the BuildCalendar function return HTML that includes javascript that handles the postbacks?

        The page_common.js file includes the Ajax postback function that you need to call with your page variables. If you have that in your calendar code, then, yes remove it from your file. But you will need to adjust it per below.

        To detect a click on this button I added a javascript function that listens for button clicks. I have this generic function I like to use, it will post back all the attributes that are included with the button and it will also post back all form variables that are on the same form as the button. When the button is clicked this function is called and the data is posted back to your plugin postbackproc. The key is the AjaxPost call as it includes your plugin name and page. If your calendar code includes the Ajax call, adjust it as below. Note that this call works the same as it did in HS3 and you can also return HTML that updates divs.

        So in your postback, you can either update a div, or refresh the page with a response like:

        ["PAGE_REFRESH","TRUE"]

        The div update and page refresh work the same as they did in HS3.
        In HS3 the clsJQuery classes were adding their JS code, so the developers didn't have to know JS. Do I understand correctly - now we have to add JS ourselves?

        Comment


          #19
          My problem also.
          -Larry

          A member of "The HA Pioneer Group", MyWebSite

          Plugins:
          VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

          Hardware:
          Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

          Comment


            #20
            Originally posted by alexbk66 View Post

            In HS3 the clsJQuery classes were adding their JS code, so the developers didn't have to know JS. Do I understand correctly - now we have to add JS ourselves?
            I had this class which represented a config or player page in HS3. In the class you had all the JSQuery objects, the GetPagePlugin, PostBackProc etc.
            For HS4, I took the classes verbatim, I instantiate the class like I did in HS3, there were only 3 changes:

            1/ In GetPagePlugin I removed these 2 calls

            at the beginning Me.AddHeader(hs.GetPageHeader(pageName, "Sonos Configuration", "", "", False, True))
            at the end Me.AddFooter(hs.GetPageFooter)

            2/ When the weblinks were created you would register them using a variable that held a handle to the instantiated class, something like
            hs.RegisterPage(ConfigPage, sIFACE_NAME, MainInstance)
            In HS4 you now register a link, pointing to an HTML file you have now in your homedirectory, something like this:
            myHomeSeerSystem.RegisterFeaturePage(tIFACE_NAME, sonosPlayerTablePageFileName, "Player Table")

            3/ In the html file you now have, there is not really anything in it, except a call to "GetPagePlugin" which returns a built page including all the JS etc. In the example here, I call PagePreLoad in my PI which dishes out which page it is that needs building.

            Code:
             <!DOCTYPEhtml>
            <htmllang="en">
            <head>
            <metacharset="utf-8">
            <metahttp-equiv="X-UA-Compatible"content="IE=edge">
            <metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
            <metaname="description"content="">
            <metaname="author"content="Dirk Corsus">
                {{includefile 'bootstrap/css/page_common.css'}}
            <title>Sonos Player Table</title>
            </head>
            <bodyclass="homeseer-skin">
                {{includefile 'header.html'}}
                {{includefile 'navbar.html'}}
            <divclass="container"id="main_content">
                    {{   
                        parms = ['sonosplayertableconfig', queries] 
                    }}
                    {{plugin_function 'SonosV4' 'PagePreLoad' parms }}
            </div>
            <!--{{includefile 'bootstrap/js/page_common.js'}}-->
            </body>
            </html>
            Code:
                Function PagePreLoad(FunctionID As String, Query As Dictionary(Of String, String)) As String
                    If piDebuglevel > DebugLevel.dlErrorsOnly Then Log("PagePreLoad called with FunctionID = " & FunctionID, LogType.LOG_TYPE_INFO)
                    Try
                        Select Case FunctionID
                            Case "upnpdevicetable"
                                Dim queryString = ConvertDictionaryToQueryString(Query)
                                Return UPnPViewerPage.GetPagePlugin("UPNPViewer", "", 0, queryString)
                            Case "sonoslinkgroupconfig"
                                Return linktablePage.GetPagePlugin(sonosLinkGroupPageFileName, "", 0, Query)
                            Case "sonosplayertableconfig"
                                Return playerTablePage.GetPagePlugin(sonosPlayerTablePageFileName, "", 0, Query)
                        End Select
                    Catch ex As Exception
                        If piDebuglevel > DebugLevel.dlOff Then Log("Error in PagePreLoad with FunctionID = " & FunctionID & " and Error = " & ex.Message, LogType.LOG_TYPE_ERROR)
                    End Try
                    Return ""
                End Function
            Hope this helps and note I removed the includefile statement at the end of the HTML file.

            Dirk

            Comment


              #21
              Wow, best explanation so far, thanks. This gives me something to work with, and a couple ideas.
              -Larry

              A member of "The HA Pioneer Group", MyWebSite

              Plugins:
              VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

              Hardware:
              Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

              Comment


                #22
                To answer the JS question, yes, you will need some Javascript in your HTML file to handle the postback. You can call the AjaxPost that we provide in the page_common.js file. If you need any JS samples, we can provide some. I posted one handler that can handle most posts. You can also look in the HTML folder in HS4 as the entire HS4 UI is there and each HTML file has some JS in it.
                website | buy now | support | youtube

                Comment


                  #23
                  Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

                  From postBackProc:
                  Code:
                                  If name = "btnPrevYear" Then
                                      value = parts(name)
                  
                                      OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")
                  
                                      gCalDate = DateAdd("yyyy", -1, objDate)
                                      BuildCalendar()
                                      response = "page_refresh,true"
                  JavaScript in Web Page:
                  Code:
                  <!DOCTYPE html>
                  <html lang="en">
                  
                  <head>
                      <meta charset="utf-8">
                      <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  
                      <!--This maintains the scale of the page based on the scale of the screen-->
                      <meta name="viewport" content="width=device-width, initial-scale=1">
                      <meta name="author" content="HomeSeer Technologies">
                  
                      <!--This liquid tag loads all of the necessary css files for HomeSeer-->
                      {{includefile '/bootstrap/css/page_common.css'}}
                  
                      <link rel='Stylesheet' type='text/css' href='css/Calendar.css'>
                  
                      <title>Calendar</title>
                  </head>
                  
                  <body class='body homeseer-skin'>
                  
                      <!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate-->
                      {{includefile 'header.html'}}
                      {{includefile 'navbar.html'}}
                  
                      <!--Primary container for the page content
                          The .container class ensures the page content is fit and centered to the screen-->
                  
                      <div class='container' id='main_content'>
                  
                          {{plugin_function 'Calendar' 'BuildCalendar' ['']}}
                  
                      </div>
                  
                      <!-- Bootstrap core JavaScript
                      ================================================== -->
                      <!-- Placed at the end of the document so the pages load faster -->
                      {{includefile 'bootstrap/js/page_common.js'}}
                  
                      <script type="text/JavaScript">
                  
                          $(document).on('click', 'button,a,i', {}, function (e) {
                              var data;
                              $(this.attributes).each(function () {
                                  var parts = this.nodeName + "=" + this.nodeValue;
                  
                                  if (data == null) {
                                      data = parts;
                                  }
                  
                                  else {
                                      data = data + "&" + parts;
                                  }
                              });
                  
                              var fdata = $(this.form).serialize();
                  
                              if (fdata != null) {
                                  data = data + "&" + fdata
                              }
                  
                              location.reload(true);
                  
                              AjaxPost(data, "Calendar/Calendar.html");
                          });
                  
                      </script>
                  
                  </body>
                  
                  </html>

                  -Larry

                  A member of "The HA Pioneer Group", MyWebSite

                  Plugins:
                  VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                  Hardware:
                  Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                  Comment


                    #24
                    In your javascript you are capturing a click on an "<a>" tag. Do you need that? The log menu option is an "<a>" tag also:

                    Code:
                    <a class="dropdown-item waves-effect waves-light" href="/log.html">Log</a>
                    Remove the "a" from the "a" tag from this and see if it then works ok:

                    Code:
                     
                     $(document).on('click', 'button,a,i', {}, function (e) {
                    If so and you need to detect clicks on this tag then narrow down the .on handler to maybe it looks for a class instead.

                    Originally posted by lpitman View Post
                    Okay, finally got a working page, that refreshes with new data from button presses. But after viewing page and pressing a button that correctly refreshes page, if go to HS4 menu and select log, it only flashes and goes away repeatedly, but if I select any other menu first such as devices then select log everything works with out flashing, until I load my page again. What am i doing wrong, I suspect it has something to do with my javascript. But attached are a couple of snippets.

                    From postBackProc:
                    Code:
                     If name = "btnPrevYear" Then
                    value = parts(name)
                    
                    OutputHSLog(LOG_DEBUG, "HSPI.PostBackProc-btnPrevYear....Value is: " & value & ".")
                    
                    gCalDate = DateAdd("yyyy", -1, objDate)
                    BuildCalendar()
                    response = "page_refresh,true"
                    JavaScript in Web Page:
                    Code:
                    <!DOCTYPE html>
                    <html lang="en">
                    
                    <head>
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    
                    <!--This maintains the scale of the page based on the scale of the screen-->
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta name="author" content="HomeSeer Technologies">
                    
                    <!--This liquid tag loads all of the necessary css files for HomeSeer-->
                    {{includefile '/bootstrap/css/page_common.css'}}
                    
                    <link rel='Stylesheet' type='text/css' href='css/Calendar.css'>
                    
                    <title>Calendar</title>
                    </head>
                    
                    <body class='body homeseer-skin'>
                    
                    <!--These liquid tags add the HomeSeer header and navbar to the top of the page when appropriate-->
                    {{includefile 'header.html'}}
                    {{includefile 'navbar.html'}}
                    
                    <!--Primary container for the page content
                    The .container class ensures the page content is fit and centered to the screen-->
                    
                    <div class='container' id='main_content'>
                    
                    {{plugin_function 'Calendar' 'BuildCalendar' ['']}}
                    
                    </div>
                    
                    <!-- Bootstrap core JavaScript
                    ================================================== -->
                    <!-- Placed at the end of the document so the pages load faster -->
                    {{includefile 'bootstrap/js/page_common.js'}}
                    
                    <script type="text/JavaScript">
                    
                    $(document).on('click', 'button,a,i', {}, function (e) {
                    var data;
                    $(this.attributes).each(function () {
                    var parts = this.nodeName + "=" + this.nodeValue;
                    
                    if (data == null) {
                    data = parts;
                    }
                    
                    else {
                    data = data + "&" + parts;
                    }
                    });
                    
                    var fdata = $(this.form).serialize();
                    
                    if (fdata != null) {
                    data = data + "&" + fdata
                    }
                    
                    location.reload(true);
                    
                    AjaxPost(data, "Calendar/Calendar.html");
                    });
                    
                    </script>
                    
                    </body>
                    
                    </html>
                    website | buy now | support | youtube

                    Comment


                      #25
                      I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.
                      -Larry

                      A member of "The HA Pioneer Group", MyWebSite

                      Plugins:
                      VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                      Hardware:
                      Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                      Comment


                        #26
                        Ok, I suspect that your feature html file does not need to detect clicks on "<a>" tags so modify this:

                        Code:
                         
                         $(document).on('click', 'button,a,i', {}, function (e) {
                        To This:

                        Code:
                         
                         $(document).on('click', 'button,i', {}, function (e) {
                        The "i" tag is for detecting clicks on images. If you do not have any image buttons, you can remove that also so:

                        Code:
                         
                         $(document).on('click', 'button', {}, function (e) {
                        Originally posted by lpitman View Post
                        I will try the <a> tag, but I do not know JavaScript, so I don't know how to look for a class. The JavaScript I'm using was supplied earlier in this thread by you, which I do appreciate because I at least got most of it to work.
                        website | buy now | support | youtube

                        Comment


                          #27
                          Thanks Rich, that works perfectly.
                          Code:
                           
                           $(document).on('click', 'button', {}, function (e) {
                          -Larry

                          A member of "The HA Pioneer Group", MyWebSite

                          Plugins:
                          VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                          Hardware:
                          Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                          Comment


                            #28
                            Okay how do I modify JavaScript
                            Code:
                                <script type="text/JavaScript">
                            
                                    $(document).on('click', 'button', {}, function (e) {
                            
                                        var data;
                            
                                        $(this.attributes).each(function () {
                                            var parts = this.nodeName + "=" + this.nodeValue;
                            
                                            if (data == null) {
                                                data = parts;
                                            }
                            
                                            else {
                                                data = data + "&" + parts;
                                            }
                                        });
                            
                                        var fdata = $(this.form).serialize();
                            
                                        if (fdata != null) {
                                            data = data + "&" + fdata
                                        }
                            
                                        AjaxPost(data, "Calendar/CalEvents.html");
                            
                                    });
                            
                                </script>
                            to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:

                            Click image for larger version  Name:	EventList.png Views:	0 Size:	184.4 KB ID:	1346668
                            how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

                            Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'
                            -Larry

                            A member of "The HA Pioneer Group", MyWebSite

                            Plugins:
                            VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                            Hardware:
                            Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                            Comment


                              #29
                              Anybody???
                              -Larry

                              A member of "The HA Pioneer Group", MyWebSite

                              Plugins:
                              VWS, AB8SS, lrpSpeak, Calendar, Arduino, Harmony, BlueIris, Sprinklers, ZipBackup...

                              Hardware:
                              Intel NUC8i7BEH1 running Windows 10 Pro headless, HS3 Pro, Plex running on Synology dual High Availability DS-1815+ NAS (24Tb each), Synology Surveillance Station running on DS-416 Slim (8Tb), Samsung SmartThings, Google Home, Alexa, Hubitat Elevation, ZNET, Ubiquiti UniFi Network, Davis Vantage Pro II Weather Station. Whole house speaker system using a couple of AB8SS switches. Vantage Pro II Weather Station, Rain8Net Sprinklers, Hubitat Elevation, Google Home, Alexa, DSC Security System, Ubiquiti UniFi Network.

                              Comment


                                #30
                                What I do is add something to the actual button so I know which button was pressed in my postback handler, that way I don't have to deal with the javascript. For example, on your button add:

                                action="dosomething"

                                When the button is pressed you will get the "action" value in in your query string. You can then act on the button, so some work, and then go to another page, or refresh the page. Our default ajax handler will parse a few json responses. For redirecting to another page just return the following from your postback handler:

                                ["PAGE_newpage","devices.html"]

                                Originally posted by lpitman View Post
                                Okay how do I modify JavaScript
                                Code:
                                 <script type="text/JavaScript">
                                
                                $(document).on('click', 'button', {}, function (e) {
                                
                                var data;
                                
                                $(this.attributes).each(function () {
                                var parts = this.nodeName + "=" + this.nodeValue;
                                
                                if (data == null) {
                                data = parts;
                                }
                                
                                else {
                                data = data + "&" + parts;
                                }
                                });
                                
                                var fdata = $(this.form).serialize();
                                
                                if (fdata != null) {
                                data = data + "&" + fdata
                                }
                                
                                AjaxPost(data, "Calendar/CalEvents.html");
                                
                                });
                                
                                </script>
                                to react to a specific button? For example, in my EventList feature page, I have several buttons that should call other feature pages using button id's such as 'btnAddEvent' or 'btnEditEvent', example:

                                Click image for larger version Name:	EventList.png Views:	0 Size:	184.4 KB ID:	1346668
                                how can I react to specific buttons and possibly use "location.assign("AddEvent.html") or similar call?

                                Forgot to mention, each button posts back to a PostBackProc that modifies variables then returns 'response=PAGE_NEWPAGE, new_pageurl'
                                website | buy now | support | youtube

                                Comment

                                Working...
                                X