Connection Constellation avec Angular JS

Le développement
#1

Bonjour à tous,

J’ai récemment commencé à utiliser la plateforme constellation pour un petit projet de domotique chez moi.

Je ne suis pas developpeur, donc par avance désolé si la question a déjà été abordé ou semble evidente…

J’ai réalisé un Arduino qui controle mon fil pilote, et recupere la temperature de ma pièce.

Je souhaite y acceder depuis une page web, mais je bloque depuis un bout de temps, je ne comprend pas d’où vient l’erreur… Un probleme sur “connectionState” apparement…

la page html principale:

3 Col Portfolio - Start Bootstrap Template

<!-- Bootstrap core CSS -->

<!-- Custom styles for this template -->

<!-- Navigation -->

<a href="#">Start Bootstrap</a>

&nbsp;
<ul>
 	<li><a href="#">
Home
(current)
</a></li>
 	<li><a href="#">About</a></li>
 	<li><a href="#">Services</a></li>
 	<li><a href="#">Contact</a></li>
</ul>
<!-- Page Content -->

<!-- Page Heading -->

Temperature
<!--Secondary Text-->

<!--<a href="#"><img src="http://placehold.it/700x400" /></a>-->

Temperature

{{Temperature}}

<a href="#"><img src="http://placehold.it/700x400" /></a>

<a href="#">Project Two</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

<a href="#"><img src="http://placehold.it/700x400" /></a>

<a href="#">Project Three</a>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!

<a href="#"><img src="http://placehold.it/700x400" /></a>

<a href="#">Project Four</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

<a href="#"><img src="http://placehold.it/700x400" /></a>

<a href="#">Project Five</a>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.

<a href="#"><img src="http://placehold.it/700x400" /></a>

<a href="#">Project Six</a>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.

<!-- /.row -->
<!-- Pagination -->
<ul>
 	<li><a href="#">
«
Previous
</a></li>
 	<li><a href="#">1</a></li>
 	<li><a href="#">2</a></li>
 	<li><a href="#">3</a></li>
 	<li><a href="#">
»
Next
</a></li>
</ul>
<!-- /.container -->
<!-- Footer -->

Copyright © Your Website 2017

<!-- /.container -->

<!-- Bootstrap core JavaScript -->

et la page javascript “Constellation_Connection.js” :

var panelApp = angular.module('PanelApp', ['ngConstellation'])
.controller('PanelCtrl', ['$scope', 'constellationConsumer', function ($scope, constellation) {

constellation.initializeClient("http://192.168.1.21:9998", "bdd7229019bb2e0f4b9ff1a3352b3c5bda4ab525", "DomoWeb");

constellation.onConnectionStateChanged(function (change) {
if (change.newState === $.signalR.connectionState.connected) {
console.log("Connected to the ControlHub");

$scope.temp = {};
constellation.registerStateObjectLink("ESP8266-Temperature", "Temperature", "Temperature", "*", function (so) {
$scope.$apply(function () {
$scope.temp[so.Name] = so.Value;
});
});
}
});

constellation.connect();
}]);

Tous les scripts sont bien chargés en local, et j’utilise un template bootstrap de base.

J’ai l’erreur suivante dans la console de google chrome :

Uncaught TypeError: Cannot read property 'connectionState' of undefined
at Object.onConnectionStateChangedCallback (Constellation_Connection.js:7)
at t.fn.init. (ngConstellation-1.8.2.min.js:12)
at t.fn.init. (jquery.signalR-2.2.0.min.js:8)
at t.fn.init.dispatch (jquery-2.2.3.min.js:3)
at t.fn.init.r.handle (jquery-2.2.3.min.js:3)
at Object.trigger (jquery-2.2.3.min.js:4)
at n.fn.init.triggerHandler (jquery-2.2.3.min.js:4)
at o (jquery.signalR-2.2.0.min.js:8)
at t.fn.init.start (jquery.signalR-2.2.0.min.js:8)
at a._.deferredStartHandler (jquery.signalR-2.2.0.min.js:8)

Voila, donc si quelqu’un saurait m’aiguiller, ca me fera gagner quelques heures de travail :wink:

Merci à tous!

Theo

#2

Bonjour,

En effet très étrange ! Je ne vois pas où et comment sont chargés les dépendances JS !

Idéalement, avant votre code JS, placez le snippet suivant :

<script type=“text/javascript” src=“https://code.jquery.com/jquery-2.2.4.min.js”></script>

<script type=“text/javascript” src=“https://ajax.aspnetcdn.com/ajax/signalr/jquery.signalr-2.2.2.min.js”></script>

<script type=“text/javascript” src=“https://cdn.myconstellation.io/js/Constellation-1.8.2.min.js”></script>

<script type=“text/javascript” src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js”></script>

<script type=“text/javascript” src=“https://cdn.myconstellation.io/js/ngConstellation-1.8.2.min.js”></script>