[0_1509407012389_home.html](Uploading 100%) [0_1509406989995_app.js](Uploading 100%)
Code attached.
I'm trying to use the MangoAPI to set and read points. I looked at the setPointValue tutorial in the mangoAPI docs and essentially copied the javascript and html into my app.js and home.html respectively. Learning JS as I go so there could be an issue with how I included the javascript code, and how I imported the libraries. The resource mango/api is failing to load for instance. The javascript code is now inside my controller so maybe that's the problem.
I want to be able to use MangoAPI.defaultApi.getPoint(xid) and MangoAPI.defaultApi.putValue(xid, pvt) to set points in javascript instead of using the ma-set-point directive. So if anyone has a well detailed way of doing this I'd appreciate it. Also as you may have noticed I'm simply modifying the loginPageTemplate for my own GUI, is there a better way to create an angular app from scratch? I don't actually need the login template.
/**
* @copyright 2016 {@link http://infiniteautomation.com|Infinite Automation Systems, Inc.} All rights reserved.
* @author Jared Wiltshire
*/
define([
'angular',
'./directives/login/login', // load directives from the directives folder
'mango-3.3/maMaterialDashboards', // load mango-3.3 angular modules
'angular-ui-router', // load external angular modules
'angular-loading-bar',
'mango-2.0/api',
], function(angular, login) {
'use strict';
// create an angular app with our desired dependencies
var mySinglePageApp = angular
.module('mySinglePageApp', ['ui.router','angular-loading-bar','maMaterialDashboards','ngMessages','ngMaterial'])
.controller('MyCtrl', ['$scope', '$timeout', function($scope, $timeout) {
$scope.stepTypes = ['soak', 'ramp rate', 'ramp time', 'instant change'];
var tabs = [
{ title: 'Step 1', content: {}},
],
selected = null,
previous = null;
$scope.isReady = false;
$scope.tabs = tabs;
$scope.stepArray = tabs;
$scope.selectedIndex = 2;
$scope.profile = { cycles: 1, steps: {tabs} };
$scope.$watch('selectedIndex', function(current, old){
previous = selected;
selected = tabs[current];
if ( old + 1 && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
if ( current + 1 ) $log.debug('Hello ' + selected.title + '!');
});
$scope.addTab = function () {
var titleStr = (tabs.length + 1).toString();
tabs.push({ title: "Step " + titleStr, content: {}, disabled: false});
};
$scope.removeTab = function (tab) {
var index = tabs.indexOf(tab);
tabs.splice(index, 1);
for (var i = 0; i < tabs.length; i++) {
tabs*.title = "Step " + (i + 1).toString();
}
};
$scope.confirmReady = function() {
var r = confirm("Press OK if Gate Valve is Open, Cancel otherwise.\n");
if (r == true) {
r = confirm("Press OK if Chamber Door is closed, Cancel otherwise.\n");
if (r == true) {
$scope.isReady = true;
$timeout(function () { $scope.isReady = false; }, 4000);
var points = DataPointQuery.query();
alert(points);
submitProfile(profile)
}
}
}
$scope.submitProfile = function(profile) {
var tabs = profile.steps;
var steps = [{}];
for (var i = 0; i < tabs.length; i++){
steps* = tabs*.content.steps;
}
};
require(['jquery', 'mango/api'],
function($, MangoAPI) {
$('#updateValue').on('click', function(){
alert("hey");
//We need the data type for the point
var xid = $("#xid").val();
MangoAPI.defaultApi.getPoint(xid).then(function(point){
//Check to see if settable
if(point.pointLocator.settable === false){
var statusRow = [];
statusRow.push(xid + ' not settable.');
statusRow.push(new Date());
//Append a status row
$('#status').append(createRow(statusRow));
return;
}
var pvt = getPointValueTime(point);
MangoAPI.defaultApi.putValue(xid, pvt).then(function(response){
var statusRow = [];
statusRow.push('Set Value For ' + xid + ' to ' + pvt.value);
statusRow.push(new Date());
//Append a status row
$('#status').append(createRow(statusRow));
}).fail(MangoAPI.logError);
}).fail(MangoAPI.logError);
});
function createRow(columns){
var tr = $('<tr>');
for(var i=0; i<columns.length; i++){
var td = $('<td>');
td.text(columns*);
tr.append(td);
}
return tr;
}
function getPointValueTime(dataPoint){
var value = null;
//Set the value depending on the data point type
if((dataPoint.pointLocator.dataType == "MULTISTATE")||(dataPoint.pointLocator.dataType == "NUMERIC")){
//Since the input is text type we must convert
value = new Number($('#pointValueInput').val());
}
else if(dataPoint.pointLocator.dataType == "BINARY"){
//Since the input is text type we must convert
pointValue.value = new Boolean();
}
else{
//For Alphanumeric
value = $('#pointValueInput').val();
}
return {
value: value,
timestamp: new Date().getTime(),
annotation: 'Set by custom dashboard',
dataType: dataPoint.pointLocator.dataType,
};
}
});
}
]);
// add our directives to the app
mySinglePageApp
.directive('login', login);
mySinglePageApp.config([
'$stateProvider',
'$urlRouterProvider',
'$compileProvider',
'$locationProvider',
function($stateProvider, $urlRouterProvider, $compileProvider, $locationProvider) {
// disable angular debug info to speed up app
$compileProvider.debugInfoEnabled(false);
// enable html5 mode URLs (i.e. no /#/... urls)
$locationProvider.html5Mode(true);
// set the default state
$urlRouterProvider.otherwise('/home');
$stateProvider.state('dashboard', {
templateUrl: 'views/dashboard/main.html',
resolve: {
auth: ['$rootScope', 'User', function($rootScope, User) {
// retrieves the current user when we navigate to a dashboard page
// if an error occurs the $stateChangeError listener redirects to the login page
$rootScope.user = User.current();
return $rootScope.user.$promise;
}]
}
}).state('dashboard.home', {
url: '/home',
templateUrl: 'views/dashboard/home.html',
}).state('dashboard.page1', {
url: '/page1',
templateUrl: 'views/dashboard/page1.html',
}).state('login', {
url: '/login',
templateUrl: 'views/login.html',
resolve: {
loginTranslations: ['Translate', function(Translate) {
return Translate.loadNamespaces(['login']);
}]
}
});
}]);
mySinglePageApp.run(['$rootScope', '$state', function($rootScope, $state) {
// redirect to login page if we can't retrieve the current user when changing state
$rootScope.$on("$stateChangeError", function(event, toState, toParams, fromState, fromParams, error) {
if (error && (error.status === 401 || error.status === 403)) {
event.preventDefault();
// store the requested state so we can redirect there after login
$state.loginRedirect = toState;
$state.go('login');
}
});
}]);
// bootstrap the angular application
angular.element(document).ready(function() {
angular.bootstrap(document.documentElement, ['mySinglePageApp']);
});
}); // define
<h1>Single Page App with Login</h1>
<head>
<title>Set Point Value</title>
<!-- Add the Mango Favicon -->
<link rel="icon" href="/images/favicon.ico">
<!-- Page Style -->
<style></style>
<link href="/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/modules/dashboards/web/private/css/dashboard.css" rel="stylesheet">
<!-- Base Library -->
<script type="text/javascript" src="/resources/loaderConfig.js"></script>
<script type="text/javascript" src="/resources/require.js"></script>
<script type="text/javascript" src="/resources/main.js"></script>
<script type="text/javascript">
</script>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Angular Material Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/resources/angular-csp.css"></link>
<link rel="stylesheet" href="../vendor/angular-material/angular-material.css">
<link rel="stylesheet" href="../vendor/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" href="../vendor/mdPickers/mdPickers.css">
<link rel="stylesheet" href="styles/main.css">
<!-- Scripts from Module Directory -->
<script src="/resources/require.js"></script>
<script src="/resources/loaderConfig.js"></script>
<script src="../../js/loaderConfig.js"></script>
<script type='text/javascript' src='/resources/ng-infinite-scroll.min.js'></script>
<script type="text/javascript" src="/resources/main.js"></script>
<script>require(['dashboards/loginPageTemplate/app']);</script>
</head>
<div id="main">
<h1>Set Point Values</h1>
<div class="row">
<div class="col-md-12">
<label for="xid">Xid: </label><input type="text" id="xid" value="voltage"/>
<label id="pointValueLabel" class="formLabel" for="pointValue">Value:</label>
<input id="pointValueInput" type="number" value="100.01"></input>
<button type="button" id="updateValue">Update</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table">
<tr><th>Status</th><th>Time</th></tr>
<tbody id="status"></tbody>
</table>
</div>
</div>
</div>
<div layout="column">
<div ng-if="appLoading" class="app-loading">
<i class="fa fa-cog fa-spin"></i>
</div>
<div layout="column" flex class="step-card" ng-controller="MyCtrl">
<div flex="grow" layout="column" layout-gt-xs="row">
<md-card flex>
<md-card-content>
<h1> Profile Creator </h1>
<md-p> Add steps to your profile and hit submit when done. Unless you select a time, the profile will start immediately.
The program will ask you to confirm that the gate valve is open and the chamber door is closed. <md-p>
<div layout="column" layout-padding ng-cloak ng-init="stepTypes = ['soak', 'instant change', 'ramp time', 'ramp rate']; myObj
= {Type: '', Hours: 0 ,Minutes: 0, Seconds: 0, SoakEnable: true}">
<br/>
<md-content class="md-padding">
<md-tabs md-dynamic-height md-selected="selectedIndex" md-autoselect>
<md-tab ng-repeat="tab in tabs"
ng-disabled="tab.disabled"
label="{{tab.title}}">
<div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
<md-input-container class="md-block" flex-gt-sm>
<label>Step Type</label>
<md-select ng-model="tabs[$index].content.type">
<md-option ng-value="stepType" ng-repeat="stepType in stepTypes">{{ stepType }}</md-option>
</md-select>
</md-input-container>
<!--Soak Step Input-->
<div ng-if="tabs[$index].content.type == 'soak'">
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Hours</label>
<input ng-model="tabs[$index].content.parameters.hours" type="number" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Minutes</label>
<input ng-model="tabs[$index].content.parameters.minutes" type="number" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Seconds</label>
<input ng-model="tabs[$index].content.parameters.seconds" type="number" step="1" min="0">
</md-input-container>
</div>
<!--Ramp Rate Step Input-->
<div ng-if="tabs[$index].content.type == 'ramp rate'">
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Target Set Point</label>
<input ng-model="tabs[$index].content.parameters.targetSetPoint" type="number" step="0.1">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Ramp Rate (Celsius Per Min)</label>
<input ng-model="tabs[$index].content.parameters.rampRate" type="number" step="1" min="0">
</md-input-container>
</div>
<!--Ramp Time Step Input-->
<div ng-if="tabs[$index].content.type == 'ramp time'">
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Target Set Point</label>
<input ng-model="tabs[$index].content.parameters.targetSetPoint" type="number" step="0.1">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Hours</label>
<input ng-model="tabs[$index].content.parameters.hours" type="number" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Minutes</label>
<input ng-model="tabs[$index].content.parameters.minutes" type="number" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Seconds</label>
<input ng-model="tabs[$index].content.parameters.seconds" type="number" step="1" min="0">
</md-input-container>
</div>
<!--Instant Change Input-->
<div ng-if="tabs[$index].content.type == 'instant change'">
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Target Set Point</label>
<input ng-model="tabs[$index].content.parameters.targetSetPoint" default="0" type="number" step="0.1">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Hours</label>
<input ng-model="tabs[$index].content.parameters.hours" type="number" default="0" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Minutes</label>
<input ng-model="tabs[$index].content.parameters.minutes" type="number" default="0" step="1" min="0">
</md-input-container>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Seconds</label>
<input ng-model="tabs[$index].content.parameters.seconds" type="number" step="1" min="0">
</md-input-container>
</div>
</div>
<form ng-submit="addTab()" layout="column" class="md-padding" style="padding-top: 0;">
<div layout="row" layout-sm="column">
<div flex style="position: relative;">
<h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
</div>
<md-button class="md-primary md-raised" ng-disabled="tabs.length <= 1" ng-click="removeTab( tabs[$index] )">Remove Step</md-button>
<md-button class="add-tab md-primary md-raised" ng-disabled="!tabs" type="submit" style="margin-right: 0;">Add Step</md-button>
</div>
</form>
</md-tab>
</md-tabs>
</md-content>
<md-input-container class="md-icon-float md-icon-right md-block">
<label>Number of Profile Cycles</label>
<input ng-model="profile.cycles" type="number" step="1" min="1">
</md-input-container>
<md-input-container>
<label>Choose a point</label>
<ma-point-list limit="200" ng-model="myPoint"></ma-point-list>
</md-input-container>
<p>You have chosen point "{{myPoint.name}}". It is {{myPoint.enabled ? 'enabled' : 'disabled'}} and belongs to device {{myPoint.deviceName}}</p>
<ma-get-point-value point="myPoint"></ma-get-point-value>
<div> <p> {{myPoint.pointLocator.settable}} </p></div>
<md-button ng-click="myPoint.setValue(1771)" class="md-raised">Set to 5</md-button>
<md-button class="md-primary md-raised" ng-disabled="!tabs" ng-click="confirmReady()">Submit</md-button>
<br/>
<div ng-show="isReady">
<md-p><br/>Profile Starting</md-p><br/><br/>
<md-progress-linear md-mode="indeterminate"></md-progress-linear></div>
<pre ng-bind="profile | json"></pre>
</div>
</md-card-content>
</md-card>
</div>
</div>
<md-card flex>
<md-card-content>
<h1> Set Point Graphs </h1>
<div layout="column">
<md-input-container class="md-block">
<label>Choose a point</label>
<ma-point-list limit="200" ng-model="point1"></ma-point-list>
</md-input-container>
<md-input-container class="md-block">
<label>Choose a point</label>
<ma-point-list limit="200" ng-model="point2"></ma-point-list>
</md-input-container>
<md-input-container class="md-block">
<label>Values to display</label>
<input type="number" min="1" max="1000" ng-model="count" ng-init="count=25">
</md-input-container>
</div>
<ma-point-values point="point1" values="point1Values" latest="count">
</ma-point-values>
<ma-point-values point="point2" values="point1Values2" latest="count">
</ma-point-values>
<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-2-values="point1Values2" series-2-point="point2">
</ma-serial-chart>
</md-card-content>
</md-card>
<md-card flex>
<md-card-content>
<h1> Temperature Gauges </h1>
<div layout="row" ng-controller="MyCtrl">
<div flex>
<p>TC 1 module 3</p>
<ma-get-point-value point-xid="DP_949013" point="myPoint1"></ma-get-point-value>
<ma-gauge-chart point="myPoint1" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
<div flex>
<p>TC 2 module 3</p>
<ma-get-point-value point-xid="DP_809116" point="myPoint2"></ma-get-point-value>
<ma-gauge-chart point="myPoint2" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
</div>
<div layout="row" ng-controller="MyCtrl">
<div flex>
<p>TC 3 module 3</p>
<ma-get-point-value point-xid="DP_949013" point="myPoint1"></ma-get-point-value>
<ma-gauge-chart point="myPoint1" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
<div flex>
<p>TC 4 module 3</p>
<ma-get-point-value point-xid="DP_809116" point="myPoint2"></ma-get-point-value>
<ma-gauge-chart point="myPoint2" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
</div>
<div layout="row" ng-controller="MyCtrl">
<div flex>
<p>TC 5 module 3</p>
<ma-get-point-value point-xid="DP_949013" point="myPoint1"></ma-get-point-value>
<ma-gauge-chart point="myPoint1" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
<div flex>
<p>TC 6 module 3</p>
<ma-get-point-value point-xid="DP_809116" point="myPoint2"></ma-get-point-value>
<ma-gauge-chart point="myPoint2" interval="10" start="-20" end="120" style="width:100%; height:200px"></ma-gauge-chart>
</div>
</div>
</md-card-content>
</md-card>
</div>
<p><a ui-sref="dashboard.home">Back to home page</a></p>
<p>You have reached the home page! You are logged in as {{user.username}}.</p>
<p><a ui-sref="dashboard.page1">Go to page 1.</a></p>
<p><a ui-sref="login">Go to the login page.</a></p>