wslin and paraview web in angular project

[guozhi72]

Hi,
This place really not like a good place to ask, but I don't know where to ask this question.

This two links all use vtk_server.py for remote cone rendering, and use javascript as client:
1: https://github.com/dmreagan/vtk-remote-render/tree/master
2: https://kitware.github.io/vtk-js/examples/ImageStream.html.
I can make the javascript client to display a cone. But I want to use angular as client, but I have trouble to resolve wslink libary?

I got below error, don't know how to resolve the problem?

Can somebody teach me how to do it? I make pure javs script code to call paraview stuff, as show at the end of this letter, not sure what would be correct way to make angular client to work with paraview web, have spent quite a long time.

Could not find a declaration file for module 'wslink/src/SmartConnect'. 'c:/dev_azure/angular/vtk_remote/vtk-remote-render-new/angular_client/node_modules/wslink/src/SmartConnect/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/wslink if it exists or add a new declaration (.d.ts) file containing declare module 'wslink/src/SmartConnect';ts(7016))

Best

compomen ts code

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import {ImageView} from "./imageView";
import SmartConnect from 'wslink/src/SmartConnect';
// import * as wslink from 'wslink';

@component({
selector: 'app-remote-render',
templateUrl: './remote-render.component.html',
styleUrls: ['./remote-render.component.css']
})
export class RemoteRenderComponent implements AfterViewInit {

@ViewChild('imageDiv') imageDiv!: ElementRef;
cs: ImageView = new ImageView();

ngAfterViewInit() {
let container = this.imageDiv.nativeElement;
const config = { sessionURL: 'ws://localhost:1234/ws' };
// const config = { sessionURL: '/ws' };
const smartConnect_123 = SmartConnect.newInstance({ config });
this.cs.Initialize(container, smartConnect_123)
}

}

pure javascript code

// import 'normalize.css';

// import SmartConnect from 'wslink/src/SmartConnect';
import RemoteRenderer from 'paraviewweb/src/NativeUI/Canvas/RemoteRenderer';
import SizeHelper from 'paraviewweb/src/Common/Misc/SizeHelper';
import ParaViewWebClient from 'paraviewweb/src/IO/WebSocket/ParaViewWebClient';

export class ImageView
{

camera;
constructor()
{

}

Initialize(div, smartConnect) 
{

  this.windowWidth = div.clientWidth;
  this.windowHeight = div.clientHeight;

  // const config = { sessionURL: 'ws://localhost:1234' };
  const config = { sessionURL: 'ws://localhost:1234/ws' };
  
  const smartConnect = SmartConnect.newInstance({ config });

  try {
    smartConnect.onConnectionReady((connection) => {
      const pvwClient = ParaViewWebClient.createClient(connection, [
        'MouseHandler',
        'ViewPort',
        'ViewPortImageDelivery',
      ]);
      const renderer = new RemoteRenderer(pvwClient);
      renderer.setContainer(divRenderer);
      renderer.onImageReady(() => {
        console.log('We are good');
      });
      window['renderer'] = renderer;
      SizeHelper.onSizeChange(() => {
        renderer.resize();
      });
      SizeHelper.startListening();
    });

    smartConnect.onConnectionError((error) => {
      console.log('Connection error:', error);
    });
    smartConnect.connect();
    
  }
  catch (error) {
    console.log('Error occurred:', error);
  }


}

}

[jourdain]

Well it seems to be related to angular and type definition. The package is a Javascript one available on npm. I'm not sure we can help. That seems to be a angular question on how to integrate a plain Javascript library.

[guozhi72]

Thanks, I now make it work. Just put wslink and paraviewweb inside plain java scrip, and pass html reference ( hope I described it correctly), something like below, then will just work.
@ViewChild('imageDiv') imageDiv!: ElementRef;