Add a second vertical scale for interesting altitudes.

macrovision.js

@@ -427,7 +427,7 @@ function drawScales(ifDirty = false) {
     ctx.fill();
 
 
-    if (config.drawYAxis) {
+    if (config.drawYAxis || config.drawAltitudes) {
         drawVerticalScale(ifDirty);
     }
     if (config.drawXAxis) {
@@ -449,12 +449,12 @@ function drawVerticalScale(ifDirty = false) {
         total = math.subtract(total, math.unit(offset, "meters"));
 
         for (; y >= 50; y -= pixelsPer) {
-            drawTick(ctx, 50, y, total);
+            drawTick(ctx, 50, y, total.format({ precision: 3 }));
             total = math.add(total, heightPer);
         }
     }
 
-    function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y, value) {
+    function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y, label, flipped=false) {
         const oldStroke = ctx.strokeStyle;
         const oldFill = ctx.fillStyle;
 
@@ -467,7 +467,12 @@ function drawVerticalScale(ifDirty = false) {
         ctx.beginPath();
         ctx.moveTo(x + 20, y);
         ctx.lineTo(ctx.canvas.clientWidth - 70, y);
-        ctx.strokeStyle = "#aaaaaa";
+        if (flipped) {
+            ctx.strokeStyle = "#666666";
+        } else {
+            ctx.strokeStyle = "#aaaaaa";
+        }
+        
         ctx.stroke();
 
         ctx.beginPath();
@@ -481,20 +486,37 @@ function drawVerticalScale(ifDirty = false) {
         ctx.fillStyle = "#dddddd";
 
         ctx.beginPath();
-        ctx.fillText(value.format({ precision: 3 }), x + 20, y + 35);
+        if (flipped) {
+            ctx.textAlign = "end";
+            ctx.fillText(label, ctx.canvas.clientWidth - 70, y + 35)
+        } else {
+            ctx.fillText(label, x + 20, y + 35);
+        }
+        ctx.textAlign = "start";
+        
 
         ctx.font = oldFont;
         ctx.strokeStyle = oldStroke;
         ctx.fillStyle = oldFill;
     }
+
+    function drawAltitudeLine(ctx, height, label) {
+        const pixelScale = (ctx.canvas.clientHeight - 100) / config.height.toNumber();
+        const y = ctx.canvas.clientHeight - 50 - height.toNumber("meters") * pixelScale;
+        if (y < ctx.canvas.clientHeight - 100) {
+            drawTick(ctx, 50, y, label, true);
+        }
+    }
+
     const canvas = document.querySelector("#display");
 
     /** @type {CanvasRenderingContext2D} */
 
     const ctx = canvas.getContext("2d");
 
-    let pixelsPer = (ctx.canvas.clientHeight - 100) / config.height.toNumber();
+    const pixelScale = (ctx.canvas.clientHeight - 100) / config.height.toNumber();
 
+    let pixelsPer = pixelScale;
     heightPer = 1;
 
 
@@ -527,7 +549,24 @@ function drawVerticalScale(ifDirty = false) {
     ctx.lineTo(ctx.canvas.clientWidth - 50, ctx.canvas.clientHeight - 50);
     ctx.stroke();
 
-    drawTicks(ctx, pixelsPer, heightPer);
+    if (config.drawYAxis) {
+        drawTicks(ctx, pixelsPer, heightPer);
+    }
+
+    if (config.drawAltitudes) {
+        drawAltitudeLine(ctx, math.unit(8, "km"), "Troposphere");
+        drawAltitudeLine(ctx, math.unit(50, "km"), "Stratosphere");
+        drawAltitudeLine(ctx, math.unit(85, "km"), "Mesosphere");
+        drawAltitudeLine(ctx, math.unit(675, "km"), "Thermosphere");
+        drawAltitudeLine(ctx, math.unit(10000, "km"), "Exosphere");
+        drawAltitudeLine(ctx, math.unit(1500, "km"), "Low Earth Orbit");
+        drawAltitudeLine(ctx, math.unit(20350, "km"), "GPS Satellites");
+        drawAltitudeLine(ctx, math.unit(35786, "km"), "Geosynchronous Orbit");
+        drawAltitudeLine(ctx, math.unit(238900, "miles"), "Lunar Orbit");
+    }
+
+    
+
 }
 
 // this is a lot of copypizza...
@@ -552,12 +591,12 @@ function drawHorizontalScale(ifDirty = false) {
 
         for (; x >= 50 - pixelsPer; x -= pixelsPer) {
             // negate it so that the left side is negative
-            drawTick(ctx, x, 50, math.multiply(-1, total));
+            drawTick(ctx, x, 50, math.multiply(-1, total).format({ precision: 3 }));
             total = math.add(total, heightPer);
         }
     }
 
-    function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y, value) {
+    function drawTick(/** @type {CanvasRenderingContext2D} */ ctx, x, y, label) {
         const oldStroke = ctx.strokeStyle;
         const oldFill = ctx.fillStyle;
 
@@ -584,7 +623,7 @@ function drawHorizontalScale(ifDirty = false) {
         ctx.fillStyle = "#dddddd";
 
         ctx.beginPath();
-        ctx.fillText(value.format({ precision: 3 }), x + 35, y + 20);
+        ctx.fillText(label, x + 35, y + 20);
 
         ctx.font = oldFont;
         ctx.strokeStyle = oldStroke;
@@ -1789,6 +1828,19 @@ const settingsData = {
             drawScales(false);
         }
     },
+    "show-altitudes": {
+        name: "Show Altitudes",
+        desc: "Draw interesting altitudes",
+        type: "toggle",
+        default: true,
+        get value() {
+            return config.drawAltitudes;
+        },
+        set value(param) {
+            config.drawAltitudes = param;
+            drawScales(false);
+        }
+    },
     "show-horizontal-scale": {
         name: "Show Horiziontal Scale",
         desc: "Draw horizontal scale marks",