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

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

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