Measurement Tool with Viewer API in a Nuxt served app fails to show dimension value

Help Developers
1

Hi @dimitrie ! I have tried the new version of the viewer but It can’t show the measurement value . How can I deal with it. Thank you very much!

const measurementOptions = {} as MeasurementOptions;
measurementOptions.precision = 2;
measurementOptions.visible = true;
measurementOptions.type = 1;
measurementOptions.units = “cm”;
measurementOptions.vertexSnap = true;
viewer?.setMeasurementOptions(measurementOptions);
viewer?.enableMeasurements(true);

image
image1181×473 74.3 KB

2

@u0416033 are you able to share a working code sandbox where your other implementation steps are live?

Have you made any changes to the rest of the implementation? e.g. Default gizmo colours

If you don’t set units, does that change the outcome?

3

@jonathon I just use the viewer api in my project I will examine it again and provide the sandbox later.

4

https://codesandbox.io/p/sandbox/measurement-tool-forked-jtl654?file=%2Fsrc%2Findex.ts%3A9%2C1-10%2C1

It works normally in the sandbox but still have error in my nuxt project. The code like below :

onMounted(async () => {
  if (!container.value) {
    return;
  }
  const _container = document.getElementById("renderer");
  if (_container) {
    viewer = new DebugViewer(_container, DefaultViewerParams);
  }


  await viewer?.init();

  /** Configure the viewer params */
  const params = DefaultViewerParams;
  params.showStats = true;
  params.verbose = true;

  const measurementOptions = {} as MeasurementOptions;
  measurementOptions.precision = 2;
  measurementOptions.visible = true;
  measurementOptions.type = 1;
  measurementOptions.units = "mm";
  measurementOptions.vertexSnap = true;

  viewer?.setMeasurementOptions(measurementOptions);
  viewer?.enableMeasurements(true);
});
1 Like
5

Hi @u0416033

I had a look at your sandbox and I noticed you’re using the old viewer version. I strongly recommend you move to API 2.0, which you can find on npm under the viewer-next tag.

Here is an example sandbox which shows a basic usage for the measurement tool under API 2.0.

If you’re still having issues in you application, let us know. Possibly even add any errors/warnings you might get in the browser console

Cheers

2 Likes
6

Hi @alex .Thank you for your help. I have already solved this problem by uninstalling the ‘three’ package and install the latest speckle/viewer library . However, I still have one question: how can I remove existing dimension annotations in the new version of the viewer?
I need to get the selected dimension first and call measurements.removeMeasurement() or can just need to call the measurements.removeMeasurement() to remove all measutement? Thanks!

7

I have accomplished this with the following code :

      measurements.measurements.forEach((measurement: any) => {
        renderer.scene.remove(measurement);
      });
      measurements.measurements = [];

      renderer.needsRender = true;
      renderer.resetPipeline();
2 Likes
8

Hi @u0416033

The current API does not provide any way of removing all measurements programmatically. removeMeasurement from the MeasurementsExtension will remove any selected measurement, or the ongoing measurement if there is not measurement selected.

We will iterate on the measurements extension soon, and we’ll add means of better programmatic control over measurements. Until then, the way you removed them should be fine, nice going! :slight_smile:

Cheers,
Alex

2 Likes