Modifying images included with VisiLogic

[Flex727]

I often see posts on here from people struggling with using the VisiLogic Image Library. Sometimes the images are close but not exactly what you need, or the wrong color, or something else minor. It's difficult to edit them directly due to the watermark or image format. What I do is place the image on a blank HMI screen, taking care that the image is sized exactly the way I want it, then take screenshot. That screenshot can be pasted into Paint, or your favorite graphics program, and then cropped and edited as needed. No watermark and it can be saved as .bmp for further use in VisiLogic. Over the years I've built a nice library of my own that has the images the way I want them.

Be sure you do not have the HMI screen "zoomed" in VisiLogic before taking the screenshot. One thing I've always liked about working with VisiLogic is the pixel-perfect representation on my computer screen. Also, VisiLogic seems to re-size an image with better fidelity than most graphics programs. Not sure how they do that.

This technique can also be used to combine text and graphics so that the text over graphics has a font that perfectly matches other text on the PLC screen.

And, finally, remember that if you are going to use any image in "Transparent" mode, that the transparency is controlled by the single pixel in the top left corner of the image. Make sure that pixel color is unique to everything except the background. I usually use pink so that it stands out to me while editing (the pink will disappear on the PLC HMI screen).

[kratmel]

I totally agree with Flex. Image processing takes a long time. This upsets users who are beginning to study the process of creating displays.

The user usually needs a good picture - a background that graphically explains what this display used for. Above this background, we can place the elements we need - numbers, buttons, lamps, etc.

In fact, we can improve the picture itself using any graphics program as noted by Flex.

I often use to export a drawn display without any numbers and controls to a bmp file. On it I can manually fix the necessary components.

And this is where I constantly fall into the trap of an imperfect export process.

I can't export the display image itself. It is stored together with the black frame ... 😢😢😢😢😢

As you can see - if there was no frame - the image format would be fully consistent with the resolution of the PLC screen.

I have to accurately cut out the useful from the frame, then modify it to the desired appearance and set as the background of the future display. This way I know exactly what it will look like on the display and whether the proportions of the elements in the image are correct.

So maybe  I'll try to ask the creators - is it possible to export only a useful display image with HMI display resolution without a black frame ?

 

[Isakovic]

On 1/9/2022 at 5:49 PM, Flex727 said:

And, finally, remember that if you are going to use any image in "Transparent" mode, that the transparency is controlled by the single pixel in the top left corner of the image. Make sure that pixel color is unique to everything except the background. I usually use pink so that it stands out to me while editing (the pink will disappear on the PLC HMI screen).

I didn't know this about top left pixel. Learned something today.

[Flex727]

On 1/9/2022 at 5:25 PM, kratmel said:

I have to accurately cut out the useful from the frame, then modify it to the desired appearance and set as the background of the future display. This way I know exactly what it will look like on the display and whether the proportions of the elements in the image are correct.

What I do is open the image in Paint, go fullscreen and zoom as much as possible, then move the bottom border of the "drawing page" up and right border to the left. Then rotate the image 180 degrees and repeat. Finally rotate 180 degrees again and save. This is actually very quick and easy and doesn't require any precision mouse work.

[Ausman]

Just a FYI, wondering if the program XnConvert might be useful in this situation.  I use it for all sorts of image manipulation, but mainly batch resizing.  It does everything very well.  I think you'd find that setting it's parameters to a particular custom setting might make some of these operations much easier.

I would see it perhaps taking a little while to get the custom setting just right  for a particular need like mentioned here, but after that it would be dead easy.

cheers, Aus

https://www.xnview.com/en/xnconvert/

[vincentBsef]

On 1/9/2022 at 5:49 PM, Flex727 said:

[...]

And, finally, remember that if you are going to use any image in "Transparent" mode, that the transparency is controlled by the single pixel in the top left corner of the image. [...]

Dear Flex727,
This is exactly what I needed, because until now I had only random results. ( Well, I think I already knew that but use very little and had forgotten).

And the rest, well, the beginning, is just great!

Thanks a lot!