Any flutterweb integration sample available?

Technical Support
1

Which product are you using?

PDF.js Express Version

PDF.js Express Plus

Detailed description of issue
I am looking for an integration sample with flutter web

Also how can I add additional icons on measurement toolbar

Expected behaviour
{Provide a screenshot or description of the expected behaviour}

Does your issue happen with every document, or just one?
{Answer here}

Link to document
{Provide a link to the document in question if possible}

Code snippet
{Provide a relevant code snippet}

2

Hi there,

Thank you for contacting pdf.js express forums,

We do not have a flutter web integration sample with pdf.js express. You can find all our samples available here: PDF.js Express · GitHub. Note that they could be using an older version of pdf.js

For adding additional icons in the toolbar, please follow our guide here:

Best regards,
Kevin Kim

3

Thank you. How to bring autocad like + cursor in this for measurements

4

Hi there,

To customize the cursor, please try the solution in this forum post:

Best regards,
Kevin Kim

5

Hello

I have managed to integrate with flutter, but having following issues

  1. The exportannotations not providing the updated list after an event (annotation - add, modify or delete). We tried waiting the flutter app, also async/await in JS… but no luck. Always getting last result

  2. We need to change 4 counters to different icons, please suggest best ways for it, also share available icon list

  3. Added an action button on top, but I need it to active on when counter item selected

  4. Change color of counter/annotation programatically

  5. Option to hide dropdown and keep only measurement tools. Can I also hide entire toolbar?

  6. How to hide the comment panel

  7. How to fill color in annotation with opacity (from program)

Thank you

6

Hi there,

  1. For add/modify/delete, please use exportAnnotationCommand:
    PDFJS Express WebViewer Class: AnnotationManager

  2. To customize the measurement count icons, please take a look at this forum post here:
    To replace Count tool icon by custom icon [Pdfjs-express 7.0] - #2 by Logan

  3. To add buttons on top toolbar, please check this guide here:
    PDF.js Express Viewer Customize Toolbar | Documentation

  4. Count tool is an extension of stickyCreate Tool, so you can modify the sticky annotations using their ‘color’ property, i.e.
    StickyAnnotation.Color = new Annotations.Color(255, 255, 255)

  5. You can hide elements in the UI with the following guide:
    Hide & Disable Buttons in PDF.js Express Viewer | Documentation
    (also in the customizing header guide above)

  6. You can disableElement using the above guide for this, i.e.

instance.UI.disableElement('notesPanel')
  1. Some annotations do not have fill color, but for those that do, you can follow the same steps as above:
Annotation.FillColor = new Annotations.Color(255, 0, 255)

Best regards,
Kevin Kim

7

Thank you for the update

I have couple more things to clarify

  1. How can I disable dragging annotations from one page to another in multi page PDF?

  2. Is there an option to display only one page at a time in viewer?

  3. On the left panel (thumbnails) , how can I remove the delete and other buttons. Also it is possible to add a link dynamically for those thumbnails

  4. Is it possible to add new page in bottom of pdf dynamically

Thanks

8

Hi there,

  1. To disable dragging annotations across pages, you can use the disableDraggingAcrossPages API
    PDFJS Express WebViewer Class: AnnotationManager

  2. To display one page at a time, you can turn on the page-by-page in the view controls:

    image
    image912×1264 54.1 KB

  3. To remove the thumbnail buttons, please follow the hiding UI elements guide:
    Hide & Disable Buttons in PDF.js Express Viewer | Documentation
    Could you please clarify what you mean by adding a link dynamically to the thumbnails? Clicking on the thumbnail will navigate the viewer to its page.

  4. pdf.js express does not support document manipulation, please see this post:
    insertBlankPages Example

Best regards,
Kevin Kim

9

Ok, thank you

How can I get document ID of the uploaded files? Can I get it from instance Object?

10

If you are referring to the docId as outlined in the example of this guide:

Then this would simply be the name of the document, and you can find this information via

instance.Core.documentViewer.getDocument().getFilename()

if the document is loaded into the viewer.

Best regards,
Kevin Kim

11

Thank you. Can I draw an annotation programatically. Basically I want to modify an annotation by passing different square feet value (for example : annotation initially drawn is 80 sqft and I want pass 100 sqft to change it)

12

Hi there,

Here is an example of drawing a rectangle annotation programmatically:

Best regards,
Kevin kim

13

How can I apply fill color automatically when user a draw an item (the color should be the one they choose from toolsoverlay). If they select red color, then the fill color also should be red, if its green then fill also in green, if its blue fill color also blue. I need this for area, perimeter and arc measument

14

Hi there,

When you draw the annotation with the tool, the annotation will have a StrokeColor property. You can use that to set it as your FillColor on annotation creation event:

Best regards,
Kevin Kim

15

Hello Again

PDFEXPRESS JS

I need set scale button in toolbar. Click on it should trigger calibration, so the user can draw a distance which he know. From there we should be able to set scale using the distance drawn. How can i implement it in PDFExpress JS

Thank you

16

Hi there,

Please follow this guide to customize the header of the toolbar:

If this is not enough for your use-case, you may have to follow the advanced UI customization:

Best regards,
Kevin Kim

17

Thank you

I wanted to add the calibrate button on tool bar first
Then ask the user to draw a line (scale) on click of it. Then it should show him the measurement with unit(s) and let him to change if required. Then it should take user to scale popup with that measurement and set his scale

Please help

18

Just thought of making the requirement specific

  1. Calibrate icon on toolbar (This i already did)
  2. Clicking on icon should show a popup with available measurements and instructions to draw a line
  3. After drawing the line, the measurement need to display in a textbox with unit
  4. Clicking on apply button should load the taken measurement in to scale popup window
  5. There user can set the scale with measurement from calibrate and set actual measurement. Also precision
  6. Save should set the scale with saved values
19

Hi there,

This would be a sample mock setup, could you please try something like this:

  1. Add the Calibrate Button to the Toolbar
    Since you’ve already added the calibrate button to the toolbar, ensure it’s properly linked to trigger the subsequent actions.
  2. Click Event for Calibrate Button
instance.UI.setHeaderItems(header => {
  const calibrateButton = {
    type: 'actionButton',
    img: '<icon_image_path>',
    onClick: () => {
      // Code to display the popup with instructions and measurement options
    }
  };
  header.push(calibrateButton);
});

  1. After the user clicks the calibrate button and the popup appears, they should be able to draw a line on the document.

  2. Once the line is drawn, you need to calculate and display the measurement in a textbox. This can involve capturing the length of the line annotation and converting it to the desired unit.

annotationManager.addEventListener('annotationChanged', (annotations, action) => {
  if (action === 'add') {
    // Check if it's a line annotation
    const lineAnnotation = annotations.find(annot => annot instanceof Annotations.LineAnnotation);
    if (lineAnnotation) {
      // Your code logic to calculate the measurement and display it in a textbox
    }
  }
});

  1. The textbox should have an ‘Apply’ button. On clicking this, the entered measurement should be loaded into a scale popup window.

  2. In the scale popup window, the user should be able to set the scale using the measurement from the calibrate step. They should also be able to define the actual measurement and select the precision level.

Best regards,
Kevin Kim

20

Can you please tell me how can I show measurement options in popup?