jinkoさんＳＬ日記

■SLColor Convert Tool

LSLコード：
    vector rgb = <110,120,255>;
    llSetColor(rgb / 255, ALL_SIDES);

<script type="text/javascript">
//SLカラー変換 Oct 02, 2008 by Jinko Spitteler
//Ref: http://karafuto50.blog117.fc2.com/blog-entry-80.html
//Ref: http://tech.ocit.jp/?eid=703844
/* ＳＬカラー変換 */
function SLColor() {
    var str = document.getElementById('frmColor').col.value;
    if (! str.match(/#*(([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2}))/i)) {
        document.getElementById('SLcolor').innerHTML = "16進カラーを入力してね♪";
        return;
    }
    var str = RegExp.$1;/* #は使わない */
    var out = "";
    for (var i = 0; i < 3; i++) {
        if ( out != "" ) out += ", ";
        out += (parseInt(RegExp['$' + (i + 2)], 16) / 255).toFixed(3);
    }
    document.getElementById('sample').innerHTML = "■";
    document.getElementById('sample').style.color = "#" + str ;
    document.getElementById('SLcolor').innerHTML = "<" + out + ">";
}

/* カラーチャート*/
function drawColorChart() {
    var out = document.getElementById('col');
    var canvas = document.getElementById('pallete');

    /* エラーチェック */
    if (!canvas.getContext) {
        document.getElementById('charterror').innerHTML = "※お使いのブラウザではチャートは表示されません<br />直接入力してください";
        return;
    }    
    /* カラーチャートを作成 */
    var context = canvas.getContext('2d');
    var sz = 10;
    for ( var r = 0; r < 6; r++) {
        for ( var g = 0; g < 6; g++) {
            for ( var b = 0; b < 6; b++) {
                context.fillStyle = 'rgb(' + r * 51 + ',' + g * 51 + ',' + b * 51 + ')';
                context.fillRect(r * sz * 6 + g * sz, b * sz, sz, sz);
            }
        }
    }
    
    /* マウスムーブイベント */
    canvas.addEventListener('mousemove',
        function(e) {
            var cofs = getElementPosition(canvas);/* カンバスの位置を取得 */
            var pos = {x:e.pageX - cofs.left, y:e.pageY - cofs.top};/*ie未対応*/
            var colorCode = Math.floor( pos.x / sz / 6 ) * 51 * 65536
                         + Math.floor( pos.x % (sz * 6) / sz ) * 51 * 256
                         + Math.floor( pos.y / sz ) * 51;
            colorCode = colorCode.toString( 16 );
            colorCode = '#' + '000000'.substring( colorCode.length, 6) + colorCode;
            out.value = colorCode;
            e.stopPropagation();
        }
    , false);

    /* マウスアップイベント */
    canvas.addEventListener('mouseup', SLColor, false);

}

/* 要素の位置（座標）を取得 */
/* Ref: http://tech.ocit.jp/?eid=703844 */
var msg="";
function getElementPosition(element) {
    var offsetTrail = (typeof element == 'string') ? document.getElementById(element) : element;
    var offsetLeft = 0;
    var offsetTop = 0;

    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }

    if ( typeof document.body.leftMargin != "undefined") {
        offsetLeft += document.body.leftMargin;
        offsetTop += document.body.topMargin;
    }

    return ({left: offsetLeft, top: offsetTop});
}
</script>


<div style="border:solid 1px #333; padding:5px;background:#fff;width:480px;"><h2 style="font:bold 16px Helvetica,sans-serif">■SLColor Convert Tool</h2><div style="padding-bottom:5px;">１６進ＲＧＢカラーをSLColorに変換します</div>

    <div style="width:480px;"><form id="frmColor" onsubmit="SLColor();return false;">
        
        <div style="width:460px;padding:10px;border-bottom:solid 1px #333;">
            <div style="width:100px;float:left;">１６進カラー：</div>
            <div style="width:360px;float:right;"><input type="text" id="col"><input type="submit" value="変換" /></div>
            <br style="clear:both;" />
        </div>
        <div style="width:460px;padding:10px;border-bottom:solid 1px #333;">
            <div style="width:100px;float:left;">変換結果:</div>
            <div style="width:360px;float:right;font:bold 16px verdana;"><span id="sample">□</span><span id="SLcolor"></span></div>
            <br style="clear:both;" />
        </div>
        <div style="width:460px;padding:10px;">
            <div style="width:100px;float:left;">カラーチャート:</div>
            <div style="width:360px;float:right;"><canvas id="pallete" width="360" height="60"></canvas><div id="charterror" style="color:#700;font-size:9px;"> </div></div>
            <br style="clear:both;" />
        </div>
    </form></div>
</div>
<div id="debug">
</div>
<script type="text/javascript">drawColorChart();</script>