<commit_before><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="imports.html">
<link rel="import" href="ros-rviz-display.html">

<!--
A ROS visualization interface for the web.

Example:

    <ros-websocket auto ros="{{ros}}"></ros-websocket>
    <ros-rviz ros="{{ros}}"></ros-rviz>

@demo demo/index.html
-->

<dom-module id="ros-rviz">
  <template>
    <style include="iron-flex iron-flex-alignment">
    <style>
      :host {
        display: block;
        height: 100%;
        @apply(--paper-font-common-base);
      }
      #displays {
        background-color: var(--paper-grey-50);
        color: rgba(0, 0, 0, 0.87)
      }
      #displayHeader {
        background-color: var(--paper-grey-300);
        color: rgba(0, 0, 0, 0.87);
      }
      #addButton {
        color: rgba(0, 0, 0, 0.87);
        background-color: #ffc107;
        position: relative;
        top: 28px;
        z-index: 2;
      }
      #container {
        height: 100%;
      }
      #sidebar {
        height: 100%;
      }
      #displays {
        width: 300px;
        height: 100%;
      }
      #viewer {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      #openDisplays {
        position: absolute;
        margin: 10px;
        color: rgba(255, 255, 255, 0.87);
        background-color: rgba(255, 255, 255, 0.2);
      }
      #openDisplays:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
      paper-item {
        --paper-item: {
          cursor: pointer;
        };
      }
      [hidden] {
        display: none;
      }
    </style>
    <div id="container" class="layout horizontal">
      <iron-collapse id="sidebar" opened="{{config.sidebarOpened}}" horizontal>
        <paper-header-panel mode="seamed" id="displays">
          <paper-toolbar slot="header" id="displayHeader">
            <paper-icon-button id="closeDisplays" icon="arrow-back"
              on-tap="_toggleDisplayList" slot="top"></paper-icon-button>
            <paper-tooltip position="right" animation-delay="0"
              for="closeDisplays" slot="top">Hide displays panel</paper-tooltip>
            <span class="title" slot="top">Displays</span>
            <paper-tooltip position="bottom" animation-delay="0"
              for="addButton" slot="top">Add a display</paper-tooltip>
            <paper-menu-button id="displayMenu" slot="top">
              <paper-fab icon="add" id="addButton" slot="dropdown-trigger"></paper-fab>
              <paper-listbox id="displayPaperMenu" slot="dropdown-content"
                  on-tap="_onDisplaySelected">
                <paper-item on-tap="addDepthCloud">Depth cloud</paper-item>
                <paper-item on-tap="addGrid">Grid</paper-item>
                <paper-item on-tap="addInteractiveMarkers">Interactive markers</paper-item>
                <paper-item on-tap="addMarkers">Markers</paper-item>
                <paper-item on-tap="addMarkerArray">Marker array</paper-item>
                <paper-item on-tap="addOccupancyGrid">Occupancy grid</paper-item>
                <paper-item on-tap="addPointCloud">Point cloud</paper-item>
                <paper-item on-tap="addPointCloud2">Point cloud 2</paper-item>
                <paper-item on-tap="addUrdf">Robot model</paper-item>
              </paper-listbox>
            </paper-menu-button>
          </paper-toolbar>
          <div id="displayList">
            <ros-rviz-display
              id="options"
              global-options="{{config.globalOptions}}"
              name="Global options"
              permanent
              type="globalOptions"
            ></ros-rviz-display>
            <template is="dom-repeat" items="{{config.displays}}" as="display">
              <ros-rviz-display
                global-options="{{config.globalOptions}}"
                index="{{index}}"
                is-shown="{{display.isShown}}"
                on-delete-display="_deleteDisplay"
                viewer="{{_viewer}}"
                ros="{{ros}}"
                tf-client="{{tfClient}}"
                name="{{display.name}}"
                options="{{display.options}}"
                type="{{display.type}}"
              ></ros-rviz-display>
            </template>
          </div>
        </paper-header-panel>
      </iron-collapse>
      <paper-fab icon="menu" id="openDisplays"
        hidden$="{{config.sidebarOpened}}" on-tap="_toggleDisplayList"></paper-fab>
      <paper-tooltip position="right" animation-delay="0"
        for="openDisplays">Open displays</paper-tooltip>
      <div id="viewer" class="flex">
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: 'ros-rviz',

      properties: {
        /**
         * A JSON object that specifies the configuration of the visualization.
         * Example:
         * {
         *   globalOptions: { url: ...},
         *   displays: [
         *     { 
         *        name: "Grid", // Display name
         *        type: "grid",
         *        options: { numCells: 20, ...}, // Specific to each display
         *        isPermanent: false // Only true for global options
         *     }
         *   ],
         *   sidebarOpened: true
         * }
         */
        config: {
          notify: true,
          type: Object,
          value: function() {
            return {
              globalOptions: {},
              sidebarOpened: true,
              displays: [],
            };
          }
        },
        ros: {
          type: Object,
          observer: '_rosChanged',
        },
        tfClient: Object, // The ROSLIB.TFClient
        _viewer: Object, // The ROS3D viewer
      },

      behaviors: [Polymer.IronResizableBehavior],

      observers: [
        '_fixedFrameChanged(config.globalOptions.fixedFrame)',
        '_backgroundChanged(config.globalOptions.background)',
      ],

      _backgroundChanged: function(background) {
        if (background && this._viewer) {
          this._viewer.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), 1);
        }
      },

      _fixedFrameChanged: function(fixedFrame) {
        if (this.tfClient) {
          this.tfClient.fixedFrame = fixedFrame;
          this.tfClient.updateGoal();
        }
      },

      attached: function() {
        Polymer.RenderStatus.beforeNextRender(this, function() {
          if (this._attached) {
            return;
          }
          var width = this.$.viewer.offsetWidth;
          var height = this.$.viewer.offsetHeight;
          var background = this.config.globalOptions.background;
          // Hack - Viewer appends to the divID using document.getElementById.
          // This does not work in the context of Polymer, so we alias document
          // to the shadow root temporarily.
          var backupFunc = document.getElementById;<commit_msg>Add back websocketUrl property.<commit_after><link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="../neon-animation/web-animations.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="../paper-fab/paper-fab.html">
<link rel="import" href="../paper-header-panel/paper-header-panel.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/typography.html">
<link rel="import" href="../paper-toolbar/paper-toolbar.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="imports.html">
<link rel="import" href="ros-rviz-display.html">

<!--
A ROS visualization interface for the web.

Example:

    <ros-websocket auto ros="{{ros}}" url="{{url}}"></ros-websocket>
    <ros-rviz ros="{{ros}}" websocket-url="{{url}}"></ros-rviz>

@demo demo/index.html
-->

<dom-module id="ros-rviz">
  <template>
    <style include="iron-flex iron-flex-alignment">
    <style>
      :host {
        display: block;
        height: 100%;
        @apply(--paper-font-common-base);
      }
      #displays {
        background-color: var(--paper-grey-50);
        color: rgba(0, 0, 0, 0.87)
      }
      #displayHeader {
        background-color: var(--paper-grey-300);
        color: rgba(0, 0, 0, 0.87);
      }
      #addButton {
        color: rgba(0, 0, 0, 0.87);
        background-color: #ffc107;
        position: relative;
        top: 28px;
        z-index: 2;
      }
      #container {
        height: 100%;
      }
      #sidebar {
        height: 100%;
      }
      #displays {
        width: 300px;
        height: 100%;
      }
      #viewer {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      #openDisplays {
        position: absolute;
        margin: 10px;
        color: rgba(255, 255, 255, 0.87);
        background-color: rgba(255, 255, 255, 0.2);
      }
      #openDisplays:hover {
        background-color: rgba(255, 255, 255, 0.3);
      }
      paper-item {
        --paper-item: {
          cursor: pointer;
        };
      }
      [hidden] {
        display: none;
      }
    </style>
    <div id="container" class="layout horizontal">
      <iron-collapse id="sidebar" opened="{{config.sidebarOpened}}" horizontal>
        <paper-header-panel mode="seamed" id="displays">
          <paper-toolbar slot="header" id="displayHeader">
            <paper-icon-button id="closeDisplays" icon="arrow-back"
              on-tap="_toggleDisplayList" slot="top"></paper-icon-button>
            <paper-tooltip position="right" animation-delay="0"
              for="closeDisplays" slot="top">Hide displays panel</paper-tooltip>
            <span class="title" slot="top">Displays</span>
            <paper-tooltip position="bottom" animation-delay="0"
              for="addButton" slot="top">Add a display</paper-tooltip>
            <paper-menu-button id="displayMenu" slot="top">
              <paper-fab icon="add" id="addButton" slot="dropdown-trigger"></paper-fab>
              <paper-listbox id="displayPaperMenu" slot="dropdown-content"
                  on-tap="_onDisplaySelected">
                <paper-item on-tap="addDepthCloud">Depth cloud</paper-item>
                <paper-item on-tap="addGrid">Grid</paper-item>
                <paper-item on-tap="addInteractiveMarkers">Interactive markers</paper-item>
                <paper-item on-tap="addMarkers">Markers</paper-item>
                <paper-item on-tap="addMarkerArray">Marker array</paper-item>
                <paper-item on-tap="addOccupancyGrid">Occupancy grid</paper-item>
                <paper-item on-tap="addPointCloud">Point cloud</paper-item>
                <paper-item on-tap="addPointCloud2">Point cloud 2</paper-item>
                <paper-item on-tap="addUrdf">Robot model</paper-item>
              </paper-listbox>
            </paper-menu-button>
          </paper-toolbar>
          <div id="displayList">
            <ros-rviz-display
              id="options"
              global-options="{{config.globalOptions}}"
              name="Global options"
              permanent
              type="globalOptions"
            ></ros-rviz-display>
            <template is="dom-repeat" items="{{config.displays}}" as="display">
              <ros-rviz-display
                global-options="{{config.globalOptions}}"
                index="{{index}}"
                is-shown="{{display.isShown}}"
                on-delete-display="_deleteDisplay"
                viewer="{{_viewer}}"
                ros="{{ros}}"
                tf-client="{{tfClient}}"
                name="{{display.name}}"
                options="{{display.options}}"
                type="{{display.type}}"
              ></ros-rviz-display>
            </template>
          </div>
        </paper-header-panel>
      </iron-collapse>
      <paper-fab icon="menu" id="openDisplays"
        hidden$="{{config.sidebarOpened}}" on-tap="_toggleDisplayList"></paper-fab>
      <paper-tooltip position="right" animation-delay="0"
        for="openDisplays">Open displays</paper-tooltip>
      <div id="viewer" class="flex">
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: 'ros-rviz',

      properties: {
        /**
         * A JSON object that specifies the configuration of the visualization.
         * Example:
         * {
         *   globalOptions: { url: ...},
         *   displays: [
         *     { 
         *        name: "Grid", // Display name
         *        type: "grid",
         *        options: { numCells: 20, ...}, // Specific to each display
         *        isPermanent: false // Only true for global options
         *     }
         *   ],
         *   sidebarOpened: true
         * }
         */
        config: {
          notify: true,
          type: Object,
          value: function() {
            return {
              globalOptions: {},
              sidebarOpened: true,
              displays: [],
            };
          }
        },
        ros: {
          type: Object,
          observer: '_rosChanged',
        },
        websocketUrl: {
          notify: true,
          type: String,
          observer: '_websocketUrlChanged'
        },
        tfClient: Object, // The ROSLIB.TFClient
        _viewer: Object, // The ROS3D viewer
      },

      behaviors: [Polymer.IronResizableBehavior],

      observers: [
        '_fixedFrameChanged(config.globalOptions.fixedFrame)',
        '_backgroundChanged(config.globalOptions.background)',
        '_globalWebsocketUrlChanged(config.globalOptions.url)',
      ],

      // The websocketUrl property is intended to be bound to the url property of a
      // <ros-websocket> element. We mirror its value to config.globalOptions.url. If the user edits
      // the websocket URL, the change eventually propagates to the websocketUrl property through
      // the two-way binding we manually add here.

      // If the property changes, mirror to config.
      _websocketUrlChanged: function(url) {
        this.set('config.globalOptions.url', url);
      },
      // If the config changes, mirror to property.
      _globalWebsocketUrlChanged: function(url) {
        this.websocketUrl = url;
      },

      _backgroundChanged: function(background) {
        if (background && this._viewer) {
          this._viewer.renderer.setClearColor(parseInt(background.replace('#', '0x'), 16), 1);
        }
      },

      _fixedFrameChanged: function(fixedFrame) {
        if (this.tfClient) {
          this.tfClient.fixedFrame = fixedFrame;
          this.tfClient.updateGoal();
        }
      },

      attached: function() {
        Polymer.RenderStatus.beforeNextRender(this, function() {
          if (this._attached) {
            return;
          }
          var width = this.$.viewer.offsetWidth;
          var height = this.$.viewer.offsetHeight;
          var background = this.config.globalOptions.background;
          // Hack - Viewer appends to the divID using document.getElementById.
          // This does not work in the context of Polymer, so we alias document
          // to the shadow root temporarily.
          var backupFunc = document.getElementById;
{'fraction_non_alphanumeric': 0.15249161475802586, 'fraction_numerical': 0.011739338763775755, 'mean_word_length': 2.025366914296068, 'pattern_counts': {'":': 0, '<': 174, '<?xml version=': 0, '>': 174, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2702440', 'n_tokens_mistral': 5063, 'n_tokens_neox': 4733, 'n_words': 913}