Last modified 2 years ago Last modified on 07/02/19 10:42:07

Webview 2.0 - A new Angular-based Frontend for Webview

This new version of webview is now part of the master branch of Fawkes Core. The new frontend is developed using Angular. It is a framework that allows us to develop this rather easily as opposed to writing a lot of custom JavaScript code. Angular is written in TypeScript, a typed superset of JavaScript. Since we are coming from a C++ world, it does feel natural and reassuring to have a typing system to have our back. It is a good idea to look through the Angular tutorial now to get started.

Communication with Webview is done through REST APIs using JSON encoded objects. The two basic things to understand is that the backend does not render a frontend anymore, but just data. Data is accessed through well-defined URLs (which have meaning) and the exchange format is JSON (somewhat similar to YAML we know from configuration files or BSON from MongoDB).

Backends are written using the new webview REST API framework. It requires writing an OpenAPI 3 specification of the endpoints (URLs) and data structures transmitted. An example is provided for the CLIPS Executive. For the most part, data definitions have to be designed, the path items are mostly copy and past and small adjustments.

Running the Frontend

Currently, the there is no processor to directly serve the frontend from our webview plugin. This is work-in-progress but I didn't have the time so far. However, you need to run the backend. For this, load the updated webview plugin and, for now, the clips-executive-rest-api plugin along with it. You can manually test the API through something like http://localhost:8088/api/clips-executive/goals?pretty=true.


In order run the framework, you need to setup the development pipeline. This requires only a few steps and is described for Fedora 27 in the following.

  1. Install npm:
    dnf install npm
  2. Make sure RapidJSON and the REST API generator pre-requisites are installed:
    dnf install rapidjson-devel
    dnf install python3 python3-jinja2 python3-PyYAML 
    If this installs any new package, run make -j$(nproc) clean all gui in your working tree.

Building the Frontend

The following downloads all dependencies (to the node_modules directory in the frontend directory) and run the frontend with a local webserver.

cd src/plugins/webview/frontend
make deploy

You can then load the frontend through webview, typically running on http://localhost:8088. Note that this expects to talk to your Fawkes REST API on the same URL.

During development, you may run the frontend using npm start in the frontend directory. The interface will then be available on http://localhost:4200 and it connects to a Fawkes instance running at http://localhost:8088. The server will be automatically restarted and the web interface automatically refreshed after modifications in the frontend code.

Run the CLIPS Executive Example Scenario

You can run the backend with the CLIPS Executive test scenario and watch it perform in the frontend doing the following.

cd fawkes
make -j4 clean all gui

Then run the scenario with (turn up the speaker volume):

bin/fawkes \
  ros navgraph skiller flite clips clips-pddl-parser \
  clips-executive clips-executive-rest-api clips-rest-api skiller-rest-api webview

In the executive, you can query the goals and click on them. Once you are on the TESTGOAL-gen4 (or similar) page, enable auto-reloading (symbol with two circled arrows). Then, re-start the Fawkes instance. You can then see the pre-conditions and the plan running through. The plan finishes quickly, which is why we restart after enabling auto-refresh.


Let the fun begin. Watch the executive run a few goals and plans for you, hot coffee or cold beer fit well with this.

If you want to hack on some component, let's talk!