allow the user to define and use its own colormaps.

Aladin.getListOfColormaps() and Aladin.addColormap new method. Solve #174
cds-astro · Jul 29, 2024 · cedea78 · cedea78
1 parent d8ff8aa
commit cedea78
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 32 deletions.
diff --git a/examples/al-save-colormap.html b/examples/al-save-colormap.html
@@ -6,10 +6,9 @@
 <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';
-    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
@@ -27,6 +26,8 @@
         aladin.setImageLayer(survey2);
 
         aladin.removeHiPSFromFavorites(survey3);
+
+        aladin.addColormap('mycmap', ["lightblue", "red", "violet", "lightgreen"])
     });
 </script>
 

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "homepage": "https://aladin.u-strasbg.fr/",
   "name": "aladin-lite",
   "type": "module",
-  "version": "3.4.5",
+  "version": "3.4.6-beta",
   "description": "An astronomical HiPS visualizer in the browser",
   "author": "Thomas Boch and Matthieu Baumann",
   "license": "GPL-3",

diff --git a/src/core/al-core/src/colormap.rs b/src/core/al-core/src/colormap.rs
@@ -216,7 +216,8 @@ impl Colormaps {
         if let Some(id) = self.get_id(label).map(|id| *id) {
             &self.cmaps[id as usize]
         } else {
-            let id_greys = self.get_id(label).map(|id| *id).unwrap_abort();
+            crate::log::console_warn(&format!("{:?} is not a valid colormap, replaced with 'grayscale'.", label));
+            let id_greys = self.get_id("grayscale").map(|id| *id).unwrap_abort();
             &self.cmaps[id_greys as usize]
         }
     }

diff --git a/src/js/A.js b/src/js/A.js
@@ -954,10 +954,6 @@ A.box = function(options) {
     return new Box(options)
 }
 
-A.getAvailableListOfColormaps = function() {
-    return ColorCfg.COLORMAPS;
-};
-
 /**
  * Returns utils object
  * 

diff --git a/src/js/Aladin.js b/src/js/Aladin.js
@@ -961,7 +961,7 @@ export let Aladin = (function () {
         this.view.setProjection(projection);
 
         ALEvent.PROJECTION_CHANGED.dispatchedTo(this.aladinDiv, {
-            projection: projection,
+            projection,
         });
     };
 
@@ -2915,6 +2915,40 @@ aladin.displayFITS(
 
     Aladin.prototype.displayPNG = Aladin.prototype.displayJPG;
 
+    /**
+     * Add a custom colormap from a list of colors
+     *
+     * @memberof Aladin
+     * 
+     * @returns - The list of all the colormap labels
+     */
+    Aladin.prototype.getListOfColormaps = function() {
+        return this.view.wasm.getAvailableColormapList();
+    };
+
+    /**
+     * Add a custom colormap from a list of colors
+     *
+     * @memberof Aladin
+     * @param {string} label - The label of the colormap
+     * @param {string[]} colors - A list string colors
+     * 
+     * @example
+     * 
+     * aladin.addColormap('mycmap', ["lightblue", "red", "violet", "#ff00aaff"])
+     */
+    Aladin.prototype.addColormap = function(label, colors) {
+        colors = colors.map((label) => {
+            return new Color(label).toHex() + 'ff';
+        });
+
+        this.view.wasm.createCustomColormap(label, colors);
+
+        ALEvent.UPDATE_CMAP_LIST.dispatchedTo(this.aladinDiv, {
+            cmaps: this.getListOfColormaps()
+        });
+    };
+
     /*
     Aladin.prototype.setReduceDeformations = function (reduce) {
         this.reduceDeformations = reduce;

diff --git a/src/js/ColorCfg.js b/src/js/ColorCfg.js
@@ -176,12 +176,12 @@
         /// colormap
         // Make it case insensitive
         colormap = colormap.toLowerCase();
-        if (!ColorCfg.COLORMAPS.includes(colormap)) {
+        /*if (!ColorCfg.COLORMAPS.includes(colormap)) {
             console.warn("The colormap \'" + colormap + "\' is not supported. You should use one of the following: " + ColorCfg.COLORMAPS + "\n\'grayscale\' has been chosen by default.")
             // If the user specify a colormap that is not supported,
             // then set it to grayscale
             colormap = "grayscale";
-        }
+        }*/
 
         return colormap;
     }
@@ -227,7 +227,7 @@
         return [this.minCut, this.maxCut];
     };
 
-    ColorCfg.COLORMAPS = [
+    /*ColorCfg.COLORMAPS = [
         "blues",
         "cividis",
         "cubehelix",
@@ -251,7 +251,7 @@
         "red",
         "green",
         "blue"
-    ];
+    ];*/
 
     return ColorCfg;
  })();
diff --git a/src/js/View.js b/src/js/View.js
@@ -47,7 +47,6 @@ import { ObsCore } from "./vo/ObsCore.js";
 import { DefaultActionsForContextMenu } from "./DefaultActionsForContextMenu.js";
 import { Layout } from "./gui/Layout.js";
 import { SAMPActionButton } from "./gui/Button/SAMP.js";
-import { HiPSCache } from "./HiPSCache.js";
 import { ImageHiPS } from "./ImageHiPS.js";
 import { Image } from "./Image.js";
 

diff --git a/src/js/events/ALEvent.js b/src/js/events/ALEvent.js
@@ -45,6 +45,8 @@ export class ALEvent {
   static PROJECTION_CHANGED  = new ALEvent("AL:projection.changed");
   static FRAME_CHANGED  = new ALEvent("AL:frame.changed");
 
+  static UPDATE_CMAP_LIST  = new ALEvent("AL:cmap.updated");
+
   static POSITION_CHANGED  = new ALEvent("AL:position.changed");
   static ZOOM_CHANGED  = new ALEvent("AL:zoom.changed");
 

diff --git a/src/js/gui/Box/HiPSSettingsBox.js b/src/js/gui/Box/HiPSSettingsBox.js
@@ -226,7 +226,7 @@ import { ColorCfg } from "../../ColorCfg.js";
                 type: 'select',
                 name: 'cmap',
                 value: 'native',
-                options: ColorCfg.COLORMAPS,
+                options: aladin.getListOfColormaps(),
                 change: (e, cmapSelector) => {
                     self.options.layer.setColormap(e.target.value)
                 },
@@ -280,23 +280,6 @@ import { ColorCfg } from "../../ColorCfg.js";
         super.update(options)
     }
 
-    _updateCursors() {
-
-    }
-
-    _show(options) {
-        /*if (this.selector) {
-            this.selector._show();
-        }*/
-
-        super._show(options)
-    }
-
-    _hide() {
-
-        super._hide()
-    }
-
     _addListeners() {
         ALEvent.HIPS_LAYER_CHANGED.listenedBy(this.aladin.aladinDiv, (e) => {
             const hips = e.detail.layer;
@@ -325,6 +308,11 @@ import { ColorCfg } from "../../ColorCfg.js";
                 this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
             }
         });
+
+        ALEvent.UPDATE_CMAP_LIST.listenedBy(this.aladin.aladinDiv, (e) => {
+            let cmapSelector = this.colorSettingsContent.getInput('cmap');
+            cmapSelector.update({options: this.aladin.getListOfColormaps()})
+        });
     }
 }