diff --git a/docs/content/docs/cheatsheet.md b/docs/content/docs/cheatsheet.md
index 053e8e55..8c1a00d6 100644
--- a/docs/content/docs/cheatsheet.md
+++ b/docs/content/docs/cheatsheet.md
@@ -1,7 +1,6 @@
# Cheatsheet
-The working application below manage to capture the fundamentals of __trame__ in less than 45 lines.
-In that sense, it could be seen as a cheatsheet on how to use __trame__ as it is mostly self explanatory.
+The working application below captures the fundamentals of __trame__ in less than 45 lines. Consider this as a cheatsheet on how to use __trame__ as it is mostly self explanatory.
```python
from trame.app import get_server # Entry point to trame
@@ -52,7 +51,7 @@ with SinglePageLayout(server) as layout:
server.start()
```
-## Result
+## Results
@@ -60,25 +59,25 @@ server.start()
-## Things to understand
+## Explanatory Details
### State
-Read variable from shared state
+Read a variable from shared state:
```python
value = state.var_name
value = state["var_name"]
```
-Write variable to the shared state
+Write a variable to shared state:
```python
state.var_name = value
state["var_name"] = value
```
-Write several variables at once in the shared state
+Write several variables at once to the shared state:
```python
state.update({
@@ -87,7 +86,7 @@ state.update({
})
```
-Bind a method/function to a state variable change
+Bind a method/function to a state variable change:
```python
@state.change("var_name")
@@ -101,15 +100,14 @@ def change_detected(**kwargs):
print(f"Either var_name or var_name_1 is modified")
```
-Initialise a variable from the UI definition with an initial value.
-Use a tuple to define the value of a given attribute where the first entry is a string with the variable name and the second entry is its initial value.
+Specify an initial value for a UI variable. Use a tuple to define the value of a given attribute, where the first entry is a string with the variable name and the second entry is its initial value.
```python
vuetify.VTextField(v_model=("var_name", "initial value"))
vuetify.VSlider(v_model=("resolution", 6), min=1)
```
-Provide a JavaScript expression as attribute. We still provide a tuple but with no initial value.
+Provide a JavaScript expression as an attribute value. We still provide a tuple but with no initial value.
```python
vuetify.VTextField(value=("'Hello' + var_name", ))
@@ -117,7 +115,7 @@ vuetify.VTextField(value=("'Hello' + var_name", ))
### Method binding
-Method can be passed to events attribute of your UI elements. By default, the function will be called with no arguments.
+Methods can be passed to the events attribute of your UI elements. By default, the function will be called with no arguments.
If you want to control its arguments you can use a tuple where the second entry represents the __args__ and the third represents the __kwargs__. If you only want to provide args without kwargs, just provide a tuple with 2 entries. __$event__ is a reserved name to represent the event object.
@@ -129,7 +127,7 @@ vuetify.VBtn("Click me", click=(ctrl.do_something, "[index, $event]", "{ a: 12 }
### Controller
-The controller from trame is just a dynamic container for methods or functions that can be get or set in either order.
+The trame controller is just a dynamic container for methods or functions that can be set or get in either order.
```python
vuetify.VBtn("Click me", click=ctrl.do_something)
@@ -142,11 +140,11 @@ ctrl.do_something = fn
## Life Cycle
-* on_server_ready : All protocols initialized and available for client to connect
-* on_client_connected : Connection established to server
-* on_client_exited : Linked to browser "beforeunload" event
-* on_server_exited : Trame is exiting its event loop
-* on_server_reload : If callback registered it is use for reloading server side modules
+* on_server_ready : All protocols initialized and available for the client to connect.
+* on_client_connected : Connection established to server.
+* on_client_exited : Linked to browser "beforeunload" event.
+* on_server_exited : Trame is exiting its event loop.
+* on_server_reload : If callback registered it is used to reload server side modules.
```python
@@ -156,8 +154,8 @@ ctrl.on_server_ready.add(lambda **_: print("Staring Factory - Launcher barrier")
ctrl.on_client_exited = lambda **_: print("Someone is gone...")
```
-## Conclusion
+## Conclusion and Next Steps
-The remaining part to learn is all the components available for displaying other 3D graphics, charts, maps and more. But right now you've learn the fundamentals on how trame works which should let you build your application simply. For more details, please refer to the [tutorial](https://kitware.github.io/trame/docs/tutorial.html) or [API](https://trame.readthedocs.io/en/latest/index.html).
+At this point the fundamentals of trame have been presented. To build fully-fledged applications, the next steps are to learn the various components available for displaying 3D graphics, charts, maps and more. For more details, please refer to the [tutorial](https://kitware.github.io/trame/docs/tutorial.html) or [API](https://trame.readthedocs.io/en/latest/index.html).
-Trame is a powerful framework for building any kind of application in plain Python. From prototypes to professional applications, trame offers an innovative approach for “write once and run anywhere” by allowing your app to migrate from your desktop to a cloud service.
\ No newline at end of file
+Trame is a powerful Pyton-based integration framework for creating visual analytics applications. From prototypes to professional applications, trame offers an innovative approach to “write once and run anywhere” through applications that run from a desktop to a cloud service using a standard web browser.
diff --git a/docs/content/docs/getting_started.md b/docs/content/docs/getting_started.md
index fe5c6a18..a9fa24bd 100644
--- a/docs/content/docs/getting_started.md
+++ b/docs/content/docs/getting_started.md
@@ -1,23 +1,18 @@
# How to use trame
-trame aims to streamline creation of graphical interfaces for interactive data manipulation and visualization with a very compact and simple API.
-This document tries to capture the core API and concepts behind trame so you can use it when you get started but also as a reference once you get more familiar with trame.
+Trame aims to streamline the creation of visual analytics applications, with support for interactive data manipulation and visualization, through a very compact and simple API. This document describes the core API and concepts behind trame; the document is both a start up guide, but also a quick reference for those more familiar with trame.
-## Core concept
+## Core concepts
-trame allow you to easily share variables between the UI components and your Python application.
-But on top of that shared state, functions and methods can be triggered from either side.
-For example, you can link a Python function to be called when a button in the UI is clicked.
-This document will focus on how you can leverage those two functionalities inside your application using trame.
+Trame allows you to easily share variables between UI components and a Python application. The resulting shared state can be modified by functions and methods invoked from the UI or application. For example, a Python function can be called when a button in the UI is clicked; or the UI can be updated in response to programmatic changes to the state. This document focuses on how you can leverage these capabilities inside your application using trame.
## Shared state
-trame mainly focuses on the Python side, therefore the variables that we aim to use across our application will be defined from Python.
-The following sections will illustate the various way you can affect the shared state.
+Trame mainly focuses on the Python side, therefore the variables that we aim to use across our application will be defined from Python. The following sections illustate the various ways the shared state can be modified.
### UI element with a dynamic variable
-The example below uses Vuetify to create a slider where the value controlled by that slider is available in our shared state behind the name `slider_value` that we initialize with the value `8`. So variables in our shared state can be defined and initialized right were we want to use them when defining our UI elements. In this example, the slider will be able to modify that value but also will reflect its content if that value changes on the server side.
+The example below uses Vuetify to create a slider where the value is controlled by the slider. The variable `slider_value` is initialized with the value `8`. So variables in the shared state can be defined and initialized right were we want to use them when defining our UI elements. In this example, the slider will be able to modify that value but also will reflect its content if that value changes on the server side.
```python
from trame.widgets import vuetify
@@ -30,10 +25,9 @@ slider = vuetify.VSlider(
)
```
-### Listening to change
+### Listening to changes
-Let's pretend we want to monitor the value of `slider_value` within our Python application and execute a method when that variable gets updated.
-The code below illustate how we can annotate a function so it can be called when a value of our shared state is modified.
+Imagine that we want to monitor the value of `slider_value` within our Python application and execute a method when that variable is updated. The code below illustate how we can annotate a function so it can be called when a value of the shared state is modified.
```python
from trame.app import get_server
@@ -46,12 +40,11 @@ def slider_value_change(slider_value, **kwargs):
print(f"Slider is changing slider_value to {slider_value}")
```
-So far, we only have the client modifying that variable. But if a function on the server were to change that variable, that function will also be called as we simply react to the fact that the variable has been updated by someone.
+So far, we only have the client modifying that variable. But if a function on the server were to change that variable, the function would also be called as we simply react to the fact that the variable has been updated by someone.
### Changing the value from Python
-Within our Python application it is possible that we would like to read and even write in the shared state so the UI can reflect your changes.
-The code below provides a function that will read the current value and update its content.
+Within a Python trame application, it is possible to update the UI in response to read and even write operations to and from the shared state. The code below provides a function that will read the current value and update its content.
```python
from trame.app import get_server
@@ -67,7 +60,7 @@ def random_update():
### Forcing state exchange
-Sometimes, the variable inside your shared state is an actual object with nested structure. While the state on the Python side always keeps the same reference to that object, you are manually editing its content and you want to flush its content so the client can see your changes. In that use case we have a `dirty()` method that can be called with the list of variable names that should be pushed. This is also useful in some async contexts to control when pieces of the state should be pushed to the other side. The code below provides a usage example.
+Sometimes, the variable inside your shared state is an actual object with a nested structure. While the state on the Python side always maintains a reference to that object, when manually editing it's important to flush its contents so that the client reflects changes. In this situation, the `dirty()` method can be called with the list of variable names that should be pushed. This is also useful in some async contexts to control when pieces of the state should be synchronized between client and server. The code below provides a typical example.
```python
import asyncio
@@ -82,7 +75,7 @@ async def update_time():
## Method calls
-When building a client/server application you will need to be able to trigger methods on both side and trame has some easy ways to do that.
+When building a client/server application you will need to be able to trigger methods on both sides and trame has some easy ways to do that.
### Bind method to a button click
@@ -109,10 +102,9 @@ def random_update():
ctrl.rnd_update = random_update
```
-### Calling JS methods
+### Calling JavaScript methods
-Some components in your layout may have APIs that you can use and call from the Python side.
-The code below provides an example of such use case:
+Some components in an application may have APIs that you be used and invoked from the Python side. The code below provides an example of such a use case:
```python
from trame.app import get_server
@@ -131,9 +123,7 @@ def reset_camera():
## Layout management
-Layouts are meant to define the core UI elements of an application. Think of FullScreen vs Toolbar, Drawer, Footer and so on.
-Layouts let you drop pieces of your UI into pre-defined locations.
-The layout gathers the way your application will look. It could be defined once or be redifined at runtime.
+Layouts are meant to define the core UI elements of an application. Think of FullScreen vs Toolbar, Drawer, Footer and so on. Layouts let you drop pieces of your UI into pre-defined locations. The layout organizes the way an application is structured. It could be defined once, or be redifined at runtime.
When creating a layout, you have the opportunity to define the Tab title along with a path to a favicon and a method to call at startup.
@@ -165,8 +155,7 @@ vuetify.VSlider(
## Command line arguments
-Since a trame application is a real application, as opposed to a service that aims to serve many concurrent users, you may want to provide some information to your application when you start it like which ML model you want to load or the file/directory that you would like to explore or process.
-This can be achieved by adding CLI parameters using [ArgParse](https://docs.python.org/3/library/argparse.html), like in the following example.
+Since trame is used to create applications, as compared to web services that aim to serve many concurrent users, it may be important to provide information to an application on start up. For example, which ML model to load, or the file/directory that you would like to explore or process. This can be achieved by adding CLI parameters using [ArgParse](https://docs.python.org/3/library/argparse.html), like in the following example.
```python
from trame.app import get_server
@@ -178,10 +167,9 @@ args = server.cli.parse_args()
print(args.data)
```
-## Starting the application
+## Starting an application
-trame server provides a `start()` method which will actually start your application.
-Usually we put the following section in your main script.
+The server provides a `start()` method which actually starts a trame application. Typically the following section is placed in the main script:
```python
if __name__ == "__main__":
diff --git a/docs/content/docs/index.md b/docs/content/docs/index.md
index 55382b42..deb2c56c 100644
--- a/docs/content/docs/index.md
+++ b/docs/content/docs/index.md
@@ -1,43 +1,43 @@
# Trame
-Trame v2 is out and available via `pip install trame` and therefore the documentation is now reporting the updated API and capabilities. If you were already working with Trame v1 you can look at our [migration guide](./trame_v2_migration.html).
+Trame v2 is out and available via `pip install trame`. Consequently the documentation is now reporting the updated API and capabilities. If you were already working with Trame v1 you can look at our [migration guide](./trame_v2_migration.html).
## Overview
-Trame is an Open Source platform for creating interactive and capable applications in plain Python in minutes.
+Trame is an open-source platform for creating interactive and powerful visual analytics applications. Based on Python, and leveraging platforms such as VTK, ParaView, and Vega, it is possible to create web-based applications in minutes.
## What is Trame
-Trame is a Python framework to simply build ubiquitous applications with a web front-end with no knowledge in web development or technology. Before Trame, building any application would require a full-stack developer at least a day. Now any Python developer can be running in less than a couple of minutes.
+Trame is a Python integration framework to easily build web applications with minimal knowledge of web development or technology. Before trame, building such applications typically required a full-stack developer at least a day. Now any Python developer can build applications in minutes.
## Why Trame
-There are variety of tools and frameworks available to you when building web applications, but very few are capable of doing interactive 3D visualization in an efficient manner by leveraging VTK or ParaView. VTK/ParaView Web was really the first, then vtk.js also enable Scientific Visualization in plain JavaScript. But with Trame, which is based on VTK/ParaView Web, you get the full power of such framework without the burden of web development.
+There are variety of tools and frameworks available for building web applications, but very few are capable of providing interactive 3D visualization. Trame does this by leveraging VTK and/or ParaView (as well as integrating other tools such as Vega). Trame is the culmination of decades of work: VTK/ParaView, ParaViewWeb, and vtk.js are just some of the components that trame builds upon, but does so in such a way as to hide the complexity of these underlying systems. For example, by using vtk.js and JavaScript it is possible to build powerful web applications, but this requires significant web-development knowledge. But with trame, the full power of frameworks such as VTK/ParaView are available without the burden of web development.
-* Open-source - You can build, deploy and sell your own application with confidence knowing trame will always be around and you won't have any fee or subscription to worry about.
-* All-in-one platform - Unlike other libraries or platforms, trame comes with all the components you need and if we are missing anything you can easily add your own simply.
-* Design - Trame apps loo beautiful out of the box. Our built-in Material Design widget library let you create beautiful desktop like components.
-* Real apps - With Trame, you get hight-performing interactive applications.
+* Open-source - You can confidently build, deploy, and commercialize applications without the usual hassles associated with proprietary systems, and with the knowledge that trame will not disappear - it is not tied to the fortunes of any proprietary vendor.
+* All-in-one platform - Unlike other libraries or platforms, trame comes with most all the components you need to build visualization analytics applications; and if a capability is missing it can easily be added.
+* Design - Trame apps look beautiful out of the box. Our built-in Material Design widget library enables you to create beautiful desktop-like GUI components.
+* Real apps - With Trame, you get high-performing interactive applications that can operate locally, or across the web.
## How Trame works
-Building apps with Trame has never been that simpple
+Building apps with Trame is this simple:
1. **Install trame** - Create a Python virtual environment and `pip install trame`. Once working locally, deploy it using Docker or as Desktop app bundle.
2. **Business logic** - Create your processing functions in plain Python and the **state** that needs to be shared with the UI.
-3. **State reactivity** - Connect any method to react to state change (i.e. slider changing a sampling parameter)
+3. **State reactivity** - Define methods which respond to state change (e.g. a slider changing a sampling parameter).
4. **Design your UI** - Build beautiful, accessible user interfaces by defining the layout of your application and connecting your **state** and **functions** to your UI elements directly.
-5. **Run it anywhere** - Once working, you can choose to run it locally as a desktop application, as a client/server or deploy it in the cloud and use it as a service.
+5. **Run it anywhere** - Once working, you can choose to run it locally as a desktop or client/server application, or deploy it in the cloud and use it as a service.
-At the end of the day, building a trame application is just a matter of orchestrating the various pieces in a convenient and transparent manner thanks to trame shared state and controller for dealing with event management.
+At the end of the day, building a trame application is just a matter of orchestrating the various pieces in a convenient and transparent manner thanks to the trame shared state, and associated controller for dealing with event management.
## Getting started
-The best way to get familiar with trame is by following our [tutorial](https://kitware.github.io/trame/docs/tutorial.html) or use our [Cookie Cutter](https://github.com/Kitware/trame-cookiecutter) when starting your new application.
+The best way to get familiar with trame is to follow the [tutorial](https://kitware.github.io/trame/docs/tutorial.html), or use the [Cookie Cutter](https://github.com/Kitware/trame-cookiecutter) template to build a new application.
-Also we have some kind of [CheatSheet](./cheatsheet.html) and small [getting started guide](./getting_started.html).
+Also check out the demonstrative example [CheatSheet](./cheatsheet.html), and short [getting started guide](./getting_started.html).
diff --git a/docs/content/docs/trame_v2_intro.md b/docs/content/docs/trame_v2_intro.md
index f9c14e93..23e78287 100644
--- a/docs/content/docs/trame_v2_intro.md
+++ b/docs/content/docs/trame_v2_intro.md
@@ -1,21 +1,21 @@
# Trame v2
-First of all, Trame v2 is not changing the ideas and concepts that made trame what it is. This new version is really focusing on a more powerful and refined suite for creating Python application effortlessly while supporting many deployment type. With trame we aim to support desktop, client/server, cloud services and Jupyter notebook without changing a single line of code.
+Trame v2 is not changing the ideas and concepts that made trame what it is. This new version is really focusing on a more powerful and refined suite for creating Python applications while supporting many deployment types. Trame now supports desktop, client/server, cloud services, and Jupyter notebook without changing any code.
-Like shown in the architecture diagram, trame focus on 4 types of services which help the development of interactive visual applications.
+As shown in the architecture diagram, trame focus on four types of services supporting the development of interactive visual applications.
-- __State__ in trame is shared across the presentation layer and the business logic. Also on top of being shared, it is reactive which means that the UI will react to reflect any change done from the business logic. Also in the same fashion, when a slider or else modify a given variable, the business logic can listen to it and react appropriately. This __state__ make the binding of the **business logic** and **UI** a breeze.
-- __Events__ are used to trigger actions usually on business logic side to react to user interaction such as a mouse click, hover or else. Trame offer an elegent solution for simply binding methods to any available UI event.
-- __Widgets__ are key for building and composing a graphical application. Trame already provide an extensive set of widgets that include the common set of form elements but also charts, maps and 3D visualization based on VTK/ParaView. Also on top of the built-in ones, it is easy to contribute or include your own set of widget when developing your own application. Basically you are not limited to what we have. Trame can easily integrate any web based component and interface it so you can use it directly within Python.
-- __UI__ are mainly the same thing as widgets except they are more geared toward layouts or pages sections that you may want to update dynamically during the life cycle of your application. Usually applications have a single layout component which represent the UI of the application.
+- __State__ in trame the state is shared across the presentation layer and the business logic. Furthermore, it is reactive which means that the UI responds to any changes made to the business logic. Similarly, when a slider or else modify a given variable, the business logic can listen to it and react appropriately. This __state__ make the binding of the **business logic** and **UI** a breeze.
+- __Events__ are used to trigger actions usually on business logic side to react to user interaction such as a mouse click or hover event. Trame offer an elegent solution for simply binding methods to any available UI event.
+- __Widgets__ are key to building and composing a graphical application. Trame provides an extensive set of widgets that include the common set of form elements but also charts, maps and 3D visualization based on VTK/ParaView. On top of these built-in widgets, it is easy to contribute or include other widget sets when developing an application. Basically applications are not limited to what trame provides by default. Trame can easily integrate any web based component and provide interfaces to them so they can be used directly from within Python.
+- __UI__ are similar to widgets except they are geared toward layouts or pages sections that may need dynamic updates during the life cycle of an application. Usually applications have a single layout component which represent the UI of the application.
-With the release of trame v2, we focused on rationalizing and normalizing how we want users to leverage and contributes to trame. In other words, trame v1 allowed the magic to happen while v2 focus on the best practice by streamlining APIs and code structure while enabling composition and integration into existing web applications.
+With the release of trame v2, we focused on rationalizing and normalizing how we want users to leverage and contributes to trame. In other words, trame v1 allowed the magic to happen while v2 focus on best practices by streamlining APIs and code structures, enabling composition and integration into existing web applications.
-With trame v2, we are deprecating PyWebVue in favor of our trame suite (trame + trame-*) to better support code evolution and cross compatibility. One issue we had before with PyWebVue was that it was doing too many things and sometime was getting out of sync with trame. Now with our trame suite, each python module contains both its client and its server side which make it almost impossible to have them out of sync or not working.
+With trame v2, we are deprecating PyWebVue in favor of our trame suite (trame + trame-*) to better support code evolution and cross compatibility. One issue we had before with PyWebVue was that it was doing too many things and sometime was getting out of sync with trame. Now in the current trame suite, each Python module contains both its client and its server side which prevents them from becoming out of sync or not working.
-Also now that we have formalized how new Python modules should interface with trame. The community can more simply extend trame with their new widgets and/or UI elements.
+In addition, since v2 formalizes how Python modules should interface with trame, the community can more easily extend trame with new widgets and/or UI elements.
-Now you might be wondering if a trame v3 is planned with yet another breaking change in another 6 months? Well to be honest we may have released too early pywebvue and trame but they were so game changer that it was hard to keep them for ourself. To be honest, I don't see a v3 anytime soon as v2 has gave us a chance to review our api, fixed what we didn't like and provide an easy path across our various use-cases.
+Now you might be wondering if a trame v3 is planned in the near future, possibly introducing additional breaking changes. At this point we do not expect a v3 anytime soon as v2 has gave us a chance to review our api, fix what we didn't like, and simplify implementation to support our various use-cases.
diff --git a/docs/content/docs/trame_v2_migration.md b/docs/content/docs/trame_v2_migration.md
index 712380e8..710855fc 100644
--- a/docs/content/docs/trame_v2_migration.md
+++ b/docs/content/docs/trame_v2_migration.md
@@ -1,6 +1,6 @@
# From v1 to v2
-Trame v2 is a coming and has several breaking changes. Some features of trame v1 have been removed but in general the migration should be mostly manageable at the top of your files by tweaking imports and variables definitions.
+Trame v2 has arrived, introducing several breaking changes. Some features of trame v1 have been removed but in general the migration is straightforward by tweaking imports and variables definitions. The following example code shows how v1 code is implemented in v2.
## Main code change
@@ -172,4 +172,4 @@ dataset_file = HttpFile(
"https://github.com/Kitware/trame/raw/master/examples/data/disk_out_ref.vtu",
__file__,
)
-```
\ No newline at end of file
+```
diff --git a/docs/content/docs/tutorial-application.md b/docs/content/docs/tutorial-application.md
index b36cc40a..e9e1a47a 100644
--- a/docs/content/docs/tutorial-application.md
+++ b/docs/content/docs/tutorial-application.md
@@ -2,7 +2,7 @@
-We will create a more complete example application that will show how to use several parts the ***trame*** library. Developing a trame application requires the following coding steps:
+In the following we will create a more complete example application to demonstrate how to use several parts the ***trame*** library. Developing a trame application requires the following coding steps:
1. [Imports](#imports-id) for appropriate ***trame*** and vtk modules
2. Create the necessary [VTK pipelines](#vtk_pipeline-id)
@@ -35,7 +35,7 @@ from trame.widgets import vtk, vuetify, trame
We are creating a single page application with a drawer (`trame.ui.vuetify`), and we want to use one of ***trame***'s predefined widgets (`trame.widgets`) for displaying and interacting with visualization pipelines.
-**Finally**, our VTK pipelines are fairly straight forward, but not available as one of the vtk examples. We will add the import for our VTK objects.
+**Finally**, our VTK pipelines are fairly straight forward, but not available as one of the VTK examples. We will add the import for our VTK objects.
```python
from vtkmodules.vtkCommonDataModel import vtkDataObject
@@ -119,7 +119,7 @@ mesh_lut.SetValueRange(1.0, 1.0)
mesh_lut.Build()
```
-We finally want to be able to change the array or field to color by, so we get a handle on the mesh's mapper and set the array to color by and the range of the array to the defaults, tell the mapper to use the appropriate scalar mode for the array, turn on the scalar visibility, and tell the mapper to use the scalar range assigned to the lookup table.
+We finally want to be able to change how to color the array or field data, so we retrieve a handle on the mesh's mapper and set the array to color by and the range of the array to the defaults, tell the mapper to use the appropriate scalar mode for the array, turn on the scalar visibility, and tell the mapper to use the scalar range assigned to the lookup table.
@@ -224,7 +224,7 @@ For this application, we want to enable dynamic switching between *local* and *r
## GUI
-We are creating a single page application with a drawer using `SinglePageWithDrawer`. By defauklt we get a title, toolbar, drawer, and a content section. So we instantiate a `SinglePageWithDrawer` with the `title` of "Viewer" and `on_ready` argument equal to `html_view.update`, which updates the three-dimensional visualization.
+We are creating a single page application with a drawer using `SinglePageWithDrawer`. By default we get a title, toolbar, drawer, and a content section. So we instantiate a `SinglePageWithDrawer` with the `title` of "Viewer" and `on_ready` argument equal to `html_view.update`, which updates the three-dimensional visualization.
```python
with SinglePageWithDrawerLayout(server) as layout:
@@ -250,7 +250,7 @@ with SinglePageWithDrawerLayout(server) as layout:
ctrl.on_server_ready.add(view.update) # update view once server is ready
```
-**Note**: The `layout.drawer as drawer` syntax is used to get a reference to the drawer to set some of the drawer's properties
+**Note**: The `layout.drawer as drawer` syntax is used to get a reference to the drawer to set some of the drawer's properties.
@@ -259,7 +259,7 @@ with SinglePageWithDrawerLayout(server) as layout:
-We want to create a toolbar with the application logo and title on one end and some standard buttons separated by a vertical divider on the other end. The `VSpacer` is used to push the content the right-side of the application toolbar, and the `VDivider` is used to create the vertical divder, and method `standard_buttons` encapsulates the gui code to produce these buttons.
+We want to create a toolbar with the application logo and title on one end and some standard buttons separated by a vertical divider on the other end. The `VSpacer` is used to push the content the right-side of the application toolbar, and the `VDivider` is used to create the vertical divider, and method `standard_buttons` encapsulates the GUI code to produce these buttons.
```python
with layout.toolbar:
@@ -318,7 +318,7 @@ The `viewMode` checkbox is used to switch between the *local* and *remote* rende
We want to create a drawer with the ***trame*** pipeline widget, a horizontal divider, and pipeline cards. The pipeline cards are shown corresponding to the selected pipeline in the ***trame*** pipeline widget. We need create state for the active pipeline card, so we add this to the shared state that can be updated on the state directly.
```python
-# State use to track active ui card
+# State use to track active UI card
state.setdefault("active_ui", None) # prevent resetting value if already present
```
@@ -460,7 +460,7 @@ The default components of a pipeline include the [representation](#gui_represent
##### Representation GUI
-First, we created a constant class `Representation` to enumerate the different representations.
+First, we create a constant class `Representation` to enumerate the different representations.
```python
class Representation:
@@ -472,7 +472,7 @@ class Representation:
-Second, we created a dropdown menu for the representation type. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `mesh_representation` initialized to be a surface. The `items` is a list of tuples, where the first element is the display string (`text`) of the representation, and the second element is the value of the representation used for selection.
+Second, we create a dropdown menu for the representation type. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `mesh_representation` initialized to be a surface. The `items` is a list of tuples, where the first element is the display string (`text`) of the representation, and the second element is the value of the representation used for selection.
```python
vuetify.VSelect(
@@ -515,7 +515,7 @@ The [`update_contour_representation`](#drawer_callbacks_update_contour_represent
-We created a dropdown menu for the color by. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `mesh_color_array_idx` initialized to be the default_array, 0. The `items` is a list of tuples, where the first element is the display string (`text`) of the array name, and the second element is the value of the array used for selection. For `items`, we use the state variable `array_list` to create the list of arrays initialized by our `dataset_arrays` array of dictionaries we created at read time.
+We create a dropdown menu for the color by. The `VSelect` component is used to create the dropdown menu. The `v_model` uses the state variable `mesh_color_array_idx` initialized to be the default_array, 0. The `items` is a list of tuples, where the first element is the display string (`text`) of the array name, and the second element is the value of the array used for selection. For `items`, we use the state variable `array_list` to create the list of arrays initialized by our `dataset_arrays` array of dictionaries we created at read time.
```python
vuetify.VSelect(
@@ -548,7 +548,7 @@ The [`update_contour_representation`](#drawer_callbacks_update_contour_color_by_
##### Color Map GUI
-First, we created a constant class `LookupTable` to enumerate the different color maps.
+First, we create a constant class `LookupTable` to enumerate the different color maps.
```python
class LookupTable:
@@ -560,7 +560,7 @@ class LookupTable:
-Second, we created a dropdown menu for the color map. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `mesh_color_preset` initialized to be the rainbow color map. The `items` is a list of tuples, where the first element is the display string (`text`) of the color map, and the second element is the value of the color map used for selection.
+Second, we create a dropdown menu for the color map. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `mesh_color_preset` initialized to be the rainbow color map. The `items` is a list of tuples, where the first element is the display string (`text`) of the color map, and the second element is the value of the color map used for selection.
```python
vuetify.VSelect(
@@ -603,7 +603,7 @@ The [`update_contour_color_preset`](#drawer_callbacks_update_contour_color_prese
-We created a slider for the opacity. The `VSlider` component is used to create a slider. The `v_model` uses the state variable `mesh_opacity` initialized to 1.0. The `min` is set to 0 and the `max` is set to 1. The `step` is set to 0.1.
+We create a slider for the opacity. The `VSlider` component is used to create the slider. The `v_model` uses the state variable `mesh_opacity` initialized to 1.0. The `min` is set to 0 and the `max` is set to 1. The `step` is set to 0.1.
```python
vuetify.VSlider(
@@ -642,7 +642,7 @@ The [`update_contour_opacity`](#drawer_callbacks_update_contour_opacity-id) call
-We created a dropdown menu for the contour by. The `VSelect` component is used to create a dropdown menu. The `v_model` uses the state variable `contour_by_array_idx` initialized to be the default_array, 0. The `items` is a list of tuples, where the first element is the display string (`text`) of the array name, and the second element is the value of the array used for selection. For `items`, we use the state variable `array_list` to create the list of arrays initialized by our `dataset_arrays` array of dictionaries we created at read time.
+We create a dropdown menu for the contour by. The `VSelect` component is used to create the dropdown menu. The `v_model` uses the state variable `contour_by_array_idx` initialized to be the default_array, 0. The `items` is a list of tuples, where the first element is the display string (`text`) of the array name, and the second element is the value of the array used for selection. For `items`, we use the state variable `array_list` to create the list of arrays initialized by our `dataset_arrays` array of dictionaries we created at read time.
```python
vuetify.VSelect(
@@ -663,7 +663,7 @@ The [`update_contour_by`](#drawer_callbacks_update_contour_by-id) callback is us
##### Contour Value GUI
-We created a slider for the contour value. The `VSlider` component is used to create a slider. The `v_model` uses the state variable `contour_value` initialized to mid-point of the selected contour by array. The `min` is set to minimum of the contour by array and the `max` is set to maximum of the contour by array. The `step` is set to 0.01 times the range of the contour by array.
+We create a slider for the contour value. The `VSlider` component is used to create the slider. The `v_model` uses the state variable `contour_value` initialized to mid-point of the selected contour by array. The `min` is set to minimum of the contour by array and the `max` is set to maximum of the contour by array. The `step` is set to 0.01 times the range of the contour by array.
diff --git a/docs/content/docs/tutorial-download.md b/docs/content/docs/tutorial-download.md
index 910df042..e74c35b3 100644
--- a/docs/content/docs/tutorial-download.md
+++ b/docs/content/docs/tutorial-download.md
@@ -4,7 +4,7 @@
git clone https://github.com/Kitware/trame-tutorial.git
```
-There is now a directory called ***trame-tutorial*** with the following file structure:
+This produces a directory called ***trame-tutorial*** with the following file structure:
```
$ tree .
@@ -44,4 +44,4 @@ $ tree .
7 directories, 24 files
```
-In the following steps of the tutorial we will assume to be inside the `trame-tutorial` root directory.
\ No newline at end of file
+The remaining tutorial steps assume that the current directory is the `trame-tutorial` root directory.
diff --git a/docs/content/docs/tutorial-html.md b/docs/content/docs/tutorial-html.md
index c31dcc9c..b010ad3b 100644
--- a/docs/content/docs/tutorial-html.md
+++ b/docs/content/docs/tutorial-html.md
@@ -1,6 +1,6 @@
# HTML
-***trame*** leverages Vuetify as its primary UI Component Library for defining HTML graphics user interfaces (GUI). [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/#what-is-vuetify3f) is a mature, efficient, and expansive framework for good-looking web applications with the same simple state management system as ***trame***. ***trame*** makes Vuetify available in your Python with minimal overhead.
+***trame*** leverages Vuetify as its primary UI Component Library for defining HTML graphics user interfaces (GUI). [Vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/#what-is-vuetify3f) is a mature, efficient, and expansive framework which produces good-looking web applications using the same simple state management system as ***trame***. ***trame*** makes Vuetify available in the Python environment with minimal overhead.
[](https://vuetifyjs.com/en/)
@@ -8,7 +8,7 @@
## Using Vuetify
-We expose all Vuetify components. As an example, let's look at how we would make a simple text box. This is taken from Vuetify's excellent [examples and documentation](https://vuetifyjs.com/en/components/text-fields/), which we recommend you consult while writing frontends with ***trame***.
+We expose all Vuetify components in ***trame***. As an example, let's look at how we would make a simple text box. This is taken from Vuetify's excellent [examples and documentation](https://vuetifyjs.com/en/components/text-fields/), which we recommend you consult while writing frontends with ***trame***.
```javascript
// Somewhere in javascript
@@ -149,7 +149,7 @@ Your browser should open automatically to `http://localhost:1234/`
## `with` Construct
-The Python `with` construct allow us to automatically append to a given widget container but also for the Layouts it will automatically manage the flush of its content to the server. While it is possible to mutate the `children` attribute of a widget we encourage you to use the `with` syntax instead.
+The Python `with` construct allow us to automatically append to a given widget container but also for the Layouts it will automatically flush its content to the server. While it is possible to mutate the `children` attribute of a widget we encourage you to use the `with` syntax instead.
@@ -203,7 +203,7 @@ def update_resolution(resolution, **kwargs):
There is no need to get or update the `resolution` state variable. This update is carried out on the client-side by the v_model. We simply update the `cone_source` appropriately and update the view.
-The `VBtn` resets the the resolution when pressed by calling the `reset_resolution` function. This is a `trigger` event, where `v_models` are `change` events. Since, we use the function reference here, there is no need to use a `@trigger("...")` decorator here. It is created by default behind the scene.
+The `VBtn` resets the the resolution when pressed by calling the `reset_resolution` function. This is a `trigger` event, where `v_models` are `change` events. Since we use a function reference, there is no need to use a `@trigger("...")` decorator here. It is created by default behind the scenes.
```python
def reset_resolution():
diff --git a/docs/content/docs/tutorial-layouts.md b/docs/content/docs/tutorial-layouts.md
index 8e8ef903..ab6989b8 100644
--- a/docs/content/docs/tutorial-layouts.md
+++ b/docs/content/docs/tutorial-layouts.md
@@ -1,11 +1,9 @@
# Layouts
To simplify creation of the graphical user interface (GUI) for the web application, ***trame.ui.vuetify*** defines layouts objects such as `VAppLayout`, `SinglePageLayout`, and `SinglePageWithDrawerLayout`.
-On top of those `vuetify` layouts we also have a simple `trame.ui.html.DivLayout`.
+In addition to these `vuetify` layouts we also have a simple `trame.ui.html.DivLayout`.
-All core layouts start with a `VApp` (Vuetifies `v-app`) component. The `VApp` is **REQUIRED** for all applications. It is the mount point for other Vuetify components and functionality and ensures that it propagates the default application variant (dark/light) to children components while ensuring proper cross-browser support for certain click events in browsers like Safari. `VApp` should only be rendered within your application **ONCE**.
-
-More on Vuetify in the next chapter of the tutorial.
+All core layouts start with a `VApp` (Vuetifies `v-app`) component. The `VApp` is **REQUIRED** for all applications. It is the mount point for other Vuetify components and functionality and ensures that it propagates the default application variant (dark/light) to children components, and ensures proper cross-browser support for certain click events in browsers like Safari. `VApp` should only be rendered within your application **ONCE**. (More on Vuetify in the next chapter of the tutorial.)
Each of these layouts can be utilized by importing, instantiating, and serving it via the `server.start()` function.
@@ -63,7 +61,7 @@ The `SinglePageLayout` extends the `VAppLayout` with a few predefined components
-The *icon* and *title* sit on the left-hand side of the *toolbar* and customized as necessary. The icon is a *VAppBarNavIcon* which can be customized by adding a child to it such as a VIcon with a [Material Design Icons](https://materialdesignicons.com/). The *toolbar* itself exposes its *children* array where one can add components as needed. The *footer* can be hidden, but currently has ***trame*** branding, the progress bar and list of trame modules available with their versions. The *content* is just a **VMain** to which you may add your desired Vuetify components.
+The *icon* and *title* sit on the left-hand side of the *toolbar* and are customized as necessary. The icon is a *VAppBarNavIcon* which can be customized by adding a child to it such as a VIcon with a [Material Design Icons](https://materialdesignicons.com/). The *toolbar* itself exposes its *children* array in which one can add components as needed. The *footer* can be hidden, but currently has ***trame*** branding, the progress bar and list of trame modules available with their versions. The *content* is just a **VMain** to which you may add your desired Vuetify components.
**First**, we import the `SinglePageLayout` class.
diff --git a/docs/content/docs/tutorial-paraview.md b/docs/content/docs/tutorial-paraview.md
index eac50826..e88cbbae 100644
--- a/docs/content/docs/tutorial-paraview.md
+++ b/docs/content/docs/tutorial-paraview.md
@@ -6,11 +6,10 @@ ParaView 5.10+ can be downloaded from [here](https://www.paraview.org/download).
## Virtual Environment
-ParaView comes with its own Python, which may be missing some dependencies for the desired usage.
-We can add more Python packages into ParaView by create a virtual environment and activate it inside your application using that import line `from paraview.web import venv` or by using our [local version](https://github.com/Kitware/trame/blob/master/examples/v1/ParaView/venv.py) and importing it.
+ParaView comes with its own Python, which may be missing some dependencies for the desired usage. We can add more Python packages into ParaView by creating a virtual environment and then activating it inside the application using the import line `from paraview.web import venv` or by using our [local version](https://github.com/Kitware/trame/blob/master/examples/v1/ParaView/venv.py) and importing it.
-**First**, we need to setup the ParaView add-on python environment, which we will only install ***trame***, but we could add any other Python libraries that are not included in the ParaView bundle.
+**First**, we need to setup the ParaView add-on python environment, in which we will only install ***trame***, but we could add any other Python libraries that are not included in the ParaView bundle.
```bash
python3.9 -m venv .pvenv
@@ -48,7 +47,7 @@ The command line below illustrate how a SimpleCone example can be run on a **Mac
## Understanding this ParaView example
-ParaView use proxies which abstracts the VTK object handling so they can be easily distributed for very large datasets.
+ParaView use proxies which abstracts the VTK object handling so they can be easily distributed to support the processing of very large datasets.
For simplified usage, ParaView provides a `simple` package that lets us ***simply*** create and interact with these proxies. The `SimpleCone.py` example provides the core concepts needed to understand how to work with ParaView.
@@ -96,8 +95,7 @@ from trame.html import vuetify, paraview
## GUI
-Now we can start adding some UI to control some of the parameters that we want to interact with dynamically.
-Let's add a slider to control the resolution of the cone. We need to create a method to react when the `resolution` is changed by the slider. In ParaView proxies, object parameters are simple properties that can be get or set in a transparent manner. At this point, we simply need to update the `cone.Resolution` and update the view to see the change.
+Now we can start adding some UI to control some of the parameters that we want to interact with dynamically. Let's first add a slider to control the resolution of the cone. We need to create a method to react when the `resolution` is changed by the slider. In ParaView proxies, object parameters are simple properties that can be get or set in a transparent manner. At this point, we simply need to update the `cone.Resolution` and update the view to see the change.
```python
@state.change("resolution")
@@ -124,7 +122,7 @@ with layout.toolbar:
With these few lines, we have created a 3D cone, which we can adjust the resolution all leveraging ParaView.
-To learn more about ParaView scripting, you should look into ParaView trace which let you convert your UI interaction into actual Python code that can then be reused in your application.
+To learn more about ParaView scripting, look into ParaView trace which let you convert your UI interaction into actual Python code that can then be reused in your application.
@@ -255,4 +253,4 @@ Your browser should open automatically to `http://localhost:1234/`
-
\ No newline at end of file
+
diff --git a/docs/content/docs/tutorial-setup-vtk.md b/docs/content/docs/tutorial-setup-vtk.md
index 9f4c7314..8f369875 100644
--- a/docs/content/docs/tutorial-setup-vtk.md
+++ b/docs/content/docs/tutorial-setup-vtk.md
@@ -1,6 +1,6 @@
-## Setup environment for VTK
+## Setup the VTK environment
-***trame*** requires Python 3.6+ but since ParaView 5.11 is bundling Python 3.9 we should use Python 3.9 for our environment.
+***trame*** requires Python 3.6+ but since ParaView 5.11 is bundling Python 3.9 we will use Python 3.9 in this tutorial.
```bash
python3.9 -m venv .venv
@@ -12,7 +12,7 @@ pip install "vtk>=9.1.0"
**Notes**:
- `venv` was added in Python 3.3.
- - On mac with Arm architecture, VTK is only available on Python 3.9
+ - On a Mac with ARM architecture, VTK is only available with Python 3.9.
## Running the application
@@ -39,9 +39,9 @@ from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout
```
-from ***trame***'s `app`, we import the factory function for getting a server instance on which we will bind our UI and business logic. We also import a skeleton for a single page client application that rely on vuetify (our main widget library) from `trame.ui.vuetify`.
+from ***trame***'s `app`, we import the factory function for retrieving a server instance on which we will bind our UI and business logic. We also import a skeleton for a single page client application that relies on vuetify (our main widget library) from `trame.ui.vuetify`.
-Next, we define the graphical user interface (GUI) by passing the server on which it should be bound to. Then with that layout we update the toolbar's title to hold `"Hello trame"`.
+Next, we define the graphical user interface (GUI) by passing the server to which it should be bound. Then with that layout we update the toolbar's title to read `"Hello trame"`.
```python
server = get_server()
@@ -50,7 +50,7 @@ with SinglePageLayout(server) as layout:
layout.title.set_text("Hello trame")
```
-Finally, we start the Web server using
+Finally, we start the Web server using:
```python
if __name__ == "__main__":
@@ -72,4 +72,4 @@ Note that for multi-users you need to use and configure a launcher.
And to prevent your browser from opening, add '--server' to your command line.
```
-Your browser should open automatically to `http://localhost:1234/`
+Your browser should open automatically to `http://localhost:1234/`.
diff --git a/docs/content/docs/tutorial-vtk.md b/docs/content/docs/tutorial-vtk.md
index c1f32de3..b69feb07 100644
--- a/docs/content/docs/tutorial-vtk.md
+++ b/docs/content/docs/tutorial-vtk.md
@@ -1,6 +1,6 @@
## VTK
-So we want to start adding VTK visualizations to our application.
+In this step we start adding VTK visualizations to our application.
## VTK Imports
@@ -14,7 +14,7 @@ from trame.widgets import vtk, vuetify
This provides us access to ***trame***'s widgets for vtk and vuetify.
-**Next**, we will need to import the required objects from vtk. We will visualize a simple cone in this example so we will need `vtkConeSource`.
+**Next**, we will need to import the required objects from VTK. We will visualize a simple cone in this example so we will need `vtkConeSource`.
```python
from vtkmodules.vtkFiltersSources import vtkConeSource
@@ -65,7 +65,7 @@ There are a number of ways to learn VTK:
- [VTK Examples](https://kitware.github.io/vtk-examples/site/Python)
- [VTK Documentation](https://www.vtk.org/doc/nightly/html/)
-This tutorial will not provide an adequate background for VTK, but we will explain the pieces and parts of the provided exmples at a high level.
+This tutorial does not provide an adequate background for VTK, but in the following we will explain the pieces and parts of the provided VTK examples at a high level.
**First**, we create a `vtkRenderer` and `vtkRenderWindow`. The we tie them together by adding the `renderer` to the `renderWindow`.
@@ -83,9 +83,9 @@ renderWindowInteractor.SetRenderWindow(renderWindow)
renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()
```
-We create the interactor, connect it to the `renderWindow` and set the interaction style.
+We create the interactor, associate it with the `renderWindow` and set the interaction style.
-**Third**, we create the desired visualization. This process requires the creation of an object, a mapper, and an actor.
+**Third**, we create the desired visualization. This process requires the creation of an object, a mapper, and an actor (these constitute a simple VTK pipeline).
```python
cone_source = vtkConeSource()
@@ -95,7 +95,7 @@ actor = vtkActor()
actor.SetMapper(mapper)
```
-The instantiated `vtkConeSource` is our mesh source that will produce a polydata. Then we want to map it to a graphical representation by creating a `vtkPolyDataMapper`. We must digitally create a connection from the cone to the mapper by setting the input connection. We then create an actor and connect the mapper to the actor.
+The instantiated `vtkConeSource` is our mesh source that will produce a vtkPolyData. Then we want to map it to a graphical representation by creating a `vtkPolyDataMapper`. We must create a connection from the cone to the mapper by setting the input connection. We then create an actor and connect the mapper to the actor. (In VTK, actors are objects displayed by a renderer.)
**Finally**, we add all the pipelines (actors) to the `renderer`, reset the camera, and render.
@@ -108,38 +108,38 @@ The VTK specific imports and pipelines defined for a ***trame*** application are
## Local and Remote Rendering
-Why do we care about *local* and *remote* rendering? Well each method of rendering has it's advantages and disadvantaages.
+Why do we care about *local* and *remote* rendering? Well each method of rendering has it's advantages and disadvantages. To a large extent it is a matter of data scale as described in the following.
**Local Rendering**
*Advantages*
- The server doesn't need a graphics processing unit (GPU). Systems with GPUs are expensive to purchase and expensive to rent (cloud). These costs are pushed to the end-points on end-users.
-- The frames per second rendering is higher. Advancements in the browser's access to local GPU resources implies that the performance is nearly as good as available to a desktop application.
+- The performance as measured in frames per second (fps) rendering is higher when using local rendering. Recent advancements in the browser's access to local GPU resources means that rendering performance through the web browser is nearly as good as available to a desktop application.
*Disadvantages*
-- The data to be rendered must move from the server to the client. This transfer may be too slow and it may be too large.
-- Where will the data be processed into graphic primitives? The processing may increase load and latency on the server side or the client side.
+- The data to be rendered must be transferred from the server to the client. This transfer may be too slow, and the data may be too large for the browser to manage.
+- How and where will the data be processed into graphic primitives? The processing may increase load and latency on the server side or the client side.
**Remote Rendering**
*Advantages*
-- The data to be rendered doesn't move, only the resulting image.
-- Rendering can utilize parallel and distributed processing to handle larger and larger data.
-- The server can serve a more diverse set of clients. From cell phone to workstation, their requirements are limited to receiving and rendering images.
+- The data to be rendered doesn't move, only the resulting rendered image is transmitted.
+- Rendering can utilize parallel and distributed processing to handle extremely large data.
+- The server can serve a more diverse set of clients. From cell phone to workstation, the client requirements is limited to receiving and rendering images.
*Disadvantages*
-- The frames per second rendering might be capped by the speed and latency of image delivery.
+- Rendering fps might be capped by the speed and latency of image delivery.
- The servers have to be more capable. Remote software rendering is possible, but the framerates will be further impacted.
**Implementation**
-Down in the GUI section of the application, we **first** need to select a rendering scheme
+Down in the GUI section of the application, we **first** need to select a rendering method.
-for *local rendering*
+For *local rendering*
```python
html_view = vtk.VtkLocalView(renderWindow)
@@ -151,7 +151,7 @@ for *remote rendering*
html_view = vtk.VtkRemoteView(renderWindow)
```
-and define a container to hold the renderer
+and define a container to hold the renderer:
```python
with SinglePageLayout(server) as layout:
@@ -169,16 +169,16 @@ with SinglePageLayout(server) as layout:
We add a **Vuetify** component to the Web application. In this case, a `VContainer`. The arguments include: fluid (to get full width container), classes (CSS stylings), and nest our rendering view component into it.
-More information on [vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/).
+(More information is available for [vuetify](https://vuetifyjs.com/en/introduction/why-vuetify/).)
## Update and Start
Once the client and server are ready, we need to update the view (`html_view`) by calling `html_view.update()`.
-To enable such call, we need to use the server controller on which we can attach method(s) for various life cycle events.
-The one we are interested here is **on_server_ready** on which we can bind our **update** method to.
+To enable this call, we need to use the server controller on which we can attach method(s) for various life cycle events.
+The one we are interested here is **on_server_ready** on which to which we can bind our **update** method.
-To do it, we revist our code base to extract our server controller and **add** our method to be called on the proper **on_server_ready** life cycle.
+To do so, we revist our code base to extract our server controller and **add** our method to be called on the proper **on_server_ready** life cycle.
```python
ctrl = server.controller # <--- New line
@@ -217,7 +217,7 @@ We are going to implement [CarotidFlowGlyphs](https://kitware.github.io/vtk-exam
**Imports**
-We are going to read a file. So we will want to import the `os` module and set the current directory. Starting with our Hello ***trame*** cone application, we add
+We are going to read a file, requiring the import of the `os` module and set the current directory. Starting with our Hello ***trame*** cone application, we add
```python
import os
@@ -341,7 +341,7 @@ outlineActor.GetProperty().SetColor(colors.GetColor3d("White"))
```
-**Note**: In the Colors and Data section we instantiate a helper for accessing named colors and read the desired data file on the **server**.
+**Note**: In the Colors and Data section we instantiated a helper for accessing named colors and read the desired data file on the **server**.
**Finally**, we replace the single cone pipeline actor
@@ -349,7 +349,7 @@ outlineActor.GetProperty().SetColor(colors.GetColor3d("White"))
renderer.AddActor(actor)
```
-with the three pipeline actors to the renderer.
+with three pipeline actors associated with the renderer.
```python
renderer.AddActor(outlineActor)
@@ -357,7 +357,7 @@ renderer.AddActor(vectorActor)
renderer.AddActor(isoActor)
```
-Our pipelines are the same pipelines used in [VTK Examples](https://kitware.github.io/vtk-examples/site/Python) except for some cosmetic edits (I like `renderer` and `renderWindow` instead of `ren1` and `renWin`).
+Our pipelines are the same pipelines used in [VTK Examples](https://kitware.github.io/vtk-examples/site/Python) except for some cosmetic edits (e.g., using `renderer` and `renderWindow` is clearer than `ren1` and `renWin`).
**Running the Application**
@@ -369,6 +369,6 @@ Your browser should open automatically to `http://localhost:1234/`
## Ray Casting example
-If you want on your own time you can try to implement the Volume Rendering example [Simple Ray Cast](https://kitware.github.io/vtk-examples/site/Python/VolumeRendering/SimpleRayCast/) using **trame**.
+Left as an exercise to the reader, implement the Volume Rendering example [Simple Ray Cast](https://kitware.github.io/vtk-examples/site/Python/VolumeRendering/SimpleRayCast/) using **trame**.
-The solution of that example is available under `01_vtk/solution_ray_cast.py`.
+The solution of that example is available at `01_vtk/solution_ray_cast.py`.
diff --git a/docs/content/docs/tutorial.md b/docs/content/docs/tutorial.md
index 2c4cb975..2d0142b2 100644
--- a/docs/content/docs/tutorial.md
+++ b/docs/content/docs/tutorial.md
@@ -1,10 +1,10 @@
-# Tutorial of ***trame***
+# ***Trame*** Tutorial
-We walk you through the basics of ***trame*** and end up creating a simple but full-featured VTK example application.
+We walk you through the basics of ***trame***, creating a simple but full-featured VTK example application.
-It is easiest to work on the tutorial from within the ***trame-tutorial*** repository. The tutorial are broken down into the following ordered sections:
+It is easiest to work through the tutorial from within the ***trame-tutorial*** repository. The tutorial is organized into the following ordered sections:
1. [Download](./tutorial-download.html)
2. [Setup](./tutorial-setup-vtk.html)
@@ -14,6 +14,6 @@ It is easiest to work on the tutorial from within the ***trame-tutorial*** repos
6. [Application](./tutorial-application.html)
7. [ParaView](./tutorial-paraview.html)
-For trame v1 we made a [video on __Web Visualization__](https://vimeo.com/651667960) recorded during SuperComputing conference in 2021. The first 45 minutes go over the various technologies and solutions while the rest focus on trame v1 and its tutorial.
+For trame v1 we made a [video on __Web Visualization__](https://vimeo.com/651667960) recorded during SuperComputing conference in 2021. The first 45 minutes go over the various technologies and solutions while the rest focus on trame v1 and its associated tutorial.
-The tutorial is now updated with trame v2 which differ a little bit from the syntax presented during that video.
\ No newline at end of file
+The tutorial is now updated using trame v2 which differs slightly from the syntax presented during that video.
diff --git a/docs/content/index.pug b/docs/content/index.pug
index c39ef79e..a9c2d78a 100644
--- a/docs/content/index.pug
+++ b/docs/content/index.pug
@@ -11,7 +11,7 @@ div.first_section(style="color: rgb(38, 39, 48); text-align: center")
| simple, powerful, innovative
div(style="font-size: 44px; text-align: left;color: #444; padding: 50px 0;")
b trame
- | - a web framework that weaves together open source components into customized visual analytics easily.
+ | - a simple, easy-to-use web framework for visual analytics that weaves together powerful open source components and systems.
div.separator(style="position: relative; width: 100%; height: 100px; margin: 0 0 40px 0;")
div(style="background: #04549C; position: absolute; left: 50%; width: 100vw; height: 100%; transform: translateX(-50%);")
@@ -37,9 +37,9 @@ div.first_section(style="color: rgb(38, 39, 48); text-align: center")
img(style="margin: 40px 0 0 0", src="/trame/examples/MultiFilter.jpg", height="350px")
div(style="font-size: 45px; padding: 20px 0 10px;text-align: left;color: #444;")
- | With
+ | Use
b trame
- | , create stunning, interactive web applications compactly and intuitively.
+ | to create stunning, interactive web applications compactly and intuitively.
div.separator(style="position: relative; width: 100%; height: 100px; margin: 40px 0;")
@@ -64,7 +64,7 @@ div.second_section(style="color: rgb(38, 39, 48);")
p(style="font-size: 18px;")
| With best-in-class VTK and ParaView platforms at its core,
b trame
- | provides complete control of 3D visualizations and data movements.
+ | provides complete control of 3D visualizations and data processing.
br
| Developers benefit from a write-once environment while
b trame
@@ -114,7 +114,7 @@ div.third_section(style="color: rgb(38, 39, 48);")
p(style="font-size: 20px;")
| The resulting
b trame
- | applications act as local desktop applications or remote cloud applications both accessed through the browser.
+ | applications act as local desktop applications, or remote cloud applications, accessed through standard web browsers.
div(style="display: flex; margin: 0 auto")
center(style="flex: 1; padding: 20px;")
@@ -217,10 +217,10 @@ ul#intro-feature-list(style="padding-top: 50px;")
.intro-feature-icon
i.fa.fa-cloud-download
h3.intro-feature-title
- a(href="https://pypi.org/project/trame/").link All open
+ a(href="https://pypi.org/project/trame/").link Open Source
p.intro-feature-desc
b trame
- | is an open source project under the BSD-3 license which allows one to create
+ | is an open source project licensed under BSD-3 which allows users to create
| open source or commercial applications without any licensing worries.
li.intro-feature-wrap(style="padding-top: 0;")
@@ -230,6 +230,6 @@ ul#intro-feature-list(style="padding-top: 50px;")
h3.intro-feature-title
a(href="http://www.vtk.org/services/").link Support and Services
p.intro-feature-desc
- | Kitware can help with getting started, creating custom components
- | or even a full application. Our team is here to help.
+ | Kitware can help you get started, create custom components,
+ | or even build full applications. Our team is here to help.
a(href="https://www.kitware.com/what-we-offer/#support").link Please contact us