mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2025-12-12 07:40:26 -08:00
add possibility to associate an Image or HTMLCanvasElement to a specific source in the shape function
This commit is contained in:
committed by
Matthieu Baumann
parent
b0bf7da8b1
commit
38d14e2239
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
|
||||
@@ -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
|
||||
*
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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.
|
||||
*/
|
||||
|
||||
@@ -117,6 +117,10 @@ export let Source = (function() {
|
||||
}
|
||||
}
|
||||
|
||||
Source.prototype.setImage = function(image) {
|
||||
this.image = image;
|
||||
}
|
||||
|
||||
/**
|
||||
* Simulates a click on the source
|
||||
*
|
||||
|
||||
@@ -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];
|
||||
|
||||
Reference in New Issue
Block a user