Discussing the article: "Building AI-Powered Trading Systems in MQL5 (Part 10): A Resolution-Independent Vector Icon System"
You are missing trading opportunities:
- Free trading apps
- Over 8,000 signals for copying
- Economic news for exploring financial markets
Registration
Log in
You agree to website policy and terms of use
If you do not have an account, please register
Check out the new article: Building AI-Powered Trading Systems in MQL5 (Part 10): A Resolution-Independent Vector Icon System.
We replace the embedded bitmap icons in our MQL5 canvas interface with a resolution-independent vector icon system. A small set of anti-aliased primitives (strokes, discs, rings, rounded rectangles, and polygons) draws every logo and sidebar glyph procedurally, then plugs into the header, sidebar, and theme toggle. You get smaller builds, theme-aware recoloring, and icons that stay sharp at any size.
A vector icon flips this around. Instead of storing pixels, we store the recipe for the shape, a circle of a given radius, a line between two points, a rounded rectangle, and redraw it from that recipe at whatever size we need. Because the shape is described by geometry rather than a pixel grid, it is sharp at thirty pixels or a hundred, and it costs nothing extra to ship since it is code, not a file. The key detail that keeps a vector icon clean is anti-aliasing. Instead of turning each pixel fully on or off, we compute per-pixel coverage and blend by that fraction, so edges fade smoothly instead of forming a staircase. This coverage-based approach underpins the primitives used throughout the interface.
In practice, you design a vector icon the way you would sketch it with a compass and ruler. Break the mark into simple parts and express each as a primitive: a sun is a small filled disc ringed by eight short strokes, a moon is one disc with a second disc of the background color carved out of it to leave a crescent, a search icon is a ring with a short handle. Position every part in proportion to the icon's box, using fractions of its size rather than fixed pixels, so the same recipe scales cleanly. Feed the drawer the color it should use, taken from the active theme, and the same icon serves both light and dark modes without a second copy.
That gives us the shape of the work ahead, and we do it in four stages: the primitives first, a handful of coverage-based helpers every mark is drawn with; then the drawers, one function per logo and icon composed from those primitives; then the wiring, where each bitmap call site in the header and sidebar renderers is replaced by its drawer; and finally the cleanup, where the six ".bmp" resources and the load-and-resize pass that served them are dropped. We hold the drawer layer to three requirements: every part is positioned as a fraction of the icon box, so one function covers both the eighty-one-pixel and the thirty-pixel sidebar sizes; every drawer takes its color as a parameter, so the active theme decides it; and any mark that carves its shape out with the background, such as the moon, receives that background color as well. In a nutshell, here is a visualization of the vectorized UI.
Author: Allan Munene Mutiiria