Help With HS4 Feature Page HTML

[jeanv]

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)

[alexbk66]

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.

[jeanv]

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 [COLOR=#9b59b6]class="text-center"[/COLOR]>Get All Voice Devices</h1>
<h3 [COLOR=#9b59b6]class="text-center"[/COLOR]>HomeSeer Version: XXXX</h3>
<h3 [COLOR=#9b59b6]class="text-center"[/COLOR]>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.

[Rupp]

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

[langenet]

Using bootstrap4, you could also use flex-box layout. ie <div class="d-flex justify-content-center">

[alexbk66]

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