Skip to content

Architecture

This document describes the technical architecture of the Blockly Python Executor application.

System Overview

The application is built using a modern web-based architecture with the following key components:

graph TB
    A[Blockly UI] --> B[Python Code Generation]
    B --> C[Backend Server]
    C --> D[Python Execution Engine]
    C --> E[Drone Server Bridge]
    E --> F[PMini Drone]
    C --> G[Terminal Output]
    C --> H[Telemetry Stream]
    H --> A

    subgraph "Frontend"
        A
        I[Code Pane]
        J[Terminal]
        K[Telemetry Window]
    end

    subgraph "Backend"
        C
        D
        E
    end

    subgraph "External"
        F
        L[Python Virtual Environment]
    end

Frontend Architecture

Technology Stack

  • Blockly: Google's visual programming library
  • Electron: Desktop application framework
  • Webpack: Module bundler and build tool
  • xterm.js: Terminal emulator
  • Prism.js: Syntax highlighting

Key Components

Blockly Workspace

  • Location: src/index.js
  • Purpose: Main visual programming interface
  • Features:
  • Drag-and-drop block programming
  • Real-time code generation
  • Workspace persistence
  • Zoom and pan controls

Code Generation Engine

  • Location: src/generators/javascript.js
  • Purpose: Converts blocks to Python code
  • Features:
  • Block-to-Python translation
  • Import management
  • Error handling
  • Code formatting

Terminal Interface

  • Location: src/index.js (terminal setup)
  • Purpose: Display Python execution output
  • Features:
  • Real-time output streaming
  • Error message display
  • Resizable interface
  • Copy functionality

Telemetry System

  • Location: src/index.js (telemetry functions)
  • Purpose: Real-time drone data display
  • Features:
  • Server-Sent Events (SSE)
  • Position tracking
  • Status monitoring
  • Floating window interface

Backend Architecture

Technology Stack

  • Node.js: Runtime environment
  • Express.js: Web framework
  • gRPC: Communication with drone
  • Python: Code execution environment

Key Components

Main Server

  • Location: backend/server.js
  • Purpose: Central backend coordinator
  • Features:
  • HTTP API endpoints
  • Python code execution
  • Drone server management
  • Telemetry streaming

Python Execution Engine

  • Location: backend/server.js (execution functions)
  • Purpose: Execute generated Python code
  • Features:
  • Virtual environment management
  • Code execution with streaming output
  • Error handling and reporting
  • Process management

Drone Server Bridge

  • Location: backend/server.js (drone functions)
  • Purpose: Interface with PMini drone
  • Features:
  • gRPC communication
  • Telemetry data collection
  • Command execution
  • Connection management

Data Flow

1. Block Creation

User drags block → Blockly workspace → Block definition

2. Code Generation

Blockly workspace → Python generator → Generated Python code

3. Code Execution

Generated code → Backend server → Python execution → Terminal output

4. Drone Control

Drone blocks → Python code → gRPC client → PMini drone

5. Telemetry Streaming

PMini drone → gRPC server → Backend bridge → SSE stream → Frontend

File Structure

src/
├── index.js              # Main application logic
├── index.html            # HTML template
├── index.css             # Application styles
├── toolbox.js            # Block toolbox definition
├── serialization.js      # Workspace save/load
├── blocks/
│   └── text.js           # Custom block definitions
└── generators/
    └── javascript.js     # Python code generation

backend/
└── server.js             # Backend server

python_venv/              # Python virtual environment
├── bin/
│   └── pmini_server      # Drone server executable
└── lib/
    └── site-packages/    # Python packages

proto/
└── drone.proto           # gRPC protocol definition

API Endpoints

HTTP Endpoints

Code Execution

  • POST /run - Execute Python code
  • GET /status - Get execution status
  • POST /server/start - Start drone server
  • POST /server/stop - Stop drone server
  • GET /server/status - Get server status

Telemetry

  • GET /telemetry/status_text - Status text stream (SSE)
  • GET /telemetry/position - Position data stream (SSE)
  • GET /telemetry/battery - Battery data stream (SSE)

gRPC Endpoints

Drone Control

  • Takeoff - Command drone to take off
  • Land - Command drone to land
  • Goto - Navigate to position
  • Move - Move with velocity
  • Turn - Rotate drone

Telemetry

  • Position - Get current position
  • Attitude - Get orientation data
  • Battery - Get battery status
  • Status - Get general status

Configuration

Application Configuration

  • Location: package.json
  • Settings:
  • Application metadata
  • Build configuration
  • Electron settings
  • Platform-specific options

Webpack Configuration

  • Location: webpack.config.js
  • Settings:
  • Module bundling
  • Development server
  • Build optimization
  • Asset handling

Python Environment

  • Location: requirements-pmini.txt
  • Settings:
  • Python package dependencies
  • Version constraints
  • Platform-specific packages

Security Considerations

Code Execution

  • Sandboxing: Python code runs in isolated environment
  • Resource limits: Memory and CPU usage restrictions
  • Network access: Limited to drone communication only
  • File system: Restricted access to application directory

Drone Communication

  • Authentication: gRPC authentication with drone
  • Encryption: Secure communication channels
  • Validation: Input validation for all commands
  • Error handling: Graceful failure modes

User Interface

  • Input validation: All user inputs are validated
  • XSS prevention: Content sanitization
  • CSRF protection: Request validation
  • Secure defaults: Safe configuration defaults

Performance Considerations

Frontend Optimization

  • Code splitting: Lazy loading of components
  • Asset optimization: Minification and compression
  • Caching: Browser caching strategies
  • Responsive design: Efficient rendering

Backend Optimization

  • Connection pooling: Efficient database connections
  • Caching: In-memory caching for frequently accessed data
  • Streaming: Real-time data streaming
  • Resource management: Efficient memory and CPU usage

Python Execution

  • Virtual environment: Isolated Python environment
  • Process management: Efficient process lifecycle
  • Memory management: Garbage collection optimization
  • Error recovery: Graceful error handling

Deployment Architecture

Development Environment

Developer Machine
├── Node.js Development Server
├── Python Virtual Environment
├── PMini Drone (simulated)
└── Local Database

Production Environment

Production Server
├── Electron Application
├── Python Runtime
├── PMini Drone
└── Monitoring System

Distribution

  • Windows: NSIS installer + portable executable
  • macOS: DMG package + ZIP archive
  • Linux: DEB/RPM packages + AppImage

Monitoring and Logging

Application Logs

  • Location: app.log, out.log
  • Levels: Debug, Info, Warning, Error
  • Rotation: Automatic log rotation
  • Format: Structured JSON logging

Performance Metrics

  • Execution time: Python code execution duration
  • Memory usage: Application memory consumption
  • Network latency: Drone communication delays
  • Error rates: Failure frequency and types

Telemetry Data

  • Position tracking: Real-time location data
  • Status monitoring: System health indicators
  • Battery monitoring: Power level tracking
  • Connection status: Network connectivity

Future Architecture Considerations

Scalability

  • Microservices: Potential service decomposition
  • Load balancing: Multiple instance support
  • Caching: Redis integration
  • Database: Persistent data storage

Extensibility

  • Plugin system: Custom block support
  • API versioning: Backward compatibility
  • Configuration: Dynamic configuration management
  • Theming: Customizable user interface

Integration

  • Cloud services: Remote drone control
  • IoT devices: Additional hardware support
  • APIs: Third-party service integration
  • Webhooks: Event-driven architecture