v3.4.5 latest

In particular for iphones (320px wide). This use media queries (that will be documented) that hide some UI ele
ments if aladin lite is too small. Users still can override the css if they want.

.github/workflows/api_doc.yml

@@ -6,7 +6,8 @@ on:
   push:
     tags:
       - '*'
-
+    branches:
+      - develop
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
@@ -42,7 +43,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # Upload entire repository
-          path: './doc'
+          path: './docs'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

.github/workflows/codemeta_validator.yml

@@ -0,0 +1,16 @@
+name: test_codemeta
+
+on:
+  release:
+  workflow_dispatch:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container:
+      image: gitlab-registry.in2p3.fr/escape2020/wp3/eossr:v1.0
+    steps:
+      - uses: actions/checkout@v3
+      - name: validate codemeta
+        run: eossr-metadata-validator codemeta.json

CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelogs
 
+## 3.4.5-beta
+
+* [feat] add `layerChanged` event when a layer is added or removed
+* [deprecate] of `select` event, use `objectsSelected` event instead
+* [ui] add the ability to switch the tile format to download 
+
+## 3.4.3-beta
+
+* [bugfix] zoom control buttons
+* [feat] save a MOC as a JSON file from the UI <https://github.com/cds-astro/aladin-lite/issues/154>
+* [feat] save a source selection from the measurement table as a CSV file
+* [feat] allow to display jpeg/jpg images with a wcs passed as a JS dictionary: <https://github.com/cds-astro/aladin-lite/issues/173>
+
+## 3.4.2-beta
+
+* [impr] Improve smartphone support by setting media queries + a better logic for deploying the contextual menu sub options.
+* [impr] Improve `WCS` view export with 3rd euler rotation encoding: <https://github.com/cds-astro/aladin-lite/issues/170>. Still some cases are to be handled like: crval on the equator or cylindrical with a galactic frame rotation.
+* [fixed] Change `RADECSYS` to `RADESYS` for `Aladin#getViewWCS` to follow fits standard deprecation
+* [feat] Add new method `Aladin#getViewImageBuffer` to get the current view as a PNG buffer
+* [feat] New line rasterizer using GL instancing. This enhances the rendering speed of MOCs.
+
+## 3.3.3
+
+* [feat] UI: add HiPS basic filter that filters the `hipsList` given
+* [feat] New `hipsList` option parameter when instancing a new Aladin object.
+* [feat] Zoom smoothing using hermite cubic interpolation functions
+* [feat] shape option of Catalog and ProgressiveCat accepts a function returning a Footprint. This allow user to
+         associate a footprint to a specific source
+* [feat] Hover color support by @pmatsson and @bmatthieu3 in <https://github.com/cds-astro/aladin-lite/pull/145>
+
+## 3.3.2
+
+* [fixed] do not allow to query the properties several times for an imageHiPS
+* [fixed] Detecting raytracing rendering mode. Adapt the rendering mode in function of the fov value and the projection used. Some projections do have more distortions with wide FoVs so it is better to use the raytracing rendering mode when fov >= smaller FoV threshold.
+
 ## 3.3.0
 
 * [fixed] multiple calls to setImageSurvey with the same survey object led to strange behaviour.
@@ -339,4 +374,4 @@ New in the API:
 ### Fin 2013
 
 * ajout catalogue progressif
-* ajout on select, objectClicked, objectHovered
+* ajout on select, objectClicked, objectHovered

README.md

@@ -9,6 +9,7 @@ See [A&A 578, A114 (2015)](https://arxiv.org/abs/1505.02291) and [IVOA HiPS Reco
 Aladin Lite is built to be easily embeddable in any web page. It powers astronomical portals like [ESASky](https://sky.esa.int/), [ESO Science Archive portal](http://archive.eso.org/scienceportal/) and [ALMA Portal](https://almascience.eso.org/asax/).
 
 More details on [Aladin Lite documentation page](http://aladin.u-strasbg.fr/AladinLite/doc/).
+A new [API technical documentation](https://cds-astro.github.io/aladin-lite/) is now available.
 
 [![Run tests](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml/badge.svg)](https://github.com/cds-astro/aladin-lite/actions/workflows/test.yml)
 [![API Documentation](https://img.shields.io/badge/docs-latest-blue.svg)](https://cds-astro.github.io/aladin-lite)
@@ -25,6 +26,7 @@ Always prefer using the latest version. If you want the new features without min
 ## API documentation
 
 There is a new in progress API documentation at [this link](https://cds-astro.github.io/aladin-lite).
+Editable examples showing the API can also be found [here](https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/).
 
 ## Embed it into your projects
 

assets/icons/add.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 8C11 7.44772 11.4477 7 12 7C12.5523 7 13 7.44771 13 8V11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H13V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V13H8C7.44772 13 7 12.5523 7 12C7 11.4477 7.44771 11 8 11H11V8Z" fill="#0F0F0F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23 4C23 2.34315 21.6569 1 20 1H4C2.34315 1 1 2.34315 1 4V20C1 21.6569 2.34315 23 4 23H20C21.6569 23 23 21.6569 23 20V4ZM21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4Z" fill="#0F0F0F"/>
+</svg>

assets/icons/download.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 17H17.01M17.4 14H18C18.9319 14 19.3978 14 19.7654 14.1522C20.2554 14.3552 20.6448 14.7446 20.8478 15.2346C21 15.6022 21 16.0681 21 17C21 17.9319 21 18.3978 20.8478 18.7654C20.6448 19.2554 20.2554 19.6448 19.7654 19.8478C19.3978 20 18.9319 20 18 20H6C5.06812 20 4.60218 20 4.23463 19.8478C3.74458 19.6448 3.35523 19.2554 3.15224 18.7654C3 18.3978 3 17.9319 3 17C3 16.0681 3 15.6022 3.15224 15.2346C3.35523 14.7446 3.74458 14.3552 4.23463 14.1522C4.60218 14 5.06812 14 6 14H6.6M12 15V4M12 15L9 12M12 15L15 12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/filter-off.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 15L21 21M21 15L15 21M10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L17 11" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/filter-on.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/icons/hips.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.83 3.078a12.674 12.674 0 0 0-4.52-.878c-3.847 0-3.891 1.6-7.74 1.6a15.028 15.028 0 0 1-4.52-.722L1 20.783A13.093 13.093 0 0 0 6.424 21.8c5.242 0 6.792-1.634 12.034-1.634a13.093 13.093 0 0 1 5.423 1.017zM6.425 20.8a13.724 13.724 0 0 1-4.3-.65l1.063-6.173 7.9 6.296a20.11 20.11 0 0 1-4.663.527zm-1.909-6.973l3.272-2.607 3.258 2.597-3.271 2.607zm4.199 3.346l3.271-2.607 3.286 2.618L12 19.791zm4.211-3.356l3.273-2.608 3.285 2.618-3.272 2.608zm.737 5.859L21 13.828 16.197 10l-4.213 3.357-4.196-3.345-4.54 3.619 1.6-9.288A16.193 16.193 0 0 0 8.57 4.8a9.957 9.957 0 0 0 2.888-.38L7.5 7.5l4.484 3.5L16.5 7.5l-4.286-3.334c.21-.08.413-.161.607-.241a7.791 7.791 0 0 1 3.49-.725 11.86 11.86 0 0 1 3.63.615l2.674 15.872a16.248 16.248 0 0 0-4.157-.52 21.93 21.93 0 0 0-4.796.509zM12 5.156L15.01 7.5l-3.024 2.344-3-2.342z"/><path opacity=".5" d="M4.512 13.827l3.272-2.607 3.258 2.597-3.271 2.607-3.259-2.597z"/><path opacity=".25" d="M12.923 13.818l3.272-2.608 3.286 2.619-3.273 2.608-3.285-2.619z"/><path fill="none" d="M0 0h24v24H0z"/></svg>

codemeta.json

@@ -0,0 +1,83 @@
+{
+    "@context": "https://doi.org/10.5063/schema/codemeta-2.0",
+    "@type": "SoftwareSourceCode",
+    "license": "https://spdx.org/licenses/GPL-3.0",
+    "codeRepository": "https://github.com/cds-astro/aladin-lite",
+    "dateCreated": "2013-05-01",
+    "datePublished": "2013-05-01",
+    "dateModified": "2023-01-31",
+    "issueTracker": "https://github.com/cds-astro/aladin-lite/issues",
+    "name": "Aladin Lite",
+    "version": "3.4.5-beta",
+    "softwareVersion": "3.4.5-beta",
+    "description": "An astronomical HiPS visualizer in the browser.",
+    "identifier": "10.5281/zenodo.7638833",
+    "applicationCategory": "Astronomy, Visualization",
+    "funding": "ESCAPE 824064",
+    "referencePublication": "http://aspbooks.org/publications/532/007.pdf",
+    "readme": "https://aladin.cds.unistra.fr/AladinLite/doc/",
+    "releaseNotes": "https://aladin.cds.unistra.fr/AladinLite/doc/#release-notes",
+    "funder": {
+        "@type": "Organization",
+        "name": "European Commission Framework Programme Horizon 2020 Research and Innovation action"
+    },
+    "keywords": [
+        "IVOA",
+        "Astronomy"
+    ],
+    "programmingLanguage": [
+        "Rust",
+        "Javascript"
+    ],
+    "relatedLink": [
+        "https://aladin.cds.unistra.fr/"
+    ],
+    "author": [
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0002-7123-773X",
+            "givenName": "Matthieu",
+            "familyName": "Baumann",
+            "email": "matthieu.baumann@unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        },
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0001-5818-2781",
+            "givenName": "Thomas",
+            "familyName": "Boch",
+            "email": "thomas.boch@astro.unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        }
+    ],
+    "maintainer": [
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0002-7123-773X",
+            "givenName": "Matthieu",
+            "familyName": "Baumann",
+            "email": "matthieu.baumann@unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        },
+        {
+            "@type": "Person",
+            "@id": "https://orcid.org/0000-0001-5818-2781",
+            "givenName": "Thomas",
+            "familyName": "Boch",
+            "email": "thomas.boch@astro.unistra.fr",
+            "affiliation": {
+                "@type": "Organization",
+                "name": "Universit\u00e9 de Strasbourg, CNRS, Observatoire astronomique de Strasbourg, UMR 7550, F-67000 Strasbourg, France"
+            }
+        }
+    ]
+}

examples/al-adass2022.html

@@ -10,7 +10,7 @@
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, gridOptions: {opacity: 0.5, color: 'rgba(255, 0, 0)'}, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: true, showCooGridControl: false});
+        aladin = A.aladin('#aladin-lite-div', {survey: ["P/PanSTARRS/DR1/color-i-r-g"], showReticle: false, projection: "AIT", cooFrame: 'icrs', target: "stephan's quintet", fov: 1000, showGotoControl: false, showFrame: false, fullScreen: true, showLayersControl: true, showCooGrid: true, showCooGridControl: false});
 
         const chft = aladin.createImageSurvey('CFHT', "CFHT deep view of NGC7331 and Stephan's quintet u+g+r", "https://cds.unistra.fr/~derriere/PR_HiPS/2022_Duc/", null, null, {imgFormat: 'png'});
         const nircamJWST = aladin.createImageSurvey('Nircam', "Stephans Quintet NIRCam+MIRI", "http://alasky.cds.unistra.fr/JWST/CDS_P_JWST_Stephans-Quintet_NIRCam+MIRI/", null, null, {imgFormat: 'png', colormap: "viridis"});
@@ -29,7 +29,7 @@
                 fov *= 0.997;
                 rotation += 0.07;
 
-                aladin.setRotation(rotation)
+                aladin.setViewCenter2NorthPoleAngle(rotation)
                 aladin.setFoV(fov);
 
                 if (fov < 3 && fov > 0.5) {

examples/al-all-sky-polygons-projection-MOL.html

@@ -11699,7 +11699,7 @@
         aladin.addOverlay(overlay);
         var polygons = [];
         verticesArr.forEach(function(vertices) {
-            polygons.push(A.polygon(vertices, {color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true}))
+            polygons.push(A.polygon(vertices, {closed: true, color: '#808080', fillColor: '#808080', opacity: .4, lineWidth: 1, fill: true}))
         });
         overlay.addFootprints(polygons);
         aladin.gotoRaDec(156.2162606, 63.8522344);

examples/al-animation-CS-CDS-2022.html

@@ -15,10 +15,9 @@
         </div>
     </div>
 </div>
-
 <script type="module">
     import A from '../src/js/A.js';
-    let aladin;
+    var aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {projection: 'MOL', cooFrame: 'galactic', fov: 360, fullScreen: true, showCooGrid: false, showReticle: false})
         aladin.gotoRaDec(79.9525321, -69.2742586)
@@ -52,8 +51,7 @@
             }
         }
 
-        aladin.view.setGridConfig({opacity: 0, color: {r: 51/255, g: 209/255, b: 1}})
-        aladin.view.setGridConfig({enabled: true})
+        aladin.setCooGrid({enabled: true, opacity: 0, color: {r: 51, g: 209, b: 255}})
 
         async function s_1() {
             return new Promise((resolve, reject) => {
@@ -98,7 +96,7 @@
 
         async function showGrid() {
             for await(const it of interval(50, 40)) {
-                aladin.view.setGridConfig({opacity: it / 40})
+                aladin.setCooGrid({opacity: it / 40})
             }
         }
         
@@ -155,7 +153,7 @@
 
         async function hideGrid() {
             for await(const it of interval(50, 40)) {
-                aladin.view.setGridConfig({opacity: 1 - it / 40})
+                aladin.setCooGrid({opacity: 1 - it / 40})
             }
         }
 
@@ -197,7 +195,7 @@
 
         async function s10() {
             for await(const it of interval(50, 80)) {
-                aladin.setRotation(0.5 * it)
+                aladin.setViewCenter2NorthPoleAngle(0.5 * it)
             }
         }
 
@@ -266,7 +264,7 @@
             for await(const it of interval(intervalMs, nbIt+1)) {
                 fov = fovStart / Math.pow(fovEnd/fovStart, -it/nbIt)
                 aladin.setFoV(fov)
-                aladin.setRotation(40 - 40 * it/nbIt)
+                aladin.setViewCenter2NorthPoleAngle(40 - 40 * it/nbIt)
             }
             aladin.setFoV(fovEnd)
 

examples/al-artifact.html

@@ -4,7 +4,7 @@
 </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<div id="aladin-lite-div" style="width: 1024px; height: 100%;"></div>
 
 <script type="module">
     import A from '../src/js/A.js';
@@ -19,7 +19,6 @@
                 target: '19 24 51.556 +45 16 44.36', // initial target
                 cooFrame: 'equatorial', // set galactic frame
                 showCooGrid: true, // set the grid
-                fullScreen: true,
             }
         );
     });

examples/al-cat-galaxy-shape.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script>let aladin;</script>
+<script type="module">
+  import A from '../src/js/A.js';
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: "M31",
+        fov: 89.78,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+        showShareControl: true,
+        showSettingsControl: true,
+        showStackLayerControl: true,
+        samp: true,
+      });
+
+      aladin.addCatalog(A.catalogFromVizieR("VII/237/pgc", "M31", 3, {
+        limit: 1000,
+        //orderBy: 'nb_ref',
+        onClick: 'showTable',
+        color: 'yellow',
+        hoverColor: 'blue',
+        shape: (s) => {
+          let coo = A.coo();
+          coo.parse(s.data['RAJ2000'] + ' ' + s.data['DEJ2000'])
+
+          let a = (0.1 * Math.pow(10, +s.data.logD25)) / 60;
+          let b = (1.0 / Math.pow(10, +s.data.logR25)) * a
+
+          return A.ellipse(coo.lon, coo.lat, a, b, +s.data.PA, {lineWidth: 3});
+        }
+      }));
+  });
+</script>
+
+</body>
+</html>

examples/al-cat-proper-motion.html

@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<script>let aladin;</script>
+<script type="module">
+  import A from '../src/js/A.js';
+  A.init.then(() => {
+      // Start up Aladin Lite
+      aladin = A.aladin('#aladin-lite-div', {
+        target: "LMC",
+        fov: 10,
+        showContextMenu: true,
+        fullScreen: true,
+        showSimbadPointerControl: true,
+        showShareControl: true,
+        showSettingsControl: true,
+        showStackLayerControl: true,
+        samp: true,
+      });
+
+      let pmraMean = null, pmdecMean = null;
+
+      const pmCat = A.catalogFromURL('./data/proper_motion.xml', {
+        onClick: 'showTable',
+        name: 'mean pm over HPX cells around LMC from GaiaDR2',
+        hoverColor: 'yellow',
+        selectionColor: 'white',
+        // Footprint associated to sources
+        shape: (s) => {
+          // discard drawing a vector for big pm
+          let totalPmSquared = s.data.pmra*s.data.pmra + s.data.pmdec*s.data.pmdec;
+          if (totalPmSquared > 6) {
+            return;
+          }
+
+          let color = rainbowColorMap((totalPmSquared - 2.5) / 2)
+
+          // Compute the mean of pm over the catalog sources
+          if (!pmraMean || !pmdecMean) {
+            pmraMean = 0, pmdecMean = 0;
+            for (var s of pmCat.getSources()) {
+              pmraMean += +s.data.pmra;
+              pmdecMean += +s.data.pmdec;
+            }
+
+            const numSources = pmCat.getSources().length;
+
+            pmraMean /= numSources
+            pmdecMean /= numSources
+          }
+
+          let dra = +s.data.pmra - pmraMean;
+          let ddec = +s.data.pmdec - pmdecMean;
+
+          return A.vector(
+            s.ra,
+            s.dec,
+            s.ra + dra,
+            s.dec + ddec,
+            {color}
+          )
+        }
+      });
+      aladin.addCatalog(pmCat);
+  });
+
+  function rainbowColorMap(value) {
+    // Ensure value is within range [0, 1]
+    value = Math.max(0, Math.min(1, value));
+
+    // Convert value to hue
+    var hue = (1 - value) * 240; // 240 is the maximum hue value for blue
+
+    // Convert HSV to RGB
+    var chroma = 1;
+    var x = chroma * (1 - Math.abs((hue / 60) % 2 - 1));
+    var r1, g1, b1;
+
+    if (hue >= 0 && hue < 60) {
+        [r1, g1, b1] = [chroma, x, 0];
+    } else if (hue >= 60 && hue < 120) {
+        [r1, g1, b1] = [x, chroma, 0];
+    } else if (hue >= 120 && hue < 180) {
+        [r1, g1, b1] = [0, chroma, x];
+    } else if (hue >= 180 && hue < 240) {
+        [r1, g1, b1] = [0, x, chroma];
+    }
+
+    var m = 1 - chroma;
+    var r = r1 + m;
+    var g = g1 + m;
+    var b = b1 + m;
+
+    // Convert RGB to HEX
+    r = Math.round(r * 255);
+    g = Math.round(g * 255);
+    b = Math.round(b * 255);
+    var colorHex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+
+    return colorHex;
+  }
+</script>
+
+</body>
+</html>

examples/al-catalog-hips-shape.html

@@ -1,42 +1,64 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
-<head>
-</head>
-<body>
+    <head> </head>
+    <body>
+        <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+        <script type="module">
+            import A from "../src/js/A.js";
+            let aladin;
+            A.init.then(() => {
+                aladin = A.aladin("#aladin-lite-div", {
+                    target: "03 36 31.65 -35 17 43.1",
+                    survey: "CDS/P/DES-DR2/ColorIRG",
+                    fov: 3 / 60,
+                    fullScreen: true,
+                    showContextMenu: true,
+                    showZoomControl: true,
+                    showSettingsControl: true,
+                    showSimbadPointerControl: true,
+                    samp: true,
+                });
+                // define custom draw function
 
-<script type="module">
-    import A from '../src/js/A.js';
-    let aladin;
-    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
-        // define custom draw function
-        var drawFunction = function(source, canvasCtx, viewParams) {
-            canvasCtx.beginPath();
-            canvasCtx.arc(source.x, source.y, source.data['coo_err_min'] * 5, 0, 2 * Math.PI, false);
-            canvasCtx.closePath();
-            canvasCtx.strokeStyle = '#c38';
-            canvasCtx.lineWidth = 3;
-            canvasCtx.globalAlpha = 0.7,
-            canvasCtx.stroke();
-            var fov = Math.max(viewParams['fov'][0], viewParams['fov'][1]);
+                /*var hips = A.catalogHiPS(
+                    "https://axel.u-strasbg.fr/HiPSCatService/Simbad",
+                    {
+                        onClick: "showTable",
+                        name: "Simbad",
+                        color: "cyan",
+                        hoverColor: "red",
+                        shape: (s) => {
+                            let galaxy = ["Seyfert","Seyfert_1", "Seyfert_2","LSB_G","PartofG","RadioG","Gin","GinPair","HII_G","LensedG","BClG","BlueCompG","EmG","GinCl","GinGroup","StarburstG","LINER","AGN","Galaxy"].some((n) => s.data.main_type.indexOf(n) >= 0);
+                            if (!galaxy) return;
 
-            // object name is displayed only if fov<10°
-            if (fov>10) {
-                return;
-            }
+                            let a = +s.data.size_maj;
+                            let b = +s.data.size_min;
 
-            canvasCtx.globalAlpha = 0.9;
-            canvasCtx.globalAlpha = 1;
-        };
+                            let theta = +s.data.size_angle || 0.0;
+                            return A.ellipse(s.ra, s.dec, a / 60, b / 60, theta, { color: "cyan" });
+                        },
+                    }
+                );*/
+                var hips = A.catalogHiPS(
+                    "https://axel.cds.unistra.fr/HiPSCatService/II/371/des_dr2",
+                    {
+                        onClick: "showTable",
+                        name: "Simbad",
+                        color: "cyan",
+                        hoverColor: "red",
+                        shape: (s) => {
+                            let a = +s.data['Aimg']/3600;
+                            let b = +s.data['Bimg']/3600;
 
-        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showTable', name: 'Simbad', shape: drawFunction});
-        aladin.addCatalog(hips);
-    });
-</script>
+                            let theta = +s.data['PA'];
 
-</body>
+                            return A.ellipse(s.ra, s.dec, a, b, theta, { color: "cyan" });
+                        },
+                    }
+                )
+                aladin.addCatalog(hips);
+            });
+        </script>
+    </body>
 </html>
-
-

examples/al-catalog-hips.html

@@ -11,7 +11,7 @@
     let aladin;
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'LMC', fov: 55, showContextMenu: true});
-        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {onClick: 'showPopup', name: 'Simbad'});
+        var hips = A.catalogHiPS('https://axel.u-strasbg.fr/HiPSCatService/Simbad', {hoverColor: 'yellow', onClick: 'showPopup', name: 'Simbad'});
         aladin.addCatalog(hips);
     });
 </script>

examples/al-coronelli.html

@@ -231,7 +231,7 @@
 
     A.init.then(() => {
         var hipsDir="http://alasky.u-strasbg.fr/CDS_P_Coronelli";
-        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
+        aladin = A.aladin("#aladin-lite-div", {showSimbadPointerControl: true, expandLayersControl: true, realFullscreen: true, fov: 100, allowFullZoomout: true, showReticle: false });
         aladin.createImageSurvey('illenoroC', 'illenoroC', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: false});
         aladin.createImageSurvey('Coronelli', 'Coronelli', hipsDir, 'equatorial', 4, {imgFormat: 'jpg', longitudeReversed: true});
         aladin.setImageSurvey('Coronelli');

examples/al-customize-button.html

@@ -1,7 +1,8 @@
 <!doctype html>
 <html>
-<head>
-</head>
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
 <body>
 
 
@@ -22,6 +23,7 @@
                 reticleColor: '#ff89ff', // change reticle color
                 reticleSize: 64, // change reticle size
                 showContextMenu: true,
+                fullScreen: true,
             }
         );
 
@@ -75,11 +77,7 @@
     });
 </script>
 <style>
-    .aladin-stack-control {
-        position: absolute;
-        top: 10rem;
-        left: 10rem;
-    }
+
 
     .myBox {
         top: unset;
@@ -89,16 +87,12 @@
 
     .myButton {
         position: absolute;
-        bottom: 0;
+        bottom: 100px;
         left: 0;
 
         background-color: pink;
     }
-
-    .aladin-cooFrame {
-        position: absolute;
-        top: 10rem;
-    }
+    
 </style>
 </body>
 </html>

examples/al-displayFITS.html

@@ -15,20 +15,16 @@
 
         aladin.displayFITS(
             //'https://fits.gsfc.nasa.gov/samples/FOCx38i0101t_c0f.fits', // url of the fits file
-            'data/fits/HorseHead.fits',
+            'images/panstarrs-g-m61.fits',
             //'data/fits/neowise.fits',
             //'data/fits/irac.fits',
             //'data/fits/FOCx38i0101t_c0f.fits',
             {
-                minCut: 5000,
-                maxCut: 17000,
+                name: 'm61',
                 colormap: 'viridis'
             }, // no optional params
-            (ra, dec, fov, image) => {
+            (ra, dec, fov, _) => {
                 // ra, dec and fov are centered around the fits image
-                console.log("jjj", image)
-                image.setColormap("magma", {stretch: "asinh"});
-
                 aladin.gotoRaDec(ra, dec);
                 aladin.setFoV(fov);
             },

examples/al-displayJPG.html

@@ -42,7 +42,7 @@ Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.
             'https://noirlab.edu/public/media/archives/images/large/noirlab1912a.jpg',
             // no options
             {
-                transparency: 0.6,
+                transparency: 1.0,
             },
             // A callback fn once the overlay is set
             callback

examples/al-distortion.html

@@ -25,8 +25,7 @@
         aladin.setBaseImageLayer("P/PanSTARRS/DR1/g", {imgFormat: "fits"});
         aladin.getBaseImageLayer().setColormap('redtemperature', {stretch: "Asinh"});*/
 
-        aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/SDSS9/color', fov: 60, target: '0 90', fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
-        aladin.setProjection('SIN');
+        aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/SDSS9/color', fov: 150, target: '0 90', fullScreen: true, cooFrame: 'equatorial', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
 
         //let survey = aladin.createImageSurvey("P/PanSTARRS/DR1/g", null, null, null, null, );
         /*aladin.setBaseImageLayer("P/PanSTARRS/DR1/g");

examples/al-easy-access-simbad-ned.html

@@ -23,7 +23,7 @@
       });
 
       aladin.addCatalog(A.catalogFromSimbad('M 82', 0.1, {onClick: 'showTable'}));
-    aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));
+      aladin.addCatalog(A.catalogFromNED('09 55 52.4 +69 40 47', 0.1, {onClick: 'showPopup', shape: 'plus'}));
   });
 </script>
 

examples/al-easy-access-vizier.html

@@ -21,22 +21,20 @@ var pessto = 'https://archive.eso.org/tap_cat/sync?REQUEST=doQuery&LANG=ADQL&MAX
 
 A.init.then(() => {
 
-    aladin = A.aladin('#aladin-lite-div', {survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', target: 'LMC', fov: 5, showContextMenu: true});
+    aladin = A.aladin('#aladin-lite-div', {survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', target: 'LMC', fov: 5, showContextMenu: true, showSettingsControl:true, samp:true});
 
     aladin.addCatalog(A.catalogFromURL('https://vizier.u-strasbg.fr/viz-bin/votable?-source=HIP2&-c=LMC&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=9999&-c.rm=180', {sourceSize:12, color: '#f08080'}));
 
  
-
     aladin.addCatalog(A.catalogFromURL(vmc_cepheids, {onClick: 'showTable', sourceSize:14, color: '#fff080'}));
 
- 
 
     aladin.addCatalog(A.catalogFromURL(pessto, {onClick: 'showPopup', sourceSize:14, color: '#00f080'}));
     aladin.on('select', (objs) => {
         console.log(objs, "are selected");
     })
 
-    aladin.select();
+    aladin.select('circle');
 
 });
 </script>

examples/al-ellipse.html

@@ -19,11 +19,11 @@
         overlay.addFootprints([
             A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
-            A.ellipse(10.6833, 41.2669, 3.33333/2, 1.1798333/2, 35, {color: 'cyan'}),
+            A.ellipse(10.6833, 41.2669, 3.33333/2, 1.1798333/2, 10, {color: 'cyan'}),
             // NGC 3048
-            A.ellipse(180.470842, -18.867589, 5.2/120, 3.1/120, 80, {color: 'cyan'}),
+            A.ellipse(180.470842, -18.867589, 5.2/120, 3.1/120, 10, {color: 'cyan'}),
             // NGC 3049
-            A.ellipse(180.4742, -18.8850, 3.1/120, 1.6/120, 50, {color: 'cyan'}),
+            A.ellipse(180.4742, -18.8850, 3.1/120, 1.6/120, 10, {color: 'cyan'}),
         ]);
         //overlay.add(); // radius in degrees
     });

examples/al-event-listeners.html

@@ -11,7 +11,7 @@
     import A from '../src/js/A.js';
     A.init.then(() => {
         var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
-        var cat = A.catalog({sourceSize: 20});
+        var cat = A.catalog({sourceSize: 20, onClick: 'showTable'});
         aladin.addCatalog(cat);
         cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
         var msg;
@@ -51,6 +51,20 @@
             }
             $('#infoDiv').html(msg);
         });
+
+        aladin.on('resizeChanged', function() {
+            console.log("resize")
+        });
+
+        aladin.on('projectionChanged', function(proj) {
+            console.log(proj)
+        });
+
+        aladin.on('layerChanged', function(imageLayer, layer, state){
+            console.log(imageLayer, layer, state)
+        });
+
+        cat.sources[0].actionClicked();
     });
 </script>
 </body>

examples/al-footprints.html

@@ -12,14 +12,15 @@
     A.init.then(() => {
         // Start up Aladin Lite
         aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'M 1', fov: 0.2, showContextMenu: true, fullScreen: true});
-        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3});
+        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 3, lineDash: [2, 2]});
         aladin.addOverlay(overlay);
         overlay.addFootprints([
-            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]]),
+            A.polygon([[83.64287, 22.01713], [83.59872, 22.01692], [83.59852, 21.97629], [83.64295, 21.97629]], {hoverColor: 'green'}),
             A.polygon([[83.62807, 22.06330], [83.58397, 22.02280], [83.62792, 22.02258]]),
             A.polygon([[8.62807, 220.06330], [83.58397, 10.02280], [150.62792, 87.02258]])
         ]);
         overlay.add(A.circle(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
+        overlay.add(A.vector(83.66067, 22.03081, 0.04, {color: 'cyan'})); // radius in degrees
 
         aladin.on("footprintClicked", (footprint, xyMouseCoords) => {
             console.log("footprint clicked catched: ", footprint, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
@@ -34,7 +35,7 @@
             console.log("Object hovered stopped: ", object, "mouse coords xy: ", xyMouseCoords.x, xyMouseCoords.y);
         })
 
-        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 100, {onClick: 'showTable', limit: 1000});
+        const cat = A.catalogFromVizieR('B/assocdata/obscore', 'M 1', 10, {onClick: 'showTable', hoverColor: 'purple', limit: 10000});
         aladin.addCatalog(cat);
     });
 </script>

examples/al-fov-range.html

@@ -15,7 +15,7 @@
             {
                 survey: 'P/allWISE/color', // set initial image survey
                 projection: 'AIT', // set a projection
-                fov: 1.5, // initial field of view in degrees
+                fov: 0.1, // initial field of view in degrees
                 target: 'NGC 2175', // initial target
                 cooFrame: 'galactic', // set galactic frame
                 reticleColor: '#00ff00', // change reticle color

examples/al-gw.html

@@ -1,6 +1,8 @@
 <!doctype html>
 <html>
 <head>
+    <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: 1024px; height: 768px"></div>
@@ -12,7 +14,7 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {showReticle: true, showSurveyStackControl: true, showOverlayStackControl: false, projection: "TAN", target: '15 16 57.636 -60 55 7.49', showProjectionControl: true, realFullscreen: true, showZoomControl: true, showSimbadPointerControl: true, showShareControl: true, showContextMenu: true, showCooGridControl: true, fullScreen: true, showCooGrid: true, fov: 90});
                 
-        var moc_0_99 = A.MOCFromURL("./data//gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 3, fill: false, perimeter: true});
+        var moc_0_99 = A.MOCFromURL("./data//gw/gw_0.9.fits",{ name: "GW 90%", color: "#ff0000", opacity: 0.0, lineWidth: 10, fill: false, perimeter: true});
         var moc_0_95 = A.MOCFromURL("./data/gw/gw_0.6.fits",{ name: "GW 60%", color: "#00ff00", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
         var moc_0_5 = A.MOCFromURL("./data/gw/gw_0.3.fits",{ name: "GW 30%", color: "#00ffff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});
         var moc_0_2 = A.MOCFromURL("./data/gw/gw_0.1.fits",{ name: "GW 10%", color: "#ff00ff", opacity: 0.5, lineWidth: 3, fill: true, perimeter: true});

examples/al-hips-local.html

@@ -5,14 +5,16 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+<!--<script type="text/javascript" src="./../dist/aladin.umd.cjs" charset="utf-8"></script>-->
 
 <script type="module">
     import A from '../src/js/A.js';
+
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'galactic center'});
+        aladin = A.aladin('#aladin-lite-div', {target: "05 40 59.12 -02 27 04.1", fov: 2});
         
-        let survey = aladin.createImageSurvey('hips gaia', "hips gaia name", "data/hips/gaia", undefined, undefined, {colormap:"viridis"});
+        let survey = aladin.createImageSurvey('DSS2 local', "local hips", "hips/CDS_P_DSS2_color");
         aladin.setBaseImageLayer(survey);
     });
 </script>

examples/al-image-hips.html

@@ -1,34 +1,35 @@
-
 <!doctype html>
 <html>
 <head>
+    <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
 </head>
 <body>
-<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+<div id="aladin-lite-div" style="width: 500px; height: 500px"></div>
 
 <script type="module">
     import A from '../src/js/A.js';
-
+    var aladin;
     A.init.then(() => {
-        // Start up Aladin Lite
-        let aladin = A.aladin('#aladin-lite-div', {target: 'Sgr a*', fov: 0.5, showContextMenu: true});
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, cooFrame: "ICRSd", showSimbadPointerControl: true, showShareControl: true, showShareControl: true, survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', fov: 180, showContextMenu: true});
+        // manage URL parameters
         let survey1 = aladin.getBaseImageLayer();
         survey1.setColormap('magma', {stretch: 'linear'});
-        
-        let survey2 = aladin.newImageSurvey("CDS/P/2MASS6X/H");
+
+        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/mid/I");
         aladin.setImageLayer(survey2)
-        survey2.setColormap('rdbu', {stretch: 'asinh'});
-        
-        let survey3 = aladin.newImageSurvey("https://alasky.cds.unistra.fr/CFHTLS-T0007b/Deep/UALLSKY/");
+        survey2.setColormap('rdbu', {stretch: 'linear'});
+
+        let survey3 = aladin.newImageSurvey("CSIRO/P/RACS/low/I");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'asinh'});
+        aladin.setImageLayer(survey3)
         aladin.setImageLayer(survey3)
-        survey3.setColormap('cubehelix', {stretch: 'linear'});
 
         aladin.setImageLayer(survey2);
-        aladin.setImageLayer(survey3);
-        aladin.setImageLayer(survey3);
 
-        //aladin.setOverlayImageLayer(survey2);
+        aladin.setImageLayer(survey3)
+        aladin.setImageLayer(survey2);
+
+
     });
 </script>
-</body>
-</html>

examples/al-image-with-WCS.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+    <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+    <script type="module">
+        import A from '../src/js/A.js';
+        A.init.then(() => {
+            let aladin = A.aladin('#aladin-lite-div', {fov: 30, survey: "CDS/P/GALEXGR6/AIS/FUV", target: "280 +0", projection: "AIT", showShareControl:true, showSettingsControl: true, showContextMenu:true});
+            
+            aladin.setOverlayImageLayer(A.image(
+                "https://nova.astrometry.net/image/25038473?filename=M61.jpg",
+                {
+                    name: "M61",
+                    imgFormat: 'jpeg',
+                    wcs: {
+                        NAXIS: 0, // Minimal header
+                        CTYPE1: 'RA---TAN', // TAN (gnomic) projection
+                        CTYPE2: 'DEC--TAN', // TAN (gnomic) projection
+                        EQUINOX: 2000.0, // Equatorial coordinates definition (yr)
+                        LONPOLE: 180.0, // no comment
+                        LATPOLE: 0.0, // no comment
+                        CRVAL1: 185.445488837, // RA of reference point
+                        CRVAL2: 4.47896032431, // DEC of reference point
+                        CRPIX1: 588.995094299, // X reference pixel
+                        CRPIX2: 308.307905197, // Y reference pixel
+                        CUNIT1: 'deg', // X pixel scale units
+                        CUNIT2: 'deg', // Y pixel scale units
+                        CD1_1: -0.000223666022989, // Transformation matrix
+                        CD1_2: 0.000296578064584, // no comment
+                        CD2_1: -0.000296427555509, // no comment
+                        CD2_2: -0.000223774308964, // no comment
+                        NAXIS1: 1080, // Image width, in pixels.
+                        NAXIS2: 705 // Image height, in pixels.
+                    },
+                    successCallback: (ra, dec, fov, image) => {
+                        aladin.gotoRaDec(ra, dec);
+                        aladin.setFoV(fov * 5)
+                    }
+                },
+            ));
+        });
+
+    </script>
+</body>
+</html>

examples/al-init-custom-options.html

@@ -1,15 +1,14 @@
 <!doctype html>
 <html>
-<head>
-</head>
+    <head>
+    </head>
 <body>
 
-<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
 
+<div id="aladin-lite-div" style="width: 768px; height: 512px"></div>
+<script>let aladin;</script>
 <script type="module">
     import A from '../src/js/A.js';
-    var aladin;
-
     A.init.then(() => {
         aladin = A.aladin(
             '#aladin-lite-div',
@@ -18,25 +17,22 @@
                 projection: 'AIT', // set a projection
                 fov: 1.5, // initial field of view in degrees
                 target: 'NGC 2175', // initial target
-                cooFrame: 'galactic', // set galactic frame
-                reticleColor: '#00ff00', // change reticle color
-                reticleSize: 40, // change reticle size
-                gridOptions: {color: 'pink'},
-                showCooGrid: true, // set the grid
-                fullScreen: true,
-                showStatusBar: false,
-                showShareControl: true,
-                showSettingsControl: true,
-                showLayersControl: true,
-                showZoomControl: true,
+                cooFrame: 'icrs', // set galactic frame
+                reticleColor: '#ff89ff', // change reticle color
+                reticleSize: 64, // change reticle size
                 showContextMenu: true,
-                showCooGridControl: true,
-                //showSimbadPointerControl: true,
-                showFullscreenControl: true,
+                showFrame: true,
+                showZoomControl:true,
+                showSettingsControl:true,
+                showCooGrid: true,
+                fullScreen: true,
             }
         );
+
+        aladin.removeHiPSFromFavorites('CDS/P/allWISE/color')
     });
 </script>
-
+<style>
+</style>
 </body>
-</html>
+</html>

examples/al-moc-sdss9.html

@@ -1,7 +1,8 @@
 <!doctype html>
 <html>
-<head>
-</head>
+    <head>
+        <meta name="viewport" content="width=device-width, height=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
+    </head>
 <body>
     <div id="aladin-lite-div" style="width: 1024px; height: 768px">
       <div id="ui" class="ui">
@@ -11,13 +12,15 @@
     import A from '../src/js/A.js';
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color'});
-        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3, fill: true}, (moc) => {
+        aladin = A.aladin('#aladin-lite-div', {target: '00 00 00 +07 00 00', fov: 130, survey: 'P/Mellinger/color', showContextMenu: true, fullScreen: true});
+        var moc11 = A.MOCFromURL('http://skies.esac.esa.int/HST/NICMOS/Moc.fits', {color: '#84f', lineWidth: 3}, (moc) => {
             // moc is ready
             console.log(moc.contains(205.9019247, +2.4492764));
             console.log(moc.contains(-205.9019247, +2.4492764));
+
+            console.log(moc.serialize("json"))
         });
-        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.1, lineWidth: 3});
+        var moc10 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=11&fmt=fits', {color: '#ffffff', perimeter: true, fillColor: '#aabbcc', opacity: 0.3, lineWidth: 3});
         var moc9 = A.MOCFromURL('https://alasky.unistra.fr/MocServer/query?ivorn=ivo%3A%2F%2FCDS%2FV%2F139%2Fsdss9&get=moc&order=4&fmt=fits', {color: '#00ff00', opacity: 0.5, lineWidth: 3, perimeter: true});
 
         aladin.addMOC(moc11);

examples/al-not-found.html

@@ -6,18 +6,16 @@
 <body>
 
 <div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
-
+<script>var aladin;</script>
 <script type="module">
     import A from '../src/js/A.js';
-    let aladin;
     A.init.then(() => {
         // Start up Aladin Lite
         aladin = A.aladin('#aladin-lite-div', {
             fov: 360,
             target: '0 0',
             fullScreen: true,
-            survey: ["fsdfsd", "jfjfj", "jfj", "P/allWISE/color"],
-            showCooGrid: true,
+            survey: ["azef", "jfjfj", "jfj", "P/allWISE/color"],
         });
     });
 </script>

examples/al-obscore.html

@@ -12,11 +12,11 @@
     A.init.then(() => {
         aladin = A.aladin('#aladin-lite-div', {target: 'NGC 1367', fov: 360, samp: false, projection: 'AIT', fullScreen: true, showContextMenu: true});
 
-        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable'}, (catalog) => {
+        A.catalogFromURL('https://raw.githubusercontent.com/VisIVOLab/SKA-Discovery-Service-Mockup/main/ObsCore/ObsCore_003.xml', {onClick: 'showTable', hoverColor: 'purple'}, (catalog) => {
             aladin.addCatalog(catalog)
         });
 
-        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {limit: 1000}))
+        aladin.addCatalog(A.catalogFromVizieR("B/assocdata/obscore", "0 +0", 20, {onClick: 'showTable', hoverColor: 'yellow', limit: 1000}))
     });
 </script>
 </body>

examples/al-onthefly.html

@@ -0,0 +1,88 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {
+            fullScreen: true,
+            target: "ngc 1436",
+            fov: 2,
+            projection: 'TAN',
+            showContextMenu: true,
+            showSimbadPointerControl: true,
+            expandLayersControl: true,
+            hipsList: [
+                // High energy (Gamma and X-rays)
+                'CDS/P/HGPS/Flux',
+                'CDS/P/Fermi/5',
+                'CDS/P/Fermi/4',
+                'CDS/P/Fermi/3',
+                'ov-gso/P/Fermi/Band2',
+                'ov-gso/P/BAT/150-195keV',
+                'ov-gso/P/BAT/35-50keV',
+                'ov-gso/P/BAT/14-20keV',
+                'erosita/dr1/rate/023',
+                'erosita/dr1/rate/024',
+                // Uv/Optical/Infrared
+                'CDS/P/GALEXGR6_7/FUV',
+                'CDS/P/GALEXGR6_7/NUV',
+                'CDS/P/DSS2/color',
+                'CDS/P/PanSTARRS/DR1/g',
+                'CDS/P/PanSTARRS/DR1/r',
+                'CDS/P/Finkbeiner',
+                'CDS/P/PanSTARRS/DR1/i',
+                'CDS/P/PanSTARRS/DR1/color-i-r-g',
+                'CDS/P/PanSTARRS/DR1/z',
+                'CDS/P/PanSTARRS/DR1/y',
+                'CDS/P/DES-DR2/ColorIRG',
+                'CDS/P/2MASS/color',
+                'ov-gso/P/GLIMPSE/irac1',
+                'ov-gso/P/GLIMPSE/irac2',
+                'CDS/P/unWISE/color-W2-W1W2-W1',
+                'ov-gso/P/GLIMPSE/irac3',
+                'ov-gso/P/GLIMPSE/irac4',
+                'CDS/P/IRIS/color',
+                'ESAVO/P/AKARI/N60',
+                'ESAVO/P/AKARI/WideL',
+                'ESAVO/P/HERSCHEL/SPIRE-250',
+                'ESAVO/P/HERSCHEL/SPIRE-350',
+                'ESAVO/P/HERSCHEL/SPIRE-500',
+                // sub-mm/mm/radio
+                'CDS/P/PLANCK/R3/HFI/color',
+                'CDS/P/ACT_Planck/DR5/f220',
+                'CDS/P/CO',
+                'CDS/P/PLANCK/R3/HFI100',
+                'CDS/P/PLANCK/R3/LFI30',
+                'CDS/P/NVSS',
+                'CSIRO/P/RACS/mid/I',
+                'ov-gso/P/CGPS/VGPS',
+                'CDS/C/HI4PI/HI',
+                'CDS/P/MeerKAT/Galactic-Centre-1284MHz-StokesI',
+                'CSIRO/P/RACS/low/I',
+                'astron.nl/P/tgssadr',
+                'ov-gso/P/GLEAM/170-231',
+                'ov-gso/P/GLEAM/139-170',
+                'astron.nl/P/lotss_dr2_high',
+                'ov-gso/P/GLEAM/103-134',
+                'ov-gso/P/GLEAM/072-103'
+            ]
+        });
+
+        aladin.addCatalog(
+            A.catalogFromSKAORucio("ngc 1436", 15, {
+                onClick: 'showTable',
+                hoverColor: "yellow",
+            })
+        );
+    });
+</script>
+</body>
+</html>

examples/al-polyline.html

@@ -11,11 +11,15 @@
 
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: 'Gamma Cas', fov: 10});
+        aladin = A.aladin('#aladin-lite-div', {target: 'Gamma Cas', fov: 10, cooFrame: 'icrs'});
 
-        var overlay = A.graphicOverlay({color: '#ee2345', lineWidth: 2});
+        var overlay = A.graphicOverlay({lineWidth: 2});
         aladin.addOverlay(overlay);
-        overlay.add(A.polyline([ [2.29452158, 59.14978110], [10.12683778, 56.53733116], [14.1772154, 60.7167403], [21.45396446, 60.23528403], [28.59885697, 63.67010079] ]));
+        overlay.add(A.polyline([ [2.29452158, 59.14978110], [10.12683778, 56.53733116], [14.1772154, 60.7167403], [21.45396446, 60.23528403], [28.59885697, 63.67010079] ], {color: 'green'}));
+    
+        aladin.select('rect', (s) => {
+            console.log(s)
+        })
     });
 </script>
 </body>

examples/al-save-colormap.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+<head>
+<!--<link rel="stylesheet" href="./layers.css" />-->
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    var aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, cooFrame: "ICRSd", showSimbadPointerControl: true, showShareControl: true, showShareControl: true, survey: 'https://alasky.cds.unistra.fr/DSS/DSSColor/', fov: 180, showContextMenu: true});
+        // manage URL parameters
+        let survey1 = aladin.getBaseImageLayer();
+        survey1.setColormap('magma', {stretch: 'linear'});
+
+        let survey2 = aladin.newImageSurvey("CSIRO/P/RACS/low/I");
+        aladin.setImageLayer(survey2)
+        survey2.setColormap('rdbu', {stretch: 'linear'});
+
+        let survey3 = aladin.newImageSurvey("CSIRO/P/RACS/mid/I");
+        aladin.setImageLayer(survey3)
+        survey3.setColormap('cubehelix', {stretch: 'asinh'});
+
+        aladin.setImageLayer(survey2);
+
+        aladin.removeHiPSFromFavorites(survey3);
+    });
+</script>
+
+</body>
+</html>

examples/al-ska-hips-list.html

@@ -0,0 +1,95 @@
+<!doctype html>
+<html>
+<head>
+</head>
+<body>
+
+<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
+
+<script type="module">
+    import A from '../src/js/A.js';
+    let aladin;
+    A.init.then(() => {
+        aladin = A.aladin('#aladin-lite-div', {
+            fullScreen: true,
+            target: "centaurus A",
+            fov: 10,
+            projection: 'TAN',
+            showContextMenu: true,
+            showSimbadPointerControl: true,
+            expandLayersControl: true,
+            hipsList: [
+                // High energy (Gamma and X-rays)
+                'CDS/P/HGPS/Flux',
+                'CDS/P/Fermi/5',
+                'CDS/P/Fermi/4',
+                'CDS/P/Fermi/3',
+                'ov-gso/P/Fermi/Band2',
+                'ov-gso/P/BAT/150-195keV',
+                'ov-gso/P/BAT/35-50keV',
+                'ov-gso/P/BAT/14-20keV',
+                'erosita/dr1/rate/023',
+                'erosita/dr1/rate/024',
+                // Uv/Optical/Infrared
+                'CDS/P/GALEXGR6_7/FUV',
+                'CDS/P/GALEXGR6_7/NUV',
+                'CDS/P/DSS2/color',
+                'CDS/P/PanSTARRS/DR1/g',
+                'CDS/P/PanSTARRS/DR1/r',
+                'CDS/P/Finkbeiner',
+                'CDS/P/PanSTARRS/DR1/i',
+                'CDS/P/PanSTARRS/DR1/color-i-r-g',
+                'CDS/P/PanSTARRS/DR1/z',
+                'CDS/P/PanSTARRS/DR1/y',
+                'CDS/P/DES-DR2/ColorIRG',
+                'CDS/P/2MASS/color',
+                'ov-gso/P/GLIMPSE/irac1',
+                'ov-gso/P/GLIMPSE/irac2',
+                'CDS/P/unWISE/color-W2-W1W2-W1',
+                'ov-gso/P/GLIMPSE/irac3',
+                'ov-gso/P/GLIMPSE/irac4',
+                'CDS/P/IRIS/color',
+                'ESAVO/P/AKARI/N60',
+                'ESAVO/P/AKARI/WideL',
+                'ESAVO/P/HERSCHEL/SPIRE-250',
+                'ESAVO/P/HERSCHEL/SPIRE-350',
+                'ESAVO/P/HERSCHEL/SPIRE-500',
+                // sub-mm/mm/radio
+                'CDS/P/PLANCK/R3/HFI/color',
+                'CDS/P/ACT_Planck/DR5/f220',
+                'CDS/P/CO',
+                'CDS/P/PLANCK/R3/HFI100',
+                'CDS/P/PLANCK/R3/LFI30',
+                'CDS/P/NVSS',
+                'CSIRO/P/RACS/mid/I',
+                'ov-gso/P/CGPS/VGPS',
+                'CDS/C/HI4PI/HI',
+                'CDS/P/MeerKAT/Galactic-Centre-1284MHz-StokesI',
+                'CSIRO/P/RACS/low/I',
+                'astron.nl/P/tgssadr',
+                'ov-gso/P/GLEAM/170-231',
+                'ov-gso/P/GLEAM/139-170',
+                'astron.nl/P/lotss_dr2_high',
+                'ov-gso/P/GLEAM/103-134',
+                'ov-gso/P/GLEAM/072-103'
+            ]
+        });
+
+        const gleam072_103 = aladin.newImageSurvey('ov-gso/P/GLEAM/072-103', {imgFormat: 'fits', colormap: "red", stretch: "asinh"});
+        const gleam103_134 = aladin.newImageSurvey('ov-gso/P/GLEAM/103-134', {imgFormat: 'fits', colormap: "green", additive: true, stretch: "asinh"});
+        const gleam170_231 = aladin.newImageSurvey('ov-gso/P/GLEAM/170-231', {imgFormat: 'fits', colormap: "blue", additive: true, stretch: "asinh"});
+
+        //const HSCBlueSurvey = aladin.newImageSurvey('CDS/P/HSC/DR2/deep/z', {imgFormat: 'fits', colormap: "blue", minCut: -0.01218, maxCut: 2.27397, additive: true, stretch: "asinh"});
+
+        aladin.setBaseImageLayer(gleam072_103);
+        aladin.setOverlayImageLayer(gleam103_134, 'gl2');
+        aladin.setOverlayImageLayer(gleam170_231, 'gl3');
+
+        //aladin.setOverlayImageLayer('CDS/P/HSC/DR2/deep/z', 'hsc blue layer');
+
+        //const c1 = A.catalogFromURL('./data/eso.xml', {onClick: 'showTable'});
+        //aladin.addCatalog(c1);
+    });
+</script>
+</body>
+</html>

examples/al-soda-ska.html

@@ -1,33 +0,0 @@
-<!doctype html>
-<html>
-<head>
-</head>
-<body>
-
-<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
-
-<script type="module">
-    import A from '../src/js/A.js';
-    let aladin;
-    A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {fullScreen: true, target: "Abell 194", fov: 180, projection: 'AIT', showContextMenu: true});
-        aladin.setImageSurvey('astron.nl/P/lotss_dr2_high')
-        A.catalogFromSKAORucio("Abell 194", 90, {onClick: 'showTable'}, (cat) => {
-            aladin.addCatalog(cat);
-        });
-
-        /*A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/ska/obscoreRucio.xml', {onClick: 'showTable'}, (cat) => {
-            aladin.addCatalog(cat);
-        });
-
-        A.catalogFromURL('data/votable/CDS-B-jcmt-obscore.xml', {onClick: 'showTable'}, (cat) => {
-            aladin.addCatalog(cat);
-        });*/
-        A.catalogFromURL('https://aladin.cds.unistra.fr/ObsCoreRucioScs.xml', {onClick: 'showTable'}, (cat) => {
-            aladin.addCatalog(cat);
-        });
-        
-    });
-</script>
-</body>
-</html>

examples/al-stcs-footprints.html

@@ -11,10 +11,10 @@
 
     A.init.then(() => {
         // Start up Aladin Lite
-        let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5, showContextMenu: true});
+        let aladin = A.aladin('#aladin-lite-div', {survey: "CDS/P/DSS2/color", target: 'Sgr a*', fov: 0.5, showContextMenu: true, showCooGrid: true});
         // This table contains a s_region column containing stcs expressed regions
         // that are automatically parsed
-        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable'}));
+        aladin.addCatalog(A.catalogFromURL('https://aladin.cds.unistra.fr/AladinLite/doc/API/examples/data/alma-footprints.xml', {name: 'ALMA footprints', onClick: 'showTable', hoverColor: 'lightgreen'}));
     });
 </script>
 </body>

examples/al-vertices.html

@@ -8,15 +8,13 @@
 
 <script type="module">
     import A from '../src/js/A.js';
-    import {AladinUtils} from '../src/js/AladinUtils.js';
 
     A.init.then(() => {
-        let vertices = AladinUtils.HEALPix.vertices(8, 0n)
-
-        let lonlat = AladinUtils.HEALPix.pix2ang(8, 0n)
-
-        let ipix = AladinUtils.HEALPix.ang2pix(8, 0.1, 0.4)
-        console.log(vertices, lonlat, ipix)
+        let vertices = A.Utils.HEALPix.vertices(Math.pow(2, 3), BigInt(276))
+        //let lonlat = A.Utils.HEALPix.pix2ang(8, 0n)
+        //let ipix = A.Utils.HEALPix.ang2pix(8, 0.1, 0.4)
+        //console.log("vertices", vertices, lonlat, ipix)
+        console.log(vertices)
     })
     
 </script>

examples/al-zoomchanged.html

@@ -14,17 +14,16 @@
         aladin = A.aladin('#aladin-lite-div', {target: "30 0", fov: 360, fullScreen: true, cooFrame: 'galactic', showCooGridControl: true, showSimbadPointerControl: true, showCooGrid: true});
         aladin.setProjection('AIT');
 
-
         aladin.on("zoomChanged", () => {
             console.log("zoomChanged")
         })
-        aladin.on("positionChanged", ({ra, dec, dragging}) => {
-            console.log("positionChanged", ra, dec)
+        aladin.on("positionChanged", ({ra, dec}) => {
+            console.log('call to aladin', aladin.pix2world(300, 300))
+            console.log('positionChanged in icrs', ra, dec)
         })
 
         aladin.gotoRaDec(0, 20);
 
-
         aladin.on('rightClickMove', (x, y) => {
             console.log("right click move", x, y)
         })

examples/hips/CDS_P_DSS2_color/properties

@@ -0,0 +1,48 @@
+hips_doi             = 10.26093/cds/aladin/ht9n-7r
+creator_did          = ivo://CDS/P/DSS2/color
+obs_collection       = DSS colored
+obs_title            = DSS colored
+obs_description      = Color composition generated by CDS. This HiPS survey is based on 2 others HiPS surveys, respectively DSS2-red and DSS2-blue HiPS, both of them directly generated from original scanned plates downloaded from STScI site. The red component has been built from POSS-II F, AAO-SES,SR and SERC-ER plates. The blue component has been build from POSS-II J and SERC-J,EJ. The green component is based on the mean of other components. Three missing plates from red survey (253, 260, 359) has been replaced by pixels from the DSSColor STScI jpeg survey. The 11 missing blue plates (mainly in galactic plane) have not been replaced (only red component).
+obs_copyright        = Digitized Sky Survey - STScI/NASA, Colored & Healpixed by CDS
+obs_copyright_url    = http://archive.stsci.edu/dss/copyright.html
+client_category      = Image/Optical/DSS
+client_sort_key      = 03-00
+hips_builder         = Aladin/HipsGen v10.123
+hips_creation_date   = 2010-05-01T19:05Z
+hips_release_date    = 2019-05-07T10:55Z
+hips_creator         = Oberto A. (CDS) , Fernique P. (CDS)
+hips_version         = 1.4
+hips_order           = 5
+hips_frame           = equatorial
+hips_tile_width      = 512
+hips_tile_format     = jpeg
+dataproduct_type     = image
+client_application   = AladinLite
+#hips_service_url    = http://alasky.u-strasbg.fr/DSS/DSSColor
+hips_status          = public partial unclonable
+hips_rgb_red         = DSS2Merged [1488.0 8488.8125 14666.0 Linear]
+hips_rgb_blue        = DSS2-blue-XJ-S [4286.0 12122.5 19959.0 Linear]
+hips_hierarchy       = median
+hips_pixel_scale     = 2.236E-4
+hips_initial_ra      = 085.30251
+hips_initial_dec     = -02.25468
+hips_initial_fov     = 2
+moc_sky_fraction     = 0.001302
+hips_copyright       = CNRS/Unistra
+obs_ack              = The Digitized Sky Surveys were produced at the Space Telescope Science Institute under U.S. Government grant NAG W-2166. The images of these surveys are based on photographic data obtained using the Oschin Schmidt Telescope on Palomar Mountain and the UK Schmidt Telescope. The plates were processed into the present compressed digital form with the permission of these institutions. The National Geographic Society - Palomar Observatory Sky Atlas (POSS-I) was made by the California Institute of Technology with grants from the National Geographic Society. The Second Palomar Observatory Sky Survey (POSS-II) was made by the California Institute of Technology with funds from the National Science Foundation, the National Geographic Society, the Sloan Foundation, the Samuel Oschin Foundation, and the Eastman Kodak Corporation. The Oschin Schmidt Telescope is operated by the California Institute of Technology and Palomar Observatory. The UK Schmidt Telescope was operated by the Royal Observatory Edinburgh, with funding from the UK Science and Engineering Research Council (later the UK Particle Physics and Astronomy Research Council), until 1988 June, and thereafter by the Anglo-Australian Observatory. The blue plates of the southern Sky Atlas and its Equatorial Extension (together known as the SERC-J), as well as the Equatorial Red (ER), and the Second Epoch [red] Survey (SES) were all taken with the UK Schmidt. Supplemental funding for sky-survey work at the ST ScI is provided by the European Southern Observatory.
+prov_progenitor      = STScI
+bib_reference        = 1996ASPC..101...88L
+bib_reference_url    = http://cdsads.u-strasbg.fr/abs/1996ASPC..101...88L
+# 1975-1999
+t_min                = 42413
+t_max                = 51179
+obs_regime           = Optical
+em_min               = 4e-7
+em_max               = 6e-7
+#hips_master_url     = ex: http://yourHipsServer/null
+hips_order_min       = 0
+dataproduct_subtype  = color
+hipsgen_date         = 2019-05-07T10:55Z
+hipsgen_params       = out=/asd-volumes/sc1-asd-volume8/DSS/DSSColor UPDATE
+hipsgen_date_1       = 2024-07-22T14:13Z
+hipsgen_params_1     = order=5 region=3/357 in=https://alasky.cds.unistra.fr/DSS/DSSColor/ MIRROR

examples/index.html

@@ -36,7 +36,7 @@
         }
         if (searchParams.has('showCooGrid')) {
             const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                 enabled: b
             });
         }

examples/index_es.html

@@ -37,7 +37,7 @@
         }
         if (searchParams.has('showCooGrid')) {
             const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                 enabled: b
             });
         }

examples/index_umd.html

@@ -36,7 +36,7 @@
         }
         if (searchParams.has('showCooGrid')) {
             const b = searchParams.get('showCooGrid') === 'true';
-            aladin.view.setGridConfig({
+            aladin.setCooGrid({
                 enabled: b
             });
         }

jsdoc.json

@@ -0,0 +1,22 @@
+{
+    "plugins": [],
+    "recurseDepth": 10,
+    "source": {
+        "includePattern": ".+\\.js(doc|x)?$",
+        "excludePattern": "(^|\\/|\\\\)_"
+    },
+    "sourceType": "module",
+    "tags": {
+        "allowUnknownTags": true,
+        "dictionaries": ["jsdoc","closure"]
+    },
+    "templates": {
+        "cleverLinks": true,
+        "monospaceLinks": true
+    },
+    "opts": {
+        "readme": "./README.md",
+        "destination": "./docs/",
+        "tutorials": "./tutorials"
+    }
+}

package.json

@@ -2,7 +2,7 @@
   "homepage": "https://aladin.u-strasbg.fr/",
   "name": "aladin-lite",
   "type": "module",
-  "version": "3.3.1",
+  "version": "3.4.5",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",
@@ -33,16 +33,20 @@
   ],
   "scripts": {
     "wasm": "wasm-pack build ./src/core --target web --release --out-name core -- --features webgl2 -Z build-std=panic_abort,std -Z build-std-features=panic_immediate_abort ",
+    "wasm:dbg": "wasm-pack build --dev ./src/core --target web --out-name core -- --features=webgl2,dbg -Z build-std=panic_abort,std -Z build-std-features=panic_immediate_abort ",
     "predeploy": "npm run build && rm -rf aladin-lite*.tgz && npm pack",
     "deploy": "python3 deploy/deploy.py",
     "build": "npm run wasm && vite build && cp examples/index.html dist/index.html",
+    "build:dbg": "npm run wasm:dbg && vite build && cp examples/index.html dist/index.html",
     "dev": "npm run build && vite",
+    "dev:dbg": "npm run build:dbg && vite",
     "serve": "npm run dev",
+    "serve:dbg": "npm run dev:dbg",
     "preview": "vite preview",
     "test:build": "cd src/core && cargo test --release --features webgl2",
     "test:unit": "vitest run",
-    "doc": "jsdoc -d doc --readme README.md src/js && cp aladin-logo.png doc/",
-    "doc:dev": "npm run doc && open doc/index.html"
+    "doc": "jsdoc -c jsdoc.json src/js src/js/shapes && cp aladin-logo.png docs/",
+    "doc:dev": "npm run doc && open docs/index.html"
   },
   "devDependencies": {
     "happy-dom": "^10.11.0",
@@ -50,7 +54,7 @@
     "vite": "^4.3.8",
     "vite-plugin-css-injected-by-js": "^3.1.1",
     "vite-plugin-glsl": "^1.1.2",
-    "vite-plugin-top-level-await": "^1.3.1",
+    "vite-plugin-top-level-await": "^1.4.1",
     "vite-plugin-wasm": "^3.2.2",
     "vite-plugin-wasm-pack": "^0.1.12",
     "vitest": "^0.32.2"

src/core/Cargo.toml

@@ -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.3.1"
+version = "3.4.5-beta"
 authors = [ "baumannmatthieu0@gmail.com", "matthieu.baumann@astro.unistra.fr",]
 edition = "2018"
 
@@ -26,27 +26,37 @@ wasm-bindgen = "0.2.79"
 wasm-streams = "0.3.0"
 async-channel = "1.8.0"
 mapproj = "0.3.0"
-fitsrs = "0.2.9"
-wcs = "0.2.8"
+fitsrs = "0.2.11"
 colorgrad = "0.6.2"
-lyon = "1.0.1"
 
 [features]
 webgl1 = [ "al-core/webgl1", "al-api/webgl1", "web-sys/WebGlRenderingContext", "web-sys/AngleInstancedArrays", "web-sys/ExtSRgb", "web-sys/OesTextureFloat",]
 webgl2 = [ "al-core/webgl2", "al-api/webgl2", "web-sys/WebGl2RenderingContext", "web-sys/WebGlVertexArrayObject", "web-sys/ExtColorBufferFloat",]
+dbg = [ "dep:console_error_panic_hook",]
 
 [dev-dependencies]
 rand = "0.8"
 
+[build-dependencies]
+walkdir = "2.3.2"
+
+[dependencies.wcs]
+git = "https://github.com/cds-astro/wcs-rs"
+branch = "master"
+
+[dependencies.console_error_panic_hook]
+version = "0.1.7"
+optional = true
+
 [dependencies.healpix]
 package = "cdshealpix"
-git = "https://github.com/bmatthieu3/cds-healpix-rust"
-branch = "polygonIntersectVertices"
+git = "https://github.com/cds-astro/cds-healpix-rust"
+branch = "master"
 
 [dependencies.moclib]
 package = "moc"
 git = "https://github.com/bmatthieu3/cds-moc-rust"
-branch = "cellsWithUnidirectionalNeigs"
+branch = "overlap"
 
 [dependencies.serde]
 version = "^1.0.183"
@@ -69,15 +79,7 @@ default-features = false
 features = [ "jpeg", "png",]
 
 [profile.dev]
-opt-level = "z"
 debug = true
-debug-assertions = true
-overflow-checks = true
-lto = true
-panic = "unwind"
-incremental = true
-codegen-units = 256
-rpath = false
 
 [profile.release]
 opt-level = "z"

src/core/al-api/src/fov.rs

@@ -2,8 +2,7 @@ use wasm_bindgen::prelude::*;
 
 use serde::{Deserialize, Serialize};
 
-#[derive(Deserialize, Serialize)]
-#[derive(Clone)]
+#[derive(Deserialize, Serialize, Clone, Debug)]
 #[wasm_bindgen]
 pub struct CenteredFoV {
     /// Position of the field of view
@@ -12,4 +11,4 @@ pub struct CenteredFoV {
 
     /// Aperture
     pub fov: f64,
-}
+}

src/core/al-api/src/hips.rs

@@ -25,16 +25,6 @@ impl HiPSCfg {
     }
 }
 
-#[derive(Deserialize, Debug, Clone)]
-#[serde(rename_all = "camelCase")]
-pub struct FITSCfg {
-    /// Layer name
-    pub layer: String,
-    pub url: String,
-    /// Its color
-    pub meta: ImageMetadata,
-}
-
 use crate::coo_system::CooSystem;
 
 #[derive(Deserialize, Debug, Clone)]
@@ -47,6 +37,7 @@ pub struct HiPSProperties {
     tile_size: i32,
     formats: Vec<ImageExt>,
 
+    #[allow(unused)]
     is_planetary_body: Option<bool>,
 
     bitpix: Option<i32>,
@@ -58,7 +49,9 @@ pub struct HiPSProperties {
     hips_initial_dec: Option<f64>,
 
     // Parametrable by the user
+    #[allow(unused)]
     min_cutout: Option<f32>,
+    #[allow(unused)]
     max_cutout: Option<f32>,
 
     creator_did: String,

src/core/al-api/src/image.rs

@@ -3,16 +3,10 @@ use serde::{Deserialize, Serialize};
 use crate::fov::CenteredFoV;
 // This struct is intended to be returned
 // to the javascript to create a layer based on it
-#[derive(Deserialize, Serialize)]
-#[derive(Clone)]
+#[derive(Deserialize, Serialize, Clone)]
 pub struct ImageParams {
     pub centered_fov: CenteredFoV,
 
-    // a new layer
-    pub layer: String,
-    // and its url
-    pub url: String,
-
-    pub automatic_min_cut: f32,
-    pub automatic_max_cut: f32,
-}
+    pub min_cut: f32,
+    pub max_cut: f32,
+}

src/core/al-core/Cargo.toml

@@ -9,7 +9,7 @@ js-sys = "0.3.47"
 cgmath = "*"
 jpeg-decoder = "0.3.0"
 png = "0.17.6"
-fitsrs = "0.2.7"
+fitsrs = "0.2.10"
 al-api = { path = "../al-api" }
 serde = { version = "^1.0.59", features = ["derive"] }
 serde_json = "1.0"

src/core/al-core/src/convert.rs

@@ -0,0 +1,32 @@
+pub trait Cast<T>: Clone + Copy {
+    fn cast(self) -> T;
+}
+
+impl Cast<f32> for u8 {
+    fn cast(self) -> f32 {
+        self as f32
+    }
+}
+impl Cast<f32> for i16 {
+    fn cast(self) -> f32 {
+        self as f32
+    }
+}
+
+impl Cast<f32> for i32 {
+    fn cast(self) -> f32 {
+        self as f32
+    }
+}
+
+impl Cast<f32> for f32 {
+    fn cast(self) -> f32 {
+        self
+    }
+}
+
+impl Cast<f32> for f64 {
+    fn cast(self) -> f32 {
+        self as f32
+    }
+}

src/core/al-core/src/image/fits.rs

@@ -17,45 +17,34 @@ pub enum Data<'a> {
     I32(Cow<'a, [i32]>),
     F32(Cow<'a, [f32]>),
 }
+use fitsrs::{fits::Fits as FitsData, hdu::data::InMemData};
 use std::io::Cursor;
-use fitsrs::{
-    hdu::data::InMemData,
-    fits::Fits as FitsData,
-};
 
 impl<'a> Fits<'a> {
     pub fn from_byte_slice(bytes_reader: &'a mut Cursor<&[u8]>) -> Result<Self, JsValue> {
         let FitsData { hdu } = FitsData::from_reader(bytes_reader)
-            .map_err(|_| {
-                JsValue::from_str(&"Parsing fits error")
-            })?;
+            .map_err(|_| JsValue::from_str(&"Parsing fits error"))?;
 
         let header = hdu.get_header();
         let xtension = header.get_xtension();
-        let width = xtension.get_naxisn(1)
+        let width = xtension
+            .get_naxisn(1)
             .ok_or_else(|| JsValue::from_str("NAXIS1 not found in the fits"))?;
 
-        let height = xtension.get_naxisn(2)
+        let height = xtension
+            .get_naxisn(2)
             .ok_or_else(|| JsValue::from_str("NAXIS2 not found in the fits"))?;
-        
+
         let data = hdu.get_data();
         let data = match *data {
-            InMemData::U8(slice) => {
-                Data::U8(Cow::Borrowed(slice))
-            },
-            InMemData::I16(slice) => {
-                Data::I16(Cow::Borrowed(slice))
-            },
-            InMemData::I32(slice) => {
-                Data::I32(Cow::Borrowed(slice))
-            },
+            InMemData::U8(slice) => Data::U8(Cow::Borrowed(slice)),
+            InMemData::I16(slice) => Data::I16(Cow::Borrowed(slice)),
+            InMemData::I32(slice) => Data::I32(Cow::Borrowed(slice)),
             InMemData::I64(slice) => {
                 let data = slice.iter().map(|v| *v as i32).collect();
                 Data::I32(Cow::Owned(data))
-            },
-            InMemData::F32(slice) => {
-                Data::F32(Cow::Borrowed(slice))
-            },
+            }
+            InMemData::F32(slice) => Data::F32(Cow::Borrowed(slice)),
             InMemData::F64(slice) => {
                 let data = slice.iter().map(|v| *v as f32).collect();
                 Data::F32(Cow::Owned(data))
@@ -66,8 +55,8 @@ impl<'a> Fits<'a> {
             // Tile size
             size: Vector2::new(*width as i32, *height as i32),
 
-            // Allocation info of the layout            
-            data
+            // Allocation info of the layout
+            data,
         })
     }
 
@@ -121,14 +110,14 @@ impl<'a> Fits<'a> {
             // Tile size
             size: Vector2::new(*width as i32, *height as i32),
 
-            // Allocation info of the layout            
+            // Allocation info of the layout
             data
         })
     }
 }*/
 
-use crate::Texture2DArray;
 use crate::image::Image;
+use crate::Texture2DArray;
 impl Image for Fits<'_> {
     fn tex_sub_image_3d(
         &self,
@@ -138,7 +127,7 @@ impl Image for Fits<'_> {
         offset: &Vector3<i32>,
     ) -> Result<(), JsValue> {
         match &self.data {
-            Data::U8(data) => { 
+            Data::U8(data) => {
                 let view = unsafe { R8UI::view(&data) };
                 textures[offset.z as usize]
                     .bind()
@@ -150,7 +139,7 @@ impl Image for Fits<'_> {
                         Some(view.as_ref()),
                     );
             }
-            Data::I16(data) => { 
+            Data::I16(data) => {
                 let view = unsafe { R16I::view(&data) };
                 textures[offset.z as usize]
                     .bind()
@@ -162,7 +151,7 @@ impl Image for Fits<'_> {
                         Some(view.as_ref()),
                     );
             }
-            Data::I32(data) => { 
+            Data::I32(data) => {
                 let view = unsafe { R32I::view(&data) };
                 textures[offset.z as usize]
                     .bind()
@@ -174,7 +163,7 @@ impl Image for Fits<'_> {
                         Some(view.as_ref()),
                     );
             }
-            Data::F32(data) => { 
+            Data::F32(data) => {
                 let view = unsafe { R32F::view(&data) };
                 textures[offset.z as usize]
                     .bind()
@@ -192,8 +181,8 @@ impl Image for Fits<'_> {
     }
 }
 
-use wasm_bindgen::JsValue;
 use crate::image::format::ImageFormat;
+use wasm_bindgen::JsValue;
 
 pub trait FitsImageFormat: ImageFormat {
     const BITPIX: i8;
@@ -205,7 +194,7 @@ impl FitsImageFormat for R32F {
 }
 
 #[cfg(feature = "webgl2")]
-use crate::image::{R16I, R32I, R8UI, R64F};
+use crate::image::{R16I, R32I, R64F, R8UI};
 #[cfg(feature = "webgl2")]
 impl FitsImageFormat for R64F {
     const BITPIX: i8 = -64;

src/core/al-core/src/image/format.rs

@@ -16,6 +16,8 @@ pub trait ImageFormat {
     const INTERNAL_FORMAT: i32;
     const TYPE: u32;
 
+    const CHANNEL_TYPE: ChannelType;
+
     /// Creates a JS typed array which is a view into wasm's linear memory at the slice specified.
     /// This function returns a new typed array which is a view into wasm's memory. This view does not copy the underlying data.
     ///
@@ -42,9 +44,13 @@ impl ImageFormat for RGB8U {
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGB as i32;
     const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::RGB8U;
+
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         let mut decoder = jpeg::Decoder::new(raw_bytes);
-        let bytes = decoder.decode().map_err(|_| "Cannot decoder jpeg. This image may not be compressed.")?;
+        let bytes = decoder
+            .decode()
+            .map_err(|_| "Cannot decoder jpeg. This image may not be compressed.")?;
 
         Ok(Bytes::Owned(bytes))
     }
@@ -68,32 +74,13 @@ impl ImageFormat for RGBA8U {
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGBA as i32;
     const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
 
-    fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
-        let mut decoder = jpeg::Decoder::new(raw_bytes);
-        let bytes = decoder.decode().map_err(|_| "Cannot decoder png. This image may not be compressed.")?;
-
-        Ok(Bytes::Owned(bytes))
-    }
-
-    type ArrayBufferView = js_sys::Uint8Array;
-
-    unsafe fn view(s: &[<Self::P as Pixel>::Item]) -> Self::ArrayBufferView {
-        Self::ArrayBufferView::view(s)
-    }
-}
-#[cfg(feature = "webgl1")]
-impl ImageFormat for RGBA8U {
-    type P = [u8; 4];
-
-    const NUM_CHANNELS: usize = 4;
-
-    const FORMAT: u32 = WebGlRenderingCtx::RGBA as u32;
-    const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGBA as i32;
-    const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
+    const CHANNEL_TYPE: ChannelType = ChannelType::RGBA8U;
 
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         let mut decoder = jpeg::Decoder::new(raw_bytes);
-        let bytes = decoder.decode().map_err(|_| "Cannot decoder png. This image may not be compressed.")?;
+        let bytes = decoder
+            .decode()
+            .map_err(|_| "Cannot decoder png. This image may not be compressed.")?;
 
         Ok(Bytes::Owned(bytes))
     }
@@ -119,6 +106,8 @@ impl ImageFormat for RGBA32F {
     #[cfg(feature = "webgl1")]
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGBA as i32;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::RGBA32F;
+
     const TYPE: u32 = WebGlRenderingCtx::FLOAT;
 
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
@@ -145,6 +134,8 @@ impl ImageFormat for RGB32F {
     #[cfg(feature = "webgl1")]
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::RGB as i32;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::RGB32F;
+
     const TYPE: u32 = WebGlRenderingCtx::FLOAT;
 
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
@@ -177,6 +168,8 @@ impl ImageFormat for R32F {
 
     const TYPE: u32 = WebGlRenderingCtx::FLOAT;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::R32F;
+
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         Ok(Bytes::Borrowed(raw_bytes))
     }
@@ -188,7 +181,6 @@ impl ImageFormat for R32F {
     }
 }
 
-
 #[cfg(feature = "webgl2")]
 #[derive(Clone, Copy, Debug, Hash, PartialEq, Eq)]
 pub struct R64F;
@@ -210,6 +202,8 @@ impl ImageFormat for R64F {
 
     const TYPE: u32 = WebGlRenderingCtx::FLOAT;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::R64F;
+
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         Ok(Bytes::Borrowed(raw_bytes))
     }
@@ -234,6 +228,8 @@ impl ImageFormat for R8UI {
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::R8UI as i32;
     const TYPE: u32 = WebGlRenderingCtx::UNSIGNED_BYTE;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::R8UI;
+
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         Ok(Bytes::Borrowed(raw_bytes))
     }
@@ -257,6 +253,7 @@ impl ImageFormat for R16I {
     const FORMAT: u32 = WebGlRenderingCtx::RED_INTEGER as u32;
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::R16I as i32;
     const TYPE: u32 = WebGlRenderingCtx::SHORT;
+    const CHANNEL_TYPE: ChannelType = ChannelType::R16I;
 
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         Ok(Bytes::Borrowed(raw_bytes))
@@ -282,6 +279,8 @@ impl ImageFormat for R32I {
     const INTERNAL_FORMAT: i32 = WebGlRenderingCtx::R32I as i32;
     const TYPE: u32 = WebGlRenderingCtx::INT;
 
+    const CHANNEL_TYPE: ChannelType = ChannelType::R32I;
+
     fn decode(raw_bytes: &[u8]) -> Result<Bytes<'_>, &'static str> {
         Ok(Bytes::Borrowed(raw_bytes))
     }
@@ -310,6 +309,8 @@ pub enum ChannelType {
     R32I,
 }
 
+pub const NUM_CHANNELS: usize = 9;
+
 #[derive(Debug, Clone, Copy, Hash, Eq, PartialEq)]
 pub struct ImageFormatType {
     pub ext: ImageExt,
@@ -327,8 +328,11 @@ impl ImageFormatType {
 
     pub fn is_colored(&self) -> bool {
         match self.channel {
-            ChannelType::RGBA32F | ChannelType::RGB32F | ChannelType::RGBA8U | ChannelType::RGB8U => true,
-            _ => false
+            ChannelType::RGBA32F
+            | ChannelType::RGB32F
+            | ChannelType::RGBA8U
+            | ChannelType::RGB8U => true,
+            _ => false,
         }
     }
 }

src/core/al-core/src/lib.rs

@@ -1,9 +1,10 @@
+extern crate futures;
 extern crate jpeg_decoder as jpeg;
 extern crate png;
 extern crate serde_json;
-extern crate futures;
 extern crate wasm_streams;
 
+pub mod convert;
 pub mod image;
 mod object;
 pub mod shader;
@@ -17,8 +18,8 @@ pub mod colormap;
 pub use colormap::{Colormap, Colormaps};
 
 pub use texture::pixel;
-pub use texture::{Texture2D, Texture2DBound};
 pub use texture::Texture2DArray;
+pub use texture::{Texture2D, Texture2DBound};
 
 pub use webgl_ctx::WebGlContext;
 
@@ -36,12 +37,14 @@ pub use object::vertex_array_object::vao::{
 
 pub trait Abort {
     type Item;
-    fn unwrap_abort(self) -> Self::Item where Self: Sized;
+    fn unwrap_abort(self) -> Self::Item
+    where
+        Self: Sized;
 }
 
 impl<T> Abort for Option<T> {
     type Item = T;
-    
+
     #[inline]
     fn unwrap_abort(self) -> Self::Item {
         use std::process;

src/core/al-core/src/log.rs

@@ -23,30 +23,3 @@ pub fn console_warn(s: impl Into<JsValue>) {
 pub fn console_error(s: impl Into<JsValue>) {
     web_sys::console::error_1(&s.into());
 }
-
-#[macro_export]
-macro_rules! log {
-    // The pattern for a single `eval`
-    ($($arg:tt)*) => {
-        $( self::log(&format!("{:?}", $arg)); )*
-    };
-}
-
-#[macro_export]
-macro_rules! inforec {
-    // The pattern for a single `eval`
-    // Base case:
-    ($x:tt) => (format!("{:?}", $x));
-    // `$x` followed by at least one `$y,`
-    ($x:tt, $($y:tt),+) => {
-        // Call `find_min!` on the tail `$y`
-        ( format!( "{} {}", inforec!($x), inforec!($($y),+) ) );
-    }
-}
-
-#[macro_export]
-macro_rules! info {
-    ($($arg:tt),*) => {
-        self::log( &inforec!( $( $arg ),* ) );
-    };
-}

src/core/al-core/src/object/array_buffer.rs

@@ -5,6 +5,8 @@ use super::buffer_data::BufferDataStorage;
 
 pub trait VertexBufferObject {
     fn bind(&self);
+
+    #[allow(dead_code)]
     fn unbind(&self);
 }
 
@@ -45,7 +47,10 @@ pub trait VertexAttribPointerType: std::marker::Sized {
         usage: u32,
         data: B,
     ) -> WebGlBuffer {
-        let buffer = gl.create_buffer().ok_or("failed to create buffer").unwrap_abort();
+        let buffer = gl
+            .create_buffer()
+            .ok_or("failed to create buffer")
+            .unwrap_abort();
         // Bind the buffer
         gl.bind_buffer(WebGlRenderingCtx::ARRAY_BUFFER, Some(buffer.as_ref()));
 
@@ -311,8 +316,7 @@ impl VertexAttribPointerType for f32 {
 
         let len = data.len();
         let ptr = data.as_ptr() as u32 / 4;
-        Float32Array::new(&memory_buffer)
-            .subarray(ptr, ptr + len as u32)
+        Float32Array::new(&memory_buffer).subarray(ptr, ptr + len as u32)
     }
 
     fn buffer_sub_data_with_i32_and_array_buffer_view<'a, B: BufferDataStorage<'a, Self>>(

src/core/al-core/src/object/array_buffer_instanced.rs

@@ -6,6 +6,7 @@ use crate::webgl_ctx::WebGlContext;
 pub struct ArrayBufferInstanced {
     buffer: WebGlBuffer,
 
+    len: usize,
     num_packed_data: usize,
     offset_idx: u32,
 
@@ -39,7 +40,7 @@ impl ArrayBufferInstanced {
         offset_idx: u32,
         stride: usize,
         sizes: &[usize],
-        _offsets: &[usize],
+        offsets: &[usize],
         usage: u32,
         data: B,
     ) -> ArrayBufferInstanced {
@@ -49,29 +50,43 @@ impl ArrayBufferInstanced {
         let num_f32_in_buf = data.len() as i32;
 
         let num_instances = num_f32_in_buf / (num_f32_per_instance as i32);
+        let len = data.len();
 
-        let buffer = gl.create_buffer().ok_or("failed to create buffer").unwrap_abort();
+        let buffer = gl
+            .create_buffer()
+            .ok_or("failed to create buffer")
+            .unwrap_abort();
 
         // Bind the buffer
         gl.bind_buffer(WebGlRenderingCtx::ARRAY_BUFFER, Some(buffer.as_ref()));
         // Pass the vertices data to the buffer
         f32::buffer_data_with_array_buffer_view(gl, data, WebGlRenderingCtx::ARRAY_BUFFER, usage);
         // Link to the shader
-        let idx = offset_idx;
+        for (idx, (size, offset)) in sizes.iter().zip(offsets.iter()).enumerate() {
+            let idx = (idx as u32) + offset_idx;
 
-        f32::vertex_attrib_pointer_with_i32(gl, idx, *sizes.first().unwrap_abort() as i32, 0, 0);
-        gl.enable_vertex_attrib_array(idx);
+            f32::vertex_attrib_pointer_with_i32(
+                gl,
+                idx,
+                *size as i32,
+                stride as i32,
+                *offset as i32,
+            );
 
-        #[cfg(feature = "webgl2")]
-        gl.vertex_attrib_divisor(idx, 1);
-        #[cfg(feature = "webgl1")]
-        gl.ext.angles.vertex_attrib_divisor_angle(idx, 1);
+            gl.enable_vertex_attrib_array(idx);
+
+            #[cfg(feature = "webgl2")]
+            gl.vertex_attrib_divisor(idx, 1);
+            #[cfg(feature = "webgl1")]
+            gl.ext.angles.vertex_attrib_divisor_angle(idx, 1);
+        }
 
         let num_packed_data = sizes.len();
         let gl = gl.clone();
         // Returns an instance that keeps only the buffer
         ArrayBufferInstanced {
             buffer,
+            len,
             num_packed_data,
             offset_idx,
 
@@ -119,13 +134,30 @@ impl ArrayBufferInstanced {
         self.gl.disable_vertex_attrib_array(loc as u32);
     }
 
-    pub fn update<'a, B: BufferDataStorage<'a, f32>>(&self, buffer: B) {
+    pub fn update<'a, B: BufferDataStorage<'a, f32>>(&mut self, usage: u32, data: B) {
         self.bind();
-        f32::buffer_sub_data_with_i32_and_array_buffer_view(
+        if self.len >= data.len() {
+            f32::buffer_sub_data_with_i32_and_array_buffer_view(
+                &self.gl,
+                data,
+                WebGlRenderingCtx::ARRAY_BUFFER,
+            );
+        } else {
+            self.len = data.len();
+
+            f32::buffer_data_with_array_buffer_view(
+                &self.gl,
+                data,
+                WebGlRenderingCtx::ARRAY_BUFFER,
+                usage,
+            );
+        }
+
+        /*f32::buffer_sub_data_with_i32_and_array_buffer_view(
             &self.gl,
             buffer,
             WebGlRenderingCtx::ARRAY_BUFFER,
-        );
+        );*/
         /*self.gl.buffer_sub_data_with_i32_and_array_buffer_view(
             WebGlRenderingCtx::ARRAY_BUFFER,
             0,

src/core/al-core/src/object/buffer_data.rs

@@ -41,3 +41,20 @@ where
         self.0.as_ptr()
     }
 }
+
+impl<'a, T> BufferDataStorage<'a, T> for &'a [T]
+where
+    T: VertexAttribPointerType,
+{
+    fn get_slice(&self) -> &[T] {
+        self
+    }
+
+    fn len(&self) -> usize {
+        self.as_ref().len()
+    }
+
+    fn ptr(&self) -> *const T {
+        self.as_ptr()
+    }
+}

src/core/al-core/src/object/mod.rs

@@ -6,9 +6,6 @@ pub mod buffer_data;
 pub mod element_array_buffer;
 pub mod vertex_array_object;
 
-pub use array_buffer::ArrayBuffer;
-pub use array_buffer::VertexAttribPointerType;
-pub use framebuffer::FrameBufferObject;
 pub use vertex_array_object::vao::{
     ShaderVertexArrayObjectBound, ShaderVertexArrayObjectBoundRef, VertexArrayObject,
 };

src/core/al-core/src/object/vertex_array_object.rs

@@ -9,8 +9,8 @@ pub mod vao {
     use crate::object::element_array_buffer::ElementArrayBuffer;
 
     use crate::webgl_ctx::WebGlContext;
-    use std::collections::HashMap;
     use crate::Abort;
+    use std::collections::HashMap;
 
     pub struct VertexArrayObject {
         array_buffer: HashMap<&'static str, ArrayBuffer>,
@@ -88,7 +88,10 @@ pub mod vao {
         }*/
 
         pub fn num_elements(&self) -> usize {
-            self.element_array_buffer.as_ref().unwrap_abort().num_elements()
+            self.element_array_buffer
+                .as_ref()
+                .unwrap_abort()
+                .num_elements()
         }
 
         pub fn num_instances(&self) -> i32 {
@@ -143,13 +146,14 @@ pub mod vao {
         pub fn update_instanced_array<B: BufferDataStorage<'a, f32>>(
             &mut self,
             attr: &'static str,
+            usage: u32,
             array_data: B,
         ) -> &mut Self {
             self.vao
                 .array_buffer_instanced
                 .get_mut(attr)
                 .unwrap_abort()
-                .update(array_data);
+                .update(usage, array_data);
             self
         }
 
@@ -333,13 +337,14 @@ pub mod vao {
         pub fn update_instanced_array<B: BufferDataStorage<'a, f32>>(
             &mut self,
             attr: &'static str,
+            usage: u32,
             array_data: B,
         ) -> &mut Self {
             self.vao
                 .array_buffer_instanced
                 .get_mut(attr)
                 .unwrap_abort()
-                .update(array_data);
+                .update(usage, array_data);
             self
         }
 
@@ -444,7 +449,10 @@ pub mod vao {
         }*/
 
         pub fn num_elements(&self) -> usize {
-            self.element_array_buffer.as_ref().unwrap_abort().num_elements()
+            self.element_array_buffer
+                .as_ref()
+                .unwrap_abort()
+                .num_elements()
         }
 
         pub fn num_instances(&self) -> i32 {
@@ -694,13 +702,14 @@ pub mod vao {
         pub fn update_instanced_array<B: BufferDataStorage<'a, f32>>(
             &mut self,
             attr: &'static str,
+            usage: u32,
             array_data: B,
         ) -> &mut Self {
             self.vao
                 .array_buffer_instanced
                 .get_mut(attr)
                 .expect("cannot get attribute from the array buffer")
-                .update(array_data);
+                .update(usage, array_data);
 
             self
         }

src/core/al-core/src/shader.rs

@@ -1,8 +1,8 @@
-use web_sys::{WebGlProgram, WebGlShader, WebGlUniformLocation};
 use wasm_bindgen::JsValue;
+use web_sys::{WebGlProgram, WebGlShader, WebGlUniformLocation};
 
-use crate::Colormaps;
 use crate::webgl_ctx::WebGlRenderingCtx;
+use crate::Colormaps;
 fn compile_shader(
     gl: &WebGlContext,
     shader_type: u32,
@@ -289,17 +289,6 @@ impl UniformType for TransferFunction {
     }
 }
 
-/*use al_api::hips::GrayscaleParameter;
-impl SendUniforms for GrayscaleParameter {
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
-        shader
-            .attach_uniforms_from(&self.h)
-            .attach_uniform("min_value", &self.min_value)
-            .attach_uniform("max_value", &self.max_value);
-
-        shader
-    }
-}*/
 use al_api::hips::HiPSColor;
 use al_api::hips::ImageMetadata;
 
@@ -314,7 +303,7 @@ impl SendUniforms for ImageMetadata {
 }
 
 impl SendUniforms for HiPSColor {
-    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {     
+    fn attach_uniforms<'a>(&self, shader: &'a ShaderBound<'a>) -> &'a ShaderBound<'a> {
         let reversed = self.reversed as u8 as f32;
 
         shader
@@ -326,14 +315,17 @@ impl SendUniforms for HiPSColor {
             .attach_uniform("k_brightness", &self.k_brightness)
             .attach_uniform("k_contrast", &self.k_contrast)
             .attach_uniform("reversed", &reversed);
-    
+
         shader
     }
 }
 
-
 impl SendUniformsWithParams<Colormaps> for HiPSColor {
-    fn attach_uniforms_with_params<'a>(&self, shader: &'a ShaderBound<'a>, cmaps: &Colormaps) -> &'a ShaderBound<'a> {     
+    fn attach_uniforms_with_params<'a>(
+        &self,
+        shader: &'a ShaderBound<'a>,
+        cmaps: &Colormaps,
+    ) -> &'a ShaderBound<'a> {
         let reversed = self.reversed as u8 as f32;
 
         let cmap = cmaps.get(&self.cmap_name.as_ref());
@@ -347,7 +339,7 @@ impl SendUniformsWithParams<Colormaps> for HiPSColor {
             .attach_uniform("k_brightness", &self.k_brightness)
             .attach_uniform("k_contrast", &self.k_contrast)
             .attach_uniform("reversed", &reversed);
-    
+
         shader
     }
 }
@@ -375,7 +367,11 @@ impl<'a> ShaderBound<'a> {
         self
     }
 
-    pub fn attach_uniforms_with_params_from<P, T: SendUniformsWithParams<P>>(&'a self, t: &T, params: &P) -> &'a Self {
+    pub fn attach_uniforms_with_params_from<P, T: SendUniformsWithParams<P>>(
+        &'a self,
+        t: &T,
+        params: &P,
+    ) -> &'a Self {
         t.attach_uniforms_with_params(self, params);
 
         self
@@ -422,5 +418,9 @@ pub trait SendUniforms {
 }
 
 pub trait SendUniformsWithParams<T> {
-    fn attach_uniforms_with_params<'a>(&self, shader: &'a ShaderBound<'a>, params: &T) -> &'a ShaderBound<'a>;
+    fn attach_uniforms_with_params<'a>(
+        &self,
+        shader: &'a ShaderBound<'a>,
+        params: &T,
+    ) -> &'a ShaderBound<'a>;
 }

src/core/al-core/src/texture/mod.rs

@@ -180,6 +180,52 @@ impl Texture2D {
         Ok(texture)
     }
 
+    pub fn create_from_raw_bytes<F: ImageFormat>(
+        gl: &WebGlContext,
+        width: i32,
+        height: i32,
+        tex_params: &'static [(u32, u32)],
+        bytes: Option<&[u8]>,
+    ) -> Result<Texture2D, JsValue> {
+        let texture = gl.create_texture();
+
+        gl.bind_texture(WebGlRenderingCtx::TEXTURE_2D, texture.as_ref());
+
+        for (pname, param) in tex_params.iter() {
+            gl.tex_parameteri(WebGlRenderingCtx::TEXTURE_2D, *pname, *param as i32);
+        }
+
+        gl.tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(
+            WebGlRenderingCtx::TEXTURE_2D,
+            0,
+            F::INTERNAL_FORMAT,
+            width,
+            height,
+            0,
+            F::FORMAT,
+            F::TYPE,
+            bytes,
+        )
+        .expect("Texture 2D");
+
+        let gl = gl.clone();
+        let metadata = Some(Rc::new(RefCell::new(Texture2DMeta {
+            width: width as u32,
+            height: height as u32,
+            internal_format: F::INTERNAL_FORMAT,
+            format: F::FORMAT,
+            type_: F::TYPE,
+        })));
+
+        Ok(Texture2D {
+            texture,
+
+            gl,
+
+            metadata,
+        })
+    }
+
     pub fn create_empty_unsized(
         gl: &WebGlContext,
         tex_params: &'static [(u32, u32)],
@@ -591,10 +637,6 @@ impl<'a> Texture2DBoundMut<'a> {
         src_type: u32,
         pixels: Option<&[u8]>,
     ) {
-        //let Texture2DMeta {format, type_, ..} = self.texture_2d.metadata.unwrap_abort();
-        /*self.texture_2d
-        .gl
-        .pixel_storei(WebGlRenderingCtx::UNPACK_ALIGNMENT, 1);*/
         self.texture_2d
             .gl
             .tex_image_2d_with_i32_and_i32_and_i32_and_format_and_type_and_opt_u8_array(

src/core/al-core/src/texture/pixel.rs

@@ -4,13 +4,15 @@ use wasm_bindgen::JsValue;
 
 use crate::webgl_ctx::WebGlContext;
 pub trait Pixel:
-    AsRef<[Self::Item]>
-    + Default
-    + std::cmp::PartialEq
-    + std::fmt::Debug
-    + std::clone::Clone
+    AsRef<[Self::Item]> + Default + std::cmp::PartialEq + std::fmt::Debug + std::clone::Clone
 {
-    type Item: std::cmp::PartialOrd + Clone + Copy + std::fmt::Debug + cgmath::Zero;
+    type Item: std::cmp::PartialOrd
+        + Clone
+        + Copy
+        + std::fmt::Debug
+        + cgmath::Zero
+        + std::cmp::PartialEq
+        + crate::convert::Cast<f32>;
     type Container: ArrayBuffer<Item = Self::Item>;
 
     const BLACK: Self;
@@ -248,4 +250,4 @@ impl Pixel for [i32; 1] {
 
         Ok([pixels.to_vec()[0]])
     }
-}
+}

src/core/al-core/src/texture/texture_array.rs

@@ -27,12 +27,12 @@ impl Texture2DArray {
         tex_params: &'static [(u32, u32)],
     ) -> Result<Texture2DArray, JsValue> {
         let textures: Result<Vec<_>, _> = (0..num_slices)
-            .map(|_| {
-                Texture2D::create_empty_with_format::<F>(gl, width, height, tex_params)
-            })
+            .map(|_| Texture2D::create_empty_with_format::<F>(gl, width, height, tex_params))
             .collect();
 
-        Ok(Texture2DArray { textures: textures? })
+        Ok(Texture2DArray {
+            textures: textures?,
+        })
     }
 }
 

src/core/al-core/src/webgl_ctx.rs

@@ -40,14 +40,6 @@ impl WebGlContext {
         let context_options =
             js_sys::JSON::parse("{\"antialias\":false, \"preserveDrawingBuffer\": true}")?;
 
-        #[cfg(feature = "webgl1")]
-        let gl = Rc::new(
-            canvas
-                .get_context_with_context_options("webgl", context_options.as_ref())?
-                .unwrap_abort()
-                .dyn_into::<WebGlRenderingCtx>()
-                .unwrap_abort(),
-        );
         #[cfg(feature = "webgl2")]
         let gl = Rc::new(
             canvas
@@ -56,6 +48,9 @@ impl WebGlContext {
                 .dyn_into::<WebGlRenderingCtx>()
                 .unwrap_abort(),
         );
+        // https://webgl2fundamentals.org/webgl/lessons/webgl-data-textures.html
+        #[cfg(feature = "webgl2")]
+        gl.pixel_storei(WebGlRenderingCtx::UNPACK_ALIGNMENT, 1);
 
         #[cfg(feature = "webgl2")]
         {