Skip to content

Commit bbccf9b

Browse files
dorkmodorkmo
authored
Merge pull request #32 from OpenSourceEcology/copilot/add-browser-joystick-preview
Add browser joystick preview screenshot and automated generation workflow
2 parents 6db24c8 + 4023a12 commit bbccf9b

File tree

7 files changed

+665
-0
lines changed

7 files changed

+665
-0
lines changed

‎.github/workflows/generate-web-controller-preview.yml‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
name: Generate Web Controller Preview
2+
3+
on:
4+
workflow_dispatch:
5+
push:
6+
paths:
7+
- 'LifeTrac-v25/raspberry_pi_web_controller/static/**'
8+
- 'LifeTrac-v25/raspberry_pi_web_controller/templates/**'
9+
- 'LifeTrac-v25/raspberry_pi_web_controller/preview/**'
10+
- '.github/workflows/generate-web-controller-preview.yml'
11+
12+
jobs:
13+
generate-screenshot:
14+
runs-on: ubuntu-latest
15+
16+
steps:
17+
- name: Checkout repository
18+
uses: actions/checkout@v4
19+
20+
- name: Set up Node.js
21+
uses: actions/setup-node@v4
22+
with:
23+
node-version: '20'
24+
25+
- name: Install Playwright
26+
run: |
27+
npm init -y
28+
npm install --save-dev @playwright/test
29+
npx playwright install --with-deps chromium
30+
31+
- name: Start HTTP server
32+
run: |
33+
cd LifeTrac-v25/raspberry_pi_web_controller/preview
34+
python3 -m http.server 8080 &
35+
echo "HTTP_SERVER_PID=$!" >> $GITHUB_ENV
36+
sleep 2
37+
38+
- name: Create screenshot script
39+
run: |
40+
cat > screenshot.js << 'EOF'
41+
const { chromium } = require('@playwright/test');
42+
43+
(async () => {
44+
const browser = await chromium.launch();
45+
const context = await browser.newContext({
46+
viewport: { width: 1920, height: 1080 }
47+
});
48+
const page = await context.newPage();
49+
50+
console.log('Navigating to page...');
51+
await page.goto('http://localhost:8080/standalone.html');
52+
53+
console.log('Waiting for page to be ready...');
54+
await page.waitForSelector('[data-ready="true"]', { timeout: 10000 });
55+
56+
// Wait a bit more for joysticks to fully render
57+
await page.waitForTimeout(2000);
58+
59+
console.log('Taking screenshot...');
60+
await page.screenshot({
61+
path: 'web-controller-preview.png',
62+
fullPage: false
63+
});
64+
65+
console.log('Screenshot saved!');
66+
await browser.close();
67+
})();
68+
EOF
69+
70+
- name: Generate screenshot
71+
run: node screenshot.js
72+
73+
- name: Verify screenshot was created
74+
run: |
75+
if [ -f "web-controller-preview.png" ]; then
76+
echo "Screenshot created successfully"
77+
ls -lh web-controller-preview.png
78+
else
79+
echo "ERROR: Screenshot was not created"
80+
exit 1
81+
fi
82+
83+
- name: Move screenshot to preview directory
84+
run: |
85+
mv web-controller-preview.png LifeTrac-v25/raspberry_pi_web_controller/preview/
86+
87+
- name: Upload screenshot as artifact
88+
uses: actions/upload-artifact@v4
89+
with:
90+
name: web-controller-preview
91+
path: LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
92+
retention-days: 90
93+
94+
- name: Commit and push screenshot
95+
run: |
96+
git config --global user.name 'github-actions[bot]'
97+
git config --global user.email 'github-actions[bot]@users.noreply.github.com'
98+
git add LifeTrac-v25/raspberry_pi_web_controller/preview/web-controller-preview.png
99+
if ! git diff --staged --quiet; then
100+
git commit -m "Update web controller preview screenshot [skip ci]"
101+
git push --force-with-lease origin HEAD || { echo "ERROR: git push failed. Please check for conflicts or permission issues."; exit 1; }
102+
else
103+
echo "No changes to commit."
104+
fi
105+
env:
106+
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
107+
108+
- name: Stop HTTP server
109+
if: always()
110+
run: |
111+
if [ ! -z "$HTTP_SERVER_PID" ]; then
112+
kill $HTTP_SERVER_PID || true
113+
fi

‎LifeTrac-v25/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,9 @@ LifeTrac v25 features a comprehensive remote control system with multiple contro
7474
- WebSocket for real-time communication
7575
- See [raspberry_pi_web_controller/README.md](raspberry_pi_web_controller/README.md) for setup
7676

77+
![Web Controller Preview](raspberry_pi_web_controller/preview/web-controller-preview.png)
78+
*Browser-based control interface with live camera feed and on-screen joysticks*
79+
7780
## ROS2 Integration
7881
- **ros2_bridge/**: ROS2 packages for BeagleBone control via MQTT
7982
- **lifetrac_msgs/**: Custom ROS2 message definitions

‎LifeTrac-v25/raspberry_pi_web_controller/preview/.gitignore‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Node modules (if testing locally)
2+
node_modules/
3+
package.json
4+
package-lock.json
5+
6+
# Temporary files
7+
*.tmp
8+
*.log
9+
10+
# Keep the generated screenshot
11+
!web-controller-preview.png

‎LifeTrac-v25/raspberry_pi_web_controller/preview/README.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Web Controller Preview Assets
2+
3+
This directory contains assets for generating preview screenshots of the LifeTrac v25 web controller interface.
4+
5+
## Files
6+
7+
### camera-placeholder.svg
8+
An SVG placeholder image that simulates a camera feed view. Used in the standalone HTML to provide a realistic preview without requiring an actual camera connection.
9+
10+
### standalone.html
11+
A self-contained HTML page that includes:
12+
- Complete web controller interface styling (embedded CSS)
13+
- Joystick initialization code (embedded JavaScript)
14+
- No Flask backend dependencies
15+
- Uses the camera placeholder image
16+
17+
This page is used by the GitHub Actions workflow to generate screenshots automatically.
18+
19+
### web-controller-preview.png
20+
Auto-generated screenshot of the web controller interface showing:
21+
- Header with status indicators
22+
- Camera feed area with placeholder
23+
- Left joystick (Tank Steering - green)
24+
- Right joystick (Hydraulics - orange)
25+
- Emergency stop button
26+
- Keyboard shortcuts reference
27+
28+
## Usage
29+
30+
### Manual Screenshot Generation
31+
32+
To generate a screenshot locally:
33+
34+
1. Install Playwright:
35+
```bash
36+
npm init -y
37+
npm install --save-dev @playwright/test
38+
npx playwright install --with-deps chromium
39+
```
40+
41+
2. Start a local HTTP server:
42+
```bash
43+
cd preview
44+
python3 -m http.server 8080
45+
```
46+
47+
3. Run the screenshot script:
48+
```bash
49+
node screenshot.js
50+
```
51+
52+
### Automated Screenshot Generation
53+
54+
The GitHub Actions workflow (`.github/workflows/generate-web-controller-preview.yml`) automatically:
55+
- Triggers on changes to web controller files
56+
- Generates a fresh screenshot
57+
- Uploads it as an artifact
58+
- Commits it back to the repository
59+
60+
You can also manually trigger the workflow from the GitHub Actions tab.
61+
62+
## Customization
63+
64+
To customize the preview appearance:
65+
1. Edit `standalone.html` to change the UI layout or styling
66+
2. Edit `camera-placeholder.svg` to change the placeholder image
67+
3. Run the screenshot generation process to create a new preview
68+
69+
## Integration
70+
71+
The preview image is referenced in:
72+
- `LifeTrac-v25/README.md` - Main documentation
73+
- GitHub repository preview for the web controller feature

‎LifeTrac-v25/raspberry_pi_web_controller/preview/camera-placeholder.svg‎

Lines changed: 43 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)