IRKitの即興Webアプリ

できたwebアプリ

気に入ってるのでアホみたいにでかくはろ f:id:Naporitan:20180912050510j:plain

IRKitって何？

IRKit: オープンソースなクラウドリモコンです.中身は確かESP8266で赤外線の送受信ができます.
curlでぽちぽち書くだけですぐ赤外線を送受信できるのでやってる感でていい・・・・・

curlを変換してくれるサイトがありました！！！

昔IRKit買いたての頃post,getが全くわからないけど動かしてみたいってことでここで変換してwebサイトを駆け巡りコピペしてたのを思い出しました
Convert curl syntax to Python, Node.js, PHP, Rここです.まじで神サイトだと思ってます
pythonをよく使うのですがrequestsのget,postメソッドがどうもうまくいかないなぁ・・・・って時に変換して確かめたりしました(それに何の意味があるんだって話ですが)
まぁ動けばきぶんがいいんでいいんです！

作ったコード

HTMLの方

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>IRKit</title>
  <style>
    select {
      font-size:16px;
    }
    #set{
      width: 50px; 
      height: 30px;
    }
    #send{
      width: 50px; 
      height: 30px;
    }
    #savebtn{
      width: 50px; 
      height: 30px;
    }
  </style>
</head>

<body>
    <label for="mode">Request method</label><br>
    <select id="mode" name="mode">
      <option value="get">GET</option>
      <option value="post">POST</option>
    </select><br>

    <select id="ir" name="ir">
        <option>-</option>
    </select>
    <input type="submit" value="SET" id="set"><br>

    <label id="message">Message</label><br>
    <textarea id="msg" ></textarea><br>

    <label for="response">Response</label><br>
    <textarea id="res" cols="40" rows="5"></textarea><br>
    <input type="submit" name="btn" id="send"><br><br>
    
    <div>
      <label for="save">save</label>
      <input type="text"  id ="save">
      <input type="submit"  id="savebtn">
    </div>
</body>

</html>

<script src="modules/jquery-3.3.1.min.js"></script>
<script src="modules/irkit.js"></script>

これと

<select id="ir" name="ir">
    <option>-</option>
</select>

これ

<div>
      <label for="save">save</label>
      <input type="text"  id ="save">
      <input type="submit"  id="savebtn">
    </div>

こいつらは自前でpythonで作ったWebAPI(あれはAPIって呼んでいい代物なのだろうか・・・・自分はAPIだと思いたいのでAPIって言い張ります)
から今までの赤外線データを取ってきたり,新規の赤外線データを保存できます

削除はweb側でできないんですけどね！！！！！そのうち削除もします

JavaScriptの方

val_list = [];

$(function () {
    get_keys();
 });

$('#send').click(function () {
    var url = "https://api.getirkit.com/1/messages";
    var clientKey = "クライアントキー"
    var deviceId = "デバイスキー";

    if ($('#mode').val() == "get") {
        $('#msg').val("Wait...");
        $.ajax({
            type: "get",
            url: url,
            data: {
                clientkey: clientKey,
                deviceid: deviceId
            },
            timeout: 5000
        }).done(function (json) {
            $('#msg').val("OK");
            $('#res').val(JSON.stringify(json["message"]));
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            $('#msg').val(textStatus);
        });
    } else {
        $.ajax({
            type: "post",
            url: url,
            data: {
                clientkey: clientKey,
                deviceid: deviceId,
                message: $('#res').val()
            },
            timeout: 5000
        }).done(function (json) {
            $('#msg').val("OK");
        }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
            $('#msg').val(textStatus);
        });
    }
});

$('#savebtn').click(function () {
    var ir_name = $('#save').val();
    var ir_val = $('#res').val();
    if (ir_name.length <= 0 || ir_val.length <= 0) {
        $('#msg').val("error");
        return;
    }

    $.ajax({
        type: "post",
        url: "自作APIのアドレス",
        data: {
            ir_name: ir_name,
            ir_val: ir_val
        },
        timeout: 1000
    }).done(function (json) {
        $('#ir').empty();
        get_keys();
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        $('#msg').val(textStatus);
    });
});

$('#set').click(function(){
    var res = val_list[$('#ir').val()]
    $('#res').val(res);
    $('#mode').val("post");
});

$(function () {
   get_keys();
});

function get_keys(){
    $.ajax({
        type: "get",
        url: "自作APIのアドレス",
        timeout: 1000
    }).done(function (json) {
        $('#ir').empty();
        $('#ir').append("<option>-</option>");
        var key_list = json["keys"];
        val_list = json["vals"];
        for(var i=0;i<key_list.length;i++) {
            $('#ir').append("<option value="+i+">"+key_list[i]+"</option>");
        }
    }).fail(function (XMLHttpRequest, textStatus, errorThrown) {
        alert("今までの赤外線ファイルが読み込めませんでした");
    });
}

なんかJavaScriptのほうが色がつかない・・・・・
でも普通に動いてるのでいいです

最後に

なんだかんだ言って結構気に入ってます
pythonの方も削除できるようになったら載せるかもしれません

なぽろぐ

気ままに感じたことを記事にまとめます。

今更IRKitの即興Webアプリを作った