I started writing DeepZoom in 2007??? when I knew just about nothing about the lingua franca of the web: JavaScript. Over the intervening decade and a half, I’ve worked on the code sporadically,
but then really kicked into gear again in 2020 as Covid hit. As a result, the codebase was a mashup of different styles, reflecting changes in my understanding of JavaScript best practices,
and adopting modern features of the language as it evolved every few years.
Overall, the experience has been terrifying. Coming from a background in strongly typed languages such as C, C++, and C#, the whole dynamic nature of JavaScript where a variable can
morph to contain content of any type has been disquieting. Gary Bernhardt has a fun video on the subject of JavaScript inconsistencies: Wat
Some typical JavaScript madness:
// random JavaScript: Is k a string, a number, or something else?
let k = "you'll never take me alive, Copper!"
k = 42
k = lifeTheUniverseEverything(k)
Equally frightening, DeepZoom is directly dependent on ~40 other NPM packages (code libraries), which in turn rely on over 1,300 other libraries. Any
of which can be randomly updated, bugs added or fixed, and behaviors changed. In a typical week two or three of the direct dependency libraries will be updated.
Meanwhile DeepZoom continues to grow. It’s currently about 80 files, and about 30,000 lines of code (not counting images and other assets).
find ./ -type f -regex '.*\.\(vue\|js\|ts\)$' -print0 | wc -l --files0-from=- // LOC js, ts, vue
Not huge by any means, but large enough that attempting non-trivial enhancements was a challenge. Partly because I lacked the discipline to document every function, variable, and return value, but also due to the nature of JavaScript itself.
Enter … TypeScript.
The TypeScript rewrite
I’ve been casting longing glances in the direction of TypeScript for a few years. And I finally took the plunge. After flicking some switches in the Quasar tooling to enable TypeScript, I started with the simplest modules with the fewest dependencies, and just changed the
file extension from .js to .ts. Add a few type definitions, and it’s working! VSCode starts showing intellisense for all variables and functions. Errors pop up when types don’t match.
The largest modules took a few days to port over; overall I spent about two months on the rewrite. During the rewrite maybe two dozen real bugs popped up due to type checking. And there were a few sections of code that I just scratched my head and wondered how/if it ever really worked.
The relief is palpable.
Fixes
New drawer menu on mobile devices
Handle the iPhone “notch” and env(safe-area-inset-*)
Fix all known issues with changing route names
Seattle to Glacier Bay
To test all this new functionality, I created a Trip based on our 2001 expedition from Seattle to Glacier Bay aboard s/v Serenade. The trip includes 28 routes, and has a duration of about a month.
V2.2.17 uses a slightly modified trip storage format. If you have a tide or current station selected in your old file, it will not be auto selected in a newer version of DeepZoom. Sorry, but this is a one time upgrade and it wasn’t trivial to maintain backwards compatibility.
To fix this problem, open the trip in DeepZoom. Select the station again, and then resave the trip. Make sure Include view settings is Yes.
If you’re one of the adventurous few who is actually writing a scripted trip, then you’ll need to manually update the tideOrCurrent entries within the script.
All of the USA tides and currents are now updated to the latest NOAA 2022 data release.
Tide and current data is available between the dates of 2014.01.01 through 2029.12.31 inclusive.
For the first time in DeepZoom, this includes coverage for currents in Chesapeake Bay, Delaware Bay, and many locations in New England.
Thanks, as always to David Flater (xtide) for collecting and publishing the .tcd files which I use to generate the millions
tide fragment files which enables DeepZoom’s rapid display.
I would be delighted to extend DeepZoom tide and current coverage throughout the world.
If you know of any public domain harmonic sources please let me know!
Now that .gpx import is working I needed a really big trip to do some stress testing.
Ann and Bob Sherer publish a set of .gpx routes and tracks along the ICW. For reasons unknown to me, these have come to be known around the web as the Bob423 tracks.
I imported these to DeepZoom by just dragging and dropping one or more .gpx files onto the right side panel. Next I converted the tracks to routes using the handy new button on the Tracks panel. Finally I adjusted some of the departure dates to form a reasonable itinerary, and voilà, we have a trip!
The resulting 1067 nMi trip from Norfolk to Key West has seven routes, many thousand waypoints, and a trip duration of 44 days at 6.5 knots with several layovers.
Tip! You can adjust the starting date for all routes in a trip in one operation. Click “today”, +1, -1, or the calendar icon to change the start date for the earliest route and all other routes will be modified to the same relative time offset.
GPX and KML files can now be imported en masse. Drag and drop one or more files (or click on the input field to get a file open dialog).
You can either add them all to the existing Trip, or create a new trip.
Added Export of loaded trip to .gpx file (in Downloads directory). At present, route departure time and speed are not included. I’m trying to figure out which of the numerous competing .gpx extensions to support. If you have any requests or advice on this topic, please let me know.
This is mostly a fit and finish release. Lot’s of UI and perf improvements plus a new display of relative positions of earth, sun and moon. This animation, like everything else in DeepZoom is
linked to the timebase. The timebase is accessed by clicking on the time readout at the lower center of the screen.
Added “Find” to Trips page. This will show a list of all public trips within the current view. Filters are available for “power”, “sail”, “kayak”, and “swim” along with sorting by name, length, duration, and stars.
Added trip id to url so forward and back browser buttons work.
Bug fixes
Fixed longstanding bug which could cause hangs, especially on Cordova demo trip.
Pilot Charts show probabilities of wind strength and direction for a particular location and time,
to help plan optimal sailing routes.
Historically, these charts were derived by manually collating the logs of thousands of vessels transiting the oceans over the last few hundred years.
Below is an excerpt from a traditional pilot chart for a portion of the southern Pacific ocean during the month of February.
Each windrose covers a 5°x5° area. The length of the barb indicates the percentage of time the wind blew from that direction,
and the barb style indicates the strength of the wind.
The Pilot Charts layer lets you plan a route based on historically measured wind speeds
and directions. This layer shows a probability windrose on a color coded background.
The background shows mean historical wind speed along with arrows showing mean wind
direction for each 14 day period.
Superimposed on this background is a windrose which shows the percentage of time the
wind is blowing from each of 16 cardinal/secondary/intercardinal directions. The length
of each bar shows the percentage of time the wind blows from that direction averaged
over a 14 day period. The length of the colored rectangles within each bar indicates the
percentage of time the wind blows with each velocity range.
Columbus trip 1
Here’s a trip showing how Columbus travelled to the Bahamas on his first voyage.
The bar from due east ending in the number “42”, indicates that the wind was blowing from that
cardinal direction 42% of the time. The wind was under 20 knots about 40% of the time, and there was
an easterly component virtually all the time.
Columbus was likely sailing straight down wind most of the westward voyage.
Entropy levels of 100 world cities by the orientation of streets.
Most ordered streets: Chicago, Miami, & Minneapolis.
Most disordered: Charlotte, Sao Paulo, Rome & Singapore. Paper:
Historical pilot charts
Pilot Charts show probabilities of wind strength and direction for a particular location and time,
to help plan optimal sailing rout...
