Proposal for improved Web GUI

[gingerbeardman]

Firstly, thanks for gbs-control!

This wasn't asked for, so no worries if it's off the table.

I used Bootstrap to put together an improved Web GUI:

• works at all screen sizes (responsive)
  • mobile
  • tablet
  • laptop
  • desktop
• features improved design language
  • visual tabs
  • icons
  • tooltips
  • different style buttons
  • momentary (outlined)
  • grouped/separate toggle (filled)
  • danger (red)
  • ok (green)
  • different style text for notes and warnings
• maintainable
  • standardised code
  • anybody with Bootstrap experience
• fixes quirks with existing UI
  • buttons show their intended state

If this revised interface is liked enough to want to merge, I can amend, tweak, and optimise before creating a PR.

Cheers!

Demo: https://www.gingerbeardman.com/gbs-control/

[Nuck-TH]

currently it is mobile only as it is not even try to fit into desktop screen. and it lacks log console, which is vital for operation monitoring and troubleshooting.

[gingerbeardman]

currently it is mobile only as it is not even try to fit into desktop screen

My one is most definitely not mobile only.

Can you explain your reason for thinking that @Nuck-TH?

and it lacks log console, which is vital for operation monitoring and troubleshooting

Added.

[VirtuaVespa]

A larger "Freeze Frame" button would be great as it's a bit fiddly to hit precisely on a touch screen

[Nuck-TH]

Can you explain your reason for thinking that @Nuck-TH?

All layouting is vertical and doesn't change besides stretching text to the right.

[gingerbeardman]

All layouting is vertical and doesn't change besides stretching text to the right.

OK, I'd say that's something different. I'll improve that aspect.

[gingerbeardman]

A larger "Freeze Frame" button would be great as it's a bit fiddly to hit precisely on a touch screen

Done, great idea @VirtuaVespa

All layouting is vertical and doesn't change besides stretching text to the right.

Much better now @Nuck-TH

Note: you'll need Shift-click-Refresh the page to get the style changes to be picked up.

[VirtuaVespa]

@gingerbeardman Looks great, I like that it's last on the list too, less likely to hit a button below

[gingerbeardman]

Freeze button can be anywhere.

I just this minute moved it to the top so you don't have to scroll to it. And made it green.

It's on a row of its own.

[Nuck-TH]

Not a demand now but - isn't layout look better if centered, instead of left? And maybe dark theme? Maybe even with choice and (cookie based?) remembering of it...

TBH i would prefer named presets to fancying up, but it is demand of whole different level, as it will require revamp of protocol that web gui uses and not very trivial changes in firmware code. So, i guess, don't take it as suggestion, but just as thinking aloud...

[gingerbeardman]

isn't layout look better if centered, instead of left?

There is a compromise of having the layout container centred, but the content left aligned. I'll do this soon, it's a good idea.

My earlier choice with vertical buttons was that it takes less searching to find an item in a vertical list, than in a grid.

I will make the buttons alphabetically ordered to help, we'll see.

And maybe dark theme? Maybe even with choice and (cookie based?) remembering of it...

Great idea, themes are very easy to do with Bootstrap. I'll add it soon.

[gingerbeardman]

Changes made

• centred container
• more button groups
• redid Picture Control tab
• button reordering
• lots of tweaks
• dark theme test
• no theme picker just yet

Same URL, remember to force refresh the page to see changes.

TBH i would prefer named presets to fancying up, but it is demand of whole different level, as it will require revamp of protocol that web gui uses and not very trivial changes in firmware code. So, i guess, don't take it as suggestion, but just as thinking aloud...

Sure thing! I'll learn more about this, feel free to keep thinking out loud @Nuck-TH

[ramapcsx2]

This looks great, I really like it! Quick questions:
Did you check how the old Javascript and the Arduino sketch interact, and do you think this can be kept or adapted? Can you live with delays on me implementing this? I'm currently too busy to tackle such projects :p

[dark-aries]

I'd center align everything instead of left align. Also there is too much scrolling in the preferences page. You already have some panels taking up the whole width, put two side by side. Bootstrap should shove them underneath when on mobile. I'd probably also change the move picture and border masking arrows to be aligned like an actual dpad but that's me. Compared to when you first shared this and now, it's already loads better.

Another thing as well is that the presets are currently shoved side by side with no padding between them. Since they are all one solid colour it doesn't give the impression it's actually a button.

[gingerbeardman]

This looks great, I really like it!

Cool!

Did you check how the old Javascript and the Arduino sketch interact, and do you think this can be kept or adapted?

Yes

Can you live with delays on me implementing this? I'm currently too busy to tackle such projects :p

Yes, same!

[gingerbeardman]

I'd center align everything instead of left align.

Why? What benefits do you think it gives? Just out of interest.

I'm a believer that the straight-edge you get from left-aligned makes things more readable and findable, compared to a ragged-edge you get when things are centred.

Also there is too much scrolling in the preferences page. You already have some panels taking up the whole width, put two side by side. Bootstrap should shove them underneath when on mobile.

I agree. It's on my to-do list.

I'd probably also change the move picture and border masking arrows to be aligned like an actual dpad but that's me. Compared to when you first shared this and now, it's already loads better.

Agreed. I'm working towards this dpad goal but have yet to find the best way to arrange those arrows.

Another thing as well is that the presets are currently shoved side by side with no padding between them. Since they are all one solid colour it doesn't give the impression it's actually a button.

It's a grouped button, but I see your point. Will try to add some outlines or dividers.

Thanks for your constructive feedback!

[gingerbeardman]

Changes

• Preferences page is now 2 columns
  • not 100% happy with this but it is OK for now
• 4-day "d-pad" buttons are in
  • could also have a centre "reset" position?
• Borders on grouped buttons

Same URL, remember to force-refresh the page.

edit: 30 mins later, new styles have now been uploaded! d'oh

[dark-aries]

I'd center align everything instead of left align.

Why? What benefits do you think it gives? Just out of interest.

Mainly when there was so much horiztonal free space buttons work better centered compared to left aligned. However now that the most dense page has two columns, I don't see a point of centering anymore after playing around with the test page.

Also with so much free space and only buttons, center align would mimic a remote in layout. Maybe more useful for mobile at this point. At this point personally I'm pretty happy with the layout at this point. Minimal scrolling needed on desktop now.

[gingerbeardman]

Great! Mobile does everything in one column with buttons stretched to full width, so the remote layout you mention.

Next, I would like to add (visible or hidden) toggles that are remembered - so expert users can hide them - for:

• descriptions
• log

and

• theme (perhaps we will leave dark mode theme, I have no preference)

[gingerbeardman]

Behind the scenes work for hiding descriptions is done.

Expert mode toggle will be added soon.

Force refresh to see the latest. It will look wrong otherwise.

[goutsune]

I'm mostly happy with redesign, thanks for working on hide-description. A few suggestions though: Use some icons instead of custom fonts? I use old android 2 flip-phone and I get long text labels instead of icons, same on my default browser where I don't use remote fonts.

Interactive console? I'm not sure if rework on web-side is enough to do it, but it looks like you can send custom commands already by tinkering with code and inputs. So it would be nice to have input field with history to set custom values, trigger bits and dump presets without need for UART connection.

[gingerbeardman]

I'm mostly happy with redesign, thanks for working on hide-description.

👍

Use some icons instead of custom fonts? I use old android 2 flip-phone and I get long text labels instead of icons, same on my default browser where I don't use remote fonts.

100% yes, this would be part of my optimisation and minimisation once the design is finalised and locked down. Definitely no need for custom remote font for icons when we are only using a handful.

Interactive console? I'm not sure if rework on web-side is enough to do it, but it looks like you can send custom commands already by tinkering with code and inputs. So it would be nice to have input field with history to set custom values, trigger bits and dump presets without need for UART connection.

If this is possible, I can work it in. But I can't do the exploration on how that all works, somebody else would need to do that. If I get a prototype of it working, I can include it.

[gingerbeardman]

Update:

• help button
  • toggles help state across whole UI (no need to toggle on each page)
  • help currently defaults to off/hidden (for testing)
• picture control page is now responsive on mobile
  • "d-pad" button groups now stack vertically

same URL, make sure to force page refresh 😉

[VirtuaVespa]

Just wanted to say it's looking great!

[gingerbeardman]

Some todo notes so I don't forget.

• make momentary buttons have momentary highlight
• disable responsive page zoom on double tap
• homescreen bookmark requirements
• clear log button

[smartroad]

This looks great, I've only just started using this but can't wait for this to be a thing. I was using my mobile phone to adjust for my Amiga and had to move and scale the screen a lot. Double tapping caused the page to zoom in and out, I was going to come on here and ask how to stop that, but i really hope this is released soon!

[gingerbeardman]

There's no timescale right now, as there's still some work to do for me and then for Rama.

So... "eventually"... is the best expectation!

[ramapcsx2]

Right, I didn't forget and we'll push this through asap :)

[Arnold101knight]

much better. also edit 720x480p to 720/640x480p (im giuseppe from instagram ;))