Article-22303-Rich-Content-Document-MQL5-Canvas

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)
• Main rendering dependency: CCanvas

Tags

MQL5 MetaTrader5 CCanvas Expert-Advisor UI Canvas-Rendering Documentation-Engine Inline-Markup Resources OnChartEvent

Difficulty

Advanced

Limitations

• 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" https://www.mql5.com/en/articles/22303