「P.O.V.パターンエディタ」の編集履歴（バックアップ）一覧はこちら
P.O.V.パターンエディタ - (2010/05/24 (月) 01:19:45) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
*P.O.V.パターンエディタ（ブラウザでパターンを作ろう！）
ドットパターンをマウスで配置するだけでスケッチデータを作れるツールです。
javascriptを有効にしてお使いください。赤色を置けばLED点灯で白色だと消灯です。
#javascript(){{
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
}}
#javascript(){{
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
}}
#javascript(){{
<script type="text/javascript">
$(function() {
var pals = ['e00', 'fff'];
var pushed = false;
var color = '';
var sizex = 52;
var sizey = 7;
var s = '';
for (var y = 0; y < sizey; y++) {
s += '<tr>';
for (var x = 0; x < sizex; x++) {
s += '<td style="background-color: #ffffff; border: 1px solid gray; width: 12px; line-height: 12px; cursor: pointer;"> </td>';
}
s += '</tr>';
}
$('#canvas').html(s);
$('#canvas td').data('color', '#fff');
s = '<tr>';
for (var x = 0; x < 2; x++) {
s += '<td style="background-color: #' + pals[x] + '; border: 1px solid gray; width: 12px; line-height: 12px; cursor: pointer;border-width: 2px;"> </td>';
}
s += '</tr>';
$('#palette').html(s);
$('#palette td').each(function(i) { $(this).data('color', '#' + pals[i]); });
$('#canvas td').mousedown(function() {
pushed = true;
$(this).css('backgroundColor', color).data('color', color);
return false;
}).mousemove(function() {
if (pushed) {
$(this).css('backgroundColor', color).data('color', color);
}
return false;
});
$().mouseup(function() {
pushed = false;
});
$('#palette td').click(function() {
$(this).css('borderColor', 'Blue').siblings().css('borderColor', 'Silver');
color = $(this).data('color');
}).eq(0).click();
$('#fill').click(function() {
$('#canvas td').css('backgroundColor', color).data('color', color);
});
$('#sketch').click(function() {
var bit = new Array(sizex*sizey);
var no,count;
var code = '';
$('#canvas td').each(function(i) {
bit[i] = checkColor($(this).data('color'));
});
for( count=0 ; count<sizex ; count++ ) {
code += '\t0b0';
for( no=sizey-1 ; no>=0 ; no-- ) {
code += bit[no*sizex+count];
}
code += '\n';
}
$('#code').val(code);
});
function checkColor(hex) {
if( hex == '#fff' ) {
return '0';
} else {
return '1';
}
}
$('#getsketch').click(function() {
// $('#code');
// ($this);
// }
});
});
</script>
}}
#html2(){{{{{{
<table id="canvas" style="border-collapse: collapse; margin-bottom: 12px;"></table>
<table id="palette" style="border-collapse: collapse; margin-bottom: 12px;"></table>
<input id="fill" type="button" value="塗り潰し" />
<input id="sketch" type="button" value="スケッチ作成" />
<p>
[スケッチ]<br>
<textarea rows="20" cols="40" id="code"></textarea><br />
スケッチにパターンを反映させる場合。「スケッチ作成」ボタンを押してスケッチにコピペしてください。<br>
}}}}}}
リクエストやコメントお願いします。
#comment
&br();
*P.O.V.パターンエディタ（ブラウザでパターンを作ろう！）
ドットパターンをマウスでエディットするだけでスケッチデータを作れるツールです。
javascriptを有効にしてお使いください。赤色を置けばLED点灯で白色だと消灯です。
・スケッチにパターンを反映させる場合。「スケッチ作成」ボタンを押してスケッチにコピペしてください。
#javascript(){{
<script type="text/javascript" src="http://www.google.com/jsapi">
</script>
}}
#javascript(){{
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
}}
#javascript(){{
<script type="text/javascript">
$(function() {
var pals = ['e00', 'fff'];
var pushed = false;
var color = '';
var sizex = 52;
var sizey = 7;
var s = '';
for (var y = 0; y < sizey; y++) {
s += '<tr>';
for (var x = 0; x < sizex; x++) {
s += '<td style="background-color: #ffffff; border: 1px solid gray; width: 12px; line-height: 12px; cursor: pointer;"> </td>';
}
s += '</tr>';
}
$('#canvas').html(s);
$('#canvas td').data('color', '#fff');
s = '<tr>';
for (var x = 0; x < 2; x++) {
s += '<td style="background-color: #' + pals[x] + '; border: 1px solid gray; width: 12px; line-height: 12px; cursor: pointer;border-width: 2px;"> </td>';
}
s += '</tr>';
$('#palette').html(s);
$('#palette td').each(function(i) { $(this).data('color', '#' + pals[i]); });
$('#canvas td').mousedown(function() {
pushed = true;
$(this).css('backgroundColor', color).data('color', color);
return false;
}).mousemove(function() {
if (pushed) {
$(this).css('backgroundColor', color).data('color', color);
}
return false;
});
$().mouseup(function() {
pushed = false;
});
$('#palette td').click(function() {
$(this).css('borderColor', 'Blue').siblings().css('borderColor', 'Silver');
color = $(this).data('color');
}).eq(0).click();
$('#fill').click(function() {
$('#canvas td').css('backgroundColor', color).data('color', color);
});
$('#sketch').click(function() {
var bit = new Array(sizex*sizey);
var no,count;
var code = '';
$('#canvas td').each(function(i) {
bit[i] = checkColor($(this).data('color'));
});
for( count=0 ; count<sizex ; count++ ) {
code += '\t0b0';
for( no=sizey-1 ; no>=0 ; no-- ) {
code += bit[no*sizex+count];
}
code += '\n';
}
$('#code').val(code);
});
function checkColor(hex) {
if( hex == '#fff' ) {
return '0';
} else {
return '1';
}
}
$('#getsketch').click(function() {
// $('#code');
// ($this);
// }
});
});
</script>
}}
#html2(){{{{{{
<table id="canvas" style="border-collapse: collapse; margin-bottom: 12px;"></table>
<table id="palette" style="border-collapse: collapse; margin-bottom: 12px;"></table>
<input id="fill" type="button" value="塗り潰し" />
<input id="sketch" type="button" value="スケッチ作成" />
<p>
[スケッチ]<br>
<textarea rows="20" cols="40" id="code"></textarea><br />
}}}}}}
リクエストやコメントお願いします。
#comment
&br();
