G-code Generator — CNC Label Maker | G-code Üretici — CNC Etiket Makinesi

Free, browser-based text & SVG to G-code converter for CNC engravers and pen plotters — with true-scale simulation, work-area safety checks and a validating G-code editor. Fully bilingual (🇬🇧 English / 🇹🇷 Türkçe).

Ücretsiz, tarayıcı tabanlı metin ve SVG'den G-code dönüştürücü — CNC çizici ve kalem plotter'lar için; gerçek ölçekli simülasyon, tabla sınırı güvenlik kontrolü ve doğrulamalı G-code editörü ile. Tamamen iki dilli (İngilizce / Türkçe).

👉 Live demo / Canlı demo: https://civaninatolyesi.github.io/Gcode-Uretici/

---

English

What is this?

A 2D CAM tool that runs entirely in your browser (no install, no upload — your data never leaves your machine). It converts typed text (primary feature) or an SVG file (secondary feature) into safe, optimized G-code for GRBL-style CNC plotters/engravers, simulates the result on a true-scale canvas of your machine table, and locks the download if the drawing exceeds the work area.

Features

• ✍️ Text → G-code (opentype.js): vector toolpaths from typed labels, Turkish characters included. The default font is bundled (works offline).
• 🖼️ SVG → G-code: path, line, rect, circle, ellipse, polyline, polygon + nested transforms.
• ⚡ Web Worker: heavy computation never blocks the UI.
• 🧭 Nearest-Neighbor path ordering: less air travel time.
• 📐 Live physical size + table-limit safety: if the drawing overflows the table, a warning is shown and the download is locked.
• 👁️ G-code simulation: G0 (travel) dashed red, G1 (cutting) solid blue, with playback, speed control and zoom.
• ✒️ Single-stroke Hershey fonts (Simplex, Script, Gothic): one pass through the letter centerline — ideal for thick pens, far less G-code.
• 🏷️ Cable (flag) labels: text drawn twice with a fold gap that wraps the cable; both faces of the flag show the text.
• 🔢 Multi-copy grid, frames, rotation, alignment, independent X/Y stretch.
• 📝 Validating G-code editor with per-line errors and warnings.
• 🌐 Bilingual UI (EN/TR) — switch anytime; also via ?lang=en / ?lang=tr.

Quick start

Node.js 18+ required → https://nodejs.org

npm install
npm run dev        # http://localhost:5173

Production build:

npm run build      # tsc + Vite → dist/  (static, host anywhere)
npm run preview    # preview the build locally

Usage

1. Pick a mode from the top tabs: Label (Text) or SVG File.
2. Text mode: type your text and font size (mm). SVG mode: drag & drop an .svg file.
3. Set the Table Limits (Max X / Max Y) and Machine Parameters.
4. Generate G-Code → inspect the simulation and live dimensions.
5. If it fits the table, Download G-Code saves the .gcode file. (If not, a red warning appears and the download is locked.)

CNC parameters (defaults)

Parameter	Description	Default
Safe Z	Retract height	5 mm
Draw Z	Plunge/drawing depth	0 mm
Feed Rate (F)	Cutting feed	1000 mm/min
Precision (Tolerance)	Curve flattening step	0.1 mm
Table Max X / Max Y	Physical work area	200 × 200 mm

Safe Z > Draw Z is enforced; all feeds must be > 0.

G-code safety summary

• Header G21 (metric) + G90 (absolute).
• G0 Z[SafeZ] before any X/Y motion.
• Per path: G0 X Y → G1 Z[DrawZ] F[Feed] (plunge) → G1 X Y (cut) → G0 Z[SafeZ] (retract).
• Footer: Safe Z → G0 X0 Y0 → M30.
• Origin is bottom-left (0,0); all geometry stays in the positive quadrant.

---

Türkçe

Bu nedir?

Tamamen tarayıcıda çalışan bir 2D CAM aracı (kurulum yok, yükleme yok — veriniz makinenizden çıkmaz). Yazdığınız metni (ana özellik) veya bir SVG dosyasını (yan özellik) GRBL tarzı CNC çizici/plotter için güvenli, optimize edilmiş G-code'a dönüştürür; sonucu makine tablasının gerçek ölçekli görünümünde simüle eder ve çizim tablayı aşarsa indirmeyi kilitler.

Özellikler

• ✍️ Metin → G-code (opentype.js): Türkçe karakterler dahil. Varsayılan font gömülü (offline çalışır).
• 🖼️ SVG → G-code: path, line, rect, circle, ellipse, polyline, polygon + iç içe transform desteği.
• ⚡ Web Worker: ağır hesap UI'yi bloklamaz.
• 🧭 Nearest-Neighbor yol optimizasyonu: boşta gezinme süresini azaltır.
• 📐 Canlı fiziksel boyut + tabla sınırı güvenliği: çizim tablayı aşarsa uyarı verir ve indirmeyi kilitler.
• 👁️ G-code simülasyonu: G0 (boşta) kesik kırmızı, G1 (kesim) düz mavi; oynatma, hız ve yakınlaştırma kontrolleri.
• ✒️ Tek çizgili Hershey fontları (Simplex, El Yazısı, Gotik): kalın kalem için ideal, çok daha az G-code.
• 🏷️ Kablo (bayrak) etiketi: yazı iki kez, arada kabloyu saran katlama payı.
• 🔢 Çoklu kopya ızgarası, çerçeve, döndürme, hizalama, bağımsız X/Y ölçek.
• 📝 Doğrulamalı G-code editörü: satır bazında hata ve uyarılar.
• 🌐 İki dilli arayüz (TR/EN) — istediğiniz an değiştirin; ?lang=tr / ?lang=en ile de seçilebilir.

Hızlı başlangıç

Node.js 18+ gereklidir → https://nodejs.org

npm install
npm run dev        # http://localhost:5173

Windows PowerShell'de npm run dev script izni hatası alırsanız: npm.cmd run dev veya Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Üretim derlemesi:

npm run build      # tsc + Vite → dist/   (statik, herhangi bir host'a koyulabilir)
npm run preview    # derlemeyi yerelde önizle

Kullanım

1. Üstteki sekmeden modu seç: Etiket (Metin) veya SVG Dosyası.
2. Metin modu: yazıyı ve yazı boyutunu (mm) gir. SVG modu: .svg dosyasını sürükle-bırak.
3. Tabla Sınırları (Max X / Max Y) ve Makine Parametrelerini ayarla.
4. G-Code Üret → simülasyonu ve canlı boyutu incele.
5. Boyut tablaya sığıyorsa G-Code İndir ile .gcode dosyasını kaydet. (Sığmıyorsa kırmızı uyarı çıkar ve indirme kilitlenir.)

G-code güvenlik özeti

• Header G21 (metrik) + G90 (mutlak).
• Herhangi bir X/Y hareketinden önce G0 Z[SafeZ].
• Yol: G0 X Y → G1 Z[DrawZ] F[Feed] (dalış) → G1 X Y (çizim) → G0 Z[SafeZ] (geri çekil).
• Footer: Güvenli Z → G0 X0 Y0 → M30.
• Origin sol-alt (0,0); tüm geometri pozitif kadranda.

Tam biçim ve örnek çıktı → docs/GCODE-REFERANSI.md.

---

Documentation / Dokümantasyon

Doc	Content
docs/ARCHITECTURE.md	System design, data flow, thread boundary / Sistem tasarımı, veri akışı
docs/GELISTIRME-REHBERI.md	Task-oriented dev recipes / Görev odaklı geliştirme reçeteleri
docs/GCODE-REFERANSI.md	Exact G-code output format / Üretilen G-code'un tam biçimi
docs/adr/	Architecture Decision Records / Mimari Karar Kayıtları

Project structure / Proje yapısı

src/
├─ main.tsx                 React root mount
├─ App.tsx                  Layout, tabs, dimension panel, download
├─ i18n.ts                  Bilingual (TR/EN) dictionary + language store
├─ store.ts                 Zustand state + checkWithinLimits()
├─ types.ts                 Main↔worker contract (shared types)
├─ useGcodeGenerator.ts     Worker lifecycle + generate() orchestration
├─ textToPaths.ts           Text → polyline (opentype.js)        [main thread]
├─ textLayout.ts            Multi-line/frame/copies composition  [main thread]
├─ svgFlatten.ts            SVG → polyline (browser geometry)    [main thread]
├─ gcode.worker.ts          NN ordering + G-code + bbox + moves  [WEB WORKER]
├─ gcodeValidator.ts        G-code line validation (editor)
└─ components/
   ├─ TextInputPanel.tsx    Text + font size
   ├─ Dropzone.tsx          SVG drag & drop
   ├─ ConfigPanel.tsx       Table limits + machine parameters
   ├─ AdvancedPanel.tsx     Fonts, frames, cable labels, copies…
   ├─ GCodeEditor.tsx       Editable, validating G-code viewer
   └─ GCodeVisualizer.tsx   Canvas simulation
public/fonts/Roboto-Regular.ttf   Default font (Apache-2.0)
public/robots.txt, sitemap.xml    SEO assets
docs/                             Architecture, guides, ADRs

Tech stack / Teknoloji yığını

React · TypeScript (strict) · Vite · Tailwind CSS · Zustand · Web Worker · opentype.js · browser SVG geometry engine.

Keywords

g-code generator · svg to gcode · text to gcode · cnc label maker · pen plotter · grbl · hershey fonts · cable label · gcode üretici · cnc etiket makinesi · svg gcode dönüştürücü · kablo etiketi

License / Lisans

Default font Roboto (Apache License 2.0, Google Fonts).