<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IoTアラームクロック 設定ページ</title>
<script type="text/javascript" src="/webiopi.js"></script>
<script type="text/javascript">
//設定値更新処理
webiopi().ready(function() {
var updatealarm = function(macro, args, response) {
var alarm = response.split(",");
$("#alarmhour").val(alarm[0]);
$("#alarmmin").val(alarm[1]);
$("#alarmlen").val(alarm[2]);
}
webiopi().callMacro("getalarm", [], updatealarm);
//設定ボタン処理
var setButton = webiopi().createButton("setButton", "設定", function() {
var alarm = [$("#alarmhour").val(), $("#alarmmin").val(), $("#alarmlen").val()];
webiopi().callMacro("setalarm", alarm, updatealarm);
});
$("#controls").append(setButton);
});
</script>
<style type="text/css">
button {
display: block;
margin: 5px 5px 5px 5px;
width: 160px;
height: 45px;
font-size: 20pt;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<div align="center">
IoTアラームクロック 設定ページ
<br>
<br>
<br>
アラーム時刻(時) [0-23]: <input type="text" id="alarmhour" />
<br>
<br>
アラーム時刻(分) [0-59]: <input type="text" id="alarmmin" />
<br>
<br>
アラーム長(分) [1-99]: <input type="text" id="alarmlen" />
<br>
<br>
<br>
<div id="controls"></div>
</div>
</body>
</html>