[Paraview] Running a simple example using ParaviewWeb

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

Thank you, Sebastien!

It worked! The correct path should also have a '/' at the end so:

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

instead of

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

Thanks again!

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


2017-08-22 15:30 GMT-03:00 Sebastien Jourdain <
sebastien.jourdain at kitware.com>:

> Almost, the missing part is for "dataModel = new QueryDataModel(jsonData,
> 'path/to/dist/data')"
>
> 'path/to/dist/data' should be '/data' since your web server is serving
> path/to/dist as /
>
> On Tue, Aug 22, 2017 at 12:23 PM, Léo Pessanha <
> leonardopessanha74 at gmail.com> wrote:
>
>> 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/paravi
>>>> ewweb/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/Nat
>>>>>>>>>> ive/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/56d19142/attachment.html>

More information about the ParaView mailing list