[Paraview] Running a simple example using ParaviewWeb

Léo Pessanha leonardopessanha74 at gmail.com
Tue Aug 22 13:45:25 EDT 2017


Thank you, Sebastien.

I am able to build the example but the data don't show up yelding in the
browser debugger

ReferenceError: __BASE_PATH__ is not defined[Learn More]
>

In the following line of MyWebApp.js

dataModel = new _QueryDataModel2.default(_index2.default, __BASE_PATH__ +
> '/data/probe/'),
>

Do you know what path should be resolved by (__BASE_PATH__ + 'data/probe') ?

I looked upon the the example webpage and repositories of
paraviewweb/vtk.js and in then the resolve is

 dataModel = new _QueryDataModel2.default(_index2.default, ('/paraviewweb')
> + '/data/probe/'),
>

but this path does not exists after

npm install paraviewweb  --save
> npm install kw-web-suite  --save-dev
>

In the repositories, __BASE_PATH__ shows up in karma.config. Not using and
not knowing how to use karma the problem?

I tried defining __BASE_PATH__ in

var path = require('path'),
    webpack = require('webpack'),
    loaders =
require('./node_modules/paraviewweb/config/webpack.loaders.js'),
    plugins =
    [ new webpack.DefinePlugin(
      {
        __BASE_PATH__: ''' a lot of paths '"
      }),
    ],


but of the lot of paths I tried, none worked.

Hope you can help me here!
Thanks in advance!


Leonardo Pessanha
Laboratory of Computational Methods in Engineering
Federal University of Rio de Janeiro - COPPE
Rio de Janeiro, RJ, Brasil


2017-08-14 18:38 GMT-03:00 Sebastien Jourdain <
sebastien.jourdain at kitware.com>:

> I think your import is correct.
>
> Regarding the sample data, this is the way you can download it via npm
> (when doing "npm install")
> => https://github.com/Kitware/paraviewweb/blob/master/package.json#L48
>
> On Mon, Aug 14, 2017 at 3:12 PM, Léo Pessanha <
> leonardopessanha74 at gmail.com> wrote:
>
>> Hi! Thank you for the help! Because of it I was able to build and start
>> the example correctly. Now I am trying different examples such as
>> MultiLayoutViewer https://kitware.github.io/para
>> viewweb/examples/MultiLayoutViewer.html .
>> I am still a little doubtful about my imports but I believe
>>
>> import MultiLayoutViewer from '..';
>>>
>> should be
>>
>> import MultiLayoutViewer from 'paraviewweb/src/React/Viewers
>>> /MultiLayoutViewer'
>>
>>
>> Right?
>>
>> I couldn't find the package *tonic-arctic-sample-data *that holds the
>> content needed in MultiLayoutViewer, MultiLayoutRenderer and Probe3DViewer
>> examples in trough npm.
>>
>> Do you know how to do proceed?
>>
>> Thanks in advance.
>>
>> Leonardo Pessanha
>> Laboratory of Computational Methods in Engineering
>> Federal University of Rio de Janeiro - COPPE
>> Rio de Janeiro, RJ, Brasil
>>
>>
>> 2017-08-10 11:35 GMT-03:00 Sebastien Jourdain <
>> sebastien.jourdain at kitware.com>:
>>
>>> With ParaViewWeb, we force the user to pick the version of the
>>> dependencies they wants to install instead of forcing them.
>>>
>>> Regarding your import path they are still wrong.
>>>
>>> from paraviewweb/src/Component/Native/Composite/example/index.js
>>>
>>> when you import '..' that resolve to paraviewweb/src/Component/Nati
>>> ve/Composite
>>>
>>> which means your imports should be:
>>>
>>> import CompositeComponent   from 'paraviewweb/src/Component/Nat
>>> ive/Composite';
>>> import BGColorComponent     from 'paraviewweb/src/Component/Nat
>>> ive/BackgroundColor';
>>>
>>> On Wed, Aug 9, 2017 at 7:37 PM, Léo Pessanha <
>>> leonardopessanha74 at gmail.com> wrote:
>>>
>>>> So, I was able to build using 'paraviewweb/src/' and installing
>>>> forcibly mout, axios and hammerjs packages.
>>>>
>>>> Now there's other js errors that I am going after like /plotly.js\ and
>>>> global reference ones !
>>>>
>>>> It's definitely not a simple task to build an example of paraviewweb as
>>>> a standalone app.
>>>>
>>>> Definitely will come back with updates.
>>>>
>>>> Best regards,
>>>>
>>>>
>>>> Leonardo Pessanha
>>>> Laboratory of Computational Methods in Engineering
>>>> Federal University of Rio de Janeiro - COPPE
>>>> Rio de Janeiro, RJ, Brasil
>>>>
>>>>
>>>> 2017-08-09 19:58 GMT-03:00 Léo Pessanha <leonardopessanha74 at gmail.com>:
>>>>
>>>>> So I am not sure of the first path yet. Is it 'paraviewweb/src/' or
>>>>> 'paraviewweb/src/Component'?
>>>>>
>>>>> I have the exactly same result using full path or starting with
>>>>> 'paraviewweb'
>>>>>
>>>>> Using:
>>>>>
>>>>> import CompositeComponent   from 'paraviewweb/src/';
>>>>>> import BGColorComponent     from 'paraviewweb/src/Component/Nat
>>>>>> ive/BackgroundColor';
>>>>>>
>>>>>
>>>>> Outputs a lot of:
>>>>>
>>>>> Module not found: Error: Can't resolve
>>>>>>
>>>>>
>>>>> So I did a 'npm list x' with x being the modules it couldn't
>>>>> resolve(axios, hammerjs and etc) and none of then was installed.
>>>>>
>>>>> root at PC:~/MyWebProject# npm list hammerjs
>>>>>> projeto1 at 0.0.1 /home/gabriel/MyWebProject
>>>>>> └── (empty)
>>>>>>
>>>>>> root at PC:~/MyWebProject# npm list axios
>>>>>> projeto1 at 0.0.1 /home/gabriel/MyWebProject
>>>>>> └── (empty)
>>>>>>
>>>>>
>>>>>
>>>>> Do you believe *npm install paraviewweb --save* and npm install *kw-web-suite
>>>>> --save-dev* failed installing the dependencies correctly?
>>>>>
>>>>> Best regards,
>>>>>
>>>>> Leonardo Pessanha
>>>>> Laboratory of Computational Methods in Engineering
>>>>> Federal University of Rio de Janeiro - COPPE
>>>>> Rio de Janeiro, RJ, Brasil
>>>>>
>>>>>
>>>>> 2017-08-09 19:38 GMT-03:00 Sebastien Jourdain <
>>>>> sebastien.jourdain at kitware.com>:
>>>>>
>>>>>> The import should start with 'paraviewweb' then you provide the full
>>>>>> path from there like:
>>>>>>
>>>>>> import BGColorComponent     from 'paraviewweb/src/Component/Native/
>>>>>> BackgroundColor';
>>>>>>
>>>>>> On Wed, Aug 9, 2017 at 6:24 PM, Léo Pessanha <
>>>>>> leonardopessanha74 at gmail.com> wrote:
>>>>>>
>>>>>>> Hi! I did the changes. The only thing I am not sure it's the right
>>>>>>> paths in the imports of ${ROOT}/src/index.js
>>>>>>>
>>>>>>> import CompositeComponent   from '..';
>>>>>>>> import BGColorComponent     from '../../BackgroundColor';
>>>>>>>>
>>>>>>>>
>>>>>>> Should I change this paths?
>>>>>>>
>>>>>>> I did try
>>>>>>>
>>>>>>> import CompositeComponent   from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src';
>>>>>>> import BGColorComponent     from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src/Component/Native/BackgroundColor';
>>>>>>>
>>>>>>> and
>>>>>>>
>>>>>>> import CompositeComponent   from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src/Component';
>>>>>>> import BGColorComponent     from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src/Component/Native/BackgroundColor';
>>>>>>>
>>>>>>> and
>>>>>>>
>>>>>>> import CompositeComponent   from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src/Component/Native';
>>>>>>> import BGColorComponent     from '/home/user/MyWebProject/node_
>>>>>>> modules/paraviewweb/src/Component/Native/BackgroundColor';
>>>>>>>
>>>>>>> With the last 2 sucessfully building but with JS errors in Firefox
>>>>>>>
>>>>>>> TypeError: _Component2.default is not a constructor[Learn More]
>>>>>>>>
>>>>>>>
>>>>>>> and
>>>>>>>
>>>>>>> TypeError: _Native2.default is not a constructor
>>>>>>>>
>>>>>>>
>>>>>>> and the first one not building and giving me a lot of
>>>>>>>
>>>>>>> Module not found: Error: Can't resolve
>>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> Thanks in advance!
>>>>>>>
>>>>>>>
>>>>>>> Leonardo Pessanha
>>>>>>> Laboratory of Computational Methods in Engineering
>>>>>>> Federal University of Rio de Janeiro - COPPE
>>>>>>> Rio de Janeiro, RJ, Brasil
>>>>>>>
>>>>>>>
>>>>>>> 2017-08-03 17:42 GMT-03:00 Sebastien Jourdain <
>>>>>>> sebastien.jourdain at kitware.com>:
>>>>>>>
>>>>>>>> If I get to it, I'll do what I've done with vtk.js to support both.
>>>>>>>>
>>>>>>>> See: https://github.com/Kitware/vtk-js/blob/master/Utilities
>>>>>>>> /config/dependency.js
>>>>>>>>
>>>>>>>> On Thu, Aug 3, 2017 at 1:49 PM, Léo Pessanha <
>>>>>>>> leonardopessanha74 at gmail.com> wrote:
>>>>>>>>
>>>>>>>>> Thank you, Sebastien. I will give a try!
>>>>>>>>>
>>>>>>>>> Do you believe it's best to rollback webpack to 1.x or to change
>>>>>>>>> the webpack.config.js in order to fit webpack 2.x API?
>>>>>>>>>
>>>>>>>>> Leonardo Pessanha
>>>>>>>>> Laboratory of Computational Methods in Engineering
>>>>>>>>> Federal University of Rio de Janeiro - COPPE
>>>>>>>>> Rio de Janeiro, RJ, Brasil
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> 2017-07-24 17:21 GMT-03:00 Sebastien Jourdain <
>>>>>>>>> sebastien.jourdain at kitware.com>:
>>>>>>>>>
>>>>>>>>>> Based on the path given in the setup guide, you should copy the
>>>>>>>>>> example you want to reproduce inside ${ROOT}/src/* where the main example
>>>>>>>>>> file should be named index.js.
>>>>>>>>>>
>>>>>>>>>> Then you should be able to build your example using the npm
>>>>>>>>>> command: "npm run build".
>>>>>>>>>>
>>>>>>>>>> Maybe the vtk.js explanation might be easier to follow (
>>>>>>>>>> https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_depe
>>>>>>>>>> ndency.html), but the concept is exactly the same.
>>>>>>>>>> As it is picking the example available here
>>>>>>>>>> https://kitware.github.io/vtk-js/examples/Cone.html |
>>>>>>>>>> https://github.com/Kitware/vtk-js/tree/master/Examples/WebGL/Cone
>>>>>>>>>> and making a standalone application from it.
>>>>>>>>>>
>>>>>>>>>> Just be aware that vtk.js is using webpack2 which is not the case
>>>>>>>>>> for ParaViewWeb.
>>>>>>>>>>
>>>>>>>>>> Hope that helps,
>>>>>>>>>>
>>>>>>>>>> Seb
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Mon, Jul 24, 2017 at 1:28 PM, Léo Pessanha <
>>>>>>>>>> leonardopessanha74 at gmail.com> wrote:
>>>>>>>>>>
>>>>>>>>>>> Hi!
>>>>>>>>>>>
>>>>>>>>>>> I would like to know the steps in order to run simple example
>>>>>>>>>>> like the following one:
>>>>>>>>>>>
>>>>>>>>>>> https://kitware.github.io/paraviewweb/examples/Composite/ind
>>>>>>>>>>> ex.html
>>>>>>>>>>>
>>>>>>>>>>> It doesn't need to be a really elaborated tutorial, but a simple
>>>>>>>>>>> one with the main things.
>>>>>>>>>>> I have little to no background in web development.
>>>>>>>>>>>
>>>>>>>>>>> What I managed to do so far was to create my own project and add
>>>>>>>>>>> paraviewweb to it like its described in
>>>>>>>>>>> https://kitware.github.io/paraviewweb/docs/setup.html .
>>>>>>>>>>>
>>>>>>>>>>> I don't know what to do next but I believe that a great start
>>>>>>>>>>> would be to know where to put the source code in the example and how to run
>>>>>>>>>>> it.
>>>>>>>>>>>
>>>>>>>>>>> Thanks in advance,
>>>>>>>>>>>
>>>>>>>>>>> Leonardo Pessanha
>>>>>>>>>>> Laboratory of Computational Methods in Engineering
>>>>>>>>>>> Federal University of Rio de Janeiro - COPPE
>>>>>>>>>>> Rio de Janeiro, RJ, Brasil
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> _______________________________________________
>>>>>>>>>>> Powered by www.kitware.com
>>>>>>>>>>>
>>>>>>>>>>> Visit other Kitware open-source projects at
>>>>>>>>>>> http://www.kitware.com/opensource/opensource.html
>>>>>>>>>>>
>>>>>>>>>>> Please keep messages on-topic and check the ParaView Wiki at:
>>>>>>>>>>> http://paraview.org/Wiki/ParaView
>>>>>>>>>>>
>>>>>>>>>>> Search the list archives at: http://markmail.org/search/?q=
>>>>>>>>>>> ParaView
>>>>>>>>>>>
>>>>>>>>>>> Follow this link to subscribe/unsubscribe:
>>>>>>>>>>> http://public.kitware.com/mailman/listinfo/paraview
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Mon, Jul 24, 2017 at 1:28 PM, Léo Pessanha <
>>>>>>>>>> leonardopessanha74 at gmail.com> wrote:
>>>>>>>>>>
>>>>>>>>>>> Hi!
>>>>>>>>>>>
>>>>>>>>>>> I would like to know the steps in order to run simple example
>>>>>>>>>>> like the following one:
>>>>>>>>>>>
>>>>>>>>>>> https://kitware.github.io/paraviewweb/examples/Composite/ind
>>>>>>>>>>> ex.html
>>>>>>>>>>>
>>>>>>>>>>> It doesn't need to be a really elaborated tutorial, but a simple
>>>>>>>>>>> one with the main things.
>>>>>>>>>>> I have little to no background in web development.
>>>>>>>>>>>
>>>>>>>>>>> What I managed to do so far was to create my own project and add
>>>>>>>>>>> paraviewweb to it like its described in
>>>>>>>>>>> https://kitware.github.io/paraviewweb/docs/setup.html .
>>>>>>>>>>>
>>>>>>>>>>> I don't know what to do next but I believe that a great start
>>>>>>>>>>> would be to know where to put the source code in the example and how to run
>>>>>>>>>>> it.
>>>>>>>>>>>
>>>>>>>>>>> Thanks in advance,
>>>>>>>>>>>
>>>>>>>>>>> Leonardo Pessanha
>>>>>>>>>>> Laboratory of Computational Methods in Engineering
>>>>>>>>>>> Federal University of Rio de Janeiro - COPPE
>>>>>>>>>>> Rio de Janeiro, RJ, Brasil
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> _______________________________________________
>>>>>>>>>>> Powered by www.kitware.com
>>>>>>>>>>>
>>>>>>>>>>> Visit other Kitware open-source projects at
>>>>>>>>>>> http://www.kitware.com/opensource/opensource.html
>>>>>>>>>>>
>>>>>>>>>>> Please keep messages on-topic and check the ParaView Wiki at:
>>>>>>>>>>> http://paraview.org/Wiki/ParaView
>>>>>>>>>>>
>>>>>>>>>>> Search the list archives at: http://markmail.org/search/?q=
>>>>>>>>>>> ParaView
>>>>>>>>>>>
>>>>>>>>>>> Follow this link to subscribe/unsubscribe:
>>>>>>>>>>> http://public.kitware.com/mailman/listinfo/paraview
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://public.kitware.com/pipermail/paraview/attachments/20170822/9c91c026/attachment.html>


More information about the ParaView mailing list