[Paraview] Running a simple example using ParaviewWeb

Tue Aug 22 14:01:17 EDT 2017

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