No announcement yet.

Help With HS4 Feature Page HTML

  • Filter
  • Time
  • Show
Clear All
new posts

    Help With HS4 Feature Page HTML

    I scouring through the HS4 Plugin and Programming forum threads I see I am in good company with the difficulty of the HS4 Plugin web content. Just when I got the hang of the HS3 PageBuilder class, time for something new I have already created the base of the HS4 plugin and used the blank page HTML example from the sample plugin. It loads and works. But now I need to start populating programmatic HTML elements on that page. I have been looking over (1 - Bootstrap, 2 - Scriban Language, 3 - MDB Material Design for Bootstrap). I developed a simple plugin for HS3 that would allow users to manage their Voice Enabled HomeSeer devices and I wanted to port it to native HS4.

    Here are my initial issues / questions:
    1. In HS4 HTML what is the proper way to center an object on the screen?
      • The HS3 plugin's web output is simply an HTML table with each of the rows using a <td align='center'> tag to center the text. I am pretty sure this is a no-no moving forward and should probably use some kind of CSS element? Which one? How?
    2. I have a button that toggles the text label of the button between "UnCheck All" and "Check All". How does one accomplish this with the new HS4 model?
      • In HS3 I ended up using standard buttons because I could not get the JQuery button labels to toggle.
      • I want to do this with native HS4 buttons if possible?
    3. How to make the button "UnCheck All" and "Check All" do actually that with the generated checkboxes?
      • Again, in HS3 I used standard form checkboxes because the JQuery checkboxes would not respond to my JavaScript to flip the state of the Checkbox
      • I want to do this with native HS4 checkboxes if possible?
    4. I programmatically generate a row that has 3 elements: textbox, checkbox, and hyperlinked text
      • How would I keep these three elements as part of the same "group" since they are all tied to the same voice enabled device?
      • With screen resizing I know these elements may need to move, how is a good way to keep them visually tied together?

    I suck at CSS, but I assume I am probably not needing to add or modify any CSS to do these things?

    I know these are complete NOOB questions, but I am posting after looking over all the 3 sample plugins and reading the forum postings.

    I really appreciate any help you can give me. I then make the plugin free for all to use and the source code posted on GitHub to help others learn (probably from my crappy coding mistakes)

    Click image for larger version

Name:	Screenshot_2021-02-27_14-03-09.jpg
Views:	163
Size:	103.2 KB
ID:	1459448
    Jean-Marie G. Vaneskahian

    You are on dangerous grounds here and I suspect the html pages will be a lot of pain for you. It's not only HTML or CSS - it's also JS, Bootstrap, Font Awesome, Liquid tags.


      In the hopes that this might help others that are struggling as I am with the HS4 Feature Page creation, I have the answer to my #1 question (How does one center things in the web page). I downloaded and am using a trial version of and Web Editor called Pinegrow. It allowed to to place the objects how I wanted them. So far I have leaned to center text:

      <h1 class="text-center">Get All Voice Devices</h1>
      <h3 class="text-center">HomeSeer Version: XXXX</h3>
      <h3 class="text-center">HomeSeer Uptime: XXXX</h3>
      Though the may seem trivial to those that do web development, it took me a long time to figure it out. I hope it helps others. I will keep digging and hopefully be able to answer my other (probably also trivial) questions.
      Jean-Marie G. Vaneskahian


        What is the definition of the class text-center? That's where the CSS is that is centering your data.


          Using bootstrap4, you could also use flex-box layout. ie <div class="d-flex justify-content-center">
          HS3PRO as a Fire Daemon service, Windows 2016 Server Std Intel Core i5 PC HTPC Slim SFF 4GB, 120GB SSD drive, WLG800, RFXCom, TI103,NetCam, UltraNetcam3, BLBackup, CurrentCost 3P Rain8Net, MCsSprinker, HSTouch, Ademco Security plugin/AD2USB, JowiHue, various Oregon Scientific temp/humidity sensors, Z-Net, Zsmoke, Aeron Labs micro switches, Amazon Echo Dots, WS+, WD+ ... on and on.


            Originally posted by Rupp View Post
            What is the definition of the class text-center? That's where the CSS is that is centering your data.
            It's in C:\Program Files (x86)\HomeSeer HS4\html\bootstrap\css\bootstrap.css