# Android View Scope
> Modern Android UI element inspector, similar to weditor functionality, built with Vue.js 3 + FastAPI
## Features
- **Modern Tech Stack** - Vue.js 3 + Element Plus + FastAPI
- **Device Management** - Auto-detect and manage Android devices
- **Real-time Screenshots** - High-quality PNG screenshot capture
- **Interactive Element Selection** - SVG interaction layer, click to select UI elements
- **UI Hierarchy Structure** - Complete interface hierarchy tree display
- **Code Generation** - Auto-generate uiautomator2 locator code
- **Multiple Locator Strategies** - Resource-ID, text, XPath and other methods
## Project Structure
```
viewscope/
├── frontend/ # Vue.js 3 前端项目
│ ├── src/
│ │ ├── views/ # 页面组件
│ │ ├── stores/ # 状态管理 (Pinia)
│ │ └── components/
│ ├── package.json
│ └── vite.config.js
├── backend/ # FastAPI 后端项目
│ ├── main.py # 应用入口
│ ├── core/ # 核心模块
│ │ ├── device_manager.py # 设备管理
│ │ ├── ui_analyzer.py # UI分析
│ │ └── code_generator.py # 代码生成
│ ├── api/ # API路由
│ │ ├── devices.py
│ │ ├── screenshot.py
│ │ └── ...
│ └── requirements.txt
├── start.bat # 一键启动脚本
└── README.md
```
## Quick Start
### One-Click Launch (Recommended)
Simply install via pip and run:
```bash
pip install ViewScope
viewscope
```
The command will automatically:
1. Start backend API service (port 8060+)
2. Launch web interface in browser
### Manual Development Setup
#### Backend
```bash
cd backend
pip install -r requirements.txt
python main.py
```
#### Frontend
```bash
cd frontend
npm install
npm run dev
```
## Prerequisites
### System Requirements
- Windows 10/11 / macOS / Linux
- Python 3.8+
- Android SDK (ADB available)
### Device Requirements
- Android 4.4+
- USB debugging enabled
- Device connected via ADB
### Environment Verification
```bash
# Check Python
python --version
# Check ADB
adb version
# Check device connection
adb devices
```
## Usage
1. **Launch Application**
- Run `viewscope` command
- Browser opens automatically
2. **Connect Device**
- Select device from top toolbar
- Click "Refresh Current View" button
3. **Element Selection**
- Click any UI element in screenshot
- Element details show in right panel
4. **Code Generation**
- Switch to "Code Generation" tab
- View auto-generated uiautomator2 code
- Click "Copy Code" button
5. **UI Hierarchy View**
- Switch to "UI Hierarchy" tab
- Browse complete interface tree structure
- Use search to locate specific elements
## API Documentation
After starting backend service, visit http://localhost:8060/docs for complete API documentation.
### Main Endpoints
- `GET /api/devices` - Get device list
- `POST /api/screenshot` - Take screenshot and get UI structure
- `GET /api/ui-hierarchy` - Get UI hierarchy structure
- `POST /api/code/generate` - Generate locator code
## Troubleshooting
### Common Issues
1. **Device Not Detected**
```bash
# Check ADB connection
adb devices
# Restart ADB service
adb kill-server
adb start-server
```
2. **Screenshot Failed**
- Ensure device has authorized USB debugging
- Check if device is locked
- Try reconnecting device
3. **Frontend Cannot Access Backend**
- Check if backend started on port 8060
- Confirm firewall settings
- Check browser console errors
4. **Dependency Installation Failed**
```bash
# Python dependencies
pip install -r requirements.txt -i https://pypi.douban.com/simple
```
## Development
### Tech Stack
- **Frontend**: Vue.js 3, Element Plus, SVG, Pinia
- **Backend**: FastAPI, uiautomator2, Pillow
- **Build Tools**: Vite, Python uvicorn
### Development Environment
```bash
# Backend hot reload
uvicorn main:app --reload --host 0.0.0.0 --port 8060
# Frontend hot reload
npm run dev
```
## Build & Deploy
### Frontend Build
```bash
cd frontend
npm run build
```
### Package Distribution
```bash
pip install build twine
python -m build
twine upload dist/*
```
## Contributing
1. Fork this repository
2. Create feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to branch (`git push origin feature/AmazingFeature`)
5. Open Pull Request
## License
This project is licensed under MIT License - see [LICENSE](LICENSE) file for details
## Acknowledgments
- [uiautomator2](https://github.com/openatx/uiautomator2) - Android automation framework
- [Vue.js](https://vuejs.org/) - Progressive JavaScript framework
- [FastAPI](https://fastapi.tiangolo.com/) - Modern Python web framework
- [Element Plus](https://element-plus.org/) - Vue.js UI component library
---
For issues or suggestions, welcome to submit Issues or Pull Requests!
Raw data
{
"_id": null,
"home_page": null,
"name": "ViewScope",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "android, ui, automation, testing, uiautomator",
"author": null,
"author_email": "Sydeng IndieDev <s_329379@163.com>",
"download_url": "https://files.pythonhosted.org/packages/90/8e/64c3d3054f1757ecc1db17fac2dcc3bbe7f8903f9ad21110376d25de854e/viewscope-1.1.8.tar.gz",
"platform": null,
"description": "# Android View Scope\r\n\r\n> Modern Android UI element inspector, similar to weditor functionality, built with Vue.js 3 + FastAPI\r\n\r\n## Features\r\n\r\n- **Modern Tech Stack** - Vue.js 3 + Element Plus + FastAPI\r\n- **Device Management** - Auto-detect and manage Android devices\r\n- **Real-time Screenshots** - High-quality PNG screenshot capture\r\n- **Interactive Element Selection** - SVG interaction layer, click to select UI elements\r\n- **UI Hierarchy Structure** - Complete interface hierarchy tree display\r\n- **Code Generation** - Auto-generate uiautomator2 locator code\r\n- **Multiple Locator Strategies** - Resource-ID, text, XPath and other methods\r\n\r\n## Project Structure\r\n\r\n```\r\nviewscope/\r\n\u251c\u2500\u2500 frontend/ # Vue.js 3 \u524d\u7aef\u9879\u76ee\r\n\u2502 \u251c\u2500\u2500 src/\r\n\u2502 \u2502 \u251c\u2500\u2500 views/ # \u9875\u9762\u7ec4\u4ef6\r\n\u2502 \u2502 \u251c\u2500\u2500 stores/ # \u72b6\u6001\u7ba1\u7406 (Pinia)\r\n\u2502 \u2502 \u2514\u2500\u2500 components/\r\n\u2502 \u251c\u2500\u2500 package.json\r\n\u2502 \u2514\u2500\u2500 vite.config.js\r\n\u251c\u2500\u2500 backend/ # FastAPI \u540e\u7aef\u9879\u76ee \r\n\u2502 \u251c\u2500\u2500 main.py # \u5e94\u7528\u5165\u53e3\r\n\u2502 \u251c\u2500\u2500 core/ # \u6838\u5fc3\u6a21\u5757\r\n\u2502 \u2502 \u251c\u2500\u2500 device_manager.py # \u8bbe\u5907\u7ba1\u7406\r\n\u2502 \u2502 \u251c\u2500\u2500 ui_analyzer.py # UI\u5206\u6790\r\n\u2502 \u2502 \u2514\u2500\u2500 code_generator.py # \u4ee3\u7801\u751f\u6210\r\n\u2502 \u251c\u2500\u2500 api/ # API\u8def\u7531\r\n\u2502 \u2502 \u251c\u2500\u2500 devices.py\r\n\u2502 \u2502 \u251c\u2500\u2500 screenshot.py\r\n\u2502 \u2502 \u2514\u2500\u2500 ...\r\n\u2502 \u2514\u2500\u2500 requirements.txt\r\n\u251c\u2500\u2500 start.bat # \u4e00\u952e\u542f\u52a8\u811a\u672c\r\n\u2514\u2500\u2500 README.md\r\n```\r\n\r\n## Quick Start\r\n\r\n### One-Click Launch (Recommended)\r\n\r\nSimply install via pip and run:\r\n```bash\r\npip install ViewScope\r\nviewscope\r\n```\r\n\r\nThe command will automatically:\r\n1. Start backend API service (port 8060+)\r\n2. Launch web interface in browser\r\n\r\n### Manual Development Setup\r\n\r\n#### Backend\r\n```bash\r\ncd backend\r\npip install -r requirements.txt\r\npython main.py\r\n```\r\n\r\n#### Frontend\r\n```bash\r\ncd frontend\r\nnpm install\r\nnpm run dev\r\n```\r\n\r\n## Prerequisites\r\n\r\n### System Requirements\r\n- Windows 10/11 / macOS / Linux\r\n- Python 3.8+\r\n- Android SDK (ADB available)\r\n\r\n### Device Requirements\r\n- Android 4.4+\r\n- USB debugging enabled\r\n- Device connected via ADB\r\n\r\n### Environment Verification\r\n```bash\r\n# Check Python\r\npython --version\r\n\r\n# Check ADB\r\nadb version\r\n\r\n# Check device connection\r\nadb devices\r\n```\r\n\r\n## Usage\r\n\r\n1. **Launch Application**\r\n - Run `viewscope` command\r\n - Browser opens automatically\r\n\r\n2. **Connect Device**\r\n - Select device from top toolbar\r\n - Click \"Refresh Current View\" button\r\n\r\n3. **Element Selection**\r\n - Click any UI element in screenshot\r\n - Element details show in right panel\r\n\r\n4. **Code Generation**\r\n - Switch to \"Code Generation\" tab\r\n - View auto-generated uiautomator2 code\r\n - Click \"Copy Code\" button\r\n\r\n5. **UI Hierarchy View**\r\n - Switch to \"UI Hierarchy\" tab\r\n - Browse complete interface tree structure\r\n - Use search to locate specific elements\r\n\r\n## API Documentation\r\n\r\nAfter starting backend service, visit http://localhost:8060/docs for complete API documentation.\r\n\r\n### Main Endpoints\r\n\r\n- `GET /api/devices` - Get device list\r\n- `POST /api/screenshot` - Take screenshot and get UI structure\r\n- `GET /api/ui-hierarchy` - Get UI hierarchy structure\r\n- `POST /api/code/generate` - Generate locator code\r\n\r\n## Troubleshooting\r\n\r\n### Common Issues\r\n\r\n1. **Device Not Detected**\r\n ```bash\r\n # Check ADB connection\r\n adb devices\r\n # Restart ADB service\r\n adb kill-server\r\n adb start-server\r\n ```\r\n\r\n2. **Screenshot Failed**\r\n - Ensure device has authorized USB debugging\r\n - Check if device is locked\r\n - Try reconnecting device\r\n\r\n3. **Frontend Cannot Access Backend**\r\n - Check if backend started on port 8060\r\n - Confirm firewall settings\r\n - Check browser console errors\r\n\r\n4. **Dependency Installation Failed**\r\n ```bash\r\n # Python dependencies\r\n pip install -r requirements.txt -i https://pypi.douban.com/simple\r\n ```\r\n\r\n## Development\r\n\r\n### Tech Stack\r\n- **Frontend**: Vue.js 3, Element Plus, SVG, Pinia\r\n- **Backend**: FastAPI, uiautomator2, Pillow\r\n- **Build Tools**: Vite, Python uvicorn\r\n\r\n### Development Environment\r\n```bash\r\n# Backend hot reload\r\nuvicorn main:app --reload --host 0.0.0.0 --port 8060\r\n\r\n# Frontend hot reload\r\nnpm run dev\r\n```\r\n\r\n## Build & Deploy\r\n\r\n### Frontend Build\r\n```bash\r\ncd frontend\r\nnpm run build\r\n```\r\n\r\n### Package Distribution\r\n```bash\r\npip install build twine\r\npython -m build\r\ntwine upload dist/*\r\n```\r\n\r\n## Contributing\r\n\r\n1. Fork this repository\r\n2. Create feature branch (`git checkout -b feature/AmazingFeature`)\r\n3. Commit changes (`git commit -m 'Add some AmazingFeature'`)\r\n4. Push to branch (`git push origin feature/AmazingFeature`)\r\n5. Open Pull Request\r\n\r\n## License\r\n\r\nThis project is licensed under MIT License - see [LICENSE](LICENSE) file for details\r\n\r\n## Acknowledgments\r\n\r\n- [uiautomator2](https://github.com/openatx/uiautomator2) - Android automation framework\r\n- [Vue.js](https://vuejs.org/) - Progressive JavaScript framework\r\n- [FastAPI](https://fastapi.tiangolo.com/) - Modern Python web framework\r\n- [Element Plus](https://element-plus.org/) - Vue.js UI component library\r\n\r\n---\r\n\r\nFor issues or suggestions, welcome to submit Issues or Pull Requests!\r\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "Android UI inspection and automation tool",
"version": "1.1.8",
"project_urls": {
"Bug Tracker": "https://github.com/viewscope/viewscope/issues",
"Documentation": "https://viewscope.readthedocs.io",
"Homepage": "https://github.com/viewscope/viewscope",
"Repository": "https://github.com/viewscope/viewscope"
},
"split_keywords": [
"android",
" ui",
" automation",
" testing",
" uiautomator"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "34cf70cc6b7707828c8a1a7ae22220f4b5484baa43c3e8ead421cdaa13dd850b",
"md5": "b2cf34424e338fe8c2a78ae4bf4f7396",
"sha256": "8459ad245cecc2b7b5eacbd701639c875cbd3f62aeb60fdfb1ba3d7b4fc90134"
},
"downloads": -1,
"filename": "viewscope-1.1.8-py3-none-any.whl",
"has_sig": false,
"md5_digest": "b2cf34424e338fe8c2a78ae4bf4f7396",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 469682,
"upload_time": "2025-09-08T07:15:21",
"upload_time_iso_8601": "2025-09-08T07:15:21.712543Z",
"url": "https://files.pythonhosted.org/packages/34/cf/70cc6b7707828c8a1a7ae22220f4b5484baa43c3e8ead421cdaa13dd850b/viewscope-1.1.8-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "908e64c3d3054f1757ecc1db17fac2dcc3bbe7f8903f9ad21110376d25de854e",
"md5": "c8248086103b6c23c549802164fc9156",
"sha256": "b8ca27f9b1b04f697e14705a5f55b5d73503e0ab34bf5e382740a984f5ccb515"
},
"downloads": -1,
"filename": "viewscope-1.1.8.tar.gz",
"has_sig": false,
"md5_digest": "c8248086103b6c23c549802164fc9156",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 461817,
"upload_time": "2025-09-08T07:15:23",
"upload_time_iso_8601": "2025-09-08T07:15:23.745122Z",
"url": "https://files.pythonhosted.org/packages/90/8e/64c3d3054f1757ecc1db17fac2dcc3bbe7f8903f9ad21110376d25de854e/viewscope-1.1.8.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-09-08 07:15:23",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "viewscope",
"github_project": "viewscope",
"github_not_found": true,
"lcname": "viewscope"
}
JSON
