89 lines
3.0 KiB
HTML
89 lines
3.0 KiB
HTML
<html>
|
|
|
|
<head>
|
|
|
|
</head>
|
|
|
|
<body ng-app="stripApp" ng-controller="stripCtrl">
|
|
{{data}}
|
|
<div class="col-12" ng-repeat="led in data" style="border-style: solid;display: table">
|
|
<div
|
|
style="width: 60px; height: 60px; background: rgb({{led['red']}}, {{led['green']}}, {{led['blue']}}); display: table-cell;">
|
|
{{led["led"]}}
|
|
</div>
|
|
</div>
|
|
<script src="node_modules/angular/angular.min.js"></script>
|
|
<script src="node_modules/reconnecting-websocket/dist/reconnecting-websocket-iife.min.js"></script>
|
|
<script>
|
|
var app = angular.module('stripApp', []);
|
|
app.factory('socket', [function () {
|
|
var stack = [];
|
|
var onmessageDefer;
|
|
var host = "localhost"
|
|
if (window.location.hostname != "") {
|
|
host = window.location.hostname
|
|
}
|
|
var socket = {
|
|
ws: new ReconnectingWebSocket("ws://" + host + ":8001", null, { debug: false, reconnectInterval: 2000 }),
|
|
send: function (data) {
|
|
if (socket.ws.readyState == 1) {
|
|
socket.ws.send(data);
|
|
} else {
|
|
stack.push(data);
|
|
}
|
|
},
|
|
onmessage: function (callback) {
|
|
if (socket.ws.readyState == 1) {
|
|
socket.ws.onmessage = callback;
|
|
} else {
|
|
onmessageDefer = callback;
|
|
}
|
|
}
|
|
};
|
|
socket.ws.onopen = function (event) {
|
|
for (i in stack) {
|
|
socket.ws.send(stack[i]);
|
|
}
|
|
stack = [];
|
|
if (onmessageDefer) {
|
|
socket.ws.onmessage = onmessageDefer;
|
|
onmessageDefer = null;
|
|
}
|
|
};
|
|
return socket;
|
|
}]);
|
|
|
|
app.controller('stripCtrl', ['$scope', 'socket', function ($scope, socket) {
|
|
|
|
$scope.connected = false;
|
|
$scope.data = {}
|
|
|
|
socket.ws.addEventListener('close', function (event) {
|
|
$scope.$apply(function () {
|
|
$scope.connected = false
|
|
});
|
|
});
|
|
socket.ws.addEventListener('open', function (event) {
|
|
$scope.$apply(function () {
|
|
socket.send(
|
|
JSON.stringify({
|
|
'register_client_type': 1,
|
|
'client_name': "htmlstrip",
|
|
})
|
|
);
|
|
$scope.connected = true
|
|
});
|
|
});
|
|
|
|
socket.onmessage(function (event) {
|
|
$scope.$apply(function () {
|
|
console.log(event.data)
|
|
json = JSON.parse(event.data)
|
|
$scope.data = json
|
|
});
|
|
});
|
|
}]);
|
|
</script>
|
|
</body>
|
|
|
|
</html> |