Files
aladin-lite/examples/al-event-listeners.html

76 lines
2.7 KiB
HTML

<!doctype html>
<html>
<head>
</head>
<body>
<div id='infoDiv'>&nbsp; </div>
<div id="aladin-lite-div" style="width: 500px; height: 400px"></div>
<script type="module">
import A from '../src/js/A.js';
A.init.then(() => {
var aladin = A.aladin('#aladin-lite-div', {showContextMenu: true, target: '05 37 58 +08 17 35', fov: 12, backgroundColor: 'rgb(120, 0, 0)'});
var cat = A.catalog({sourceSize: 20, onClick: (s) => {console.log("kjk", s)}});
aladin.addCatalog(cat);
cat.addSources([A.source(83.784490, 9.934156, {name: 'Meissa'}), A.source(88.792939, 7.407064, {name: 'Betelgeuse'}), A.source(81.282764, 6.349703, {name: 'Bellatrix'})]);
var msg;
// define function triggered when a source is hovered
aladin.on('click', function(e) {
console.log(e)
});
let infoDiv = document.querySelector("#infoDiv");
aladin.on('objectHovered', function(object, xyMouseCoords) {
if (object) {
msg = 'You hovered object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+ xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
}
else {
msg = 'No object hovered';
}
infoDiv.innerText = msg;
});
aladin.on('objectHoveredStop', function(object, xyMouseCoords) {
if (object) {
msg = 'You stopped hove object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+ xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
}
infoDiv.innerText = msg;
});
// define function triggered when an object is clicked
var objClicked;
aladin.on('objectClicked', function(object, xyMouseCoords) {
if (object) {
objClicked = object;
object.select();
msg = 'You clicked object ' + object.data.name + ' located at ' + object.ra + ', ' + object.dec + '; mouse coords - x: '
+ xyMouseCoords.x + ', y: ' + xyMouseCoords.y;
}
else {
objClicked.deselect();
msg = 'You clicked in void';
}
infoDiv.innerText = msg;
});
aladin.on('resizeChanged', function() {
console.log("resize")
});
aladin.on('projectionChanged', function(proj) {
console.log(proj)
});
aladin.on('layerChanged', function(imageLayer, layer, state){
console.log(imageLayer, layer, state)
});
cat.sources[0].actionClicked();
});
</script>
</body>
</html>