IRKitとHTML(jquery + bootstrap)でカスタムテレビリモコンを作ってみる（その弐）
今日はUI。bootstrapでデザインしてみる。
bootstrapのインストール
下記のページからダウンロードして、css、js、fontのフォルダを/var/www/nas/irkitの下に入れておく。
http://getbootstrap.com
使い方はいろいろなページを参照した。
bootstrapでボタンを作って配置
TVのリモコンように最低限必要なボタンを作ってみた。
電源ON/OFF、地デジ/BS切り替え、チャンネル切り替え、音量調整、あとよく使うチャンネルだけはショートカットボタン。例えば、BS1の場合は通常BSに切り替えてからチャンネル１を押す必要があるが、その２手順をワンボタンで実行できるようにした。普通のリモコンより多少便利。
こっちがUI(HTML)のソース。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h3>AQUOS TV</h3>
<p>
<button type="button" id="power" class="btn btn-danger btn-lg">電源</button>
</p>
<p>
<button type="button" id="nhk" class="btn btn-danger btn-lg">NHK</button>
<button type="button" id="etv" class="btn btn-success btn-lg">Eテレ</button>
<button type="button" id="bs1" class="btn btn-primary btn-lg">BS 1</button>
<!--<button type="button" id="bsp" class="btn btn-warning btn-lg">BS P</button>-->
</p>
<div class="btn-group" align="right">
<button type="button" id="db" class="btn btn-primary btn-lg">地デジ</button>
<button type="button" id="bs" class="btn btn-success btn-lg">ＢＳ </button>
</div>
<p/>
<p>
<button type="button" id="chan_down" class="btn btn-info btn-lg">＜CH</button>
<button type="button" id="chan_up" class="btn btn-info btn-lg">CH＞</button>
<button type="button" id="vol_down" class="btn btn-info btn-lg">＜音量</button>
<button type="button" id="vol_up" class="btn btn-info btn-lg">音量＞</button>
</p>
<p>
<div class="btn-group">
<button type="button" id="subtitle" class="btn">字幕</button>
</div>
</p>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="remote.js"></script>
</body>
</html>こっちが通信側(JavaScript)のソース。
var CODE_POWER = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,2400,920,140000";
var CODE_DB = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,2400,920,140000";
var CODE_BS = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,2400,920,720,920,2400,920,140000";
var CODE_CHAN_1 = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,2400,920,2400,920,720,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,2400,920,2400,920,720,920,720,920,140000";
var CODE_CHAN_2 = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,140000";
var CODE_CHAN_3 = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,2400,920,140000";
var CODE_CHAN_7 = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,2400,920,140000"
var CODE_CHAN_UP = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,720,920,2400,920,140000";
var CODE_CHAN_DOWN = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,2400,920,140000";
var CODE_VOL_UP = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,2400,920,2400,920,2400,920,140000";
var CODE_VOL_DOWN = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,2400,920,2400,920,2400,920,140000";
var CODE_SUBTITLE = "7000,3200,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,720,920,2400,920,720,920,2400,920,2400,920,2400,920,2400,920,720,920,720,920,720,920,2400,920,720,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,2400,920,2400,920,2400,920,720,920,720,920,2400,920,2400,920,720,920,720,920,2400,920,720,920,720,920,720,920,720,920,720,920,2400,920,140000";
function ir_doit(ir_code){
var message = '{"freq":38,"format":"raw","data":[' + ir_code + ']}';
$.ajax({
type : "POST",
url : "http://192.168.0.2/messages",
data : message,
async : false,
complete : function(jqxhr, status) {
console.log("complete: ", jqxhr, status);
}
});
};
$(function() {
$("#power").click(function() {
ir_doit(CODE_POWER);
});
$("#db").click(function() {
ir_doit(CODE_DB);
});
$("#bs").click(function() {
ir_doit(CODE_BS);
});
$("#nhk").click(function() {
ir_doit(CODE_DB);
ir_doit(CODE_CHAN_7);
});
$("#etv").click(function() {
ir_doit(CODE_DB);
ir_doit(CODE_CHAN_2);
});
$("#bs1").click(function() {
ir_doit(CODE_BS);
ir_doit(CODE_CHAN_1);
});
$("#bsp").click(function() {
ir_doit(CODE_BS);
ir_doit(CODE_CHAN_3);
});
$("#chan_up").click(function() {
ir_doit(CODE_CHAN_UP);
});
$("#chan_down").click(function() {
ir_doit(CODE_CHAN_DOWN);
});
$("#vol_up").click(function() {
ir_doit(CODE_VOL_UP);
});
$("#vol_down").click(function() {
ir_doit(CODE_VOL_DOWN);
});
$("#subtitle").click(function() {
ir_doit(CODE_SUBTITLE);
});
});
