Article-23867-Building-AI-Powered-Trading-Systems-UI-Optimization

This repository is an article-derived reference project based on the original MQL5 article. It does not claim to reproduce the full original source code unless files are explicitly attached.

Overview

This repository is derived from the MQL5 article about optimizing a canvas-based AI trading dashboard interface in MetaTrader 5. The article focuses on improving UI responsiveness without changing visual appearance by introducing frame throttling, partial rendering, direct pixel-buffer operations, and text/glyph caching.

The material belongs to a broader AI-powered trading systems series and documents architectural improvements to an Expert Advisor user interface rather than a standalone trading strategy. As a repository, it serves as a reference for reconstructing or studying the rendering pipeline and interaction optimization techniques described in the article.

Original Article

• Article ID: 23867
• Title: Building AI-Powered Trading Systems in MQL5 (Part 11): Optimizing the UI with Frame Throttling and Partial Rendering
• Author: Allan Munene Mutiiria
• Publication date: Not available
• Categories: Trading Systems, Integration, Expert Advisors, Statistics
• Article URL: https://www.mql5.com/en/articles/23867
• Author profile: https://www.mql5.com/en/users/29210372

Repository Purpose

This repository exists to preserve and organize the technical ideas from the article in a repository-friendly form.

A reader can use it to:

• study how an MQL5 canvas UI can be optimized for high-frequency interaction,
• understand how repaint throttling can reduce redundant redraws,
• learn how partial rendering can limit work to only the affected pane or overlay,
• reuse the article’s architectural patterns for responsive dashboard-style Expert Advisors,
• examine the module structure referenced by the author when rebuilding or adapting a similar interface.

Key Concepts

• Trading Systems
• Integration
• Expert Advisors
• Statistics
• Canvas-based UI rendering
• Frame throttling
• Partial rendering
• Region-based repainting
• Direct pixel-buffer canvas access
• Text-width caching
• Glyph coverage caching
• Event-driven UI updates
• Overlay and popup restoration

Algorithm / Architecture Summary

The article describes a UI optimization workflow for a canvas-based AI dashboard in MQL5.

1. Identify the performance bottleneck

• The original interface repainted the entire dashboard on every hover, scroll, drag, or popup event.
• Text was also re-measured repeatedly through operating system calls, increasing redraw cost.

2. Introduce a faster canvas abstraction

• A CAiCanvasFast class extends CCanvas.
• It adds direct access to the pixel buffer for fast pixel reads, writes, fills, and rectangle copies.
• When both source and destination use the fast canvas type, row blocks can be copied efficiently with contiguous memory operations.

3. Reduce repeated font and text work

• Font state is cached so repeated TextSetFont calls are skipped when the font name and size are unchanged.
• A shared string hash function is used to build lookup keys for caches.

4. Cache text widths

• A memo table stores measured widths keyed by text, font, and size.
• Repeated labels can be measured once and reused rather than recalculated on every frame.

5. Cache rendered glyph coverage

• A larger cache stores rasterized glyph-run coverage maps.
• On cache hit, previously derived coverage is reused.
• On miss, text is rasterized once and stored, subject to a memory budget reset mechanism.

6. Throttle repaint frequency

• A frame interval of about 16 ms is used to cap repainting near 60 FPS.
• If many events occur inside the cap window, they are collapsed into a deferred frame.
• A timer later flushes the deferred repaint so correctness is preserved.

7. Separate full, partial, and overlay repaint paths

• Full repaint handles cases where the entire dashboard must be redrawn.
• Partial repaint updates only the affected pane, such as chat, search, or prompt areas.
• Overlay repaint restores the area under floating popups from a saved backdrop and redraws only the popup.

8. Snapshot the backdrop

• A popup-free copy of the main panel is saved.
• When dropdowns or history popups move or close, the background can be restored by copying the saved region back instead of rebuilding the entire UI.

9. Map hover events to UI regions

• Hover targets are grouped into regions such as header, sidebar, footer, and chat.
• When hover state changes, only the affected regions are repainted unless the target is unknown, in which case a full repaint is used for safety.

10. Wire scoped repaint requests into interaction handlers

• The interaction layer chooses the smallest correct repaint path:
• full frame for major popup state changes,
• overlay-only frame for floating popup updates,
• region-scoped hover frame for normal hover movement,
• pane-scoped partial frame for scroll activity.

Overall, the architecture aims to minimize both how often the UI repaints and how much it repaints each time.

Mentioned or Attached Files

Explicitly attached files

The processed input indicates that an attached ZIP archive is available, and the article also explicitly lists the following attached files:

• AI Canvas Theme.mqh
• AI Canvas Primitives.mqh
• AI JSON FILE.mqh
• AI Canvas State.mqh
• AI Canvas Scrollbar.mqh
• AI Canvas Editor.mqh
• AI Canvas Render.mqh
• AI Logic.mqh
• AI Canvas Interact.mqh
• AI Canvas Shell.mqh
• AI EA PART 11.mq5
• MQL5.zip

Files mentioned in the article text

• primitives file

Statistics

• Word count: Not available
• Reading time: Not available
• Image count: Not available
• Code block count: Not available
• File count: Not available

Tags

• mql5
• metatrader-5
• trading-systems
• integration
• expert-advisors
• statistics
• difficulty-advanced

Difficulty

Advanced

Reason: the article covers nontrivial UI architecture in MQL5, including custom canvas extensions, cache design, timer-driven frame scheduling, partial redraw logic, overlay restoration, and event-region mapping rather than basic EA scripting.

Limitations

• This is an article-derived reference repository, not a guaranteed byte-for-byte reproduction of the author’s original project.
• Full usability depends on the files actually attached or otherwise provided by the original article author.
• Although the article includes detailed code excerpts and an attachment list, this README does not assume that every file has been extracted and verified inside this repository unless explicitly present.
• The article focuses on UI optimization architecture for an AI-assisted trading interface, not on validating a production-ready trading system.
• Any reconstruction based only on article text may omit surrounding project context from earlier parts of the series.

Reference

• Original article: https://www.mql5.com/en/articles/23867
• Author profile: https://www.mql5.com/en/users/29210372