トップページ | 2012年3月 »

2012年2月

2012年2月26日 (日)

球の移動 -3-

Flash 版 FlatTable はPC用とガラケー用は有りますが、スマートフォンには対応していません。Flash に対応したスマートフォンなら、FlatTable を表示することは出来ますが、ユーザー・インターフェースの関係で、FlatTable を使うのは困難です。それに、Adobe はスマートフォンの Flash は提供しないことになったので、Flash 版でFlatTable をスマートフォンに対応させる意味も無くなりました。それで、 FlatTable を SVG+JavaScript へ移植することは、スマートフォンへの対応が目的の1つとなっています。

FlatTable をPCで使用する場合、マウスポインターを球に乗せてドラッグすることが出来ますが、スマートフォンでは、指でドラッグするため、球が指に隠れて見えないことになります。そこで、SVG+JavaScript 版では、その解決策として、球から離れた所に指を置いて操作できるようにしました。

具体的には次のようになります。

  1. 移動したい球をクリックすると台を覆うように仮想のマウスパッド exPad が現れ、移動モードに入ります。
  2. その exPad の上でマウスボタンを押したままマウスを動かすと、それに同調して球が移動します。
  3. 短クッションの木枠をクリックすると、exPad が消去され移動モードが終了します。

exPad の出現は、次のコードで行います。

exPad = document.createElementNS(svgns, "rect"); ~ 幾つかの属性の設定 flattable.appendChild(exPad);

また、exPad の消去は次のコードで行います。

flattable.removeChild(exPad); exPad = null;

つまり、exPad が必要になったら create し、使い終わったら remove しています。本当は、exPad は FlatTable 起動時に作成して、それを非表示にしておき、必要な時に最前面に表示するようにしたかったのですが、やり方が分からず(出来るのかどうかも分からず)断念しました。因みに、Flash だと簡単に実現できます。

さて、ここまでのコードは、TestTable に有ります。これをクリックすると、試作品 TestTable が別窓で開いて実行可能となります。ただし、SVG に対応したブラウザで JavaScript を有効にしておく必要が有ります。現時点で出来ることは球の移動だけです。コードは、ブラウザのコード表示を利用して見て下さい。このファイルは、適宜、コードの追加・修正を行って行きます。

この TestTable で球を移動するには、上にも書いたように、球をクリックしてから exPad 上でドラッグ動作をするのですが、台の範囲に有る球は exPad の背面に位置するので、それをクリックすることは出来ません。その場合、一旦 exPad を消去(短クッションをクリック)しても良いのですが、その手間を省くために、台の下に半透明のダミーの球を配置しました。このダミー球のクリックでも本来の球をクリックしたのと同じ効果が得られるので、exPad が表示されている時はダミー球をクリックしてください。

ところで、スマートフォンに対応させると言いましたが、実は私はスマートフォンを持っていません。従って、スマートフォンでの操作具合が分かりません。ただ、使用しているPCがタッチパネル装備なので、それをスマートフォン代わりに動作確認しています。

それによると、exPad に指を乗せた時、それを検知するのに1秒程度のタイムラグが有ります。これはPCのタッチパネルがそうなっているだけなのか、それともスマートフォンでもそうなのか、気になっています。スマートフォンで動作確認した方がいれば、情報をお願いします。

以上で球の移動に関しては終了です。次の段階は、球の経路の作図です。

2012年2月24日 (金)

球の移動 -2-

FlatTable の球の移動はドラッグによって行います。Flash だと、ドラッグの関数(メソッド)が用意されているので何の苦労も無く球をドラッグすることが出来ました。しかし、SVG+JavaScript では自前で処理しなければなりません。

ドラッグは次の手順で行います。

  1. ドラッグ開始を検知し、その時のマウスの座標を読み取る。
  2. マウスが動くたびにその座標を読み取り、1つ前の座標との差分を計算し、それを球の座標に加えて新たな座標を求めて、そこへ球を移動する。
  3. ドラッグ終了を検知し、ドラッグを終了する。

この手順でコーディングしたのですが、ここで問題発生です。マウスの座標はウィンドウ固有(ビューポート)の座標系を用いて表されています。そのスケールもウィンドウ固有のものです。しかし、FlatTable はウィンドウ・サイズに合わせて、適宜、拡大・縮小して使います。そのため、スケールは一律ではありません。すなわち、マウスと FlatTable は座標スケールが異る上に、その違いを前もって決定しておくことも出来ないのです。

何か解決策は無いかとインターネットで検索したり、掲示板で質問したりしたのですが、なかなか答えが見つからず何週間か経ち、やっと CTM(現在の変換行列)という解に辿り着きました。

SVG は画像を表示する時、画像の座標系からビューポートの座標系への変換を行っています。その変換行列が CTM で、CTM の成分 a が(少なくとも初期値は)変換の倍率になっています。CTM を読み取るメソッドは getCTM() です。

これらから、上記手順の2番目に関するコードは次のようになります。

var mag = 1/flattable.getCTM().a; function dragging(evt){ var dX = (evt.clientX - prevX)*mag; // スケール補正 var dY = (evt.clientY - prevY)*mag;  // ball.x += dX; ball.y += dY; ball.setAttribute("transform", "translate(" + ball.x + "," + ball.y + ")" );
prevX = evt.clientX; prevY = evt.clientY; return false; }

コード中、prevX, prevY は1つ前の座標です。evt はマウス移動のイベントです。

「スケール補正」の行では、マウスの移動距離を 、CTM の倍率を用いて補正してFlatTable 画像のスケールに合わせています。これで、マウスと球の移動量が一致することになります。

2012年2月23日 (木)

球の移動 -1-

Inkscape に悩まされながらも、やっとビリヤード台と球の画像が出来たので、いよいよ JavaScript のコーディングです。JavaScript も SVG も初めてなので、やりたいことを1つ1つ確認しながら進んで行きます。まず、最初にやったのは、球を移動することです。

SVG の基本的な図形―四角形や円など―は、代表的座標を表す属性が有るので、その図形 figure を座標(Px,Py)に移動するのは、

    figure.setAttribute("x", Px);
    figure.setAttribute("y", Py);        (1)
四角形の移動の説明図

で出来ます。しかし、複合図形のビリヤード球 ball には代表的座標を表す属性が無く (1)式のような記述が出来ません。そのような場合は、

    ball.setAttribute("transform", "translate(δx, δy)");        (2)
ビリヤード球の移動の説明図

というふうに、図形をtransform(変換)することになるのですが、このδx, δy が曲者です。 (2)式で δx, δy は差分を意味するのですが、どこに対する差分なのかが、すぐには分かりませんでした。初めは、直前の座標との差分かと思ってコードを書いたのですが、何やらケッタイな動きをします。実は、δx, δy は図形の初期座標に対する差分だったのです。

そこで、FlatTable では、球の初期座標を台のセンタースポットに一致させることにしました。こうすると、(2)式のδx, δy はセンタースポットを原点とする座標系に関する座標という意味になり、後で便利なのです。

-2-に続く・・・

2012年2月20日 (月)

Inkscape はバカ

FlatTable を SVG と JavaScript で作ろうとしているわけですが、SVG と言うのは画像形式の1つで、そのデータはテキスト形式になっています。たとえば、四角形は

<rect x="x座標" y="y座標" width="幅" height="高さ" />

となります。

こういったデータを直接手で書いて(おまじないと共に)ブラウザに読み込ませれば画像が表示されるのですが、複雑な絵を作成する場合は、それなりのツールを使った方が良いでしょう。その代表的なフリーソフトが Inkscape です。

FlatTable の移植にあたり、この Inkscape をインストールして使ったのですが、初めのうちは怪奇現象に悩まされました。線幅が知らない内に変化しているのです。後で教えてもらったのですが、画像の表示倍率を変えると線幅が変化するのが原因でした。今は、その設定は off にして使っているのですが、こんな機能はデフォルトで off にしておかないといけないでしょう!>Inkscape

ともあれ、それは解決したのですが、まだまだ困った問題が有りました。Inkscape で作成した画像は、座標が使い物にならないのです。具体的には次のようなことです。

  1. 作図中と生成データとで座標系が異なる
  2. 作図中に画像の一部を移動すると「移動された」というデータが生成されるのであり、移動先の座標データが生成されるのではない。(使い方を知らないだけ?)

1. に関して補足すると、作図中は左下原点の右手系、生成データは左上原点の左手系になっています。

2. もおかしな仕様です。私は最終的な座標を知りたくて作図しているのであって、変換データなんか欲しくありません。

Inkscape はバカですか?

仕方が無いので、FlatTable の画像データは、この Inkscape のバカデータを手で修正して作りました。

2012年2月19日 (日)

かなり自由度が高い

数年前からSNSで日記は書いていたのですが、ブログは見ているばかりでした。私の見て来たどのブログも記事中に Flash の表示が無かったので、Flash を表示出来るブログは無いのだろうと思っていたのですが、今回、このブログを始めてみて、ブログでも Flash を表示出来るんだということを知りました。

普通に HTML を書けば良いだけです。因みに、1つ前の記事 Flash 版 FlatTableFlatTable が Flash を表示させたものです。

SNSの日記では HTML タグに強い制限が掛けられており、<自前で> FlatTable を表示させることは出来ないのに比べて、ココログは、かなり自由度が高いと言えます。もしかすると他のブログでも同じく自由度が高いのかも知れません。そうだとすると、今まで見て来たブログで Flash が利用されていなかったのは残念です。

ところで、今回、気になったことがもう1つ。記事を入力する画面に、ボールドとイタリックを指定するボタンが有り、それによって生成されるタグが「strong」と「em」となっていますが・・・

これは違うだろ!

「strong」と「em」は、その部分を強調するタグであり、ボールドとイタリックは文字の形態を指定するものです。これを混同してはイカンだろ。

まだココログでの CSS の設定方法を知らないので、しばらくは不本意なタグで済ますことにします。とりあえず、「strong」は「b」に替えました。

Flash 版 FlatTable

ビリヤード配置図ソフト FlatTable を Flash から SVG+JavaScript へ移植しようとしている訳ですが、まず、元となっている Flash 版 FlatTable について説明します。

FlatTable は 2010年10月から作成を開始し、翌2011年5月に完成しました。その後もバグフィックス・改良を続けて、ほぼ最終形態がこれ↓です(PC限定)。


ここをクリックすると配置図が別窓で開きます

主な特長には次のものが有ります。

  • FlatTable に対して、配置コードを伴ったリンクを張ることで配置図を表示できる。
  • 複数のページを作図できる。
  • アニメーション機能が有る。

詳しい使い方は、FlatTable を見てもらうとして、簡単な説明をします。

  1. 球の移動はマウスでドラッグして行います。
  2. 球をダブルクリックすると、矢印球が出現します。そこでマウスを動かせば矢印球も動きます。
  3. その状態でクリックすると球の軌道の節点が決定します。必要な数だけ節点を生成した後で、ダブルクリックすると軌道が確定します。
  4. 軌道を修正するには、まず、球を右クリックしてメニューを出し、「ゴースト表示/非表示」をクリックします。すると、節点にゴーストが現れます。
  5. そのゴーストをドラッグして軌道を修正します。
  6. 球の右クリックで出たメニューから「線・ゴースト削除」を選択すると、軌道(およびゴースト)が削除されます。
  7. 複数ページに渡って作図した場合は、FlatTable の右上に有る「▼▲」をクリックすると、ページが切り替わります。
  8. 右上に有る灰色の四角を右クリックして、「配置コードコピー」を選択すると、配置コードがクリップボードにコピーされます。それをブログなどに貼って配置図へのリンクとして使います。
  9. 左上の[ A ]を右クリックして「連続アニメーション」を選択すると、アニメーションが実行されます。

以上が Flash 版 FlatTable です。試しに、上記配置図の[ A ]を右クリックして「連続アニメーション」させてみて下さい。

これを SVG+JavaScript へ移植するわけですが、かなり手こずっています。1つ前のブログにも書きましたが、SVG ファイルを扱えない(試した方法が上手く行かない)のは痛いことです。それ以外にも、色々問題が予想されます。もしかすると、Flash 版ほどの機能は持たせられないかも知れません。

さて、どうなることやら。

始まります

某SNSでビリヤードの日記を書いています。その日記で使用する配置図を作成するソフト FlatTable(Flash 版)を自作し、下記サイトで公開しています。

http://spacelike.in.coocan.jp/flat/

SNSで書いている日記はビリヤード限定としているので、プログラミングに関することを書くために当ブログを始めました。

現在、上記 FlatTable の SVG+JavaScript への移植作業を進めています。当面、このブログでは、その移植作業の進捗を載せて行く予定です。

ただ、SVG も JavaScript も、今回の移植をきっかけに始めたので、勉強しながらの作業となります。そして今、上記サイトで SVG ファイルを扱えないという現象に悩んでいるところです。非常に困っています。

遅くとも年内の完成を目指して、出発!!

トップページ | 2012年3月 »