【Tips】JavaFXのImageクラスで画像を読み込む方法

JavaFXでFXMLを使った開発中につまづいたのでメモします。こんな感じのコードでつまづいた。

　gc.drawImage(new Image(getClass().getResouces("/test.png").getPath), 0, 0);

gcはGraphicContext、drawImageは画像, x座標, y座標の順に引数をとって、その座標に画像を描画します。画像には新しいImageのインスタンスを作りつつ入れます。

事の始まり

JavaFXのライブラリ(javafx.scene.image.Image)を使って、resourceフォルダに入れた画像をCanvasに表示しようとしたところ、試しに読み込んだ（と思っていた）画像が表示されない。Imageのコンストラクタは画像ファイルのパスを受け取るのに、パスの画像が表示されない。読み込みに入ると「そのパスにその画像はないよ（いわゆるぬるぽ）」で止まってしまう。

パスがおかしいのかと思ってSystem.out.println()で表示してみても、ちゃんとフルパスが表示されている。

問題の解決

結果的には、Imageクラスのコンストラクタが、入力したパスを勝手にresourceからの相対パスとしてみることが判明した。なので、

　new Image("/test.png");

とすると、"プロジェクトのフォルダ/src/main/resources/test.png"のファイルを読み込む。つまり、フルパスを入れるとresourcesフォルダのパスにフルパスがひっついて動かない。

その他

　あまり関係ないが、GraphicContextはdraw◯◯という名前のメソッドをほとんど持っていない。最初は戸惑ったが、線を描くときはstroke◯◯みたいなメソッドを使う。四角はquad()。このネーミングってProcessingみたいだけど、中はJavaFXとかなんだろうか。普通のJavaでSwingだとdrawLineとかになりそうだけど...調べるほどではないけど気にはなる。

【Tips】Coda 2.5でEmmetを使う方法

こんにちは。aoicaです。
早速ですが、Coda 2.5でEmmetを使おうとしてハマったのでメモです。
前置き飛ばす人はこちら。

CodaとEmmet

一応、Codaとはなんぞや、Emmetってなんぞやという人のために説明しておきます。

Coda

CodaはPanic.Incが販売しているWebサイト制作アプリです。おしゃれで使い易い外観にもかかわらず、データベースとの接続やリアルタイムなプレビュー、高速な動作、インテリジェンス、プラグイン機能といった非常に高機能なアプリケーションでMacでWeb制作をするのに必要な機能が一通り揃ってます。aoicaはAdobe DreamWeaverから乗り換えました。

Emmet

Emmetはhtmlやcssといった言語を高速で書けるようにするスクリプトの一種です。以前はZencodingと呼ばれてました。あらかじめ登録されている文字列をショートカットで展開することでスニペットのようなものを高速で記述することが可能です。

Coda 2.5でEmmetを使う

Emmetはgithubで公開されていて、Codaのプラグインとして自動でビルドされたものをダウンロードできるようになっています。が、そのままダウンロードしたプラグインはなぜか動きません。どうもバグがあるらしくPanicが止めてたとか何とか。

解決法

GithubのここからダウンロードできるバージョンのEmmetプラグインが使えます。aoicaの執筆時点でのCodaのバージョンは2.5.8ですがちゃんと動いてます。

以上です。

STM32 F401RE Nucleoで倒立振子 - その1

こんにちはこんばんは。aoicaです。

記念すべきWeb回路Coder最初の記事...何をするか考えました。

　...倒立振子です。ずっと「とうりつふりこ」だと思ってましたが「とうりつしんし」と読むようです。倒立振子とは、平たく言って振子を逆さにしたもので要するにセグウェイがそれ。

振子の端につけた加速度センサー等を使って、足となるモーターを制御することで立たせることができます。簡単そうで意外に難しいらしく、よく制御プログラミングの練習として使われてます。

制御の入門ということで、まずはこの倒立振子を作っていきたいと思います。

部品

　まず揃えたのがこちら。

タミヤのギアボックス。どこにでもある、そして何にでも使われる便利な子。

某所から借りてきました。

タミヤのギアボックス

　次に制御基板。基板には巷で流行りのSTM32 F401 Nucleoを採用します。このマイコンボードにはARM Cortex M4シリーズを乗せたSTM32 F401が載っていて、秋月電子でお値段1500円。その上クロック84MHz・64Pin・Flash 512KB・SRAM 96KB...etcというコストパフォーマンスに優れ過ぎているおそるべき開発ボードです。書き込みに使用するST-LINK/V2-1も基板に実装されているので、Mini USBで繋ぐだけで開発が開始できます。Arduinoのピン配置にも対応しており、mbedも使える...低価格帯では恐らく無敵のマイコンボードです。

一時期Atmel社のチップを使ってオリジナルボードを作ろうと考えてましたがこれを見てやめました。

　左上の赤いやつはMMA7361というアナログ加速度センサです。重力加速度を取ることができるので、角度を図ることもできます。ちょっと前までよく使われてました。最近はI2Cとかで繋ぐデジタルタイプの方が主流な気もしますが、安くていい感じなのでチョイスしました。STM32と繋ぐときにはSTM32でA/D変換をかけてやります。

加速度センサMMA7361とSTM32 F401 Nucleo

　バッテリーはこちら。何の変哲も無いSilicon Powerのモバイルバッテリー。

5V2.1Aの良くあるバッテリーです。2.1Aもあるのでモーターの電源も共有できそう。

珍しくもないモバイルバッテリー

　以上が今回のメインの部品になります。他にモータードライバとかも必要ですが、まだ準備できてないので手に入り次第紹介します。筐体は例によって段ボールとか100円均一のプラケースとかになる予定。