add status box ui element

cds-astro · Dec 21, 2023 · 8b9cff9 · 8b9cff9
1 parent 5f7e621
commit 8b9cff9
Show file tree

Hide file tree

Showing 32 changed files with 352 additions and 137 deletions.
diff --git a/assets/icons/info.svg b/assets/icons/info.svg
diff --git a/examples/al-animation-CS-CDS-2022.html b/examples/al-animation-CS-CDS-2022.html
@@ -71,9 +71,9 @@
             aladin.setFoV(400)
             await delay(2000)
 
-            aladin.setProjection('HPX')
-            aladin.setFoV(400)
-            await delay(2000)
+            //aladin.setProjection('HPX')
+            //aladin.setFoV(400)
+            //await delay(2000)
 
             aladin.setProjection('AIT')
             aladin.setFoV(400)
@@ -326,7 +326,7 @@
 
             await delay(1000)
 
-            notify('Projection support:', 'Orthographic, Mercator, HEALPix, Aitoff', 6500)
+            notify('Projection support:', 'Orthographic, Mercator, Aitoff', 6500)
 
             await delay(1000)
 

diff --git a/examples/al-easy-access-simbad-ned.html b/examples/al-easy-access-simbad-ned.html
@@ -5,10 +5,9 @@
 <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';
-  let aladin;
   A.init.then(() => {
       // Start up Aladin Lite
       aladin = A.aladin('#aladin-lite-div', {
@@ -20,6 +19,7 @@
         showLayersControl: false,
         showSimbadPointerControl: false,
         showShareControl: true,
+        showStatusBar: true,
       });
 
       aladin.addCatalog(A.catalogFromSimbad('09 55 52.4 +69 40 47', 0.1, {onClick: 'showTable', limit: 1000}));

diff --git a/src/core/src/app.rs b/src/core/src/app.rs
@@ -486,9 +486,12 @@ impl App {
 
     pub(crate) fn add_moc(
         &mut self,
-        cfg: al_api::moc::MOC,
+        mut cfg: al_api::moc::MOC,
         moc: HEALPixCoverage,
     ) -> Result<(), JsValue> {
+        // change the moc thickness
+        cfg.line_width = (cfg.line_width + 0.5) * 2.0 / self.camera.get_width();
+
         self.moc
             .push_back(moc, cfg, &mut self.camera, &self.projection);
         self.request_redraw = true;
@@ -1226,7 +1229,6 @@ impl App {
         // Recompute the ndc_to_clip
         self.camera.set_projection(&self.projection);
 
-
         self.request_for_new_tiles = true;
         self.request_redraw = true;
 

diff --git a/src/core/src/renderable/coverage/moc.rs b/src/core/src/renderable/coverage/moc.rs
@@ -363,8 +363,6 @@ impl MOCIntern {
         match self.mode {
             RenderModeType::Perimeter { thickness, color }
             | RenderModeType::Edge { thickness, color } => {
-                let thickness = (thickness + 0.5) * 2.0 / camera.get_width();
-
                 rasterizer.add_stroke_paths(
                     paths_iter,
                     thickness,

diff --git a/src/css/aladin.css b/src/css/aladin.css
@@ -639,6 +639,23 @@ canvas {
     display: inline-block;
 }
 
+.aladin-img {
+    object-fit: 'contain';
+    vertical-align: 'middle';
+}
+
+@keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+}
+.rotating {
+    animation: rotating 2s linear infinite;
+}
+
 .aladin-toolbar {
     display: flex;
     align-items: center;
@@ -700,7 +717,7 @@ canvas {
 
 .aladin-vertical-list {
     display: flex;
-    align-items: center; 
+    align-items: flex-end; 
     list-style: none;
     flex-direction: column;
 }
@@ -856,18 +873,12 @@ canvas {
     width: 100%;
 }
 
-.aladin-layer-label {
-	padding: 0 4px 0 4px;
-	color: #ddd;
-    border-radius: 8px;
-    cursor: pointer;
-    user-select: none;
-
+.aladin-status-bar-message {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
-    max-width: 150px;
+    max-width: 40vw;
 }
 
 .aladin-sp-title a {

diff --git a/src/js/A.js b/src/js/A.js
@@ -303,7 +303,7 @@ A.catalog = function (options) {
 A.catalogFromURL = function (url, options, successCallback, errorCallback, useProxy) {
     options.url = url;
     var catalog = A.catalog(options);
-
+console.log(options)
     const processVOTable = function (table) {
         let {sources, footprints, fields, type} = table;
         catalog.setFields(fields);
@@ -517,33 +517,4 @@ A.init = (async () => {
     }
 })();
 
-/**
- * Gives to the user an entry point to the WebAssembly API 
- * This should not be used. Prefer calling the JS API instead
- *
- * @function
- * @name A.queryWasmAPI
- * @memberof A
- * @async
- * 
- * @param {Function} callback - A callback with the wasm object as parameter
- *
- * @throws {string} Throws an error if WebGL2 is not supported by the browser.
- *
- * @example
- * // Usage example:
- * A.queryWasmAPI((wasm) => {
- *      let vertices = wasm.HEALPixVertices(8, [0, 1, 2])
- * })
- */
-A.queryWasmAPI = function(callback) {
-    (async () => {
-        await A.init;
-
-        if (Aladin.wasmLibs.core) {
-            callback(Aladin.wasmLibs.core)
-        }        
-    })();
-};
-
 export default A;
diff --git a/src/js/Aladin.js b/src/js/Aladin.js
@@ -62,6 +62,7 @@ import { Input } from "./gui/Widgets/Input.js";
 
 import A from "./A.js";
 import { SnapshotActionButton } from "./gui/Button/Snapshot.js";
+import { StatusBarBox } from "./gui/Box/StatusBarBox.js";
 /**
  * @typedef {Object} AladinOptions
  * @description Options for configuring the Aladin Lite instance.
@@ -356,7 +357,7 @@ export let Aladin = (function () {
 
         ////////////////////////////////////////////////////
         let menu = new Menu({
-            direction: 'horizontal',
+            direction: 'vertical',
             position: {
                 anchor: 'right top'
             }
@@ -460,6 +461,11 @@ export let Aladin = (function () {
 
             this.addUI(zoomControlToolbar)
         }
+
+        // Status bar
+        if (options.showStatusBar) {
+            this.statusBar = new StatusBarBox(this);
+        }
     }
 
     /**** CONSTANTS ****/
@@ -498,6 +504,7 @@ export let Aladin = (function () {
 
         // Other UI elements
         showContextMenu: false,
+        showStatusBar: false,
         // Internal
         showReticle: true,
         showCatalog: true, // TODO: still used ??

diff --git a/src/js/AladinUtils.js b/src/js/AladinUtils.js
@@ -98,7 +98,7 @@ export let AladinUtils = {
              * @param {number | number[]} lon - Longitude or an array of longitudes.
              * @param {number | number[]} lat - Latitude or an array of latitudes.
              * @throws {string} Throws an error if A.init is not called first.
-             * @returns {number | number[]} ipix - Pixel index or an array of pixel indices.
+             * @returns {number[]} ipix - Pixel index or an array of pixel indices.
              */
             ang2pix: function(nside, lon, lat) {
                 let wasm = Aladin.wasmLibs.core;
@@ -129,7 +129,7 @@ export let AladinUtils = {
              * @param {number | number[]} ipix - Pixel index or an array of pixel indices.
              *
              * @throws {string} Throws an error if A.init is not called first.
-             * @returns {LonLat | LonLat[]} lonlat - Longitude and latitude or an array of longitudes and latitudes.
+             * @returns {LonLat[]} lonlat - Longitude and latitude or an array of longitudes and latitudes.
              */
             pix2ang: function(nside, ipix) {
                 let wasm = Aladin.wasmLibs.core;

diff --git a/src/js/Catalog.js b/src/js/Catalog.js
@@ -438,7 +438,7 @@ export let Catalog = (function() {
             errorCallback,
             useProxy,
             raField,
-            decField
+            decField,
         )
     };
 

diff --git a/src/js/Circle.js b/src/js/Circle.js
@@ -157,7 +157,7 @@ export let Circle = (function() {
         }
         noStroke = noStroke===true || false;
 
-        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view);
+        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view.aladin);
         if (!centerXyview) {
             // the center goes out of the projection
             // we do not draw it
@@ -179,7 +179,7 @@ export let Circle = (function() {
                 ra = this.centerRaDec[0] + cardDirRa * this.radiusDegrees;
                 dec = this.centerRaDec[1] + cardDirDec * this.radiusDegrees;
 
-                vertOnCircle = AladinUtils.radecToViewXy(ra, dec, view);
+                vertOnCircle = AladinUtils.radecToViewXy(ra, dec, view.aladin);
 
                 if (vertOnCircle) {
                     dx = vertOnCircle[0] - this.center.x;

diff --git a/src/js/Ellipse.js b/src/js/Ellipse.js
@@ -175,15 +175,15 @@ export let Ellipse = (function() {
             return;
         }
 
-        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view);
+        var centerXyview = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1], view.aladin);
         if (!centerXyview) {
             // the center goes out of the projection
             // we do not draw it
             return;
         }
 
-        let circlePtXyViewRa = AladinUtils.radecToViewXy(this.centerRaDec[0] + this.radiusXDegrees, this.centerRaDec[1], view);
-        let circlePtXyViewDec = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1] + this.radiusYDegrees, view);
+        let circlePtXyViewRa = AladinUtils.radecToViewXy(this.centerRaDec[0] + this.radiusXDegrees, this.centerRaDec[1], view.aladin);
+        let circlePtXyViewDec = AladinUtils.radecToViewXy(this.centerRaDec[0], this.centerRaDec[1] + this.radiusYDegrees, view.aladin);
 
         if (!circlePtXyViewRa || !circlePtXyViewDec) {
             // the circle border goes out of the projection

diff --git a/src/js/Footprint.js b/src/js/Footprint.js
@@ -150,7 +150,7 @@ export let Footprint= (function() {
                     y: s.y,
                 };
             } else {
-                var xy = AladinUtils.radecToViewXy(s.ra, s.dec, view);
+                var xy = AladinUtils.radecToViewXy(s.ra, s.dec, view.aladin);
                 if (!xy) {
                     return false;
                 }

diff --git a/src/js/ImageFITS.js b/src/js/ImageFITS.js
@@ -215,7 +215,7 @@ export let ImageFITS = (function () {
 
             return self;
         }).catch((e) => {
-            window.alert(e + ". See the console for more logging details. It may be possible CORS headers have not been set in the server where you want to download the file. If it is the case, try to manually download the FITS file first and then open it into aladin lite (e.g. by a drag and drop)")
+            window.alert(e + ". See the javascript console for more logging details.")
 
             if (self.errorCallback) {
                 self.errorCallback()
@@ -246,6 +246,15 @@ export let ImageFITS = (function () {
         return false;
     }
 
+    // @api
+    ImageFITS.prototype.focusOn = function () {
+        // ensure the fits have been parsed
+        if (this.added) {
+            this.view.aladin.gotoRaDec(this.ra, this.dec);
+            this.view.aladin.setFoV(this.fov);
+        }
+    };
+
     // @oldapi
     ImageFITS.prototype.setAlpha = ImageFITS.prototype.setOpacity;
 

diff --git a/src/js/PlanetaryFeaturesNameResolver.js b/src/js/PlanetaryFeaturesNameResolver.js
@@ -59,6 +59,7 @@ export let PlanetaryFeaturesNameResolver = (function() {
 
         Utils.fetch({
             url: url ,
+            desc: "Resolving planet name: " + featureName,
             data: {"identifier": featureName, 'body': body, 'threshold': 0.7, 'format': 'csv'},
             method: 'GET',
             dataType: 'text',

diff --git a/src/js/Polyline.js b/src/js/Polyline.js
@@ -43,16 +43,16 @@ import { ProjectionEnum } from "./ProjectionEnum.js";
 export let Polyline= (function() {
     function _calculateMag2ForNoSinProjections(line, view) {
         // check if the line is too big (in the clip space) to be drawn
-        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
-        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
+        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view.aladin);
+        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view.aladin);
 
         const mag2 = (x1 - x2)*(x1 - x2) + (y1 - y2)*(y1 - y2);
         return mag2;
     }
 
     function _isAcrossCollignonZoneForHpxProjection(line, view) {
-        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view);
-        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view);
+        const [x1, y1] = AladinUtils.viewXyToClipXy(line.x1, line.y1, view.aladin);
+        const [x2, y2] = AladinUtils.viewXyToClipXy(line.x2, line.y2, view.aladin);
 
         // x, y, between -1 and 1
         let triIdxCollignionZone = function(x, y) {
@@ -231,7 +231,7 @@ export let Polyline= (function() {
         let ymax = Number.NEGATIVE_INFINITY;
 
         for (var k=0; k<len; k++) {
-            var xyview = AladinUtils.radecToViewXy(this.radecArray[k][0], this.radecArray[k][1], view);
+            var xyview = AladinUtils.radecToViewXy(this.radecArray[k][0], this.radecArray[k][1], view.aladin);
             if (!xyview) {
                 return;
             }
@@ -397,7 +397,7 @@ export let Polyline= (function() {
 
         let pointXY = [];
         for (var j = 0; j < this.radecArray.length; j++) {
-            var xy = AladinUtils.radecToViewXy(this.radecArray[j][0], this.radecArray[j][1], view);
+            var xy = AladinUtils.radecToViewXy(this.radecArray[j][0], this.radecArray[j][1], view.aladin);
             if (!xy) {
                 return false;
             }

diff --git a/src/js/ProgressiveCat.js b/src/js/ProgressiveCat.js
@@ -266,6 +266,7 @@ export let ProgressiveCat = (function() {
         _loadAllskyNewMethod: function() {
             var self = this;
             Utils.fetch({
+                desc: "Loading allsky tiles of: " + self.name,
                 url: self.rootUrl + '/' + 'Norder1/Allsky.tsv',
                 method: 'GET',
                 success: function(tsv) {
@@ -282,6 +283,7 @@ export let ProgressiveCat = (function() {
             });
 
             Utils.fetch({
+                desc: "Loading allsky order 2 tiles of: " + self.name,
                 url: self.rootUrl + '/' + 'Norder2/Allsky.tsv',
                 method: 'GET',
                 success: function(tsv) {
@@ -308,6 +310,7 @@ export let ProgressiveCat = (function() {
         _loadLevel2Sources: function() {
             var self = this;
             Utils.fetch({
+                desc: "Loading level 2 sources of: " + self.name,
                 url: self.rootUrl + '/' + 'Norder2/Allsky.xml',
                 method: 'GET',
                 success: function(text) {
@@ -329,6 +332,7 @@ export let ProgressiveCat = (function() {
         _loadLevel3Sources: function() {
             var self = this;
             Utils.fetch({
+                desc: "Loading level 3 sources of: " + self.name,
                 url: self.rootUrl + '/' + 'Norder3/Allsky.xml',
                 method: 'GET',
                 success: function(text) {
@@ -555,6 +559,7 @@ export let ProgressiveCat = (function() {
                             */
                             // ATTENTIOn : je passe en JSON direct, car je n'arrive pas a choper les 404 en JSONP
                             url: self.getTileURL(norder, ipix),
+                            desc: "Get tile .tsv " + norder + ' ' + ipix + ' of ' + self.name,
                             method: 'GET',
                             //dataType: 'jsonp',
                             success: function(tsv) {