Skip to main content

Showing entries for: JavaScript (show all)

Optimizing Encoded Data Processing

Optimized processing of encoded tile data on the Garmin OneHelm Canyon Runner app by utilizing onboard proxy server caching capabilities. Reducing cursor and touch event listener counts, offloading data-storage off the device to continue working within the 150MB memory limit, and targeted-access of per-pixel data to return the SST/CHL reading from a WMS PNG tile on click. Utilized a new local performance tracking server to track performance optimization change effects on the device.

Garmin OneHelm <--> Proxy Server <--> HTTP Requests

What's in the encoded data?

Depends! We can store sea surface temperature readings, chlorophyll concentrations, salinity, and so on. So basically, just raw data. We process satellite files from known databanks to create mapping tiles with this data so we can decode them on the front-end. We have 3 channels of 8-bit data to work with, so if we're trying to store, say, the logarithmic-scaling dataset for Chlorophyll concentrations, we can normalize the single concentration value to 24-bits before we distribute those bits across each 8-bit channel.

Entry image

Loran Lines on OneHelm

Introduced Loran lines for the Garmin OneHelm typescript application. Introduced various performance enhancements to reduce about 1kb of memory overhead to keep the application in-line with the OneHelm 150MB spec limit. Hyper-optimizations included reducing forced SVG layout counts from 2400 to 300, text alignment map pings from 600 to 300, and removed all 2100 event listeners entirely to reduce overhead further.

Event Listeners

Typically no one has to think about the overall number of web listeners their creating on their web page. Any modern device can support way more than even the most poorly optimized sites can truly throw at it; however, that's not the case for the Garmin device, which only allots 150MB of total RAM to any given OneHelm app. Removing the 2100 event listeners caused a noticeable drop in bootstrap times, and improved overall responsiveness (which unfortuntaely is still a work in progress overall).

Entry image

Garmin OneHelm Pipeline

Developed the Canyon Runner map's app from the ground up to support older webkits running on marine devices such as the Garmin OneHelm device. Created a custom lightweight typescript framework to help facilitate the 150MB RAM restriction onboard the device, and introduced countless performance enhancements to improve feel and responsiveness. Included a build and compile pipeline to auto-deploy the newly reworked app.

The typescript framework makes use of recurssive enclosures to create a more verbose and implied form of coding. For example:

CR           # Canyon Runner - Global Object
CR.MAP       # Map Module

Each module creates it's own logging handling and hooks into a global performance logging system. So for debugging on the out-dated Garmin webkit, we can access a log of all functions invoked and roughly at what time via:

CR.MAP.log("...", {...params}) # Logs only if running in _debug enabled environment.
CR.MAP.printLogs() # Prings all of the modules logs as a table.
Entry image

Resume Parsing

Introduced the new more welcoming onboarding workflow to xptracker, including the option to automatically parse an uploaded resume.

Entry image Entry image Entry image

Satellite Data Processing

Created multiple data pipe-lines to download satellite datasets for sea surface temperature. Including creating pipelines that run on an hourly, daily, and weekly basis. Processed raw NetCDF4 files into GeoTIFFs, projected data over web mercator map format, and pushed to custom WMS tile-hosting solution hosted via AWS S3.

Implemented a custom tiling layer using Leaflet JS that displayed data using customizable color ranges, and on-hover temperature reading functionality.