11.3. Clara Dashboard Render Service

The Render Service web application enables viewing of datasets from your pipeline and a viewer component that allows live interaction against the content of a dataset; rotation, orbit and pan.

11.3.1. Getting Started

You must use Chrome web browser to access the web interface on your local machine via its local IP address or localhost on port 8080; http://localhost:8080.

../../../../_images/r3_ss_rsui_landing.png

11.3.1.1. Minimum Requirement

  • Google Chrome - Version 74.0.3729.169 (Official Build) (64-bit)

11.3.1.2. Starting the Service

The Render Service is comprised of three different containers that work together to provide the web application:

  • Dashboard: web application and API server.

  • Render Server: handles live stream and rendering of the datasets.

  • Dataset Service: currently only support mhd, raw, json and meta files.

You can start all three containers by using the command below:

clara render start

To stop the service:

clara render stop

11.3.2. Basic Interface

11.3.2.1. Notifications

A visual component located at the bottom left to inform the user of the response status of an action that was taken against the interface.

11.3.2.3. Application Menu

Functionalities unique to an application can be toggled from the top right more icon.

../../../../_images/r3_ss_rsui_dataset_loaded.png

11.3.3. Render Service Interface

You can start a live interaction stream by selecting an item from the dataset list from the Render Service application menu on the right.

../../../../_images/r3_ss_rsui_live_stream_loading.png

11.3.3.1. Live Stream Interactions

The mouse input can be used to provide direction against the content of a live stream (mouse wheel is required for panning). The mouse cursor input must remain within the bound of the live stream.

../../../../_images/r3_ss_rsui_live_stream.png

11.3.3.1.1. Orbit

You can rotate by using the left mouse click and dragging the mouse cursor against the live stream. This allows for rotations against the x and y axis.

../../../../_images/r3_ss_rsui_live_stream_orbit.png

11.3.3.1.2. Zoom

You can zoom in or out by using the mouse scroll.

../../../../_images/r3_ss_rsui_live_stream_zoom.png

11.3.3.1.3. Pan

You can zoom in or out by clicking the mouse wheel (middle) and dragging the mouse cursor against the live stream. This allows the content to be moved up, down, left and right.

../../../../_images/r3_ss_rsui_live_stream_pan.png

11.3.4. Dataset Service File Format

The files required by each dataset is located at /clara-io/datasets/ as seen in the directory tree below. You must name your configuration json and meta file as config.json and config.meta.

sdk/DatasetService
├── datasets
│   ├── ct-wb-viz
│   │   ├── config.json
│   │   ├── config.meta
│   │   ├── highResCT.mhd
│   │   ├── highResCT.raw
│   │   ├── smoothmasks.seg.mhd
│   │   └── smoothmasks.seg.raw

11.3.4.1. Meta File

The configuration meta file is used to define basic information and configuration that a dataset should use:

  • name ..

    The name that will be used by the Render Service Interfance.

  • density ..

    Defines which original MHD file to use for this dataset.

  • seg_masks ..

    A list of segmentation mask that could be use with this dataset (menu icon).

  • settings ..

    JSON configuration file that defines rendering settings to be used with dataset.

{
    "name": "liver segmentation",
    "density": "niiToMhd.mhd",
    "seg_masks": [
        "livermask.seg.mhd"
    ],
    "settings": "config.json"
}

11.3.4.2. JSON File

The JSON file defines that default rendering settings (Lights, Camera, Transfer Function, etc) that a dataset will use by the Render Server when

{
    "BackgroundLight": { ... },
    "Camera": {
        "eye": {
         "x": 85.31266780987673,
         "y": 936.6606803456496,
         "z": -93.52363814878406
        },
        "fieldOfView": 30,
        "lookAt": {
         "x": -10.693446599964338,
         "y": 25.72413336774661,
         "z": 20.531344844723407
        },
        "pixelAspectRatio": 1,
        "up": {
         "x": -0.019490319079825145,
         "y": -0.12218998118626274,
         "z": -0.9923153409878966
        }
    },
    ...,
}