jscam.jsのソースコード「ユーティリティ」

説明

　「crocro.jscam」は、クロノス・クラウンの柳井政和が開発しているJavaScirptのライブラリです。「crocro.jscam」を使うと、JavaScriptからWebカメラを扱うことができます。また、簡単な図形認識などを行えます。

　このページでは、この「crocro.jscam」のコアになる「jscam.js」（ver 1.1.0）のソースコードのうち、「ユーティリティ」に相当する部分を掲載します。

ソースコード

以下、ソースコードです。

//== ユーティリティ
crocro.jscam.util = function() {};


    /**
     *  @variable   crocro.jscam.util.swapXY(w, h, arg)
     *  @title  配列のXY交換
     *  @description
     *
     *      配列の縦横を入れ替えます。プログラムを見やすく書くために利用します。
     *
     *  @param  w       配列の横幅。
     *  @param  h       配列の高さ。
     *  @param  arg     二次元配列。
     *  @return 縦横を入れ替えた配列。
     */
//== 配列のXY交換
crocro.jscam.util.swapXY = function(w, h, arg) {
    var x, y;
    var xArr = new Array(w);
    for (x = 0; x < w; x ++) {
        var yArr = new Array(y);
        for (y = 0; y < h; y ++) yArr[y] = arg[y][x];
        xArr[x] = yArr;
    }
    return xArr;
};


    /**
     *  @variable   crocro.jscam.util.makeMarker(id, arr, pxSz, isEdit, evtOnClick)
     *  @title  マーカーの作成
     *  @description
     *
     *      配列を指定して、「table」タグでできたマーカーを作成します。
     *      isEditにtrueを指定することで、クリックで編集可能になります。
     *      また、evtOnClickを指定することで、クリック時のコールバック処理を指定できます。
     *
     *  @param  id      マーカーを作成するDOM要素のID。
     *  @param  arr     マーカーを表現する01の二次元配列。
     *  @param  pxSz    1セルあたりのドット数。
     *  @param  isEdit  trueなら編集可能、falseなら編集不能。
     *  @param  evtOnClick  isEditがtrueの場合に動作。クリック時のコールバック処理をfunctionオブジェクトで指定する。
     *                  このfunctionオブジェクトは「function(x, y, prm)」としてXY座標と変更後の値を受け取れる。
     */
//== マーカーの作成
crocro.jscam.util.makeMarker = function(id, arr, pxSz, isEdit, evtOnClick) {
    var sz = arr.length;
    var tbl = document.createElement("table");
    tbl.id = id + 'Tbl';
    tbl.setAttribute("border", 0);
    tbl.setAttribute("cellspacing", 0);
    tbl.setAttribute("cellpadding", 0);

    for (var y = 0; y < sz; y ++) {
        var tr = document.createElement("tr");
        for (var x = 0; x < sz; x ++) {
            var col = arr[x][y] == 1 ? 'black' : 'white';
            var celId = id + 'Tbl_' + x + '_' + y;

            var td = document.createElement("td");
            tr.appendChild(td);
            var div = document.createElement("div");
            td.appendChild(div);

            div.style.width = pxSz + 'px';
            div.style.height = pxSz + 'px';
            div.style.background = col;
            div.style.overflow = 'hidden';
            div.style.color = col;
            div.id = celId;
            if (isEdit) {
                div.addEventListener("click", (function(x, y){
                    return function() {
                        var prm = 1 - this.innerHTML * 1;
                        this.innerHTML = prm;
                        this.style.background = this.style.color = prm ? 'black' : 'white';
                        if (typeof evtOnClick == 'function') evtOnClick(x, y, prm);
                    };
                })(x, y));
            }
            div.innerHTML = arr[x][y];
        }
        tbl.appendChild(tr);
    }
    document.getElementById(id).appendChild(tbl);
};


    /**
     *  @variable   crocro.jscam.util.makeDots(id, arr, pxSz, isEdit, evtOnClick)
     *  @title  ドット・パターンの作成
     *  @description
     *
     *      配列を指定して、「table」タグでできたドット・パターンを作成します。
     *      isEditにtrueを指定することで、クリックで編集可能になります。
     *      また、evtOnClickを指定することで、クリック時のコールバック処理を指定できます。
     *
     *  @param  id      ドット・パターンを作成するDOM要素のID。
     *  @param  arr     ドット・パターンを表現する01の二次元配列。
     *  @param  pxSz    1セルあたりのドット数。
     *  @param  isEdit  trueなら編集可能、falseなら編集不能。
     *  @param  evtOnClick  isEditがtrueの場合に動作。クリック時のコールバック処理をfunctionオブジェクトで指定する。
     *                  このfunctionオブジェクトは「function(x, y, prm)」としてXY座標と変更後の値を受け取れる。
     */
//== ドット・パターンの作成
crocro.jscam.util.makeDots = function(id, arr, cellSz, isEdit, evtOnClick) {
    var sz = arr.length;
    var tbl = document.createElement("table");
    tbl.id = id + 'Tbl';
    tbl.setAttribute("border", 0);
    tbl.setAttribute("cellspacing", 0);
    tbl.setAttribute("cellpadding", 0);

    var cellSzBig = parseInt(cellSz * 0.8);
    var cellSzSml = parseInt(cellSz * 0.35);

    for (var y = 0; y < sz; y ++) {
        var tr = document.createElement("tr");
        for (var x = 0; x < sz; x ++) {
            var thisCellSz = arr[x][y] == 1 ? cellSzBig : cellSzSml;
            var celId = id + 'Tbl_' + x + '_' + y;

            var td = document.createElement("td");
            td.setAttribute("align", "center");
            td.setAttribute("valign", "middle");
            td.style.background = "white";
            td.style.width = cellSz + 'px';
            td.style.height = cellSz + 'px';
            tr.appendChild(td);
            var div = document.createElement("div");
            td.appendChild(div);

            div.style.width = thisCellSz + 'px';
            div.style.height = thisCellSz + 'px';
            div.style.background = "black";
            div.style.overflow = 'hidden';
            div.style.color = "black";
            div.id = celId;
            if (isEdit) {
                div.addEventListener("click", (function(x, y){
                    return function() {
                        var prm = 1 - this.innerHTML * 1;
                        this.innerHTML = prm;

                        var thisCellSz = prm == 1 ? cellSzBig : cellSzSml;
                        this.style.width = thisCellSz + 'px';
                        this.style.height = thisCellSz + 'px';

                        if (typeof evtOnClick == 'function') evtOnClick(x, y, prm);
                    };
                })(x, y));
            }
            div.innerHTML = arr[x][y];
        }
        tbl.appendChild(tr);
    }
    document.getElementById(id).appendChild(tbl);
};