ros-rviz-global-options.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-radio-button/paper-radio-button.html">
<link rel="import" href="../paper-radio-group/paper-radio-group.html">
<link rel="import" href="imports.html">

<dom-module id="ros-rviz-global-options">
  <template>
    <style include="iron-flex iron-flex-alignment"></style>
    <style>
      label {
        @apply(--paper-font-common-base);
      }
    </style>
    <paper-input id="fixedFrame" label="Fixed frame" value="[[globalOptions.fixedFrame]]" on-blur="_updateGlobalOptions"></paper-input>
    <paper-input id="bgColor" label="Background color" value="[[globalOptions.background]]" on-blur="_updateGlobalOptions"></paper-input>
    <paper-input id="websocketUrl" label="Websocket URL" value="[[globalOptions.url]]" on-blur="_updateGlobalOptions"></paper-input>
    <paper-input id="webVideoUrl" label="Web video server URL" value="[[globalOptions.videoServer]]" on-blur="_updateGlobalOptions"></paper-input>
    <paper-input id="colladaUrl" label="Collada file server URL" value="[[globalOptions.colladaServer]]" on-blur="_updateGlobalOptions"></paper-input>
    <label id="colladaLabel">Collada loader:</label>
    <paper-radio-group selected="{{globalOptions.colladaLoader}}" aria-labelledby="colladaLabel">
      <paper-radio-button name="collada">Loader 1</paper-radio-button>
      <paper-radio-button name="collada2">Loader 2</paper-radio-button>
    </paper-radio-group>
  </template>
  <script>
    Polymer({
      is: 'ros-rviz-global-options',

      properties: {
        globalOptions: {
          type: Object,
          notify: true,
        },
        name: {
          type: String,
          value: 'Options',
        },
      },

      ready: function() {
        if (!this.globalOptions.background) {
          this.set('globalOptions.background', '#111111');
        }
        if (!this.globalOptions.colladaLoader) {
          this.set('globalOptions.colladaLoader', 'collada2');
        }
        if (!this.globalOptions.colladaServer) {
          var protocol = window.location.protocol;
          var hostname = window.location.hostname;                  
          var url = protocol + '//' + hostname + ':8001/';
          this.set('globalOptions.colladaServer', url);
        }
        if (!this.globalOptions.fixedFrame) {
          this.set('globalOptions.fixedFrame', '/base_link');
        }
        if (!this.globalOptions.url) {
          var hostname = window.location.hostname;
          var protocol = 'ws:';
          if (window.location.protocol === 'https:') {
            protocol = 'wss:';
          }
          var url = protocol + '//' + hostname + ':9090';
          this.set('globalOptions.url', url);
        }
        if (!this.globalOptions.videoServer) {
          var protocol = window.location.protocol;
          var hostname = window.location.hostname;
          var url = protocol + '//' + hostname + ':9999';
          this.set('globalOptions.videoServer', url);
        }
      },

      destroy: function() {
        // Nothing to destroy.
      },

      hide: function() {
        // Nothing to do.
      },

      show: function() {
        // Nothing to do.
      },

      _updateGlobalOptions: function() {
        this.set('globalOptions.background', this.$.bgColor.value);
        this.set('globalOptions.colladaServer', this.$.colladaUrl.value);
        this.set('globalOptions.fixedFrame', this.$.fixedFrame.value);
        this.set('globalOptions.url', this.$.websocketUrl.value);
        this.set('globalOptions.videoServer', this.$.webVideoUrl.value);
      },
    });
  </script>
</dom-module>