ros-rviz-depth-cloud.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../ros-service/ros-service.html">
<link rel="import" href="imports.html">

<!--
  Version that takes in a color and depth image topic.
-->
<dom-module id="ros-rviz-depth-cloud">
  <template>
    <paper-input always-float-label label="ros_web_video encoded depth image URL:" value="{{_topic}}" on-blur="_onOptionsChanged">
      <div slot="prefix">[[globalOptions.videoServer]]/www/</div>
    </paper-input>
    <paper-input label="Camera frame ID" value="{{_frameId}}" on-blur="_onOptionsChanged"></paper-input>
  </template>
  <script>
    Polymer({
      is: 'ros-rviz-depth-cloud',

      properties: {
        topic: {
          type: String,
          value: 'depthcloud_encoded',
          notify: true,
        },
        frameId: {
          type: String,
          value: '/camera_rgb_optical_frame',
          notify: true,
        },
        globalOptions: Object,
        isShown: Boolean,
        name: {
          type: String,
          value: 'Depth cloud',
        },
        tfClient: Object,
        viewer: Object,
        ros: Object,
        _cloud: {
          type: Object,
          value: null
        },
        _sceneNode: Object,
        _depthUrl: String,
        _depthUrlTopic: String, // Backend image topic to stream.
      },

      observers: [
        '_optionsChanged(ros, tfClient, viewer, globalOptions.videoServer, topic, frameId, isShown)'
      ],

      // Used for event handlers
      _onOptionsChanged: function() {
        if (this.topic !== this._topic) {
          this.topic = this._topic;
        }
        if (this.frameId !== this._frameId) {
          this.frameId = this._frameId;
        }
      },

      _optionsChanged: function(ros, tfClient, viewer, videoServer, topic, frameId, isShown) {
        if (!ros || !tfClient || !viewer || !videoServer || !topic || !frameId || (!isShown && isShown != false)) {
          return;
        }

        if (this._topic !== topic) {
          this._topic = topic;
        }
        if (this._frameId !== frameId) {
          this._frameId = frameId;
        }

        this.destroy();
        var url = videoServer + '/streams/' + topic + '.webm?enc=webm&bitrate=250000&framerate=15';
        this._cloud = new ROS3D.DepthCloud({
          url: url,
          f: 525.0,
        });

        this._sceneNode = new ROS3D.SceneNode({
          frameID: frameId,
          tfClient: tfClient,
          object: this._cloud,
        });

        // TODO(jstn): I just tried this and it seemed to work.
        // Get a real understanding of what's going wrong.
        this._sceneNode.scale.x = 0.5;
        this._sceneNode.scale.y = 0.5;
        this._sceneNode.scale.z = 0.5;

        if (this.isShown) {
          this.show();
        }
      },

      destroy: function() {
        this.hide();
        if (this._sceneNode) {
          delete this._sceneNode;
        }
        if (this._cloud) {
          delete this._cloud;
        }
      },

      hide: function() {
        if (this._cloud) {
          this._cloud.stopStream();
        }
        if (this._sceneNode) {
          this.viewer.scene.remove(this._sceneNode);
        }
      },

      show: function() {
        if (!this.isShown) {
          return;
        }
        if (this._cloud) {
          this._cloud.startStream();
        }
        if (this._sceneNode) {
          this.viewer.scene.add(this._sceneNode);
        }
      },
    });
  </script>
</dom-module>