<html>
  <head>
    <title>x-webmidi input Demo | powered by polymer</title>
    <link rel="stylesheet" href="./css/main.css">
    <style type="text/css">
    .inputblock {
      float:left;
      margin:10px 20px;
    }
    .disparea {
      border:1px solid #ddd;
      padding:10px;
      width:200px;
      height:150px;
    }
    </style>
  </head>
  <body>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="x-webmidirequestaccess.html">
    <h1>x-webmidi Demo (input)</h1>

    <x-webmidirequestaccess sysex="false" input="true" output="false"></x-webmidirequestaccess>
    <div class="inputblock">
      <div>input-01: <x-webmidiinput id="input-port-01"></x-webmidiinput> <span id="midiinput-event-01"></span></div>
      <div id="disp-input-port-01" class="disparea"></div>
    </div>
    <div class="inputblock">
      <div>input-02: <x-webmidiinput id="input-port-02"></x-webmidiinput> <span id="midiinput-event-02"></span></div>
      <div id="disp-input-port-02" class="disparea"></div>
    </div>

    <script type="text/javascript">
    var timerId={"input-port-01": 0, "input-port-02": 0,};
    window.addEventListener('midiin-event:input-port-01', function(event) {
        dispParsedMIDI("input-port-01", event);
    });
    window.addEventListener('midiin-event:input-port-02', function(event) {
        dispParsedMIDI("input-port-02", event);
    });


    function dispParsedMIDI(elemId, event) {
        var out=[];
        for(key in event.detail.property) {
            if(key=="raw") {
                var tmp=[];
                for(var i=0; i<event.detail.property["raw"].length; i++) {
                    tmp.push("0x"+event.detail.property["raw"][i].toString(16));
                }
                event.detail.property["raw"]=tmp.join(" ");
            }
            out.push("["+key+"] "+event.detail.property[key]);
        }
        var disparea=document.getElementById("disp-"+elemId);
        disparea.innerHTML=out.join("<br>\n");
        clearTimeout(timerId[elemId]);
        timerId[elemId]=setTimeout(function(){disparea.innerText="";}, 3000);
    }
    </script>
  </body>
</html>

Add basic demo for input.
Add basic demo for input.
