IFCファイルのグラフ可視化アプリ
以下で確認
- Windows10
- Google Chrome: 120.0.6099.72
- node: 16.15.0
- npm: 9.7.1
- Python: 3.9.10
- IfcOpenShell: 0.7.0
バックエンドをPythonのFlask、フロントエンドをVite+Vue+TSで構築しているので、PythonとNode.jsの両方の環境を作る必要がある。
cd python
python -m venv env
env\Scripts\activate.bat
pip install -r requirements.txt
IfcOpenShell
は公式から、
Pre-built packagesをダウンロードしてenv/Lib/site-packages
に格納する。
cd nodejs
npm install
Pythonでバックエンド起動する。
python server.py
Node.jsでフロントエンド起動する。
npm run dev
両方を起動した状態で「localhost:5173」にブラウザでアクセスする
フロントエンドをビルドする。
npm run build
作成された「nodejs/dist」を「python/dist」に移動し、Pythonでバックエンド起動する。
python server.py
Pythonを動かした状態で「localhost:5000」にブラウザでアクセスする。
- 「ファイルの選択」からIFCファイルを選択する
- 対応しているファイル形式は
.ifc
のみ
- 対応しているファイル形式は
- ノードを選択すると画面右にノードの情報が表示される
- Shift+ドラッグでノードを複数選択できる
- ノードの黄色の丸をドラッグすることで、接続先のノードを展開される
- ノードを選択した状態でDeleteキーを押すとノードが削除される
- 右クリックを押すとエンティティの検索ウィンドウが表示される
- 検索ウィンドウのエンティティIDを選択すると右クリックした場所にノードが表示される
- マウスホイールで表示の拡大縮小ができる