<!DOCTYPE html>
<html ng-app="gaugesScreen">
<head>
  <script src="/ui/lib/ext/angular/angular.js"></script>
  <script src="PGP_termintorx.js"></script>
  <link rel="stylesheet" href="PGP_termintorx.css">
  <title>Gauge Display</title>
</head>
<body ng-controller="GaugesScreenController as gaugeCtrl">
  <div id="screen">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3690 1360">
      <rect x="-50" y="-50" width="3790" height="1460" rx="30" ry="30" fill="#000000"/>
      <defs>
        <filter id="glow">
          <feGaussianBlur in="SourceAlpha" stdDeviation="0" result="blur"/>
          <feOffset in="blur" dx="0" dy="0"/>
          <feFlood flood-color="#ffffff" flood-opacity="1"/>
          <feComposite in2="blur" operator="in"/>
          <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
      <g id="rpmGroup">
        <rect x="660" y="255" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showRpmRec"/>
        <text id="rpmLabel" x="1045" y="360" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">RPM, rpm</text>
        <text id="rpmVal" x="1045" y="520" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.rpm}}</text>
      </g>
      <g id="afrGroup">
        <rect x="1460" y="255" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showAfrRec"/>
        <text id="afrLabel" x="1845" y="360" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">AFR, A/F</text>
        <text id="afrVal" x="1845" y="520" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.afrVal}}</text>
      </g>
      <g id="boostGroup">
        <rect x="2260" y="255" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showBoostWarningRec"/>
        <text id="boostLabel" x="2645" y="360" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">MAP, psi</text>
        <text id="boostVal" x="2645" y="520" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.boostVal}}</text>
      </g>
      <g id="oilPressGroup">
        <rect x="660" y="775" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showOilPressRec"/>
        <text id="oilPressLabel" x="1045" y="880" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">Oil Pres, psi</text>
        <text id="oilPressVal" x="1045" y="1040" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.oilPressVal}}</text>
      </g>
      <g id="coolantGroup">
        <rect x="1460" y="775" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showWaterRec"/>
        <text id="coolantLabel" x="1845" y="880" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">CTS, F</text>
        <text id="coolantVal" x="1845" y="1040" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.waterVal}}</text>
      </g>
      <g id="voltsGroup">
        <rect x="2260" y="775" width="770" height="390" fill="#ff0000" rx="10" ry="10" ng-show="data.showVoltsRec"/>
        <text id="voltsLabel" x="2645" y="880" font-size="96" fill="yellow" text-anchor="middle" filter="url(#glow)" font-weight="bold">Battery, Volts</text>
        <text id="voltsVal" x="2645" y="1040" font-size="168" fill="#ffffff" text-anchor="middle" filter="url(#glow)" font-weight="bold">{{data.voltsVal}}</text>
      </g>
      <rect id="blackout" x="0" y="0" width="100%" height="100%" fill="#000000" ng-show="data.blackout"/>
      <rect id="blackout2" x="0" y="0" width="100%" height="100%" fill="#000000" ng-show="data.showSplashScreen"/>
      <image href="new_PGD_logo.png" x="700" y="100" height="1140px" width="2300px" id="splashScreen" style="opacity:1; filter: none;" ng-show="data.showSplashScreen"/>
      <image href="fast-and-furious-danger.gif" x="700" y="100" height="1140px" width="2300px" id="splashScreen" style="opacity:1; filter: none;" ng-show="data.dangerToManifold"/>
      <image href="oh-blow-fish.gif" x="700" y="100" height="1140px" width="2300px" id="splashScreen" style="opacity:1; filter: none;" ng-show="data.showRpmRec"/>
    </svg>
    </svg>
  </div>
</body>
</html>
