「P.O.V.パターンエディタ」の編集履歴（バックアップ）一覧はこちら
P.O.V.パターンエディタ - (2010/05/29 (土) 19:07:07) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
*P.O.V.パターンエディタ（ブラウザでパターンを作ろう！）
[更新履歴]
・2010/05/24 終点目印を追加。後ろの余分な0b00000000を削除。,を打ち忘れていたので追加。スケッチからの反映を追加。UNDOを追加。
・2010/05/24 公開
**ドットパターンをマウスでクリックして配置するだけでP.O.V.用データを作れるツールです。
・スケッチ(ArduinoIDE)にパターンを反映させる場合 ： 「スケッチ作成」ボタンを押して表示された内容（※１)をスケッチ(ArduinoIDE)にコピペしてください。
・スケッチ(ArduinoIDE)からパターンを持ってくる場合 ： スケッチ(ArduinoIDE)から※１にコピペして「スケッチから反映」ボタンを押してください。
#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 = 72;
var sizey = 7;
var undobuf = new Array(sizex*sizey);
// 初期化
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 += '<td style="background-color: #eee;"> ← 使用する色を選んでください。赤色を置けばLED点灯で白色だと消灯です。</td>'
s += '</tr>';
$('#palette').html(s);
$('#palette td').each(function(i) { $(this).data('color', pals[i]); });
// キャンバスの変更
$('#canvas td').mousedown(function() {
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
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() {
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
$('#canvas td').css('backgroundColor', color).data('color', color);
});
// スケッチ反映
$('#sketch').click(function() {
var bit = new Array(sizex*sizey);
var no,count;
var code = '';
var last = 0;
var bitptn;
$('#canvas td').each(function(i) {
bit[i] = checkColor($(this).data('color'));
});
//終端位置を探します。
for( count=0 ; count<sizex ; count++ ) {
bitptn = '';
for( no=0 ; no<sizey ; no++ ) {
bitptn += bit[no*sizex+count];
}
if( bitptn != '0000000' ) {
last = count;
}
}
//終端までデータを出力
for( count=0 ; count<sizex ; count++ ) {
//終端なら終了。
if( last < count ) {
break;
}
code += '\t0b0';
for( no=sizey-1 ; no>=0 ; no-- ) {
code += bit[no*sizex+count];
}
code += ',\n';
}
code += '\t0b10000000 //終端';
$('#code').val(code);
});
// ON/OFF判定
function checkColor(hex) {
if( hex == '#fff' ) {
return '0';
} else {
return '1';
}
}
// スケッチから取得
$('#getsketch').click(function() {
var newcode = $('#code').val();//スケッチを得る。
var line = newcode.split("\n");
var out = "";
var bit = new Array(sizex*sizey);
// 分割データを処理
for (var i = 0; i < sizex; i ++) {
if( i < line.length ) {
//加工して余分な文字をなくす。
line[i] = line[i].replace(",","");
line[i] = line[i].replace("\t","");
// パターンを認識して必要なデータだけ取り出す。
var index = line[i].indexOf("0b");
if( -1 != index ) {
if( -1 == line[i].indexOf("0b10000000") ) {
var data = line[i].substr(index+3);
// ドットパターンを得る。
for( no=sizey-1 ; no>=0 ; no-- ) {
bit[no*sizex+i] = data.substr(sizey-no-1,1);
}
}
}
}
}
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
// キャンバスに反映
$('#canvas td').each(function(i) {
if( bit[i] == '1' ) {
$(this).css('backgroundColor', pals[0]).data('color', pals[0]);
} else {
$(this).css('backgroundColor', pals[1]).data('color', pals[1]);
}
});
});
// UNDO処理
$('#undo').click(function() {
$('#canvas td').each(function(i) {
if( undobuf[i] == '1' ) {
$(this).css('backgroundColor', pals[0]).data('color', pals[0]);
} else {
$(this).css('backgroundColor', pals[1]).data('color', pals[1]);
}
});
});
});
// ここまでパターンエディタ
</script>
}}
#html2(){{{{{{
[P.O.V.のパターン] 左クリックでパターン(色)を配置します。 ※javascriptが無効だと利用できません。
<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="スケッチ作成" />
<input id="getsketch" type="button" value="スケッチから反映" />
<input id="undo" type="button" value="ひと世代前に戻す(UNDO)" />
<p>
※１ [スケッチ(ArduinoIDE)のデータ]<br>
<textarea rows="20" cols="40" id="code"></textarea><br />
</p>
}}}}}}
***アニメーションパターンのエディトはこちらをどうぞ。 作者は野村政行氏。 http://diary.a3size.com/
http://diary.a3size.com/files/povEdit.swf
編集画面のイメージ
#image(t_povanim.jpg)
バグ等ありましたら報告と、よろしかったらリクエストやコメントお願いします。
#comment
----
このページの訪問者総数 ：&counter()
本日の訪問者：&counter(today)
昨日の訪問者：&counter(yesterday)
&br();
*P.O.V.パターンエディタ（ブラウザでパターンを作ろう！）
[更新履歴]
・2010/05/24 終点目印を追加。後ろの余分な0b00000000を削除。,を打ち忘れていたので追加。スケッチからの反映を追加。UNDOを追加。
・2010/05/24 公開
**ドットパターンをマウスでクリックして配置するだけでP.O.V.用データを作れるツールです。
・スケッチ(ArduinoIDE)にパターンを反映させる場合 ： 「スケッチ作成」ボタンを押して表示された内容（※１)をスケッチ(ArduinoIDE)にコピペしてください。
・スケッチ(ArduinoIDE)からパターンを持ってくる場合 ： スケッチ(ArduinoIDE)から※１にコピペして「スケッチから反映」ボタンを押してください。
#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 = 72;
var sizey = 7;
var undobuf = new Array(sizex*sizey);
// 初期化
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 += '<td style="background-color: #eee;"> ← 使用する色を選んでください。赤色を置けばLED点灯で白色だと消灯です。</td>'
s += '</tr>';
$('#palette').html(s);
$('#palette td').each(function(i) { $(this).data('color', pals[i]); });
// キャンバスの変更
$('#canvas td').mousedown(function() {
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
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() {
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
$('#canvas td').css('backgroundColor', color).data('color', color);
});
// スケッチ反映
$('#sketch').click(function() {
var bit = new Array(sizex*sizey);
var no,count;
var code = '';
var last = 0;
var bitptn;
$('#canvas td').each(function(i) {
bit[i] = checkColor($(this).data('color'));
});
//終端位置を探します。
for( count=0 ; count<sizex ; count++ ) {
bitptn = '';
for( no=0 ; no<sizey ; no++ ) {
bitptn += bit[no*sizex+count];
}
if( bitptn != '0000000' ) {
last = count;
}
}
//終端までデータを出力
for( count=0 ; count<sizex ; count++ ) {
//終端なら終了。
if( last < count ) {
break;
}
code += '\t0b0';
for( no=sizey-1 ; no>=0 ; no-- ) {
code += bit[no*sizex+count];
}
code += ',\n';
}
code += '\t0b10000000 //終端';
$('#code').val(code);
});
// ON/OFF判定
function checkColor(hex) {
if( hex == '#fff' ) {
return '0';
} else {
return '1';
}
}
// スケッチから取得
$('#getsketch').click(function() {
var newcode = $('#code').val();//スケッチを得る。
var line = newcode.split("\n");
var out = "";
var bit = new Array(sizex*sizey);
// 分割データを処理
for (var i = 0; i < sizex; i ++) {
if( i < line.length ) {
//加工して余分な文字をなくす。
line[i] = line[i].replace(",","");
line[i] = line[i].replace("\t","");
// パターンを認識して必要なデータだけ取り出す。
var index = line[i].indexOf("0b");
if( -1 != index ) {
if( -1 == line[i].indexOf("0b10000000") ) {
var data = line[i].substr(index+3);
// ドットパターンを得る。
for( no=sizey-1 ; no>=0 ; no-- ) {
bit[no*sizex+i] = data.substr(sizey-no-1,1);
}
}
}
}
}
// UNDO用の保存
$('#canvas td').each(function(i) {
undobuf[i] = checkColor($(this).data('color'));
});
// キャンバスに反映
$('#canvas td').each(function(i) {
if( bit[i] == '1' ) {
$(this).css('backgroundColor', pals[0]).data('color', pals[0]);
} else {
$(this).css('backgroundColor', pals[1]).data('color', pals[1]);
}
});
});
// UNDO処理
$('#undo').click(function() {
$('#canvas td').each(function(i) {
if( undobuf[i] == '1' ) {
$(this).css('backgroundColor', pals[0]).data('color', pals[0]);
} else {
$(this).css('backgroundColor', pals[1]).data('color', pals[1]);
}
});
});
});
// ここまでパターンエディタ
</script>
}}
#html2(){{{{{{
[P.O.V.のパターン] 左クリックでパターン(色)を配置します。 ※javascriptが無効だと利用できません。
<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="スケッチ作成" />
<input id="getsketch" type="button" value="スケッチから反映" />
<input id="undo" type="button" value="ひと世代前に戻す(UNDO)" />
<p>
※１ [スケッチ(ArduinoIDE)のデータ]<br>
<textarea rows="20" cols="40" id="code"></textarea><br />
</p>
}}}}}}
***アニメーションパターンのエディトはこちらをどうぞ。 作者は野村政行氏。 http://diary.a3size.com/
連続したアニメーションのパターンが編集出来ます。
http://diary.a3size.com/files/povEdit.swf
編集画面のイメージ
#image(t_povanim.jpg)
バグ等ありましたら報告と、よろしかったらリクエストやコメントお願いします。
#comment
----
このページの訪問者総数 ：&counter()
本日の訪問者：&counter(today)
昨日の訪問者：&counter(yesterday)
&br();
