Operator Screen Contributions

What is the Operator Screen?

The Operator Screen is a dedicated screen in PolyScope X designed specifically for the operator. Its purpose is to provide clear insight and essential controls that enable the operator to operate the deployed robot. PolyScope X includes a built-in Operator Screen that offers universal functionality: it allows operators to set the configuration and see the status of the running program.

• The configuration section exposes a set of variables defined by the robot programmer. These variables allow the operator to parameterize the program. For example, setting the number of cycles to run or selecting which fixture to use.

• The status section displays another set of programmer-defined variables intended to communicate key runtime information. Such as cycle count or detected errors. As a URCap developer, you can contribute your own Operator Screen. When such a contribution is installed, the robot programmer can choose whether to use the built-in screen or your custom one, based on what best fits the application’s needs.

⚠️ The Operator Screen is also available in automatic mode. When in automatic mode, jogging, teaching, or other manual robot movements should be disabled. It is up to the URCap developer to enforce this rule in Operator Screen Contributions-

How to add a Operator Screen to a Front-end Contribution?

To include an Operator Screen you can follow these steps:

1. Add the Folders and Files

Add a folder to your frontend where you store your Operator Screen, and add the Operator Screen behavior worker TS file to that folder. In our example we call our folder gripper-operatorscreen and likewise for the behavior worker (it is not required that the folder and the behavior worker are named the same):

└─ src
   ├─ app
   │  ├─ app.module.ts
   │  └─ components
   │     ├─ gripper-program-node
   │     │  ├─ gripper-program-node.behavior.worker.ts
   │     │  ├─ gripper-program-node.component.html
   │     │  ├─ gripper-program-node.component.ts
   │     │  └─ gripper-program-node.node.ts
   │     └─ gripper-operatorscreen
   │        └─ gripper-operatorscreen.behavior.worker.ts
   ├─ assets
   │  ├─ i18n
   │  └─ icons
   ├─ contribution.json
   ├─ index.html
   ├─ main.ts
   └─ styles.scss

2. Add the Behavior

Add the default behavior to the empty gripper-operatorscreen.behavior.worker.ts file:

import { registerOperatorScreenBehavior, OperatorScreenBehaviors } from '@universal-robots/contribution-api';

const behaviors: OperatorScreenBehaviors = {
    // factory is required
    factory: () => {
        return { type: 'gripper-operatorscreen', version: '1.0.0' };
    },
};

registerOperatorScreenBehavior(behaviors);

3. Add the Operator Screen to the app.module.ts:

registerWorkersWithWebPack() {
    ...
    new Worker(new URL('./components/gripper-operatorscreen/gripper-operatorscreen.behavior.worker.ts' /* webpackChunkName: "gripper-operatorscreen.worker" */, import.meta.url), {
        name: 'gripper-operatorscreen',
        type: 'module',
    });
}

4. Add the translations for your new operator screen item in the en.json:

{
  "operator-screen": {
    "gripper-operatorscreen": { //Note that this _MUST_ match the componentTagName found in contribution.json
      "title": "Gripper"
    }
  }
}

5. Add the webcomponent files

Add the *.html, *ts and optionally the *.scss styles file.

└─ gripper-operator-screen
   ├─ gripper-operatorscreen.behavior.worker.ts
   ├─ gripper-operatorscreen.component.html
   ├─ gripper-operatorscreen.component.scss
   └─ gripper-operatorscreen.component.ts

6. Add the contents to gripper-operatorscreen.component.ts

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { SidebarItem, SidebarItemPresenter, SidebarPresenterAPI } from '@universal-robots/contribution-api';

@Component({
    templateUrl: './gripper.component.html',
    styleUrls: ['./gripper.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GripperOperatorScreenComponent implements GripperOperatorScreen {    
}

7. Add the presenter to the App

In the app.module.ts add the creation of the web-component:

ngDoBootstrap() {

    ...

    customElements.define(
        'gripper-component-operatorscreen',
        createCustomElement(GripperOperatorScreenComponent, { injector: this.injector })
    );
}

8. Edit the contribution.json file to include the operatorscreen:

{
    "operatorScreens": [
        {
            "translationPath": "assets/i18n/",
            "behaviorURI": "gripper-operatorscreen-behavior-worker.js",
            "presenterURI": "main.js",
            "componentTagName": "gripper-operatorscreen"
        }
    ]
}

Rebuild and reinstall the URCap with the new Operator Screen presenter and look under Application->Operator dropdown for tour newly created Operator Screen!