PNG - MetaTrader 5 Library | MT5 EA Download - MetaTrader 5 Resources

This library allows you to easily handle PNG graphics files and scale them.

There are two ways to upload PNG images:

Processing PNG images via resources:

 //Constructor
// CPng(const uchar &bin_data[], bool create_canvas = false, int x = 0, int y = 0); // // Get PNG from resource
#include <canvas\png.mqh> #resource "//image//icon.png" as uchal png_data[] #resource "//image//image1.png" as uchal image1[]

CPng png1(png_data); // Get the PNG (icons.png) from the resource, extract it into the bitmap array png1.bmp[], and don't create the canvas yet CPng png2(image1, true , 200 , 50 ); // Get the PNG (image1.png) from the resources, extract it into the bitmap array png2.bmp[], create the canvas and display it on the screen at the coordinates (X=200, Y=50)

Process PNG images from files:

 //Constructor
// CPng(string file_path, bool create_canvas = false, int x = 0, int y = 0); // Get PNG from file
#include <canvas\png.mqh>

CPng png1( "Image1.png" ); // Get the PNG image from the file (MQL5\Files\image1.png), extract it into the bitmap array png1.bmp[], and do not create the canvas yet CPng png2( "Cube.png" , true , 200 , 100 ); // Get the PNG from the file (MQL5\Files\cubes.png) image, creating a canvas and displaying it on the screen at coordinates (X=200, Y=100)

As you can see, the canvas can be instantly formed and the image displayed on the screen. You could also be content with just creating a bmp[] bitmap array without creating a canvas object for this image. In this case, you can use your own canvas in a more advanced implementation (see demo below).

In addition, an important feature of this CPng class is the ability to use the Resize(double NewWidth) method to generate a new image size, which will be located in the _bmp[] array, which can also be displayed on the screen to form a canvas of this size.

In this case, the class instance will contain two bmp[] arrays (original image) with width "width " and height " height ", and resized _bmp[] arrays (width " _width " and height " _height "). All methods and parameters in the CPng class with names starting with an underscore refer to the resized image (_bmp[], _width, _height, _CreateCanvas(), _MoveCanvas())

The following functions are also available for processing original and modified images:

 whitespace resize( double new width);      //Resize image boolean create canvas( const integer x, constant integer y); // Create canvas (original size) for bpm[] array boolean _create canvas( const integer x, constant integer y); // Create canvas for _bpm[] array (constant integer y) boolean move canvas ( const integer x, constant integer y); // Move image canvas to original size boolean _movecanvas( const integer x, const integer y); // Move the resized image canvas blank BmpArrayFree() { array free (bmp);} // Clear the main bitmap array to save memory if no longer needed

I have prepared a demo program - Expert (Expert_Test_PNG.mq5), which compactly and intuitively demonstrates the working of the library. In this example, in addition to simply displaying PNG images, parsing of the PNG icon table is also implemented. (see animated gif)

I saw an implementation of this algorithm for decompressing PNG files @Zorro in this post 7 years ago and it was used as the basis for this library. The resizing algorithm was developed by me.

#include <canvas\png.mqh> #include <canvas\iCanvas_CB.mqh> // https://www.mql5.com/ru/code/22164
#resource "//image//icon.png" as uchal png_data[] //+------------------------------------------------------------------+ CPng png1(png_data); // Get the PNG from the resource, extract it into the bitmap array bmp[], and don't create the canvas yet CPng png2( "cube.png" , true , 0 , 100 ); // Get the PNG from the file, create the canvas and display it on the screen at coordinates (X=0, Y=100)
//+------------------------------------------------------------------+
Integer initialization () {
  png1.resize( 600 );
  png1._CreateCanvas( 700 , 150 );
  png1.resize(width.width/ 6 );
  png2.resize( 220 );
  png2._CreateCanvas(W.MouseX, W.MouseY);

  png1.BmpArrayFree();
event set millisecond timer ( 30 );
Return ( initialization successful );
} //+------------------------------------------------------------------+
Blank solution initialization ( const integer reason) {
EventExpirationTimer ();
} //+------------------------------------------------------------------+
Blank check () {
} //+------------------------------------------------------------------+
blank timer () {
Angle of double at rest = 0 ;
  drawicon(angle);
  Angle += 0.06 ;
} //+------------------------------------------------------------------+
BlankChartEvent ( const integer ID,
constant- length &l parameter,
constant double &d parameter,
const string &sparam) {
if (ID== CHARTEVENT_MOUSE_MOVE ) {
      png2._MoveCanvas(W.MouseX, W.MouseY);
      png2.MoveCanvas(W.MouseX/ 10 , 100 +W.MouseY/ 10 );
      png1._MoveCanvas( 700 +W.MouseX/ 16 , 150 +W.MouseY/ 16 );
  }
} //+------------------------------------------------------------------+
Blank drawn icon ( double angle) {
  canvas.erase( 0 );
double dx = png1._width/ 8.0 ;
Double dy = png1._height/ 6.0 ;
for ( integer x = 0 ; x< 8 ; x++)
for ( integer y = 0 ; y< 6 ; y++) {
Integer i=y* 8 +x;
Integer X = (i+ 1 )*W.width/ 50 ;
Integer Y= 60 + circle( sin (angle+X* 20.0 /W.width)* 50 );
Integer address = integer (y*dy)*png1._width + integer (x*dx);
for ( integer hours = 0 ; h  Array copy(Canvas.m_pixels,png1._bmp,(Y+h)*W.Width+X,adr+h*png1._width, integer (dx)); } Canvas.Update(); } //+----------------------------------------------------------------------------------+ 

Attachment download

📎 expert_test_png.mq5 (2.73 KB)

📎 icanvas_cb.mqh (57.71 KB)

📎 Png.mqh (51.77 KB)

📎 cubes.png (221.61 KB)

📎 icons.png (210.86 KB)

Source: MQL5 #45439