search

mpogue2 / SquareDesk

Fully-featured music player and sequence designer, designed for square dance callers
10 stars 4 forks source link

Enhancement: Update the UI #611

Open mpogue2 opened 3 years ago

mpogue2 commented 3 years ago

This was a live mockup of a React/Electron/Material-UI JS version of our SquareDesk UI. Tabulator was used for the songTable. I like this a lot better than what we have now -- it's tighter, and it doesn't have control sliders that are 6" wide. That seemed like a good idea at the time to make everything more visible, but I think this layout is cleaner and more modern, without sacrificing usability. It's more consistent, too.

Dan has talked about trying Dart/Flutter, but I personally don't think it's quite ready for prime time yet. Perhaps just some updating of our UI, along these lines, using Qt6 would be fine for now.

SD2-2021 03 24

I do like the way that the Tabulator songTable has the text fields embedded in the header. No more alignment problems!

Bug: Recent, Pitch, and Tempo headers should have been centered, like their contents. The tabs are also currently missing in this mockup view.

mpogue2 commented 3 years ago

By contrast, here's what we have now (this is Qt 5.15, I think -- might be different for Qt 6.2).

Screen Shot 2021-10-24 at 5 06 47 PM

mpogue2 commented 2 years ago

Material UI sliders in Qt: https://github.com/laserpants/qt-material-widgets

mpogue2 commented 2 years ago

Also, the Material UI is available in QML. So, this might be as easy (easy?) as converting our front end GUI to QML, and using the Material QML style. There's a visual designer for it, too.

I think QML can initiate callbacks into our C++ functions.

mpogue2 commented 2 years ago

I decided to try to prototype the QML using the Qt Design Studio, which is basically a QML GUI-based editor, with some limited debug capability. It seems to be an Alpha release, because it doesn't do Cut/Paste correctly in the text view. And overall it's buggy. But, it got me going.

I was able to create most of our mainWindow prototype. All the sliders are live, and they correctly change their associated text (all from QML, no C++ at all!). The clock and VU meter are not live. I am still working on the songTable view, which requires some more substantial work to get going. TODO: column headers, stable sorting by column, filtering. The songTable is just some sample static data right now, but the zebra striping is automatic (done in QML).

I'm kinda surprised that it works at all, with about 600 lines of QML. And much of that will go away, when I create a slider component that has an attached text label. Right now, I just cut/copy/pasted the slider code to make all the sliders. I think factoring this out (the Right Thing to do) would reduce the total size by half or so.

The songTable is the hardest part, but I have a good reference to look at. This is a Qt guy who implemented headers, sorting, and draggable headers (which we don't need): https://www.youtube.com/watch?v=vwukO5Vusv8

Work-in-progress: here's how far I got today. I am still learning this stuff. It looks fairly straightforward to hook it all up to C++. Then, the QML is the UX front end, and we have a model class accessible from QML that wraps the C++.

Screen Shot 2021-11-25 at 1 20 22 AM

mpogue2 commented 2 years ago

The prototype is only 220KB compressed. In case anybody wants to play with it, here's what I have done so far: SD_next2.zip