PineapplePager-Themer

KO | EN

gitlite — search

#javascript #react #ai #typescript #go #android #machine-learning #rust #deep-learning #windows #cli #kubernetes #awesome-list #ios

PineapplePager-Themer

(★ 19)

A web-based theme editor for the Hak5 WiFi Pineapple Pager. Create, customize, and export themes without needing to manually edit JSON files or manage image assets. By GainSec

PineapplePager-Themer 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# WiFi Pineapple Pager Themer

A web-based theme editor for the [Hak5 WiFi Pineapple Pager](https://shop.hak5.org/). Create, customize, and export themes without needing to manually edit JSON files or manage image assets.

**This should be considered a beta, and although its functional in my testing, you can very easily mess up your theme. I highly suggest having an SSH connection to your pager so you can change the theme in case it crashes when you to load your custom one.**

**Created by [GainSec](https://gainsec.com/)**

---

## Features

- **Visual Theme Editor** — Real-time preview of your theme as you make changes
- **Color Palette Editor** — Customize all 30+ theme colors with visual color pickers
- **Asset Management** — Upload and manage dashboard icons, status bar icons, spinners, boot animations, and dialog backgrounds
- **Interactive Layout Editor** — Drag and resize dashboard elements directly in the preview
- **Component Editor** — Edit component JSON files with a visual property editor or raw JSON mode
- **Deep Validation** — Validate asset paths, coordinates, and color palettes before export
- **Theme Import** — Import existing themes from ZIP files to use as a starting point
- **Theme Browser** — Browse and load themes from a local folder
- **Color Extraction** — Extract color palettes from any image automatically
- **Batch Upload** — Upload multiple assets at once with smart filename auto-detection
- **Image Processing** — Automatic resizing with crop, fit, or stretch options
- **Template Presets** — Start with pre-configured color schemes (Cyberpunk, Retro, Ocean, etc.)
- **Global Search** — Quickly find any asset, component, or color with `Ctrl+F`
- **Export to ZIP** — Export complete, ready-to-install theme packages

---

## Screenshots

### Asset Browser
Manage all theme assets in one place. Upload custom icons, backgrounds, and animations with automatic format conversion and resizing.

### Color Palette & Dialog Preview
Customize all theme colors and see live previews of dialogs, alerts, and UI elements.

### Component Editor
Edit component JSON files with a visual property editor or switch to raw JSON mode for full control.

### Interactive Layout Editor
Drag and resize dashboard elements directly in the preview. Adjust icon positions and sizes visually.

### Boot Animation & Metadata
Set your theme name, author info, and customize the boot animation sequence.

---

## 🚀 Quick Start

### Online
Visit the hosted version at: *Coming soon*

### Local
1. Clone or download this repository
2. Open `index.html` in a web browser
3. No server required — runs entirely in the browser

```bash
git clone https://github.com/GainSec/PineapplePager-Themer.git
cd PineapplePager-Themer
open index.html  # or just double-click the file
```

---

## Usage Guide

### Creating a Theme

1. **Set Metadata** — Enter your theme name, author, version, and description in the Metadata tab
2. **Customize Colors** — Adjust the color palette in the Colors tab, or extract colors from an image
3. **Upload Assets** — Replace default icons with your own custom artwork in the Assets tab
4. **Edit Components** — Fine-tune component properties or raw JSON in the Components tab
5. **Adjust Layout** — Click "Edit Layout" to drag and resize dashboard elements
6. **Export** — Click "Export Theme" to download a ready-to-install ZIP file

### Importing an Existing Theme

1. Click "Load ZIP" in the header
2. Select a theme ZIP file
3. The theme will be loaded with all assets, colors, and component customizations
4. Make your modifications and export as a new theme

### Installing Themes on Pineapple Pager

1. Export your theme from the editor (downloads as ZIP)
2. Extract the ZIP file
3. Copy the theme folder to your Pineapple Pager's `/root/themes/` directory
4. Select the theme from **Settings > Display > Theme**

---

## Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Ctrl/Cmd + S` | Export theme |
| `Ctrl/Cmd + O` | Import theme ZIP |
| `Ctrl/Cmd + F` | Global search |
| `Ctrl/Cmd + B` | Browse themes |
| `Ctrl/Cmd + N` | New theme from template |
| `Escape` | Close modals |

---

## Asset Dimensions Reference

For best results, use these dimensions for your custom assets:

### Dashboard
| Asset | Dimensions |
|-------|------------|
| Background | 480 × 222 px |
| Icons (alerts, payloads, etc.) | 33 × 29 px |
| Item Background | 63 × 62 px |
| Selection Highlight | 71 × 72 px |

### Status Bar
| Asset | Dimensions |
|-------|------------|
| Battery/Volume/Brightness | 20 × 20 px |
| GHz Band Indicators | 20 × 20 px |

### Animations
| Asset | Dimensions |
|-------|------------|
| Boot Animation Frames | 480 × 222 px |
| Spinner Frames | 220 × 156 px |

### Dialogs & Backgrounds
| Asset | Dimensions |
|-------|------------|
| Full Screen Backgrounds | 480 × 222 px |
| Dialog Backgrounds | 400 × 180 px |

> **Tip:** The editor automatically resizes uploaded images. You can choose between crop (fill), fit (letterbox), or stretch modes.

---

## Technical Details

### Browser Compatibility
- Chrome/Edge (recommended)
- Firefox
- Safari

### Dependencies
- [JSZip](https://stuk.github.io/jszip/) — ZIP file handling
- [FileSaver.js](https://github.com/eligrey/FileSaver.js/) — File downloads

### Data Storage
Theme data is automatically saved to browser localStorage. Your work persists between sessions until you clear browser data.

---

## License

This project is licensed under the MIT License — see the LICENSE file for details.

**Attribution Required**: If you use or modify this tool, please include credit to GainSec and a link to https://gainsec.com/

---

## Credits

- Created by [GainSec](https://gainsec.com/)
- Built for the [Hak5 WiFi Pineapple Pager](https://shop.hak5.org/)

---

## Disclaimer

This is an unofficial community tool and is not affiliated with or endorsed by Hak5. WiFi Pineapple and Pineapple Pager are trademarks of Hak5 LLC.

PineapplePager-Themer

PineapplePager-Themer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

PineapplePager-Themer

PineapplePager-Themer 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README