CNC Simulator - Vue 3 Reactive POC

⚠️ Warnings

{{ panelExpanded ? '▼ Collapse Controls' : '▲ Expand Controls' }}

Simulation

Simulation Speed

Feed Override

Spindle Override

Status {{ status }}

Current Line {{ currentLine }} / {{ totalLines }}

Feed Rate {{ feedRate }} mm/min

Set Work Zero

Jog Controls

⚙️ Advanced

Job Navigation

Line {{ currentLine }} / {{ totalLines }}

Load G-code to enable navigation

Volume {{ ((stockWidth * stockDepth * stockHeight) / 1000).toFixed(1) }} cm³

Grid Points {{ Math.ceil(stockWidth / stockResolution) * Math.ceil(stockDepth / stockResolution) }}

Select Tool

Ø {{ tool.diameter }}mm
{{ tool.type }}

Current Tool {{ currentTool.name }}

Diameter {{ currentTool.diameter }}mm

Type {{ currentTool.type }}

Stock Material

Material Type

Dimensions (mm)

X (Width)

Y (Depth)

Z (Height)

Resolution: {{ stockResolution }}mm

Show Toolpath Lines

Show Chips

Volume {{ ((stockWidth * stockDepth * stockHeight) / 1000).toFixed(1) }} cm³

Grid Points {{ Math.ceil(stockWidth / stockResolution) * Math.ceil(stockDepth / stockResolution) }}

Sample Programs

G-Code Editor

📁 Load File

Lines {{ gcodeLineCount }}

Characters {{ gcodeText.length }}

Device Type {{ deviceType }}

Screen Width {{ screenWidth }}px

Viewport Size {{ viewportSize }}

About Vue 3 POC

This is a proof-of-concept demonstrating Vue 3 reactive state management with responsive design.

Features:
• Reactive DRO display
• Smart button states
• Responsive layout
• Touch-optimized controls
• Tab navigation
• G-code editor

Benefits:
• No manual DOM updates
• Computed properties
• Cleaner code
• Better maintainability

{{ Math.round((parseProgress / parseTotal) * 100) }}%

Line {{ parseProgress }} of {{ parseTotal }}

WORK

X {{ formatCoord(workCoords.x) }}

Y {{ formatCoord(workCoords.y) }}

Z {{ formatCoord(workCoords.z) }}

MACHINE

X {{ formatCoord(machineCoords.x) }}

Y {{ formatCoord(machineCoords.y) }}

Z {{ formatCoord(machineCoords.z) }}