雨が多いので、東京アメッシュHackです
2008-08-31-4
[Programming][Chumby]
さくらの500円レンタルサーバーには
最初から ImageMagick [2008-08-15-3]が
入っているので嬉しいですね。
ということで、東京アメッシュ[2007-11-11-4]をハック!
chumby の Load Image URL widget[2008-05-20-1]
で使う目的で、
東京の最新の降雨情報画像から、
東京23区の部分だけ抽出した画像を作ります。
東京アメッシュの画像は三層に分かれています。
(某モ氏のハックを参考にさせて頂きました)
まず、最初にトップにでる低解像度の画像:
- http://tokyo-ame.jwa.or.jp/map/map000.jpg
- http://tokyo-ame.jwa.or.jp/map/msk000.png
- http://tokyo-ame.jwa.or.jp/mesh/000/200808311950.gif
「20080808311950」の部分は日時です。10分刻みです。
ImageMagick でこれらを重ね合わせて一枚の画像にできます。
以下、手順:
次に、地域拡大のときに出る高解像度(3080x1920)の画像:
- http://tokyo-ame.jwa.or.jp/map/map100.jpg
- http://tokyo-ame.jwa.or.jp/map/msk100.png
- http://tokyo-ame.jwa.or.jp/mesh/100/200808311950.gif
同じく、重ね合わせ手順:
このままでは chumby で表示するには大きすぎます。
また、私の場合は東京23区の部分だけあれば十分です。
ということで、23区の部分だけを切り取ってから、縮小します。
あとは、
Load Image URL ウィジェットの URL を設定し、
chumby で表示させるだけ。
こんな感じ。
上記の処理は、シェルスクリプトにして cron で
動かすようにすると良いかもですね。
URLの日時部分を現在時にあわせるロジック、
ファイルのフルパス指定、
wget のオプション指定が必要になりますが。
10分ごとだと無駄が多いし、負荷の問題もあるので、
自分がいないであろう時間帯は呼ばないようにする、
ってのがエコで良いかも。
なにはともあれ自己責任でどうぞ。
Perl で Image::Magick モジュールを使った
プログラムを書いてみましたので置いておきます。
くどいようですが、自己責任でどうぞ。
また、 Resize の前に下記を足すと、
画像の左上に日時文字列が入ります。
追記080910: ケータイから画像にアクセスすると
ファイルサイズが大きすぎると怒られて表示されないので、
jpg ファイルも出すようにした。
また、縦長画面に合うように90度回転した。
サンプルコードの最後のに下記を追加しただけ。
最初から ImageMagick [2008-08-15-3]が
入っているので嬉しいですね。
ということで、東京アメッシュ[2007-11-11-4]をハック!
chumby の Load Image URL widget[2008-05-20-1]
で使う目的で、
東京の最新の降雨情報画像から、
東京23区の部分だけ抽出した画像を作ります。
東京アメッシュの画像を重ね合わせる
東京アメッシュの画像は三層に分かれています。
(某モ氏のハックを参考にさせて頂きました)
まず、最初にトップにでる低解像度の画像:
- http://tokyo-ame.jwa.or.jp/map/map000.jpg
- http://tokyo-ame.jwa.or.jp/map/msk000.png
- http://tokyo-ame.jwa.or.jp/mesh/000/200808311950.gif
「20080808311950」の部分は日時です。10分刻みです。
ImageMagick でこれらを重ね合わせて一枚の画像にできます。
以下、手順:
wget http://tokyo-ame.jwa.or.jp/map/map000.jpg wget http://tokyo-ame.jwa.or.jp/map/msk000.png wget http://tokyo-ame.jwa.or.jp/mesh/000/200808311950.gif composite 200808311950.gif map000.jpg tmp.png composite msk000.png tmp.png amesh000.png
次に、地域拡大のときに出る高解像度(3080x1920)の画像:
- http://tokyo-ame.jwa.or.jp/map/map100.jpg
- http://tokyo-ame.jwa.or.jp/map/msk100.png
- http://tokyo-ame.jwa.or.jp/mesh/100/200808311950.gif
同じく、重ね合わせ手順:
最終ファイルは 2M ほどになります。巨大です。wget http://tokyo-ame.jwa.or.jp/map/map100.jpg wget http://tokyo-ame.jwa.or.jp/map/msk100.png wget http://tokyo-ame.jwa.or.jp/mesh/100/200808311950.gif composite 200808311950.gif map100.jpg tmp.png composite msk100.png tmp.png amesh100.png
Chumby で表示する
このままでは chumby で表示するには大きすぎます。
また、私の場合は東京23区の部分だけあれば十分です。
ということで、23区の部分だけを切り取ってから、縮小します。
convert -geometry 320x240 -extract 640x480+1500+700 \ amesh100.png amesh23.png
あとは、
Load Image URL ウィジェットの URL を設定し、
chumby で表示させるだけ。
こんな感じ。
上記の処理は、シェルスクリプトにして cron で
動かすようにすると良いかもですね。
URLの日時部分を現在時にあわせるロジック、
ファイルのフルパス指定、
wget のオプション指定が必要になりますが。
10分ごとだと無駄が多いし、負荷の問題もあるので、
自分がいないであろう時間帯は呼ばないようにする、
ってのがエコで良いかも。
なにはともあれ自己責任でどうぞ。
Perl によるサンプルコード
Perl で Image::Magick モジュールを使った
プログラムを書いてみましたので置いておきます。
くどいようですが、自己責任でどうぞ。
#!/usr/bin/perl use strict; use warnings; use Image::Magick; use LWP::Simple; use POSIX qw(strftime); my $base_dir = "/home/USERNAME/www/var"; # あらかじめ base_dir でやっておくこと: # wget http://tokyo-ame.jwa.or.jp/map/map100.jpg # wget http://tokyo-ame.jwa.or.jp/map/msk100.png my $dt = strftime "%Y%m%d%H%M", localtime; $dt =~ s/\d$/0/; my $url = "http://tokyo-ame.jwa.or.jp/mesh/100/$dt.gif"; mirror($url, "$base_dir/now.gif"); my $p1 = new Image::Magick; $p1->Read("$base_dir/map100.jpg"); my $p2 = new Image::Magick; $p2->Read("$base_dir/now.gif"); $p1->Composite(image => $p2, compose => 'Over'); my $p3 = new Image::Magick; $p3->Read("$base_dir/msk100.png"); $p1->Composite(image => $p3, compose => 'Over'); $p1->Crop(x => 1500, y => 700, width => 640, height => 480); $p1->Resize(width => 320, height => 240); $p1->Write("$base_dir/amesh23.png");
また、 Resize の前に下記を足すと、
画像の左上に日時文字列が入ります。
$p1->Annotate( text => $dt, pointsize => 24, gravity => "NorthWest", x => 1500, y => 700, fill => 'black', stroke => 'gray', undercolor => 'white', );
追記080910: ケータイから画像にアクセスすると
ファイルサイズが大きすぎると怒られて表示されないので、
jpg ファイルも出すようにした。
また、縦長画面に合うように90度回転した。
サンプルコードの最後のに下記を追加しただけ。
$p1->Rotate(90); $p1->Write("$base_dir/amesh23s.jpg");
この記事に言及しているこのブログ内の記事