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 project documents and preserves the ideas from MQL5 article **22303**, which presents a **canvas-rendered rich-content documentation engine** for MetaTrader 5.
The article describes an Expert Advisor that renders an in-chart manual using `CCanvas` instead of standard chart labels. The resulting UI behaves like a lightweight embedded document viewer with:
- tabbed content sections
- scrollable body area
- inline text markup
- embedded bitmap images
- theme support
- anti-aliased supersampled rendering
- mouse-driven interaction for tabs, buttons, and scrollbar
The article includes substantial source excerpts for the main EA and explains the architecture in detail.
## Original Article
- **Article ID:** 22303
- **Author:** Allan Munene Mutiiria
- **Publication date:** 2026.05.29
- **Category:** GUI
- **URL:** https://www.mql5.com/en/articles/22303
## Repository Purpose
This repository serves as a **reference/reconstruction project** for the article's rich-content document engine.
Its purpose is to:
- preserve the article's design and implementation ideas
- provide a base for studying advanced `CCanvas` UI techniques in MQL5
- collect the explicitly attached source file and related asset package
- help developers adapt the approach into their own EAs, indicators, or scripts
## Key Concepts
-`CCanvas`-based in-chart UI rendering
- embedded image resources via `#resource`
- custom paragraph model with typed content blocks
- inline markup parsing for:
- bold
- italic
- underline
- strikethrough
- text color
- background highlight
- two-pass alpha-reconstructed text stamping
- bicubic image scaling and width-based cache invalidation
- supersampling/downsampling for smoother rounded UI elements
- scroll state management and draggable scrollbar pill
- event-driven interaction via `OnChartEvent`
- tabbed documentation layout inside a chart-attached EA
## Algorithm / Architecture Summary
The article describes the system as a multi-canvas document panel composed of:
1.**Header canvas**
- title, subtitle, logo, close button
2.**Tabs canvas**
- tab labels and active-tab selection
3.**Body canvases**
- visible body surface
- hidden high-resolution supersampling canvas
- overlay canvas for text, images, blocks, and scrollbar
4.**Footer canvas**
- buttons and checkbox controls
Core processing flow:
- Apply theme colors
- Calculate panel geometry from chart size
- Create bitmap-label canvases
- Load logo and embedded images from resources
- Build per-tab paragraph arrays
- Wrap paragraphs into encoded display lines
- Render block backgrounds, text runs, images, and scrollbar
- Handle resize, hover, click, wheel, and drag events through a central chart-event router
Notable implementation ideas described in the article:
- **Two-pass text rendering** reconstructs per-pixel alpha by drawing text on black and white buffers and recovering glyph coverage.
- **Markup-aware wrapping** preserves inline styles across wrapped lines by reopening style state when a line continues.
- **Image caching** rescales embedded bitmaps only when the panel width changes.
- **Body rendering** uses a supersampled off-screen canvas for cleaner anti-aliased shapes, then downsamples to the visible body surface.
## Mentioned or Attached Files
### Explicitly attached files
-`Rich Content Document.mq5`<20> main Expert Advisor file
-`Rich Content Document BMP files.zip`<20> archive of referenced BMP assets
### Files mentioned in the article text
Embedded bitmap resources referenced by the EA:
-`Rich Content Document - Logo.bmp`
-`Rich Content Document - MQL5 IDE.bmp`
-`Rich Content Document - MT5 Chart.bmp`
-`Rich Content Document - Strategy Tester.bmp`
-`Rich Content Document - Market Watch.bmp`
-`Rich Content Document - Navigator.bmp`
Standard library dependency mentioned:
-`Canvas/Canvas.mqh`
Potential optional organization mentioned by the author:
- a separate include file such as `Rich Content Manual.mqh` for moving the documentation engine into an `.mqh` header
## Statistics
- **Article length:** long-form implementation article with extensive code excerpts
- **Program type:** Expert Advisor
- **Tabs described:** 5
- **Embedded images described:** 6 resources total (1 logo + 5 screenshots)
- The repository is based on article content and attached materials only.
- The article provides large code excerpts, but this README does not assume that every helper function from the full original article is present unless it exists in the attached source file.
- If the attached source package is incomplete in this repository snapshot, the project should be treated as a reconstruction/reference implementation rather than a guaranteed full reproduction.
- Bitmap resources are required for the full visual result described in the article.
## Reference
- Allan Munene Mutiiria, **"Rich content document in MQL5 programs <20> with CCanvas"**
