Skip to content

Commit

Permalink
fix issue #234
Browse files Browse the repository at this point in the history
  • Loading branch information
@bmatthieu3
bmatthieu3 committed Feb 28, 2025
1 parent 35f6037 commit c2dd66c
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 89 deletions.
38 changes: 7 additions & 31 deletions src/js/ColorCfg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@

// Colormap config options
this.colormap = (options && options.colormap) || "native";
this.colormap = formatColormap(this.colormap);
this.colormap = this.colormap.toLowerCase();

this.stretch = (options && options.stretch) || "linear";
this.stretch = this.stretch.toLowerCase();
Expand Down Expand Up @@ -102,8 +102,7 @@
}

ColorCfg.prototype.setOptions = function(options) {
if (options.colormap)
this.setColormap(options.colormap, options)
this.setColormap(options.colormap, options)

this.setCuts(options.minCut, options.maxCut)

Expand Down Expand Up @@ -207,43 +206,20 @@
return this.additiveBlending;
};

var formatColormap = function(colormap) {
/// colormap
// Make it case insensitive
colormap = colormap.toLowerCase();
/*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;
}

// @api
// Optional arguments,
ColorCfg.prototype.setColormap = function(colormap = "native", options) {
if (colormap == null || colormap == undefined)
return;

ColorCfg.prototype.setColormap = function(colormap, options) {
/// colormap
// Make it case insensitive
let cmap = formatColormap(colormap);
this.colormap = (colormap && colormap.toLowerCase()) || this.colormap;

/// stretch
let stretch = (options && options.stretch) || this.stretch || "linear";
stretch = stretch.toLowerCase();
this.stretch = stretch.toLowerCase()

/// reversed
let reversed = false;
if (options && options.reversed === true) {
reversed = true;
if (options && options.reversed !== undefined) {
this.reversed = options.reversed;
}

this.colormap = cmap;
this.stretch = stretch;
this.reversed = reversed;
}

// @api
Expand Down
9 changes: 8 additions & 1 deletion src/js/HiPS.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -604,7 +604,8 @@ export let HiPS = (function () {
*
* @memberof HiPS
*
* @param {string} [colormap="grayscale"] - The colormap label to use. See {@link https://matplotlib.org/stable/users/explain/colors/colormaps.html|here} for more info about colormaps.
* @param {string} [colormap] - The colormap label to use. See {@link https://matplotlib.org/stable/users/explain/colors/colormaps.html|here} for more info about colormaps.
* If null or undefined, the colormap type is not changed.
* Possible values are:
* <br>"blues"
* <br>"cividis"
Expand Down Expand Up @@ -765,6 +766,12 @@ export let HiPS = (function () {
*/
HiPS.prototype.setOptions = function(options) {
this.colorCfg.setOptions(options);

// FIXME, change api of setColormap to take an option object having a name field
if (options.colormap == null || options.colormap == undefined) {
delete options.colormap;
}

this.options = {...this.options, ...options};

this._updateMetadata();
Expand Down
110 changes: 55 additions & 55 deletions src/js/gui/Box/HiPSSettingsBox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ import { Form } from "../Widgets/Form.js";
monochrome: true,
url: luminosityIconUrl
},
tooltip: {content: 'Luminosity sliders', position: {direction: 'bottom'}},
tooltip: {content: 'Contrast', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({
layout: [self.selector, self.luminositySettingsContent]
Expand All @@ -63,7 +63,7 @@ import { Form } from "../Widgets/Form.js";
monochrome: true,
url: opacityIconUrl
},
tooltip: {content: 'Opacity slider', position: {direction: 'bottom'}},
tooltip: {content: 'Opacity', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({layout: [self.selector, self.opacitySettingsContent]});
self.update({content})
Expand All @@ -86,7 +86,7 @@ import { Form } from "../Widgets/Form.js";
monochrome: true,
url: pixelHistIconUrl
},
tooltip: {content: 'Pixel cutouts', position: {direction: 'bottom'}},
tooltip: {content: 'Cutouts', position: {direction: 'bottom'}},
action: (e) => {
const content = Layout.vertical({layout: [self.selector, self.pixelSettingsContent]});
self.update({content})
Expand Down Expand Up @@ -236,15 +236,30 @@ import { Form } from "../Widgets/Form.js";

let colorSettingsContent = new Form({
subInputs: [{
label: 'colormap:',
type: 'select',
name: 'cmap',
value: 'native',
options: aladin.getListOfColormaps(),
change: (e, cmapSelector) => {
self.options.layer.setColormap(e.target.value)
label: 'colormap:',
type: 'select',
name: 'cmap',
value: 'native',
options: aladin.getListOfColormaps(),
change: (e) => {
self.options.layer.setColormap(e.target.value)
},
},
}]
{
label: 'reverse:',
type: 'checkbox',
name: 'reverse',
cssStyle: {
// so that it takes as much space as it can
flex: "0 0 1",
},
checked: false,
change: (e) => {
let checked = colorSettingsContent.getInput("reverse").checked
self.options.layer.setColormap(null, {reversed: checked})
}
},
]
});

super({
Expand All @@ -265,31 +280,37 @@ import { Form } from "../Widgets/Form.js";
this.luminositySettingsContent = luminositySettingsContent;
}

update(options) {
if (options.layer) {
let hips = options.layer;
let colorCfg = hips.getColorCfg();
let stretch = colorCfg.stretch;
let colormap = colorCfg.getColormap();
_update(layer) {
let colorCfg = layer.getColorCfg();
let stretch = colorCfg.stretch;
let colormap = colorCfg.getColormap();
let reversed = colorCfg.getReversed();

let [minCut, maxCut] = colorCfg.getCuts();
this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
this.pixelSettingsContent.set('stretch', stretch)
let fmtInput = this.pixelSettingsContent.getInput('fmt')
let [minCut, maxCut] = colorCfg.getCuts();
this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
this.pixelSettingsContent.set('stretch', stretch)
let fmtInput = this.pixelSettingsContent.getInput('fmt')

fmtInput.innerHTML = '';
for (const option of layer.formats) {
fmtInput.innerHTML += "<option>" + option + "</option>";
}
fmtInput.value = layer.imgFormat;

this.colorSettingsContent.set('cmap', colormap);
this.colorSettingsContent.set('reverse', reversed);

fmtInput.innerHTML = '';
for (const option of hips.formats) {
fmtInput.innerHTML += "<option>" + option + "</option>";
}
fmtInput.value = hips.imgFormat;
this.opacitySettingsContent.set('opacity', layer.getOpacity());
this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
}

this.colorSettingsContent.set('cmap', colormap);
this.opacitySettingsContent.set('opacity', hips.getOpacity());
this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
update(options) {
if (options.layer) {
this._update(options.layer)
}

super.update(options)
Expand All @@ -300,28 +321,7 @@ import { Form } from "../Widgets/Form.js";
const hips = e.detail.layer;
let selectedLayer = this.options.layer;
if (selectedLayer && hips.layer === selectedLayer.layer) {
let colorCfg = hips.getColorCfg();
let stretch = colorCfg.stretch;
let colormap = colorCfg.getColormap();

let [minCut, maxCut] = colorCfg.getCuts();
this.pixelSettingsContent.set('mincut', +minCut.toFixed(4))
this.pixelSettingsContent.set('maxcut', +maxCut.toFixed(4))
this.pixelSettingsContent.set('stretch', stretch)
let fmtInput = this.pixelSettingsContent.getInput('fmt')

fmtInput.innerHTML = '';
for (const option of hips.formats) {
fmtInput.innerHTML += "<option>" + option + "</option>";
}
fmtInput.value = hips.imgFormat;

this.colorSettingsContent.set('cmap', colormap);
this.opacitySettingsContent.set('opacity', hips.getOpacity());
this.luminositySettingsContent.set('brightness', colorCfg.getBrightness());
this.luminositySettingsContent.set('contrast', colorCfg.getContrast());
this.luminositySettingsContent.set('gamma', colorCfg.getGamma());
this.luminositySettingsContent.set('saturation', colorCfg.getSaturation());
this._update(hips)
}
});

Expand Down
6 changes: 4 additions & 2 deletions src/js/gui/Widgets/Input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,11 @@ export class Input extends DOMElement {

this.el.checked = this.options.checked;

if (this.options.click) {
// for checkbox widgets, we authorize calling the callback name click or change
let action = this.options.click || this.options.change;
if (action) {
this.el.removeEventListener('click', this.action);
this.action = this.options.click;
this.action = action;

this.el.addEventListener('click', this.action);
}
Expand Down

0 comments on commit c2dd66c

Please sign in to comment.