blob: 23a9a21e4e9497b2c83afc266df2ea86b3c27ca5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
# SpeedSync
A fast photo preview app for FlashAir SD cards. Replaces the default FlashAir browser interface with a smoother, lower-friction experience for reviewing photos directly from your camera.
### The problem
The official FlashAir app (iOS/Android) has a thumbnail grid, but the experience is frustrating:
- **Manual refresh required** — and it takes a long time because it reloads everything
- **Out-of-order loading** — thumbnails don't load newest-first
- **No preloading** — tapping a photo means waiting for the full-size image to download from scratch
- **Clunky image viewer** — slow transitions, awkward gestures
### The solution
SpeedSync is a lightweight static webapp that lives on the FlashAir SD card itself. It replaces the official app entirely — connect your phone to the card's WiFi, open the page, and browse your photos in a responsive grid with smart thumbnail loading, newest-first ordering, and background preloading of full-size images.
---
## Development
### Prerequisites
- Node.js (for building)
- WSL2 (if developing on Windows — the SD card mounts via `drvfs`)
### Install
```bash
npm install
```
### Dev server
```bash
npm run dev
```
Opens a local Vite dev server for UI iteration. FlashAir API calls will fail without a live card connection — this is for layout and styling work.
### Build & deploy to SD card
```bash
bin/build
```
Builds the app and copies the output to `/mnt/f/speedsync/` on the SD card. If the card isn't mounted, it will mount `F:` automatically (prompts for sudo).
To use a different drive letter:
```bash
bin/build /mnt/g
```
### Unmount
```bash
bin/unmount
```
Safely unmounts the SD card and cleans up. Run this before physically removing the card.
### Testing workflow
The fastest way to iterate:
1. Plug the SD card into your PC via a USB adapter
2. Connect your phone/tablet to the FlashAir's WiFi
3. Run `bin/build` to deploy
4. On your phone, navigate to `http://flashair/speedsync/index.html`
5. Refresh the page after each build
**Note:** The FlashAir WiFi can be finicky when first inserted into a USB card reader — it may take a few attempts before the wireless subsystem activates. Once it starts working, it tends to stay on reliably.
---
## Architecture
- **Svelte 5** with runes for reactivity
- **Tailwind CSS 4** + **daisyUI 5** for styling (CMYK light / Black dark theme)
- **Vite** for bundling — outputs plain static files
- **No server-side code** — the app runs entirely in the browser and talks to the FlashAir's built-in CGI API
### FlashAir API endpoints used
| Endpoint | Purpose |
|---|---|
| `command.cgi?op=100&DIR=...` | List files in a directory |
| `command.cgi?op=101&DIR=...` | Get file count |
| `command.cgi?op=102` | Check if card has been updated |
| `thumbnail.cgi?/path/to/file.jpg` | Get JPEG thumbnail |
| `/path/to/file.jpg` | Direct file download |
### Deployed file structure on the SD card
```
/speedsync/
index.html
assets/
*.js
*.css
```
Accessible at `http://flashair/speedsync/index.html` when connected to the FlashAir WiFi.
|
