Coder Social home page Coder Social logo

cds-astro / aladin-lite Goto Github PK

View Code? Open in Web Editor NEW
91.0 14.0 39.0 74.89 MB

An astronomical HiPS visualizer in the browser

Home Page: https://aladin.cds.unistra.fr/AladinLite/

License: GNU General Public License v3.0

JavaScript 54.38% CSS 1.51% Shell 0.23% Rust 39.68% GLSL 3.24% TypeScript 0.96%
astronomy images javascript visualizer virtual-observatory hips

aladin-lite's Introduction

Aladin Lite v3

An astronomical HiPS visualizer in the browser Aladin Lite logo

Aladin Lite is a Web application which enables HiPS visualization from the browser. It is developed at CDS, Strasbourg astronomical data center.

See A&A 578, A114 (2015) and IVOA HiPS Recommendation for more details about the HiPS standard.

Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like ESASky, ESO Science Archive portal and ALMA Portal.

More details on Aladin Lite documentation page.

Run tests API Documentation

How to test it ?

Aladin Lite v3 is out! Please play with Aladin Lite v3 at this link.

Releases

For integrating Aladin Lite into your personal website, please refer to this release page. Always prefer using the latest version. If you want the new features without minding about the bugs coming with it, then the beta is the good way to go.

API documentation

There is a new in progress API documentation at this link. Editable examples showing the API can also be found here.

Embed it into your projects

You can embed Aladin Lite it into your webpages in two ways

The vanilla way

Please include the javascript script of Aladin Lite v3 into your project. API differences from the v2 are minimal, here is a snippet of code you can use to embed it into your webpages:

<!doctype html>
<html>
<head>
    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
</head>
<body>

<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
<script type="text/javascript" src="https://aladin.cds.unistra.fr/AladinLite/api/v3/latest/aladin.js" charset="utf-8"></script>

<script type="text/javascript">
    let aladin;
    A.init.then(() => {
        aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
    });
</script>

</body>
</html>

Using the aladin lite NPM package

First, install it with npm:

npm i aladin-lite

Second, you can use it that way:

<!doctype html>
<html>
<head>
    <!-- Mandatory when setting up Aladin Lite v3 for a smartphones/tablet usage -->
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
</head>
<body>

<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>

<script type="module">
    import A from 'aladin-lite';

    A.init.then(() => {
        let aladin = A.aladin('#aladin-lite-div', {fov: 360, projection: "AIT", cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
    });
</script>

</body>
</html>

Goals of v3

  • Rust/WebGL new core integration

  • Remove jQuery dep

  • UI dev, better support for smartphones

  • FITS images support

  • easy sharing of current « view »

  • support of all VOTable serializations (using votable.js?)

  • support of FITS tables?

  • creating HiPS instance from an URL

  • multiple mirrors handling for HiPS tile retrival

Source code

Source code is available in the src directory.

Licence

Aladin Lite is currently licensed under GPL v3.0

If you think this license might prevent you from using Aladin Lite in your pages/application/portal, please open an issue or contact us

Contributing

There are several ways to contribute to Aladin Lite:

  • report a bug: anyone is welcome to open an issue to report a bug. Please make sure first the issue does not exist yet. Be as specific as possible, and provide if possible detailed instructions about how to reproduce the problem.

  • suggest a new feature: if you feel something is missing, check first if a similar feature request has not already been submitted in the open issues. If not, open a new issue, and give a detailed explanation of the feature you wish.

  • develop new features/provide code fixing bugs. As open development is a new thing for us, we will in a first time only take into consideration code contribution (i.e. Pull Requests) from our close partners. In any case, please get in touch before starting a major update or rewrite.

Building the application steps

First you need to install the dependencies from the package.json Please run:

npm install

After that you are supposed to have the Rust toolchain installed to compile the core project into WebAssembly. Follow the steps from the Rust official website here You will also need wasm-pack, a tool helping compiling rust into a proper .wasm file.

Once it's installed you will need to switch to the nightly rust version:

rustup default nightly

Then you can build the project:

npm run build

⚠️ If you are experimenting rust error compilations:

  • Make sure you have your wasm-pack version updated. To do so:
cargo install wasm-pack --version ~0.12
  • Make sure you are using the rust nightly toolchain
  • Remove your src/core/Cargo.lock file and src/core/target directory -- this ensures that you'd escape any bad compilation state:
git clean -di
  • then recompile with npm run build.

It will generate the aladin lite compiled code into a dist/ directory located at the root of the repository. This directory contains two javascript files. aladin.umd.cjs follows the UMD module export convention and it is the one you can use for your project.

To run the examples, you can start a localhost server with the following command:

npm run serve

For just compiling the rust core, from the root location do:

cd src/core
cargo check --features webgl2

and run the tests:

cd src/core
cargo test --features webgl2

aladin-lite's People

Contributors

bmatthieu3 avatar imbasimba avatar manonmarchand avatar onekiloparsec avatar pmatsson avatar szpetny avatar tboch avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

aladin-lite's Issues

possibility of changing scale (contrast) of the image

Hello,

first of all thanks a lot for making this amazing tool, among many others provided by CDS!

We'd like to include it in our project, but I found that one feature which is important for us does not seem to be available in the Aladin Light: the possibility to change the scale of the image in the interface. Surely it is possible to adjust the image before convering it to hips, but it's not interactive.
Is it really missing or I just did not find it?

I met Giuseppe Greco on Multi-Messenger ASTERICS conference and he told me that it could be possible to write a plugin to implement such a functionality. I'd be happy to try myself, if I knew were to start.

Best Regards

Volodymyr SAVCHENKO

Customize the shape of Markers

It is currently possible to change the default shape of an A.source....but not for an A.marker (currently always a disk).

Add a Toolbar object

Rationale: currently, customizing the toolbar with new icons, or changing the order of current icons is cumbersome. Having a Toolbar object with methods to add/remove icons linked to specific actions would help.

Background color

When displaying HIPS made of sparse observations and with low brightness or low featured fields, it is very difficult to distinguish the areas covered by observations from the gaps in between observations.

The picture below illustrates that issue with the XMM color survey in the neighborhood of Cygnus X-1

Capture d’écran de 2022-03-23 09-18-56

The screenshot below shows the same area displayed with Aladin Desktop.

Capture d’écran de 2022-03-23 09-26-18

The use of a non-black gap color dramatically enhances the readability of the display.

Could this method be applied to Aladin Lite?

Simple Compass Rose

A simple compass rose would go a long way to helping observers orient the field.

compas_rose_mockup

Spurious tiles displayed

If the hips does not cover the whole sky and if you zoom out, aladin displays some spurious tiles on the borders, like this:
Screen Shot 2019-12-02 at 13 34 45
I occasionally saw tiles being displayed in the wrong place, e.g. outside of the footprint of the HiPS, but I cannot reproduce this consistently.

Feature request: vertical (z-axis) order of overlaid catalog markers

When multiple catalogs are overlaid on an image, if the same source is present in multiple catalogs, then the symbols (understandably) are overlaid on top of each other. If one wants to see the properties of a source in a given catalog, clicking on the symbol activates the pop-up for the topmost symbol, but it's hard to see the properties / pop-up for the catalogs that aren't on top. You can work around this to some extent by turning off one catalog or the other, but it would be nice if there was a way to set the z-axis ordering of overlaid catalogs, if one should be prioritized over the others.

This might already exist, but I couldn't find it. Is there any way to do this, or any clever way to activate either pop-up for two overlaid symbols, without turning one catalog off?

A related technical question: is the clickable area set by the bounding box of the symbol, or by the colored pixels of the symbol itself? For example, for an "x" marker, can you click anywhere in the square defined by the corners of the x?

Version 3 re-write in Typescript: the dawn of Aladin.ts?

Hi to the maintainers of this repo. 👋

One thing I have been thinking of implementing for a while is a re-write of Aladin lite in Typescript, which can be embedded from either a CDN or imported as import Aladdin from 'aladdin' or similar.

Would this be something of merit to the maintainability of the project?

The page doesn't show the sky map

Hi, the page doesn't show the sky map, only "Surveys". I have W10, 20H2. The page make any update recently?

It shows this:
Untitled

Thanks

add_moc_from_dict does not plot a consistent MOC

Like here :
capture du 2018-12-04 14-14-11
There are some set of cells that should be merged in a parent HEALPix cell.

I think one just need to call the function responsible for merging the overlapped intervals just after the MOC is constructed and that should work.

catalogFromURL: alternate ra/dec columns

I am using the function A.catalogFromURL to load a catalog from tapvizier. I am using the following query to obtain the coordinates corrected by proper motion:

SELECT TOP 1000000 
(ra_epoch2000 + pmra*(-5.551753e-7)) as ra, 
(dec_epoch2000 + pmdec*(-5.551753e-7)) as dec, 
pmra/1000 as pmRa, pmdec/1000 as pmDec, 
ra_epoch2000 as raj2000, 
dec_epoch2000 as decj2000, 
phot_g_mean_mag as mag 
FROM "I/345/gaia2" WHERE CONTAINS(POINT('ICRS', ra, dec), CIRCLE('ICRS', 180.52643034974523, 15.34492408258429, 0.18333333333333332)) = 1 AND phot_g_mean_mag*1.0 BETWEEN 0 AND 30 ORDER BY mag ASC

The problem is that in GAIA the proper motion is null for some sources, and they are not displayed by aladin.
Unfortunately ADQL does not allow me to interpret that null as 0, as far as I know.

I tried to define a callback that goes through the sources and modifies those fields, but the sources are not displayed: I guess the callback is invoked after the sources have been drawn?

Is there a way to tell aladin to read the data from the other columns if the main ones are empty?

Polygon not displayed if vertices not in the field of view

I think this is a known bug, but I couldn't find an open issue for it.
When you draw a polygon and then zoom in on one of the sides, the side disappear as soon as the vertices are not in the field of view.
This is particularly a problem when the polygon represents a long slit, and you would like to zoom in in the center to make sure that your target is in the slit.

Enable canvas smoothing if current resolution < HiPS resolution

Canvas smoothing (attribute imageSmoothingEnabled) is currently disabled as we want to see the pixels when zoomed in at a resolution greater than the HiPS resolution:
image

But for lower zoom levels (ie larger FoV), enabling smoothing would allow for a better display, especially when panning.

cone search mode

A cone search special mode should be implemented in the core of aladin lite.
People would call a method from the aladin lite javascript API to enter this mode. For the moment, I would see something like:

aladin.enterConeSearchMode((center, radius) => {
  // callback function executed when leaving the cone search mode.
})

When the user is in the cone search mode, aladin lite could wait for:

  • one click to define the center of the cone and a second one to define a second point where the circle should pass. The radius of the cone is defined by sqrt((x1.x-x2.x)^2 + (x1.y-x2.y)^2) where x1 (i.e. the center) and x2 are the two points where the user has clicked.
  • or an action like : one click to define the center, drag the cursor to the next point while holding the mouse pressed and release it when arrived at x2.
  • or both interaction can be implemented but we should distinguish the difference between the two (e.g. define a minimum time between the press and release of the mouse. One click is fast so we know we are in the first interaction case. On the other hand, when the user has not released the left mouse button after x sec then we are in the second interaction case).

The user should be able to move around the sphere during the cone search mode. He may do it with the middle mouse button pressed while dragging (or something else).

A little tooltip should appear to tell the user he is in the cone search mode and what he should do to define a cone. It should be possible I think for the user to erase its cone by redefining a new one before leaving the cone search mode (and even quit the mode without defining a cone).

Catalogues flashing on and off

Hi,

I'm really happy that you are making the code available on GitHub. It is a great project and more documentation will make it easier for casual users such as me to make websites with it.

I am using Aladin Lite to show HiPS catalogues and am getting an effect where when I zoom in. Objects appear to flash on and off then disappear. I thought this might be to do with how I was making the HiPS (with hipsgen-cat.jar) but I think I can see a similar effect for the GAIA-DR2 release.

Example can be seen zooming into a region with dense objects here:

http://hedam.lam.fr/HELP/dataproducts/dmu31/dmu31_HiPS/data/help_dr1_alist/

Also other strange effects like clicking on an object makes objects disappear. The webpage is getting a lot of 404 errors for tsv files that aren't there. Perhaps it looks for all tiles and they are missing if there are no objects in the tile?

Otherwise, great work with this, it is excellent to have an easy to use tool for displaying your images and catalogues.

The full project I am working on is here for reference:

http://hedam.lam.fr/HELP/dataproducts/dmu31/dmu31_HiPS/viewer/

Many thanks,

Raphael.

UPDATE: This behaviour seems to happen in Chrome but not Firefox.

Support VOTable base64 serialization

Many TAP services now output base64 VOTable serialization
Aladin Lite currently only supports TABLEDATA serialization

Using votable.js for the parsing the could fix this

recommended workflow for custom builds

I'm building out a new front-end Vuejs project and would like to incorporate a custom version of AladinLite into it. I tried building a custom version of the source code and adding it into my project, but ran into problems since the source code bundle and the master branch still depend on jquery and are "script-based" javacsript files, rather than importable modules. I noticed there's an active develop branch focused for the new AladinLite 3.0, with many improvements, one of which seems to be a switch to importable modules with no jquery dependency. So I'm wondering if y'all have any recommended development workflows? How robust is this branch currently for others to develop off of, and/or how close is this branch being merged back into master? Is the develop branch the recommended one to use for customizing AladinLite and integrating into newer front-ends built from React or Vue? Or do you still recommend embedding AladinLite manually into html via a script tag?

Utils.HTTPS_WHITELIIST

In HpxImageSurvey.js (v3), line 520, HTTPS_WHITELIIST should be HTTPS_WHITELIST.

See the JS console log "Uncaught (in promise) TypeError: D.HTTPS_WHITELIIST is undefined".

Setting source size in angular size

Currently, we can only define source size in pixels. There are some use cases where one might want to give an angular size in degrees or arcmin

Default background color

There is a very nice feature in V3 which is the possibility of having a specific background color applied to the regions not covered by the HiPS.
This allows to make the distinction between an area covered by the HiPS but without any visible feature and an area not covered by it.
It is also possible to choose that color.

This dramatically enhances the readability of pointed surveys such as XMM.

The issue is that the default color set by AL is black which masks the advantage of that colored background until the user find out the menu to change it.

My suggestion would be to use a default color contrasting with usual sky backgrounds, e.g. aqua blue.

Add filter function option for catalogues layers

It would be nice to add a filter function option for regular catalogues and HiPS catalogues, as to allow for filtering based on catalogue content for instance (I want to display only spiral galaxies or I want to display stars fainter than magB=15)

Field rotation and flipping

It would be extremely useful to have the ability to rotate and flip the view field. Rotation by an arbitrary amount and flipping of the field would allow an observer to exactly match the orientation of the field to that of and telescope orientation. In the case of finding objects, this would prove very useful.

A poorly executed working 'hack' of this can be viewed here: http://asteroid.lowell.edu/astfinder/ . However, when rotating and flipping the field, the frame of reference becomes out of sync. For example, after a few rotations, click-dragging doesn't behave as expected.

For references, this was the basic addition I attempted to get the rotation (poorly) working:

View.prototype.applyRotation = function (direction, angle) {
        // get the image catalog canvas context
        var img_context = this.imageCtx,
            ctlg_context = this.catalogCtx;

        // translate the context to the center of the canvas
        img_context.translate(this.width / 2., this.height / 2.);
        // rotate the image canvas (needs to be radians)
        img_context.rotate(direction * angle * Math.PI / 180.);
        // translate the context back to origin (else corner of layer gets drawn at center)
        img_context.translate(-this.width / 2., -this.height / 2.);

        // same for catalog
        ctlg_context.translate(this.width / 2., this.height / 2.);
        // rotate the image canvas (needs to be radians)
        ctlg_context.rotate(direction * angle * Math.PI / 180.);
        // translate the context back to origin (else corner of layer gets drawn at center)
        ctlg_context.translate(-this.width / 2., -this.height / 2.);

        this.forceRedraw();
        this.requestRedraw();
    };```

Feature Request: Install from npm registry

Hi, I have a feature request. I think it would be nice to have the package available in an npm registry (could be npm, github, whatever) so it is easier to install and manage in our applications.

Thanks in advance.

Take advantage of Norder0,1 and 2

Currently, Aladin Lite does not use Norder 0, 1 and 2 that are created for recent HiPS.
Using them would improve the user experience, preventing the gap in resolution we observe now between Allsky tiles and Norder3 tiles.

Polygon cross the sky when the points located at the edge of the celestial sphere , if the projection is not SIN

If the projection is not SIN, there is a wrong display of polyline and polygon when points are located at different sides of the celestial sphere.

the example code:
var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
aladin.addOverlay(overlay);
overlay.addFootprints([A.polygon([ [75.09706569902252, 28.254025356561616],[85.65058303267622, 29.095894440421656],[85.04345555479651, 38.3910524704836],[73.31926048625968, 37.399614744176404],[75.09706569902252, 28.254025356561616]])]);

the screenshots:
when the projection is AIT:
WX20221029-230021

when the projection is SIN (which is correct)
WX20221029-230044

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.