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

[dcorsus]

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?

[rmasonjr]

+1 That would be very helpful

[dcorsus]

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?

[simplextech]

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.

[rjh]

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.

[dcorsus]

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?

[dcorsus]

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?

[simplextech]

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?

[rjh]

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)

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?

[rjh]

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.

Isn't that the sample-blank.html file you included with the sample plugin?

[dcorsus]

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

[dcorsus]

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



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.

[rjh]

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.

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



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.

[dcorsus]

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:

[dmurphy]

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....