Paravieweb(二) Paraviewweb结合VTK-Web 或者 ParaView-Web服务

Paraviewweb结合VTK-Web 或者 ParaView-Web服务

一、创建服务端程序，新建server文件夹和pv_server.py文件

import os

# import paraview modules.
from paraview.web import pv_wslink
from paraview.web import protocols as pv_protocols

from paraview import simple
from wslink import server

try:
    import argparse
except ImportError:
    # since  Python 2.6 and earlier don't have argparse, we simply provide
    # the source for the same as _argparse and we use it instead.
    from vtk.util import _argparse as argparse

# =============================================================================
# Create custom PVServerProtocol class to handle clients requests
# =============================================================================

class _DemoServer(pv_wslink.PVServerProtocol):
    authKey = "wslink-secret"
    def initialize(self):
        # Bring used components
        self.registerVtkWebProtocol(pv_protocols.ParaViewWebMouseHandler())
        self.registerVtkWebProtocol(pv_protocols.ParaViewWebViewPort())
        self.registerVtkWebProtocol(pv_protocols.ParaViewWebViewPortImageDelivery())
        self.updateSecret(_DemoServer.authKey)

        # Disable interactor-based render calls
        simple.GetRenderView().EnableRenderOnInteraction = 0
        simple.GetRenderView().Background = [0,0,0]
        cone = simple.Cone()
        simple.Show(cone)
        simple.Render()

        # Update interaction mode
        pxm = simple.servermanager.ProxyManager()
        interactionProxy = pxm.GetProxy('settings', 'RenderViewInteractionSettings')
        interactionProxy.Camera3DManipulators = ['Rotate', 'Pan', 'Zoom', 'Pan', 'Roll', 'Pan', 'Zoom', 'Rotate', 'Zoom']

# =============================================================================
# Main: Parse args and start server
# =============================================================================

if __name__ == "__main__":
    # Create argument parser
    parser = argparse.ArgumentParser(description="ParaViewWeb Demo")

    # Add default arguments
    server.add_arguments(parser)

    # Extract arguments
    args = parser.parse_args()

    # Start server
    server.start_webserver(options=args, protocol=_DemoServer)

二、创建客户端程序，新建src文件夹和index.js文件

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';

document.body.style.padding = '0';
document.body.style.margin = '0';

const divRenderer = document.createElement('div');
document.body.appendChild(divRenderer);

divRenderer.style.position = 'relative';
divRenderer.style.width = '100vw';
divRenderer.style.height = '100vh';
divRenderer.style.overflow = 'hidden';

const config = { sessionURL: 'ws://localhost:1234/ws' };
const smartConnect = SmartConnect.newInstance({ config });
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.connect();

三、package.json文件的配置，主要看npm包

{
  "name": "pvwwebproject",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode development",
    "build:debug": "webpack --display-modules",
    "build:release": "webpack --mode production",
    "start": "webpack-dev-server",
    "commit": "git cz",
    "semantic-release": "semantic-release"
  },
  "author": "qiucheng",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "hammerjs": "^2.0.8",
    "koa": "^2.5.2",
    "paraviewweb": "3.2.2",
    "wslink": "^0.1.7"
  },
  "devDependencies": {
    "kw-web-suite": "6.1.0",
    "monologue.js": "^0.3.5",
    "normalize.css": "^8.0.0"
  }
}

四、前后端的服务启动

后端：pvpython pv_server.py -i localhost --port 1234
客户端：npm run build;npm start;

五、配置项注解

pvpython pv_server.py -i localhost --port 1234；
const config = { sessionURL: 'ws://localhost:1234/ws' };
localhost可以换成127.0.0.1或者0.0.0.0；端口号1234也可以换成适当的端口号；