<html ng-app="gaugesScreen">
<head>
  <meta charset="UTF-8">
  <script>
    if(typeof beamng !== 'undefined') {
    }
    else{ //for vueService
      var beamng = {}
      beamng.sendEngineLua = function(){}
    }
  </script>
  <!-- Vue START -->
  <script src="/ui/lib/ext/vue3/vue.global.prod.js"></script>
  <script src="/ui/lib/ext/vue-i18n-next/vue-i18n.global.prod.js"></script>
  <script src="/ui/lib/ext/tiny-emitter/tinyemitter.js"></script>
  <script src="/ui/lib/int/vueService.js"></script>
  <!-- Vue END -->
  <script src="/ui/lib/ext/angular/angular.js"></script>
  <script src="gauges_screen.js"></script>
  <link type="text/css" rel="stylesheet" href="gauges_screen.css">
</head>

<body ng-controller="GaugesScreenController as gaugeCtrl">
  <div class="gauge">
    <div class="center-screen">
      <div class="speed">
        <div class="speedVal">{{data.speedVal}}</div>
        <div class="speedUnit">{{data.speedUnit}}</div>
      </div>
      <div class="temp">{{data.temp}}</div>
      <div class="time">{{data.time}}</div>
      <div class="consumption">
        <div class="consumptionVal">{{data.consumptionVal}}</div>
        <div class="consumptionUnit">{{data.consumptionUnit}}</div>
      </div>
    </div>
    <div class="gear-screen">
      <div >{{data.gear}}</div>
    </div>
    <div style="right: 51px; bottom: 22px; position: absolute;" ng-include="'gauges_screen.svg'" onload="svgLoaded()"></div>
</body>

</html>