docs: Update README.md

Author: codematrixer

DEVELOP.md

@@ -0,0 +1,27 @@
+
+This project is developed using FastAPI, Vue, and Element-UI. It starts the service locally and displays the UI hierarchy tree through a web browser.
+
+**Tech Stack**
+
+- python3
+- html/css/js
+- fastapi
+- vue
+- element-ui
+
+
+# Build
+```
+pip3 install poetry
+
+git clone git@github.com:codematrixer/ui-viewer.git
+cd ui-viewer
+
+poetry install
+poetry build
+```
+
+## Run
+```
+poetry run python3 -m uiviewer
+```

README.md

@@ -1,18 +1,49 @@
 # ui-viewer
 UI hierarchy visualization tool, supporting Android, iOS, HarmonyOS NEXT.
 
-![showcase](/docs/imgs/showcase.jpg)
+![showcase](./docs/imgs/show.gif)
+
+# Installation
+```shell
+pip3 install -U uiviewer
+```
 
 # Run
+Start with a default port (8000)
+```shell
+uiviewer
+# or
+python3 -m uiviewer
 ```
-poetry install
-poetry run python3 -m uiviewer.app
+Start with a custom port
+```
+uiviewer -p <PORT>
+python3 -m uiviewer -p <PORT>
+
 ```
 and then open the browser to [http://localhost:8000](http://localhost:8000)
 
 
-# TODO
-1. support iOS 
-1. Selected Element Info 增加path信息
-2. UI hierarchy 显示层级线
-3. 左侧节点联动右侧el-tree
+# Tips
+- If you are using a virtual environment, please make sure to activate it before running the command.
+- On iOS, please ensure that WDA is successfully started and wda port forwarding is successful in advance.
+  -   First, Use `xcode` or  `tidevice` or `go-ios` to launch wda.
+  ```
+  tidevice xctest -B <wda_bundle_id>
+  ```
+  - Second, Use `tidevice` or `iproxy` to forward the wda port，and keep it running.
+  ```
+  tidevice relay <local_port> 8100
+  ```
+  - Finally, To ensure the success of the browser to access `http://localhost:<local_port>/status`
+- On iOS，WDA can easily freeze when dumping high UI hierarchy. You can reduce the **`maxDepth`** on the web page. The default is 30.
+
+# preview
+- HarmonyOS
+  ![harmony](./docs/imgs/harmony.png)
+
+- Android
+![android](./docs/imgs/android.png)
+
+- iOS
+![ios](./docs/imgs/ios.png)

docs/imgs/android.png

@@ -5,7 +5,10 @@ description = "UI hierarchy visualization tool, supporting Android, iOS, Harmony
 authors = ["codematrixer <chenli_gogo@163.com>"]
 license = "MIT"
 readme = "README.md"
-include = ["*/assets/*"]
+include = ["*/static/*"]
+
+[tool.poetry.scripts]
+uiviewer = "uiviewer.cli:main"
 
 [tool.poetry.dependencies]
 python = "^3.8"
@@ -15,7 +18,7 @@ aiofiles = "^23.1.0"
 uiautomator2 = "^3.0.0"
 facebook-wda = "^1.0.5"
 tidevice = "^0.12.10"
-hmdriver2 = "^1.2.9"
+hmdriver2 = "^1.2.10"
 
 [tool.poetry.extras]