1. Stuck, Having problems with creating your mod? Let us help you: Mod Support

Help with streams in UI

Discussion in 'Programming' started by gigawert, Jul 19, 2017.

  1. gigawert

    gigawert
    Expand Collapse

    Joined:
    Sep 6, 2015
    Messages:
    2,112
    I found the stream that contains the vehicle z position, and modified the Digital Air-speedometer app accordingly. But it still shows the airspeed rather than the z position! Here's my code:
    Code:
    angular.module('beamng.apps')
    .directive('simpleDigAltimeter', ['$log', 'StreamsManager', 'UiUnits', function ($log, StreamsManager, UiUnits) {
      return {
        template:
          '<div style="width:100%; height:100%;" class="bngApp" layout="column">' +
            '<div style="display:flex; justify-content: center; align-items: baseline;">' +
            //this ^ has to be display flex instead of the layout attribute from angular since the latter has no baseline option
              '<span style="font-size:1.3em; font-weight:bold;">' +
                '<span style="color: rgba(255, 255, 255, 0.8)"> {{leadingZeros}}</span>' +
                '<span>{{position.z.val}}</span>' +
              '</span>' +
              '<span style="font-size:0.9em; font-weight:bold; margin-left:2px">{{position.z.unit}}</span>' +
            '</div>' +
            '<small style="text-align:center; color: rgba(255, 255, 255, 0.8); font-size: 0.75em">Altitude</small>' +
          '</div>',
        replace: true,
        restrict: 'EA',
        link: function (scope, element, attrs) {
          'use strict';
          StreamsManager.add(['sensors']);
    
          scope.$on('$destroy', function () {
            $log.debug('<simple-altimeter> destroyed');
            StreamsManager.remove(['sensors']);
          });
    
          scope.position.z = {
            val: 0,
            unit: ''
          };
    
          scope.$on('streamsUpdate', function (event, streams) {  
            scope.$evalAsync(function () {
              var speedMs = streams.sensors.position.z;
    
              // logger.App.log('speed', speedMs);
             
              }
            });
          });
        }
      };
    }]);
    
    Thanks to anyone who can help me. :)
     
  2. Neo

    Neo
    Expand Collapse

    Joined:
    Oct 31, 2015
    Messages:
    207
    Hey,
    the "simple digital air speedometer" you referred to uses the "electrics"-stream rather than the "sensors"-stream. You may want to use "streams.electrics.altitude", then it may work. By the way here is a list of all available streams: Click
    Hope it helped you at least a little bit;)
     
  3. gigawert

    gigawert
    Expand Collapse

    Joined:
    Sep 6, 2015
    Messages:
    2,112
    Well I figured out already that you had to change the streams, and I did, from electrics to sensors.position.z. I will try the stream you mentioned. Thanks!
    --- Post updated ---
    Ugh, now it just disappears after I place it on the screen and close the menu. Here's my current code

    Code:
    angular.module('beamng.apps')
    .directive('simpleDigAltimeter', ['$log', 'StreamsManager', 'UiUnits', function ($log, StreamsManager, UiUnits) {
      return {
        template:
          '<div style="width:100%; height:100%;" class="bngApp" layout="column">' +
            '<div style="display:flex; justify-content: center; align-items: baseline;">' +
            //this ^ has to be display flex instead of the layout attribute from angular since the latter has no baseline option
              '<span style="font-size:1.3em; font-weight:bold;">' +
                '<span style="color: rgba(255, 255, 255, 0.8)"> {{leadingZeros}}</span>' +
                '<span>{{altitude.val}}</span>' +
              '</span>' +
              '<span style="font-size:0.9em; font-weight:bold; margin-left:2px">{{altitude.unit}}</span>' +
            '</div>' +
            '<small style="text-align:center; color: rgba(255, 255, 255, 0.8); font-size: 0.75em">Altitude</small>' +
          '</div>',
        replace: true,
        restrict: 'EA',
        link: function (scope, element, attrs) {
          'use strict';
          StreamsManager.add(['electrics']);
    
          scope.$on('$destroy', function () {
            $log.debug('<simple-altimeter> destroyed');
            StreamsManager.remove(['electrics']);
          });
    
          scope.altitude = {
            val: 0,
            unit: ''
          };
    
          scope.$on('streamsUpdate', function (event, streams) {  
            scope.$evalAsync(function () {
              var altitudeMs = streams.electrics.altitude;
    
              // logger.App.log('speed', speedMs);
             
              }
            });
          });
        }
      };
    }]);
    
     
  4. Neo

    Neo
    Expand Collapse

    Joined:
    Oct 31, 2015
    Messages:
    207
    I loaded you code in my Test-App and found one error:
    Line 38: there is a unnecccessary bracket ("}")

    You also want to assign your altitude variable to the value of the electric stream ;)
    so i changed line 34 to "scope.altitude.val = Math.round(streams.electrics.altitude*100)/100;"
    I also rounded the result up for better readings

    That´s the code that worked for me:
    Notice: I changed the name for the directive to "coolApp"
    Code:
    angular.module('beamng.apps')
    .directive('coolApp', ['$log', 'StreamsManager', 'UiUnits', function ($log, StreamsManager, UiUnits) {
      return {
        template:
          '<div style="width:100%; height:100%;" class="bngApp" layout="column">' +
            '<div style="display:flex; justify-content: center; align-items: baseline;">' +
            //this ^ has to be display flex instead of the layout attribute from angular since the latter has no baseline option
              '<span style="font-size:1.3em; font-weight:bold;">' +
                '<span style="color: rgba(255, 255, 255, 0.8)"> {{leadingZeros}}</span>' +
                '<span>{{altitude.val}}</span>' +
              '</span>' +
              '<span style="font-size:0.9em; font-weight:bold; margin-left:2px">{{altitude.unit}}</span>' +
            '</div>' +
            '<small style="text-align:center; color: rgba(255, 255, 255, 0.8); font-size: 0.75em">Altitude</small>' +
          '</div>',
        replace: true,
        restrict: 'EA',
        link: function (scope, element, attrs) {
          'use strict';
          StreamsManager.add(['electrics']);
    
          scope.$on('$destroy', function () {
            $log.debug('<simple-altimeter> destroyed');
            StreamsManager.remove(['electrics']);
          });
    
          scope.altitude = {
            val: 0,
            unit: ''
          };
    
          scope.$on('streamsUpdate', function (event, streams) {
            scope.$evalAsync(function () {
                scope.altitude.val = Math.round(streams.electrics.altitude*100)/100;
             
              // logger.App.log('speed', speedMs);
           
    
            });
          });
        }
      };
    }]);
     
  5. gigawert

    gigawert
    Expand Collapse

    Joined:
    Sep 6, 2015
    Messages:
    2,112
    Thanks so much!
     
    #5 gigawert, Jul 20, 2017
    Last edited: Jul 20, 2017
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice