gitea-mirror/aladin-lite
1
0
Fork 0
mirror of https://github.com/cds-astro/aladin-lite.git synced 2025-12-12 07:40:26 -08:00
Code Issues Packages Projects Releases Wiki Activity

allow the user to define and use its own colormaps.

Browse Source 
Aladin.getListOfColormaps() and Aladin.addColormap new method. Solve #174
This commit is contained in:
bmatthieu3
2024-07-29 12:11:35 +02:00
parent d8ff8aa41e
commit cedea781a1
9 changed files with 53 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/al-save-colormap.html
View File

@@ -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>

2
package.json
View File

@@ -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",

3
src/core/al-core/src/colormap.rs
View File

@@ -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]
}
}

4
src/js/A.js
View File

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

36
src/js/Aladin.js
View File

@@ -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;

8
src/js/ColorCfg.js
View File

@@ -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;
})();

1
src/js/View.js
View File

@@ -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";

2
src/js/events/ALEvent.js
View File

@@ -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");

24
src/js/gui/Box/HiPSSettingsBox.js
View File

@@ -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()})
});
}
}