Bonjour, suite à notre discussion de vendredi je reviens vers vous pour savoir s’il serait possible d’avoir des exemples d’intégration du module constellation avec Javascript et AngularJS
Bonjour,
Je vais bientôt écrire et publier la documentation pour les API JS & AngularJS.
En attendant, voici deux pages de tests qui pourront vous mettre sur la piste pour expérimenter ces API.
Vous pouvez retrouver sur mon blog quelques articles sur le sujet (notamment l’article sur S-Panel ou l’alarme connectée).
Pour finir, utilisez Nuget depuis VS pour installer les librairies JS dans votre projet.
Sample de la lib Javascript (Constellation.Javascript) :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test API JS</title>
<script type="text/javascript" src="../Scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="../Scripts/Constellation-1.8.0.js"></script>
<script type="text/javascript">
var constellation = $.signalR.createConstellationConsumer("http://localhost:8088", "MonAccessKey", "Test API");
constellation.client.onReceiveMessage(function (message) {
console.log("MSG", message);
});
constellation.client.onUpdateStateObject(function (stateobject) {
console.log(stateobject);
});
constellation.connection.stateChanged(function (change) {
if (change.newState === $.signalR.connectionState.connected) {
constellation.server.requestSubscribeStateObjects("*", "*", "test", "*");
}
});
constellation.connection.start();
var controller = $.signalR.createConstellationController("http://localhost:8088", "789", "TestAPI");
controller.client.onReceiveLogMessage(function (message) {
console.log(message.Message);
});
controller.connection.start();
$(document).ready(function () {
$("#bttest").click(function () {
constellation.server.sendMessageWithSaga({ Scope: 'Package', Args: ['DemoPackage'] }, 'TestSebXParam', ['input', 2, 4, false], function (msg) { console.log("RESP 2x4", msg); });
constellation.server.sendMessageWithSaga({ Scope: 'Package', Args: ['DemoPackage'] }, 'TestSebXParam', ['input', 3, 15, false], function (msg) { console.log("RESP 3x15", msg); });
});
});
</script>
</head>
<body>
<button id="bttest">Test</button>
</body>
</html>
Sample de la lib AngularJS (Constellation.Angular) :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Test API AngularJS</title>
<script type="text/javascript" src="../Scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.signalR-2.2.0.min.js"></script>
<script type="text/javascript" src="../Scripts/Constellation-1.8.0.js"></script>
<script type="text/javascript" src="../Scripts/angular.min.js"></script>
<script type="text/javascript" src="../Scripts/ngConstellation-1.8.0.js"></script>
<script>
var demo = angular.module('demoApp', ['ngConstellation']);
demo.controller('MyController', ['$scope', 'constellationConsumer', 'constellationController', function ($scope, constellation, controller) {
constellation.intializeClient("http://localhost:8088", "MonAccessKey", "Test API");
controller.intializeClient("http://localhost:8088", "MonAccessKey", "Test API");
controller.onReceiveLogMessage(function (log) {
console.log(log);
});
controller.onConnectionStateChanged(function (change) {
console.log("Controller", change.newState);
});
constellation.onUpdateStateObject(function (message) {
$scope.$apply(function () {
$scope[message.Name] = message;
});
});
constellation.onConnectionStateChanged(function (change) {
console.log("Consumer", change.newState);
if (change.newState === $.signalR.connectionState.connected) {
constellation.requestSubscribeStateObjects("*", "DemoPackage", "*", "*");
}
});
$scope.Test = function () {
constellation.sendMessage({ Scope: 'Package', Args: ['DemoPackage'] }, 'TestSebXParam', ['input', 12, 6, false]);
constellation.sendMessageWithSaga({ Scope: 'Package', Args: ['DemoPackage'] }, 'TestSebXParam', ['input', 12, 6, false], function (msg) { console.log("RESP", msg); });
};
constellation.connect();
controller.connect();
}]);
</script>
</head>
<body ng-controller="MyController">
<p>{{ test.Value }}</p>
<button ng-click="Test()">Test</button>
</body>
</html>
Je profite de cette question, comment afficher les données triées en javascript ?
En angular on fait {{ test.Value }} et en js ?
Du coup, les données seront mises à jour en temps réelles peut importe la méthode utilisée ?
Dans les deux cas (JS & NG) à chaque update de SO envoyé par le serveur COnstellation ca déclenche la méthode “onUpdateStateObject”.
Après à toi de faire ce que tu veux dans cette méthode.
Dans l’exemple Angular ci dessus, je mets le SO dans une propriété du scope courant :
$scope[message.Name] = message;
ce qui qui permet très simplement de les afficher dans la vue, genre :
{{ MonStateObject.SentinelName }}
{{ MonStateObject.PackageName }}
{{ MonStateObject.Name}}
{{ MonStateObject.Value }}
etc…
Attention ici, j’ajoute le SO dans une propriété dont le nom est le Name du SO (message.Name). Donc si tu as plusieurs SO du même nom, ca override 
L’idée est plutôt de mettre un nom de propriété contenant le trio SentinelName / PackageName / Name et/ou d’utiliser un tableau !
QUoi qu’il en soit, à chaque update du SO, le SO est mis à joru dans le scope Angular, donc la vue HTML se rafraîchit en temps réel
Pour répondre à ta question, sans Angular avec la lib JS, tu peux utiliser jQuery pour mettre à jour ton UI.
Par exemple , tu as dans ta page HTML :
<span id="temperature">N/A °C</span><br /> <span id="humidity">N/A %</span><br /> <span id="cpu">N/A %</span><br />
Et côté JS :
constellation.client.onUpdateStateObject(function (message) {
if (message.Name == "/intelcpu/0/load/0") {
$("#cpu").text(message.Value.Value + " %");
}
if (message.Name == "TemperatureHumidity") {
$("#temperature").text(message.Value.Temperature + " °C");
$("#humidity").text(message.Value.Humidity + " %");
}
});
Bonjour,
Nous avons quelques problèmes avec Angular et Constellation :
Tout fonctionne la plupart du temps, mais il arrive que les appels à Constellation provoquent des erreurs.
Que peut-on faire pour résoudre ce problème?
Merci
Hello,
Vous avez pu résoudre le problème ?