konashi開発用テンプレートつくりました

konashiをつかった開発のときにいつも実装している機能を実装したテンプレート的につかえるコードを書いてみました。

Fボタン で konashi の find。
Dボタンで 接続している konashi を disconnect。
Bボタンで konashi のバッテリー確認。
Sボランで konashi の電波強度を確認できます。

また、

trace(hoge);

と、traceの引数に値を渡すことで、ページ下部のコンソールスペースにログを表示することもできるのでデバッグもらくらくです。オブジェクトを渡すと展開してくれる機能もあります。
konashiをつかったモック制作の際などでご活用いただけると幸いです。

JavaScript

(function(win, doc) {
    
    "use strict";

    var trace = doc.createElement("div"),
        inner = doc.createElement("div"),
        traceStyle = [
            "display: block;",
            "position: fixed;",
            "bottom: 0;",
            "left: 0;",
            "border: none;",
            "width: 100%;",
            "height: 100px;",
            "color: #fff;",
            "font-size: 10px;",
            "background: rgba(0, 0, 0, .5);",
            "overflow: scroll;",
            "z-index: 9999;",
            "-webkit-overflow-scrolling: touch;"
        ].join(""),
        innerStyle = [
            "padding: 5px;"
        ].join(""),
        _setText = function() {};
    
    _init();
    
    function _init() {
        _setText = _buildSetText();
        trace.id = "trace";
        trace.style.cssText = traceStyle;
        inner.id = "trace-inner";
        inner.style.cssText = innerStyle;
        
        trace.appendChild(inner);
        doc.body.appendChild(trace);
    }
    
    function _buildSetText() {
        var dummy = doc.createElement("p");

        if (typeof dummy.innerText !== "string") {
            return function(elm, txt) {
                elm.textContent = txt;
            };
        }
        
        return function(elm, txt) {
            elm.innerText = txt;
        };
    }
    
    function log(txt) {
        var p = doc.createElement("p");
        
        p.style.margin = 0;
        
        _setText(p, txt);
        
        inner.appendChild(p);
        trace.scrollTop = trace.scrollHeight;
    }
    
    function dir(obj, opt_parent) {
        var parents = opt_parent ? opt_parent + "." : "",
            keys, length, i;

        if (typeof obj === "object") {
            keys = Object.keys(obj);
            length = keys.length;

            if (length) {
            
                for (i = 0; i < length; i++) {
                    if (typeof obj[keys[i]] === "object") {
                        dir(obj[keys[i]], parents + keys[i]);
                    } else {
                        log(parents + keys[i] + ": " + obj[keys[i]]);
                    }
                }
            } else {
                log(parents + {});
            }
        } else {
            log(parents + obj);
        }
    }
    
    win.trace = dir;

})(this, document);

(function(win, doc) {

    "use strict";
    
    var script = doc.createElement("script");
    
    script.onload = main;
    script.setAttribute("src", "http://konashi.ux-xu.com/kjs/konashi-bridge.min.js");
    document.body.appendChild(script);
    
    function main() {
        var btnFind       = doc.getElementById("btnFind"),
            btnDisconnect = doc.getElementById("btnDisconnect"),
            btnBattery    = doc.getElementById("btnBattery"),
            btnSignal     = doc.getElementById("btnSignal");

        btnFind.addEventListener("click", k.find.bind(k), false);
        btnDisconnect.addEventListener("click", k.disconnect.bind(k), false);            
        btnBattery.addEventListener("click", k.batteryLevelReadRequest.bind(k), false);
        btnSignal.addEventListener("click", k.signalStrengthReadRequest.bind(k), false);
        
        k.ready(_handleReady);
        k.disconnected(_handleDisconnected);
        k.updateBatteryLevel(_handleUpdateBatteryLevel);
        k.updateSignalStrength(_handleUpdateSignalStrength);
        
        function _handleReady() {
            btnFind.classList.add("push");
            btnDisconnect.classList.remove("push");
            btnBattery.classList.remove("push");
            btnSignal.classList.remove("push");
            trace("READY");
        }
        
        function _handleDisconnected() {
            btnFind.classList.remove("push");
            btnDisconnect.classList.add("push");
            trace("DISCONNECT");
        }
        
        function _handleUpdateBatteryLevel(evt) {
            trace(evt);
        }
        
        function _handleUpdateSignalStrength(evt) {
            trace(evt);
        }
    }
    
    (function settingButtonState(btns) {
    
        [].forEach.call(btns, _setup);
        
        function _setup(btn) {
            btn.addEventListener("touchstart", _handleTouchStart, false);
            btn.addEventListener("touchend",   _handleTouchEnd,   false);
        }
        
        function _handleTouchStart() {
            this.classList.add("push");
        }
        
        function _handleTouchEnd() {
            this.classList.remove("push");
        }
        
    })(doc.querySelectorAll(".btn"));
    
})(this, document);

DEMO