diff --git a/macrovision.js b/macrovision.js index cfa6b059..60e2dcab 100644 --- a/macrovision.js +++ b/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",