Announcement

Collapse
No announcement yet.

Is there a visual tool to build the HTML pages with liquid tags and bootstrap code?

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

    Is there a visual tool to build the HTML pages with liquid tags and bootstrap code?

    I can see the examples provided with the sample code, thanks. Does anyone know of a more "visual" tool to make these html pages so you can look at their layout, perhaps debug them somewhat separate from HS4?

    #2
    +1 That would be very helpful
    HS4Pro Running on a Raspberry Pi4
    68 Z-Wave Nodes, 175 Events, 359 Devices
    UPB modules via OMNI plugin/panel
    Plugins: Z-Wave, OMNI, HSTouch, weatherXML, EasyTrigger
    HSTouch Clients: 3 Android, 1 Joggler

    Comment


      #3
      I did what I should have done in the first place -> Google it!

      Here's a quick result:

      https://graygrids.com/free-bootstrap-editors-builders/

      These look promising.

      https://bootstrapstudio.io/
      https://pinegrow.com

      JLDubz rjh what version of Bootstrap are we using? 3.x or 4.x? Any thoughts here?

      Comment


        #4
        My impression is that a UI building won't "fit the mold" that HS has created. The goal as I understand it is for the configuration pages to all be uniform. Uniformity creates limitations on function and creativity by design. You can't have a "Easy" user experience when plugin configuration is different between plugins like it is today. Double this problem with the primary focus being "Mobile" there is no room for creative design freedom. This is a walled garden that we must now conform to.

        Comment


          #5
          We use Pinegrow here. You can build your pages with it and insert the tags after you get the page looking as you like. Of course after you add the tags the GUI view starts to be less useful as Pinegrow does not hide the tags. I have actually asked them for a way to hide them and they said they would note it. I am still on the look out for an editor that will ignore the tags.

          I like Pinegrow because it has a nice source editor so you can easily copy/paste elements and see the result.

          Most of the pages in the HS UI were first coded in Pinegrow just to get the layout the way we liked it.

          If you edit the page in the HS html folder you can edit the page and see the results in HS immediately. This is useful after you start adding tags.

          Make sure you view source on an existing HS4 page then copy the header section with the includes (CSS at the top) and the .js includes at the bottom, then add them to your page. That way Pinegrow will give you the precise look of the HS4 pages and you can just work on your content. I would be happy to post a blank page that be used as a start if you like.
          website | buy now | support | youtube

          Comment


            #6
            Originally posted by simplextech View Post
            This is a walled garden that we must now conform to.
            Is it?

            I would think that on the feature we can do (and have to do) our own html pages, so I would think we can do there whatever we want, as long as the embedded objects/functions are working with the HS4 embedded web server.

            Not the case?

            Comment


              #7
              Originally posted by rjh View Post
              I would be happy to post a blank page that be used as a start if you like.
              Isn't that the sample-blank.html file you included with the sample plugin?

              Comment


                #8
                Originally posted by dcorsus View Post

                Is it?

                I would think that on the feature we can do (and have to do) our own html pages, so I would think we can do there whatever we want, as long as the embedded objects/functions are working with the HS4 embedded web server.

                Not the case?
                It's a good question. I'm not saying either way is good/bad. The current direction of things are "Mobile First" which entails a degree of limits on page design to ensure features function across all devices. If this is not the case then great but the end goal of the whole UI effort then is moot as pages won't conform to any standard and we're back to before this whole UI fiasco right?

                Comment


                  #9
                  There is no limit as to what you put on your feature page, but we of course would like you to stick with the same colors/fonts/etc as the rest of the app. Not sure why you would do something different? If you include our bootstrap CSS we have the colors defined if you use the classes like "primary", "secondary" etc for the colors so this keeps you in the theme.

                  We use material design elements from mdbootstrap.com. You will see many other UI elements there that you can certainly use.

                  We are looking at putting together some guidelines and testing procedure for plugins so they don't stray too far in regards to the UI.

                  So I would say:

                  Use our bootstrap and our default colors
                  Use material design versions of elements
                  Use the bootstrap grid for tables (for responsiveness)
                  Use icons from https://fontawesome.com/icons?d=gallery
                  Or from: https://materialdesignicons.com/

                  (the above information is in the SDK docs, fyi)

                  Originally posted by dcorsus View Post

                  Is it?

                  I would think that on the feature we can do (and have to do) our own html pages, so I would think we can do there whatever we want, as long as the embedded objects/functions are working with the HS4 embedded web server.

                  Not the case?
                  website | buy now | support | youtube

                  Comment


                    #10
                    Yes, but if you load that page in Pinegrow it won't display properly so the tags in that sample need to be expanded. So if you want to edit the page in an editor I can provide an expanded page. Or you can just view source on it and you will get the expanded view that you can edit.

                    Originally posted by dcorsus View Post

                    Isn't that the sample-blank.html file you included with the sample plugin?
                    website | buy now | support | youtube

                    Comment


                      #11
                      Originally posted by rjh View Post
                      but we of course would like you to stick with the same colors/fonts/etc as the rest of the app.
                      when did we ever listen to our parents when they told us not to do something

                      Comment


                        #12
                        Originally posted by rjh View Post
                        but we of course would like you to stick with the same colors/fonts/etc as the rest of the app.
                        OK on a more serious note, any thoughts on what kind of icon/images to use? As I was focusing on status and graphics last night, it occurred to me that I now have the opportunity to do much better then what I did in HS3, meaning, find good looking (contemporary) images. So as soon as I began my search, I hit a gazillion of them but they range from very colorful to minimalist black and white. In fact, the player tile view that you have provided, is very minimalist so does the HS team have some thoughts about provided a large collection of images?

                        So before you say, they are already somewhere in the images folder, I need icons that represent track, album, artist, next, prev, loudness, mute, repeat, radiostation .....
                        I really don't like this view, albeit this is HS3 PI under HS4

                        Click image for larger version

Name:	player1.png
Views:	136
Size:	48.9 KB
ID:	1329341

                        I hope I can get creative and give all child-devices (remember this is HS3) a nice image, hopefully without breaking the HS3 implementation.
                        Same goes for the HS4 implementation which currently looks like this and it would be great if I could find good looking images for what I encircled in red.


                        Click image for larger version

Name:	player6.png
Views:	124
Size:	174.3 KB
ID:	1329342


                        Comment


                          #13
                          I am getting icons from here (you can easily resize):

                          https://fontawesome.com/icons?d=gallery
                          https://materialdesignicons.com/

                          I know they seem kinda boring, but you can easily apply color if needed. I am using them for the mini player control in the HS4 view.

                          For larger status, look in the HS status folder. Are you looking for images for status or controls?

                          We are putting all our status images on Github along with design guidelines so users can create their own and submit them for inclusion with HS.

                          Originally posted by dcorsus View Post

                          OK on a more serious note, any thoughts on what kind of icon/images to use? As I was focusing on status and graphics last night, it occurred to me that I now have the opportunity to do much better then what I did in HS3, meaning, find good looking (contemporary) images. So as soon as I began my search, I hit a gazillion of them but they range from very colorful to minimalist black and white. In fact, the player tile view that you have provided, is very minimalist so does the HS team have some thoughts about provided a large collection of images?

                          So before you say, they are already somewhere in the images folder, I need icons that represent track, album, artist, next, prev, loudness, mute, repeat, radiostation .....
                          I really don't like this view, albeit this is HS3 PI under HS4

                          Click image for larger version

Name:	player1.png
Views:	136
Size:	48.9 KB
ID:	1329341

                          I hope I can get creative and give all child-devices (remember this is HS3) a nice image, hopefully without breaking the HS3 implementation.
                          Same goes for the HS4 implementation which currently looks like this and it would be great if I could find good looking images for what I encircled in red.


                          Click image for larger version

Name:	player6.png
Views:	124
Size:	174.3 KB
ID:	1329342

                          website | buy now | support | youtube

                          Comment


                            #14
                            Originally posted by rjh View Post
                            Are you looking for images for status or controls?
                            Mostly for status, especially for features which just hold textual info like track name, artist name etc. That "settings" icon that seems to be the default, I really don't like, so I would create a status/graphics value (that never changes) that shows something more telling. For example, artist could be something like:

                            Click image for larger version  Name:	artist.png Views:	0 Size:	4.3 KB ID:	1329355

                            Comment


                              #15
                              We are putting all our status images on Github along with design guidelines so users can create their own and submit them for inclusion with HS.
                              Can we get a link to this I have some Icons I would like to get included....
                              HS3 Pro Edition 3.0.0.435 (Windows 10 vmware)
                              BLOccupied:,UltraNetCam3:,weatherXML:,RFXCOM:,Current Cost 3P:,UltraGCIR3:
                              DMMQTT:,Kodi:,Z-Wave:,BLRadar:,EasyTrigger:,MySensors:,BLBackup:

                              Comment

                              Working...
                              X