Article-23835-Building-AI-Powered-Trading-Systems-Vector-Icon-System

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 replacing embedded bitmap UI assets with a resolution-independent vector icon system inside an AI-powered trading interface for MetaTrader 5.

The article focuses on drawing logos and interface icons procedurally in MQL5 using anti-aliased primitives instead of loading .bmp resources. It shows how a canvas-based Expert Advisor interface can render sharp icons at different sizes, support theme-aware recoloring, and reduce external asset dependency by building all iconography directly in code.

Original Article

• Article ID: 23835
• Title: Building AI-Powered Trading Systems in MQL5 (Part 10): A Resolution-Independent Vector Icon System
• Author: Allan Munene Mutiiria
• Author Profile: https://www.mql5.com/en/users/29210372
• Publication Date: Not available
• Categories: Trading Systems, Integration, Expert Advisors, Statistics
• Article URL: https://www.mql5.com/en/articles/23835

Repository Purpose

This repository exists to document and reference the architecture described in the original article, and potentially to host extracted or reconstructed source materials from the attached article files.

A reader can use this repository to learn:

• how to replace bitmap-based UI resources with vector drawing code in MQL5
• how anti-aliased primitives can be combined into reusable icon renderers
• how to integrate theme-aware icons into a canvas-based Expert Advisor interface
• how a modular MQL5 UI project can route drawing responsibilities across primitive, render, state, and interaction layers

Key Concepts

• Trading Systems
• Integration
• Expert Advisors
• Statistics
• Canvas-based UI rendering
• Resolution-independent vector icons
• Anti-aliased drawing primitives
• Theme-aware interface rendering
• Procedural logo and glyph composition

Algorithm / Architecture Summary

The article describes a UI rendering refactor for an AI chat-style trading dashboard.

1. Replace bitmap resources with vector drawing code

• The previous interface used embedded bitmap resources for logos and sidebar icons.
• The new approach stores geometry and drawing logic in code instead of image files.

2. Build a reusable primitive layer

• The article defines six reusable anti-aliased vector helpers:
• thick stroke
• filled disc
• ring
• rounded rectangle outline
• filled rounded rectangle
• filled polygon
• These primitives compute per-pixel coverage or use supersampling to smooth edges.

3. Use coverage-based anti-aliasing

• For most shapes, the distance from a pixel to the shape boundary is converted into a coverage fraction.
• That coverage is passed to a blending routine so curves and diagonals render smoothly at any size.

4. Compose logos from primitives

• The MQL5 wordmark is rendered as fitted text rather than a bitmap.
• The AI orb logo is built from layered discs, highlights, and centered text.
• All dimensions are expressed as proportions of the target box, allowing clean scaling.

5. Compose UI icons from primitives

• The article defines procedural drawers for:
• close icon
• sun icon
• moon icon
• search icon
• new chat icon
• clear icon
• history icon
• sidebar toggle icon
• Concave or composite shapes are created by combining simpler primitives, such as carving a crescent moon from overlapping discs.

6. Wire the icons into the header

• The header render path replaces bitmap and font-glyph assets with vector drawers.
• The theme button shows a sun or moon depending on active theme behavior.
• The close button uses a vector X icon.

7. Wire the icons into the sidebar

• The sidebar logo draws the orb at different native sizes depending on expansion state.
• Sidebar buttons switch on an icon identifier and call the corresponding drawer.
• Labels remain conditional on sidebar expansion state.

8. Preserve theme-awareness

• Icon colors are taken from the active palette rather than from fixed bitmap assets.
• Hover states and theme changes reuse the same drawing routines with different colors/backgrounds.

9. Validate visually

• The article reports testing by compiling the program, loading it on a chart, and verifying that the icons remain sharp during resizing, hover interaction, and theme toggling.

Mentioned or Attached Files

Explicitly attached files

The article attachment table explicitly lists the following 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 10.mq5
• MQL5.zip

Attachment archive status

An attached ZIP archive is available in the processed input:

• ZIP URL: https://www.mql5.com/en/articles/download/23835_257744.zip?s=c124fb092581c71b3837e9a3cebfd7965f5459c02d7e2210a1cf49a856c738eb&t=1788800319

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 goes beyond basic MQL5 usage and covers low-level canvas rendering, anti-aliased vector primitive construction, theme-aware UI composition, and integration into a modular Expert Advisor architecture.

Limitations

• This repository is based on an article and should be treated as a reference or reconstruction project unless the attached files are actually included here.
• Full functionality depends on the files attached or provided by the article author.
• The README summarizes architecture and supported implementation details from the article, but it does not guarantee that every original source file is present in this repository.
• The project should not be assumed production-ready unless verified directly from the attached source materials and your own testing.

Reference

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