webから機械学習用（python）のプログラムを呼び出す方法(ブラウザ編）

htmlに下のコードを挿入します。
前半はデータをarrという配列に保存しています。

  value = data.getInt16(0);//2Byteの場合のフォーマット

  value2 = data.getInt16(2);

  //-1~1で取りたいので。
  value = (value-512)/512;
  value2 = (value2-512)/512;


  if (arr.length<30){
      arr.push([value,value2,"\n"]);
  } else {
      arr.push([value,value2,"\n"]);
      arr.shift();
  }

<script type="text/javascript">
$(".myButton").click(function(){

    console.table(arr);
    arrjoin = arr.join("")

    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    $.ajax({
      type: "POST",
      url: $SCRIPT_ROOT + "/predict/",
      data: arrjoin,
      success: function(data){
        $('#result').text(' 推測結果: '+data);
      },
      error: function(data){
         $('#result').text('データ不足です');
      }
    });
});
</script>

簡単に解説

  value = data.getInt16(0);//2Byteの場合のフォーマット

  value2 = data.getInt16(2);

  //-1~1で取りたいので。
  value = (value-512)/512;
  value2 = (value2-512)/512;

bitのデータをintに直しています。
(0)という引数は配列の位置です。

data[0][1]に一つ目のセンサで読み取った値
data[2][3]に2つ目のセンサで読み取った値が入っています。
それをgetIntでintに直しています。

その後正規化します。

  if (arr.length<30){
      arr.push([value,value2,"\n"]);
  } else {
      arr.push([value,value2,"\n"]);
      arr.shift();
  }

これでarrの配列の大きさが30になるまで値を入れ続けます
その後30になったら古いデータを捨て新しいデータを追加します。

一番大事なのはココ
iQueryというライブラリを使っています

$(".myButton").click(function(){

    console.table(arr);
    arrjoin = arr.join("")

    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    $.ajax({
      type: "POST",
      url: $SCRIPT_ROOT + "/predict/",
      data: arrjoin,
      success: function(data){
        $('#result').text(' 推測結果: '+data);
      },
      error: function(data){
         $('#result').text('データ不足です');
      }
    });
});

jQueryというライブラリを使います
$(".myButton").click(function()で
myButtonという名前が付いたものをクリックしたら。。。

console.table(arr);
arrjoin = arr.join("")

配列arrをコンソールに表示します。その後その配列を連結します
30,59
29,69
みたいな配列が
30,59,29,69みたいな感じになります。

var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
$.ajax({
type: "POST",
url: $SCRIPT_ROOT + "/predict/",
data: arrjoin,
success: function(data){
$('#result').text(' 推測結果: '+data);
},
error: function(data){
$('#result').text('データ不足です');

この処理が一番大事
$.ajaxは非同期通信ようのものです。
今回はPOSTメソッドを使うので type: "POST"とします
どこに送信するかはurlで指定します
data:arrを一次元にしたものを送ります。

つまり
送信先は/predict/でデータは一次元のものをPOST通信します。
この送信先URLはpythonのサーバ側で指定しています、

jump1268.hatenablog.com

あとはpythonによる推定結果を表示します。
success: function(data){
$('#result').text(' 推測結果: '+data);
},
error: function(data){
$('#result').text('データ不足です');

あとこのサイトがマジでお勧めです。今なら登録してスカイプで無料体験するだけで1000円もらえます。