<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>RFID(RC522)</title>

<script src="../../webcomponentsjs/webcomponents.js"></script>

<link rel='import' href='../web-arduino.html'></link>

<link rel='import' href='../wa-rfid.html'></link>

<style>

* {

font-size: 20px;

}

#msg.default::after {

content: "訊息";

}

#msg.waiting::after {

content: "Loading...";

}

#msg.ready::after {

content: "Ready!";

}

#msg.setting::after {

content: "設定中...";

}

#msg.set::after {

content: "設定完成";

}

input {

width: 100px;

margin: 5px 0;

}

button {

margin: 5px 0;

}

.container {

position: relative;

}

.msgContainer {

position: absolute;

top: 0;

right: 0;

width: 60%;

}

#light img {

width: 25%;

display: none;

}

#light.off img:first-child {

display: inline-block;

}

#light.on img:last-child {

display: inline-block;

}

#msgRecv {

word-break: break-all;

height: 300px;

width: 100%;

overflow: auto;

}

#msgRecv::before {

content: 'message:';

}

</style>

<web-arduino id="board">

<wa-rfid id='rfid'></wa-rfid>

</web-arduino>

<div id="msg" class="waiting"></div>

<form>

<label>device : </label>

<input type="text" id="device">

<button class="setting" id="set">設定</button>

</form>

<p>接線：3.3v 和 gnd 及 SDA(10), MOSI(11), MISO(12), SCK(13)</p>

<p>說明：

<br>接收到訊號時，會拋出字串，訊號源離開時，會收到空字串。

</p>

<div class="container">

<p>點擊燈炮亮起，啟動 RFID，熄燈則關閉 RFID</p>

<div id='light' class="off">

<img src='http://i.imgur.com/T5H4MHE.png'></img>

<img src='http://i.imgur.com/8qFj2Ou.png'></img>

</div>

<div class="msgContainer">

<button id='clearMsg'>clear message</button>

<br>

<div id='msgRecv'></div>

</div>

</div>

<script>

window.addEventListener('WebComponentsReady', function() {

var board = document.getElementById('board');

var device = document.getElementById('device');

var light = document.getElementById('light');

var clearMsg = document.getElementById('clearMsg');

var msgRecv = document.getElementById('msgRecv');

var msg = document.getElementById('msg');

var setBtn = document.getElementById('set');

// 使用 localStorage 記錄 device id

device.setAttribute('value', localStorage.device || "");

msg.className = "ready";

setBtn.addEventListener('click', function(e) {

msg.className = "setting";

light.className = 'off';

msgRecv.innerHTML = '';

board.device = device.value;

localStorage.device = device.value;

board.on('ready', ready);

board.init();

e.stopPropagation();

e.preventDefault();

return false;

}, false);

// 清除訊息

clearMsg.addEventListener('click', function() {

msgRecv.innerHTML = '';

});

function ready() {

var rfid = document.getElementById('rfid');

light.addEventListener('click', function() {

if (light.className == 'on') {

light.className = 'off';

rfid.stopListen();

} else {

light.className = 'on';

rfid.listen(success, success);

}

}, false);

msg.className = "set";

}

function success(val) {

var msgRecv = document.getElementById('msgRecv');

var ss = document.createElement('span');

ss.innerHTML += '<br>';

ss.innerHTML += val;

ss.innerHTML += '<span>, ' + new Date().toLocaleTimeString() + '</span>';

msgRecv.insertBefore(ss, msgRecv.childNodes[0]);

}

});

</script>