« ESP8266とArduino | トップページ | ESP8266でAjax つづき »

2015年7月13日 (月)

ESP8266でAJAX

ESP8266でAJAX

ESP8266のTOUTピン(名称とは逆のアナログ入力ピン)の値をAJAXでブラウザで表示するテストをしてみました。

まずはAJAXの復習から。
次のようなHTMLを書き、ajax.htmとして保存。

<html>
<head>

<script type="text/javascript">
function loadDoc() {
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("ajaxDiv").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","ajaxinfo.txt",true);
  xmlhttp.send();
}
</script>

</head>
<body>

<p>
<div id="ajaxDiv"><h2>ここにajaxで取得したの内容が表示されます</h2></div>
<button type="button" onclick="loadDoc()">ajaxでデータ取得</button>
</p>

</body>
</html>

ajaxinfo.txtとというファイルを作成する。中身はなんでも良い。
この2つのファイルをESP8266EXとSDカードにSDWebServer.inoで構成したSDカードのルートにコピーする。
Windowsなどからhttp://192.168.0.7/ajax.htmなどとしてアクセス。
(IPアドレスは実際に合わせて変更してください。)
表示されたボタンを押すとajaxinfo.txtファイルの中身が表示される。

これでajaxの復習と動くhtmlが準備できた。

つぎにSDWebServerスケッチにあるディレクトリの一覧を表示するprintDirectoryメソッドを動かしてみる。

16行目の"ajaxinfo.txt"を"list?dir=/"して以下のようにする

  xmlhttp.open("GET","list?dir=/",true);

に変えるだけ。
同じくWindowsなどからhttp://192.168.0.7/ajax.htmをアクセス。
表示されたボタンを押すとSDカードのルートのファイル名などが表示される。
もとからあるprintDirectory()はjsonのデータを返してくるので私はテキストで返すように変更してテストしました。変更しないでそのままでも一覧にはならないけど動作するはず。

最後にTOUTピンの情報の表示です。(3か所の変更・追加があります)

1.htmlの変更は16行目を"tout"変え次のようにします。

  xmlhttp.open("GET","tout",true);

2.さらにSDWebServer.inoのsetup()のserver.on()のあるかたまりに以下追加

  server.on("/tout", HTTP_GET, tout);

3.次のコードをSDWebServer.inoに追加

void tout() {
  Serial.println("ar");
  int ar = analogRead(A0);
  analogWrite(statusLED, ar);
  Serial.println(String(ar));
  String message = "<html><head><title>TOUT</title></head><body>";
  message += "TOUTピンの値=";
  message += String(ar);
  message += "<br /><body></html>";
  server.send(200, "text/html", message);
}

以上でTOUTピンの値(ADC変換された数値)が表示されます。
値を1/1000するとTOUTピンのおおよそ電圧になります。
TOUTピンに1Vのとき1023になるようですが1Vでは1023になりませんでした。また、1.023V前に1023になるので1.023Vで1023になるでも無いよう?そもそも測定したマルチメータの確度の問題もあるので測定では限界が。仕様を探しても明確に書いてある仕様書が見つかっていません。

補足
・2番目のてすとでSDカードのルートディレクトリの一覧で一覧を表示するまでに1分弱かかります。ディレクトリ・ファイルが24件あり1つひとつファイルを開いて調べているので時間がかかるのは解るのですがちょっと時間がかかりすぎですね。htmlを開くときも時間がかかります。
・ArduinoのSDカードはファイル名が8.3形式のみサポートです。なのでhtmlファイルもindex.htmなどとする必要があり、html内のファイル名などの記述も8.3に合わせなければなりません。小文字での記述はOKですが実際のファイル名は大文字となります。
またwindwsで長いファイル名で保存すると8.3形式のファイル名が自動的に生成されSAMPL~1.TXTなどの名前になります。コマンドプロンプトでDIR /Xとすると確認できますが、~1の部分は自動的に付けられるのでhtmlないのリンクに使うのは難しいですね。

« ESP8266とArduino | トップページ | ESP8266でAjax つづき »

Arduino」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/569662/61880940

この記事へのトラックバック一覧です: ESP8266でAJAX:

« ESP8266とArduino | トップページ | ESP8266でAjax つづき »