Want to mimic the stamp tool button functionality in custom button

Technical Support WebViewer
, ,
1

WebViewer Version: 11.4.0

Do you have an issue with a specific file(s)? No
Can you reproduce using one of our samples or online demos? NO
Are you using the WebViewer server? Nop
Does the issue only happen on certain browsers? No
Is your issue related to a front-end framework? No
Is your issue related to annotations? No

Please give a brief summary of your issue: Want to mimic the stamp tool button functionality in custom button.

Please describe your issue and provide steps to reproduce it: I want to mimic the stamp tool button functionality in custom button. Here is my code:

const stampImgPanel = new instance.UI.Components.CustomButton({
dataElement: ‘stampImgPanel’,
title: ‘Open Stamp Image Panel’,
img: ‘’,
onClick: async () => {
instance.UI.setToolMode(‘Stamp’);
isImageStampPanelOpen = !isImageStampPanelOpen;
isImageStampPanelOpen ? instance.UI.openElements([‘imageStampPanel’, ‘rubberStampPanel’]) : instance.UI.closeElements([‘imageStampPanel’,‘rubberStampPanel’]);
}
});

image
image747×131 2.9 KB

Want to mimic this button functionality.

2

Hello, I’m AiRon, an automated tech support bot :robot:
While you wait for one of our customer support representatives, I can help you with your question.


It looks like you want to create a custom button in WebViewer that mimics the functionality of the stamp tool. Your approach is almost correct, but a few adjustments might be needed to ensure the button behaves as expected.

Some things you can try:

  • Ensure that you have the correct tool name when setting the tool mode. It should match exactly with the tool name used in WebViewer.

  • Check if the elements you are trying to open or close (imageStampPanel, rubberStampPanel) are correctly defined in your UI configuration.

  • Make sure the img property in your custom button is set if you want to display an icon on your button.

  • Verify that your onClick function is correctly toggling the visibility of the panels.



Here are some resources that might help you:


Hopefully, this helps you solve your problem while you wait for a human to get back to you.

3

Hi Rishumishra,

The button you want to mimic is enabling a tool mode: “AnnotationCreateStamp”

You can enable this tool by doing:

const stampImgPanel = new instance.UI.Components.CustomButton({
			dataElement: ‘stampImgPanel’,
			title: ‘Open Stamp Image Panel’,
			img: ‘’,
			onClick: async () => {
				UI.setToolMode("AnnotationCreateStamp")
			}
});

Please let me know if that is what you intended to do.

Best Regards,
Mickaël.