UI Help

[shshaw]

I've appreciated all the help with adding MIDI Support ( #17 ) and wanted to contribute a bit. Part of my specialty is UI design. Would you like for me to take a pass at cleaning up some of the WebUI?

If so: do you have a specific build process for the WebUI? I see you have Sass, but don't see any way you're compiling & minifying it.

[mchilli]

Hey, sure, if you want. I mean, you're right, the UI is more practical than fancy.
For Sass, I use this extention for VS Code with these format settings.

"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css"
},
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css"
}
]

And yes, I think that's not the standard these days, but as a hobby programmer, it works great for me so far. ^^
Do you already have an idea in mind?

[shshaw]

Here's a first attempt at cleaning up the primary UI:

The actual modal editors will need some updating as well, though I don't have any designs in mind yet.

If you're on board with some changes, I can do some quick implementation. I can try to avoid adding any complexity with a build system or anything, though a simple Vite build setup might be a good plan to make it easier to develop & deploy. 😄

[mchilli]

Okay, that looks really good. Even if it feels like a few buttons are still missing? For example, the “back button”? What is displayed in the brackets next to the groups? The number of configured keys (macros + groups)? So far, this is just a design suggestion without any function, right?

To be honest, I'd like to keep the project as vanilla as possible, without any big build tools or anything like that. I hope you understand what I mean.

But I really like the design, and I'd be happy if you could help me with it.

[shshaw]

The "Group" bar on a Key indicates that a button is a Group, and the bracketed text is the number of macros within the group (Not strictly necessary, but helpful info). Clicking it would take you into the Group and the top left key would become the "Back" button like in the current UI.

I'm sure there's a few other UI considerations with Groups, but the goal is to not change too much of the overall UI and stick to mostly stylistic and organizational changes since I don't know how complicated editing the templates will be in your current setup.

Understood on the build setup & desire for simplicity. The main reason I would recommend something like Vite or Esbuild or whatever would be to run a dev server to test out the UI. As-is, if you open the raw index.html file from the project dir in the browser, you can't actually load the JavaScript to test things out due to security restrictions:

[mchilli]

The Back button is a separate button in case you only configure a “go to root” button or use the encoder switch to go back. Therefore, it is necessary.^^

The templates are generated with “utils.create”, a helper function for creating the HTML structure.

In my case, I use this extension to test my websites. And it works without any problems.