読者です 読者をやめる 読者になる 読者になる

into the void

ソフトウェアに関する雑多な調査日記

IRKitとHTML(jquery + bootstrap)でカスタムテレビリモコンを作ってみる(その弐)

今日はUI。bootstrapでデザインしてみる。

bootstrapのインストール

下記のページからダウンロードして、css、js、fontのフォルダを/var/www/nas/irkitの下に入れておく。
http://getbootstrap.com
使い方はいろいろなページを参照した。

bootstrapでボタンを作って配置

TVのリモコンように最低限必要なボタンを作ってみた。
電源ON/OFF、地デジ/BS切り替え、チャンネル切り替え、音量調整、あとよく使うチャンネルだけはショートカットボタン。例えば、BS1の場合は通常BSに切り替えてからチャンネル1を押す必要があるが、その2手順をワンボタンで実行できるようにした。普通のリモコンより多少便利。

こっちが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">BS </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);
    });

 
});