[Paraview] Running a simple example using ParaviewWeb

Léo Pessanha leonardopessanha74 at gmail.com
Tue Aug 22 14:23:33 EDT 2017 

So, just to be clear in order for me to understand

I should copy the content of
'node_modules/tonic-arctic-sample-data/data/probe/' to 'dist/data' and use

dataModel = new QueryDataModel(jsonData, 'path/to/dist/data'),
>

in the src/index.js ?

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-22 15:01 GMT-03:00 Sebastien Jourdain <
sebastien.jourdain at kitware.com>:

> __BASE_PATH__ is meant to dynamically define the http endpoint. This
> should not be a file path...
> You can remove it from your code and provide a proper endpoint. For us it
> is used on to allow local and github.io deployment.
>
> In your case, you need to copy that data by yourself to the dist/data
> directory so you can access it via http...
>
> Hope that helps,
>
> Seb
>
> On Tue, Aug 22, 2017 at 11:45 AM, Léo Pessanha <
> leonardopessanha74 at gmail.com> wrote:
>
>> 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/Web
>>>>>>>>>>>> GL/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/0bd94354/attachment.html>

More information about the ParaView mailing list