How to write a Photoshop filter -- add a thumbnail to the dialog box

In the previous article, we explained to add term resources to the filter, so that our filter can be perceived and described by the PS's scripting system, which is friendly to support the "action" panel of PS. In this article, we will further refine the previous DEMO, such as adding a small thumbnail for real-time preview on the parameter dialog box. The introduction of the dialog box is mainly to give users an opportunity and interface to set or adjust the image processing algorithm used by the filter. Usually as a measure of UI friendliness, a preview should be provided on the dialog box, so that the impact of the parameters on the results can be intuitively fed back to the user and guide them to adjust the parameters. Instead of requiring users to repeatedly execute filter commands to see the effect and then adjust parameters.

You should not be difficult to add a function of "adding a tap picture" before, but when I tried to do this, I quickly found that it was far more difficult than the explanation in the article I wrote in the past. Because when we try to use the callback function provided by PS to display thumbnails, we must be completely clear about the interface details provided by PS, including parameter settings that affect scaling, data distribution, scan lines and other details. There can't be any mistakes, otherwise we may see abnormal display, or even accidentally cause the memory to go out of bounds.

Before introducing thumbnails, I first made some interesting improvements to the filter algorithm and made a little enhancement to make it more practical.

(1) Introduce "pixel random dithering" parameters and algorithms.

When we set the pixels before, the input and output positions were completely consistent, that is, Dest(i, j) = f (Src(i, j)).

Now we consider making a little change to the above formula and randomly dithering the source pixels, that is, Dest(i, j) = f (Src(i+dx, j+dy)).

We set the jitter distance to the distance (pixel) parameter, so that when we take the source pixel, we randomly select a point as the source pixel within the square with the current pixel as the center and extending the distance to the periphery. This gives them a "dissolving" or "eroding" effect in the resulting graph. As shown in the figure below:

# Therefore, we added the distance parameter to the filter parameter, indicating the random jitter distance in the figure above. In this way, when we set the pixel at the (i, j) position, the source pixel coordinates we take are:

x = i + rand()%(2*distance+1) - distance;

y = j + rand ()%(2*distance + 1) -dance;

In actual processing, we also need to consider the above results x, Y may exceed the valid data boundary, so it is necessary Limit x, y to inside filterRect.

and because we use the tile processing method, our adjustment requires a little skill. We will change the inRect we request from PS, that is, every time we patch, outRect will remain the same as before, and we will try to expand inRect by distance pixels to all sides. This will ensure that we can get valid data every time we patch. (when the patch is inside the filterRect), unless the patch is on the edge of the filterRect.

It must be noted that since inRect is "larger" than outRect, at this time the pixels of the two Rects are no longer the same size and completely overlapping, but have a certainMove! In the code we must consider the offset relationship between the two rectangles. You can refer to my source code here, so I won’t explain the processing method in detail.

(2) Add “Thumbnail” (Proxy) to the dialog box.

We added a parameter, and then left a small area on the left side of the dialog box to display thumbnails. For convenience, I placed a hidden STATIC control (Proxy Banner) in the thumbnail position. Its main function The usefulness is that I can get the bounds (client area coordinates) of the "thumbnail" at runtime. The modified dialog box is as shown below:

## When displaying thumbnails, we use the displayPixels callback function in gFilterRecord. The prototype of this function is as follows (typedef of function pointer):typedef MACPASCAL OSErr (*DisplayPixelsProc) (const PSPixelMap *source,const VRect *srcRect,

int32 dstCol,void * platformContext);

dstRow and dstCol describe the "target row" and "target column" coordinates of the target area. Please pay attention to the difference between their logical meaning and the parameters we usually use. Here dstRow is equivalent to destY, and dstCol is equivalent to the destX parameter, that is, (dstCol, dstRow) is the starting coordinate in the target area. This needs to be noted.

The last parameter platformContext is HDC in windows system.

typedef struct PSPixelMap { int32 version; VRect bounds; int32 imageMode; int32 rowBytes; int32 colBytes; int32 planeBytes; void *baseAddr; //--------------------------------------------------------------------------- // Fields new in version 1: //--------------------------------------------------------------------------- PSPixelMask *mat; PSPixelMask *masks; // Use to set the phase of the checkerboard: int32 maskPhaseRow; int32 maskPhaseCol; //--------------------------------------------------------------------------- // Fields new in version 2: //--------------------------------------------------------------------------- PSPixelOverlay *pixelOverlays; unsigned32 colorManagementOptions; } PSPixelMap;

#

For the PS CS version, it requires us to set it to 1. Future versions of PS may expand it and bump up this version number.

◆ bounds: the rectangle occupied by the pixel data.

◆ imageMode: The image mode of the data area.

It supports the following modes: grayscale, RGB, CMYK, Lab.

◆ rowBytes: The number of bytes between adjacent rows.Equivalent to the scan line width (important), in bytes, must be set correctly.

◆ colBytes: The distance in bytes of pixel data in adjacent columns.Since the data is "centrally distributed", the value of this attribute mainly depends on the color depth of the pixel. For a normal 24-bit depth image that uses one byte per pixel per channel, this distance is 1 byte.

planeBytes: The distance in bytes between adjacent channels.

Since the data is "centrally distributed", this attribute is usually rowBytes * image height.

◆ baseAddr: starting address of the data area.

I have mentioned in previous articles that the inData and outData provided to us by PS are channel cross-distributed (interleave). The distribution requirements of the data in PSPixelMap here are different. It requires the data to be distributed centrally in channels.

例如对于RGB图像来说， 当我们请求所有通道时，inData/outData中的数据分布是：

R | G | B | R | G | B | R | G | B | ..... (interleave)

G | G | ... B | B | B .... (centralized distribution)

That is to say, for inData and outData, all channel data are cross-distributed, and the data of the same channel (plane) is distributed The area exists in leaps and bounds.

For PSPixelmap, the data of the same channel (Plane) is concentrated, first list all the first channel data, then list all the second channel data, and so on.

At the same time, when we perform pixel positioning and prediction buffer size, just like ordinary Bitmap pixel positioning, we must use the inRowBytes attribute (equivalent to the scan line width) in the filter parameters to position between "rows". You cannot assume or calculate the "row width" yourself.

[Note] We must know the details of the data distribution so that we can correctly locate the pixels at the specified position.

## Because the image size of PS processing is diverse, Therefore, one of the problems we must face when displaying thumbnails is the scaling problem. In most cases, since the thumbnails are only qualitative display, the requirements for data accuracy can be reduced, and taking into account performance factors, the size of the thumbnails can generally be set smaller. When the original image (filterRect) is larger than the thumbnail ( bannerRect) is large, we want the image to be shrunk and displayed on the thumbnail. When the original image is smaller than the thumbnail, we just use the actual original image size (i.e. scaling factor = 1). So now we need to understand how to reduce the original image to thumbnail size. In GDI we know that we can use theStretchBlt

Typedef Long Fixed;## but the actual significance of Fixed in PS is a (fixed -point) decimal. The so-called Fixed is relative to float (floating point decimal). The position of the decimal point in float is not fixed, so it is called floating point. Fixed disassembles a decimal into an integer part and a decimal part, and stores them into a high 16-bit and a low 16-bit respectively. That is, its meaning is "16.16".

For example, assuming that there is a decimal number 3.00F; then the corresponding Fixed number is 0x00030000;

The method of converting from floating point to Fixed type is:

#Fixed_fixed = (Fixed) ( _factor *0x10000

The method to convert from Fixed type to floating point type is (Remarks: 1 / 0x10000 = 0.0000152587890625 ):

##　　　　

_fixed;

double _factor = _fixed *0.0000152587890625;

===========================inputRate represents the sampling rate, which is a logical Decimal, we set its value to realize that the obtained inData is the scaling result of the original image. By default, the inputRate set by PS is 1, and there is no scaling. When we obtain the thumbnail data, we need to calculate the scaling factor (factor), and then set the inputRate to factor (note the data type conversion method).

### Inrect.richt * Inputrate, Inrect.bottom * InputRate)## For example, when inputrate is 2.0, each two pixel samples, then inRECT, The relationship of inData is shown in the following figure:

## We need to divide the coordinates of the inRect (pink rectangular area) we want by inputRate (assuming inputRate = 2 in the picture) to get the inRect (blue rectangle in the picture above) that needs to be submitted to PS. Then we use the advanceProc callback function to get inData as the image data on the right side in the above figure. It can be seen that its size has been reduced by half in both directions.

[Note 1] When the thumbnail is processed and the dialog box is closed, the inputRate must be restored to 0x00010000 (1.0). Otherwise it will continue to affect inData in subsequent actual processing! Cause the processing to produce unexpected results.

[Note 2] Filter parameters must consider the impact of image scaling. Parameters related to scaling should also be mapped to the thumbnail size accordingly (for example, the random jitter distance in this example should be reduced proportionally). Parameters that have nothing to do with scaling (such as opacity percentage and fill color in this example) can be ignored.

When PS provides indata, it can be supplemented. You can specify the value of the filled pixels (0~255), or set it to the following options (they are defined as negative numbers to distinguish them from the user-set pixel values):

plugInWantsEdgeReplication： 复制边缘像素。

//获取 buffer 回调函数集指针 BufferProcs *bufferProcs = gFilterRecord->bufferProcs; //请PS为我们申请内存 bufferProcs->allocateProc(bufferSize, &m_ProxyData.bufferId0); //请PS为我们锁定内存（禁止内存整理） //[ 1 ]函数返回被锁定的内存起始地址。 //[ 2 ]第二个参数是BOOL moveHigth，对windows平台将被忽略。 m_ProxyData.data0 = bufferProcs->lockProc(m_ProxyData.bufferId0, TRUE); //============================= // 这里是处理和更新缓冲区的期间 //============================= //使用结束后，释放和解锁缓冲区。 //解锁 gFilterRecord->bufferProcs->unlockProc(m_ProxyData.bufferId0); //释放内存 gFilterRecord->bufferProcs->freeProc(m_ProxyData.bufferId0);

//定义描述缩略图数据的结构(在CommonDefine.h中定义) typedef struct _PROXYDATA { int left;//缩略图左上角客户区坐标 int top; int width;//缩略图实际尺寸（像素） int height; int rowbytes; //扫描行宽度（bytes） int planebytes; //通道间的距离（bytes） float factor; //原图和缩略图之间的缩放因子 Ptr data0; //缩放后的原始数据块（即inData的一份拷贝），通过设置inputRate。 Ptr data1; //缩放后的显示数据块（用于即时性更新缩略图） BufferID bufferId0; //data0的bufferId BufferID bufferId1; //data1的bufferId } PROXYDATA; //用于缩略图缓冲区数据的参数 PROXYDATA m_ProxyData; //申请缩略图内存，并申请缩略图数据 void CreateProxyBuffer() { int filterWidth = gFilterRecord->filterRect.right - gFilterRecord->filterRect.left; int filterHeight = gFilterRecord->filterRect.bottom - gFilterRecord->filterRect.top; int bannerWidth = m_RectBanner.right - m_RectBanner.left; int bannerHeight = m_RectBanner.bottom - m_RectBanner.top; float f1 = (float)filterWidth / bannerWidth; float f2 = (float)filterHeight / bannerWidth; m_ProxyData.factor = max(f1, f2); //如果原图比缩略图小 if(m_ProxyData.factor < 1.0f) { m_ProxyData.factor = 1.0f; m_ProxyData.width = filterWidth; m_ProxyData.height = filterHeight; } else { //原图比缩略图大，则计算缩略图的实际尺寸 //把factor去除小数部分！因为我们不知道怎么把小数部分转换到Fixed的LOWORD。 m_ProxyData.factor = (int)(m_ProxyData.factor + 1.0f); m_ProxyData.width = (int)(filterWidth / m_ProxyData.factor); m_ProxyData.height = (int)(filterHeight / m_ProxyData.factor); } //设置缩略图左上角坐标(居中显示) m_ProxyData.left = m_RectBanner.left + (bannerWidth - m_ProxyData.width)/2; m_ProxyData.top = m_RectBanner.top + (bannerHeight - m_ProxyData.height)/2; //想PS请求原始数据，用于填充data0 gFilterRecord->inRect.left = (int)(gFilterRecord->filterRect.left / m_ProxyData.factor); gFilterRecord->inRect.top = (int)(gFilterRecord->filterRect.top / m_ProxyData.factor); gFilterRecord->inRect.right = (int)(gFilterRecord->filterRect.right / m_ProxyData.factor); gFilterRecord->inRect.bottom = (int)(gFilterRecord->filterRect.bottom / m_ProxyData.factor); //通知 P S我们希望的补充数据（未知区域的填充数据） gFilterRecord->inputPadding = 255; //plugInWantsEdgeReplication; //通知 PS 输入采样率 //PS中，Fixed数字是用DWORD表示小数，HIWORDF表示整数部分，LOWORD表示小数部分。即 "ffff.ffff" WORD hiword = (WORD)(m_ProxyData.factor); gFilterRecord->inputRate = (hiword << 16); //现在我们请求第一个通道的数据，以从PS那里获取一些必须的信息 gFilterRecord->inLoPlane = 0; gFilterRecord->inHiPlane = 0; //请求PS为我们更新InData gFilterRecord->advanceState(); //现在我们委托PS申请缓存空间，为了简单，我们假设内存充裕，不会失败 int inHeight = gFilterRecord->inRect.bottom - gFilterRecord->inRect.top; //扫描行宽度 * inRect高度 * 通道数 int bufferSize = gFilterRecord->inRowBytes * inHeight * gFilterRecord->planes; //获取 buffer 回调函数集指针 BufferProcs *bufferProcs = gFilterRecord->bufferProcs; //请PS为我们申请内存 bufferProcs->allocateProc(bufferSize, &m_ProxyData.bufferId0); bufferProcs->allocateProc(bufferSize, &m_ProxyData.bufferId1); //请PS为我们锁定内存（禁止内存整理） //[ 1 ]函数返回被锁定的内存起始地址。 //[ 2 ]第二个参数是BOOL moveHigth，对windows平台将被忽略。 m_ProxyData.data0 = bufferProcs->lockProc(m_ProxyData.bufferId0, TRUE); m_ProxyData.data1 = bufferProcs->lockProc(m_ProxyData.bufferId1, TRUE); //注意提供给displayPixels函数的数据不是interleave分布，而是一个通道0，通道1，通道2（集中分布）！ //也就是 R R R R | G G G G | B B B B | //现在我们把得到的通道interleave分布的数据转换为通道集中分布 uint8* p0=(uint8*)m_ProxyData.data0; //我们复制第一个通道的数据到data0起始处 m_ProxyData.planebytes = gFilterRecord->inRowBytes * inHeight; memcpy(p0,(void*)gFilterRecord->inData, m_ProxyData.planebytes); //复制其他通道 for(int i=1; iplanes; i++) { gFilterRecord->inLoPlane = i; gFilterRecord->inHiPlane = i; //请求PS为我们更新InData gFilterRecord->advanceState(); memcpy(p0 + i * m_ProxyData.planebytes,(void*)gFilterRecord->inData, m_ProxyData.planebytes); } //设置扫描行宽度 m_ProxyData.rowbytes = gFilterRecord->inRowBytes; }

char url[256]; //函数集指针 PSGetFileListSuite4 *suite; //获取GetFileList 回调函数集（callback suite）的指针 SPErr err = sSPBasic->AcquireSuite( kPSGetFileListSuite, //suite name kPSGetFileListSuiteVersion4, //suite version (const void**)&suite //suite pointer ); if(err) return TRUE; //获取网址 GetDlgItemText(hDlg, IDC_STATIC_MYBLOG, url, sizeof(url)); //用默认浏览器打开网址 suite->BrowseUrl(url); //释放suite sSPBasic->ReleaseSuite(kPSGetFileListSuite, kPSGetFileListSuiteVersion4);