# 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.

![Article preview](https://c.mql5.com/2/240/Screenshot_2026-08-03_183834_1200x628.jpg)

## 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