Need Some Help with a Simple App

Discussion in 'Programming' started by Josef733, Aug 15, 2019.

  1. Josef733

    Josef733
    Expand Collapse

    Joined:
    Jan 14, 2014
    Messages:
    75
    Hello

    I'm trying to make a simple app that just updates the fuel level of a car.
    An indicator is supposed to move from right to left, counter-clockwise to indicate the level of fuel left.

    However. the app simply doesn't work whatsoever. Nothing in the app works on Beam. I've tested to see that the gauge that would appear does work outside of Beam.

    Capture.png Capture2.png

    The math for the movement of that indicator works fine.

    Here is my code:

    Code:
    angular.module('beamng.apps')
    .directive('fuelGauge', ['bngApi', 'StreamsManager', function (bngApi, StreamsManager) {
      return {
        template: '<canvas width="290" height="120"></canvas>',
        replace: true,
        link: function (scope, element, attrs) {
          var streamsList = ['electrics'];
          StreamsManager.add(streamsList);
          scope.$on('$destroy', function () {
            StreamsManager.remove(streamsList);
          });
    
          var canvas = element[0];
          var ctx = canvas.getContext('2d');
    
          var minAngle = 90;
          var maxAngle = 270;
          var radius = 100;
    
          scope.$on('streamsUpdate', function (event, streams) {
    
            ctx.clearRect(0, 0, 290, 120);
    
            var minFuel = 0;
            var maxFuel = 1;
            var fuelPerc = streams.electrics.fuel;
    
            ctx.restore();
    
            ctx.save();
            ctx.translate(145, 110);
            var rads = (90 + minAngle + (fuelPerc - minFuel) / (maxFuel - minFuel) * (maxAngle - minAngle)) * (Math.PI / 180);
            ctx.rotate(rads);
            ctx.beginPath();
            ctx.moveTo(0, -5);
            ctx.lineTo(radius - 29, -5);
            ctx.lineTo(radius - 29, 5);
            ctx.lineTo(0, 5);
            ctx.fillStyle = "RGB(200,200,200)";
            ctx.closePath();
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.restore();
    
            ctx.save();
            ctx.translate(145, 110);
            var rads = (90 + minAngle + (fuelPerc - minFuel) / (maxFuel - minFuel) * (maxAngle - minAngle)) * (Math.PI / 180);
            ctx.rotate(rads);
            ctx.beginPath();
            ctx.moveTo(radius - 29, -6);
            ctx.lineTo(radius - 4, -6);
            ctx.lineTo(radius - 4, 6);
            ctx.lineTo(radius - 29, 6);
            ctx.fillStyle = "RGB(255,21,0)";
            ctx.closePath();
            ctx.fill();
            ctx.lineWidth = 1;
            ctx.restore();
    
            ctx.save();
            ctx.translate(145, 110);
            ctx.fillStyle = "RGB(200,200,200)";
            ctx.beginPath();
            ctx.arc(0, 0, 5, 0, 2*Math.PI);
            ctx.closePath();
            ctx.fill();
            ctx.restore();
          });
        }
      };
    }]);
    I've tried using both 'engineInfo' and 'electrics' streams to retrieve fuel data, none has worked (code probably breaks before it even reaches the main function).

    In addition to the images, I've also provided a download for the .js file.

    If someone would like to figure out what is wrong, I would be very grateful.
     

    Attached Files:

  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