paperGUI demo

    // Build a basic demo. All config variables are placed in a JS Object.
    var myDemo = {};
    myDemo.sayHello = function() {
      var message = '';
      for (var i = 0; i < myDemo.times; i++) {
        message += (myDemo.toggle ? 'hello ' : 'good bye ') + myDemo.message + '<br>';
      }
      document.getElementById('demo').innerHTML = message;
    }
    myDemo.toggle = true;
    myDemo.message = 'world';
    myDemo.times = 1;
    myDemo.sayHello();

    
    // Now let's create a fancy paper GUI!
    document.addEventListener('PaperGUIReady', function(e) {
      // Polymer elements are loaded asynchronously, we wait for them to be ready before creating the GUI.
      var myGUI = new PaperGUI();
      myGUI.add(myDemo, 'toggle').name('Hello').onChange(myDemo.sayHello);
      myGUI.add(myDemo, 'message').name('Who are you?');
      myGUI.add(myDemo, 'sayHello').name('Update text');
      myGUI.add(myDemo, 'times').max(10).min(1).step(0.01).onChange(myDemo.sayHello);
      myGUI.add(myDemo, 'nothing', -5, 5).name('Another one that does nothing');
      myGUI.add(myDemo, 'message', ['earth', 'world', 'moon', 'system']).name('Yay, menus!')
          .onChange(function(val) {
            console.log(val);
            myDemo.sayHello();
          });
      myGUI.add(myDemo, 'times', {'Once':1, 'Twice':2, '10X':10})
          .name('Yay, menus with labels!').onChange(myDemo.sayHello);
    });

Then, at the end of the HTML file, start loading paperGUI:

<script src="dist/paperGUI.js"></script>

This asynchronously loads the webcomponent polyfill then the paperGUI library and elements.

Alternatively, you can use a (blocking) webcomponent import instead of this loader.

<link rel="import" href="dist/paper-gui.html">

Note that the PaperGUIReady event won't be triggered and the import will only work on webcomponent-ready browsers as this bypasses support detection and polyfill loading.