Wrenjs

This page explains how to compile Wrenjs and test locally the streaming viewer and the animation player.

Building the dependencies

To compile Wrenjs, you will need:

• Python 3
• Emscripten to compile WREN in webassembly.
• pyclibrary to extract the enumerations and functions' names from the C headers.

Linux

On Linux there are two solutions. In both cases you need to restart the terminal after installing the dependencies but before compiling Wrenjs.

1. Install the dependencies automatically with sudo ./scripts/install/linux_optional_compilation_dependencies.sh from webots home.
2. Install them manually. To do so, follow these instructions:

pyclibrary

Enter the following command in a terminal: pip install pyclibrary

Emscripten

Run the following commands in a terminal:

# Get the emsdk repo
git clone https://github.com/emscripten-core/emsdk.git

# Enter that directory
cd emsdk

# Download and install the latest SDK tools.
./emsdk install latest

# Make the "latest" SDK "active" for the current user. (writes .emscripten file)
./emsdk activate latest

Add the following line in your .bashrc source "path_to_emsdk_folder/emsdk_env.sh" >/dev/null 2>&1.

Windows

Follow the instructions in the Optional Dependencies for Windows.

MacOS

Follow the instructions in the Optional Dependencies for MacOS.

Compiling Wrenjs

Wrenjs is automatically compiled when you execute make either in Webots home or in webots/src/wren if all the dependencies are correctly installed.

Warning: if you already make Webots before installing the dependencies needed for Wrenjs, you will need to make clean either in Webots home or in webots/src/wren in order for Wrenjs to be built the next time you execute make.

Testing locally

Streaming viewer

To test the streaming viewer:

• Launch webots with --stream option
• Change the link to https://cyberbotics.com/wwi/wrenjs/WebotsStreaming.js in webots/resources/web/streaming_viewer/index.html to point towards the local file. This file is located in webots/resources/web/wwi/.
• Change the links in webots/resources/web/wwi/WebotsStreaming.js to point towards the local files. The links to change are: wwi.css, enum.js, Wrenjs/, wrenjs.js. Those files are located in webots/resources/web/wwi/.
• Create a local http server with these instructions. The server should be able to reach webots/resources/web/wwi and webots/resources/web/streaming_viewer.
• Open webots/resources/web/streaming_viewer/index.html in the local server.

Animations

To test the animation player you have two solutions

With everything on a single local server

• Change the links in animation_file_name.html to point towards the local files. The links to change are: wwi.css, enum.js, Wrenjs/, wrenjs.js and init_animation.js. Those files are located in webots/resources/web/wwi/.
• Create a local http server with these instructions. The server should be able to reach webots/resources/web/wwi but also the place where the animations files are.
• Open animation_file_name.html in the local server.

With only the animation player on a local server

• Create a local http server with CORS support that should be able to reach webots/resources/web/wwi. Code example:

from http.server import HTTPServer, SimpleHTTPRequestHandler, test
import sys

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')
        SimpleHTTPRequestHandler.end_headers(self)

if __name__ == '__main__':
    test(CORSRequestHandler, HTTPServer, port=int(sys.argv[1]) if len(sys.argv) > 1 else 8000)

• Change the link to WebotsAnimation in animation_file_name.html to point towards the file on the local server. This file is located in webots/resources/web/wwi/. So the resulting link will be for example:http://localhost:8000/wwi/WebotsAnimation.js
• Change the links in webots/resources/web/wwi/WebotsAnimation.js to point towards the files on the local server. The links to change are: animation.css, enum.js, Wrenjs/, wrenjs.js and init_animation.js. Those files are located in webots/resources/web/wwi/. So the resulting links will be for example:http://localhost:8000/wwi/wrenjs.js
• Open animation_file_name.html. You may need to change the configuration of your browser (instructions here)