[Paraview] Running a simple example using ParaviewWeb

Tue Aug 22 14:30:07 EDT 2017

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/7dbf6c84/attachment.html>