Le package que vous venez de décompresser contient les fichiers suivants :
Pour tester nos développements en local, il faut lancer Chrome avec l'option --disable-web-security (sous Mac OS: open /Applications/Google\ Chrome.app --args --disable-web-security).
Si vous utilisez Firefox ou un autre navigateur, il faudra uploader le code derrière un serveur HTTP pour pouvoir le tester.
Il nous faudra aussi utiliser le hub JSAMP. Téléchargez le JAR de la dernière version depuis la page http://software.astrogrid.org/doc/p/jsamp/1.3-2/downloads.html, puis lancez-le avec:
java java -jar jsamp.jar hub
Remarque : Pour des raisons de simplicité et de concision, nous utiliserons la librairie jQuery. Mais on pourrait très bien s'en passer.
Editez le fichier init.js et ajoutez les lignes suivantes :
var metadata = {
"samp.name": "Web SAMP demo",
"samp.description": "A small application to demonstrate Web SAMP profile",
"samp.icon.url": "http://www.obspm.fr/images_interface/logo.gif"
};
var connector = new samp.Connector("Web SAMP example", metadata, null, null);
L'objet connector va gérer la connexion au hub SAMP. metadata contient les métadonnées propres à notre application.
On va maintenant demander la connexion au hub SAMP lors du click sur le bouton Register
$('#register').click(function(e) {
connector.register();
});
Tester votre code dans un navigateur (en vous assurant au préalable que le hub a été lancé). Si tout fonctionne correctement, le hub vous demandera confirmation de la connexion.
Remarque : en lançant le hub avec le paramètre -web:auth true , on désactive l'apparition de la fenetre de confirmation de connexion.
Complétons maintenant notre code pour faire apparaitre sur notre page le statut actuel de la connexion au hub SAMP.
Pour cela, nous testerons à intervalle régulier la valeur de la variable connector.connection :
setInterval(function () {
if (connector.connection) {
$('#register').hide();
$('#unregister').show();
$('#sampStatus').html('Connected');
$('#sampStatus').removeClass('disconnected');
$('#sampStatus').addClass('connected');
}
else {
$('#register').show();
$('#unregister').hide();
$('#sampStatus').html('Not connected');
$('#sampStatus').removeClass('connected');
$('#sampStatus').addClass('disconnected');
}
}, 1000);
Recharger la page et testez si l'état de la connexion est correctement reflétée dans la page web.
Ajoutons le code pour nous déconnecter du hub lors du click sur le bouton Unregister:
$('#unregister').click(function(e) {
connector.unregister();
});
Remarque: Si vous regardez la fenêtre du hub, vous constaterez que plusieurs instances de notre application apparaissent dans la liste des clients connectés.
Pour nous déconnecter lorsqu'on ferme l'onglet de la page, on peut ajouter le code suivant :
$(window).unload(function() {
if (connector.connection) {
connector.unregister();
}
});
On va maintenant voir comment demander le chargement d'une VOTable lors du click sur le bouton Broadcast results table
Il faut créer un objet samp.Message et lui passer en paramètres le mtype approprié et la liste des paramètres correspondants, notamment l'URL de la VOTable à charger:
$('#broadcastVOTable#').click(function(e) {
var tableUrl = 'http://vizier.u-strasbg.fr/viz-bin/votable?-source=J%2FAJ%2F125%2F2411%2Ftable1&-out.add=_RAJ,_DEJ&-oc.form=dm&-out.meta=DhuL&-out.max=50&-out=_VizieR,*Mime(image/fits),*&-mime=TSV';
var msg = new samp.Message("table.load.votable",
{"table-id": "maTable",
"url": tableUrl,
"name": "SIRTF-table"});
connector.connection.notifyAll([msg]);
});
Au click sur un des boutons Broadcast image, on va récupérer l'URL correspondant à l'image FITS, créer le message SAMP et l'envoyer à tous les clients connectés :
$('.imageBtn').click(function(e) {
var imgUrl = $(this).parent().parent().find('a').attr('href');
var msg = new samp.Message("image.load.fits",
{"image-id": imgUrl,
"url": imgUrl,
"name": "SIRTF-image"});
connector.connection.notifyAll([msg]);
});
Avant la déclaration de l'objet connector, déclarez un CallableClient :
var callableClient = new samp.CallableClient();
Puis, on déclare les messages que l'on souhaite recevoir (table.select.rowList) et on code le traitement associé:
callableClient.callHandler["table.select.rowList"] = function(senderId, message) {
//console.log(message);
var params = message["samp.params"];
// on vérifie qu'il s'agit bien de la table qu'on a envoyé précédemment
if (params['table-id'] != 'maTable') {
return;
}
// on remet toutes les lignes en blanc
$('#tableResults tr').css('background-color', 'white');
for (var idx in params["row-list"]) {
// on colore en orange les lignes sélectionnées
$('#row' + params["row-list"][idx]).css('background-color', 'orange');
}
}
Remplacez la ligne var connector = ... parvar connector = new samp.Connector("Web SAMP example", metadata, callableClient, callableClient.calculateSubscriptions());
A vous de jouer !