Merge pull request #85 from cds-astro/background-color

Set background color api

examples/al-event-listeners.html

@@ -12,7 +12,7 @@
 
 <script type="text/javascript">
     A.init.then(() => {
-        var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12});
+        var aladin = A.aladin('#aladin-lite-div', {target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
         var cat = A.catalog({sourceSize: 20});
         aladin.addCatalog(cat);
         cat.addSources([A.source(83.784490, 09.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);

examples/al-mars.html

@@ -11,7 +11,7 @@
 <script type="text/javascript">
     let aladin;
     A.init.then(() => {
-        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true});
+        aladin = A.aladin('#aladin-lite-div', {target: '240 +10.65', cooFrame: 'j2000d', fov: 90, showFrame: false, showCooGrid: true, showLayersControl: false, showGotoControl: false, fullScreen: true, showContextMenu: true});
         var mars = aladin.createImageSurvey('Mars', 'Mars', 'https://alasky.u-strasbg.fr/Planets/Mars_Viking_MDIM21/', 'j2000', 5);
         aladin.setImageSurvey(mars);
         

src/js/Aladin.js

@@ -191,10 +191,17 @@ export let Aladin = (function () {
         // set different options
         this.view = new View(this, location, fovDiv, cooFrame, options.fov);
         this.cacheSurveys = new Map();
+
         // Stack GUI
         this.stack = new Stack(this.aladinDiv, this, this.view);
         this.coogrid = new CooGrid(this.aladinDiv, this, this.view);
 
+        // Background color
+        if (options.backgroundColor) {
+            this.backgroundColor = options.backgroundColor;
+            this.setBackgroundColor(this.backgroundColor)
+        }
+
         this.boxes.push(this.stack);
         this.boxes.push(this.coogrid);
 
@@ -496,6 +503,7 @@ export let Aladin = (function () {
         target: "0 +0",
         cooFrame: "J2000",
         fov: 60,
+        backgroundColor: "rgb(0, 0, 0)",
         showReticle: true,
         showZoomControl: true,
         showFullscreenControl: true,
@@ -1158,7 +1166,17 @@ export let Aladin = (function () {
         } else {
             color = rgb;
         }
-        this.wasm.setBackgroundColor(color);
+        this.backgroundColor = color;
+        // Once the wasm is ready, send the color to change it
+
+        ALEvent.AL_USE_WASM.dispatchedTo(document.body, {callback: (wasm) => {
+            wasm.setBackgroundColor(this.backgroundColor);
+            ALEvent.BACKGROUND_COLOR_CHANGED.dispatchedTo(this.aladinDiv, {color: this.backgroundColor});
+        }})
+    };
+
+    Aladin.prototype.getBackgroundColor = function() {
+        return this.backgroundColor;
     };
 
     // @api

src/js/URLBuilder.js

@@ -65,11 +65,9 @@ export let URLBuilder = (function() {
             }
 
             let url = 'https://vizier.unistra.fr/viz-bin/votable?-source=' + vizCatId + '&-c=' + encodeURIComponent(target)+ '&-out.max=' + maxNbSources + '&-c.rd=' + radiusDegrees;
-
-            // Option to tell if we want all the columns
-            if (options && options.hasOwnProperty('all') && options.all === true) {
-                url = url + '&-out.all';
-            }
+            
+            // request the `s_region` column usually found in ObsCore tables
+            url = url + '&-out.add=s_region';
 
             return url;
             //return 'https://vizier.unistra.fr/viz-bin/conesearch/' + vizCatId + '?ra=' + target.ra + '&dec=' + target.dec + '&sr=' + radiusDegrees;

src/js/events/ALEvent.js

@@ -35,6 +35,8 @@ export class ALEvent {
 
   static LOADING_STATE = new ALEvent("AL:Layer.loading");
 
+  static BACKGROUND_COLOR_CHANGED = new ALEvent("AL:BackgroundColor.changed")
+
   static COO_GRID_ENABLED  = new ALEvent("AL:cooGrid.enabled");
   static COO_GRID_DISABLED = new ALEvent("AL:cooGrid.disabled");
   static COO_GRID_UPDATED  = new ALEvent("AL:cooGrid.updated");

src/js/gui/Stack.js

@@ -33,7 +33,6 @@ import { Color } from "../Color.js";
 import { ALEvent } from "../events/ALEvent.js";
 import { CatalogSelector } from "./CatalogSelector.js";
 import { HiPSLayer } from "./HiPSLayer.js";
-import { Utils } from "../Utils.js";
 
 import $ from 'jquery';
 
@@ -47,13 +46,14 @@ export class Stack {
         this.mainDiv = document.createElement('div');
         this.mainDiv.style.display = 'none';
         this.mainDiv.classList.add('aladin-box', 'aladin-layerBox', 'aladin-cb-list');
+        this.backgroundColorInput = $('<input type="color">');
 
         this.aladinDiv = parentDiv;
         parentDiv.appendChild(this.mainDiv);
 
         this.imgLayers = new Map();
 
-        this.backgroundColor = '#6699ff';
+        this.backgroundColor = this.aladin.getBackgroundColor();
         let self = this;
 
         this.unselectAllLayers = () => {
@@ -283,15 +283,10 @@ export class Stack {
         layerBox.append('<div class="aladin-box-separator"></div>' +
         '<div class="aladin-label">Background color</div>');
 
-        let backgroundColorInput = $('<input type="color">');
-        layerBox.append(backgroundColorInput);
+        layerBox.append(this.backgroundColorInput);
 
-        // Set a default background color
-        backgroundColorInput.val(this.backgroundColor);
-        self.aladin.setBackgroundColor(Color.hexToRgb(this.backgroundColor));
-
-        backgroundColorInput.on('input', () => {
-            self.backgroundColor = backgroundColorInput.val();
+        this.backgroundColorInput.on('input', () => {
+            self.backgroundColor = this.backgroundColorInput.val();
             self.aladin.setBackgroundColor(Color.hexToRgb(self.backgroundColor));
         });
 
@@ -337,6 +332,16 @@ export class Stack {
         });
 
         // Events coming from the AL core
+        ALEvent.BACKGROUND_COLOR_CHANGED.listenedBy(this.aladin.aladinDiv, function (e) {
+            const color = e.detail.color;
+
+            let inputColor = self.mainDiv.querySelector('input[type="color"]');
+            let hexColor = Color.rgbToHex(color.r, color.g, color.b);
+            inputColor.value = hexColor;
+
+            self.backgroundColor = color;
+        });
+
         ALEvent.HIPS_LAYER_ADDED.listenedBy(this.aladin.aladinDiv, function (e) {
             const layer = e.detail.layer;
 

src/js/vo/ObsCore.js

@@ -1,4 +1,4 @@
-    // Copyright 2013 - UDS/CNRS
+// Copyright 2013 - UDS/CNRS
 // The Aladin Lite program is distributed under the terms
 // of the GNU General Public License version 3.
 //