catalog selection colormap + global opacity

dist/index-color-composite.html

@@ -29,10 +29,8 @@
 
 <div id="aladin-lite-div" style="width: 95vw; height: 70vh"></div>
 
-<input id="showGrid" type="checkbox">
-<label for="showGrid">Show grid</label>
-
 <div id="controls" style="display: flex;">
+<!-- HiPSes control box -->
 <table class="box">
 <tr>
     <td><input type="color" id="color_c1" value="#ff0000"></td><td><input type="color" id="color_c2" value="#00ff00"></td><td><input type="color" id="color_c3" value="#0000ff"></td><td><input type="color" id="color_c4" value="#ffffff"></td>
@@ -164,10 +162,15 @@
 </tr>
 </table>
 <div class="box" style="border: 1px solid;">
-    <label for="c5_cat">Catalog selection</label>
-
+    <!-- Catalog control box -->
+    <label for="c5_cat">Catalog Search</label>
     <input id="c5_cat" style="width: 50%;" />
     <br />
+    <label for="opacity_cat">Opacity</label>
+    <input id="opacity_cat" style="vertical-align: middle; width:10vw;" step="0.02" min="0" max="1.0" type="range" value="1.0" />
+
+    <input id="opacity_cat" style="width: 50%;" />
+    <br />
     <label for="colormap_cat">Colormap</label>
     <select id="colormap_cat">
       <option value="BlackWhiteLinear">BlackWhiteLinear</option>
@@ -179,6 +182,11 @@
     </select>
     <p id="loading"></p>
 </div>
+<div class="box">
+    <!-- Grid control box -->
+    <input id="showGrid" type="checkbox">
+    <label for="showGrid">Show grid</label>
+</div>
 
 </div>
 
@@ -288,7 +296,7 @@ async function loadCatalog(catalog_id, colormap) {
     let table_obs_id = catalog_id.substring(4);
     retrieveCatalog(table_obs_id, [pos_ra_column_name, pos_dec_column_name/*, phot_mag_column_name, parallax_column_name*/])
         .then(sources => {
-            aladin.webglAPI.addCatalog("Test", sources, colormap);
+            aladin.webglAPI.addCatalog("cat1", sources, colormap);
         });
 }
 
@@ -649,7 +657,6 @@ function update() {
         return;
     }
 
-    console.log(hipsComponents);
     aladin.webglAPI.setCompositeHiPS({hipses: hipsComponents})
 
     // aladin.web...
@@ -688,18 +695,26 @@ document.querySelector('#showGrid').addEventListener('change', function(e) {
         aladin.webglAPI.disableGrid();
     }
 });
+document.querySelector('#colormap_cat').addEventListener('change', function(e) {
+    let value = document.getElementById("colormap_cat").value;
+    console.log(value);
+    aladin.webglAPI.setCatalogColormap("cat1", value);
+});
+document.querySelector('#opacity_cat').addEventListener('input', function(e) {
+    let value = document.getElementById("opacity_cat").value;
+    console.log(value);
+    aladin.webglAPI.setCatalogOpacity("cat1", value);
+});
+// catalog colormap
+// show grid
 
 
-
-    A.init.then(() => {
-        // Start up Aladin Lite
-        aladin = A.aladin('#aladin-lite-div', {target: 'M51', fov: 0.3, survey: 'CDS/P/DSS2/red', allowFullZoomout: true});
-
-
-    });
-
+A.init.then(() => {
+    // Start up Aladin Lite
+    aladin = A.aladin('#aladin-lite-div', {target: 'M51', fov: 0.3, survey: 'CDS/P/DSS2/red', allowFullZoomout: true});
 
 
+});
 
 </script>
 </body>

src/render/catalog.js

@@ -0,0 +1,3 @@
+export function removeLoadingInfo() {
+    document.getElementById("loading").innerHTML = "Catalog loaded!";
+}

src/render/src/lib.rs

@@ -597,16 +597,28 @@ impl App {
         self.manager.set_kernel_size(&self.camera);
     }
 
-    fn set_colormap(&mut self, name: String, colormap: Colormap) {
-        self.manager.get_mut_catalog(&name)
-            .unwrap()
-            .set_colormap(colormap);
+    fn set_catalog_colormap(&mut self, name: String, colormap: Colormap) -> Result<(), JsValue> {
+        let mut catalog = self.manager.get_mut_catalog(&name).map_err(|e| {
+            let err: JsValue = e.into();
+            err
+        })?;
+        catalog.set_colormap(colormap);
+
+        self.request_redraw = true;
+
+        Ok(())
     }
 
-    fn set_heatmap_opacity(&mut self, name: String, opacity: f32) {
-        self.manager.get_mut_catalog(&name)
-            .unwrap()
-            .set_alpha(opacity);
+    fn set_heatmap_opacity(&mut self, name: String, opacity: f32) -> Result<(), JsValue> {
+        let mut catalog = self.manager.get_mut_catalog(&name).map_err(|e| {
+            let err: JsValue = e.into();
+            err
+        })?;
+        catalog.set_alpha(opacity);
+
+        self.request_redraw = true;
+
+        Ok(())
     }
 
     fn set_kernel_strength<P: Projection>(&mut self, name: String, strength: f32) {
@@ -855,10 +867,10 @@ impl ProjectionType {
         };
     }
 
-    fn set_colormap(&self, app: &mut App, name: String, colormap: Colormap) {
+    fn set_catalog_colormap(&self, app: &mut App, name: String, colormap: Colormap) -> Result<(), JsValue> {
         match self {
-            _ => app.set_colormap(name, colormap),
-        };
+            _ => app.set_catalog_colormap(name, colormap),
+        }
     }
 
     fn world_to_screen(&self, app: &App, lonlat: &LonLatT<f32>) -> Result<Option<Vector2<f32>>, String> {
@@ -1015,10 +1027,10 @@ impl ProjectionType {
         };
     }
 
-    pub fn set_heatmap_opacity(&mut self, app: &mut App, name: String, opacity: f32) {       
+    pub fn set_heatmap_opacity(&mut self, app: &mut App, name: String, opacity: f32) -> Result<(), JsValue> {       
         match self {
             _ => app.set_heatmap_opacity(name, opacity),
-        }; 
+        }
     }
 
     pub fn set_center(&mut self, app: &mut App, lonlat: LonLatT<f32>) {
@@ -1588,23 +1600,17 @@ impl WebClient {
     }
 
     /// Set the heatmap global opacity
+    #[wasm_bindgen(js_name = setCatalogOpacity)]
     pub fn set_heatmap_opacity(&mut self, name_catalog: String, opacity: f32) -> Result<(), JsValue> {
-        self.projection.set_heatmap_opacity(&mut self.app, name_catalog, opacity);
+        self.projection.set_heatmap_opacity(&mut self.app, name_catalog, opacity)?;
 
         Ok(())
     }
 
-    pub fn set_colormap(&mut self, name_catalog: String, name_colormap: String) -> Result<(), JsValue> {
-        let colormap = match name_colormap.as_str() {
-            "BluePastelRed" => Colormap::BluePastelRed,
-            "IDL_CB_BrBG" => Colormap::IDLCBBrBG,
-            "IDL_CB_YIGnBu" => Colormap::IDLCBYIGnBu,
-            "IDL_CB_GnBu" => Colormap::IDLCBGnBu,
-            "Red_Temperature" => Colormap::RedTemperature,
-            "Black_White_Linear" => Colormap::BlackWhiteLinear,
-            _ => panic!("{:?} colormap not recognized!", name_colormap)
-        };
-        self.projection.set_colormap(&mut self.app, name_catalog, colormap);
+    #[wasm_bindgen(js_name = setCatalogColormap)]
+    pub fn set_catalog_colormap(&mut self, name_catalog: String, colormap: String) -> Result<(), JsValue> {
+        let colormap: Colormap = colormap.into();
+        self.projection.set_catalog_colormap(&mut self.app, name_catalog, colormap)?;
 
         Ok(())
     }

src/render/src/renderable/catalog/manager.rs

@@ -21,6 +21,15 @@ use crate::renderable::projection::*;
 pub enum Error {
     CatalogNotPresent { message: String }
 }
+use wasm_bindgen::JsValue;
+impl From<Error> for JsValue {
+    fn from(err: Error) -> Self {
+        match err {
+            Error::CatalogNotPresent { message } => message.into(),
+            _ => unreachable!()
+        }
+    }
+}
 
 pub struct Manager {
     gl: WebGl2Context,
@@ -501,8 +510,6 @@ impl Catalog {
             let size = camera.get_screen_size();
             gl.viewport(0, 0, size.x as i32, size.y as i32);
 
-            //let fbo_tex = .bind();
-
             let shader = self.colormap.get_shader(gl, shaders);
             shader.bind(gl)
                 .attach_uniform("texture_fbo", &manager.fbo_texture) // FBO density texture computed just above

src/render/src/shaders/colormaps/BluePastelRed.frag

@@ -67,5 +67,5 @@ void main() {
     float o = smoothstep(0.f, 0.1f, opacity);
 
     color = colormap_f(opacity);
-    color.a = o;
+    color.a = o * alpha;
 }

src/render/src/shaders/colormaps/blackwhite.frag

@@ -20,5 +20,5 @@ void main() {
 
     //color = texture(colormap, vec2(opacity, 0.5f));
     color = colormap_f(opacity);
-    color.a = alpha;
+    color.a = alpha * o;
 }