search

PlummersSoftwareLLC / NightDriverStrip

NightDriver client for ESP32
https://plummerssoftwarellc.github.io/NightDriverStrip/
GNU General Public License v3.0
1.31k stars 211 forks source link

Web UI: Change from TILES to LIST with checkboxes #301

Closed davepl closed 10 months ago

davepl commented 1 year ago

Rather than small tiles for each effect, we should use a "list" format where each effect gets its own row tile. There should be a checkbox on the left side to enable/disable the effect.

Other functionality, such as Activate, can be a link within the tile, perhaps right-aligned.

image

Louis-Riel commented 1 year ago

I wanted to start a convo regarding this. I already have 2 display modes, I will add this layout, and make it the default.

For the effect decorations, I was thinking that it would be nice to have some attributes added to the effect list to be used for decorations.

I think maybe a picture, and now, looking at the sketch you put up there, a color marquee configuration.

Louis-Riel commented 1 year ago

This is the initial layout of this model, will refine over time: Desktop image

Mobile image

Louis-Riel commented 1 year ago

The light bar could have a configurable set of colors defined at the effect level if we add that. Also, the light bar will later be animated for show, I had issues making that work.

davepl commented 1 year ago

Cool! Could the light “bar” also be a grid? If so, the web page could pull the current contents of the strip or matrix from the ColorData server and display the current contents there….

On Jun 4, 2023, at 12:39 AM, Louis Sebastien Riel @.***> wrote:

The light bar could have a configurable set of colors defined at the effect level if we add that. Also, the light bar will later be animated for show, I had issues making that work.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1575446849, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4HCF3X32DUODHSF7DBD43XJQ3SDANCNFSM6AAAAAAYXSG4RA. You are receiving this because you authored the thread.

Louis-Riel commented 1 year ago

I'm pretty sure the web interface cannot do raw sockets, but here's half a thought. The socket is meant to be used by some other thing running on the network. That thing could be running any framework server thing, and that could also expose a web socket. So the server could send color streams to the esp32, and report back to websocket. So the next thing is that the chip served site could use the UI to build sequences, to then send that over the server,over the websocket, for it then play it back on the esp32. The server would then report the new running stream over websocket clients, so there, yes, the web UI could show a representative glow of the light bar.

KeiranHines commented 10 months ago

I did a quick and simple design change to implement this. In the top right of the 'designer' section now there is a toggle to switch between the old card layout and the new list layout. Clicking anywhere on the list item with popup the settings.

Any feedback on the design would be great. Other its ready for a PR. image image

rbergen commented 10 months ago

@KeiranHines I'm kind of speaking on Dave's behalf - which means I may be wrong - but I think he's looking for a list design that matches the ones shown in earlier comments in this issue (and the issue itself) a little more closely.

My personal comments are:

I'll check with @davepl and ask him to comment directly with his concrete feedback on this iteration of the design.

KeiranHines commented 10 months ago

Thanks for the feedback. I went a bit back and forth between giving the rows more height and being a more compact layout. I can try a few different heights and paddings post screenshot.

As for settings. I actually have click and drag to reorder working on this branch. It picks up the drag event separately from a single click for settings. I didn't add the cog initially cause it wasn't in the above designs and I wasn't really sure where I wanted to put it in the row. Again I will add it in and post some more screenshots.

rbergen commented 10 months ago

Thanks! I think the cogwheel may well not have been in the designs because the whole effect setting dialog hadn't been implemented yet - it certainly wasn't included in this repo's main branch.

davepl commented 10 months ago

Just thinking out loud, I'd imagine each element could render as a tile rather than as a simple horizontal entry, something like this from another "dark model control panel UI phone" that I googled for:

image

But then the question is "what does it include?". Right now we only have two attributes in the tile (name and enabled). 

----
NAME                       [Play Button] 
Description                  Time Remaining
----

Of course inactive ones wouldn't have Time Remaining, I suppose.

rbergen commented 10 months ago

I'm just quickly noting that any description beyond the title (or any other informative property or decoration) would constitute a LEDStripEffect property we'd have to add and expose to the web UI via the API. I guess it makes sense to turn it into an effect setting as well, so it can be changed via the UI if a user wants to do so.

KeiranHines commented 10 months ago

image image A couple of small updates. I have increased the size a bit. I have not yet added the settings cog. I was thinking next to the effect name.

Thoughts?

KeiranHines commented 10 months ago

And with settings cog: image image

davepl commented 10 months ago

Cool! At what point do you want me to start bugging you about layout? Like the UI should work on the phone and desktop, and likely the tiles need a max width, that kind of thing.

I haven’t seen anything that can’t be changed later so far as I know, so I’ve been straying out of it!

Cheers, Dave

PS: Here’s a good example of the Nanoleaf UI with tiles:

On Oct 29, 2023, at 7:05 AM, Rutger van Bergen @.***> wrote:

I'm just quickly noting that any description beyond the title (or any other informative property or decoration) would constitute a LEDStripEffect property we'd have to add and expose to the web UI via the API. I guess it makes sense to turn it into an effect setting as well, so it can be changed via the UI if a user wants to do so.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1784123671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4HCF45ETNKFFPPU5V4VUTYBZIARAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUGEZDGNRXGE. You are receiving this because you were mentioned.

KeiranHines commented 10 months ago

I have just pushed the latest updates to this branch It is ready for any all feedback. It should be pretty mobile friendly. I haven't added a max width as the middle section of the row (name section) is set to grow to the available space meaning the rows should always been full width and the name should always be centered. On a large 4k screen or ultrawide this may mean the rows are a bit wide, but on such screen I prefer the grid layout anyway, hence why I left the option for both.

robertlipe commented 10 months ago

Feel free to punt this to another BR.

I had the web server open. I physically disconnected from the board and it thus powered down. I moved to another room and got distracted by real life and eleventy hundred tabs. Later in the day, I noticed my battery life was uncharacteristically bad. Betcha can see where this is going....

[image: image.png]

Oof. It was dutifully burning 85% of an M1 core (in fairness, this was a peak) dutifully decrementing that counter at 1kHz (or whatever) and fetching requests from a server that's unreachable.

Sure, it needs some kind of a retry/reconnect timer to find the device when it comes back - hopefully on the same IP - but can we please make it less aggressive with some kind of exponential backoff with a cap at a couple of minutes or something that allows the ESP32 time to reboot if it's necessary but eventually gives the page a timeout so it quits converting laptops into lapwarmers? :-)

Thank you. RJL

On Sat, Nov 4, 2023 at 7:54 PM Keiran Hines @.***> wrote:

I have just pushed the latest updates to this branch https://github.com/KeiranHines/NightDriverStrip/tree/feature/designerImprovements It is ready for any all feedback. It should be pretty mobile friendly. I haven't added a max width as the middle section of the row (name section) is set to grow to the available space meaning the rows should always been full width and the name should always be centered. On a large 4k screen or ultrawide this may mean the rows are a bit wide, but on such screen I prefer the grid layout anyway, hence why I left the option for both.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1793595805, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCSD34Y6PRREDNLWH3R6CDYC3PTVAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGU4TKOBQGU . You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

KeiranHines commented 10 months ago

@robertlipe #491 has been opened. I will address that after I finish up with the drag and drop and list view. Shouldn't be too hard to add.

robertlipe commented 10 months ago

No problem. I'm pretty sure I was just the first that had encountered it ... and cared enough to triage it.

Thanx!

On Sat, Nov 4, 2023 at 8:25 PM Keiran Hines @.***> wrote:

@robertlipe https://github.com/robertlipe #491 https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/491 has been opened. I will address that after I finish up with the drag and drop and list view. Shouldn't be too hard to add.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1793600827, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCSD33UJ62ATICI7T3I4ZDYC3THRAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGYYDAOBSG4 . You are receiving this because you were mentioned.Message ID: @.***>

KeiranHines commented 10 months ago

image image Another idea with a bit of color and details added. I added the time remaining as either XX.X (h|m|s) depending on most significant time remaining and added a yellow color when less than half the time left, red when less than a quarter.

robertlipe commented 10 months ago

No prototype. Just words.

Yellow and red are kinds of calls to action or attention. This is the normal and expected passing of time, right? It hits almost zero and then zero and then ... This effect (Smoke) closes and we advance to the next. (You might say, [Horatio https://64.media.tumblr.com/tumblr_mebsbkhJZX1rr4s2oo1_400.gifv glasses ] https://64.media.tumblr.com/2b05026b8ab7b95ea1f523493aff5070/tumblr_mi14fkMUOf1rp8gz7o1_500.gifv it goes 'Up in smoke'.)

Maybe the following idea a bit much to have the whole width (maybe it's because I just moved from my 13" to my 27" where this looks comically wide) but think about a linear determinate progress bar https://m2.material.io/components/progress-indicators/android#using-progress-indicatorsto indicate how far into the current effect we are with a nod that something (is it always next in this the list? Maybe it animates a slides open at 10%) is about to start playing. The new one can then animate a close (where close may be just minimizing height of the progress bar of the one we just left and shrinking the total div) of the old one one it spins down to 90%?

Don't hang up on the numbers. Something to show that I'm about to spool down and this next one is about to spin up, like bending knees down and squatting slightly from a still jump to indicate both the 'launch' off of this one and the 'land' on the next one.

It doesn't have to be - and shouldn't be - seekable.

TBC: This is about time remaining not burning milliseconds and not explicitly tracking timeout/error states. If that indicator on the right is how many seconds since the Web UI has had contact with the native UI, I'd agree that is indeed an impending error situation.

RJL

On Sat, Nov 4, 2023 at 9:13 PM Keiran Hines @.***> wrote:

[image: image] https://user-images.githubusercontent.com/2768974/280502025-b9a52619-9883-4002-81fe-9bfe9a234bea.png [image: image] https://user-images.githubusercontent.com/2768974/280502029-11905a35-0b5b-462d-ad29-c7b7e6b5b99a.png Another idea with a bit of color and details added. I added the time remaining as either XX.X (h|m|s) depending on most significant time remaining and added a yellow color when less than half the time left, red when less than a quarter.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1793610062, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCSD3YTVTEQCQFZFRV6ZWDYC3Y4PAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGYYTAMBWGI . You are receiving this because you were mentioned.Message ID: @.***>

KeiranHines commented 10 months ago

@robertlipe the time here is the remaining effect time. The same time remaining as in the top left, just formatted to be readable instead of just ms. I agree the yellow/red are more call to action colors. I couldn't really think of colors I liked more. I just felt it could use a splash of color. As for linear progress vs circular. The current grid layout had linear. And I considered that. But as you noted. On a large screen, or a short timer it was comically large and raced across my screen so I switched it out for the circular.

robertlipe commented 10 months ago

It woiuldn't have to be the whole width. A pad on left and right that expand to max width and the center div (or the otherwise Chosen One) has a max so it doesn't explode out outwardly.

....and not displayed at all if the time is too short.

It could be a white or a desaturated orange or gold and pair OK. The PiHole Dark Theme actually uses this pairing to a similar effect. https://pi-hole.net/blog/2020/07/15/pi-hole-5-1-released/#page-content (They, um, went though a hard journey to arrive at looking that good. Their forum is full of well-intentioned user suggestions.)

On Sat, Nov 4, 2023 at 10:20 PM Keiran Hines @.***> wrote:

@robertlipe https://github.com/robertlipe the time here is the remaining effect time. The same time remaining as in the top left, just formatted to be readable instead of just ms. I agree the yellow/red are more call to action colors. I couldn't really think of colors I liked more. I just felt it could use a splash of color. As for linear progress vs circular. The current grid layout had linear. And I considered that. But as you noted. On a large screen, or a short timer it was comically large and raced across my screen so I switched it out for the circular.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1793620778, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCSD35K7EMQSNNQANNVHCTYC4AYPAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGYZDANZXHA . You are receiving this because you were mentioned.Message ID: @.***>

rbergen commented 10 months ago

I'll mainly comment on the color of the countdown timer visualization, to the extent that we really shouldn't use signal colors for that. The neutral ➡️ yellow ➡️ red progression will make me instinctively panic about "how do I stop this?!?", which we all agree is not the point or intention.

Beyond that, I don't have a very strong personal opinion about linear vs circular progress (both can work), but I do note we have a lot more horizontal space in the list layout than we have vertical, which may plea for a linear progress indicator after all. And yes, at the same time it should not become so big as to cause eyeball strain while tracking it. Maybe it's possible to put a few designs for horizontal indicators together, so we can make up our minds by looking at them?

davepl commented 10 months ago

I’ve been unable to do a filesystem upload… are there any special tricks, like holding down the BOOT button, or anything required these days?

Serial port /dev/cu.usbserial-8411301 Connecting......

A fatal error occurred: Invalid head of packet (0x01): Possible serial noise or corruption. *** [uploadfs] Error 2 ================================================================================================================================================== [FAILED] Took 9.44 seconds ==================================================================================================================================================

Environment Status Duration

mesmerizer FAILED 00:00:09.442

(Pretty sure it’s no serial noise, I can flash fine…)

On Nov 4, 2023, at 3:36 PM, Dave Plummer @.***> wrote:

Cool! At what point do you want me to start bugging you about layout? Like the UI should work on the phone and desktop, and likely the tiles need a max width, that kind of thing.

I haven’t seen anything that can’t be changed later so far as I know, so I’ve been straying out of it!

Cheers, Dave

PS: Here’s a good example of the Nanoleaf UI with tiles:

On Oct 29, 2023, at 7:05 AM, Rutger van Bergen @.***> wrote:

I'm just quickly noting that any description beyond the title (or any other informative property or decoration) would constitute a LEDStripEffect property we'd have to add and expose to the web UI via the API. I guess it makes sense to turn it into an effect setting as well, so it can be changed via the UI if a user wants to do so.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1784123671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4HCF45ETNKFFPPU5V4VUTYBZIARAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUGEZDGNRXGE. You are receiving this because you were mentioned.

KeiranHines commented 10 months ago

I haven't had any issues building/uploading. I will try tonight and report back if I see similar.

davepl commented 10 months ago

Figured it out… serial monitor was open in the background, which prevents it from working!

I did a sync from the main tree and built and uploaded flash and filesystem, but don’t get the tiled version yet. Or did I jump the gun, and this isn’t in main yet?

Thanks Dave

On Nov 5, 2023, at 1:23 PM, Dave Plummer @.***> wrote:

I’ve been unable to do a filesystem upload… are there any special tricks, like holding down the BOOT button, or anything required these days?

  • Dave

Serial port /dev/cu.usbserial-8411301 Connecting......

A fatal error occurred: Invalid head of packet (0x01): Possible serial noise or corruption. *** [uploadfs] Error 2 ================================================================================================================================================== [FAILED] Took 9.44 seconds ==================================================================================================================================================

Environment Status Duration

mesmerizer FAILED 00:00:09.442

(Pretty sure it’s no serial noise, I can flash fine…)

On Nov 4, 2023, at 3:36 PM, Dave Plummer @.***> wrote:

Cool! At what point do you want me to start bugging you about layout? Like the UI should work on the phone and desktop, and likely the tiles need a max width, that kind of thing.

I haven’t seen anything that can’t be changed later so far as I know, so I’ve been straying out of it!

Cheers, Dave

PS: Here’s a good example of the Nanoleaf UI with tiles:

On Oct 29, 2023, at 7:05 AM, Rutger van Bergen @.***> wrote:

I'm just quickly noting that any description beyond the title (or any other informative property or decoration) would constitute a LEDStripEffect property we'd have to add and expose to the web UI via the API. I guess it makes sense to turn it into an effect setting as well, so it can be changed via the UI if a user wants to do so.

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1784123671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA4HCF45ETNKFFPPU5V4VUTYBZIARAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOBUGEZDGNRXGE. You are receiving this because you were mentioned.

KeiranHines commented 10 months ago

Not on main yet. It's on https://github.com/KeiranHines/NightDriverStrip/tree/feature/designerImprovements

KeiranHines commented 10 months ago

Examples with a linearProgress (Circular still there for comparison). Each one has a slightly different vertical position. image image image

robertlipe commented 10 months ago

I like it. (This shouldn't be a surprise.)

Specifically, I like #3. Second vote goes to #1. #2 just seems to promote a grouping that's not really there.

Thanx for kicking this around.

On Mon, Nov 6, 2023 at 4:36 PM Keiran Hines @.***> wrote:

Examples with a linearProgress (Circular still there for comparison). Each one has a slightly different vertical position. [image: image] https://user-images.githubusercontent.com/2768974/280865239-e8667e48-58dd-45f6-9f86-756bd28e872f.png [image: image] https://user-images.githubusercontent.com/2768974/280865291-8f945aee-a32a-4e7c-966d-31dd47bc096d.png [image: image] https://user-images.githubusercontent.com/2768974/280865359-3e5489a7-701c-4165-beba-67ba3d3d8d66.png

— Reply to this email directly, view it on GitHub https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues/301#issuecomment-1796962025, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACCSD3ZS4KDBBO2ZWHZQVS3YDFQ6LAVCNFSM6AAAAAAYXSG4RCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJWHE3DEMBSGU . You are receiving this because you were mentioned.Message ID: @.***>

rbergen commented 10 months ago

@KeiranHines Thanks! My vote goes to #3 as well. And now that I've seen it, I think I prefer it over the circular progress indicator after all - the latter now comes across to me as if it's pushed into a corner.

KeiranHines commented 10 months ago

I have updated my branch for this work to use option 3 over the circular progress. Once my current PR is merged (#494) I will open a PR for this unless there is any other feedback before opening it.