HTML Olarak çalışan Versiyonu

old/app.jsx

@@ -0,0 +1,603 @@
+import React, { useState } from 'react';
+import { Download, Settings, Maximize2, Move, Box } from 'lucide-react';
+
+export default function PrinterCalibration() {
+  const [activeTab, setActiveTab] = useState('x-axis');
+  const [settings, setSettings] = useState({
+    bedTemp: 60,
+    nozzleTemp: 200,
+    bedSize: { x: 220, y: 220, z: 250 },
+    nozzleDiameter: 0.4,
+    filamentDiameter: 1.75,
+  });
+
+  const [xAxisConfig, setXAxisConfig] = useState({
+    distance: 100,
+    steps: 80,
+    measured: 0,
+  });
+
+  const [yAxisConfig, setYAxisConfig] = useState({
+    distance: 100,
+    steps: 80,
+    measured: 0,
+  });
+
+  const [zAxisConfig, setZAxisConfig] = useState({
+    distance: 10,
+    steps: 400,
+    measured: 0,
+  });
+
+  const [extruderConfig, setExtruderConfig] = useState({
+    distance: 100,
+    steps: 93,
+    measured: 0,
+  });
+
+  const [skewConfig, setSkewConfig] = useState({
+    ac: 141.4,
+    bd: 141.4,
+    ad: 141.4,
+  });
+
+  const calculateXSteps = () => {
+    if (xAxisConfig.measured > 0) {
+      const newSteps = (xAxisConfig.distance / xAxisConfig.measured) * xAxisConfig.steps;
+      return newSteps.toFixed(2);
+    }
+    return xAxisConfig.steps;
+  };
+
+  const calculateYSteps = () => {
+    if (yAxisConfig.measured > 0) {
+      const newSteps = (yAxisConfig.distance / yAxisConfig.measured) * yAxisConfig.steps;
+      return newSteps.toFixed(2);
+    }
+    return yAxisConfig.steps;
+  };
+
+  const calculateZSteps = () => {
+    if (zAxisConfig.measured > 0) {
+      const newSteps = (zAxisConfig.distance / zAxisConfig.measured) * zAxisConfig.steps;
+      return newSteps.toFixed(2);
+    }
+    return zAxisConfig.steps;
+  };
+
+  const calculateESteps = () => {
+    if (extruderConfig.measured > 0) {
+      const newSteps = (extruderConfig.distance / extruderConfig.measured) * extruderConfig.steps;
+      return newSteps.toFixed(2);
+    }
+    return extruderConfig.steps;
+  };
+
+  const calculateSkew = () => {
+    const ac = parseFloat(skewConfig.ac);
+    const bd = parseFloat(skewConfig.bd);
+    const ad = parseFloat(skewConfig.ad);
+    
+    if (ac > 0 && bd > 0 && ad > 0) {
+      const xy_skew = Math.atan2(ac - 141.4, 100) * (180 / Math.PI);
+      const xz_skew = Math.atan2(bd - 141.4, 100) * (180 / Math.PI);
+      const yz_skew = Math.atan2(ad - 141.4, 100) * (180 / Math.PI);
+      
+      return {
+        xy: xy_skew.toFixed(4),
+        xz: xz_skew.toFixed(4),
+        yz: yz_skew.toFixed(4)
+      };
+    }
+    return { xy: '0.0000', xz: '0.0000', yz: '0.0000' };
+  };
+
+  const generateGCode = () => {
+    let gcode = '; 3D Yazıcı Kalibrasyon G-Code\n';
+    gcode += '; Oluşturma Tarihi: ' + new Date().toLocaleString('tr-TR') + '\n\n';
+    
+    gcode += '; Sıcaklık Ayarları\n';
+    gcode += `M140 S${settings.bedTemp} ; Tabla sıcaklığı ayarla\n`;
+    gcode += `M104 S${settings.nozzleTemp} ; Nozzle sıcaklığı ayarla\n`;
+    gcode += `M190 S${settings.bedTemp} ; Tabla sıcaklığını bekle\n`;
+    gcode += `M109 S${settings.nozzleTemp} ; Nozzle sıcaklığını bekle\n\n`;
+
+    switch(activeTab) {
+      case 'x-axis':
+        gcode += '; X Ekseni Kalibrasyon Testi\n';
+        gcode += 'G28 ; Home all axes\n';
+        gcode += 'G90 ; Absolute positioning\n';
+        gcode += 'G1 Z10 F3000 ; Z eksenini kaldır\n';
+        gcode += `G1 X${xAxisConfig.distance} F3000 ; X ekseninde ${xAxisConfig.distance}mm hareket\n`;
+        gcode += 'M400 ; Hareketi tamamla\n';
+        gcode += `; Mevcut steps/mm: ${xAxisConfig.steps}\n`;
+        gcode += `; Hesaplanan yeni steps/mm: ${calculateXSteps()}\n`;
+        gcode += `; Firmware'e uygulamak için: M92 X${calculateXSteps()}\n`;
+        gcode += `; Kalıcı kaydetmek için: M500\n`;
+        break;
+
+      case 'y-axis':
+        gcode += '; Y Ekseni Kalibrasyon Testi\n';
+        gcode += 'G28 ; Home all axes\n';
+        gcode += 'G90 ; Absolute positioning\n';
+        gcode += 'G1 Z10 F3000 ; Z eksenini kaldır\n';
+        gcode += `G1 Y${yAxisConfig.distance} F3000 ; Y ekseninde ${yAxisConfig.distance}mm hareket\n`;
+        gcode += 'M400 ; Hareketi tamamla\n';
+        gcode += `; Mevcut steps/mm: ${yAxisConfig.steps}\n`;
+        gcode += `; Hesaplanan yeni steps/mm: ${calculateYSteps()}\n`;
+        gcode += `; Firmware'e uygulamak için: M92 Y${calculateYSteps()}\n`;
+        gcode += `; Kalıcı kaydetmek için: M500\n`;
+        break;
+
+      case 'z-axis':
+        gcode += '; Z Ekseni Kalibrasyon Testi\n';
+        gcode += 'G28 ; Home all axes\n';
+        gcode += 'G90 ; Absolute positioning\n';
+        gcode += `G1 Z${zAxisConfig.distance} F300 ; Z ekseninde ${zAxisConfig.distance}mm hareket\n`;
+        gcode += 'M400 ; Hareketi tamamla\n';
+        gcode += `; Mevcut steps/mm: ${zAxisConfig.steps}\n`;
+        gcode += `; Hesaplanan yeni steps/mm: ${calculateZSteps()}\n`;
+        gcode += `; Firmware'e uygulamak için: M92 Z${calculateZSteps()}\n`;
+        gcode += `; Kalıcı kaydetmek için: M500\n`;
+        break;
+
+      case 'extruder':
+        gcode += '; Extruder Kalibrasyon Testi\n';
+        gcode += 'G28 ; Home all axes\n';
+        gcode += 'G90 ; Absolute positioning\n';
+        gcode += 'M82 ; Absolute extrusion mode\n';
+        gcode += 'G92 E0 ; Extruder pozisyonunu sıfırla\n';
+        gcode += `G1 E${extruderConfig.distance} F100 ; ${extruderConfig.distance}mm filament ekstrüd et\n`;
+        gcode += 'M400 ; Hareketi tamamla\n';
+        gcode += `; Mevcut E steps/mm: ${extruderConfig.steps}\n`;
+        gcode += `; Hesaplanan yeni E steps/mm: ${calculateESteps()}\n`;
+        gcode += `; Firmware'e uygulamak için: M92 E${calculateESteps()}\n`;
+        gcode += `; Kalıcı kaydetmek için: M500\n`;
+        break;
+
+      case 'skew':
+        const skewValues = calculateSkew();
+        gcode += '; Çarpıklık Düzeltme G-Code\n';
+        gcode += `; XY Çarpıklık: ${skewValues.xy}°\n`;
+        gcode += `; XZ Çarpıklık: ${skewValues.xz}°\n`;
+        gcode += `; YZ Çarpıklık: ${skewValues.yz}°\n\n`;
+        gcode += `M852 I${skewValues.xy} J${skewValues.xz} K${skewValues.yz} ; Çarpıklık düzeltmesini uygula\n`;
+        gcode += 'M500 ; Ayarları kaydet\n';
+        break;
+      
+      default:
+        break;
+    }
+
+    gcode += '\n; Kalibrasyon tamamlandı\n';
+    gcode += 'M104 S0 ; Nozzle ısıtıcısını kapat\n';
+    gcode += 'M140 S0 ; Tabla ısıtıcısını kapat\n';
+    gcode += 'G28 X Y ; X ve Y eksenlerini home pozisyonuna getir\n';
+    gcode += 'M84 ; Motorları devre dışı bırak\n';
+
+    return gcode;
+  };
+
+  const downloadGCode = () => {
+    const gcode = generateGCode();
+    const blob = new Blob([gcode], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `calibration_${activeTab}_${Date.now()}.gcode`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const tabs = [
+    { id: 'x-axis', name: 'X Ekseni', icon: Move },
+    { id: 'y-axis', name: 'Y Ekseni', icon: Move },
+    { id: 'z-axis', name: 'Z Ekseni', icon: Move },
+    { id: 'extruder', name: 'Extruder', icon: Box },
+    { id: 'skew', name: 'Çarpıklık', icon: Maximize2 },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 text-white p-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent">
+            3D Yazıcı Kalibrasyon
+          </h1>
+          <p className="text-slate-400">Profesyonel Kalibrasyon ve G-code Üretici</p>
+        </div>
+
+        <div className="bg-slate-800/50 backdrop-blur rounded-lg p-6 mb-6 border border-slate-700">
+          <div className="flex items-center gap-2 mb-4">
+            <Settings className="text-cyan-400" size={20} />
+            <h2 className="text-xl font-semibold">Genel Ayarlar</h2>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Tabla Sıcaklığı (°C)</label>
+              <input
+                type="number"
+                value={settings.bedTemp}
+                onChange={(e) => setSettings({...settings, bedTemp: parseInt(e.target.value)})}
+                className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Nozzle Sıcaklığı (°C)</label>
+              <input
+                type="number"
+                value={settings.nozzleTemp}
+                onChange={(e) => setSettings({...settings, nozzleTemp: parseInt(e.target.value)})}
+                className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+              />
+            </div>
+            <div>
+              <label className="block text-sm text-slate-400 mb-1">Nozzle Çapı (mm)</label>
+              <input
+                type="number"
+                step="0.1"
+                value={settings.nozzleDiameter}
+                onChange={(e) => setSettings({...settings, nozzleDiameter: parseFloat(e.target.value)})}
+                className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-2 mb-6 overflow-x-auto">
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex items-center gap-2 px-4 py-3 rounded-lg transition-all whitespace-nowrap ${
+                  activeTab === tab.id
+                    ? 'bg-gradient-to-r from-cyan-500 to-blue-500 text-white shadow-lg'
+                    : 'bg-slate-800/50 text-slate-400 hover:bg-slate-700'
+                }`}
+              >
+                <Icon size={18} />
+                {tab.name}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="bg-slate-800/50 backdrop-blur rounded-lg p-6 border border-slate-700 mb-6">
+          {activeTab === 'x-axis' && (
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-cyan-400">X Ekseni Kalibrasyonu</h3>
+              <p className="text-slate-400 mb-6">
+                X ekseninin hassasiyetini ayarlamak için aşağıdaki adımları izleyin.
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Hedef Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    value={xAxisConfig.distance}
+                    onChange={(e) => setXAxisConfig({...xAxisConfig, distance: parseInt(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Mevcut Steps/mm</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={xAxisConfig.steps}
+                    onChange={(e) => setXAxisConfig({...xAxisConfig, steps: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Ölçülen Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={xAxisConfig.measured}
+                    onChange={(e) => setXAxisConfig({...xAxisConfig, measured: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                    placeholder="Test sonrası giriniz"
+                  />
+                </div>
+              </div>
+              {xAxisConfig.measured > 0 && (
+                <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4">
+                  <h4 className="font-semibold text-cyan-400 mb-2">Hesaplanan Değer:</h4>
+                  <p className="text-2xl font-bold text-cyan-300">{calculateXSteps()} steps/mm</p>
+                  <p className="text-sm text-slate-400 mt-2">
+                    Firmware'e uygulamak için: <code className="text-cyan-400">M92 X{calculateXSteps()}</code>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'y-axis' && (
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-cyan-400">Y Ekseni Kalibrasyonu</h3>
+              <p className="text-slate-400 mb-6">
+                Y ekseninin hassasiyetini ayarlamak için aşağıdaki adımları izleyin.
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Hedef Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    value={yAxisConfig.distance}
+                    onChange={(e) => setYAxisConfig({...yAxisConfig, distance: parseInt(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Mevcut Steps/mm</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={yAxisConfig.steps}
+                    onChange={(e) => setYAxisConfig({...yAxisConfig, steps: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Ölçülen Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={yAxisConfig.measured}
+                    onChange={(e) => setYAxisConfig({...yAxisConfig, measured: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                    placeholder="Test sonrası giriniz"
+                  />
+                </div>
+              </div>
+              {yAxisConfig.measured > 0 && (
+                <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4">
+                  <h4 className="font-semibold text-cyan-400 mb-2">Hesaplanan Değer:</h4>
+                  <p className="text-2xl font-bold text-cyan-300">{calculateYSteps()} steps/mm</p>
+                  <p className="text-sm text-slate-400 mt-2">
+                    Firmware'e uygulamak için: <code className="text-cyan-400">M92 Y{calculateYSteps()}</code>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'z-axis' && (
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-cyan-400">Z Ekseni Kalibrasyonu</h3>
+              <p className="text-slate-400 mb-6">
+                Z ekseninin hassasiyetini ayarlamak için aşağıdaki adımları izleyin.
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Hedef Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    value={zAxisConfig.distance}
+                    onChange={(e) => setZAxisConfig({...zAxisConfig, distance: parseInt(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Mevcut Steps/mm</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={zAxisConfig.steps}
+                    onChange={(e) => setZAxisConfig({...zAxisConfig, steps: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Ölçülen Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={zAxisConfig.measured}
+                    onChange={(e) => setZAxisConfig({...zAxisConfig, measured: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                    placeholder="Test sonrası giriniz"
+                  />
+                </div>
+              </div>
+              {zAxisConfig.measured > 0 && (
+                <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4">
+                  <h4 className="font-semibold text-cyan-400 mb-2">Hesaplanan Değer:</h4>
+                  <p className="text-2xl font-bold text-cyan-300">{calculateZSteps()} steps/mm</p>
+                  <p className="text-sm text-slate-400 mt-2">
+                    Firmware'e uygulamak için: <code className="text-cyan-400">M92 Z{calculateZSteps()}</code>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'extruder' && (
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-cyan-400">Extruder Kalibrasyonu</h3>
+              <p className="text-slate-400 mb-6">
+                Extruder'ın doğru miktarda filament ekstrüd etmesini sağlayın.
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Hedef Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    value={extruderConfig.distance}
+                    onChange={(e) => setExtruderConfig({...extruderConfig, distance: parseInt(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Mevcut E Steps/mm</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={extruderConfig.steps}
+                    onChange={(e) => setExtruderConfig({...extruderConfig, steps: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">Ölçülen Mesafe (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={extruderConfig.measured}
+                    onChange={(e) => setExtruderConfig({...extruderConfig, measured: parseFloat(e.target.value)})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                    placeholder="Test sonrası giriniz"
+                  />
+                </div>
+              </div>
+              {extruderConfig.measured > 0 && (
+                <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4">
+                  <h4 className="font-semibold text-cyan-400 mb-2">Hesaplanan Değer:</h4>
+                  <p className="text-2xl font-bold text-cyan-300">{calculateESteps()} steps/mm</p>
+                  <p className="text-sm text-slate-400 mt-2">
+                    Firmware'e uygulamak için: <code className="text-cyan-400">M92 E{calculateESteps()}</code>
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === 'skew' && (
+            <div>
+              <h3 className="text-2xl font-semibold mb-4 text-cyan-400">Çarpıklık Kalibrasyonu</h3>
+              <p className="text-slate-400 mb-6">
+                100x100mm kare baskı yapın ve köşegen mesafelerini ölçün.
+              </p>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">AC Köşegeni (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={skewConfig.ac}
+                    onChange={(e) => setSkewConfig({...skewConfig, ac: e.target.value})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">Sol üst - Sağ alt</p>
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">BD Köşegeni (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={skewConfig.bd}
+                    onChange={(e) => setSkewConfig({...skewConfig, bd: e.target.value})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">Sağ üst - Sol alt</p>
+                </div>
+                <div>
+                  <label className="block text-sm text-slate-400 mb-1">AD Köşegeni (mm)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    value={skewConfig.ad}
+                    onChange={(e) => setSkewConfig({...skewConfig, ad: e.target.value})}
+                    className="w-full bg-slate-700 border border-slate-600 rounded px-3 py-2"
+                  />
+                  <p className="text-xs text-slate-500 mt-1">Dikey köşegen</p>
+                </div>
+              </div>
+              <div className="bg-cyan-500/10 border border-cyan-500/30 rounded-lg p-4">
+                <h4 className="font-semibold text-cyan-400 mb-3">Hesaplanan Çarpıklık Değerleri:</h4>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div>
+                    <p className="text-sm text-slate-400">XY Çarpıklığı</p>
+                    <p className="text-xl font-bold text-cyan-300">{calculateSkew().xy}°</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-slate-400">XZ Çarpıklığı</p>
+                    <p className="text-xl font-bold text-cyan-300">{calculateSkew().xz}°</p>
+                  </div>
+                  <div>
+                    <p className="text-sm text-slate-400">YZ Çarpıklığı</p>
+                    <p className="text-xl font-bold text-cyan-300">{calculateSkew().yz}°</p>
+                  </div>
+                </div>
+                <p className="text-sm text-slate-400 mt-4">
+                  Firmware'e uygulamak için: <code className="text-cyan-400">M852 I{calculateSkew().xy} J{calculateSkew().xz} K{calculateSkew().yz}</code>
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="bg-slate-800/50 backdrop-blur rounded-lg p-6 border border-slate-700">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <div>
+              <h3 className="text-lg font-semibold mb-1">G-code Oluştur</h3>
+              <p className="text-sm text-slate-400">
+                Seçili kalibrasyon için G-code dosyası indir
+              </p>
+            </div>
+            <button
+              onClick={downloadGCode}
+              className="flex items-center gap-2 bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 px-6 py-3 rounded-lg font-semibold transition-all shadow-lg hover:shadow-cyan-500/50"
+            >
+              <Download size={20} />
+              G-code İndir
+            </button>
+          </div>
+          
+          <div className="mt-6">
+            <h4 className="text-sm font-semibold text-slate-400 mb-2">G-code Önizleme:</h4>
+            <div className="bg-slate-900 rounded-lg p-4 overflow-x-auto">
+              <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">
+                {generateGCode()}
+              </pre>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-6 bg-blue-500/10 border border-blue-500/30 rounded-lg p-6">
+          <h3 className="text-lg font-semibold text-blue-400 mb-3">📝 Kullanım Talimatları</h3>
+          <div className="space-y-3 text-sm text-slate-300">
+            <div>
+              <strong className="text-blue-300">X/Y/Z Ekseni Kalibrasyonu:</strong>
+              <ol className="list-decimal list-inside ml-4 mt-1 space-y-1">
+                <li>Hedef mesafeyi belirleyin (örn: 100mm)</li>
+                <li>Mevcut steps/mm değerinizi girin</li>
+                <li>G-code'u indirin ve yazıcınıza gönderin</li>
+                <li>Hareket tamamlandıktan sonra gerçek mesafeyi ölçün</li>
+                <li>Ölçülen mesafeyi ilgili alana girin</li>
+                <li>Hesaplanan yeni steps/mm değerini kaydedin</li>
+              </ol>
+            </div>
+            <div>
+              <strong className="text-blue-300">Extruder Kalibrasyonu:</strong>
+              <ol className="list-decimal list-inside ml-4 mt-1 space-y-1">
+                <li>Filamenti nozzle'dan 120mm işaretleyin</li>
+                <li>100mm ekstrüzyon komutu gönderin</li>
+                <li>Kalan mesafeyi ölçün ve gerçek ekstrüzyon miktarını hesaplayın</li>
+                <li>Ölçülen değeri girin ve yeni E steps/mm'yi uygulayın</li>
+              </ol>
+            </div>
+            <div>
+              <strong className="text-blue-300">Çarpıklık Kalibrasyonu:</strong>
+              <ol className="list-decimal list-inside ml-4 mt-1 space-y-1">
+                <li>100x100mm kalibrasyon karesi bastırın</li>
+                <li>Köşegen mesafeleri (AC, BD, AD) hassas ölçün</li>
+                <li>Değerleri girin ve çarpıklık açılarını görün</li>
+                <li>G-code ile düzeltmeyi uygulayın</li>
+              </ol>
+            </div>
+            <div className="pt-3 border-t border-blue-500/30">
+              <strong className="text-yellow-400">⚠️ Önemli:</strong>
+              <p className="mt-1">G-code komutlarını uyguladıktan sonra <code className="bg-slate-800 px-2 py-1 rounded text-yellow-300">M500</code> komutu ile ayarları kalıcı olarak kaydetmeyi unutmayın!</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}