From cedea781a1e168b7bd511f404317fb6e562c6ef7 Mon Sep 17 00:00:00 2001 From: bmatthieu3 Date: Mon, 29 Jul 2024 12:11:35 +0200 Subject: [PATCH] allow the user to define and use its own colormaps. Aladin.getListOfColormaps() and Aladin.addColormap new method. Solve #174 --- examples/al-save-colormap.html | 5 +++-- package.json | 2 +- src/core/al-core/src/colormap.rs | 3 ++- src/js/A.js | 4 ---- src/js/Aladin.js | 36 ++++++++++++++++++++++++++++++- src/js/ColorCfg.js | 8 +++---- src/js/View.js | 1 - src/js/events/ALEvent.js | 2 ++ src/js/gui/Box/HiPSSettingsBox.js | 24 ++++++--------------- 9 files changed, 53 insertions(+), 32 deletions(-) diff --git a/examples/al-save-colormap.html b/examples/al-save-colormap.html index f12ca75df..377239fd1 100644 --- a/examples/al-save-colormap.html +++ b/examples/al-save-colormap.html @@ -6,10 +6,9 @@
- + diff --git a/package.json b/package.json index 5c15bb008..446df0497 100644 --- 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 index 1a4d4a922..97a7f98a2 100644 --- 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 index 2b81fdcfd..17a17fb06 100644 --- 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 index 74616b05f..a1d446451 100644 --- 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 index 7f5e718be..5f8666625 100644 --- 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 index 042b527ed..d5e2ae10d 100644 --- 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 index 9bc728eec..ec5025943 100644 --- 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 index 6f6c744d9..380b1cdd1 100644 --- 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()}) + }); } } \ No newline at end of file