The (mostly cosmetic) fine tuning have been done and the LRWave web app is sitting at a good state to declare version 1.0 complete. Now I can move onward to the hardware components of my laser Lissajous project.
Some tidbits worthy of note are:
- MDC Web theme colors can be applied via CSS styles as per documentation. What’s (currently) missing from the documentation is the requirement I also have to add
@import "@material/theme/mdc-theme";to my style sheet. In the absence of that import directive, the theme CSS styles have no effect, causing me to bang my forehead against a non-respnsive brick wall. Now the following visual elements finally worked as designed:
- App has a dark background, because I’m building this for a laser Lissajous curve project and I expect to use this app mostly in the dark.
- The column titles “Left” and “Right” now has theme colors.
- The waveform drop-down box options are now visible and not white-on-white. (Change is not visible in screenshot.)
- Web Audio API implementation in Chrome would cause audible pops when pausing or resuming playback. This is true even if I write code to fade volume. (Fade out to zero upon pause, fade in from zero upon resume.) Since this fade code added complexity to my app but failing to eliminate the audible pops, I did not commit fade code to my app.
- The browser tab favicon now works… I am not sure why but next item might be related:
- I’ve added an instance of the icon to my app’s background. Now there’s a little app icon at top center of app background. Perhaps this change helped kicked the browser favicon code into action?
- Responsive layout is much improved – the app was always fine in portrait mode in a compact phone resolution, but now it no longer looks embarrassing on larger displays.
- Added support for Safari browser. (Safari uses
webkitAudioContextwhile other browsers use
- Wrote up a README.md for the project.
The whole project was done via Cloud 9 IDE. My AWS cost for this experiment was a grand total of $0.43.
Github project: https://github.com/Roger-random/lrwave
Published live version: https://roger-random.github.io/lrwave/