JavaFX

JavaFXでマウスホイールを使ってのズームインズームアウトは可能か?

JavaFX

Twitter で面白そうなネタを見つけたので JavaFX で可能か?

どうすればいいのか?

MouseWheelEventクラスってあったけ?と疑問に思いつぶやいたところお忙しい中 @skrb さんから可能だと教えてもらいました。

もともとは「MouseWheelEventクラスってあったけ?」と大ボケをかましていたので話にならないのですが・・・ (^_^;)

そこで ImageView で試してみました。

ちなみに ScrollEvent を使うので MouseWheelEventクラスなんてものは存在しません。

ただし、タッチインタフェースのジェスチャーにも対応しているとのことで先月頭を悩ませた問題が再び襲ってくるのかと一抹の不安が脳裏を横切りました。

これも後で試してみます。

まずは ImageView で!

TilePane にImageView を二つ並べてマウスホイールで左だけ拡大縮小できるようにしてみました。

Ctrl キー、 Shift キーそれぞれを押しながらホイール操作した場合は拡大縮小比率を変更するようなおまけも付加しました。

このプログラムを実行すると下図のようにホイールで操作が可能となりました。

1

2

3

 

ただ、不可解なことに Shift キーを押しながらの処理が機能しませんでした。

Ctrl キーは問題なく機能します。

随分悩んだのですが違う PC で実行すると何の問題もない。

キーボードの設定か何かだろうか?

ちなみにスクロール量は OS 側のマウスの設定で変わってきます。

スクロールの向きも OS 側の設定になるようです。(当たり前か・・)

ではこれからが本題です。

BOX 3D オブジェクトを表示させるプログラムを組んでみます。

マウスドラッグで BOX 3D オブジェクトをグリグリさせるようにします。

そこで BOX 3D オブジェクト とカメラの距離をマウスホイールで変更させます。(カメラを移動)

ここで大きな問題が発生します。

今時の PC はタッチパネル対応の OS が搭載されてきてます。

JavaFX も Swing では無かったタッチインタフェースが標準で用意されています。

タッチドラッグによって BOX 3D オブジェクトをグリグリ動かすことができます。

つまり、マウスホイールだけでなくタッチによるスクロールまで発生してしまいます。

タッチによるスクロール、タッチによるドラッグ  あれれ、これじゃグリグリしながら拡大縮小してしまうじゃん。

どうしたものか悩んだ末に次のようなプログラムを組みました。

これでいいのかどうかは解りません。

だってタッチインタフェース使った記事って少ないしましてや 3D となると尚更ですから。

タッチカウントと慣性スクロールイベントで拡大縮小処理を行うかどうか判断させています。

box.setOnScroll(sc -> {

    if (sc.getTouchCount() == 0 && !sc.isInertia()) {

        double x = sc.getX();
        double y = sc.getY();
        double scaleBase = sc.isControlDown() ? 10.0 : sc.isShiftDown() ? 5.0 : 1.0;
        scale += (sc.getDeltaY() / 1_000) * scaleBase;
    }

    cam.setTranslateZ(zPos.doubleValue() * scale);

});

この方法しか思いつかなかった。(>_<。)

正しい方法をご存じでしたら教えてください!

ちなみにこのプログラムの実行結果は次のようになります。

4

5

 

とりあえずマウスホイール使えてめでたし!めでたし!

JavaFX おもしろいね!

Hatena タグ:

JavaFX 3DViewer を使って Maya 3D アニメーションファイルをインポートしてみた。

JavaFX

まだ開発途中の 3DViewer を使って Maya 3D アニメーションファイルを JavaFX プログラムにインポートしてグリグリしてみた。

使い方がよく解らないので適当なことをやってます。

まず、先日インポートして再生するだけのプログラムの動画を YouTube にアップロードしたものがこちらです。

 

今回は特定の位置でジャンプ、停止などの操作を可能にできないかチャレンジしてみました。

結果としてはできたのですがキーフレーム指定での方法は解りませんでした。

このサンプルはネット上でフリーの出来上がったものを使用していますのでフレーム位置の確認方法が思いつきません。

Maya を買ってしまえばいいのだけどそうそう使う機会はないと思うので・・・(^_^;

そういうわけで時間で処理をしています。

とにかく簡単にインポートして使えるので皆さんも気軽に試してください。

JavaFX から扱うには下記コードを参考にしてもらえればいいと思います。

ただ、これで動いたと言うだけで正しい使い方とは限りませんのでご容赦のほどを!

 

maya

 

これで動かした動画です。

約3秒ほどで開始位置(頭)に戻らせてます。

思ったより簡単に再生できるんですよね!

I want Maya, however since it is expensive, I cannot buy it.

Hatena タグ:

Java Developer Connection のプログラマチャレンジ Vol.2

Java JavaFX

この前のエントリーの続きです。

前回は検索ファイルのハイライト表示が Swing のように簡単にできそうにないとしてあきらめてました。

JavaFX8 で導入された TextFlow を使えば実現できるんじゃないかと思っていたところ Twitter で TextFlow で、できるんじゃないかと教えていただいたので早速チャレンジしてみました。

結果からいうと Swing の JTextPane より柔軟性に優れ、テキストの装飾の自由度も遙かに JavaFX8 の TextFlow のほうが高いです。

0

ただし、編集できないです。(>_<。)

編集とかする必要があれば使い慣れているエディタを使うことになるだろうから良しとしましょう。(^_^;

あと JavaFX では CSS を使ってプログラムの見栄えを良くしたり、ちょっとしたエフェクトをかけたりすることができます。

例えば、Node の上にマウスカーソルがのったら、出たら、押されたら、 それらの処理を Java コードで書くと次のようになります。(たぶん、、、)

11

 

これを CSS を使うとどうなるか。

Button の例を次に示します。

12

これは Button 全てに適用させてます。

めっちゃ楽です!

Button それぞれにエフェクトを変えたい場合は ID を設定して個別の記述すればいいだけです。

CSS is Great!

しかし、こんなに便利で簡単に大きな効果を得られるのにネット上では CSS の情報はかなり少ないです。

今回かなりネットサーフィンしてあーでもない、こうでもないと悩みました。

その中で TabPane に Tab がいっぱいになってポップアップリストビューが表示されたときのチェックマークの色を変えたかったのですがどれだけ探しても解決方法をみつけることはできませんでした。

1

それと WebView のスクロールバーもマウスがのったらグラデーションするようにしたかったのですが何故かできませんでした。

なんで WebView だけ?

まだまだ JavaFX 解らないことだらけなのに CSS まで(>_<。)

でも、楽しいからもっと時間がほしい! (*^▽^*)

あと、ついでにこんなどうでも良いような(迷惑な)こともやってみました。

2

SubScene を透過させてみました。

プログラム本体を移動させて表示させると 3D マスコット(そんな良いもんじゃ無い!)みたいですね。

3

上の Label と Button は普通の Scene なのでこれを取っちゃえば面白いことができそうです。

3D 時計を作ってある時間に 3D の鳩が画面に出てきてポッポ、ポッポと鳴き出すとか(なんのこっちゃ!)

発想力が貧相だな・・・

なにはともあれ、楽しめたので Happy だ!

動画も貼っておきますので興味のある方はみてくださいませ!

 

JavaFX is Great!

Hatena タグ: ,

Java Developer Connection のプログラマチャレンジ

Java JavaFX

Java Developer Connection テクニカルティップって覚えている人っていますよね?

そこでプログラマチャレンジってのがあって当時私もチャレンジしてみたのですが

簡単そうで難しかった思い出があります。

そもそも当時の Java はタブにコンポーネントを貼れないため閉じるボタンをタブじゃないところに置かなくてはいけませんでした。

非常にダサかったです。

現在リリースされている Java8 では次世代 UI の JavaFX8 が使えますので最新の Java8 を使って作ってみました。

ちょっと予定していた機能を実装できなかったり、Java8 の Files.wark メソッドでの探索処理ではまったりでたくさん泣きました。

結局、完成には至りませんでしたがそこそこできたので良しとします。(ヲヒ

大文字、小文字を区別するかしないか

サブディレクトリも検索するかどうかをチェックボックス付きのメニューアイテムで選択できるようにしました。

ディレクトリチューザーを開くようにして容易に検索場所を指定できるようにしました。

1

 

PathMatcher を使っているのでエディタブルな ComboBox を利用して複数の拡張子を指定できるようにしました。

検索対象のファイルのリストをタブにまとめました。

そしてリストビューにファイルのパスを表示するようにしました。

2

 

リストビューのパスを選択するとそのファイルの表示をするようにしました。

swing では検索ワードを色をつけて太字とすることが可能だったのですが JavaFX ではどうしたらいいか解りませんでした。

TextFlow を使えばなんとかなるのかなって思ってみたのですがちょっと解決方法が思いつきませんでした。(残念!

3

 

そこで、それならば代わりに印刷機能を付けちゃおうって思ってやってみたのですが・・・

これまた、頭がドッカーン!!

何故か印刷ダイアログのキャンセルボタン、もしくはウィンドゥの閉じるボタンを押しても印刷してくれるという・・・

凄すぎるよ!JavaFX8 の PrintAPI

おまけに一枚分しか印刷できない。(たぶんこれは私の理解不足です。

4

 

あと、以前のエントリーで Java8 の Files.wark メソッドが便利だと書いたのですが訂正します。

使いづらいです!

java.nio.file.AccessDeniedException で仕事放棄します。(;´Д`)

しかたないので Java7 の古い API でグルグルまわしました。

基本的な機能はだいたいできたので良しとします。

あとは音とかアラートダイアログとかアバウトとか細かい作業なのでどうでもいいです。

どうせ自分専用だしね! (^_^)

あれから12,3年くらい経つのかな?

ずいぶん良くなった!

Java 最高!

Hatena タグ: ,

JavaFX の BarChart を試してみた

JavaFX

このところ JavaFX の学習をさぼっていたので(マイペースともいう)標準装備された Chart をいじってみることにした。

今回も ITPro の「JavaFX 2で始めるGUI開発 第10回 組み込みブラウザとチャート」を参考にさせてもらいました。

実はこちらの記事では Scene Builder を使っているサンプルはなかったので Scene Builder を使って創りはじめました。

スタイルの設定も簡単にできるんだろうなと甘い考えを持っていました。

結果をいうと恥ずかしながら撃沈です。(>_<。)

Scene Builder を使えばスタイルの設定が簡単にできるだろうと思っていたが使い方が解らなかった!

ネット上にサンプルがあるだろうと随分ググったけど見つけられなかった。

結局、Scene Builder 使って簡単にというのは幻となってしまった。

結局、ほとんど ITPro のサンプルまんまになってしまった。

選択した Chart が BarChart だということくらいしかないな・・・

せめて Chart 用のデータを創ってるクラスが Java 8 ならではの機能を利用しているから許してね!

そう言うことで Chart について知りたい方は ITPro の記事を読んでくださいね。

流れ的には X 軸、Y 軸を設定して、それを引数にとった Chart を作る。

BarChart<String, Number> ramdomNumberBarChart = new BarChart<>(xAxis, yAxis);

そして作った Chart にデータを読み込ませるって感じです。

肝心なところはデータを読み込ませるところですね。

このプログラムでは

XYChart.Series<String, Number> ramdomGaussian = new XYChart.Series<>();

IntStream.rangeClosed(0, 9).forEach(i -> {
            ramdomGaussian.getData().add(new XYChart.Data<>(String.valueOf(i), ramdomGaussianGenerator.counter.getOrDefault(i, 0L)));
        });

ramdomNumberBarChart.getData().add(ramdomGaussian);

としてます。

ガウス分布乱数の 0 から 9 のそれぞれの個数を BarChart にセットしました。

おっと、このプログラムの概要を説明するのを忘れてましたね。

大まかにザックリ説明するとガウス分布乱数を作り、それをもとに 0 から 9 の整数だけを 100 万個作る。

そして、それをそれぞれいくつあるかカウントして Map<Integer, Long> で保持する。

つくったガウス分布乱数 Map<Integer, Long> を 0 から 9 の BarChart として表示させる。

右肩下がりの BarChart が表示されればおそらく間違ってはないだろう。

それではツッコミどころはあるけどプログラムのソースを載せます。それはいろいろ試していたと言うことで笑ってください。

 

実行結果は次のようになります。

1

 

スタイルシートを使わない素の状態は次のようになります。

2

 

どちらにしろ右肩下がりの BarChart が表示されました。

めでたし!めでたし! (^_^)

後は、Scene Builder からスタイルの設定を簡単にする方法があればそれも試してみたい。

結局、CSS ファイルをコード側から読み込ませては意味ないし、Java 8 がリリースされたら JavaFX でプログラム組む人も増えるだろうからそのうち GOOD な情報を入手できるだろう。

いずれにしろ、JavaFX はスタイルシート使えるからプログラムの見栄えもガラッと変わってしまう。

デザインセンスのある人が使えば強力な武器となることは間違いない!

残念ながら私はデザインセンスは標準装備されてもないしオプション設定もないので泣きたくなります。

今回、Chart 関連の CSS の設定についてググってみても日本語ではあまり情報がなかった。

参考までに

JavaFX CSS Reference Guide

サンプルは無いし、英語なので泣きたくなります。(>_<。)

外国語での情報も少なかった。

これもそのうち情報が増えてくるのをゆっくりと待つとしよう。

マイペースでお気楽に楽しんでが私のモットーなので今日はここまでできた自分を褒めてあげよう!

Hatena タグ:

« 古い記事 新しい記事 »