How do I capture a single executing module PNG file?

Development
1

Does anyone know how the VCV Rack library module “screenshots” images are captured?

Or, does anyone know how to capture a PNG of an executing single module in a patch?

I currently use Snagit to capture my Meander module panel image from an executing patch at 100% zoom with cables transparent, but the problem is that I have to drag a capture rectangle around the module boundaries and it is tough to just get the module, all of the module and nothing but the module.

The current release of Meander uses the PNG image file in the browser view, but, as things are set up in Meander, my ports, controls and lights are still rendered on top of the static PNG image and it is difficult to get these to line up exactly due to errors when I captured the PNG. When I get it right, it looks great, but that requires quite a bit of trial and error. Also, I really don’t want to try to mess with the ports, parameter control, and lights rendering in the browser view.

Just as a reminder, Meander currently only relies on an panel SVG file to get the panel dimensions and the panel background color. All panel graphics are done procedurally at runtime via nanoVG. Since there is no actual SVG panel image in the SVG file, I am using the static PNG panel image file when in the browser. This all works great, but I would like to simplify my workflow for when I change the panel image in a new release.

Thanks in advance.

2

Not the best solution but I use ShareX which gives you a magnified view around the mouse allowing me to get a more consistent screen shot.

1 Like
3

Thanks. Snagit also gives a magnified view around the mouse cursor, but due to the blockiness of the resolution and lack of fine cursor control, I still can’t get it. Of course maybe there are some options in Snagit that I am unaware of that would make it easier. I will check.

4

Does ShareX have fine cursor control option?

5

Playing with Snagit, I can get better cursor fine control by using the keyboard arrow keys in conjunction with the mouse buttons, close to pixel accuracy.

This will help, but I still hope that someone knows how to capture a module image programmatically.

6

It appears that part of my problem is that the normal browser panel images seem to be captured inside of the panel border. Which region do you select when doing a ShareX capture?

7

Looks like this may not be true but is rather just an illusion between modules that have a dark border like Meander and those who do not and how browser renders them against a dark background.

8

I don’t’ have any ideas for automation, but maybe it would help to do post processing of the captured image.

I’m on Windows, and I use the native Windows Snipping Tool to capture any rectangular area of the screen. Don’t worry about being precise - capture a bit extra all around the desired image (your module). Then the result can be easily imported into a raster editing tool, such as Paint 3D on Windows. There I can initiate a crop, and then zoom in a crazy amount like 6000%, and manipulate opposite crop corners to discrete pixel positions. Then save the cropped result to PNG.

1 Like
9

Thanks. I will give that a try. I switched over to Snagit as the Windows snipping tool was deprecated, apparently, and was not initially available under Win11. It seems to be back now :thinking:

10

ShareX is free so you can try it yourself. Idk about fine mouse controls in it.

1 Like
11

Yeah, I do the same. Happen to have Photoshop, so I use that.

1 Like
12

Does the following NVGpaint line look correct? I am not sure about the nvgImagePattern() arguments, particularly the second and third arguments. Not sure what the units are.

std::shared_ptr<Image> lightPanelImage = APP->window->loadImage(asset::plugin(pluginInstance,"res/Meander-light.png"));
if (lightPanelImage) 
{
	int height=0;
	int width=0;
	nvgImageSize(args.vg, lightPanelImage->handle, &width, &height);
	NVGpaint nvgpaint=nvgImagePattern(args.vg, 0.0, 0.0, width, height, 0.0,     lightPanelImage->handle, 1.0);
	nvgFillPaint(args.vg, nvgpaint);
	nvgFill(args.vg);
}
13

If no one knows of a way to programmatically capture and save a single module panel image from an executing patch, I am just going to release the next Meander version with an improved manual capture of the light theme panel image. This one looks great and is the one that will show in the library, so although just a cosmetic issue, I will feel better.

I wonder if there is a way to get the Framebuffer for a module Window and then get the Image for that object but then I cannot see any way to write that image to disk as a PNG.

14

Yes, there is a command line option on rack itself

It will start, dump a screenshot of every module into the screenshots directory, then stop.

I’m not at my pc right now, so i cant remember the option.

1 Like
15

Looks reasonable. The units are pixels i think.

Pixels in the loaded bitmap that is.

1 Like
16

Thanks. Do you, or anyone, know where the screenshots directory is? Somewhere on this forum someone said it is all done in memory, I think. I’ve browsed but cannot find a directory.

17

Thanks. Strange that pixel position would be floats.

18

It’s in your rack documents folder. I don’t think it will be there until you make rack take some screenshots.

1 Like
19

Why do you find that strange?

If you can paint a box 23.5 pixels wide, why wouldn’t you be able to select fraction of a pixel from a bitmap resource.

20

Probably because I think of pixel positions as integers, but you’re right, they do not have to be.