React/UI Developers #298
Replies: 18 comments 39 replies
-
Hi, That was just my initial thoughts and I would appricate a discussion about my opinions. |
Beta Was this translation helpful? Give feedback.
-
Just in case it’s helpful, I believe the internal web server can already serve gzip’d files. It seamless decompresses and serves files that are listed with a .gz extension, so something similar to that… but it can handle them.
- Dave
… On Jun 4, 2023, at 12:25 AM, Rutger van Bergen ***@***.***> wrote:
I was thinking that if the default random js filename is a means to force a reload (i.e. nullify browser cache) when the code changes, we could choose to append a bogus randomized query parameter to the index.js URL within index.html; ESPAsyncWebServer will happily ignore it. To replicate the original behavior, we could make bake_site.py generate a hash of the index.js file, and inject that into the URL used to retrieve the file. Then again, I may be suggesting a solution for a problem that doesn't actually exist.
—
Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF5MVA52IUEJACTGQVTXJQZ7RANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
That may be how it works - rather than decompressing the actual data is may just pass it through the gzip header set, not sure! I just know it worked if I compresses index.html for example….
… On Jun 4, 2023, at 8:38 AM, Rutger van Bergen ***@***.***> wrote:
That's good to know! The thing is that the decompression can be made the browser's responsibility if the correct response headers are returned together with the gzipped file; that would save a fair amount of CPU cycles on the ESP32. It could be that ESPAsyncWebServer adds the right headers automatically; this is something we can test once we have a gzipped file ready to serve out.
—
Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF4MRRA4OJRZK7Z3ADDXJSTY5ANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
What is the next step here? Is there a discission that needs to be taken or tasking what needs to be done? |
Beta Was this translation helpful? Give feedback.
-
@gjermshus , I don't know a lot about it, but https://wokwi.com/projects/new/esp32-s3 is an emulator that will do many common ARM boards, including the S3. Compile times don't seem awesome, but it saves you from upload times and may let you work from a laptop without actual hardware. As a bonus for us, it'll also do NeoPixel (maybe not huge crazy things) including the rings, but you can drag and drop wires and components, drag in wires, and share projects. For example, our neighbors might include https://wokwi.com/projects/314498157407896129 (wrong CPU, but FastLED) Starting at the last, and having no idea what I was doing, it was trivial to add a second light. Screen.Recording.2023-06-10.at.7.23.36.AM.movi have no idea if it'll work for you, but it might be worth looking at. |
Beta Was this translation helpful? Give feedback.
-
I'm currently working on a React library with multiple tools for complex UIs. It only quite recently got into a somewhat publishable shape, so I'm starting to look for some use cases for any selection of the features it offers. I'm still familiarizing myself with this repo, but so far it seems like a good fit. The library contains:
The repo name ( While I'm still figuring out the exact requirements of NightDriverStrip's web UI, so far it looks like each of these components has a good chance to be useful. If none is of use, I'm still happy to contribute in other ways. Some random suggestions (I'll put these here to not take too much space but maybe it's more orderly to start a new discussion if you'd like to respond to any of them):
|
Beta Was this translation helpful? Give feedback.
-
Ok folks, time to cut the bate. I propose this as a base to the Web UI. There is still work to be done, but I think that this is a fairly good starting ground. The site currently compiles and compresses the resulting files and flashes those compressed html and js to the chip. This is how it currently looks, looking for some inputs on design and style. The light theme does need work, some icons colors are not contrasted properly, some of that in the dark theme too(the checkbox), but much it works much better. This site is built in typescript and running React 18 and MUI v5. The only external include I have at the moment is Recharts, for the cpu and memory stats. I would like to stay true to that principle as much as possible. I would like to stay away from importing external libraries when native options are available. The site is built in the functional programing model, and has some Angular ways of thinking. I created services that components can subscribe to and react to events locally. I currently have a service called ESP32Service that handles the chip configuration and effect list. A SiteConfig service for site options. This allows for better modularization of the code and makes handling state changes more succinct. |
Beta Was this translation helpful? Give feedback.
-
Cool! I’m traveling this weekend but will be able to get back and load it up and take it for a drive in a day or two!
- Dave
… On Jun 18, 2023, at 2:18 AM, Pieter Vincent ***@***.***> wrote:
"I would like to stay away from importing external libraries when native options are available."
In that case, I'm sure you're interested in useSyncExternalStore <https://react.dev/reference/react/useSyncExternalStore>. It's the native React way to subscribe components for local updates. I make heavy use of it in the library I mentioned in my previous post and the developer experience and performance so far have been very good for me. The library is quite lightweight (negligible compared to something like MUI), but perhaps using useSyncExternalStore directly works better here.
I suggest to already open a pull request for that branch. It's way more efficient to give feedback when you can comment on a line basis.
—
Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF7AAVPF6YA7WCSY5KLXL3BU5ANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
Can someone give me the 30-second steps on where to clone from and what steps to build (bake_site, etc) in order to deploy Louis’s latest UI?
Thanks!
Dave
… On Jun 18, 2023, at 7:48 AM, Dave Plummer ***@***.***> wrote:
Cool! I’m traveling this weekend but will be able to get back and load it up and take it for a drive in a day or two!
- Dave
> On Jun 18, 2023, at 2:18 AM, Pieter Vincent ***@***.***> wrote:
>
>
> "I would like to stay away from importing external libraries when native options are available."
>
> In that case, I'm sure you're interested in useSyncExternalStore <https://react.dev/reference/react/useSyncExternalStore>. It's the native React way to subscribe components for local updates. I make heavy use of it in the library I mentioned in my previous post and the developer experience and performance so far have been very good for me. The library is quite lightweight (negligible compared to something like MUI), but perhaps using useSyncExternalStore directly works better here.
>
> I suggest to already open a pull request for that branch. It's way more efficient to give feedback when you can comment on a line basis.
>
> —
> Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF7AAVPF6YA7WCSY5KLXL3BU5ANCNFSM6AAAAAAYXSC3BU>.
> You are receiving this because you were mentioned.
>
|
Beta Was this translation helpful? Give feedback.
-
Will check asap!
Sent from Proton Mail for iOS
…On Sat, Jun 17, 2023 at 10:15 PM, Louis Sebastien Riel ***@***.***(mailto:On Sat, Jun 17, 2023 at 10:15 PM, Louis Sebastien Riel <<a href=)> wrote:
Ok folks, time to cut the bate. I propose this as a base to the Web UI. There is still work to be done, but I think that this is a fairly good starting ground.
The site currently compiles and compresses the resulting files and flashes those compressed html and js to the chip. This is how it currently looks, looking for some inputs on design and style.
The light theme does need work, some icons colors are not contrasted properly, some of that in the dark theme too(the checkbox), but much it works much better.
[image](https://user-images.githubusercontent.com/53452394/246641133-15b69aed-e334-4489-acd0-d9c89aeed9ac.png)
This site is built in typescript and running React 18 and MUI v5. The only external include I have at the moment is Recharts, for the cpu and memory stats. I would like to stay true to that principle as much as possible. I would like to stay away from importing external libraries when native options are available.
The site is built in the functional programing model, and has some Angular ways of thinking. I created services that components can subscribe to and react to events locally.
I currently have a service called ESP32Service that handles the chip configuration and effect list. A SiteConfig service for site options. This allows for better modularization of the code and makes handling state changes more succinct.
https://github.com/Louis-Riel/NightDriverStrip/tree/main
—
Reply to this email directly, [view it on GitHub](#298 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/A5B4WRYTZRNSRFROYFS7RDDXLZXEVANCNFSM6AAAAAAYXSC3BU).
You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
I wasn’t able to build (log below). I did install yarn, which I didn’t already have! This is on MacOS.
Resolving mesmerizer dependencies...
Already up-to-date.
Updating metadata for the vscode IDE...
Error: Processing mesmerizer (board: esp-wrover-kit; platform: espressif32; framework: arduino)
--------------------------------------------------------------------------------
Verbose mode can be enabled via `-v, --verbose` option
yarn install v1.22.19
info No lockfile found.
[1/4] Resolving packages...
warning vite-plugin-externals > magic-string > ***@***.***: Please use @jridgewell/sourcemap-codec instead
[2/4] Fetching packages...
error ***@***.***/core/-/core-2.11.8.tgz: Extracting tar content of undefined failed, the file appears to be corrupt: "ENOENT: no such file or directory, chmod ***@***.******@***.***/core/dist/umd/popper.js'"
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
yarn run v1.22.19
$ vite build
/bin/sh: vite: command not found
error Command failed with exit code 127.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
FileNotFoundError: [Errno 2] No such file or directory: 'site/src/espaddr.tsx.orig':
File "/Users/dave/.platformio/penv/lib/python3.9/site-packages/platformio/builder/main.py", line 168:
env.SConscript(env.GetExtraScripts("pre"), exports="env")
File "/Users/dave/.platformio/packages/tool-scons/scons-local-4.5.2/SCons/Script/SConscript.py", line 598:
return _SConscript(self.fs, *files, **subst_kw)
File "/Users/dave/.platformio/packages/tool-scons/scons-local-4.5.2/SCons/Script/SConscript.py", line 285:
exec(compile(scriptdata, scriptname, 'exec'), call_stack[-1].globals)
File "/Users/dave/source/repos/louis/NightDriverStrip/tools/bake_site.py", line 27:
shutil.copy(os.path.join(srcFolder, backupAddr), os.path.join(srcFolder, espAddr))
File "/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/shutil.py", line 418:
copyfile(src, dst, follow_symlinks=follow_symlinks)
File "/Applications/Xcode.app/Contents/Developer/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/shutil.py", line 264:
with open(src, 'rb') as fsrc, open(dst, 'wb') as fdst:
========================= [FAILED] Took 11.75 seconds =========================
Environment Status Duration
------------- -------- ------------
mesmerizer FAILED 00:00:11.748
==================== 1 failed, 0 succeeded in 00:00:11.748 ====================
… On Jun 20, 2023, at 4:30 PM, Louis Sebastien Riel ***@***.***> wrote:
The steps are pretty simple. Pull my fork (https://github.com/Louis-Riel/NightDriverStrip) and either:
Flash the esp, the website published should work the same as the previous one.
or
Update the src\espaddr.tsx to something like this, change the address to the targeted esp
export const httpPrefix='http://192.168.1.143/';
run
npm install
run
npm run dev
This will start a local server and serve on port 4000. In that mode, if you update parts of the site, it will refresh the page automagically with the updates.
Drag-drop coming soon.
Thanks, Louis.
—
Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF4ORSONJ4ZTTUSV62TXMIXATANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
Cool, it’s working now, thanks!

… On Jun 20, 2023, at 5:47 PM, Louis Sebastien Riel ***@***.***> wrote:
If you have the chance, do a google search for animated gifs, and use them for the effects, looks quite spiffy:
<https://user-images.githubusercontent.com/53452394/247361919-b0296948-4cc5-4223-8eb3-5a2971dbaf2e.png>
—
Reply to this email directly, view it on GitHub <#298 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCFY375TDGJ6DBN3VDITXMJAARANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
What happened to this initiative? Seems that it stopped two/three weeks ago? What is the plan going forward? |
Beta Was this translation helpful? Give feedback.
-
Louis might have run out of things to do! I'll open a new discussion topic with future directions. |
Beta Was this translation helpful? Give feedback.
-
I recently jumped into all things MCU related a week ago and found this project from the youtube algorithm (I loved windows pinball back int he day) and it's really cool! I've been working professionally in React, TS/JS, and Node for the last 7 years or so and thought I might be able to pitch in, but I'm having a bit of trouble understanding the state of the project's UI at the moment and where to direct attention or efforts. Can someone point me in the right direction? If there's still issues with the build system overhaul, I've got a fair bit of Gulp, Grunt, Webpack, Parcel, Rollup, and Vite experience under the belt as well (ie, bespoke build systems in the node ecosystem). It sounds like you may want to be avoiding a npm based build system though, but if that isn't a hard and fast rule, I might be able to offer some help there as well. Having trouble finding the technical requirements around a lot of this though. Is that documented anywhere? I do see that the intent is to bundle small and use CDNs to avoid onboard bundles. Has there been any consideration to alternate frameworks as well to get around the internet dependency and allow offline work or is that baked into the larger system anyway? (I just found you guys today and I'm still poking around, so apologies for any dense questions). tl;dr: Happy to pitch in, not sure where though. |
Beta Was this translation helpful? Give feedback.
-
I can answer none of your questions, but can offer a quick and friendly
greeting. Welcome! (I can be a friendly idiot....)
I think most of the Web team is in Europe, so time zones may be an
additional challenge for you (us) here in the U.S.
Welcome and good luck.
RJL
…On Thu, Aug 17, 2023 at 11:01 AM Brendan Beltz ***@***.***> wrote:
I recently jumped into all things MCU related a week ago and found this
project from the youtube algorithm and it's really cool! I've been working
professionally in React, TS/JS, and Node for the last 7 years or so and
thought I might be able to pitch in, but I'm having a bit of trouble
understanding the state of the project's UI at the moment and where to
direct attention or efforts. Can someone point me in the right direction?
If there's still issues with the build system overhaul, I've got a fair
bit of Gulp, Grunt, Webpack, Parcel, Rollup, and Vite experience under the
belt. It sounds like you may want to be avoiding a npm based build system
though, but if that isn't a hard and fast rule, I might be able to offer
some help there as well. Having trouble finding the technical requirements
around a lot of this though. Is that documented anywhere? I do see that the
intent is to bundle small and use CDNs to avoid onboard bundles. Has there
been any consideration to alternate frameworks as well to get around the
internet dependency and allow offline work or is that baked into the larger
system anyway? (I just found you guys today and I'm still poking around, so
apologies for any dense questions).
tl;dr: Happy to pitch in, not sure where though.
—
Reply to this email directly, view it on GitHub
<#298 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACCSD3534YX2U263EFMUCSTXVY555ANCNFSM6AAAAAAYXSC3BU>
.
You are receiving this because you commented.Message ID:
<PlummersSoftwareLLC/NightDriverStrip/repo-discussions/298/comments/6752995
@github.com>
|
Beta Was this translation helpful? Give feedback.
-
Welcome to the project! Here’s what I’d say about the current React code: it seems to work and is 75% of the way there, so it’d be a shame to not leverage it.
That said, you could start from a blank sheet of paper, and as long as you didn’t check in until you’d hit the same level of functionality, that’s fine with me too! I just don’t want to go backwards.
So by all means, get familiar with the code, see what’s in there now, and you can run it on pretty much any ESP32 module, it doesn’t have to be a Mesmerizer. Any project with ENABLE_WEBSERVER set to 1 should work.
Once you’re familiar with the code, you can decide whether to embrace/extend/replace.
Big picture, we have a few hundred K of space on the chip itself. In my first impl I used the minified code and gzip’d it and got it to fit and run React from the chip, but it’s not the fastest web server in the world, so CDN or online content is usually faster, too!
Cheers! If you have any questions, ask away!
-Dave
PS: In the Discussions area there’s a napkin sketch of the V1 UI ideas, let me know if you can’t find it!
… On Aug 17, 2023, at 9:01 AM, Brendan Beltz ***@***.***> wrote:
I recently jumped into all things MCU related a week ago and found this project from the youtube algorithm and it's really cool! I've been working professionally in React, TS/JS, and Node for the last 7 years or so and thought I might be able to pitch in, but I'm having a bit of trouble understanding the state of the project's UI at the moment and where to direct attention or efforts. Can someone point me in the right direction?
If there's still issues with the build system overhaul, I've got a fair bit of Gulp, Grunt, Webpack, Parcel, Rollup, and Vite experience under the belt. It sounds like you may want to be avoiding a npm based build system though, but if that isn't a hard and fast rule, I might be able to offer some help there as well. Having trouble finding the technical requirements around a lot of this though. Is that documented anywhere? I do see that the intent is to bundle small and use CDNs to avoid onboard bundles. Has there been any consideration to alternate frameworks as well to get around the internet dependency and allow offline work or is that baked into the larger system anyway? (I just found you guys today and I'm still poking around, so apologies for any dense questions).
tl;dr: Happy to pitch in, not sure where though.
—
Reply to this email directly, view it on GitHub <#298 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA4HCF3PN5UO5T7MBZN63O3XVY553ANCNFSM6AAAAAAYXSC3BU>.
You are receiving this because you were mentioned.
|
Beta Was this translation helpful? Give feedback.
-
I have no idea if this is in your wheelhouse or not, but there are a couple
of real-world bugs and wishes on the books at.
https://github.com/PlummersSoftwareLLC/NightDriverStrip/issues that might
benefit from some developer attention.
Even if you don't actually fix it, it at least gives you an idea of things
that people think the current code should do and doesn't, so it's tangible
stuff to think about instead of just wandering around in code looking for
the "make it better" button.
Items like #299 might require working with effects developers (like me)
and/or others in the group to work on RPC and the interface into the
common/core code (also me, if you're truly desperate) if you don't want to
work alone. #411 is probably a couple of couple-line changes, doing things
like enforcing ranges and setting units and such.
If you want to blaze new paths, that's cool, too.
…On Fri, Aug 18, 2023 at 3:52 PM Brendan Beltz ***@***.***> wrote:
Ha. Yeah, we're developers and certainly do love to throw out perfectly
excellent work when jumping into a project. I like to be pragmatic and try
to not do that if possible. I was perhaps misinterpreting the current
progress of the UI initiative. I'll dig in more!
—
Reply to this email directly, view it on GitHub
<#298 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACCSD35BZBSQDXWIJWWOPADXV7IYTANCNFSM6AAAAAAYXSC3BU>
.
You are receiving this because you commented.Message ID:
<PlummersSoftwareLLC/NightDriverStrip/repo-discussions/298/comments/6765094
@github.com>
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I'd like to open a discussion between the person who wrote the current UI package (Louis Riel) and those interested in working on the UI. This is your chance to ask questions of Louis and see what pieces make the most sense to work on. A couple of open issues:
Please jump in and offer your opinions! Remember, the natural instinct is to start over and write everything from scratch, but it's one I'd like to avoid unless necessary, and can't think of any reason we should at this point.
Beta Was this translation helpful? Give feedback.
All reactions