いードットぷりんとすたっくとれーす: serialport-serever

I used 'Serialport-server' ( http://shokai.github.com/serialport-server/ ).

I got the google-blockly code from google code by svn.

I added the 'language_device.js' in demos/maze folder. The 'language_device.js' code is in my blog.

I added one line which request the 'language_device.js' to the 'frame.html' in demos/maze folder.

I added some lines to the 'maze.js' in demos/maze folder. The lines code is in my blog.

Scratch has the function about 'create a program using blocks'. Scratch has the function about 'serial port communication'. The following page describes the serial port communication between Scratch and Ardino in Japanese and English.
Scratch+Arduino | Yengawa Systems http://www.yengawa.com/scratch_arduino

動機

http://code.google.com/p/google-blockly/

http://shokai.github.com/serialport-server/

コード language_device.js
if (!Blockly.Language) {
  Blockly.Language = {};
}

Blockly.JavaScript = Blockly.Generator.get('JavaScript');

Blockly.Language.device_sendValue = {
  category: 'Device',
  helpUrl: '',
  init: function() {
    this.setColour(210);
    this.addTitle('Send Value');
    var dropdown = new Blockly.FieldDropdown(function() {
      return Blockly.Language.device_sendValue.Symbol;
    });
    this.addTitle(dropdown);
    this.setTitleText(Blockly.Language.device_sendValue.Symbol[0], 1);
    this.addTitle('To Server (Addr \u201C');
    this.addTitle(new Blockly.FieldTextInput('http://localhost:8783'));
    this.addTitle('\u201D \)');
    this.setPreviousStatement(true);
    this.setNextStatement(true);
    this.setTooltip('Send Value to the serialport-server');
  }
};

Blockly.Language.device_sendValue.Symbol = ['o', 'x'];

Blockly.JavaScript.device_sendValue = function() {
  var _addr= Blockly.JavaScript.quote_(this.getTitleText(3));
  var _symbol = Blockly.Language.device_sendValue.Symbol.indexOf(this.getTitleText(1));
  
  if (false) {
    var cmd= "var xhr = new XMLHttpRequest();";
    cmd+= "xhr.open('post', "+_addr+", false);";
    cmd+= "xhr.onreadystatechange = function(){";
    cmd+= "if (xhr.readyState === 4 && xhr.status === 200){";
    cmd+= "}";
    cmd+= "};";
    cmd+= "xhr.send('"+_symbol+"');\n";
    return cmd;
  }
  else {
    return (_symbol===0?"Maze.ledon();":"Maze.ledoff();")+"\n";
  }
};
'Blockly.JavaScript.device_sendValue'においてMazeのアニメに合わせて動作させるために内部用のコマンドを返すようにしてあるが, 単に対応するJavascriptを返すだけならif文のthen側，cmdの値を使えばよい．(serialport-serverに'o'か'x'を送るというJavascript)

これをframe.htmlで定義している他のjsファイルと共に読み込ませるだけでエディタの項目に出てくる
編集結果のjavascript codeを取得するには
  var code = Blockly.Generator.workspaceToCode('JavaScript');
で取得できる．（引数文字列'JavaScript'とBlockly.'JavaScript'が対応付いて'Language'の関数(Blocklyの編集用オブジェクト)に対応する'JavaScript'の同名関数の返り値(文字列)の集まりが得られる）

結果

maze.jsの差分(赤色部分)

　…
Maze.animate = function() {
　…
  } else if (action == 'finish') {
    Maze.scheduleFinish();
  }
  else if (action == 'send_o') {
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'http://localhost:8783', true);
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200){
        }
      };
      xhr.send('o');
  }
  else if (action == 'send_x') {
      var xhr = new XMLHttpRequest();
      xhr.open('post', 'http://localhost:8783', true);
      xhr.onreadystatechange = function(){
        if (xhr.readyState === 4 && xhr.status === 200){
        }
      };
      xhr.send('x');
  }
  
  Maze.pidList.push(window.setTimeout(Maze.animate, Maze.STEP_SPEED * 5));
};
　…
Maze.ledoff = function() {
  Maze.checkTimeout();
  Maze.path.push(['send_x', null]);
}
Maze.ledon = function() {
  Maze.checkTimeout();
  Maze.path.push(['send_o', null]);
}

参考というか動機

serialport-server

timbre

Twitter / @p_g_

結果
やっている事：serialport-serverの例のようにCdsを接続し，Cdsの値をtimbreのfami.freqに与えている．
予想される動作：明るくなると音の高さが上がる．暗くなると音の高さが下がる．
で，結果：

コード

<html>
  <head>
    <meta charset="utf-8"/>
    <title>timbre - oscillators</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="../timbre.js"></script>
  </head>
  <body>
    <selction id="body">
      <h2>Timbre</h2>
      <div>
        <button id="play0">play</button>
        <button id="pause0">pause</button>
      </div>
      
    <hr/>

      <div id="main">
        <h2>Serial Port</h2>
        <div>
          <input type="text" value="http://localhost:8783" id="addr" size="40" />
        </div>
        <h3>LED</h3>
        <div class="led">
          <input type="button" class="btn on" value="ON" />
          <input type="button" class="btn off" value="OFF" />
        </div>
        <h3>CdS</h3>
        <div class="cds">
          <input type="range" value="500" min="0" max="1024" class="slider" />
          <input type="text" id="cdsvalue" value="500" disabled="disabled" size="5" />
       </div>
     </div>
    </section>
  </body>
  <script type="text/javascript">
    $(function() {
      $('.led .on').click(function(){
        $.post($('#addr').val(), 'o', function(){
            //alert('led on');
        });
      });
      $('.led .off').click(function(){
        $.post($('#addr').val(), 'x', function(){
            //alert('led off');
        });
      });
      setInterval(function(){
        $.getJSON($('#addr').val(), {}, function(data){
            $('.cds input').val( data[0].data );
        });
      }, 100);

      function getCdsValue() {
        var value= parseInt($("#cdsvalue")[0].value);
        if (isNaN(value)) {
          value= 880;
        }
        return value;
      }
      
      dac0= T("dac", fami= T("fami", getCdsValue()));

      var timerId;
      dac0.addEventListener("on", function() {
            timerId = setInterval(function() {
                fami.freq = getCdsValue();
            }, 50);
        });

      dac0.addEventListener("on" , function() {timbre.on();});
      dac0.addEventListener("off", function() {
        if (dac0.isOff) timbre.off();
        });

      $("#play0").on("click", function() { dac0.on(); });
      $("#pause0").on("click", function() { dac0.off(); });
    });
  </script>
</html>

いードットぷりんとすたっくとれーす

2012年6月2日土曜日

'google-blockly'+'serialport-server'

2012年5月21日月曜日

serialport-serverとtimbreを連携させてみた