Set initial size of custom stamps

Product:
WebViewer

Product Version:
10.10.1

Please give a brief summary of your issue:
How to set an initial size for custom stamps without resizing images

Please describe your issue and provide steps to reproduce it:

So this is my code for adding some more stamps to WebViewer. I’m adding them to the “Standard Stamps” section, because I want them to be visible first thing.

To be clear, this works and I don’t have any technical issues with it. I’m also using React, but I don’t think that’s particularly relevant here.

const stampTool = viewerInstance.current.Core.documentViewer.getTool('AnnotationCreateRubberStamp');

stampTool.setStandardStamps([
  '/stamps/some_stamp.png',
  '/stamp/other_stamp.png',
  // Add the default WebViewer stamps, too
  ...stampTool.getStandardStamps(),
]);

My question is, how can I set the size of these custom stamps somehow, so they’re not too big to start. Because currently, users almost always have to resize them down considerably when they first add them to a document. Which is a bit of a nuisance.

Obviously resizing the actual image files might help, but they’re small enough as it is, and I don’t want to make them too blurry by reducing their resolution. They are PNG and JPG files, for reference.

I’d like to know if there’s a good way to do this. Let me know if I should provide more context. Thanks.

Hi there,

You can use the annotation manager’s annotationChanged event

or you can use the stamp tool’s annotationAdded event:
https://docs.apryse.com/api/web/Core.Tools.StampCreateTool.html#event:annotationAdded__anchor

to get access to the annotation being added and then adjust the size of the annotation accordingly.

An example of this using the annotationChanged event is available in this forum post:

Best regards,
Kevin Kim

Thanks for the response. That’s getting me most of the way there. I still have a few questions.

My code so far borrows heavily from the linked example. It works, but there are some issues for my particular application.

viewerInstance.current.Core.annotationManager.addEventListener('annotationChanged', (annots, action, {imported}) => {
  if (!imported) {
    for (const annot of annots) {
      if (annot instanceof viewerInstance.current.Core.Annotations.StampAnnotation && action === 'add') {
        annot.Width = 128;
        annot.Height = 128;
        viewerInstance.current.Core.annotationManager.redrawAnnotation(annot);
      }
    }
  }
});

One issue is the imported doesn’t do what I thought it would. What I’m trying to do is stop the resizing from occurring on the provided “Approved”, “As Is”, “Completed”, etc. stamps. Because they’re good the way they are.

The other issue I’m running into is that the stamps I want to add aren’t necessarily squares. Is there any way to obtain the aspect ratio ahead of changing the width and height of the annotation? Or perhaps a way to just change the width OR the height, but keep the original aspect ratio? Because one dimension of 128 works for my application, but I don’t want them to get warped in the resizing process.

Thanks again.

Hi there,

One issue is the imported doesn’t do what I thought it would. What I’m trying to do is stop the resizing from occurring on the provided “Approved”, “As Is”, “Completed”, etc. stamps. Because they’re good the way they are.

The imported flag is generally for annotations that are already in the document or using importAnnotations API.

To only resize your custom stamps, you would need to differentiate them and the other stamps you added to setStandardStamps. One idea would be to use an array of defaultStandardStamps and check against them.
Here’s a very rough prototype:

const stampTool = documentViewer.getTool(Tools.ToolNames.RUBBER_STAMP)
const defaultStandardStamps = await stampTool.getStandardStamps() // or define them manually

annotationManager.addEventListener('annotationChanged', (annots, action, { imported }) => {
  if (!imported) {
    for (const annot of annots) {
      if (annot instanceof Annotations.StampAnnotation && action === 'add') {
        // check if part of default stamp
        let isDefaultStamp = false;
        defaultStandardStamps.forEach(stampName => {
          if (annot.Subject === stampName) {
            isDefaultStamp = true;
          }
        })
        if (!isDefaultStamp) {
          console.log('new stamp')
          annot.Width = 128;
          annot.Height = 128;
          annotationManager.redrawAnnotation(annot);
        }
      }
    }
  }
});

For stamp annotations, you can use the MaintainAspectRatio property:
https://docs.apryse.com/api/web/Core.Annotations.StampAnnotation.html#MaintainAspectRatio__anchor

Best regards,
Kevin Kim

Thanks. I like that concept.

However, this is what I’m getting as the list of default stamps:

From const defaultStamps = stampTool.getStandardStamps();

But it’s kind of inconsistent which annotation titles line up with these or not. Like there’s Rejected instead of SBRejected from the default list. For Public Release instead of ForPublicRelease, etc.

And I also tried using the MaintainAspectRatio property, but I don’t know where to set it for it to be effective.

It looks like you want to use the Icon property instead of Subject property, this will match by the names returned from getStandardStamps.

The MaintainAspectRatio property is for the stamp annotation, so you should be able to set it on creation, i.e. where you set the width/height of the annotation.

Best regards,
Kevin Kim