Can't run the example

[GiovanniTurri]

Hi, thank you so much for this great repo!
standalone.html works, but after the npm install (that said there were 157 vulnerabilities (4 low, 52 moderate, 79 high, 22 critical) ), I've tried both '''npm run dev:cone''' and '''npm run dev:image-slicing''' but had this block:
'''

[email protected] dev:cone
EXAMPLE=cone.js webpack-dev-server --mode=development

(node:5157) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)
(node:5157) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/tesla/EsempioVtkGit/vtk.js-examples/dist
node:internal/crypto/hash:68
this[kHandle] = new _Hash(algorithm, xofLen);
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/util/createHash.js:90:53)
at NormalModule._initBuildHash (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:386:16)
at handleParseError (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:434:10)
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:466:5
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/webpack/lib/NormalModule.js:327:12
at /home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at Array. (/home/tesla/EsempioVtkGit/vtk.js-examples/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v21.5.0
'''

Do you think it depends on my version of nodeJs?

Thank you for the help

[finetjul]

What about npm run example Cone ?

[GiovanniTurri]

Thank you @finetjul ! Unfortunately it doesn't work neither. As npm run shows that only "dev:" are available :(

[floryst]

The examples haven't been updated in a while. I will do that when I get the time. In the meantime, you should run the commands like so: NODE_OPTIONS=--openssl-legacy-provider npm run dev:...

[MattiaMontanari]

@floryst I couldn't get it to work. It's unfortunate that this repo is not maintained anymore. I find a bit difficult to find good elementary references for vtk.js. Are you planning to revise this repo? are the any other public repos that replace this one?

[floryst]

I'll update the repo for the newer webpack versions, but the examples won't be updated as much because they're associated with existing tutorials.

[MattiaMontanari]

I'll update the repo for the newer webpack versions, but the examples won't be updated as much because they're associated with existing tutorials.

Are the tutorials available online or only during Kitware official trainings?
I guess my question then boils down to: What's the best place to start learning? :-)

[athina635]

Hello, i've tried to get in touch with vtkjs, but the code are so old, for example to load a slicer, it will never work like in the repo code, i guess it un useful like that to be downgraded version

[finetjul]

Can you please provide a specific code that you can't run?

[athina635]

As im not really experienced with vtk and thats why im here, i found it hard to map the new version of code with the one bellow, its one provided in the tutorial for vtk js in order to render a slicer,
where there is no ImgeContant in new version of code in vtk documentation , there no istyle.setInteractionMode('IMAGE_SLICING'); ..Etc

import vtkGenericRenderWindow from 'vtk.js/Sources/Rendering/Misc/GenericRenderWindow';

import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkColorTransferFunction from 'vtk.js/Sources/Rendering/Core/ColorTransferFunction';
import vtkPiecewiseFunction from 'vtk.js/Sources/Common/DataModel/PiecewiseFunction';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';
import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';
import ImageConstants from 'vtk.js/Sources/Rendering/Core/ImageMapper/Constants';

const { SlicingMode } = ImageConstants;


// --- Set up our renderer ---

const container = document.querySelector('#container');

// We use the wrapper here to abstract out manual RenderWindow/Renderer/OpenGLRenderWindow setup
const genericRenderWindow = vtkGenericRenderWindow.newInstance();
genericRenderWindow.setContainer(container);
genericRenderWindow.resize();

const renderer = genericRenderWindow.getRenderer();
const renderWindow = genericRenderWindow.getRenderWindow();

// renderer camera to parallel projection
renderer.getActiveCamera().setParallelProjection(true);


// --- Set up interactor style for image slicing

const istyle = vtkInteractorStyleImage.newInstance();
istyle.setInteractionMode('IMAGE_SLICING');
renderWindow.getInteractor().setInteractorStyle(istyle);


// --- Set up the slicing actor ---

const actor = vtkImageSlice.newInstance();
const mapper = vtkImageMapper.newInstance();

mapper.setSliceAtFocalPoint(true);
mapper.setSlicingMode(SlicingMode.Z);

// tell the actor which mapper to use
actor.setMapper(mapper);


// --- set up default window/level ---

actor.getProperty().setColorWindow(255);
actor.getProperty().setColorLevel(127);


// --- load remote dataset ---

const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });

// wire up the reader to the mapper
mapper.setInputConnection(reader.getOutputPort());

reader
  .setUrl('https://kitware.github.io/vtk-js/data/volume/LIDC2.vti')
  .then(() => reader.loadData())
  .then(() => {
    // --- Add volume actor to scene ---
    renderer.addActor(actor);

    // --- Reset camera and render the scene ---
    renderer.resetCamera();
    renderWindow.render();
  });


// --- Expose globals so we can play with values in the dev console ---

global.renderWindow = renderWindow;
global.renderer = renderer;
global.actor = actor;
global.mapper = mapper;

[athina635]

Improved version of the code:

`const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

  renderer.getActiveCamera().setParallelProjection(true);

  const interactorStyle = vtkInteractorStyleImage.newInstance();
  renderWindow.getInteractor().setInteractorStyle(interactorStyle);

  // Create an ImageSlice actor
  const actor = vtkImageSlice.newInstance();

  // Create an ImageMapper and set it to a specific Z-slice
  const mapper = vtkImageMapper.newInstance();
  mapper.setSliceAtFocalPoint(true);
  mapper.setSlicingMode(vtkImageMapper.SlicingMode.K); // Z-axis slicing

  // Link the mapper to the actor
  actor.setMapper(mapper);

  // Set window and level for the slice contrast
  actor.getProperty().setColorWindow(255);
  actor.getProperty().setColorLevel(127);

  // Set up the dataset reader
  const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
  reader
    .setUrl("https://kitware.github.io/vtk-js/data/volume/LIDC2.vti")
    .then(() => {
      reader.loadData().then(() => {
        // Connect the reader’s output to the mapper
        mapper.setInputConnection(reader.getOutputPort());

        // Add the actor to the renderer
        renderer.addActor(actor);

        // Reset the camera to frame the slice
        renderer.resetCamera();
        renderWindow.render();
      });
    });`

[floryst]

Unfortunately I don't have the time to update this repository to work with the latest vtk.js versions. You can refer to the vtk.js examples page for up-to-date examples.