Help with streams in UI

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.

 

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

 

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);
         
          }
        });
      });
    }
  };
}]);

 

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);
       

        });
      });
    }
  };
}]);

 

Thanks so much!