Announcement

Collapse
No announcement yet.

I miss the old PageBuilder stuff

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

    I miss the old PageBuilder stuff

    I don't understand the new methods for creating web pages. The old HS3 seems more intuitive to me.
    I'm trying to recreate my Calendar Plugin and get nothing but frustrated.
    -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.

    #2
    Originally posted by lpitman View Post
    I don't understand the new methods for creating web pages. The old HS3 seems more intuitive to me.
    I'm trying to recreate my Calendar Plugin and get nothing but frustrated.
    If you study the netcam plugin source, you'll notice that they have a combination of new and old ways (using pagebuilder).

    See here https://github.com/HomeSeer/Netcam-P...iewimages.html and hunt for PagePreLoad, study it.
    I managed to get a few pages from HS3 included almost verbatim. What was most critical is that the right pagename gets used so in the netcam case, the .html is to be found at /NetCam/viewimages.html and if you want the postbacks to work, make sure they use this URL to post back.

    Maybe on a not so good note (for me), the (text input) JQuery elements used, I'm having trouble to get them rendered properly.

    First picture below shows things rendering as expected, still hunting for issues with delete buttons (which trigger a confirm pop-up that doesn't seem to work.

    Click image for larger version

Name:	table1.png
Views:	359
Size:	290.8 KB
ID:	1332613

    This one , you see all the text boxes showing twice, no idea why

    Click image for larger version

Name:	table2.png
Views:	333
Size:	291.8 KB
ID:	1332614

    So in short, I think it is possible but may need a few tricks to get it to work

    Comment


      #3
      If I remove this line from the .html page

      {{includefile 'bootstrap/js/page_common.js'}}


      Then the jQuery stuff renders and works as it should. May have to raise a bug report for this.

      Dirk

      Comment


        #4
        Thanks that helps.
        -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


          #5
          I too am struggling with creating web pages, there has got to be a better way.
          https://forums.homeseer.com/forum/de...plifier-plugin

          Comment


            #6
            I asked in another thread how I'm supposed to work with OAuth workflows and rjh nor anyone else ever responded. Without doing OAuth I can't integrate third party services and what's the point of all of this mobile effort if you can't integrate with anything?

            Comment


              #7
              I still hate this new web crap, having so much trouble trying to untangle everything. It's going to take months just to redo web pages that were pretty in HS3. Nothing like re-inventing the wheel.
              -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


                #8
                Originally posted by lpitman View Post
                I still hate this new web crap, having so much trouble trying to untangle everything. It's going to take months just to redo web pages that were pretty in HS3. Nothing like re-inventing the wheel.
                Why take months? HS3 Plugins WORK with HS4 remember. That's what everyone has been told. So why should you or I or anyone spend weeks or months updating plugins to work?

                Comment


                  #9
                  Would it be possible for HomeSeer to publish a copy of the
                  clsPageBuilder
                  code, so we could see what what happens in the background of HS3 pages? I think it would help us to to re-code some of our existing pages.
                  -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


                    #10
                    Please do not use the pagebuilder for your feature pages. The pages created with that will not display properly on a mobile device.

                    Let me know where you are having an issue. The sample plugins include some blank HTML pages that you can use to get started with your feature page. I use the Pinegrow bootstrap editor to build a page and then use the templates to create dynamic content. I am happy to help with this if needed.

                    Also, if really want to build your pages in code, you can simply generate the page using bootstrap formatted controls and then return the HTML. I can help getting you the raw controls HTML if needed. Note that all the controls we use are documented here:

                    https://mdbootstrap.com/

                    We use the material design format. From there you can get the HTML for any control you want to use.
                    website | buy now | support | youtube

                    Comment


                      #11
                      How do I use PostBackProc to modify variables and perform modifications and then refresh the page? Return response in some of your examples does not work for me? I am using a modified sample-blank.html and modified as follows:
                      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'>
                              <!--This is an intentionally blank page that you can use as a blueprint to create feature pages from-->
                              {{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'}}
                      
                      
                      
                      </body>
                      
                      </html>
                      I finally got original page to display pretty, but can't figure out how to modify things like next month or next year and refresh the page.

                      -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


                        #12
                        Originally posted by lpitman View Post
                        How do I use PostBackProc to modify variables and perform modifications and then refresh the page? Return response in some of your examples does not work for me? I am using a modified sample-blank.html and modified as follows:
                        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'>
                        <!--This is an intentionally blank page that you can use as a blueprint to create feature pages from-->
                        {{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'}}
                        
                        
                        
                        </body>
                        
                        </html>
                        I finally got original page to display pretty, but can't figure out how to modify things like next month or next year and refresh the page.
                        I suspect you have the same issue I had and opened an issue in Github for it (https://github.com/HomeSeer/Plugin-SDK/issues/22)

                        Try to remove this line
                        {{includefile 'bootstrap/js/page_common.js'}}

                        Comment


                          #13
                          Not sure Dirk has the correct answer. 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.

                          Here is an example that might help. I added a button to the sample page like so:

                          Code:
                          <button type="button" class="btn btn-default"  action="button_press">Save</button>
                          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.

                          Code:
                          <script>
                               $(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
                                    }                    
                          
                                    AjaxPost(data,"HomeSeerSamplePlugin/sample-blank.html");
                                });
                          </script>
                          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.
                          website | buy now | support | youtube

                          Comment


                            #14
                            Thanks, I'll try that.
                            -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


                              #15
                              Originally posted by rjh View Post
                              Not sure Dirk has the correct answer. 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?
                              Good clarification. I assumed that the function BuildCalendar did exactly the same as in HS3 except no header/footer from HS3.

                              Comment

                              Working...
                              X