DearMQL5 is an institutional-grade, immediate-mode graphical user interface
(GUI) engine designed from the ground up for MetaTrader 5 (MQL5), inspired by
the ergonomics and performance of Dear ImGui.
### Core Architecture & Execution Pipeline
- Immediate-Mode Paradigm: Declarative frame-based rendering pipeline with zero
memory allocation churn during render loops and deterministic execution.
- Modular Per-Hub Canvas Surfaces (CUWindowSurface): Replaces full-screen canvas
overlays with isolated, window-bounded CCanvas bitmaps, reducing memory usage
by up to 93% (~570 KB vs 8.3 MB for 1080p) and preventing click-swallowing.
- 0-Cost Hardware Texture Drag Engine: Absolute-anchor drag mechanics update
native MT5 OBJPROP_XDISTANCE and OBJPROP_YDISTANCE properties directly on
the compositor, bypassing CPU rasterization completely (0.00% CPU usage).
- Chart Scroll Protection: Automatically suppresses chart history sliding
(CHART_MOUSE_SCROLL) during active HUD dragging and safely restores it on release.
- Two-Phase Hit-Testing: Interactive controls (buttons, sliders, toggles) receive
first-priority click focus, cleanly separating widget actions from window drags.
### Subsystems & Components
- Core State & Input (Core/):
* UInputState: Mouse/keyboard tracking, deltas, and chart scroll lock.
* UState: Retained state hash map in pure MQL5 with 64-bit FNV-1a hashing.
* UIdStack: Hierarchical identifier scoping preventing widget ID collisions.
* ULayout: Automatic cursor placement supporting SameLine, Indent, and Unindent.
* UEventQueue: Non-blocking circular UI event queue for decoupled handling.
* UTheme: Institutional OneDark/Nord dark color palette and typography metrics.
- Rendering Backends (Render/):
* URendererCanvas: Isolated per-hub surfaces with 32-bit ARGB alpha transparency.
* URendererNative: Native MT5 object pool (OBJ_RECTANGLE_LABEL) with diff caching.
* UFont: Anti-aliased font metrics and width cache.
- Complete Widget Suite (Widgets/):
* UButton: Click-on-release standard, accent, and emergency panic buttons.
* UToggle: Smooth draggable/clickable iOS-style toggle switches.
* USlider: Draggable horizontal float and integer sliders.
* UProgressBar: Adaptive progress bars with dynamic green->amber->red color ramps.
* UHeader: Collapsible section headers with immediate-mode state retention.
* ULabel & USeparator: Formatted text, colored metrics, and horizontal dividers.
- Window Management (Windows/):
* UWindow: Window container with titlebar, collapse toggle, and coordinate clipping.
* UWindowManager: Multi-window coordinator with GlobalVariable persistence across
chart timeframe changes and backward-compatible key resolution.
### Tooling, Documentation & Reference Implementation
- Examples/EA_DearMQL5_Demo.mq5: Complete reference Prop-Firm cockpit HUD.
- README.md: Comprehensive institutional English documentation for GitHub and Algo Forge.
- Docs/ARCHITECTURE.md: Technical architecture specification with Mermaid lifecycle.
98 lines
4.5 KiB
MQL5
98 lines
4.5 KiB
MQL5
//+------------------------------------------------------------------+
| |
//| UTheme.mqh |
| |
//| Copyright 2026, DearMQL5 GUI Engine |
| |
//| https://www.mql5.com |
| |
//+------------------------------------------------------------------+
| |
#property copyright "Copyright 2026, DearMQL5 GUI Engine"
| |
#property link "https://www.mql5.com"
| |
#property strict
| |
| |
/// Visual style parameters, ARGB color palette, and layout metrics.
| |
struct SUTheme
| |
{
| |
// Colors (ARGB: 0xAARRGGBB)
| |
uint window_bg; ///< Window body background color
| |
uint window_titlebar; ///< Window title bar background
| |
uint window_titlebar_active; ///< Title bar background when focused
| |
uint window_border; ///< Window outer border outline
| |
uint text; ///< Primary foreground text color
| |
uint text_dim; ///< Secondary muted text color
| |
uint widget_bg; ///< Normal widget background (edit, slider track)
| |
uint widget_hover; ///< Widget background when mouse is hovering
| |
uint widget_active; ///< Widget background when clicked/pressed
| |
uint button_bg; ///< Normal button background
| |
uint button_hover; ///< Button hovered background
| |
uint button_active; ///< Button pressed background
| |
uint accent; ///< Institutional accent color (emerald / cyan)
| |
uint accent_hover; ///< Accent color when hovered
| |
uint danger; ///< Danger / panic button color (red)
| |
uint success; ///< Success / profitable metric color (green)
| |
uint separator; ///< Horizontal divider color
| |
| |
// Layout Spacing & Metrics
| |
int padding_x; ///< Horizontal internal padding inside widgets/windows
| |
int padding_y; ///< Vertical internal padding inside widgets/windows
| |
int item_spacing_x; ///< Horizontal gap between adjacent widgets on SameLine
| |
int item_spacing_y; ///< Vertical gap between rows
| |
int window_title_height; ///< Height of window title bar
| |
int widget_height; ///< Standard height of single-line interactive widgets
| |
int corner_radius; ///< Corner rounding radius (0 = sharp square)
| |
string font_name; ///< Primary typography face (e.g. "Segoe UI", "Arial")
| |
int font_size; ///< Primary font size in points
| |
| |
/// Applies default professional institutional Dark Theme.
| |
void SetDarkDefaults(void)
| |
{
| |
window_bg = 0xF0181A1F; // Very dark slate grey (94% opacity)
| |
window_titlebar = 0xFF21252B; // Medium slate
| |
window_titlebar_active = 0xFF2C313C; // Focused slate
| |
window_border = 0xFF3E4451; // Subtle grey border
| |
text = 0xFFECEFF4; // Clean crisp off-white
| |
text_dim = 0xFF8A93A4; // Dim grey for labels
| |
widget_bg = 0xFF282C34; // Input background
| |
widget_hover = 0xFF353B45; // Hovered state
| |
widget_active = 0xFF4B5263; // Pressed state
| |
button_bg = 0xFF2D3748; // Cool slate button
| |
button_hover = 0xFF3D4D66; // Hovered button
| |
button_active = 0xFF4A5D7C; // Clicked button
| |
accent = 0xFF00A389; // Institutional cyan/emerald
| |
accent_hover = 0xFF00C2A3; // Vibrant cyan
| |
danger = 0xFFE06C75; // Coral red
| |
success = 0xFF98C379; // Soft forest green
| |
separator = 0xFF3E4451; // Clean separator
| |
| |
padding_x = 8;
| |
padding_y = 6;
| |
item_spacing_x = 8;
| |
item_spacing_y = 6;
| |
window_title_height = 24;
| |
widget_height = 22;
| |
corner_radius = 3;
| |
font_name = "Segoe UI";
| |
font_size = 9;
| |
}
| |
};
| |
| |
/// Global theme access and style stack manager.
| |
class UTheme
| |
{
| |
private:
| |
static SUTheme s_current;
| |
| |
public:
| |
/// Returns the active global theme configuration.
| |
static SUTheme Get(void)
| |
{
| |
if(s_current.widget_height == 0)
| |
s_current.SetDarkDefaults();
| |
return(s_current);
| |
}
| |
| |
/// Overrides the active global theme.
| |
static void Set(const SUTheme &theme)
| |
{
| |
s_current = theme;
| |
}
| |
};
| |
| |
SUTheme UTheme::s_current;
|