gishi-yama/Button.html

## Button.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">

  <script type="text/javascript">
    "use strict";
    window.onload = function() {

      // 接続キー
      var key = "xxxxx";

      // ボタンのデータをもらうためのWeb接続先
      var ws = new WebSocket("wss://us.wio.seeed.io/v1/node/event");

      // ボタンのOn/Off情報（false:off, true:on）
      var pushed = false;

      // ボタンをoffにする処理
      var off = function() {
        pushed = false;
        document.getElementById("on").style.display = "none";
        document.getElementById("off").style.display = "inline";
      };

      // ボタンをonにする処理
      var on = function() {
        pushed = true;
        document.getElementById("on").style.display = "inline";
        document.getElementById("off").style.display = "none";
      };

      // Webに接続するための処理
      ws.onopen = function() {
        ws.send(key);
        off();
        document.getElementById("wait").style.display = "none";
      };

      // Webからボタンの情報が取得できたときの処理
      ws.onmessage = function(evt) {
        if (pushed) {
          off();
          return;
        }
        on();
      };
    }

  </script>
</head>

<body>

  <p id="wait"><strong>じゅんびちゅう...</strong></p>
  <img id="on" src="./on.png">
  <img id="off" src="./off.png">
  <img src="./woman.png">

</body>

</html>

## UltraSonic.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
    'use strict';
    window.onload = function() {

      //URLとキー値（センサによって異なる）
      var url = 'https://us.wio.seeed.io/v1/node/GroveUltraRangerD1/range_in_cm?access_token=xxxxx';

      // Webに接続するための処理
      var ok = function(response) {
        return response.json();
      }

      // Webから情報を取得できたときの処理
      var change = function(json) {
        var kyori = json.range_cm;
        document.getElementById('range').innerHTML = kyori;
      }

      // コンピュータからのデータ取得の依頼
      var fetching = function() {
        fetch(url).then(ok).then(change);
      }

      // 最初に1回、データ取得の依頼
      fetching();

      // 以後、10秒ごとに、データ取得の依頼を繰り返す
      setInterval(fetching, 10000);
    }

  </script>
</head>

<body>

  <p>障害物までの距離は <span id="range">?</span> cmです。</p>

</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">

	<script type="text/javascript">
	"use strict";
	window.onload = function() {

	// 接続キー
	var key = "xxxxx";

	// ボタンのデータをもらうためのWeb接続先
	var ws = new WebSocket("wss://us.wio.seeed.io/v1/node/event");

	// ボタンのOn/Off情報（false:off, true:on）
	var pushed = false;

	// ボタンをoffにする処理
	var off = function() {
	pushed = false;
	document.getElementById("on").style.display = "none";
	document.getElementById("off").style.display = "inline";
	};

	// ボタンをonにする処理
	var on = function() {
	pushed = true;
	document.getElementById("on").style.display = "inline";
	document.getElementById("off").style.display = "none";
	};

	// Webに接続するための処理
	ws.onopen = function() {
	ws.send(key);
	off();
	document.getElementById("wait").style.display = "none";
	};

	// Webからボタンの情報が取得できたときの処理
	ws.onmessage = function(evt) {
	if (pushed) {
	off();
	return;
	}
	on();
	};
	}

	</script>
	</head>

	<body>

	<p id="wait"><strong>じゅんびちゅう...</strong></p>
	<img id="on" src="./on.png">
	<img id="off" src="./off.png">
	<img src="./woman.png">

	</body>

	</html>