About Extending WebUI Pages in the Pyri Framework

[Lafatalite]

I want to add a new page to the webui. I have already read the documentation but didn't understand it. I tried to emulate the robotics_browser project and packaged it into a wheel file, then copied it to ./local/share/pyri-webui-server, but it didn't display successfully. I'm wondering if there is a simpler example, like a page that displays "Hello World", to understand its working principle. The robotics_browser seems very complex, and I also want to know the difference between robotics_browser and robotics. From my understanding, projects with the "browser" suffix are webui projects that include a frontend page and have some backend functionalities. Are they interconnected, or do they need to be independent?

[Lafatalite]

I just tried deploying the pyri-example-plugin. I packaged the project into a wheel and then copied it to ./local/share/pyri-webui-server and then restarted the entire pyri, but I still can't see the new content. Is there something wrong with the deployment steps?

[Lafatalite]

I just tested it again and found that both blockly and sandbox in the example-plugin have been successfully loaded and run, but there isn't a webui_server page. I see there is a hello.html in the directory but it doesn't appear. Is there something wrong?

[johnwason]

Pyri has two major execution environments: the "runtime" side, which contains the nodes that run as normal Python programs, and the "webui" which runs inside the web browser using Pyodide. The pyri-robotics package is on the "runtime" side, and contains plugins and nodes that add the functionality for robotics. This functionality includes adding sandbox functions/blockly blocks, and the jog/motion nodes (running in their own programs) that implement some of the functionality.

The Pyodide webui side is very different. This uses WebAssembly to run Python inside the web browser itself. The user interface uses a combination of Pyodide, Vue, Bootstrap, and other JavaScript components to implement the user interface. The Python code and resources are stored in Python wheels, and the wheels are placed in a special directory $HOME/.local/pyri-webui-server/wheels. These wheels are loaded into Pyodide at start, and the plugin factories are used to initialize the panels that are displayed in the webui. You can use pyri-cli "dev" commands to automatically build your wheel and place it in the correct directory to be loaded by Pyodide.

Let's look at the some important points for pyri-robotics-browser, which is loaded into the webui and provides the "Jog" panel.

• The pyproject.toml must contain several important entries:
  • The keywords entry must contain pyri-webui-browser-package, pyodide, and pyri-webui. These keywords are used by pyri-cli and the rest of the system to detect the runtime/webui packages
  • The package generally will depend on pyri-common and improtlib-resources.
  • The build-system and tool.setuptools.package-data must be configured to include any non-python files you need, such as html, js, svg, jpg, etc files you may need to include in the wheel.
  • The entry-points for panels and vue components must be correctly configured. These entry-points are used to direct the webui what code to load from the wheel.
• The factories must be implemented:
  • Vue Components
  • Panels
• Define components. The PyRI WebUI uses Vue, and a compatibility layer was developed to allow for easy use of Vue with Python. If you look at the jog_panel.py component, the @vue_method and other @vue_* decorators are used to expose the Python to Vue. The adapter is defined in pyri-webui-browser vue.py. Looking at jog_panel.html, we can see the visual design of the Vue component, which calls these methods. The tags starting with "b-" are bootstrap-vue components.
• Add a panel. In this case, the Jog panel will just initialize the jog component, in this case the component_type="pyri-robotics-jog" is how the panel specifies the component. See Here

Hope this helps. I think I will need to create more detailed tutorials in the future.

Note that the webui-routes are different, and are for adding HTTP routes to the webui server. This is independent of the Pyodide webui wheels, and is intended for adding resources and additional HTTP features. For your use case you most likely won't need this, unless you want to add JavaScript packages.

[Lafatalite]

[johnwason]

I don't see any directories in your tar file; you will need the src/pyri_example_plugin directory, and an init.py file in the directory along with your py/html files. You also don't need the sandbox and blockly entry points since they are not used in the webui.

[Lafatalite]

pyri-example-plugin.tar.gz

[Lafatalite]

I'm sorry to disturb you, but I am still attempting to load the web UI. Currently, I am observing a JavaScript error in the browser console, which indicates an unknown element 'pyri-example-hel'. This tag is custom-defined by me and is written following the architecture used in the robotic-browser and vision-browser projects. The error suggests that the element is not registered.
I understand that the first parameter of the vue_register_component function should correspond to the 'component_type' value found in the _panel_infos dictionary within the appropriate xxxxx_panels.py file, and I have already passed the identical value. However, despite this, it is still generating an error, and I am unable to access the page.


pyri-example-plugin.tar.gz

[Lafatalite]

[johnwason]

Hi @Lafatalite I am going to put together an example repository, stand by...

[johnwason]

See https://github.com/pyri-project/pyri-example-browser