add possibility to associate an Image or HTMLCanvasElement to a specific source in the shape function

This commit is contained in:
Matthieu Baumann
2024-08-06 16:49:58 +02:00
committed by Matthieu Baumann
parent b0bf7da8b1
commit 38d14e2239
11 changed files with 86 additions and 40 deletions

View File

@@ -8,8 +8,8 @@
"dateModified": "2023-01-31",
"issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
"name": "Aladin Lite",
"version": "3.4.5",
"softwareVersion": "3.4.5",
"version": "3.5.0-beta",
"softwareVersion": "3.5.0-beta",
"description": "An astronomical HiPS visualizer in the browser.",
"identifier": "10.5281/zenodo.7638833",
"applicationCategory": "Astronomy, Visualization",

View File

@@ -13,15 +13,25 @@
A.init.then(() => {
aladin = A.aladin('#aladin-lite-div', {survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', target: 'm1', fov: 5, showContextMenu: true, showSettingsControl:true, samp:true});
const cat = A.catalogFromVizieR('II/246/out', 'm1', 0.1, {onClick: 'showTable', hoverColor: 'purple', limit: 1000, colnames: ["errMin", "errMaj", "errPA"], shape: (s) => {
let a = +s.data['errMaj']/3600;
let b = +s.data['errMin']/3600;
var customImg = new Image();
customImg.onload = function() {
const cat = A.catalogFromVizieR('II/246/out', 'm1', 0.1, {onClick: 'showTable', hoverColor: 'purple', limit: 1000, colnames: ["errMin", "errMaj", "errPA"], shape: (s) => {
if (+s.data['Jmag'] > 15) {
return customImg;
} else {
let a = +s.data['errMaj']/36;
let b = +s.data['errMin']/36;
let theta = +s.data['errPA'];
let theta = +s.data['errPA'];
return A.ellipse(s.ra, s.dec, a, b, theta);
}});
aladin.addCatalog(cat);
return A.ellipse(s.ra, s.dec, a, b, theta, {fillColor: 'rgba(255, 0, 255, 0.2)'})
}
}});
aladin.addCatalog(cat);
};
customImg.src = 'https://aladin.u-strasbg.fr/AladinLite/doc/API/examples/img/star.png';
});
</script>
</body>

View File

@@ -3,7 +3,7 @@ name = "aladin-lite"
description = "Aladin Lite v3 introduces a new graphical engine written in Rust with the use of WebGL"
license = "BSD-3-Clause"
repository = "https://github.com/cds-astro/aladin-lite"
version = "3.4.5"
version = "3.5.0-beta"
authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
edition = "2018"

View File

@@ -109,7 +109,7 @@ A.aladin = function (divSelector, options) {
* @memberof A
* @param {string} id - Can be either an `url` that refers to a HiPS.
* Or it can be a "CDS ID" pointing towards a HiPS. One can found the list of IDs {@link https://aladin.cds.unistra.fr/hips/list| here}.
* @param {ImageHiPSOptions} [options] - Options describing the survey
* @param {HiPSOptions} [options] - Options describing the survey
* @returns {ImageHiPS} - A HiPS image object
*/
A.imageHiPS = function (id, options) {
@@ -271,6 +271,10 @@ A.circle = function (ra, dec, radiusDeg, options) {
return new Circle([ra, dec], radiusDeg, options);
};
A.footprint = function(shapes) {
return new Footprint(shapes)
}
/**
* Creates an ellipse shape
*

View File

@@ -262,7 +262,6 @@ export let Aladin = (function () {
this.callbacksByEventName = {}; // we store the callback functions (on 'zoomChanged', 'positionChanged', ...) here
this.hipsCache = new HiPSCache();
console.log(this.hipsCache)
// check that aladinDiv exists, stop immediately otherwise
if (!aladinDiv) {
console.error(
@@ -1522,7 +1521,7 @@ export let Aladin = (function () {
* </ul>
* @param {string} [cooFrame] - Values accepted: 'equatorial', 'icrs', 'icrsd', 'j2000', 'gal', 'galactic'
* @param {number} [maxOrder] - The maximum HEALPix order of the HiPS, i.e the HEALPix order of the most refined tile images of the HiPS.
* @param {ImageHiPSOptions} [options] - Options describing the survey
* @param {HiPSOptions} [options] - Options describing the survey
* @returns {ImageHiPS} A HiPS image object.
*/
Aladin.prototype.createImageSurvey = function (
@@ -1573,7 +1572,7 @@ export let Aladin = (function () {
* </ul>
* @param {string} [cooFrame] - Values accepted: 'equatorial', 'icrs', 'icrsd', 'j2000', 'gal', 'galactic'
* @param {number} [maxOrder] - The maximum HEALPix order of the HiPS, i.e the HEALPix order of the most refined tile images of the HiPS.
* @param {ImageHiPSOptions} [options] - Options describing the survey
* @param {HiPSOptions} [options] - Options describing the survey
* @returns {ImageHiPS} A HiPS image object.
*/
Aladin.createImageSurvey = Aladin.prototype.createImageSurvey;
@@ -1691,7 +1690,7 @@ export let Aladin = (function () {
* <li>1. An url that refers to a HiPS.</li>
* <li>Or it can be a "CDS ID" that refers to a HiPS. One can found the list of IDs {@link https://aladin.cds.unistra.fr/hips/list| here}</li>
* </ul>
* @param {ImageHiPSOptions} [options] - Options for rendering the image
* @param {HiPSOptions} [options] - Options for rendering the image
* @param {function} [success] - A success callback
* @param {function} [error] - A success callback
* @returns {ImageHiPS} A FITS image object.

View File

@@ -576,25 +576,31 @@ export let Catalog = (function () {
if (this._shapeIsFunction) {
for (const source of sources) {
try {
let shape = this.shape(source);
let shapes = [].concat(this.shape(source));
// convert simple shapes to footprints
if (
shape instanceof Circle ||
shape instanceof Polyline ||
shape instanceof Ellipse ||
shape instanceof Vector
) {
shape = new Footprint(shape, source);
}
if (shapes.length == 1 && (shapes[0] instanceof Image || shapes[0] instanceof HTMLCanvasElement)) {
source.setImage(shapes[0]);
} else {
// convert simple shapes to footprints
/*if (
shape instanceof Circle ||
shape instanceof Polyline ||
shape instanceof Ellipse ||
shape instanceof Vector
) {*/
shapes = new Footprint(shapes, source);
//}
if (shape instanceof Footprint) {
let footprint = shape;
this._shapeIsFootprintFunction = true;
footprint.setCatalog(this);
//if (shape instanceof Footprint) {
//shape.setSource(source);
let footprint = shapes;
this._shapeIsFootprintFunction = true;
// store the footprints
footprints.push(footprint);
footprint.setCatalog(this);
// store the footprints
footprints.push(footprint);
//}
}
} catch (e) {
// do not create the footprint
@@ -829,6 +835,12 @@ export let Catalog = (function () {
if (s.x <= width && s.x >= 0 && s.y <= height && s.y >= 0) {
if (this._shapeIsFunction && !this._shapeIsFootprintFunction) {
this.shape(s, ctx, this.view.getViewParams());
} else if (s.image) {
ctx.drawImage(
s.image,
s.x - s.image.width / 2,
s.y - s.image.height / 2
);
} else if (s.marker && s.useMarkerDefaultIcon) {
ctx.drawImage(
this.cacheMarkerCanvas,

View File

@@ -54,6 +54,18 @@ export let Footprint= (function() {
this.overlay = null;
};
Footprint.prototype.setSource = function(source) {
if (this.source) {
this.source.hasFootprint = false;
}
this.source = source;
if (this.source) {
this.source.hasFootprint = true;
}
}
Footprint.prototype.setCatalog = function(catalog) {
if (this.source) {
this.source.setCatalog(catalog);
@@ -170,7 +182,12 @@ export let Footprint= (function() {
}
Footprint.prototype.draw = function(ctx, view, noStroke) {
return this.shapes.some((shape) => {return shape.draw(ctx, view, noStroke)})
let hasBeenDrawn = false;
for (let shape of this.shapes) {
hasBeenDrawn |= shape.draw(ctx, view, noStroke)
}
return hasBeenDrawn;
};
Footprint.prototype.actionClicked = function() {

View File

@@ -76,8 +76,6 @@ HiPSProperties.fetchFromUrl = async function(urlOrId) {
// Relative path test
try {
urlOrId = Utils.getAbsoluteURL(urlOrId)
console.log(urlOrId)
urlOrId = new URL(urlOrId);
} catch(e) {
throw e;

View File

@@ -129,7 +129,7 @@ PropertyParser.isPlanetaryBody = function (properties) {
};
/**
* @typedef {Object} ImageHiPSOptions
* @typedef {Object} HiPSOptions
*
* @property {string} [name] - The name of the survey to be displayed in the UI
* @property {Function} [successCallback] - A callback executed when the HiPS has been loaded
@@ -163,7 +163,7 @@ export let ImageHiPS = (function () {
*
* @param {string} id - Mandatory unique identifier for the layer. Can be an arbitrary name
* @param {string} url - Can be an url to the survey or a "CDS" ID pointing towards a HiPS. One can found the list of IDs {@link https://aladin.cds.unistra.fr/hips/list| here}
* @param {ImageHiPSOptions} [options] - The option for the survey
* @param {HiPSOptions} [options] - The option for the survey
*
* @description Giving a CDS ID will do a query to the MOCServer first to retrieve metadata. Then it will also check for the presence of faster HiPS nodes to choose a faster url to query to tiles from.
*/

View File

@@ -117,6 +117,10 @@ export let Source = (function() {
}
}
Source.prototype.setImage = function(image) {
this.image = image;
}
/**
* Simulates a click on the source
*

View File

@@ -55,7 +55,7 @@ export let Vector = (function() {
options = options || {};
this.color = options['color'] || undefined;
this.opacity = options['opacity'] || undefined;
this.lineWidth = options["lineWidth"] || undefined;
this.lineWidth = options['lineWidth'] || undefined;
this.selectionColor = options["selectionColor"] || '#00ff00';
this.hoverColor = options["hoverColor"] || undefined;
this.arrow = options["arrow"] === undefined ? false : options["arrow"];
@@ -116,7 +116,9 @@ export let Vector = (function() {
}
let baseColor = this.color || (this.overlay && this.overlay.color) || '#ff0000';
let lineWidth = this.lineWidth || (this.overlay && this.overlay.lineWidth) || 2;
if (!this.lineWidth) {
this.lineWidth = (this.overlay && this.overlay.lineWidth) || 2;
}
// too small
if(!noSmallCheck) {
@@ -134,7 +136,7 @@ export let Vector = (function() {
ctx.strokeStyle = baseColor;
}
ctx.lineWidth = lineWidth;
ctx.lineWidth = this.lineWidth;
ctx.globalAlpha = this.opacity;
ctx.beginPath();
@@ -144,7 +146,7 @@ export let Vector = (function() {
if (this.arrow) {
// draw the arrow
var angle, x, y, xh, yh;
var arrowRad = lineWidth * 3;
var arrowRad = this.lineWidth * 3;
angle = Math.atan2(v2[1] - v1[1], v2[0] - v1[0])
xh = v2[0];