Add Resolution Support to Seismographs

[NavigSB]

Description

Hey Philip! When showing the new PNSN website around to coworkers, a common suggestion was to upscale the resolution of the seismogram displays. Once I found out it was relatively simple to add resolution support to HTML canvases, I thought I'd spin something up on Seisplot.js. Let me know what you think!

Makes a lovely difference on our end! Here's a before and after:

Before:

After:

Scope

What's changed:

• Added resolutionScale parameter to SeismographConfig to control Seismograph canvas resolution
• Added _canvasWidth and _canvasHeight private helper fields to store the resolution-scaled canvas size
• Added scaleForResolution parameter to timeScaleForSeisDisplayData and __initAmpScale methods for creating time and amplitude scales that are relative to the resolution-scaled canvas size
• Scale Seismograph canvas to _canvasWidth and _canvasHeight, then style canvas to original width and height through CSS
• Scale Seismograph lineWidth by resolutionScale

Potential Risks / Drawbacks

• Increased resolution for Seismograph canvases could lead to increased computation and browser latency

Tested Scenarios

• Tested on PNSN's website, utilizing helicorder, seismograph, and animatedseismograph

Review Notes / Questions

• I haven't tested this anywhere other than PNSN's website- it worked with minimal changes on our side, so hopefully it will work with your systems too

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[crotwell]

Looks really nice, that is a cool idea. I've been a bit swamped, but will try to look in detail next week.

Quick thought, is it needed to store _canvasWidth and _canvasHeight and resolutionScale? Maybe resolutionScale being 1 is the same as current drawing, then resolutionScale of 2 does the fancy trick? Just thinking the less fields in the Seismograph class the better as it is already pretty huge. In general I try to avoid storing A and B if I can just store A and calc B easily from A.

Perhaps having the default be resolutionScale=2 would be good? Might as well make the default look nice, as long as the performance hit isn't too much.

Also, is there a need to have this be integer? I am thinking not.

Is 2 good enough, or were you using something larger?

[crotwell]

Just did a quick test and it makes the realtime display look A LOT BETTER!

Really nice! You win this week's prize! :)