Revise paste ecu_firmware

/*******************************************************
 * 4-CYLINDER ESP32 ECU SYSTEM
 * 
 * Professional Features:
 * - 4 injectors and 4 ignition channels
 * - Dynamic fuel AND ignition maps with customizable RPM range
 * - Professional web-based tuning interface with dual map editors
 * - Complete lighting controls (headlights, turns, brakes)
 * - Real-time sensor monitoring and fail-safes
 * - Advanced fuel & ignition map editors with 0-RPM to limit range
 * - Multiple fuel & ignition map support with selection interface
 * - WORKING 3D visualization and graph views for both maps
 *******************************************************/

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ArduinoJson.h>
#include <EEPROM.h>

// ==================== CONFIGURATION ====================
const char* ssid = "ESP32_ECU";
const char* password = "tune12345";

// ==================== PIN DEFINITIONS ====================
// Fuel Injectors
#define PIN_INJECTOR_1      12
#define PIN_INJECTOR_2      14  
#define PIN_INJECTOR_3      27
#define PIN_INJECTOR_4      26

// Ignition Coils
#define PIN_IGNITION_1      9
#define PIN_IGNITION_2      13
#define PIN_IGNITION_3      11
#define PIN_IGNITION_4      10

// Lighting Outputs
#define PIN_HEADLIGHT       17
#define PIN_HIGHBEAM        16
#define PIN_LEFT_TURN       5
#define PIN_RIGHT_TURN      4
#define PIN_BRAKE_LIGHT     8

// Sensor Inputs
#define PIN_O2_SENSOR       32
#define PIN_TPS             33
#define PIN_MAP_SENSOR      34
#define PIN_ENGINE_TEMP     35
#define PIN_RPM             17

// ==================== GLOBAL VARIABLES ====================
AsyncWebServer server(80);

// Engine State
volatile unsigned long rpmPulseTime = 0;
volatile unsigned long lastRpmPulse = 0;
float currentRPM = 0;
float o2Value = 14.7;
float tpsValue = 0;
float mapValue = 0;
float engineTemp = 20;
float batteryVoltage = 12.5;

// System State
bool systemEnabled = false;
bool fuelPumpRunning = false;
bool criticalFault = false;
String faultMessage = "";

// Injection Tracking
unsigned long lastInjectorPulse[4] = {0, 0, 0, 0};
int currentPulseWidth[4] = {0, 0, 0, 0};
unsigned long engineRunTime = 0;

// Lighting State
bool headlightState = false;
bool highbeamState = false;
bool leftTurnState = false;
bool rightTurnState = false;
bool brakeLightState = false;
bool hazardState = false;
unsigned long turnSignalPreviousMillis = 0;
bool turnSignalBlinkState = false;
const long turnSignalInterval = 500;

// Tuning Parameters
struct TuningParams {
  float fuelMultiplier = 1.0;
  float ignitionAdvance = 12.0;
  float targetAFR = 14.7;
  int rpmLimit = 8000;
  int tempLimit = 105;
  int minRPM = 0;
  int maxRPM = 8000;
  int rpmStep = 250;
  int loadStep = 10;
  String currentTune = "performance";
  String fuelType = "gasoline";
};
TuningParams tuning;

// Advanced Fuel & Ignition Map Structures
#define MAX_RPM_POINTS 100  // Support up to 100 RPM points (0-10000 RPM)
#define MAX_LOAD_POINTS 11  // 0-100% in 10% steps + 0%

struct FuelMapCell {
  int pulseWidth;
  bool learned;
  float correction;
};

struct IgnitionMapCell {
  float advance;
  bool learned;
  float correction;
};

struct FuelMap {
  String name;
  String description;
  String fuelType;
  int rpmPoints[MAX_RPM_POINTS];
  int loadPoints[MAX_LOAD_POINTS];
  FuelMapCell cells[MAX_RPM_POINTS][MAX_LOAD_POINTS];
  int rpmPointCount;
  int loadPointCount;
};

struct IgnitionMap {
  String name;
  String description;
  int rpmPoints[MAX_RPM_POINTS];
  int loadPoints[MAX_LOAD_POINTS];
  IgnitionMapCell cells[MAX_RPM_POINTS][MAX_LOAD_POINTS];
  int rpmPointCount;
  int loadPointCount;
};

FuelMap fuelMap;
IgnitionMap ignitionMap;
bool isFlashing = false;
unsigned long flashStartTime = 0;

// Multiple fuel & ignition maps storage
#define MAX_FUEL_MAPS 10
#define MAX_IGNITION_MAPS 10
FuelMap fuelMaps[MAX_FUEL_MAPS];
IgnitionMap ignitionMaps[MAX_IGNITION_MAPS];
int currentFuelMapIndex = 0;
int currentIgnitionMapIndex = 0;
int fuelMapCount = 0;
int ignitionMapCount = 0;

// Firing order (1-3-4-2 typical for inline-4)
const int firingOrder[4] = {0, 2, 3, 1}; // Injector order
const int ignitionOrder[4] = {0, 2, 3, 1}; // Ignition order
int currentCylinder = 0;
unsigned long lastCylinderTime = 0;

// ==================== EMBEDDED WEBPAGE ====================
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <title>Professional 4-Cylinder ECU Tuner</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.0/chart.min.js"></script>
  <style>
    :root {
      --primary: #2c3e50;
      --secondary: #3498db;
      --success: #27ae60;
      --danger: #e74c3c;
      --warning: #f39c12;
      --info: #17a2b8;
      --dark: #34495e;
      --light: #ecf0f1;
      --fuel-color: #e74c3c;
      --ignition-color: #3498db;
    }
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }
    .container {
      max-width: 1600px;
      margin: 0 auto;
    }
    .header {
      background: white;
      padding: 20px;
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
      margin-bottom: 20px;
      text-align: center;
    }
    .header h1 {
      color: var(--primary);
      margin-bottom: 10px;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }
    @media (max-width: 768px) {
      .grid {
        grid-template-columns: 1fr;
      }
    }
    .card {
      background: white;
      padding: 25px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .card h2 {
      color: var(--primary);
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--secondary);
    }
    
    /* Map Editor Tabs */
    .map-tabs {
      display: flex;
      background: var(--light);
      border-radius: 8px;
      padding: 5px;
      margin-bottom: 20px;
    }
    .map-tab {
      padding: 12px 20px;
      border: none;
      background: transparent;
      border-radius: 5px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      flex: 1;
      text-align: center;
    }
    .map-tab.active {
      background: var(--secondary);
      color: white;
    }
    .map-tab.fuel {
      border-bottom: 3px solid var(--fuel-color);
    }
    .map-tab.ignition {
      border-bottom: 3px solid var(--ignition-color);
    }
    
    /* Sensor Grid */
    .sensor-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
    }
    .sensor-item {
      text-align: center;
      padding: 15px;
      background: var(--light);
      border-radius: 10px;
    }
    .sensor-value {
      font-size: 1.8em;
      font-weight: bold;
      color: var(--primary);
      margin: 5px 0;
    }
    .sensor-unit {
      color: #7f8c8d;
      font-size: 0.9em;
    }
    .gauge {
      width: 100%;
      height: 20px;
      background: var(--light);
      border-radius: 10px;
      overflow: hidden;
      margin: 10px 0;
    }
    .gauge-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
      transition: width 0.5s ease;
    }
    
    /* Buttons and Controls */
    .btn {
      padding: 12px 20px;
      margin: 5px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;
      min-width: 110px;
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .btn-primary { background: var(--secondary); color: white; }
    .btn-success { background: var(--success); color: white; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-warning { background: var(--warning); color: white; }
    .btn-info { background: var(--info); color: white; }
    .btn-fuel { background: var(--fuel-color); color: white; }
    .btn-ignition { background: var(--ignition-color); color: white; }
    .btn-active { 
      background: var(--dark) !important; 
      color: white;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
    }
    
    .control-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 15px 0;
    }
    .preset-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
      margin: 15px 0;
    }
    
    /* Map Table */
    .map-container {
      overflow-x: auto;
      margin: 20px 0;
    }
    .map-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      background: white;
    }
    .map-table th,
    .map-table td {
      padding: 8px;
      text-align: center;
      border: 1px solid #ddd;
      min-width: 60px;
    }
    .map-table th {
      background: var(--primary);
      color: white;
      position: sticky;
      top: 0;
    }
    .map-table th:first-child {
      position: sticky;
      left: 0;
      background: var(--dark);
      z-index: 2;
    }
    .map-table td:first-child {
      position: sticky;
      left: 0;
      background: var(--light);
      font-weight: bold;
      z-index: 1;
    }
    .map-table input {
      width: 100%;
      padding: 4px;
      border: 1px solid #ddd;
      border-radius: 3px;
      text-align: center;
      font-size: 11px;
    }
    .map-table input:focus {
      border-color: var(--secondary);
      outline: none;
      background: #f0f8ff;
    }
    
    /* Lighting Controls */
    .lighting-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }
    .light-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }
    .light-status {
      font-size: 1.2em;
      font-weight: bold;
      margin: 10px 0;
    }
    .status-on { color: var(--success); }
    .status-off { color: var(--danger); }
    .status-blinking { color: var(--warning); animation: blink 1s infinite; }
    @keyframes blink { 50% { opacity: 0.5; } }
    
    /* Tuning Controls */
    .slider-container {
      margin: 15px 0;
    }
    .slider-container label {
      display: block;
      margin-bottom: 8px;
      font-weight: 600;
      color: var(--primary);
    }
    .slider-value {
      float: right;
      font-weight: bold;
      color: var(--secondary);
    }
    input[type="range"] {
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: var(--light);
      outline: none;
    }
    
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    .status-on { background: var(--success); }
    .status-off { background: var(--danger); }
    .status-fault { background: var(--warning); animation: pulse 1s infinite; }
    @keyframes pulse {
      0% { opacity: 1; }
      50% { opacity: 0.5; }
      100% { opacity: 1; }
    }
    
    .fault-panel {
      background: var(--danger);
      color: white;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 0;
      text-align: center;
      display: none;
    }
    
    .map-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 15px 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    /* Cylinder Info */
    .cylinder-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 15px 0;
    }
    .cylinder-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
    }
    .cylinder-active {
      background: #e8f4fd;
      border: 2px solid var(--secondary);
    }
    
    /* Tune Info */
    .tune-info {
      background: #e8f4fd;
      padding: 15px;
      border-radius: 10px;
      margin: 10px 0;
      border-left: 4px solid var(--secondary);
    }
    
    /* Map Selection */
    .map-selection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      margin: 15px 0;
    }
    .map-item {
      background: var(--light);
      padding: 15px;
      border-radius: 10px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }
    .map-item:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }
    .map-item.active {
      border-color: var(--secondary);
      background: #e8f4fd;
    }
    .map-item h3 {
      color: var(--primary);
      margin-bottom: 10px;
    }
    .map-meta {
      font-size: 0.8em;
      color: #7f8c8d;
      margin: 5px 0;
    }
    .map-actions {
      margin-top: 10px;
      display: flex;
      gap: 5px;
      justify-content: center;
    }
    .map-actions .btn {
      padding: 6px 12px;
      font-size: 12px;
      min-width: auto;
    }
    
    /* View Toggle */
    .view-toggle {
      display: flex;
      background: var(--light);
      border-radius: 8px;
      padding: 5px;
    }
    .view-toggle button {
      padding: 8px 15px;
      border: none;
      background: transparent;
      border-radius: 5px;
      cursor: pointer;
    }
    .view-toggle button.active {
      background: var(--secondary);
      color: white;
    }
    
    /* 3D View */
    .map-3d {
      width: 100%;
      height: 400px;
      background: #1a1a1a;
      border-radius: 10px;
      margin: 15px 0;
      position: relative;
      overflow: hidden;
    }
    .map-3d canvas {
      border-radius: 10px;
    }
    
    /* Graph View */
    .map-graph {
      width: 100%;
      height: 400px;
      background: white;
      border-radius: 10px;
      margin: 15px 0;
      position: relative;
    }
    .map-graph canvas {
      border-radius: 10px;
    }
    
    /* Map Editor Sections */
    .map-editor-section {
      display: none;
    }
    .map-editor-section.active {
      display: block;
    }
    
    /* Visualization Controls */
    .viz-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      background: rgba(0,0,0,0.7);
      padding: 10px;
      border-radius: 5px;
      z-index: 10;
    }
    .viz-controls button {
      background: #444;
      color: white;
      border: none;
      padding: 5px 10px;
      margin: 2px;
      border-radius: 3px;
      cursor: pointer;
    }
    .viz-controls button:hover {
      background: #666;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Professional 4-Cylinder ECU Tuner</h1>
      <p>Advanced Engine Management & Lighting Control</p>
    </div>

<div class="fault-panel" id="faultPanel">
      <strong>CRITICAL FAULT:</strong> <span id="faultMessage"></span>
    </div>

<div class="grid">
      
      <div class="card">
        <h2>Live Engine Data</h2>
        <div class="sensor-grid">
          <div class="sensor-item">
            <div>Engine RPM</div>
            <div class="sensor-value" id="rpmValue">0</div>
            <div class="sensor-unit">RPM</div>
            <div class="gauge"><div class="gauge-fill" id="rpmGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Air/Fuel Ratio</div>
            <div class="sensor-value" id="o2Value">0.00</div>
            <div class="sensor-unit">AFR</div>
            <div class="gauge"><div class="gauge-fill" id="o2Gauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Throttle Position</div>
            <div class="sensor-value" id="tpsValue">0%</div>
            <div class="sensor-unit">Percentage</div>
            <div class="gauge"><div class="gauge-fill" id="tpsGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Engine Load</div>
            <div class="sensor-value" id="mapValue">0%</div>
            <div class="sensor-unit">MAP</div>
            <div class="gauge"><div class="gauge-fill" id="mapGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Engine Temp</div>
            <div class="sensor-value" id="tempValue">0°C</div>
            <div class="sensor-unit">Celsius</div>
            <div class="gauge"><div class="gauge-fill" id="tempGauge" style="width: 0%"></div></div>
          </div>
          <div class="sensor-item">
            <div>Battery Voltage</div>
            <div class="sensor-value" id="voltageValue">0.0</div>
            <div class="sensor-unit">Volts</div>
            <div class="gauge"><div class="gauge-fill" id="voltageGauge" style="width: 0%"></div></div>
          </div>
        </div>
        
        <div style="margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 10px;">
          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
            <div>
              <span class="status-indicator" id="systemStatusLight"></span>
              System: <span id="systemStatusText">OFF</span>
            </div>
            <div>Active Cylinder: <span id="activeCylinder">-</span></div>
            <div>Fuel: <span id="fuelType">gasoline</span></div>
            <div>Tune: <span id="currentTune">performance</span></div>
          </div>
        </div>

<h3>Cylinder Status</h3>
        <div class="cylinder-grid">
          <div class="cylinder-item" id="cyl1">
            <strong>Cylinder 1</strong><br>
            Pulse: <span id="pulse1">0</span>µs<br>
            Timing: <span id="timing1">0</span>°
          </div>
          <div class="cylinder-item" id="cyl2">
            <strong>Cylinder 2</strong><br>
            Pulse: <span id="pulse2">0</span>µs<br>
            Timing: <span id="timing2">0</span>°
          </div>
          <div class="cylinder-item" id="cyl3">
            <strong>Cylinder 3</strong><br>
            Pulse: <span id="pulse3">0</span>µs<br>
            Timing: <span id="timing3">0</span>°
          </div>
          <div class="cylinder-item" id="cyl4">
            <strong>Cylinder 4</strong><br>
            Pulse: <span id="pulse4">0</span>µs<br>
            Timing: <span id="timing4">0</span>°
          </div>
        </div>
      </div>

<div class="card">
        <h2>System Controls</h2>
        
        <div class="control-group">
          <button class="btn btn-success" onclick="toggleSystem()">
            <span class="status-indicator status-off" id="powerLight"></span>
            Power: <span id="powerStatus">OFF</span>
          </button>
          <button class="btn btn-primary" onclick="toggleFuelPump()">
            Fuel Pump: <span id="pumpStatus">OFF</span>
          </button>
        </div>

<div class="tune-info">
          <strong>Active Tune:</strong> <span id="activeTuneName">Performance</span><br>
          <span id="tuneDescription">Balanced performance for street use</span>
        </div>

<h3>Preset Tunes</h3>
        <div class="preset-grid">
          <button class="btn btn-info" onclick="applyPreset('economy')">Economy</button>
          <button class="btn btn-success" onclick="applyPreset('performance')">Performance</button>
          <button class="btn btn-warning" onclick="applyPreset('race')">Race</button>
          <button class="btn btn-primary" onclick="applyPreset('methanol')">Methanol</button>
          <button class="btn btn-primary" onclick="applyPreset('gasoline')">Gasoline</button>
        </div>

<h3>Lighting Controls</h3>
        <div class="lighting-grid">
          <div class="light-item">
            <div>Headlights</div>
            <div class="light-status status-off" id="headlightStatus">OFF</div>
            <button class="btn btn-primary" onclick="toggleHeadlights()">Toggle</button>
          </div>
          <div class="light-item">
            <div>High Beams</div>
            <div class="light-status status-off" id="highbeamStatus">OFF</div>
            <button class="btn btn-primary" onclick="toggleHighbeams()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Left Turn</div>
            <div class="light-status status-off" id="leftTurnStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleLeftTurn()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Right Turn</div>
            <div class="light-status status-off" id="rightTurnStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleRightTurn()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Brake Lights</div>
            <div class="light-status status-off" id="brakeLightStatus">OFF</div>
            <button class="btn btn-danger" onclick="toggleBrakeLights()">Toggle</button>
          </div>
          <div class="light-item">
            <div>Hazard Lights</div>
            <div class="light-status status-off" id="hazardStatus">OFF</div>
            <button class="btn btn-warning" onclick="toggleHazards()">Toggle</button>
          </div>
        </div>

<h3>Quick Tuning</h3>
        <div class="slider-container">
          <label>Fuel Multiplier: <span class="slider-value" id="fuelMultiplierValue">1.00</span></label>
          <input type="range" id="fuelMultiplier" min="0.5" max="1.8" step="0.01" value="1.0" oninput="updateFuelMultiplier(this.value)">
        </div>

<div class="slider-container">
          <label>Ignition Advance: <span class="slider-value" id="ignitionAdvanceValue">12.0</span></label>
          <input type="range" id="ignitionAdvance" min="5.0" max="35.0" step="0.5" value="12.0" oninput="updateIgnitionAdvance(this.value)">
        </div>

<div class="slider-container">
          <label>Target AFR: <span class="slider-value" id="targetAFRValue">14.7</span></label>
          <input type="range" id="targetAFR" min="6.0" max="18.0" step="0.1" value="14.7" oninput="updateTargetAFR(this.value)">
        </div>

<div class="slider-container">
          <label>RPM Limit: <span class="slider-value" id="rpmLimitValue">8000</span></label>
          <input type="range" id="rpmLimit" min="3000" max="12000" step="100" value="8000" oninput="updateRPMLimit(this.value)">
        </div>

<div class="control-group">
          <button class="btn btn-primary" onclick="saveTuning()">Save Tuning</button>
          <button class="btn btn-primary" onclick="loadTuning()">Load Tuning</button>
          <button class="btn btn-danger" onclick="resetTuning()">Reset Defaults</button>
        </div>
      </div>
    </div>

<div class="card">
      <h2>Map Selection</h2>
      
      <div class="map-tabs">
        <button class="map-tab fuel active" onclick="switchMapType('fuel')">Fuel Maps</button>
        <button class="map-tab ignition" onclick="switchMapType('ignition')">Ignition Maps</button>
      </div>
      
      
      <div id="fuelMapSelection" class="map-selection-section">
        <div style="margin-bottom: 15px;">
          <strong>Active Fuel Map:</strong> <span id="selectedFuelMap">Base Fuel Map</span> | 
          <strong>Status:</strong> <span id="fuelMapStatus">Loaded</span>
        </div>
        
        <div class="map-selection-grid" id="fuelMapSelectionGrid">
          
        </div>
      </div>
      
      
      <div id="ignitionMapSelection" class="map-selection-section" style="display: none;">
        <div style="margin-bottom: 15px;">
          <strong>Active Ignition Map:</strong> <span id="selectedIgnitionMap">Base Ignition Map</span> | 
          <strong>Status:</strong> <span id="ignitionMapStatus">Loaded</span>
        </div>
        
        <div class="map-selection-grid" id="ignitionMapSelectionGrid">
          
        </div>
      </div>
      
      <div class="control-group" style="margin-top: 15px;">
        <button class="btn btn-primary" onclick="showUploadDialog()">Upload Custom Map</button>
        <button class="btn btn-info" onclick="createNewMap()">Create New Map</button>
        <button class="btn btn-warning" onclick="flashToECU()">Flash Selected to ECU</button>
      </div>
    </div>

<div class="card">
      <h2>Professional Map Editor</h2>
      
      <div class="map-tabs">
        <button class="map-tab fuel active" onclick="switchEditor('fuel')">Fuel Map Editor</button>
        <button class="map-tab ignition" onclick="switchEditor('ignition')">Ignition Map Editor</button>
      </div>
      
      
      <div id="fuelMapEditor" class="map-editor-section active">
        <div class="map-controls">
          <div>
            <strong>Editing:</strong> <span id="editingFuelMapName">Base Fuel Map</span>
          </div>
          <div class="view-toggle">
            <button class="active" onclick="switchFuelView('table')">Table View</button>
            <button onclick="switchFuelView('3d')">3D View</button>
            <button onclick="switchFuelView('graph')">Graph View</button>
          </div>
          <div>
            <button class="btn btn-fuel" onclick="saveCurrentFuelMap()">Save Fuel Map</button>
            <button class="btn btn-info" onclick="exportFuelMap()">Export Fuel Map</button>
          </div>
        </div>
        
        
        <div id="fuelTableView">
          <div class="map-container">
            <table class="map-table" id="fuelMapTable">
              <thead id="fuelMapHeader">
                
              </thead>
              <tbody id="fuelMapBody">
                
              </tbody>
            </table>
          </div>
        </div>
        
        
        <div id="fuelView3d" style="display: none;">
          <div class="map-3d" id="fuel3dContainer">
            <div class="viz-controls">
              <button onclick="resetFuel3DView()">Reset View</button>
              <button onclick="toggleFuelWireframe()">Wireframe</button>
            </div>
          </div>
        </div>
        
        
        <div id="fuelViewGraph" style="display: none;">
          <div class="map-graph">
            <canvas id="fuelGraphCanvas"></canvas>
          </div>
        </div>
        
        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-fuel" onclick="updateFuelMap()">Update Fuel Map</button>
          <button class="btn btn-success" onclick="autoTuneFuel()">Auto-Tune Fuel</button>
          <button class="btn btn-info" onclick="smoothFuelMap()">Smooth Fuel Map</button>
          <button class="btn btn-warning" onclick="resetFuelMap()">Reset Fuel Map</button>
          <button class="btn btn-danger" onclick="flashFuelToECU()">Flash Fuel to ECU</button>
        </div>

<div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-primary" onclick="addFuelRPMRow()">Add RPM Point</button>
          <button class="btn btn-primary" onclick="removeFuelRPMRow()">Remove RPM Point</button>
          <button class="btn btn-info" onclick="exportFuelMap()">Export Fuel Map</button>
          <button class="btn btn-info" onclick="importFuelMap()">Import Fuel Map</button>
        </div>
      </div>
      
      
      <div id="ignitionMapEditor" class="map-editor-section">
        <div class="map-controls">
          <div>
            <strong>Editing:</strong> <span id="editingIgnitionMapName">Base Ignition Map</span>
          </div>
          <div class="view-toggle">
            <button class="active" onclick="switchIgnitionView('table')">Table View</button>
            <button onclick="switchIgnitionView('3d')">3D View</button>
            <button onclick="switchIgnitionView('graph')">Graph View</button>
          </div>
          <div>
            <button class="btn btn-ignition" onclick="saveCurrentIgnitionMap()">Save Ignition Map</button>
            <button class="btn btn-info" onclick="exportIgnitionMap()">Export Ignition Map</button>
          </div>
        </div>
        
        
        <div id="ignitionTableView">
          <div class="map-container">
            <table class="map-table" id="ignitionMapTable">
              <thead id="ignitionMapHeader">
                
              </thead>
              <tbody id="ignitionMapBody">
                
              </tbody>
            </table>
          </div>
        </div>
        
        
        <div id="ignitionView3d" style="display: none;">
          <div class="map-3d" id="ignition3dContainer">
            <div class="viz-controls">
              <button onclick="resetIgnition3DView()">Reset View</button>
              <button onclick="toggleIgnitionWireframe()">Wireframe</button>
            </div>
          </div>
        </div>
        
        
        <div id="ignitionViewGraph" style="display: none;">
          <div class="map-graph">
            <canvas id="ignitionGraphCanvas"></canvas>
          </div>
        </div>
        
        <div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-ignition" onclick="updateIgnitionMap()">Update Ignition Map</button>
          <button class="btn btn-success" onclick="autoTuneIgnition()">Auto-Tune Ignition</button>
          <button class="btn btn-info" onclick="smoothIgnitionMap()">Smooth Ignition Map</button>
          <button class="btn btn-warning" onclick="resetIgnitionMap()">Reset Ignition Map</button>
          <button class="btn btn-danger" onclick="flashIgnitionToECU()">Flash Ignition to ECU</button>
        </div>

<div class="control-group" style="margin-top: 15px;">
          <button class="btn btn-primary" onclick="addIgnitionRPMRow()">Add RPM Point</button>
          <button class="btn btn-primary" onclick="removeIgnitionRPMRow()">Remove RPM Point</button>
          <button class="btn btn-info" onclick="exportIgnitionMap()">Export Ignition Map</button>
          <button class="btn btn-info" onclick="importIgnitionMap()">Import Ignition Map</button>
        </div>
      </div>
    </div>
  </div>

<div id="uploadDialog" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
    <div style="background: white; padding: 25px; border-radius: 15px; width: 90%; max-width: 500px;">
      <h3>Upload Custom Map</h3>
      <div style="margin: 15px 0;">
        <input type="file" id="mapFile" accept=".json,.bin,.hex" style="margin: 10px 0;">
        <div style="margin: 10px 0;">
          <label>Map Type:</label>
          <select id="mapType" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">
            <option value="fuel">Fuel Map</option>
            <option value="ignition">Ignition Map</option>
          </select>
        </div>
        <div style="margin: 10px 0;">
          <label>Map Name:</label>
          <input type="text" id="newMapName" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px;">
        </div>
        <div style="margin: 10px 0;">
          <label>Description:</label>
          <textarea id="newMapDescription" style="width: 100%; padding: 8px; margin: 5px 0; border: 1px solid #ddd; border-radius: 4px; height: 80px;">