Help using MangoAPI to Set Point Values

---

[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>

@avilla said in Help using MangoAPI to Set Point Values:

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.

I do not recommend trying to use the old MangoAPI 1.x and 2.x libraries inside an AngularJS application. If the issue is that you do not like the look of <ma-set-point> you can create your own AngularJS component which uses the maPoint service to set the point values.

@avilla said in Help using MangoAPI to Set Point Values:

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.

Have you considered just using the Dashboard Designer or Custom Pages? Are you using Mango 3?