2枚の Mapillary 画像から地物の位置を取得する実験(の途中)

先日参加した Mapillary Meetup 2018 Tokyo : ATND の懇親会で思いついた2枚の Mapillary 画像から地物の位置を特定するやつをどうにかしようと模索中です。

適当に動作するっぽい JavaScrpt までは書けました。続きができる気がしないけど。

f:id:k-side:20180306160021p:plain

右上の地図で濃い緑矢印は画像の方向角、赤いラインは画像間の基線です(これはいらないなぁ…)。
地図上の青いラインと画像上の青いラインは連動していて、画像上のマウスポインタの位置が画像上でどの方向かを見るためのものです。緑ラインも同じ様な動きをしますが、こちらはマウスをクリックした位置に固定して表示されます。
各種数値を正しく取得できれば緑ラインの交点が地物の位置になるはずです。サンプル画像では写真内から道路案内標識の位置を出そうとしていますが、地図上の交点がはるか街区内に突っ込んでいるので正しい位置を出せなかったことがわかります。

画像の持つ画像自体の方向角が正しくなかったり、画角の情報や画角の計算に必要な情報を持っていない画像で試したため(なぜその画像を選んだ…)結果として地物の正しい位置を取得できませんでした。

課題をまとめるために記事を残しておきます。あー、でもこんな記事書いたらなにか出来上がった気になってしまうかもと思いつつ。

やり残していること

さて、実装できるでしょうか。

Mapillary から直接画像の取得

今のはファイルをローカルに保存してデータを取っているので REST API か Mapillary.js を使ってクライアントサイドで完結できるようにしないと使い勝手が悪すぎる。

画角の取得

画角情報が保存されていないと画角とマウスの移動量を正しく連携させられないので、画像の2点と地図上の2点から挟角を設定できるような機能が必要そうです。

画像方向角の調整

画像の方向角は電子コンパスが正しく動作していないと正確な方向角を記録できません。せっかく画像から風景が見えていて、右上に地図を表示できているのでこの画面上で方向角を補正する機能を追加すれば正しい方向角を向くはずです。

ラインの拡縮追従

地図を拡大・縮小した時にラインが取り残されてしまいます…。

交点計算の改善

最小自乗法とかで計算したらかっこよさそう。

使ってるもの

地図表示は leaflet.js でその他のオブジェクトは d3.js でなんとかしています。
これに使うつもりで d3.js を練習してたわけではないのですが、なんか使えましたね。たまたま…。

というか誰か作って(ぇ

d3.js v4 でポリゴンとポイントとボロノイ図を表示する

d3.js で検索すると v3 で書かれたものがほとんどでな上バージョンも明記されていないことも多くて探しにくい…。
結局 GUNMA GIS GEEK の清水さんのコードだけ見ててできたので d3.js + 地図を表現する時にはまず清水さんのブログを探してからにしよう…。

つーか d3.js v5 があるじゃんよ。

何か目的があって書きたかったわけではないですが、オフィシャルな(?)ドキュメントを読む前に少しは書いておかないとドキュメントが何言ってるかわらからないヤツなんです。

青で段階的に着色されたポリゴンは e-Stat) からダウンロードした2015年の国勢調査時の町丁目を QGIS で GeoJSON 化したものです。ポリゴン内の人口が多いほど青が濃くなっていますが、面積が揃っていないので着色だけ見てもよくわからないことになってしまいました。
赤いポイントは 埼玉県オープンデータ からダウンロードした川越市の避難所データで、黒い境界は避難所データをボロノイ分割してできたポリゴンです。

d3.js を僅かに程度覚えてもデザイン力がないとツライことに気づきました…。

動作例

ポイントのレンダリングをポリゴンのレンダリングに似せて書いてスマートにしたいなとか思っていますが、とりあえずこんな感じで。

d3.js v4 + render polygon + render point + voronoi · GitHub

d3.js v4 で画像を拡大・縮小・ドラッグする

ちょっとブラウザ上でマウスホイールを使って画像を拡大・縮小したりドラッグしたかったので試してみました。

ググるといろいろな手法が出てきましたが d3.js v3 の頃のものだっりしますが、 GUNMA GIS GEEK 清水さんのブログの内容は v4 でとてもシンプルだったので、この内容を少し書き換えるだけで簡単にできました。

SVG の中に image オブジェクトを足してそいつをグリグリさせています。
元の画像が 1024x1024 だったものを 1/3 の大きさにして表示させています。

See the Pen Image File Scaling by Zoar (@Zoar-jp) on CodePen.

Raspberry Pi Zero W 見守りカメラの画像をタブレットで見る

前回の「Raspberry Pi Zero W を見守りカメラ用に設定する」で玄関に動くものを検知したら写真を撮ってファイルサーバーに保存するようにできました。

妻はあまりパソコンを使わない(妻用のマシンもない)ため、妻がよく使う iPad(3rd) で撮影した画像を見られるようにすべく Node.js で簡単なスライドショーを作りました。

続きを読む

Raspberry Pi Zero W を見守りカメラ用に設定する

玄関のあたりで動く物があったら撮影をしてくれるように設定します。
以前は Raspberry Pi を使っていましたが起動しなくなってしまったので目立たなくしやすい Pi Zero W を選びました。

今回購入した Raspberry Pi Zero W スターターキット(長い)では付属している 8GB の microSD に OS 導入用の NOOBS が入っているのでそいつを使って Raspbian をインストールします。

f:id:k-side:20180212150928j:plain
画像の電源は付属のものではないです

続きを読む

PINE64 1GB版を購入

Trello のオープンソース実装 wekan や Git のリポジトリサーバー Gogs を動かすために Raspberry Pi3 が欲しかったのですが、秋葉原秋月電子通商PINE64 が販売されていたので買ってみました。

Kickstarter で資金調達されて Raspberry Pi3 とほぼ同時期(ちょっと後?)に販売され始めたもので64ビットの SoC を搭載したシングルボードコンピューターです。
Raspberry Pi より大きな本体ですがメモリの量で 1GB 版と 2GB 版があり、2GB 版でも5000円を切っていて、1GB 版も3000円しない販売価格でした。
USB コネクタから給電、メインストレージが microSD、64ビット SoC 搭載と RPi3 と似たような感じです。サイズは倍くらいありますが…。

ともかくお値段に釣られて PINE64 の 1GB 版を購入しました。
とりあえず家で実験です。

OS のインストール

何度か debian を入れたのですが、なんかうまく行かなかったので Wiki をたどって Ubuntu をインストールします。とはいえ Ubuntu なので基本一緒です。
メイン機が Windows なのでイメージをダウンロードした後 DD Win を使って microSD にイメージを書き込み PINE64 に挿して LAN ケーブルと電源を接続すればブートします。
電源は 5V2A を出せる Nexus 7(2017) の AC アダプタから給電させます。

ssh でログインしてまずは uboot とそこのカーネルを更新し、パーティションを拡張します。

$ sudo -i
# /usr/local/sbin/pine64_update_uboot.sh
# /usr/local/sbin/pine64_update_kernel.sh
# resize_rootfs.sh

散々リブートしろと言われているのでここでリブートさせました。
再度 OS が上がっていたらパッケージ類を更新します。

# apt-get update
# apt-get upgrade

ユーザー設定と docker のインストール

自分用の一般ユーザーを追加して docker を入れます。

# adduser zoar
# usermod -aG sudo zoar
# apt-get install docker.io
# usermod -aG docker zoar
# systemctl restart docker

追加したユーザーで ssh ログインできたことを確認してデフォルトの一般ユーザーをログインできなくしておきます。

# passwd -l ubuntu

とりあえずこんな設定だけしておいておしまいです。

さて、再起動させるとときどき OS が上がってこない事があります。ディスプレイを繋いでいないのでどういった現象がおきているかわかりませんが、電源の再投入や再起動は気をつけないといけませんね。
というかディスプレイ繋いで表示を確認すればいいんですが。

#ValidationFriday について簡単に

GitHub が「Open Source Friday」という名前で毎週金曜日にオープンソースへのコントリビュートをしようというキャンペーンをしているのをご存じの方も多いと思います。
OpenStreetMap 周りでも人道支援OpenStreetMap チームHOT人道支援マッピングプロジェクトMissing Mapsなどによって毎週金曜日にマッピングの妥当性を確認する作業をしましょうというキャンペーン「#ValidationFriday」が展開されています。
ハッシュタグとしても機能するこのキャンペーンは Twitter検索するといくつものツイートが見つかります。

HOT が中心となって開発した共同マッピングツール HOT Tasking Manager 上で行われているマッピングプロジェクトに対して、そこで行われた編集の妥当性を検証する作業に参加しましょうというのが大きな目的です。
Tasking Managerマッピングプロジェクトにはマッピングに必要とされる経験やその地域のマッピング難易度が書かれているので、自分にあったタスクで作業をするといいと思います。多くのタスクからマッピング難易度やプロジェクトを動かしている組織、マッピングプロジェクトの名前などで絞り込んで探すこともできます。

どうやって検証作業をするのかわからなかったり、多くの人が参加するプロジェクトに関与することや日本語以外の言語を読み込むことに抵抗を感じる方もいらっしゃるかもしれません。
まずは日本国内で他の人の編集を見てみるのもいいかもしれません。もしくは Mapbox 社が公開している Validating OpenStreetMap (内容は翻訳されています!)を読んで積極的に問題のありそうな編集を探すという方法もあります。