Saving images to a file: ResourceSave

The MQL5 API allows you to write a resource to a BMP file using the ResourceSave function. The framework currently only supports image resources.

bool ResourceSave(const string resource, const string filename)

The resource and filename parameters specify the name of the resource and file, respectively. The resource name must start with "::". The file name may contain a path relative to the folder MQL5/Files. If necessary, the function will create all intermediate subdirectories. If the specified file exists, it will be overwritten.

The function returns true in case of success.

To test the operation of this function, it is desirable to create an original image. We have exactly the right image for this.

As part of the study of OOP, in the chapter Classes and interfaces, we started a series of examples about graphic shapes: from the very first version Shapes1.mq5 in the section about Class definition to the last version Shapes6.mq5 in the section about Nested types. Drawing was not available to us then, until the chapter on graphical objects, where we were able to implement visualization in the script ObjectShapesDraw.mq5. Now, after studying the graphical resources, it's time for another "upgrade".

In the new version of the script ResourceShapesDraw.mq5 we will draw the shapes. To make it easier to analyze the changes compared to the previous version, we will keep the same set of shapes: rectangle, square, oval, circle, and triangle. This is done to give an example, and not because something limits us in drawing: on the contrary, there is a potential for expanding the set of shapes, visual effects and labeling. We'll look at the features in a few examples, starting with the current one. However, please note that it is not possible to demonstrate the full range of applications within the scope of this book.

After the shapes are generated and drawn, we save the resulting resource to a file.

The basis of the shape class hierarchy is the Shape class which had a draw method.

In derived classes, it was implemented on the basis of graphic objects, with calls to ObjectCreate and subsequent setup of objects using ObjectSet functions. The shared canvas of such a drawing was the chart itself.

Now we need to paint pixels in some shared resource according to the particular shape. It is desirable to allocate a common resource and methods for modifying pixels in it into a separate class or, better, an interface.

An abstract entity will allow us not to make links with the method of creating and configuring the resource. In particular, our next implementation will place the resource in an OBJ_BITMAP_LABEL object (as we have already done in this chapter), and for some, it may be enough to generate images in memory and save to disk without plotting (as many traders like to periodically capture states charts).

Let's call the interface Drawing.

Here are just three of the most basic methods for drawing, which are enough for this case.

The point method is public (which makes it possible to put a separate point), but in a sense, it is low-level since all the others will be implemented through it. That is why the coordinates in it are real, and the content of the pixel is a ready-made value of the uint type. This will allow, if necessary, to apply various anti-aliasing algorithms so that the shapes do not look stepped due to pixelation. Here we will not touch on this issue.

Taking into account an interface, the Shape::draw method turns into the following one:

Then, in the Rectangle class, it's very easy to delegate the drawing of the rectangle to a new interface.

More efforts are required to draw an ellipse.

Finally, for the triangle, the rendering is implemented as follows.

Now let's turn to the MyDrawing class which is derived from the Drawing interface. This is MyDrawing that must, guided by calls to interface methods in shapes, ensure that a certain resource is displayed in a bitmap. Therefore the class describes variables for the names of the graphical object (object) and resource (sheet), as well as the data array of type uint to store the image. In addition, we moved the shapes array of shapes, which was previously declared in the OnStart handler. Since MyDrawing is responsible for drawing all shapes, it is better to manage their set here.

In the constructor, we create a graphical object for the size of the entire chart and allocate memory for the data array. The canvas is filled with zeros (meaning "black transparency") or whatever value is passed in the background parameter, after which a resource is created based on it. By default, the resource name starts with the letter 'D' and includes the ID of the current chart, but you can specify something else.

The calling code can find out the name of the resource using the resource method.

The resource and object are removed in the destructor.

The push method fills the array of shapes.

The draw method draws the shapes. It simply calls the draw method of each shape in the loop and then updates the resource and the chart.

Below are the most important methods which are the methods of the Drawing interface and which actually implement drawing.

Let's start with the point method, which we present in a simplified form for now (we will deal with the improvements later).

Based on point, it is easy to implement line drawing. When the coordinates of the start and end points match in one of the dimensions, we use the rect method to draw since a straight line is a degenerate case of a rectangle of unit thickness.

And here is the rect method.

Now we need to modify the OnStart handler, and the script will be ready.

First, we set up the chart (hide all elements). In theory, this is not necessary: it is left to match with the prototype script.

Next, we describe the object of the MyDrawing class, generate a predefined number of random shapes (everything remains unchanged here, including the addRandomShape generator and the FIGURES macro equal to 21), draw them in the resource, and display them in the object on the chart.

In the example ObjectShapesDraw.mq5, we started an endless loop in which we moved the pieces randomly. Let's repeat this trick here. Here we will need to add the MyDrawing class since the array of shapes is stored inside it. Let's write a simple method shake.

Then, in OnStart, we can use the new method in a loop until the user stops the animation.

At this point, the functionality of the previous example is virtually repeated. But we need to add image saving to a file. So let's add an input parameter SaveImage.

When it is set to true, check the performance of the ResourceSave function.

Also, since we are talking about input variables, let the user select a background and pass the resulting value to the MyDrawing constructor.

So, everything is ready for the first test.

If you run the script ResourceShapesDraw.mq5, the chart will form an image like the following.

Bitmap of a resource with a set of random shapes

When comparing this image with what we saw in the example ObjectShapesDraw.mq5, it turns out that our new way of rendering is somewhat different from how the terminal displays objects. Although the shapes and colors are correct, the places where the shapes overlap are indicated in different ways.

Our script paints the shapes with the specified color, superimposing them on top of each other in the order they appear in the array. Later shapes overlap the earlier ones. The terminal, on the other hand, applies some kind of color mixing (inversion) in places of overlap.

Both methods have the right to exist, there are no errors here. However, is it possible to achieve a similar effect when drawing?

We have full control over the drawing process, so any effects can be applied to it not only the one from the terminal.

In addition to the original, simple way of drawing, let's implement a few more modes. All of them are summarized in the COLOR_EFFECT enumeration.

Let's add an input variable to select the mode.

Let's support modes in the MyDrawing class. First, let's describe the corresponding field and method.

Then we improve the point method.

You can try running the script in different modes and compare the results. Don't forget about the ability to customize the background. Here is an example of what lightening looks like.

Image of shapes with lightening color mixing

To visually see the difference in effects, you can turn off color randomization and shape movement. The standard way of overlapping objects corresponds to the COMPLEMENT constant.

As a final experiment, enable the SaveImage option. In the OnStart handler, when generating the name of the file with the image, we now use the name of the current mode. We need to get a copy of the image on the chart in the file.

For more sophisticated graphic constructions of our interface, Drawing may not be enough. Therefore, you can use ready-made drawing classes supplied with MetaTrader 5 or available in the mql5.com codebase. In particular, take a look at the file MQL5/Include/Canvas/Canvas.mqh.