sakky4869 / autopanorama

【研究】パノラマへのアノテーション自動化システムの開発用リポジトリ．

Hi there 👋

autopanorama's Issues

アノテーション追加画面の機能（add_annotation.js）の作成

アノテーション追加画面の機能を作成する．

【TODO】

• アノテーション追加画面の機能の作成

【備考】

• uploadPicture()について
  • サーバサイドの開発がまだなので，ログ出力のみ実装
• showCandidateAreas()について
  • 臨時データを表示する

【臨時データ】
候補エリア画像

{ annotation-id : 2022-09-18_17-33-00, panorama-id : 2022-09-18_17-33-00,
  images : [ 
    { index : 0, 
      url : ./candidate_imgs/ 2022-09-18_17-33-00/2022-09-18_17-33-00, 
      theta : theta, phi : phi } 
  ] }

PanoramaPlayServerクラスの作成

パノラマ画面のサーバサイドシステムを作成する．

【TODO】

• panorama_play_server.phpの作成

AddAnnotationServerクラスの作成

アノテーション追加画面のサーバサイドシステムを作成する．

【TODO】

• add_annotation_server.phpの作成

add_annotation.phpのログイン関係処理を実装

アノテーション追加画面および，データベースとの連携部分を作成する．

【TODO】

• add_annotation.phpをベースに，データベースとの連携部分を作成する

パノラマ空間（panorama_world.js）の作成

パノラマ操作画面で表示するパノラマ空間を作成．

【TODO】

• パノラマ画像関係のディレクトリをgitでトレースしないようにgirignoreに設定
• パノラマ空間を作成

【備考】

• サーバから受信予定の，パノラマ画像および，アノテーションのデータは，下記の臨時データを使用

【臨時データ】
パノラマ画像（取得成功）
{ result : true,
origin-url : "./panorama_imgs/2022-09-18_17-33-00/origin.jpg" }
画像は圧縮したものを使用．

パノラマ画像（取得失敗）
{ result : false, message : "パノラマが見つかりませんでした"}

アノテーションデータ）
{ datas : [ { annotaton-id : "2022-09-08_17-33-00",
　　　　　theta : (要確認), phi : (要確認),
　　　　　annotation-url : "./annotation_imgs/2022-09-18_17-33-00.jpg" } ] }

index.phpの作成

本アプリケーションに対するクライアントからのエンドポイントであるindex.phpを作成．

【TODO】

• index.phpの作成
• ログイン機能は現状は実装しないので，パノラマプレビュー画面にリダイレクトするようにする

フォントをRobotoに設定

本システムのフォントをRoobotoに設定する．

Webカメラで撮影した画像の保存先を画像処理システム内のディレクトリに変更

Webカメラで撮影した画像の保存先を画像処理システム内のディレクトリに変更する．

• 保存先
  • annotation_imgs_temp
• ファイル名
  • アノテーション追加画面へのアクセス時にタイムスタンプを取得し，タイムスタンプ_連番.jpgというファイル名で保存

パノラマ画面の作成

パノラマ画面のUIを作成する．

【TODO】

• Navbar
  • パノラマプレビュー画面から引き継ぎ
• アノテーション追加画面への移動ボタン
• パノラマ空間は作成しない

【イメージ】

AppConfigクラスの作成

ログイン機能の使用設定などを取得する，AppConfigクラスを作成する．

【TODO】

• app_config.phpの作成
• 設定データはデータベースを参照するようにする

view_common.phpの作成

各画面のPHPファイルが持つ共通機能を実装するPHPファイルを作成．

【TODO】

• view_common.phpの作成

画像処理のブランチを整理

画像処理のブランチの中身を，画像処理関係のファイルのみにする．

画像処理システム中の位置推定部分をAPI化

アノテーション画像から取得した名称データをもとに，パノラマ画像内位置を推定する部分をAPI化．

• アノテーション画像から取得した名称データを使った，キューブマップ上の位置推定
• 推定したキューブマップ上の位置と，パノラマ上の位置の変換
• アノテーションデータのデータベースへの書き込み

画像処理システムをAPI経由に変更

画像処理システムについて、Google Cloud Vision APIを利用したものに変更する

【TODO】

• Issueの内容通り変更

物体撮影機能について３秒に１回Webカメラの画像をアップロードするように変更

アノテーション追加画面の物体撮影機能について，３秒に１回Webカメラの画像を送信するように変更

• アップロード間隔はデータベースに設置し，いつでも変更できるようにしておく
  • app_configテーブル内，picture_upload_span
• 現在は３秒
• 保存先
  • ホームディレクトリにある画像処理システム内のannotation_imgs_tempディレクトリ
• ファイル名
  • アノテーション追加画面へのアクセス時にタイムスタンプを取得し，タイムスタンプ_連番.jpgというファイル名で保存

画像処理システムのブランチを作成

画像処理部分のブランチを作成．
今後，画像処理部分はこのブランチを親として開発していく．

• developを親として，develop_image_processを作成

PostManagerクラスの作成

POSTリクエストデータに対する共通処理を定義するクラスPostManagerを作成する．

【TODO】

• post_manager.phpの作成

Webアプリのブランチを整理

Webアプリのブランチの中を，Webアプリ関係のファイルのみにする．

panorama_play.phpとDBとの連携部分を作成

パノラマ画面および，データベースとの連携部分を作成．

【TODO】

• panorama_play.phpをベースに，データベースとの連携部分を作成

image_process.pyの作成

バックグラウンドで画像処理を行うimage_process.pyを作成．

【TODO】

• image_process.pyの作成

PanoramaPreviewクラスの作成

パノラマプレビューおよび，データベースとの連携部分を作成する．

【TODO】

• panorama_preview.phpをベースに，データベースとの連携部分を追加する

アノテーション追加画面の作成

アノテーション追加画面のUIを作成する．

【TODO】

• Navbar
  • パノラマプレビュー画面から引き継ぎ
• 撮影エリアのvideo
• 撮影ガイド枠
• 撮影ボタン
• 送信ボタン
• 取り直しボタン
• ヘルプボタン

【イメージ】

SessionManagerクラスの作成

セッション管理を行うSessionManagerクラスを作成する．

【TODO】

• session_manager.phpの作成

パノラマ画面の機能（panorama_play.js）の作成

パノラマ画面の機能の作成

【TODO】

• パノラマ画面の機能の作成

【備考】

• getPanoramaOriginUrl()とgetAnnotationDatas()について
  • サーバサイドの開発がまだなので，ajaxのコードは作成するが，リクエスト送信前に臨時データをreturnする

アップロードした物体画像から名称を取得しJSON形式で返す機能を作成

• アップロードした画像から物体情報を取得
• 取得した物体情報のうち，名称とその位置をJSON形式で返す

Webアプリのブランチを作成

Webアプリのブランチを作成．

• developを親として，develop_web_appを作成

パノラマプレビュー画面の作成

パノラマプレビュー画面を作成する．
機能は実装しない．

【TODO】

• Navbarを作成
  • ハンバーガーメニューの項目は作成しない
• タイトル「パノラマ一覧」を作成
• パノラマを表示する基本パーツとなるカードの，HTMLとCSSを作成

【イメージ】

server_common.phpの作成

サーバサイドのみで稼働するシステムの共通処理を持つファイルを作成する．

【TODO】

• server_common.phpの作成