<!DOCTYPE html>
<html ng-app="gaugesScreen">
<head>
    <script src="/ui/lib/ext/angular/angular.js"></script>
    <script src="racetec.js"></script>
    <link rel="stylesheet" href="racetec.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" transform="translate(0, 0)">

            <!-- Scaled-Up Border with Inner Rounded Corners -->
            <rect x="-50" y="-50" width="3790" height="1460" rx="30" ry="30" fill="#333333"/>

            <!-- Inner Border Outline for Rounded Corners Effect -->
            <rect x="10" y="10" width="3670" height="1340" rx="30" ry="30" fill="none" stroke="#333333" stroke-width="20"/>

            <!-- Background Image with Matching Resolution -->
            <image href="holleyprodash.png" x="20" y="20" height="1320px" width="3650px" id="gauge_face"/>

            <!-- Glow Filter Definition -->
            <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>

            <!-- Gauge Text Elements with Angular Bindings -->
            <!-- AFR Left -->
            <text id="afrLeft" x="270" y="550" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">AFR Left</text>
            <text id="afrLeftval" x="355" y="650" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.afrLeftVal}}</text>
            <text id="afrLeftlab" x="440" y="650" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">A/F</text>

            <!-- AFR Right -->
            <text id="afrRight" x="3060" y="550" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">AFR Right</text>
            <text id="afrRightval" x="3150" y="650" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.afrRightVal}}</text>
            <text id="afrRightlab" x="3240" y="650" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">A/F</text>

            <!-- Transmission Oil Temperature -->
            <text id="transOilTempval" x="990" y="800" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.transOilTempVal}}</text>
            <text id="transOilTemp" x="720" y="700" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Trans Oil Temp</text>

            <!-- Engine Oil Temperature -->
            <text id="OilTempval" x="2690" y="800" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.oilTempVal}}</text>
            <text id="OilTemp" x="2400" y="700" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Engine Oil Temp</text>

            <!-- Oil Pressure -->
            <text id="oilPress" x="260" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Oil Press</text>
            <text id="oilPressval" x="400" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.oilPressVal}}</text>
            <text id="oilPresslab" x="480" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">PSI</text>

            <!-- Battery Voltage -->
            <text id="volts" x="910" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Batt</text>
            <text id="voltsval" x="920" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.voltsVal}}</text>
            <text id="voltslab" x="1020" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Volts</text>

            <!-- Fuel Pressure -->
            <text id="fuelPress" x="1380" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Fuel Press</text>
            <text id="fuelPressval" x="1530" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.fuelPressVal}}</text>
            <text id="fuelPresslab" x="1630" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">PSI</text>

            <!-- Water Temperature -->
            <text id="water" x="2070" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Water</text>
            <text id="waterval" x="2140" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.waterVal}}</text>
            <text id="waterlab" x="2260" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">F</text>

            <text id="Boost" x="2600" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Boost</text>
  <text id="Boostval" x="2690" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.boostVal}}</text>
  <text id="Boostlab" x="2760" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">PSI</text>

            <!-- Timing -->
            <text id="Timing" x="3220" y="1100" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Timing</text>
            <text id="Timingval" x="3280" y="1220" font-size="130" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.timingVal}}</text>
            <text id="Timinglab" x="3360" y="1220" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">deg</text>

            <!-- RPM -->
            <text id="rpmval" x="1840" y="880" font-size="450" fill="#ffffff" text-anchor="middle" filter="url(#glow)">{{data.rpm}}</text>

            <!-- MPH -->
            <text id="mph" x="340" y="800" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Mph</text>
            <text id="mphval" x="340" y="890" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.mphVal}}</text>

            <!-- GPS Speed -->
            <text id="gpsSpeed" x="3140" y="800" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Gps</text>
            <text id="gpsSpeedval" x="3185" y="890" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.gpsSpeedVal}}</text>

            <!-- Fuel Label and Percentage -->
            <text id="fuelLevel" x="2700" y="180" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Fuel Level</text>
            <text id="fuelLevelval" x="2850" y="280" font-size="80" fill="#ffffff" filter="url(#glow)" text-anchor="middle" font-weight="bold">{{data.fuelPercentage}}</text>

            <!-- Two-Step Indicator -->
            <text id="2steplab" x="3040" y="230" font-size="80" fill="#ffffff" filter="url(#glow)" font-weight="bold">Two-Step</text>

        </svg>
    </div>
</body>
</html>
