From 13e8605ba79e2f1c3fabbbe18f65590ca111a910 Mon Sep 17 00:00:00 2001 From: eheinrich Date: Wed, 25 Mar 2020 00:49:15 +0000 Subject: [PATCH 01/10] Implemented functionality for finder chart- compass, scale bar, save image --- .../tom_targets/partials/aladin.html | 153 +++++++++++++++++- 1 file changed, 147 insertions(+), 6 deletions(-) diff --git a/tom_targets/templates/tom_targets/partials/aladin.html b/tom_targets/templates/tom_targets/partials/aladin.html index 6a78a9627..f7b05be70 100644 --- a/tom_targets/templates/tom_targets/partials/aladin.html +++ b/tom_targets/templates/tom_targets/partials/aladin.html @@ -3,16 +3,157 @@

Survey View

+
+
+ + +
+ +
+ +
+ + +
+
+
+ + +
+ +
+ +
+ + +
+
+
+ + Save Image +
+
From dcc08bb241edf490e835bb331b07c93892e5d417 Mon Sep 17 00:00:00 2001 From: eheinrich Date: Wed, 25 Mar 2020 18:19:13 +0000 Subject: [PATCH 02/10] Only show aladin viewer for sidereal targets since it only works for those --- tom_targets/templates/tom_targets/target_detail.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tom_targets/templates/tom_targets/target_detail.html b/tom_targets/templates/tom_targets/target_detail.html index b302f962a..53b657f37 100644 --- a/tom_targets/templates/tom_targets/target_detail.html +++ b/tom_targets/templates/tom_targets/target_detail.html @@ -16,7 +16,9 @@ {% endif %} {% target_data object %} + {% if object.type == 'SIDEREAL' %} {% aladin object %} + {% endif %}
From 8dfb400c97f6959279942689c263d7ebe0489005 Mon Sep 17 00:00:00 2001 From: eheinrich Date: Wed, 25 Mar 2020 20:34:11 +0000 Subject: [PATCH 03/10] Tweak line size, defaults, some refactoring --- .../tom_targets/partials/aladin.html | 67 ++++++++++--------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/tom_targets/templates/tom_targets/partials/aladin.html b/tom_targets/templates/tom_targets/partials/aladin.html index f7b05be70..65bc48309 100644 --- a/tom_targets/templates/tom_targets/partials/aladin.html +++ b/tom_targets/templates/tom_targets/partials/aladin.html @@ -6,11 +6,11 @@

Survey View

- +
- +
- +
@@ -20,9 +20,9 @@

Survey View

- +
- +
@@ -38,7 +38,7 @@

Survey View

let aladin = A.aladin('#aladin-lite-div', { survey: "P/DSS2/color", - fov: getFovFromForm(), + fov: getFovAsDegreesFromForm(), showReticle: false, target: "{{ target.ra }} {{ target.dec }}", showGotoControl: false, @@ -54,20 +54,22 @@

Survey View

annotateChart({{ target.ra }}, {{ target.dec }}); }); - function getFovFromForm() { - return Number($('#fov').val()); + function getScaleBarFromForm() { + const size = $('#scale-bar-size').val() || '1'; + const units = $('input[name=scale-bar-units]:checked', '#chart-form').val() || 'arcmin'; + const label = size + ' ' + units; + const sizeAsDegrees = toDegrees(Number(size), units); + return {size: Number(size), units: units, label: label, sizeAsDegrees: sizeAsDegrees}; } - function getScaleBarUnitsFromForm() { - return $('input[name=scale-bar-units]:checked', '#chart-form').val(); - } - - function getFovUnitsFromForm() { - return $('input[name=fov-units]:checked', '#chart-form').val(); - } - - function getScaleBarSizeFromForm() { - return Number($('#scale-bar-size').val()); + function getFovAsDegreesFromForm() { + const fov = Number($('#fov').val()); + const units = $('input[name=fov-units]:checked', '#chart-form').val(); + let fovAsDegrees; + if (fov && units) { + fovAsDegrees = toDegrees(fov, units); + } + return fovAsDegrees; } function toDegrees(value, units) { @@ -82,11 +84,10 @@

Survey View

function annotateChart(targetRa, targetDec) { const fov = aladin.getFov()[0]; // Returns decimal degrees - const scaleBarSize = getScaleBarSizeFromForm() || 1; - const scaleBarUnits = getScaleBarUnitsFromForm() || 'arcsec'; + const scaleBar = getScaleBarFromForm(); // Pixel position (0,0) is the top left corner of the view const viewSizePix = aladin.getSize(); - const offsetPixFromEdge = 15; + const offsetPixFromEdge = 25; const scaleBarStartPix = [offsetPixFromEdge, viewSizePix[1] - offsetPixFromEdge]; // Bottom left corner const compassCenterPix = [viewSizePix[0] - offsetPixFromEdge, viewSizePix[1] - offsetPixFromEdge]; // Bottom right corner // Compass position @@ -99,16 +100,16 @@

Survey View

const compassEastArmPix = aladin.world2pix(compassEastArm[0], compassEastArm[1]); // Scale bar position const scaleBarStart = aladin.pix2world(scaleBarStartPix[0], scaleBarStartPix[1]); - const scaleBarEnd = [scaleBarStart[0] - toDegrees(scaleBarSize, scaleBarUnits), scaleBarStart[1]] + const scaleBarEnd = [scaleBarStart[0] - scaleBar.sizeAsDegrees, scaleBarStart[1]] // Re-draw the annotations on the chart const color = '#f72525'; aladin.removeLayers(); - let layer = A.graphicOverlay({name: 'chart annotations', color: color, lineWidth: 1}); + let layer = A.graphicOverlay({name: 'chart annotations', color: color, lineWidth: 2}); aladin.addOverlay(layer); layer.add(A.polyline([compassNorthArm, compassCenter, compassEastArm])); layer.add(A.polyline([scaleBarStart, scaleBarEnd])); layer.add(A.circle(targetRa, targetDec, fov / 30)); - layer.add(new Text(scaleBarStartPix[0], scaleBarStartPix[1] - 10, String(scaleBarSize) + ' ' + scaleBarUnits, {color: color})); + layer.add(new Text(scaleBarStartPix[0], scaleBarStartPix[1] - 10, scaleBar.label, {color: color})); layer.add(new Text(compassNorthArmPix[0], compassNorthArmPix[1] - 5, 'N', {color: color})); layer.add(new Text(compassEastArmPix[0] - 10, compassEastArmPix[1], 'E', {color: color})); } @@ -120,27 +121,27 @@

Survey View

} function updateFromForm(ra, dec) { - const fov = getFovFromForm(); - const fovUnits = getFovUnitsFromForm(); - if (fov && fovUnits) { - aladin.setFov(toDegrees(fov, fovUnits)); + const fov = getFovAsDegreesFromForm(); + if (fov) { + aladin.setFov(fov); annotateChart(ra, dec); } } Text = (function() { + // The AladinLite API does not provide a way to draw arbitrary text at an arbitrary location in an overlay layer. + // This implements the methods necessary to do so when provided as an input to layer.add(). This approach was + // preferable to the others (possibilities included directly getting and drawing on the actual canvas element that the + // other overlay elements are drawn on, or creating another canvas element and placing it directly on top of + // the others) as the text that is drawn will then be integrated with the draw/destroy/redraw loops within aladin, + // and the text will show up in the generated data url that is used for saving an image without having to do anything extra. - // TODO: Add description - - // constructor Text = function(x, y, text, options) { options = options || {}; this.x = x || undefined; this.y = y || undefined; this.text = text || ''; this.color = options['color'] || undefined; - // // TODO : all graphic overlays should have an id - // this.id = 'text'; this.overlay = null; }; From 6ec0919d4f47f608b7c9562d2bd9a2b38877c245 Mon Sep 17 00:00:00 2001 From: eheinrich Date: Wed, 25 Mar 2020 21:55:06 +0000 Subject: [PATCH 04/10] Center text annotations of scale bar and compass so that it looks better --- .../tom_targets/partials/aladin.html | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/tom_targets/templates/tom_targets/partials/aladin.html b/tom_targets/templates/tom_targets/partials/aladin.html index 65bc48309..a30298b59 100644 --- a/tom_targets/templates/tom_targets/partials/aladin.html +++ b/tom_targets/templates/tom_targets/partials/aladin.html @@ -83,16 +83,16 @@

Survey View

} function annotateChart(targetRa, targetDec) { - const fov = aladin.getFov()[0]; // Returns decimal degrees + const fovDegrees = aladin.getFov()[0]; const scaleBar = getScaleBarFromForm(); // Pixel position (0,0) is the top left corner of the view const viewSizePix = aladin.getSize(); - const offsetPixFromEdge = 25; + const offsetPixFromEdge = 30; const scaleBarStartPix = [offsetPixFromEdge, viewSizePix[1] - offsetPixFromEdge]; // Bottom left corner const compassCenterPix = [viewSizePix[0] - offsetPixFromEdge, viewSizePix[1] - offsetPixFromEdge]; // Bottom right corner // Compass position // TODO: Will North/ East arms ever not be up/ to the left? In that case the placement will be wrong - const compassArmLength = fov / 10; + const compassArmLength = fovDegrees / 10; const compassCenter = aladin.pix2world(compassCenterPix[0], compassCenterPix[1]); const compassNorthArm = [compassCenter[0], compassCenter[1] + compassArmLength]; const compassNorthArmPix = aladin.world2pix(compassNorthArm[0], compassNorthArm[1]); @@ -100,18 +100,22 @@

Survey View

const compassEastArmPix = aladin.world2pix(compassEastArm[0], compassEastArm[1]); // Scale bar position const scaleBarStart = aladin.pix2world(scaleBarStartPix[0], scaleBarStartPix[1]); - const scaleBarEnd = [scaleBarStart[0] - scaleBar.sizeAsDegrees, scaleBarStart[1]] + const scaleBarEnd = [scaleBarStart[0] - scaleBar.sizeAsDegrees, scaleBarStart[1]]; + const scaleBarEndPix = aladin.world2pix(scaleBarEnd[0], scaleBarEnd[1]); + const scaleBarLength = scaleBarEndPix[0] - scaleBarStartPix[0]; // Re-draw the annotations on the chart const color = '#f72525'; + const scaleBarTextSpacing = 7; + const compassTextSpacing = 3; aladin.removeLayers(); let layer = A.graphicOverlay({name: 'chart annotations', color: color, lineWidth: 2}); aladin.addOverlay(layer); layer.add(A.polyline([compassNorthArm, compassCenter, compassEastArm])); layer.add(A.polyline([scaleBarStart, scaleBarEnd])); - layer.add(A.circle(targetRa, targetDec, fov / 30)); - layer.add(new Text(scaleBarStartPix[0], scaleBarStartPix[1] - 10, scaleBar.label, {color: color})); - layer.add(new Text(compassNorthArmPix[0], compassNorthArmPix[1] - 5, 'N', {color: color})); - layer.add(new Text(compassEastArmPix[0] - 10, compassEastArmPix[1], 'E', {color: color})); + layer.add(A.circle(targetRa, targetDec, fovDegrees / 30)); + layer.add(new Text(scaleBarStartPix[0] + scaleBarLength/2, scaleBarStartPix[1] - scaleBarTextSpacing, scaleBar.label, {color: color})); + layer.add(new Text(compassNorthArmPix[0], compassNorthArmPix[1] - compassTextSpacing, 'N', {color: color})); + layer.add(new Text(compassEastArmPix[0] - compassTextSpacing, compassEastArmPix[1], 'E', {color: color, align: 'end', baseline: 'middle'})); } function downloadImage() { @@ -142,6 +146,8 @@

Survey View

this.y = y || undefined; this.text = text || ''; this.color = options['color'] || undefined; + this.align = options['align'] || 'center'; + this.baseline = options['baseline'] || 'alphabetic'; this.overlay = null; }; @@ -151,7 +157,9 @@

Survey View

Text.prototype.draw = function(ctx) { ctx.fillStyle = this.color; - ctx.font = "12px Arial"; + ctx.font = '15px Arial'; + ctx.textAlign = this.align; + ctx.textBaseline = this.baseline; ctx.fillText(this.text, this.x, this.y); }; From 2ab15a7d2fcaae8e2867d0ff8d5c24dfb4912cce Mon Sep 17 00:00:00 2001 From: eheinrich Date: Wed, 25 Mar 2020 23:55:53 +0000 Subject: [PATCH 05/10] Make the chart form look a bit better --- .../tom_targets/partials/aladin.html | 68 +++++++++++-------- 1 file changed, 38 insertions(+), 30 deletions(-) diff --git a/tom_targets/templates/tom_targets/partials/aladin.html b/tom_targets/templates/tom_targets/partials/aladin.html index a30298b59..1e799647c 100644 --- a/tom_targets/templates/tom_targets/partials/aladin.html +++ b/tom_targets/templates/tom_targets/partials/aladin.html @@ -3,36 +3,44 @@

Survey View

- -
- - -
- -
- -
- - +
+ +
+
+
+ Field of view +
+ +
+ +
+
-
-
- - -
- -
- -
- - +
+
+
+ +
+ +
+ +
+
-
-
- - Save Image -
- +
+ + Save Image +
+ +