Oscilloscope Online V2 Used AI

Updated About Page to look more professional.

Believe it or not, Google's own Pagespeed is giving random errors on the website's performance. Sometimes it's bad and other times it's good. I just finished pre-loading a few essential assets and properly sizing my images as well as adding lazy load. Hopefully that should clear up the CLS and LCP issues.

Hackatime didn't catch it, but I spent an hour cleaning up my commit history. Looks good and organized!

Finished Testing the new performance updates! 100/100!!!

Updated Index Page, working a bit on performance.

Created Compatibility Section and Key Features Section

One hour of testing to get the perfect Hero Banner.

The UI is working again, and the patch has been published.

Fixing the Minifier error was gonna be a huge problem, luckily I didn't have to. I completely forgot about Jekyll's built-in SASS compressor. It's more stable so no more errors.

As for the PurgeCSS one, I just included a danger and success alert on the help page as an example. That will stop PurgeCSS from removing it.

The structure patch gave me 2 new bugs to deal with. I spent the last 2 hours debugging them.

Minifier is removing spaces from base64 encoded images which bootstrap uses.

PurgeCSS is purging the .alert-danger and .alert-sucess classes.

Need to find a way to fix this. Will have to update the PurgeCSS plugin.

Restructured Repository so that Jekyll is at root. To avoid the CDNs shebang and focus on Asset Optimization for improved Load times.

Test results!! The styles are applied manually outside the plugin.

Done with the if-else chains. Had to make one to get URLs and then another to get the icons. Did a lot of looking around for these urls and had to remove a lot of them because they don't have the option to share via an endpoint.

Creating a new share bar plugin. Done with the structure. Now comes the painful part.

Creating the mother of all if-else chains to make a link suitable for each platform. (They all have nothing in common (┬┬﹏┬┬)

Optimized Setup, Plotter, SVG and Help Page for AOM. Pushed and Published.

Optimized and Updated About Page for better AOM

Ah yes, SEO.

Optimized Navbar, Footer and Index Page for AOM. Allowing better site crawling.

Finished:
- Deployment
- About Page
- Help Page

OO2 Reboot is officially finished.

Finished the eports & imports

Now only the Help page is left, Additionally I'm thinking of adding AOS to it, but there really aren't many places where I can use them. About and Index will be the only 2 pages using them.

Started working on the exports patch. Finished JSON Export (for SVG Plotter)

Also cleaned up my commit history to make it look more professional.

To my great dismay, it would seem that statistics are simply too much for common browsers and computers, I will look for a way to add Background Workers after the Exports and Help.

Here is an example of what it's capable of right now.

Fixed a few bugs in the time scale mode and switched buffer cleaning. Instead of clearing all it will remove earliest vals and append lattest giving it a true Oscilloscope Look.

Completed the following:
- Status Bar
- Clear
- Refresh Rate

Remaining:
- Import/Export
- Statistics
- Help page

After a gruesome 7 hours, I have done the Serial Communications. With the most part done, all that's left are the finishing touches:
- Exports
- Import & Clear
- Refresh Rate
- Status Bar
- Statistics

After all of these, I just need to create the help page and we should be good to go!

Created Status Messages

In SVG Exporter :All buttons are working as expected and the ability to export/import the configs has been added. Just need to add some Status Messages to make it easier to navigate through. And this page will be done and finished.

Done with the SVG Dynamifier and the crude generation code. Now I just need to do the following inside my SVG Maker:

• Status Messages
• Data -> yGap
• Downloading Generated SVG

Approx 1-2 hours of coding.

Then I'll be left with Plotter. I'm also going to add a help page with instructions and an about page so that might take a little longer.

Improved and Finished UIs for Plotters and SVG's

Remaining (only TS parts left now):
UI-Handlers (Dynamifiers)
Serial Comms
uPlot-Handler
Live-Stats

Imporved NodeJS setup using Spawn, Exec and ExecSync to check for dependency insurance and Parrallel Processing between Isolated steps

Applied namespaces to my TS, had to spend a long time to debug how it worked because Terser would remove everything (I did not know that I had to explicitly use 'export' even though this wasn't a module). Restructured it finely and created a uPlot wrapper. I've also added a dual-host script which means I can run Jekyll and HTTP-Server in parallel. Hence being able to edit the UI on the go instead of ON and OFF repeatedlly.

Mostly done on the redo, all that is left is:

1. Serial Communication
2. Fixing Plotter page UI and adding uPlot + Serial to it
3. Fixing SVG Plotter Code (need to create it as a class)
4. Fixing SVG page UI and adding the edited SVG Plotter code to it

Created SVG Page, fixed the bug in the dependent project. Improved my NPM setup so that anyone can easily download and locally use it with only 2 requirements: Ruby and NodeJS.

Also finished the TS for my Setup page with complete scoped Controller for the form. Allowing a controlled environment.

Setting up the new TS written config storing. I'm using a jekyll plugin I previously made to handle the links in the head assets, and I just found a bug in it. It really limits my automated setup for testing and production. So I'm gonna go ahead and fix it.

Styled the plotting page

A bit of NodeJS later, I have now automated most of my repo.

• Build with CDN Assets
• Local Host with Local Assets across entire Router (test on phone without publish)
• TS -> Terser compressed JS

Created a setup page

Rebooting

Added Bootstrap and created my index page

It was a long time, since I'm brand new to TS. BUT I HAVE DONE IT!!

SVG Generator is done additionally I have made it so that anyone can use it.

It is isolated and works a bit like C++ OOP. Each instance is completely self contained and will only affect itself. You can make as many instances you want.

With the app complete, now comes the re-iteration. I know it may seem like I am redoing this for extra shells, but the truth is that this project needs to be really good so I'm doing iteration development which let's me do this very well. This is probably the final iteration as I move all my code into TS and then use a GitHub action to deploy it with compiled JS.

I'll also be using Bootstrap for a more modern style.

I'll also isolate the SVG maker, so that others can use it easily in their own apps.

For now, here is my JSON definition, JSON plays a very important role in this app as it is responsible for seamless data transfer.

Instead of manually clicking to preview, I am now auto-updating at any change.

Also formatted my files a bit and hid y_gap option on log graphs, since they are linear-only options

DONE WITH THE CLEANUP FINALLY

Just need a few more tweeks.

1. Update Help

2. Update Documentation

3. Add JSON export to plotter page

4. Add JSON MCU Command to auto export

5. Figure out a way to input svg config from the MCU allowing for auto SVG Export

Added the download options. I also found a bug with the logarithmic axes and spent some time trying to fix it up. The project is essentially finished, but there is one extremely important and difficult step I must do. Cleaning!!

Most of the code was written when I didn't know JS much so I need to fix it. Replace the numerous constants with a single JSON object so I have more variable names to work with in the future.

Successfully inputting from the config page!!

All that's left now is the downloading. I will also add the option to download the data as a JSON

Created the Config page with a preview. Now I need to take input from said config page

Added Fill. Also enabled the use of alpha for line, point and fill.

Now my svg generator is done. Next I will hook it up with my oscilloscope and create a dedicated configuration page specifically for SVG Export.

SUCCESSFULLY CONNECTING THE POINT ON MY FIRST TRY!!!

Surprisingly easy, I was worried that it'll be difficult cuz of the null vals

Added null val handling, so you can add empty values.

I have once again reached the Scatter Plot milestone. However this time my code is cleanly structured and supports log scales as well. Unlike before where it was limited to linear scales only

CREATED THE Y_SCALE!! WITH LOG SUPPORT THIS TIME!!

Making swift progress I have done the x_scale.

Now the problem is the y_scale. Linear is easy, the issue is with log. How do I decide on the gaps?

I've decided on the config options for the svg export. The user will be redirected to an HTML form with a live preview where he will be able to change his config as per his requirement.

Created the data parser! It isolates all of my data into separate arrays allowing me easier usage instead of complex index and scaling!

Here's an example from the console log.

Mapped my points successfully!!

However, the code is literal garbage. I'll redo it, once again, from scratch. Now that I have a good idea of how it is supposed to be, it should be pretty good! I'll start with a parser that will convert all of my current data into something easily usable. I can then use this parser to transfer only the important stuff to the svg exporter page!

I'm redoing the svg export, with cleaner code, greater functionality and a lot of customization. I'll redirect the user to a new page for the customization options.

Updated the README!!

Here is an example of the SVG export without the fill area option (the previous example doesn't look very good)

Just made an SVG Exporter, also added MCU commands for SVG and PNG Export triggers.

The SVG doesn't export logarithmic scales for now, but instead of failing the chart is exported with linear scales.

Tried to make an SVG generator using AI. Ended up wasting an hour with nothing to gain.

Fixed Timescale issues when importing a .csv with time.
Added a CSV char to automate downloading of data via the MCU Serial Input.

Just added the CSV Import/Export and PNG Export.

Will add a CSV exporting special char to automate storing via the MCU