mirror of
https://github.com/cds-astro/aladin-lite.git
synced 2026-01-04 09:07:59 -08:00
796 lines
28 KiB
HTML
796 lines
28 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
|
|
<!-- <link rel="stylesheet" href="../distrib/latest/aladin.min.css" /> -->
|
|
|
|
<link rel="stylesheet" href="css/auto-complete.css">
|
|
|
|
<link rel="stylesheet" href="https://aladin.u-strasbg.fr/AladinLite/api/v2/latest/aladin.min.css" />
|
|
|
|
<style>
|
|
.slider_tf {
|
|
width: 4em;
|
|
}
|
|
.box {
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
border: 1px solid;
|
|
padding: 2px;
|
|
}
|
|
|
|
.header {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
|
|
|
|
|
|
<div id="aladin-lite-div" style="width: 1024px; height: 768px"></div>
|
|
|
|
<div id="controls" style="display: flex;">
|
|
<!-- HiPSes control box -->
|
|
<div class="box">
|
|
<h3 class="header">Image Surveys</h3>
|
|
<table>
|
|
<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>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td><input id="c1_hips" style="width: 95%;"></td>
|
|
<td><input id="c2_hips" style="width: 95%;"></td>
|
|
<td><input id="c3_hips" style="width: 95%;"></td>
|
|
<td><input id="c4_hips" style="width: 95%;"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label for="colormap_c1">Colormap</label>
|
|
<select id="colormap_c1">
|
|
<option value="blackwhite">blackwhite</option>
|
|
<option value="blues">blues</option>
|
|
<option value="parula">parula</option>
|
|
<option value="rainbow">rainbow</option>
|
|
<option value="redtemperature">redtemperature</option>
|
|
<option value="RdBu">RdBu</option>
|
|
<option value="RdYiBu">RdYiBu</option>
|
|
<option value="spectral">spectral</option>
|
|
<option value="summer">summer</option>
|
|
<option value="YIGnBu">YIGnBu</option>
|
|
<option value="YIOrBr">YIOrBr</option>
|
|
<option value="Nothing" selected>Nothing</option>
|
|
</select>
|
|
<br>
|
|
<label for="k_c1">k</label>
|
|
<input id="k_c1" style="vertical-align: middle; width:10vw;" step="0.1" min="0" max="3" type="range" value="1" />
|
|
<br>
|
|
|
|
<label for="stretch_c1">Stretch</label>
|
|
<select id="stretch_c1">
|
|
<option value="power">Pow</option>
|
|
<option value="linear">Linear</option>
|
|
<option value="sqrt">Square root</option>
|
|
<option value="log">Log</option>
|
|
<option value="asinh" selected>Asinh</option>
|
|
</select>
|
|
|
|
<br>
|
|
|
|
<label for="min_cut_c1">Min cut</label>
|
|
<input id="min_cut_c1" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="0" />
|
|
<br>
|
|
<input id="min_cut_c1_tf" type="text" class="slider_tf">
|
|
<br>
|
|
<label for="max_cut_c1">Max cut</label>
|
|
<input id="max_cut_c1" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="2" />
|
|
<br>
|
|
<input id="max_cut_c1_tf" type="text" class="slider_tf">
|
|
</td>
|
|
<td>
|
|
<label for="k_c2">k</label>
|
|
<input id="k_c2" style="vertical-align: middle; width:10vw;" step="0.1" min="0" max="3" type="range" value="1" />
|
|
<br>
|
|
|
|
<label for="stretch_c2">Stretch</label>
|
|
<select id="stretch_c2">
|
|
<option value="power">Pow</option>
|
|
<option value="linear">Linear</option>
|
|
<option value="sqrt">Square root</option>
|
|
<option value="log">Log</option>
|
|
<option value="asinh" selected>Asinh</option>
|
|
</select>
|
|
|
|
<br/>
|
|
|
|
<label for="min_cut_c2">Min cut</label>
|
|
<input id="min_cut_c2" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="0" />
|
|
<br>
|
|
<input id="min_cut_c2_tf" type="text" class="slider_tf">
|
|
<br>
|
|
<label for="max_cut_c2">Max cut</label>
|
|
<input id="max_cut_c2" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="2" />
|
|
<br>
|
|
<input id="max_cut_c2_tf" type="text" class="slider_tf">
|
|
</td>
|
|
<td>
|
|
<label for="k_c3">k</label>
|
|
<input id="k_c3" style="vertical-align: middle; width:10vw;" step="0.1" min="0" max="3" type="range" value="1" />
|
|
<br>
|
|
|
|
<label for="stretch_c3">Stretch</label>
|
|
<select id="stretch_c3">
|
|
<option value="power">Pow</option>
|
|
<option value="linear">Linear</option>
|
|
<option value="sqrt">Square root</option>
|
|
<option value="log">Log</option>
|
|
<option value="asinh" selected>Asinh</option>
|
|
</select>
|
|
|
|
<br/>
|
|
|
|
<label for="min_cut_c3">Min cut</label>
|
|
<input id="min_cut_c3" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="0" />
|
|
<br>
|
|
<input id="min_cut_c3_tf" type="text" class="slider_tf">
|
|
<br>
|
|
<label for="max_cut_c3">Max cut</label>
|
|
<input id="max_cut_c3" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="3" />
|
|
<br>
|
|
<input id="max_cut_c3_tf" type="text" class="slider_tf">
|
|
</td>
|
|
|
|
<td>
|
|
<label for="k_c4">k</label>
|
|
<input id="k_c4" style="vertical-align: middle; width:10vw;" step="0.1" min="0" max="3" type="range" value="1" />
|
|
<br>
|
|
|
|
<label for="stretch_c4">Stretch</label>
|
|
<select id="stretch_c4">
|
|
<option value="power">Pow</option>
|
|
<option value="linear">Linear</option>
|
|
<option value="sqrt">Square root</option>
|
|
<option value="log">Log</option>
|
|
<option value="asinh" selected>Asinh</option>
|
|
</select>
|
|
|
|
<br/>
|
|
|
|
<label for="min_cut_c4">Min cut</label>
|
|
<input id="min_cut_c4" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="0" />
|
|
<br>
|
|
<input id="min_cut_c4_tf" type="text" class="slider_tf">
|
|
<br>
|
|
<label for="max_cut_c4">Max cut</label>
|
|
<input id="max_cut_c4" style="vertical-align: middle; width:10vw;" step="0.1" min="-1" max="10" type="range" value="3" />
|
|
<br>
|
|
<input id="max_cut_c4_tf" type="text" class="slider_tf">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="box" style="border: 1px solid;">
|
|
<h3 class="header">Catalog</h3>
|
|
<!-- Catalog control box -->
|
|
<!-- <label for="c5_cat">Search</label>
|
|
<input id="c5_cat">-->
|
|
|
|
<select id="cat_selector">
|
|
<option value="CDS/IX/45/csc11">IX/45/csc11</option>
|
|
<option value="CDS/J/A+A/503/1023/meridian">J/A+A/503/1023/meridian</option>
|
|
<option value="CDS/J/A+A/604/A108/apogee12">J/A+A/604/A108/apogee12</option>
|
|
<option value="CDS/J/MNRAS/476/2117/apogeenn">J/MNRAS/476/2117/apogeenn</option>
|
|
<option value="CDS/II/122B/merged">II/122B/merged</option>
|
|
<option value="CDS/J/A+A/615/A49/members">J/A+A/615/A49/members</option>
|
|
<option value="CDS/I/313/lqrf">I/313/lqrf</option>
|
|
<option value="" selected></option>
|
|
</select>
|
|
<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" />
|
|
<br />
|
|
<label for="strength_cat">Kernel Strength</label>
|
|
<input id="strength_cat" style="vertical-align: middle; width:10vw;" step="0.02" min="0" max="10.0" type="range" value="1.0" />
|
|
<br />
|
|
<label for="colormap_cat">Colormap</label>
|
|
<select id="colormap_cat">
|
|
<option value="blackwhite">blackwhite</option>
|
|
<option value="blues">blues</option>
|
|
<option value="parula">parula</option>
|
|
<option value="rainbow">rainbow</option>
|
|
<option value="RdBu">RdBu</option>
|
|
<option value="RdYiBu">RdYiBu</option>
|
|
<option value="redtemperature">redtemperature</option>
|
|
<option value="spectral">spectral</option>
|
|
<option value="summer">summer</option>
|
|
<option value="YIGnBu">YIGnBu</option>
|
|
<option value="YIOrBr">YIOrBr</option>
|
|
</select>
|
|
<p id="loading"></p>
|
|
</div>
|
|
<div class="box">
|
|
<h3 class="header">Grid</h3>
|
|
<!-- Grid control box -->
|
|
<label for="color_grid">Color</label>
|
|
<input type="color" id="color_grid" value="#00ff00">
|
|
<br />
|
|
<label for="opacity_grid">Opacity</label>
|
|
<input id="opacity_grid" style="vertical-align: middle; width:10vw;" step="0.02" min="0" max="1.0" type="range" value="0.2" />
|
|
<br />
|
|
<input id="showGrid" type="checkbox">
|
|
<label for="showGrid">Show grid</label>
|
|
<br />
|
|
<input id="hideLabels" type="checkbox">
|
|
<label for="hideLabels">Hide labels</label>
|
|
<br />
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript" src="./../aladin.js" charset="utf-8"></script>
|
|
|
|
<script src="js/auto-complete.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
let catalogArray = [];
|
|
let catalogMap = new Map();
|
|
let hipsesDict = {};
|
|
let hipsesArray = [];
|
|
let aladin;
|
|
|
|
$( document ).ready(function() {
|
|
$.ajax({
|
|
url: 'https://alasky.u-strasbg.fr/MocServer/query?dataproduct_type=image&get=record&fmt=json',
|
|
}).done(function(data) {
|
|
|
|
for (var k=0; k<data.length; k++) {
|
|
var hips = data[k];
|
|
var id = hips.ID;
|
|
|
|
// ignore color HiPS
|
|
if (hips.hasOwnProperty('dataproduct_subtype') && hips.dataproduct_subtype=='color') {
|
|
continue;
|
|
}
|
|
if (hips.hips_service_url) {
|
|
hips.hips_service_url = hips.hips_service_url.replace('http:', 'https:');
|
|
hips.hips_service_url = hips.hips_service_url.replace('alasky.', 'alaskybis.');
|
|
}
|
|
if (hips['hips_pixel_cut'] === undefined) {
|
|
//console.log('no pixel cut for: ', hips.ID);
|
|
continue;
|
|
}
|
|
var pixel_cuts = hips['hips_pixel_cut'].split(' ')
|
|
hips.min_cut = parseFloat(pixel_cuts[0]);
|
|
hips.max_cut = parseFloat(pixel_cuts[1]);
|
|
|
|
hipsesDict[id] = hips;
|
|
hipsesArray.push(hips);
|
|
}
|
|
//console.log(hipsesDict);
|
|
init();
|
|
});
|
|
/*$.ajax({
|
|
url: 'https://alasky.u-strasbg.fr/MocServer/query?expr=dataproduct_type%3Dcatalog%26%26nb_rows%3C%3D5000000%26%26nb_rows%3E%3D50000&get=record&fmt=json',
|
|
}).done(function(catalogs) {
|
|
for (var k = 0; k < catalogs.length; k++) {
|
|
var cat_id = catalogs[k].ID;
|
|
|
|
catalogMap[cat_id] = {
|
|
'obs_id': catalogs[k].obs_id,
|
|
};
|
|
catalogArray.push(cat_id);
|
|
}
|
|
|
|
console.log("CATALOGS", catalogs);
|
|
init_catalog();
|
|
});*/
|
|
});
|
|
/*
|
|
var init_catalog = function() {
|
|
new autoComplete({
|
|
selector: '#c5_cat',
|
|
minChars: 2,
|
|
source: function(term, suggest) {
|
|
term = term.toLowerCase();
|
|
var choices = catalogArray;
|
|
var matches = [];
|
|
for (let i=0; i<choices.length; i++) {
|
|
if (choices[i].toLowerCase().indexOf(term)>=0) {
|
|
matches.push(choices[i]);
|
|
}
|
|
}
|
|
console.log("MATCHES", matches)
|
|
suggest(matches);
|
|
},
|
|
renderItem: function (item, search) {
|
|
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
|
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
|
},
|
|
onSelect: async function(e, term, item) {
|
|
let cat_id = term;
|
|
await loadCatalog(cat_id);
|
|
}
|
|
});
|
|
};
|
|
*/
|
|
|
|
function addLoadingInfo(catalogName) {
|
|
document.getElementById("loading").innerHTML = catalogName + " is loading...";
|
|
}
|
|
|
|
async function loadCatalog(cat_id) {
|
|
let colormap = $('#colormap_cat').val()
|
|
addLoadingInfo(cat_id);
|
|
/*let parallax_column_name = await getTableColumnName(catalog_id, "pos.parallax");
|
|
console.log('parallax column name: ', parallax_column_name);
|
|
let phot_mag_column_name = await getTableColumnName(catalog_id, "phot.mag");
|
|
console.log('phot mag column name: ', phot_mag_column_name);*/
|
|
|
|
let pos_ra_column_name = await getTableColumnName(cat_id, "pos.eq.ra");
|
|
let pos_dec_column_name = await getTableColumnName(cat_id, "pos.eq.dec");
|
|
|
|
let table_obs_id = cat_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("cat1", sources, colormap);
|
|
});
|
|
}
|
|
|
|
function getTableColumnName(table_name, ucd) {
|
|
let table_obs_id = table_name.substring(4);
|
|
let url = encodeURI('https://alasky.u-strasbg.fr/cgi/JSONProxy?url=') + encodeURIComponent('http://tapvizier.u-strasbg.fr/TAPVizieR/tap/sync?phase=RUN&lang=adql&format=json&request=doQuery&query=SELECT%20TOP%201%20table_name%2C%20column_name%2C%20ucd%20FROM%20TAP_SCHEMA.columns%20WHERE%20table_name%3D%27' + encodeURIComponent(table_obs_id) + '%27%20AND%20ucd%20LIKE%20%27' + encodeURIComponent(ucd) + '%25%27');
|
|
var request = {
|
|
method: 'GET',
|
|
headers: new Headers(),
|
|
mode: 'cors',
|
|
cache: 'default'
|
|
};
|
|
return fetch(url, request)
|
|
.then(response => response.json())
|
|
.then(table => {
|
|
// Return the column name of the first row corresponding to ucd
|
|
//console.log(table_name, ucd, ": here are the data", table.data);
|
|
return table.data[0][1];
|
|
});
|
|
}
|
|
|
|
function retrieveCatalog(table_obs_id, colnames, max_rows="*") {
|
|
let cols = [];
|
|
colnames.forEach(col => {
|
|
//console.log(col);
|
|
cols.push('"' + table_obs_id + '"."' + encodeURIComponent(col) + '"');
|
|
});
|
|
|
|
let cols_query = cols.join(", ");
|
|
|
|
let sql_query = 'SELECT ' + cols_query + ' FROM "' + table_obs_id + '"';
|
|
//console.log(sql_query);
|
|
|
|
let url = encodeURI('https://alasky.u-strasbg.fr/cgi/JSONProxy?url=') + encodeURIComponent('http://tapvizier.u-strasbg.fr/TAPVizieR/tap/sync?phase=RUN&lang=adql&format=json&request=doQuery&query=' + encodeURIComponent(sql_query)) ;
|
|
|
|
var request = {
|
|
method: 'GET',
|
|
headers: new Headers(),
|
|
mode: 'cors',
|
|
cache: 'default'
|
|
};
|
|
return fetch(url, request)
|
|
.then(response => response.json())
|
|
.then((votable) => {
|
|
let sources = votable.data;
|
|
return sources;
|
|
});
|
|
}
|
|
|
|
|
|
var init = function() {
|
|
new autoComplete({
|
|
selector: '#c1_hips',
|
|
minChars: 2,
|
|
source: function(term, suggest) {
|
|
term = term.toLowerCase();
|
|
var choices = hipsesArray;
|
|
var matches = [];
|
|
for (i=0; i<choices.length; i++)
|
|
if (choices[i].ID.toLowerCase().indexOf(term)>=0) {
|
|
matches.push(choices[i].ID);
|
|
}
|
|
suggest(matches);
|
|
},
|
|
renderItem: function (item, search){
|
|
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
|
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
|
},
|
|
onSelect: function(e, term, item){
|
|
var hips = hipsesDict[term];
|
|
$('#min_cut_c1').attr('min', hips.min_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c1').attr('max', hips.min_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c1').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#min_cut_c1').val(hips.min_cut);
|
|
$('#min_cut_c1_tf').val(hips.min_cut);
|
|
|
|
$('#max_cut_c1').attr('min', hips.max_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c1').attr('max', hips.max_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c1').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#max_cut_c1').val(hips.max_cut);
|
|
$('#max_cut_c1_tf').val(hips.max_cut);
|
|
|
|
update();
|
|
}
|
|
});
|
|
new autoComplete({
|
|
selector: '#c2_hips',
|
|
minChars: 2,
|
|
source: function(term, suggest) {
|
|
term = term.toLowerCase();
|
|
var choices = hipsesArray;
|
|
var matches = [];
|
|
for (i=0; i<choices.length; i++)
|
|
if (choices[i].ID.toLowerCase().indexOf(term)>=0) {
|
|
matches.push(choices[i].ID);
|
|
}
|
|
suggest(matches);
|
|
},
|
|
renderItem: function (item, search){
|
|
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
|
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
|
},
|
|
onSelect: function(e, term, item){
|
|
var hips = hipsesDict[term];
|
|
$('#min_cut_c2').attr('min', hips.min_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c2').attr('max', hips.min_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c2').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#min_cut_c2').val(hips.min_cut);
|
|
$('#min_cut_c2_tf').val(hips.min_cut);
|
|
|
|
$('#max_cut_c2').attr('min', hips.max_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c2').attr('max', hips.max_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c2').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#max_cut_c2').val(hips.max_cut);
|
|
$('#max_cut_c2_tf').val(hips.max_cut);
|
|
|
|
update();
|
|
}
|
|
});
|
|
new autoComplete({
|
|
selector: '#c3_hips',
|
|
minChars: 2,
|
|
source: function(term, suggest) {
|
|
term = term.toLowerCase();
|
|
var choices = hipsesArray;
|
|
var matches = [];
|
|
for (i=0; i<choices.length; i++)
|
|
if (choices[i].ID.toLowerCase().indexOf(term)>=0) {
|
|
matches.push(choices[i].ID);
|
|
}
|
|
suggest(matches);
|
|
},
|
|
renderItem: function (item, search){
|
|
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
|
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
|
},
|
|
onSelect: function(e, term, item){
|
|
var hips = hipsesDict[term];
|
|
$('#min_cut_c3').attr('min', hips.min_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c3').attr('max', hips.min_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c3').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#min_cut_c3').val(hips.min_cut);
|
|
$('#min_cut_c3_tf').val(hips.min_cut);
|
|
|
|
$('#max_cut_c3').attr('min', hips.max_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c3').attr('max', hips.max_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c3').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#max_cut_c3').val(hips.max_cut);
|
|
$('#max_cut_c3_tf').val(hips.max_cut);
|
|
|
|
update();
|
|
}
|
|
});
|
|
new autoComplete({
|
|
selector: '#c4_hips',
|
|
minChars: 2,
|
|
source: function(term, suggest) {
|
|
term = term.toLowerCase();
|
|
var choices = hipsesArray;
|
|
var matches = [];
|
|
for (i=0; i<choices.length; i++)
|
|
if (choices[i].ID.toLowerCase().indexOf(term)>=0) {
|
|
matches.push(choices[i].ID);
|
|
}
|
|
suggest(matches);
|
|
},
|
|
renderItem: function (item, search){
|
|
search = search.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
|
var re = new RegExp("(" + search.split(' ').join('|') + ")", "gi");
|
|
return '<div class="autocomplete-suggestion" data-val="' + item + '">' + item.replace(re, "<b>$1</b>") + '</div>';
|
|
},
|
|
onSelect: function(e, term, item){
|
|
var hips = hipsesDict[term];
|
|
$('#min_cut_c4').attr('min', hips.min_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c4').attr('max', hips.min_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#min_cut_c4').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#min_cut_c4').val(hips.min_cut);
|
|
$('#min_cut_c4_tf').val(hips.min_cut);
|
|
|
|
$('#max_cut_c4').attr('min', hips.max_cut - 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c4').attr('max', hips.max_cut + 0.4*(hips.max_cut - hips.min_cut));
|
|
$('#max_cut_c4').attr('step', (hips.max_cut-hips.min_cut)/100.0);
|
|
$('#max_cut_c4').val(hips.max_cut);
|
|
$('#max_cut_c4_tf').val(hips.max_cut);
|
|
|
|
update();
|
|
}
|
|
});
|
|
};
|
|
|
|
function parseColor(colorHexaStr) {
|
|
var s = colorHexaStr.substring(1);
|
|
return [parseInt(s.substring(0, 2), 16)/255, parseInt(s.substring(2, 4), 16)/255, parseInt(s.substring(4, 6), 16)/255];
|
|
}
|
|
|
|
function update() {
|
|
var hipsComponents = [];
|
|
|
|
var c1Color = $('#color_c1').val();
|
|
var c2Color = $('#color_c2').val();
|
|
var c3Color = $('#color_c3').val();
|
|
var c4Color = $('#color_c4').val();
|
|
|
|
|
|
var stretch_c1 = $('#stretch_c1').val();
|
|
var colormap_c1 = $('#colormap_c1').val();
|
|
var min_cut_c1 = parseFloat($('#min_cut_c1_tf').val());
|
|
var max_cut_c1 = parseFloat($('#max_cut_c1_tf').val());
|
|
|
|
var stretch_c2 = $('#stretch_c2').val();
|
|
var min_cut_c2 = parseFloat($('#min_cut_c2_tf').val());
|
|
var max_cut_c2 = parseFloat($('#max_cut_c2_tf').val());
|
|
|
|
var stretch_c3 = $('#stretch_c3').val();
|
|
var min_cut_c3 = parseFloat($('#min_cut_c3_tf').val());
|
|
var max_cut_c3 = parseFloat($('#max_cut_c3_tf').val());
|
|
|
|
var stretch_c4 = $('#stretch_c4').val();
|
|
var min_cut_c4 = parseFloat($('#min_cut_c4_tf').val());
|
|
var max_cut_c4 = parseFloat($('#max_cut_c4_tf').val());
|
|
|
|
var c1HiPS = $('#c1_hips').val();
|
|
var c2HiPS = $('#c2_hips').val();
|
|
var c3HiPS = $('#c3_hips').val();
|
|
var c4HiPS = $('#c4_hips').val();
|
|
|
|
var useC1, useC2, useC3, useC4;
|
|
useC1 = useC2 = useC3 = useC4 = false;
|
|
if (c1HiPS.length>0) {
|
|
c1HiPS = hipsesDict[c1HiPS];
|
|
let color = {
|
|
Grayscale2Color: {
|
|
color: parseColor(c1Color),
|
|
k: parseFloat($('#k_c1').val()),
|
|
transfer: stretch_c1
|
|
}
|
|
};
|
|
if (colormap_c1 != "Nothing") {
|
|
color = {
|
|
Grayscale2Colormap: {
|
|
colormap: colormap_c1,
|
|
transfer: stretch_c1,
|
|
reversed: false,
|
|
}
|
|
};
|
|
}
|
|
|
|
let hipsComponent = {
|
|
properties: {
|
|
url: c1HiPS.hips_service_url,
|
|
maxOrder: parseInt(c1HiPS.hips_order),
|
|
// TODO
|
|
frame: { label: "J2000", system: "J2000" },
|
|
tileSize: parseInt(c1HiPS.hips_tile_width),
|
|
format: {
|
|
FITSImage: {
|
|
bitpix: parseInt(c1HiPS.hips_pixel_bitpix)
|
|
}
|
|
},
|
|
minCutout: parseFloat(min_cut_c1),
|
|
maxCutout: parseFloat(max_cut_c1),
|
|
},
|
|
color: color
|
|
};
|
|
hipsComponents.push(hipsComponent);
|
|
|
|
useC1 = true;
|
|
}
|
|
if (c2HiPS.length>0) {
|
|
c2HiPS = hipsesDict[c2HiPS];
|
|
hipsComponents.push({
|
|
properties: {
|
|
url: c2HiPS.hips_service_url,
|
|
maxOrder: parseInt(c2HiPS.hips_order),
|
|
// TODO
|
|
frame: { label: "J2000", system: "J2000" },
|
|
tileSize: parseInt(c2HiPS.hips_tile_width),
|
|
format: {
|
|
FITSImage: {
|
|
bitpix: parseInt(c2HiPS.hips_pixel_bitpix)
|
|
}
|
|
},
|
|
minCutout: parseFloat(min_cut_c2),
|
|
maxCutout: parseFloat(max_cut_c2),
|
|
},
|
|
color: {
|
|
Grayscale2Color: {
|
|
color: parseColor(c2Color),
|
|
k: parseFloat($('#k_c2').val()),
|
|
transfer: stretch_c2
|
|
}
|
|
}
|
|
});
|
|
|
|
useC2 = true;
|
|
}
|
|
if (c3HiPS.length>0) {
|
|
c3HiPS = hipsesDict[c3HiPS];
|
|
hipsComponents.push({
|
|
properties: {
|
|
url: c3HiPS.hips_service_url,
|
|
maxOrder: parseInt(c3HiPS.hips_order),
|
|
// TODO
|
|
frame: { label: "J2000", system: "J2000" },
|
|
tileSize: parseInt(c3HiPS.hips_tile_width),
|
|
format: {
|
|
FITSImage: {
|
|
bitpix: parseInt(c3HiPS.hips_pixel_bitpix)
|
|
}
|
|
},
|
|
minCutout: parseFloat(min_cut_c3),
|
|
maxCutout: parseFloat(max_cut_c3),
|
|
},
|
|
color: {
|
|
Grayscale2Color: {
|
|
color: parseColor(c3Color),
|
|
k: parseFloat($('#k_c3').val()),
|
|
transfer: stretch_c3
|
|
}
|
|
}
|
|
});
|
|
|
|
useC3 = true;
|
|
}
|
|
if (c4HiPS.length>0) {
|
|
c4HiPS = hipsesDict[c4HiPS];
|
|
hipsComponents.push({
|
|
properties: {
|
|
url: c4HiPS.hips_service_url,
|
|
maxOrder: parseInt(c4HiPS.hips_order),
|
|
// TODO
|
|
frame: { label: "J2000", system: "J2000" },
|
|
tileSize: parseInt(c4HiPS.hips_tile_width),
|
|
format: {
|
|
FITSImage: {
|
|
bitpix: parseInt(c4HiPS.hips_pixel_bitpix)
|
|
}
|
|
},
|
|
minCutout: parseFloat(min_cut_c4),
|
|
maxCutout: parseFloat(max_cut_c4),
|
|
},
|
|
color: {
|
|
Grayscale2Color: {
|
|
color: parseColor(c4Color),
|
|
k: parseFloat($('#k_c4').val()),
|
|
transfer: stretch_c4
|
|
}
|
|
}
|
|
});
|
|
|
|
useC4 = true;
|
|
}
|
|
|
|
if (!useC1 && !useC2 && !useC3 && !useC4) {
|
|
return;
|
|
}
|
|
|
|
console.log(hipsComponents)
|
|
try {
|
|
aladin.setImageSurveysLayer(hipsComponents);
|
|
} catch {
|
|
console.log("start")
|
|
}
|
|
}
|
|
|
|
$('#k_c1, #k_c2, #k_c3, #k_c4, #color_c1, #stretch_c1, #min_cut_c1, #max_cut_c1, #color_c2, #stretch_c2, #min_cut_c2, #max_cut_c2, #color_c3, #stretch_c3, #min_cut_c3, #max_cut_c3, #color_c4, #stretch_c4, #min_cut_c4, #max_cut_c4, #colormap_c1').on('change input', function() {
|
|
update();
|
|
});
|
|
|
|
$('#min_cut_c1, #max_cut_c1, #min_cut_c2, #max_cut_c2, #min_cut_c3, #max_cut_c3, #min_cut_c4, #max_cut_c4').on('change input', function() {
|
|
$(this).nextAll('.slider_tf').first().val($(this).val());
|
|
});
|
|
|
|
$('.slider_tf').on('keyup', function(event) {
|
|
// if key press on enter
|
|
if(event.keyCode == 13) {
|
|
update();
|
|
}
|
|
});
|
|
|
|
$('#c1_hips, #c2_hips, #c3_hips, #c4_hips').on('keyup', function(event) {
|
|
// if key enter pressed and text looks like a URL
|
|
if (event.keyCode == 13 && $(this).val().startsWith('http')) {
|
|
|
|
console.log($(this).val());
|
|
}
|
|
});
|
|
|
|
// show grid
|
|
document.querySelector('#showGrid').addEventListener('change', function(e) {
|
|
if (this.checked) {
|
|
aladin.webglAPI.enableGrid();
|
|
}
|
|
else {
|
|
aladin.webglAPI.disableGrid();
|
|
}
|
|
});
|
|
document.querySelector('#hideLabels').addEventListener('change', function(e) {
|
|
if (this.checked) {
|
|
aladin.webglAPI.hideGridLabels();
|
|
}
|
|
else {
|
|
aladin.webglAPI.showGridLabels();
|
|
}
|
|
});
|
|
document.querySelector('#cat_selector').addEventListener('change', async function(e) {
|
|
let cat_id = document.getElementById("cat_selector").value;
|
|
await loadCatalog(cat_id);
|
|
});
|
|
document.querySelector('#colormap_cat').addEventListener('change', function(e) {
|
|
let value = document.getElementById("colormap_cat").value;
|
|
aladin.webglAPI.setCatalogColormap("cat1", value);
|
|
});
|
|
document.querySelector('#opacity_cat').addEventListener('input', function(e) {
|
|
let value = document.getElementById("opacity_cat").value;
|
|
aladin.webglAPI.setCatalogOpacity("cat1", value);
|
|
});
|
|
document.querySelector('#strength_cat').addEventListener('input', function(e) {
|
|
let value = document.getElementById("strength_cat").value;
|
|
aladin.webglAPI.setCatalogKernelStrength("cat1", value);
|
|
});
|
|
document.querySelector('#color_grid').addEventListener('input', function(e) {
|
|
let color = parseColor(document.getElementById("color_grid").value);
|
|
aladin.webglAPI.setGridColor(color[0], color[1], color[2], 1.0);
|
|
});
|
|
document.querySelector('#opacity_grid').addEventListener('input', function(e) {
|
|
let alpha = document.getElementById("opacity_grid").value;
|
|
let color = parseColor(document.getElementById("color_grid").value);
|
|
|
|
aladin.webglAPI.setGridColor(color[0], color[1], color[2], alpha);
|
|
});
|
|
// catalog colormap
|
|
// show grid
|
|
|
|
|
|
A.init.then(() => {
|
|
// Start up Aladin Lite
|
|
aladin = A.aladin('#aladin-lite-div', {survey: 'CDS/P/DSS2/color', cooFrame: "gal"});
|
|
aladin.setProjection('aitoff');
|
|
//aladin.gotoRaDec(0, 0);
|
|
aladin.setFoV(360);
|
|
aladin.on('catalogReady', () => {
|
|
document.getElementById("loading").innerHTML = "Catalog loaded!";
|
|
})
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|