var myApp = angular.module('myApp',['ngRoute']);
myApp.value('Dashboard', {});
myApp.config(function ($routeProvider) {
$routeProvider
.when('/',{
templateUrl:'partials/index.html',
access:{restricted:false}
})
.when('/dashboard',{
templateUrl:'partials/dashboard.html',
controller:'dashBoardController',
access:{restricted:false, admin:false, userlevel:[0,1,2]}
})
.when('/admin_page',{
templateUrl: 'partials/admin.html',
controller:'adminController',
access:{restricted:false, admin:true, userlevel:[0]}
})
.when('/logs',{
template: '<h1>Logs Page!</h1>',
access:{restricted:true, admin:true, userlevel:[0,1]}
})
.when('/access_error', {
template:"<h1>You don't have the rights to access this page</h1>"
})
.when('/login', {
templateUrl:'partials/login.html',
controller: 'loginController',
access:{restricted:false}
})
.otherwise({
redirectto:'/'
});
});
myApp.run(function ($rootScope, $location, $route, AuthService) {
$rootScope.$on('$routeChangeStart',
function (event, next, current) {
AuthService.getUserStatus()
.then(function(){
if (next.access.restricted && !AuthService.isLoggedIn()){
$location.path('/login');
$route.reload();
} else if(next.access.restricted && AuthService.isLoggedIn() && AuthService.UserPermited(next.access.userlevel))
{
$location.path('/access_error');
$route.reload();
}
});
});
});
angular.module('myApp').controller('loginController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.login = function () {
// initial values
$scope.error = false;
$scope.disabled = true;
// call login from service
AuthService.login($scope.loginForm.user, $scope.loginForm.password)
// handle success
.then(function () {
$location.path('/');
$scope.disabled = false;
$scope.loginForm = {};
})
// handle error
.catch(function () {
$scope.error = true;
$scope.errorMessage = "Invalid username and/or password";
$scope.disabled = false;
$scope.loginForm = {};
});
};
}]);
angular.module('myApp').controller('logoutController',
['$scope', '$location', 'AuthService',
function ($scope, $location, AuthService) {
$scope.logout = function () {
// call logout from service
AuthService.logout()
.then(function () {
$location.path('/login');
});
};
}]);
angular.module('myApp').controller('adminController',
['$scope','$location','AuthService','$http',
function($scope,$location, AuthService,$http) {
$http.get('/api/get_system_config.cgi')
.success(function(data){
console.log(data);
var htmObject = $(data);
console.log(htmObject);
var json_data = JSON.parse(htmObject[1].getAttribute("data-all"));
var json_data_c = JSON.parse(htmObject[4].getAttribute("config-all"));
console.log(json_data_c);
$scope.data=json_data_c;
})
.error(function(data){
});
$scope.submit_network = function(){
AuthService.updateConfig($scope.data.network);
}
$scope.openTab = function(evt, tab_active) {
// Declare all variables
console.log(evt);
console.log(tab_active);
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(tab_active).style.display = "flex";
evt.currentTarget.className += " active";
}
}]);
angular.module('myApp').controller('dashBoardController',
['$scope','$interval','$location','AuthService','$http',
function($scope,$interval,$location, AuthService,$http) {
$scope.reload = function() {
$http.get('/api/get_system_state.cgi')
.success(function(data){
console.log(data);
$scope.v1_last_val = data.data_points.vbat[19][1];
$scope.v2_last_val = data.data_points.vrec[19][1];
$scope.io_states = data.io_states;
});
};
$scope.reload();
var get_data = $interval($scope.reload,1000);
$scope.$on("$destroy", function() {
if (get_data) {
$interval.cancel(get_data);
}
});
}]);
angular.module('myApp').factory('AuthService',
['$q','$timeout','$http',
function($q, $timeout, $http)
{
var user = null;
return ({
isLoggedIn: isLoggedIn,
login: login,
getUserStatus: getUserStatus,
getUserLevel: getUserLevel,
isAuthorized: isAuthorized,
UserPermited: UserPermited,
updateConfig: updateConfig
});
function isLoggedIn(){
if(user) {
return true;
} else {
return false;
}
}
function isAuthorized(){
if(admin) {
return true;
} else {
return false;
}
}
function getError()
{
return error;
}
function UserPermited(userlevel){
var deferred = $q.defer();
$http.get('/api/user_level.cgi')
.success(function(data,status){
})
.error(function(data) {
});
}
function updateConfig(data){
var deferred = $q.defer();
console.log(JSON.stringify(data));
$http.get('/api/update_config.cgi?q='+JSON.stringify(data))
.success(function(data, status){
})
.error(function(data){
});
}
function login(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
// send a post request to the server
$http.get('/api/login.cgi?user='+username+'&pwd='+password)
// handle success
.success(function (data, status) {
var htmObject = $(data);
var json_data = JSON.parse(htmObject[1].getAttribute("data-all"));
if(json_data.status){
user = true;
deferred.resolve();
} else {
user = false;
deferred.reject();
}
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/api/logout.cgi')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function getUserStatus() {
return $http.get('/api/status.cgi')
// handle success
.success(function (data) {
var htmObject = $(data);
var json_data = JSON.parse(htmObject[1].getAttribute("data-all"));
if(json_data.status){
user = true;
} else {
user = false;
}
})
// handle error
.error(function (data) {
user = false;
});
}
function getUserLevel(){
return $http.get('/api/user_level.cgi')
.success(function(data){
var htmObject = $(data);
var json_data = JSON.parse(htmObject[1].getAttribute("data-all"));
if(json_data.status) {admin=true;} else {admin=false;}
}).error(function(data){ admin=false;});
}
}]);
<canvas id='vat' width="350" height="250" class='hidden'></canvas>function drawAxes(ctx, width,height) {
ctx.strokeStyle= "white";
ctx.beginPath();
ctx.moveTo(10,10);
ctx.lineTo(10,height);
ctx.stroke();
ctx.moveTo(0,height-10);
ctx.lineTo(width, height-10);
ctx.stroke();
}
function drawGrid(ctx, width, height) {
ctx.strokeStyle = "green"
ctx.strokeWidth = 2;
ctx.beginPath();
i = 30;
j = 10;
/* Y Grid */
while (i < width)
{
ctx.moveTo(i,j);
ctx.lineTo(i,height-10);
ctx.stroke();
i+=20;
}
/* X Grid */
i=10;
j=30;
while(j<height)
{
ctx.moveTo(i,j);
ctx.lineTo(i,height-j);
ctx.stroke();
j+=20;
i+=20;
}
}
function clean(ctx,width, height) {
ctx.clearRect(0,0, width, height);
}
function plot(ctx,width,height, data_points) {
ctx.strokeStyle = "blue";
ctx.beginPath()
ctx.moveTo(10,height- (height*(data_points[0][1])));
j=1;
for(var i in data_points) {
ctx.lineTo(j*17, height- (height*data_points[i][1]));
ctx.stroke();
j++;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/css/styles.css" rel="stylesheet">
</head>
<body ng-app="myApp" class="body">
<div id="left_c" class="column">
<div id="letf_c_header"></div>
<div id="left_c_content">
<input type="checkbox" id="checkbox1" />
<label for="checkbox1">
<ul class="menu demo">
<li><a href="/#/">HOME</a></li>
<li><a href="/#/dashboard">DASHBOARD</a></li>
<li><a href="/#/logs">LOGS</a></li>
<li><a href="/#/admin_page">CONFIGURATION</a></li>
<li><a href="/#/login">LOGIN</a></li>
</ul>
<span class="toggle">☰</span>
</label>
</div>
</div>
<div>
<div ng-view></div>
</div>
<!--<script src="/js/jquery.min.js"></script>
<script src="/js/angular.min.js"></script>
<script src="/js/angular_route.min.js"></script>
-->
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/app.js"></script>
<script src="/js/services.js"></script>
<script src="/js/controllers.js"></script>
</body>
</html>
<h2>IO States</h2>
<table style="width:100%">
<tr>
<th aling-content="left">Var Name</th>
<th aling-content="left">State</th>
</tr>
<tr ng-repeat="(key,value) in io_states">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</div>
.when('/dashboard',{
templateUrl:'partials/dashboard.html',
controller:'dashBoardController',
access:{restricted:false, admin:false, userlevel:[0,1,2]}
})
Lo que le dice es que cuando estemos en la ruta /dashboard va a traer la vista definida por la plantilla dashboard.html y el controlador va a ser "dashBoardController"angular.module('myApp').controller('dashBoardController',
['$scope','$interval','$location','AuthService','$http',
function($scope,$interval,$location, AuthService,$http) {
$scope.reload = function() {
$http.get('/api/get_system_state.cgi')
.success(function(data){
console.log(data);
$scope.v1_last_val = data.data_points.vbat[19][1];
$scope.v2_last_val = data.data_points.vrec[19][1];
$scope.io_states = data.io_states;
});
};
$scope.reload();
var get_data = $interval($scope.reload,1000);
$scope.$on("$destroy", function() {
if (get_data) {
$interval.cancel(get_data);
}
});
}]);
Dale un ojo: http://www.raviyp.com/embedded/208-don-t-use-sim900-sim908-sim800-sim808-modules-in-usa-2g-sunset
Yo en el caso que planteas no tendría dudas con respecto a MQTT:
- mucho más ligero que http
- posibilidad de usuario y contraseña
- posibilidad de cifrado
- QoS
Además de probar las plataformas mencionadas instalé un server mosquitto en el pc y usé Wireshark para analizar tráfico. Créeme, nada que ver si comparas el peso de una comunicación http con lo enviado por el protocolo MQTT. He leído en más de una ocasión que un envío MQTT puede llegar a pesar tan sólo 2 bytes y a mi no me da esa cuenta ni por casualidad, pero desde luego es considerablemente menor.
saludo
pd: también empecé con Node-Red, pero las circunstancias personales dieron un giro y ahí se quedó todo a medias...