Skip to main content

​
Overview

The Mini-Compilador Educativo includes a full-featured graphical interface (InterfazCompilador) built with Tkinter. The GUI provides a complete development environment with syntax editing, compilation output display, and assembly export capabilities.

​
Launching the GUI

Start the GUI by running the compiler without arguments: 
python compfinal.py
The application window opens immediately with:
  • Source code editor (top panel)
  • Compilation output viewer (bottom panel)
  • Toolbar with compilation controls
  • Status bar with metrics
The GUI is the default mode. Use --consola flag only for console mode.

​
Interface Tour

​
Window Layout

The interface is divided into four main areas:

​
Status Bar

The bottom status bar displays:
​
Left Side
compilation status
  • Sin compilación - No compilation yet
  • Estado: Correcto - Last compilation successful
  • Estado: Revisar errores - Last compilation had errors
​
Middle
action status
Current or most recent action:
  • “Compilando…” during compilation
  • “Última compilación: OK en 45 ms”
  • “Tema oscuro activado”
  • “Ejemplo cargado”
​
Right Side
metrics
Real-time code metrics:
  • Líneas: Number of lines in editor
  • Caracteres: Character count
Updates automatically as you type.

​
Writing and Compiling Programs

1

Write your code

Type or paste code into the editor:
let x = 10;
let y = 20;
let sum = x + y;
print sum;
The status bar updates to show line and character counts.
2

Choose output options

Select which compilation phases to display using checkboxes:
  • ✅ Mostrar tokens - See lexical analysis
  • ✅ Mostrar AST - See syntax tree
  • ✅ Mostrar IR - See intermediate code
Disabling options reduces output verbosity but doesn’t affect compilation.
3

Compile

Click the Compilar button or press Ctrl+Enter (Windows/Linux) / Cmd+Enter (macOS).The button disables during compilation and shows “Compilando…” in the status bar.
4

Review results

Scroll through the output panel to see:
  • Phase-by-phase compilation results
  • Any errors or warnings (highlighted in red)
  • Program execution output
  • Final compilation status

​
Example Compilation Session

// Calculate rectangle area
let width = 15;
let height = 10;
let area = width * height;
print area;

​
Using the Toolbar

​
Load Example

Click Cargar ejemplo to populate the editor with a sample program: 
// Ejemplo básico
let a = 5;
let b = 10;
let c = a + b * 2;
print c;
Use the example as a template to learn the syntax, then modify it for your needs.

​
Clear Functions

Limpiar editor

Removes all text from the code editor. Use when starting a new program from scratch.Shortcut: Ctrl+L / Cmd+L

Limpiar salida

Clears the compilation output panel. Useful when output becomes cluttered from multiple compilations.Resets status to “Sin compilación”.

​
Theme Toggle

Switch between light and dark themes:
Default appearance:
  • White editor background
  • Black text
  • Light gray panels
  • Blue accents
Best for bright environments.

​
Exporting Assembly Code

1

Write valid code

Ensure your program compiles without errors. Assembly export requires successful compilation.
2

Click 'Exportar ASM'

The button opens a file save dialog.
3

Choose location

Select where to save the .asm file:
File name: program.asm
Save as type: ASM files (*.asm)
4

Confirmation

A message box confirms successful export:
Exportación completada
Archivo ASM guardado correctamente.

​
Generated Assembly Format

The compiler generates EMU8086-compatible x86 assembly: 
.model small
.stack 100h

.data
width dw 0
height dw 0
area dw 0
msg db 13,10,'$'

.code
main proc
mov ax, @data
mov ds, ax

mov ax, 15
mov width, ax

mov ax, 10
mov height, ax

mov ax, width
push ax
mov ax, height
mov bx, ax
pop ax
imul bx
mov area, ax

mov ax, area
call print_num
mov ah,09h
lea dx,msg
int 21h

mov ah,4ch
int 21h
main endp

; imprimir numero en AX
print_num proc
...
ret
print_num endp

end main
If compilation fails (syntax or semantic errors), the export button will show error dialogs instead of saving.

​
Keyboard Shortcuts

The GUI supports several productivity shortcuts:
​
Ctrl+Enter / Cmd+Enter
shortcut
Compile program - Same as clicking “Compilar”
​
Ctrl+L / Cmd+L
shortcut
Clear editor - Remove all code from editor
​
Ctrl+E / Cmd+E
shortcut
Load example - Insert sample program
​
Ctrl+T / Cmd+T
shortcut
Toggle theme - Switch between light and dark modes
On macOS, use Cmd key. On Windows/Linux, use Ctrl key.

​
Understanding Output Colors

The output panel uses color coding:
​
Green (✓)
success
Successful completion of phases:
  • ”✓ Completado: 15 tokens generados”
  • ”✓ RESULTADO: ¡Compilación exitosa!”
​
Red (✗)
error
Errors and failures:
  • ”✗ Error léxico en línea 3…”
  • ”✗ Error semántico…”
​
Blue (bold)
heading
Phase headers and section titles:
  • “[FASE 1] Análisis Léxico…”
  • “TOKENS (resultado del análisis léxico)“

​
Working with Long Programs

The editor supports programs of any length:
Both editor and output panels have:
  • Vertical scrollbars for long content
  • Horizontal scrollbars for wide lines
  • Mouse wheel support

​
Error Handling in GUI

The GUI provides clear error feedback:

​
Warning Dialogs

Empty code: 
Sin código
Escribe código antes de compilar.
Export without compilation: 
Error léxico
[Error details...]

​
Status Updates

Errors update the status bar: 
Última compilación: Con errores en 23 ms
Estado: Revisar errores
The result indicator turns red.

​
Best Practices

The GUI doesn’t auto-save. Copy your code to an external editor or file:
  1. Select all code (Ctrl+A / Cmd+A)
  2. Copy (Ctrl+C / Cmd+C)
  3. Paste into text editor
  4. Save file as .txt or .comp
For iterative development, disable verbose output:
  • Uncheck Mostrar tokens to hide lexical details
  • Uncheck Mostrar AST to hide syntax tree
  • Keep errors and execution results visible
Build programs gradually:
  1. Write a few lines
  2. Compile to verify correctness
  3. Add more functionality
  4. Compile again
This catches errors early.
Switch to dark theme (Ctrl+T) when working in dim lighting to reduce eye strain.

​
Window Controls

​
Resizing

Minimum window size: 980 × 640 pixels
Default size: 1120 × 760 pixels Resize by dragging window edges. Layout adapts responsively.

​
Closing

Close the window to exit:
  • Click the window close button (X)
  • No unsaved work warning (GUI doesn’t persist state)
Closing the window loses all editor content. Save important programs externally first.

​
Compilation Performance

The status bar shows compilation time: 
Última compilación: OK en 45 ms
Typical times:
  • Small programs (< 10 lines): 20-50 ms
  • Medium programs (10-50 lines): 50-150 ms
  • Large programs (> 50 lines): 150-500 ms
Times include all phases: lexical, syntactic, semantic analysis, IR generation, interpretation, and assembly generation.

​
Next Steps

Writing Programs

Learn the language syntax in detail

Interpreting Output

Understand each compilation phase’s output

Using the CLI

Try console mode for quick testing

Code Generation

Learn about the generated x86 assembly

Build docs developers (and LLMs) love

Get started for freeTalk to us