MACHHUB® Designer Extension

The ultimate Visual Studio Code extension for developing MACHHUB® applications with visual flow-based programming

🚀 Overview

MACHHUB® Designer is a powerful Visual Studio Code extension that provides a complete development environment for creating, editing, and managing MACHHUB® applications through an intuitive visual flow-based interface.

✨ Key Features

🎨 Visual Flow Designer

• Advanced Flow Editor: Create complex workflows using a drag-and-drop visual interface powered by Svelte Flow
• Comprehensive Node Palette: Access 9+ pre-built flow components:
  • 🚀 Start: Entry points for your flows
  • ⚙️ Function: Custom business logic execution
  • 📖 Read Tag: Data acquisition from tags
  • ✍️ Write Tag: Data writing to tags
  • 🗄️ Collection: Database operations
  • 📊 Historian: Historical data queries
  • 🔍 DB Query: Direct database queries
  • 📝 Set: Variable assignment
  • 🔀 Switch: Conditional branching
• Real-time Node Configuration: Dynamic attribute panels with instant updates
• Smart Flow Validation: Live error detection and flow integrity checking

🔌 Runtime Connection System

• Unified Connection Management: Single configuration for all MACHHUB® services
• Live Connection Monitoring: Automatic health checks with customizable intervals
• Development Proxy Server: Built-in forwarding server on port 61888

📊 Project Management & Collaboration

• Flow Explorer Tree View: Organized project navigation with refresh capabilities
• File Type Association: Native .flow file support with custom icons
• Upload & Sync: Direct flow deployment to runtime environments
• Development Server Integration: Seamless local-to-remote workflow

🎯 Developer Experience

• Multi-Panel Architecture:
  • Activity Bar: MACHHUB project overview
  • Panel Views: Flow palette and attributes configuration
  • Custom Editor: Full-screen flow editing experience
• Live Status Monitoring: Real-time connection status in the status bar
• Comprehensive Logging: Built-in development server with request/response logging
• Hot Reload Support: Watch mode for UI development

🛠️ Getting Started

Prerequisites

• Visual Studio Code 1.103.0 or higher
• Node.js 20.x for development
• MACHHUB® Runtime Environment (local or remote)
• Valid Developer Token and Application ID

Installation

1. Install from VSIX (Development):

   code --install-extension machhub-designer-0.0.1.vsix
   

2. Activate Extension:

   • The extension activates automatically when VS Code starts
   • Look for the MACHHUB icon in the Activity Bar

Quick Setup

1. Configure Runtime Connection

# Open Command Palette
Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)

# Run configuration command
> MACHHUB: Configure API Connection

Required Configuration:

• Developer Token: Your MACHHUB® authentication token
• Application ID: Target application identifier
• Connection URLs (optional, defaults provided):
  • HTTP URL: http://localhost:6188
  • MQTT URL: ws://localhost:180
  • NATS URL: ws://localhost:7500

2. Create Your First Flow

1. Create Flow Folder: Right-click in Explorer → New Folder → _flows
2. Create Flow File: Right-click on _flows folder → New File → myflow.flow
3. Open Visual Editor: Click on the myflow.flow file and it will open in MACHHUB Flow Editor
4. Design Your Flow:
   • Use the MACHHUB Flow Palette panel to drag components (Drag from the palette & hold SHIFT to drop into the editor)
   • Configure node properties in the Attributes panel (Recommended to move it into the Secondary Side Bar)
   • Connect nodes to create your workflow
5. Save & Upload: Use the Upload button in the Flows tree view to upload all flows

3. Monitor & Debug

• Status Bar: Real-time connection status
• Development Server: Automatic proxy on localhost:61888
• Flow Tree: Refresh and manage your flows

🏗️ Architecture

Recommended Project Structure

my-app/
├── _flows/
│   ├── cron/
│   │   ├── daily-count.flows
│   │   └── monthly-report.flows
│   ├── calculation/
│   │   ├── overall-oee.flows
│   │   └── product-performance.flows
│   └── update.flows
├── src/             # Developers Project Files
│   └── ...      
├── .gitignore
├── package.json
└── ...

📋 Available Commands

🔧 Configuration Options

Runtime Settings

Access via MACHHUB: Configure API Connection:

Development Server

• Port: 61888 (automatic)
• Features: Request forwarding, authentication injection, logging
• Status: Auto-starts when runtime is configured

🎯 Flow Components Reference

Available Node Types

Flow File Format

Flows are stored as JSON files with .flow extension:

{
  "nodes": [...],
  "edges": [...],
  "viewport": {...}
}

🔍 Status Bar Indicators

📝 Changelog

Version 0.0.1 - Initial Release

🎉 New Features:

• Complete visual flow editor with drag-and-drop interface
• 9+ pre-built flow components (Start, Function, Tags, Collections, etc.)
• Real-time runtime connection system with multi-protocol support
• Development proxy server with automatic authentication
• Live connection monitoring
• Integrated flow management with upload/sync capabilities
• Comprehensive project tree view and file management

🔧 Technical Implementation:****

• VS Code Extension API integration
• WebSocket and HTTP connection handling
• Custom document provider for .flow files
• Multi-panel webview architecture
• TypeScript type safety throughout

🐛 Known Issues

• WebSocket Forwarding: Basic implementation, advanced features planned
• Log Persistence: Server logs open in temporary documents
• Configuration Changes: Some settings require extension reload
• Flow Validation: Advanced validation rules in development

📄 License

Copyright © 2025 Intellogic Technology Sdn Bhd. All rights reserved.

This extension is proprietary software licensed for use with the MACHHUB® Platform. See theLICENSE file for complete terms and conditions.