Initial commit: StreamDeck Electron app
This commit is contained in:
Dávid Ádám
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules/
|
||||||
|
config.json
|
||||||
|
*.log
|
||||||
|
.DS_Store
|
||||||
@@ -0,0 +1,111 @@
|
|||||||
|
# StreamDeck – Custom Touchscreen Stream Deck
|
||||||
|
|
||||||
|
A native macOS Stream Deck replacement for HDMI touchscreens. Built with **Electron**, it stays on a dedicated secondary monitor and sends keystrokes/clipboard/shell commands to whatever app you're working in — **without stealing focus**.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- **Full grid of programmable buttons** – 6×3 configurable per page
|
||||||
|
- **Multiple pages** – swipe or tap arrows/dots to navigate
|
||||||
|
- **Realtime system monitor page** – CPU usage (overall + per-core), memory usage, uptime, load
|
||||||
|
- **Native macOS actions**:
|
||||||
|
- `keystroke` – sends keyboard shortcuts to your **currently active app** (e.g. `cmd+v`, `ctrl+up`, `space`)
|
||||||
|
- `copy` / `paste` / `cut` – clipboard operations via NSPasteboard
|
||||||
|
- `shell` – runs shell commands
|
||||||
|
- `osascript` – runs AppleScript
|
||||||
|
- `app` – opens any macOS application
|
||||||
|
- `url` – opens URLs in default browser
|
||||||
|
- `sleep` – puts Mac to sleep
|
||||||
|
- **Touchscreen-optimized** – large touch targets, frameless window, auto-fullscreen
|
||||||
|
- **No focus stealing** – app hides itself before sending keystrokes, so clipboard and shortcuts go to your previous app, not the StreamDeck
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
- **macOS** (tested on Sequoia 15.x)
|
||||||
|
- **Node.js** 18+ (for development / `npm install`)
|
||||||
|
- **Touchscreen** with USB touch controller (e.g. WCH `USB2IIC_CTP_CONTROL`)
|
||||||
|
- **Touch-Base / UPDD touch driver** – **required separately!** The touchscreen **will not work** without this driver on macOS. Download and install from [touch-base.com](https://www.touch-base.com/). After installation, use the UPDD Commander to map the touch device to your secondary monitor.
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Install dependencies
|
||||||
|
cd streamdeck
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# 2. Copy config template and customize
|
||||||
|
cp config.template.json config.json
|
||||||
|
# Edit config.json to set up your buttons
|
||||||
|
|
||||||
|
# 3. Run!
|
||||||
|
./start.sh # Electron app (touchscreen)
|
||||||
|
# or
|
||||||
|
./start.sh server # Web-based mode for testing in browser
|
||||||
|
```
|
||||||
|
|
||||||
|
For the Electron app:
|
||||||
|
|
||||||
|
- The window opens automatically on your **second monitor** (touchscreen)
|
||||||
|
- Fullscreen is enabled automatically on start
|
||||||
|
- Press **F11** to toggle fullscreen
|
||||||
|
- Press **F2** to show the debug event overlay
|
||||||
|
|
||||||
|
## Button Configuration
|
||||||
|
|
||||||
|
Edit `config.json`. Each button can have:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"label": "Button Name",
|
||||||
|
"icon": "🔔",
|
||||||
|
"color": "blue",
|
||||||
|
"actions": [
|
||||||
|
{ "type": "keystroke", "value": "cmd+v" },
|
||||||
|
{ "type": "shell", "value": "open -a Safari" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Available action types
|
||||||
|
|
||||||
|
| Type | Value | Effect |
|
||||||
|
|---|---|---|
|
||||||
|
| `keystroke` | `cmd+v`, `ctrl+shift+z`, `space`, `f2` | Sends keyboard shortcut to active app |
|
||||||
|
| `shell` | `open -a Safari` | Runs shell command in background |
|
||||||
|
| `osascript` | `set volume 50` | Runs AppleScript |
|
||||||
|
| `app` | `Visual Studio Code` | Opens application |
|
||||||
|
| `url` | `https://github.com` | Opens URL in browser |
|
||||||
|
| `copy` | _none_ | Copies selected text (Cmd+C) |
|
||||||
|
| `paste` | `optional text` | Pastes text (Cmd+V) |
|
||||||
|
| `cut` | _none_ | Cuts selected text (Cmd+X) |
|
||||||
|
| `sleep` | _none_ | Puts Mac to sleep |
|
||||||
|
|
||||||
|
### Key syntax
|
||||||
|
|
||||||
|
- Modifiers: `cmd`, `ctrl`, `alt`, `shift`
|
||||||
|
- Special keys: `up`, `down`, `left`, `right`, `space`, `return`, `tab`, `escape`, `f1`–`f12`
|
||||||
|
- Combine with `+` (e.g. `cmd+shift+z`, `ctrl+up`)
|
||||||
|
- Regular characters are typed literally (e.g. `a`, `1`, `Hello`)
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
streamdeck/
|
||||||
|
├── config.json # Your button configuration (local, not in git)
|
||||||
|
├── config.template.json # Template for config
|
||||||
|
├── electron-main.js # Electron main process (window, IPC, actions)
|
||||||
|
├── preload.js # Context bridge (renderer ↔ main)
|
||||||
|
├── server.js # Node.js web server for browser mode
|
||||||
|
├── package.json
|
||||||
|
├── start.sh # Convenience launcher
|
||||||
|
├── public/
|
||||||
|
│ ├── index.html
|
||||||
|
│ ├── app.js # Frontend logic
|
||||||
|
│ └── style.css # Touch-optimized UI
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
MIT
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"gridCols": 6,
|
||||||
|
"gridRows": 3,
|
||||||
|
"pages": [
|
||||||
|
{
|
||||||
|
"title": "General",
|
||||||
|
"buttons": [
|
||||||
|
{ "label": "Safari", "icon": "🌐", "color": "blue", "actions": [{ "type": "app", "value": "Safari" }] },
|
||||||
|
{ "label": "Terminal", "icon": "⬛", "color": "dark", "actions": [{ "type": "app", "value": "Terminal" }] },
|
||||||
|
{ "label": "VS Code", "icon": "💻", "color": "purple", "actions": [{ "type": "app", "value": "Visual Studio Code" }] },
|
||||||
|
{ "label": "Spotlight", "icon": "🔍", "color": "white", "actions": [{ "type": "keystroke", "value": "cmd+space" }] },
|
||||||
|
{ "label": "Mute", "icon": "🔇", "color": "orange", "actions": [{ "type": "keystroke", "value": "cmd+shift+m" }] },
|
||||||
|
{ "label": "Lock", "icon": "🔒", "color": "red", "actions": [{ "type": "shell", "value": "/System/Library/CoreServices/Menu\\ Extras/User.menu/Contents/Resources/CGSession -suspend" }] },
|
||||||
|
|
||||||
|
{ "label": "Copy", "icon": "📋", "color": "white", "actions": [{ "type": "keystroke", "value": "cmd+c" }] },
|
||||||
|
{ "label": "Paste", "icon": "📌", "color": "white", "actions": [{ "type": "keystroke", "value": "cmd+v" }] },
|
||||||
|
{ "label": "Cut", "icon": "✂️", "color": "orange", "actions": [{ "type": "keystroke", "value": "cmd+x" }] },
|
||||||
|
{ "label": "Save", "icon": "💾", "color": "blue", "actions": [{ "type": "keystroke", "value": "cmd+s" }] },
|
||||||
|
{ "label": "Undo", "icon": "↩️", "color": "teal", "actions": [{ "type": "keystroke", "value": "cmd+z" }] },
|
||||||
|
{ "label": "Redo", "icon": "↪️", "color": "teal", "actions": [{ "type": "keystroke", "value": "cmd+shift+z" }] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,400 @@
|
|||||||
|
/* ─── Electron Main Process ──────────────────────────────────────────────────
|
||||||
|
* StreamDeck – natív macOS app a touchscreen-re
|
||||||
|
*
|
||||||
|
* Képességek:
|
||||||
|
* - Ablak a 2. monitorra (ZL480X1920, 1920×480)
|
||||||
|
* - Kiosk mód (nincs Safari címsor, nincs fókusz probléma)
|
||||||
|
* - natív clipboard (copy/paste) – nem kell fókusz
|
||||||
|
* - Billentyűk küldése az aktív app-nak System Events-en keresztül
|
||||||
|
* - Shell parancsok, app indítás, URL megnyitás
|
||||||
|
* ──────────────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
const { app, BrowserWindow, ipcMain, clipboard, shell, globalShortcut, screen } = require('electron');
|
||||||
|
const path = require('path');
|
||||||
|
const { exec, execSync } = require('child_process');
|
||||||
|
const fs = require('fs');
|
||||||
|
const os = require('os');
|
||||||
|
|
||||||
|
/* ─── Config ───────────────────────────────────────────────────────────────── */
|
||||||
|
const CONFIG_PATH = path.join(__dirname, 'config.json');
|
||||||
|
let config = loadConfig();
|
||||||
|
|
||||||
|
function loadConfig() {
|
||||||
|
try {
|
||||||
|
return JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load config.json:', e.message);
|
||||||
|
return { gridCols: 6, gridRows: 3, pages: [] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Window ───────────────────────────────────────────────────────────────── */
|
||||||
|
let mainWindow = null;
|
||||||
|
|
||||||
|
function createWindow() {
|
||||||
|
const display = getTouchscreenDisplay();
|
||||||
|
|
||||||
|
mainWindow = new BrowserWindow({
|
||||||
|
x: display ? display.bounds.x : undefined,
|
||||||
|
y: display ? display.bounds.y : undefined,
|
||||||
|
width: display ? display.bounds.width : 1920,
|
||||||
|
height: display ? display.bounds.height : 480,
|
||||||
|
frame: false, // nincs címsor
|
||||||
|
fullscreen: false,
|
||||||
|
kiosk: false,
|
||||||
|
resizable: false,
|
||||||
|
alwaysOnTop: true, // mindig felül
|
||||||
|
skipTaskbar: true, // nem jelenik meg a Dock-ban
|
||||||
|
autoHideMenuBar: true, // menüsor elrejtése fullscreen-ben
|
||||||
|
webPreferences: {
|
||||||
|
preload: path.join(__dirname, 'preload.js'),
|
||||||
|
contextIsolation: true,
|
||||||
|
nodeIntegration: false,
|
||||||
|
sandbox: false,
|
||||||
|
},
|
||||||
|
title: 'StreamDeck',
|
||||||
|
backgroundColor: '#1a1a2e',
|
||||||
|
});
|
||||||
|
|
||||||
|
// A touchscreen méretére igazítva, pont a monitorra
|
||||||
|
if (display) {
|
||||||
|
mainWindow.setBounds({
|
||||||
|
x: display.bounds.x,
|
||||||
|
y: display.bounds.y,
|
||||||
|
width: display.bounds.width,
|
||||||
|
height: display.bounds.height,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
mainWindow.loadFile(path.join(__dirname, 'public', 'index.html'));
|
||||||
|
|
||||||
|
// DevTools kikapcsolva élesben
|
||||||
|
if (process.argv.includes('--dev')) {
|
||||||
|
mainWindow.webContents.openDevTools({ mode: 'detach' });
|
||||||
|
}
|
||||||
|
|
||||||
|
mainWindow.on('closed', () => { mainWindow = null; });
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTouchscreenDisplay() {
|
||||||
|
const displays = screen.getAllDisplays();
|
||||||
|
|
||||||
|
// Keressük a ZL480X1920 nevű monitort (vagy a 2. monitort)
|
||||||
|
for (const d of displays) {
|
||||||
|
if (d.size.width === 1920 && (d.size.height === 480 || d.size.height === 479)) {
|
||||||
|
console.log(`Found touchscreen display:`, d.label || d.id, d.bounds);
|
||||||
|
return d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Ha nem találjuk, a második monitor
|
||||||
|
if (displays.length >= 2) {
|
||||||
|
console.log(`Using second display:`, displays[1].label || displays[1].id);
|
||||||
|
return displays[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('No second display found, using primary');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Native Action Executor ──────────────────────────────────────────────────
|
||||||
|
* A config.json action típusok futtatása.
|
||||||
|
* A billentyűk az aktív (előző) app-nak mennek, nem a StreamDeck-nek.
|
||||||
|
* ───────────────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
async function executeAction(action) {
|
||||||
|
const { type, value } = action;
|
||||||
|
console.log(`Executing action: ${type} = "${value}"`);
|
||||||
|
|
||||||
|
// Billentyűzet action-ök: elrejtjük az ablakot, hogy a billentyűk
|
||||||
|
// az előzőleg aktív app-hoz menjenek, ne a StreamDeck-hez
|
||||||
|
const stealsFocus = ['keystroke', 'copy', 'paste', 'cut'].includes(type);
|
||||||
|
if (stealsFocus) {
|
||||||
|
app.hide();
|
||||||
|
await sleep(80);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
switch (type) {
|
||||||
|
|
||||||
|
/* ─── Keystroke → az előzőleg aktív app-nak megy ──────────────────── */
|
||||||
|
case 'keystroke': {
|
||||||
|
const parsed = parseKeystroke(value || '');
|
||||||
|
if (!parsed) break;
|
||||||
|
|
||||||
|
let osaCmd;
|
||||||
|
if (parsed.modifiers.length > 0) {
|
||||||
|
const mods = parsed.modifiers.join(' ');
|
||||||
|
osaCmd = `osascript -e 'tell application "System Events" to keystroke "${parsed.key}" using {${mods}}'`;
|
||||||
|
} else {
|
||||||
|
osaCmd = `osascript -e 'tell application "System Events" to keystroke "${parsed.key}"'`;
|
||||||
|
}
|
||||||
|
await execPromise(osaCmd);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Clipboard: copy ──────────────────────────────────────────────── */
|
||||||
|
case 'copy': {
|
||||||
|
await execPromise(`osascript -e 'tell application "System Events" to keystroke "c" using command down'`);
|
||||||
|
await sleep(100);
|
||||||
|
const text = clipboard.readText();
|
||||||
|
console.log(`Copied: "${text.substring(0, 80)}..."`);
|
||||||
|
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||||
|
mainWindow.webContents.send('clipboard-result', { action: 'copy', text });
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Clipboard: paste ─────────────────────────────────────────────── */
|
||||||
|
case 'paste': {
|
||||||
|
const stored = value || clipboard.readText();
|
||||||
|
clipboard.writeText(stored);
|
||||||
|
await execPromise(`osascript -e 'tell application "System Events" to keystroke "v" using command down'`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Clipboard: cut ───────────────────────────────────────────────── */
|
||||||
|
case 'cut': {
|
||||||
|
await execPromise(`osascript -e 'tell application "System Events" to keystroke "x" using command down'`);
|
||||||
|
await sleep(100);
|
||||||
|
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||||
|
mainWindow.webContents.send('clipboard-result', { action: 'cut', text: clipboard.readText() });
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Shell ────────────────────────────────────────────────────────── */
|
||||||
|
case 'shell': {
|
||||||
|
exec(value || '', {
|
||||||
|
timeout: 15000,
|
||||||
|
env: { ...process.env, PATH: '/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin' }
|
||||||
|
}, (err, stdout, stderr) => {
|
||||||
|
const output = (stdout || '') + (stderr ? '\n' + stderr : '');
|
||||||
|
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||||
|
mainWindow.webContents.send('shell-result', { type, value, output });
|
||||||
|
}
|
||||||
|
if (err) console.error('shell error:', err.message);
|
||||||
|
console.log('shell output:', output.substring(0, 200));
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── AppleScript ──────────────────────────────────────────────────── */
|
||||||
|
case 'osascript': {
|
||||||
|
await execPromise(`osascript -e '${(value || "").replace(/'/g, "'\\''")}'`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── App indítás ──────────────────────────────────────────────────── */
|
||||||
|
case 'app': {
|
||||||
|
shell.openPath(`/Applications/${value}.app`).catch(() => {
|
||||||
|
exec(`open -a '${(value || "").replace(/'/g, "'\\''")}'`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── URL megnyitás ────────────────────────────────────────────────── */
|
||||||
|
case 'url': {
|
||||||
|
if (value) shell.openExternal(value);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Sleep ────────────────────────────────────────────────────────── */
|
||||||
|
case 'sleep': {
|
||||||
|
exec('pmset sleepnow');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
default:
|
||||||
|
console.warn(`Unknown action type: ${type}`);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`Action failed [${type}]:`, e.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Visszahozzuk az ablakot
|
||||||
|
if (stealsFocus) {
|
||||||
|
await sleep(50);
|
||||||
|
app.show();
|
||||||
|
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||||
|
mainWindow.show();
|
||||||
|
mainWindow.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── IPC ──────────────────────────────────────────────────────────────────── */
|
||||||
|
ipcMain.handle('get-config', () => config);
|
||||||
|
ipcMain.handle('reload-config', () => {
|
||||||
|
config = loadConfig();
|
||||||
|
return config;
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('execute-action', async (event, action) => {
|
||||||
|
await executeAction(action);
|
||||||
|
return { ok: true };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('execute-actions', async (event, actions) => {
|
||||||
|
for (const action of actions) {
|
||||||
|
await executeAction(action);
|
||||||
|
await sleep(50); // kis késleltetés action-ök között
|
||||||
|
}
|
||||||
|
return { ok: true };
|
||||||
|
});
|
||||||
|
|
||||||
|
ipcMain.handle('get-clipboard-text', () => clipboard.readText());
|
||||||
|
ipcMain.handle('set-clipboard-text', (event, text) => clipboard.writeText(text));
|
||||||
|
ipcMain.handle('toggle-fullscreen', () => {
|
||||||
|
if (mainWindow && !mainWindow.isDestroyed()) {
|
||||||
|
const newState = !mainWindow.isFullScreen();
|
||||||
|
mainWindow.setFullScreen(newState);
|
||||||
|
return newState;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── System Stats ──────────────────────────────────────────────────────────
|
||||||
|
* Valós idejű CPU- és memóriafigyelés a Monitor oldalhoz.
|
||||||
|
* A CPU terhelést két mintavétel különbségéből számolja.
|
||||||
|
* ──────────────────────────────────────────────────────────────────────────── */
|
||||||
|
let cpuPrevSample = null;
|
||||||
|
|
||||||
|
function sampleCpuTimes() {
|
||||||
|
const cpus = os.cpus();
|
||||||
|
const total = { idle: 0, tick: 0 };
|
||||||
|
const cores = cpus.map(cpu => {
|
||||||
|
const tick = cpu.times.user + cpu.times.nice + cpu.times.sys + cpu.times.idle + cpu.times.irq;
|
||||||
|
const idle = cpu.times.idle;
|
||||||
|
total.idle += idle;
|
||||||
|
total.tick += tick;
|
||||||
|
return { tick, idle };
|
||||||
|
});
|
||||||
|
return { total, cores };
|
||||||
|
}
|
||||||
|
|
||||||
|
ipcMain.handle('get-system-stats', () => {
|
||||||
|
const memTotal = os.totalmem();
|
||||||
|
const memFree = os.freemem();
|
||||||
|
const memUsed = memTotal - memFree;
|
||||||
|
|
||||||
|
const current = sampleCpuTimes();
|
||||||
|
let cpuPercent = 0;
|
||||||
|
const perCore = [];
|
||||||
|
|
||||||
|
if (cpuPrevSample) {
|
||||||
|
// Overall CPU
|
||||||
|
const idleDelta = current.total.idle - cpuPrevSample.total.idle;
|
||||||
|
const tickDelta = current.total.tick - cpuPrevSample.total.tick;
|
||||||
|
cpuPercent = tickDelta > 0 ? Math.round((1 - idleDelta / tickDelta) * 1000) / 10 : 0;
|
||||||
|
|
||||||
|
// Per-core
|
||||||
|
current.cores.forEach((core, i) => {
|
||||||
|
const prevCore = cpuPrevSample.cores[i];
|
||||||
|
if (prevCore) {
|
||||||
|
const dTick = core.tick - prevCore.tick;
|
||||||
|
const dIdle = core.idle - prevCore.idle;
|
||||||
|
const pct = dTick > 0 ? Math.round((1 - dIdle / dTick) * 100) : 0;
|
||||||
|
perCore.push({ usage: Math.min(pct, 100) });
|
||||||
|
} else {
|
||||||
|
perCore.push({ usage: 0 });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
current.cores.forEach(() => perCore.push({ usage: 0 }));
|
||||||
|
}
|
||||||
|
|
||||||
|
cpuPrevSample = { total: current.total, cores: current.cores };
|
||||||
|
|
||||||
|
return {
|
||||||
|
cpu: {
|
||||||
|
usage: cpuPercent,
|
||||||
|
cores: current.cores.length,
|
||||||
|
perCore,
|
||||||
|
},
|
||||||
|
memory: {
|
||||||
|
total: memTotal,
|
||||||
|
used: memUsed,
|
||||||
|
free: memFree,
|
||||||
|
usagePercent: Math.round((memUsed / memTotal) * 100),
|
||||||
|
},
|
||||||
|
uptime: os.uptime(),
|
||||||
|
loadavg: os.loadavg(),
|
||||||
|
hostname: os.hostname(),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Global Shortcut: Escape kilépés kiosk-ból ─────────────────────────── */
|
||||||
|
app.whenReady().then(() => {
|
||||||
|
// StreamDeck ikon elrejtése a Dock-ból (overlay app)
|
||||||
|
app.dock && app.dock.hide();
|
||||||
|
createWindow();
|
||||||
|
|
||||||
|
// Ctrl+Cmd+F: fullscreen toggle
|
||||||
|
globalShortcut.register('Control+Command+F', () => {
|
||||||
|
if (mainWindow) {
|
||||||
|
mainWindow.setFullScreen(!mainWindow.isFullScreen());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// F11: toggle kiosk
|
||||||
|
globalShortcut.register('F11', () => {
|
||||||
|
if (mainWindow) {
|
||||||
|
mainWindow.setFullScreen(!mainWindow.isFullScreen());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Esc: ha fullscreen, kilép belőle
|
||||||
|
globalShortcut.register('Escape', () => {
|
||||||
|
if (mainWindow && mainWindow.isFullScreen()) {
|
||||||
|
mainWindow.setFullScreen(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('activate', () => {
|
||||||
|
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
app.on('window-all-closed', () => {
|
||||||
|
globalShortcut.unregisterAll();
|
||||||
|
app.quit();
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Helpers ──────────────────────────────────────────────────────────────── */
|
||||||
|
function execPromise(cmd) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
exec(cmd, {
|
||||||
|
timeout: 10000,
|
||||||
|
env: { ...process.env, PATH: '/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin' }
|
||||||
|
}, (err, stdout, stderr) => {
|
||||||
|
if (err) reject(err);
|
||||||
|
else resolve(stdout);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
|
||||||
|
|
||||||
|
function parseKeystroke(str) {
|
||||||
|
if (!str) return null;
|
||||||
|
const parts = str.toLowerCase().split('+');
|
||||||
|
const keyMap = {
|
||||||
|
'cmd': 'command down', 'command': 'command down',
|
||||||
|
'ctrl': 'control down', 'control': 'control down',
|
||||||
|
'alt': 'option down', 'option': 'option down',
|
||||||
|
'shift': 'shift down',
|
||||||
|
'up': 'up arrow', 'down': 'down arrow', 'left': 'left arrow', 'right': 'right arrow',
|
||||||
|
'return': 'return', 'enter': 'return', 'tab': 'tab', 'escape': 'escape',
|
||||||
|
'space': 'space', 'backspace': 'delete',
|
||||||
|
'del': 'delete', 'delete': 'delete',
|
||||||
|
'f1': 'f1', 'f2': 'f2', 'f3': 'f3', 'f4': 'f4', 'f5': 'f5',
|
||||||
|
'f6': 'f6', 'f7': 'f7', 'f8': 'f8', 'f9': 'f9', 'f10': 'f10',
|
||||||
|
'f11': 'f11', 'f12': 'f12',
|
||||||
|
};
|
||||||
|
|
||||||
|
const key = keyMap[parts[parts.length - 1]] || parts[parts.length - 1];
|
||||||
|
const modifiers = parts.slice(0, -1).map(p => keyMap[p]).filter(Boolean);
|
||||||
|
|
||||||
|
return { key, modifiers };
|
||||||
|
}
|
||||||
Generated
+1722
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"name": "streamdeck-custom",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Custom Stream Deck for HDMI touchscreen",
|
||||||
|
"main": "electron-main.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "electron .",
|
||||||
|
"electron": "electron .",
|
||||||
|
"server": "node server.js"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"ws": "^8.16.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"electron": "^33.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
+34
@@ -0,0 +1,34 @@
|
|||||||
|
/* ─── Preload Script ─────────────────────────────────────────────────────────
|
||||||
|
* Context bridge a renderer és main process között.
|
||||||
|
* Exponálja a natív API-kat a weboldalnak.
|
||||||
|
* ──────────────────────────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
|
const { contextBridge, ipcRenderer } = require('electron');
|
||||||
|
|
||||||
|
contextBridge.exposeInMainWorld('electronAPI', {
|
||||||
|
// Config
|
||||||
|
getConfig: () => ipcRenderer.invoke('get-config'),
|
||||||
|
reloadConfig: () => ipcRenderer.invoke('reload-config'),
|
||||||
|
|
||||||
|
// Action futtatás
|
||||||
|
executeAction: (action) => ipcRenderer.invoke('execute-action', action),
|
||||||
|
executeActions: (actions) => ipcRenderer.invoke('execute-actions', actions),
|
||||||
|
|
||||||
|
// Clipboard
|
||||||
|
getClipboardText: () => ipcRenderer.invoke('get-clipboard-text'),
|
||||||
|
setClipboardText: (text) => ipcRenderer.invoke('set-clipboard-text', text),
|
||||||
|
|
||||||
|
// System stats
|
||||||
|
getSystemStats: () => ipcRenderer.invoke('get-system-stats'),
|
||||||
|
|
||||||
|
// Fullscreen
|
||||||
|
toggleFullscreen: () => ipcRenderer.invoke('toggle-fullscreen'),
|
||||||
|
|
||||||
|
// Eredmény események (pl. shell output)
|
||||||
|
onShellResult: (callback) => {
|
||||||
|
ipcRenderer.on('shell-result', (event, data) => callback(data));
|
||||||
|
},
|
||||||
|
onClipboardResult: (callback) => {
|
||||||
|
ipcRenderer.on('clipboard-result', (event, data) => callback(data));
|
||||||
|
},
|
||||||
|
});
|
||||||
+485
@@ -0,0 +1,485 @@
|
|||||||
|
/* ─── State ────────────────────────────────────────────────────────────────── */
|
||||||
|
const IS_ELECTRON = typeof window !== 'undefined' && window.electronAPI !== undefined;
|
||||||
|
|
||||||
|
let config = { pages: [], gridCols: 5, gridRows: 3 };
|
||||||
|
let currentPage = 0;
|
||||||
|
let ws = null;
|
||||||
|
let wsReconnectTimer = null;
|
||||||
|
let btnExecuting = {}; // { id: setTimeout }
|
||||||
|
|
||||||
|
/* ─── DOM refs ────────────────────────────────────────────────────────────── */
|
||||||
|
const gridEl = document.getElementById('grid');
|
||||||
|
const navEl = document.getElementById('nav');
|
||||||
|
const titleEl = document.getElementById('page-title');
|
||||||
|
const wsStatusEl = document.getElementById('ws-status');
|
||||||
|
const pageIndicatorEl = document.getElementById('page-indicator');
|
||||||
|
const navPrevEl = document.getElementById('nav-prev');
|
||||||
|
const navNextEl = document.getElementById('nav-next');
|
||||||
|
|
||||||
|
/* ─── Config + Monitor page ───────────────────────────────────────────────── */
|
||||||
|
// A Monitor page index: mindig az utolsó oldal (config.pages.length után hozzáfűzve)
|
||||||
|
const MONITOR_PAGE_LABEL = '📊';
|
||||||
|
|
||||||
|
async function loadConfig() {
|
||||||
|
try {
|
||||||
|
if (IS_ELECTRON) {
|
||||||
|
config = await window.electronAPI.getConfig();
|
||||||
|
} else {
|
||||||
|
const res = await fetch('/api/config');
|
||||||
|
config = await res.json();
|
||||||
|
}
|
||||||
|
if (!config.pages || config.pages.length === 0) {
|
||||||
|
config.pages = [{ title: 'Hello', buttons: [] }];
|
||||||
|
}
|
||||||
|
// Virtuális Monitor oldal hozzáfűzése (nem mentjük config.json-ba)
|
||||||
|
config.pages.push({
|
||||||
|
title: 'Monitor',
|
||||||
|
buttons: [],
|
||||||
|
_isMonitor: true,
|
||||||
|
});
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to load config:', e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── WebSocket (böngésző módban) ────────────────────────────────────────── */
|
||||||
|
function connectWS() {
|
||||||
|
if (IS_ELECTRON) {
|
||||||
|
// Electron: nincs szükség WS-re
|
||||||
|
document.body.classList.add('connected');
|
||||||
|
wsStatusEl.title = 'Electron app – natív';
|
||||||
|
wsStatusEl.className = 'ws-online';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ws && ws.readyState === WebSocket.OPEN) return;
|
||||||
|
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||||
|
ws = new WebSocket(`${proto}//${location.host}`);
|
||||||
|
|
||||||
|
ws.onopen = () => {
|
||||||
|
console.log('◉ WebSocket connected');
|
||||||
|
if (wsReconnectTimer) { clearTimeout(wsReconnectTimer); wsReconnectTimer = null; }
|
||||||
|
document.body.classList.add('connected');
|
||||||
|
wsStatusEl.className = 'ws-online';
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onclose = () => {
|
||||||
|
console.log('◉ WebSocket disconnected');
|
||||||
|
document.body.classList.remove('connected');
|
||||||
|
wsStatusEl.className = 'ws-offline';
|
||||||
|
ws = null;
|
||||||
|
wsReconnectTimer = setTimeout(connectWS, 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onmessage = (ev) => {
|
||||||
|
try {
|
||||||
|
const msg = JSON.parse(ev.data);
|
||||||
|
if (msg.type === 'connected') console.log(' ✓', msg.message);
|
||||||
|
} catch (e) { /* ignore */ }
|
||||||
|
};
|
||||||
|
|
||||||
|
ws.onerror = () => { /* onclose will fire next */ };
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Send press ──────────────────────────────────────────────────────────── */
|
||||||
|
function sendPress(button) {
|
||||||
|
const actions = button.actions || [];
|
||||||
|
if (actions.length === 0) return;
|
||||||
|
|
||||||
|
if (IS_ELECTRON) {
|
||||||
|
// Elektron: natív IPC-n keresztül
|
||||||
|
window.electronAPI.executeActions(actions).catch(console.error);
|
||||||
|
} else if (ws && ws.readyState === WebSocket.OPEN) {
|
||||||
|
ws.send(JSON.stringify({
|
||||||
|
type: 'press',
|
||||||
|
actions: actions,
|
||||||
|
id: button.id || button.label
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Visual feedback
|
||||||
|
const btnId = button.id || button.label;
|
||||||
|
if (btnExecuting[btnId]) clearTimeout(btnExecuting[btnId]);
|
||||||
|
delete btnExecuting[btnId];
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Render grid (or monitor dashboard) ─────────────────────────────────── */
|
||||||
|
let monitorInterval = null;
|
||||||
|
|
||||||
|
function renderPage(pageIdx) {
|
||||||
|
const page = config.pages[pageIdx];
|
||||||
|
if (!page) return;
|
||||||
|
|
||||||
|
currentPage = pageIdx;
|
||||||
|
titleEl.textContent = page.title || '';
|
||||||
|
|
||||||
|
// Ha Monitor oldal, rendereld a dashboard-ot
|
||||||
|
if (page._isMonitor) {
|
||||||
|
renderMonitorPage();
|
||||||
|
renderNav();
|
||||||
|
updateNavArrows();
|
||||||
|
updatePageIndicator();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Biztonság: ha volt monitor poll, állítsd le
|
||||||
|
stopMonitorPoll();
|
||||||
|
|
||||||
|
// Build grid
|
||||||
|
gridEl.innerHTML = '';
|
||||||
|
gridEl.style.gridTemplateColumns = `repeat(${config.gridCols || 5}, 1fr)`;
|
||||||
|
gridEl.style.gridTemplateRows = `repeat(${config.gridRows || 3}, 1fr)`;
|
||||||
|
gridEl.classList.remove('drag-scroll');
|
||||||
|
|
||||||
|
const buttons = page.buttons || [];
|
||||||
|
|
||||||
|
buttons.forEach((btn, i) => {
|
||||||
|
const el = document.createElement('button');
|
||||||
|
el.className = 'button';
|
||||||
|
el.dataset.index = i;
|
||||||
|
|
||||||
|
// Color
|
||||||
|
if (btn.color) el.classList.add(`color-${btn.color}`);
|
||||||
|
|
||||||
|
// Icon
|
||||||
|
if (btn.icon) {
|
||||||
|
const iconSpan = document.createElement('span');
|
||||||
|
iconSpan.className = 'icon';
|
||||||
|
iconSpan.textContent = btn.icon;
|
||||||
|
el.appendChild(iconSpan);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Label
|
||||||
|
if (btn.label) {
|
||||||
|
const labelSpan = document.createElement('span');
|
||||||
|
labelSpan.className = 'label';
|
||||||
|
labelSpan.textContent = btn.label;
|
||||||
|
el.appendChild(labelSpan);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Background image
|
||||||
|
if (btn.image) {
|
||||||
|
el.style.backgroundImage = `url(${btn.image})`;
|
||||||
|
el.style.backgroundSize = 'cover';
|
||||||
|
el.style.backgroundPosition = 'center';
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Event handlers (multiple redundancies for different touchscreen drivers) ──
|
||||||
|
function fireAction(e) {
|
||||||
|
// Log to debug overlay
|
||||||
|
if (window.debugLog) window.debugLog(e.type, btn.label || '(no label)');
|
||||||
|
// Visual feedback
|
||||||
|
el.classList.add('pressed');
|
||||||
|
setTimeout(() => el.classList.remove('pressed'), 150);
|
||||||
|
// Send action to server
|
||||||
|
sendPress(btn);
|
||||||
|
}
|
||||||
|
|
||||||
|
el.addEventListener('pointerdown', fireAction);
|
||||||
|
el.addEventListener('mousedown', fireAction);
|
||||||
|
el.addEventListener('click', (e) => { e.preventDefault(); fireAction(e); });
|
||||||
|
el.addEventListener('touchstart', (e) => {
|
||||||
|
// Some touchscreens ONLY send touchstart
|
||||||
|
fireAction(e);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Colspan / rowspan (via CSS grid)
|
||||||
|
if (btn.colspan) el.style.gridColumn = `span ${btn.colspan}`;
|
||||||
|
if (btn.rowspan) el.style.gridRow = `span ${btn.rowspan}`;
|
||||||
|
|
||||||
|
// Size classes for easier styling
|
||||||
|
if (btn.width) el.style.width = btn.width;
|
||||||
|
if (btn.height) el.style.height = btn.height;
|
||||||
|
|
||||||
|
// Empty button (spacer)
|
||||||
|
if (btn.empty) {
|
||||||
|
el.style.visibility = 'hidden';
|
||||||
|
el.style.pointerEvents = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
gridEl.appendChild(el);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Navigation dots, arrows, page indicator
|
||||||
|
renderNav();
|
||||||
|
updateNavArrows();
|
||||||
|
updatePageIndicator();
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Monitor dashboard ─────────────────────────────────────────────────────
|
||||||
|
* Realtime CPU és memória grafikonok. Csak Electron módban működik.
|
||||||
|
* ──────────────────────────────────────────────────────────────────────────── */
|
||||||
|
function renderMonitorPage() {
|
||||||
|
gridEl.innerHTML = '';
|
||||||
|
gridEl.style.gridTemplateColumns = '1fr';
|
||||||
|
gridEl.style.gridTemplateRows = '1fr';
|
||||||
|
gridEl.classList.remove('drag-scroll');
|
||||||
|
|
||||||
|
// Container
|
||||||
|
const dash = document.createElement('div');
|
||||||
|
dash.id = 'monitor-dashboard';
|
||||||
|
dash.innerHTML = `
|
||||||
|
<div class="monitor-section" id="monitor-cpu">
|
||||||
|
<div class="monitor-title">CPU</div>
|
||||||
|
<div class="monitor-bar-bg"><div class="monitor-bar monitor-bar-cpu" id="cpu-bar" style="width:0%"></div></div>
|
||||||
|
<div class="monitor-value" id="cpu-value">—</div>
|
||||||
|
<div class="monitor-cores" id="cpu-cores"></div>
|
||||||
|
</div>
|
||||||
|
<div class="monitor-section" id="monitor-mem">
|
||||||
|
<div class="monitor-title">MEMORY</div>
|
||||||
|
<div class="monitor-bar-bg"><div class="monitor-bar monitor-bar-mem" id="mem-bar" style="width:0%"></div></div>
|
||||||
|
<div class="monitor-value" id="mem-value">—</div>
|
||||||
|
</div>
|
||||||
|
<div class="monitor-section" id="monitor-sys">
|
||||||
|
<div class="monitor-title">SYSTEM</div>
|
||||||
|
<div class="monitor-line" id="monitor-uptime">Uptime: —</div>
|
||||||
|
<div class="monitor-line" id="monitor-load">Load: —</div>
|
||||||
|
<div class="monitor-line" id="monitor-host">Host: —</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
gridEl.appendChild(dash);
|
||||||
|
|
||||||
|
// Start polling
|
||||||
|
startMonitorPoll();
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopMonitorPoll() {
|
||||||
|
if (monitorInterval) {
|
||||||
|
clearInterval(monitorInterval);
|
||||||
|
monitorInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function startMonitorPoll() {
|
||||||
|
stopMonitorPoll();
|
||||||
|
|
||||||
|
if (!IS_ELECTRON) {
|
||||||
|
document.getElementById('monitor-cpu') &&
|
||||||
|
(document.getElementById('monitor-cpu').innerHTML = '<div class="monitor-title">CPU</div><div style="color:#666;padding:10px">Only available in Electron mode</div>');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function update() {
|
||||||
|
try {
|
||||||
|
const stats = await window.electronAPI.getSystemStats();
|
||||||
|
if (!stats) return;
|
||||||
|
|
||||||
|
// CPU
|
||||||
|
const cpuEl = document.getElementById('cpu-bar');
|
||||||
|
const cpuVal = document.getElementById('cpu-value');
|
||||||
|
const cpuCores = document.getElementById('cpu-cores');
|
||||||
|
if (cpuEl) cpuEl.style.width = Math.min(stats.cpu.usage, 100) + '%';
|
||||||
|
if (cpuVal) cpuVal.textContent = stats.cpu.usage.toFixed(1) + '%';
|
||||||
|
|
||||||
|
if (cpuCores && stats.cpu.perCore) {
|
||||||
|
let html = '';
|
||||||
|
stats.cpu.perCore.forEach((core, i) => {
|
||||||
|
const pct = Math.min(core.usage || 0, 100);
|
||||||
|
html += `<div class="core-bar-bg"><span class="core-label">C${i}</span><div class="core-bar-fill" style="width:${pct}%"></div><span class="core-pct">${pct}%</span></div>`;
|
||||||
|
});
|
||||||
|
cpuCores.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Memory
|
||||||
|
const memEl = document.getElementById('mem-bar');
|
||||||
|
const memVal = document.getElementById('mem-value');
|
||||||
|
if (memEl) memEl.style.width = Math.min(stats.memory.usagePercent, 100) + '%';
|
||||||
|
if (memVal) {
|
||||||
|
const usedGB = (stats.memory.used / 1024 / 1024 / 1024).toFixed(1);
|
||||||
|
const totalGB = (stats.memory.total / 1024 / 1024 / 1024).toFixed(1);
|
||||||
|
const color = stats.memory.usagePercent > 85 ? '#f87171' : stats.memory.usagePercent > 65 ? '#fbbf24' : '#4ade80';
|
||||||
|
memVal.innerHTML = `${usedGB} GB / ${totalGB} GB <span style="color:${color}">(${stats.memory.usagePercent}%)</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// System info
|
||||||
|
const uptimeEl = document.getElementById('monitor-uptime');
|
||||||
|
const loadEl = document.getElementById('monitor-load');
|
||||||
|
const hostEl = document.getElementById('monitor-host');
|
||||||
|
if (uptimeEl) {
|
||||||
|
const days = Math.floor(stats.uptime / 86400);
|
||||||
|
const hrs = Math.floor((stats.uptime % 86400) / 3600);
|
||||||
|
const mins = Math.floor((stats.uptime % 3600) / 60);
|
||||||
|
uptimeEl.textContent = `Uptime: ${days}d ${hrs}h ${mins}m`;
|
||||||
|
}
|
||||||
|
if (loadEl) {
|
||||||
|
loadEl.textContent = `Load: ${stats.loadavg.map(v => v.toFixed(2)).join(', ')}`;
|
||||||
|
}
|
||||||
|
if (hostEl) {
|
||||||
|
hostEl.textContent = `Host: ${stats.hostname}`;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Monitor update error:', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
monitorInterval = setInterval(update, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderNav() {
|
||||||
|
navEl.innerHTML = '';
|
||||||
|
config.pages.forEach((page, i) => {
|
||||||
|
const dot = document.createElement('button');
|
||||||
|
dot.className = 'nav-dot';
|
||||||
|
dot.dataset.index = i;
|
||||||
|
if (i === currentPage) dot.classList.add('active');
|
||||||
|
|
||||||
|
function gotoPage(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
renderPage(i);
|
||||||
|
}
|
||||||
|
dot.addEventListener('click', gotoPage);
|
||||||
|
dot.addEventListener('touchstart', (e) => {
|
||||||
|
// For touchscreen drivers that only send touchstart, not click
|
||||||
|
gotoPage(e);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
navEl.appendChild(dot);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Fullscreen toggle ──────────────────────────────────────────────────── */
|
||||||
|
document.getElementById('fullscreen-btn').addEventListener('click', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (IS_ELECTRON) {
|
||||||
|
await window.electronAPI.toggleFullscreen();
|
||||||
|
} else if (!document.fullscreenElement) {
|
||||||
|
await document.documentElement.requestFullscreen().catch(() => {});
|
||||||
|
} else {
|
||||||
|
await document.exitFullscreen().catch(() => {});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// Auto-fullscreen Electron indításkor
|
||||||
|
if (IS_ELECTRON) {
|
||||||
|
window.electronAPI.toggleFullscreen();
|
||||||
|
} else {
|
||||||
|
// Böngésző: első touch-ra fullscreen
|
||||||
|
document.addEventListener('touchstart', () => {
|
||||||
|
if (!document.fullscreenElement && document.documentElement.requestFullscreen) {
|
||||||
|
document.documentElement.requestFullscreen().catch(() => {});
|
||||||
|
}
|
||||||
|
}, { once: true });
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateNavArrows() {
|
||||||
|
navPrevEl.disabled = currentPage <= 0;
|
||||||
|
navNextEl.disabled = currentPage >= config.pages.length - 1;
|
||||||
|
navPrevEl.style.opacity = navPrevEl.disabled ? '0.15' : '0.3';
|
||||||
|
navNextEl.style.opacity = navNextEl.disabled ? '0.15' : '0.3';
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePageIndicator() {
|
||||||
|
pageIndicatorEl.textContent = `${currentPage + 1} / ${config.pages.length}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Navigation arrow handlers ──────────────────────────────────────────────
|
||||||
|
function goToPrevPage(e) {
|
||||||
|
if (currentPage > 0) renderPage(currentPage - 1);
|
||||||
|
}
|
||||||
|
function goToNextPage(e) {
|
||||||
|
if (currentPage < config.pages.length - 1) renderPage(currentPage + 1);
|
||||||
|
}
|
||||||
|
navPrevEl.addEventListener('click', goToPrevPage);
|
||||||
|
navPrevEl.addEventListener('touchstart', (e) => { goToPrevPage(e); }, { passive: true });
|
||||||
|
navNextEl.addEventListener('click', goToNextPage);
|
||||||
|
navNextEl.addEventListener('touchstart', (e) => { goToNextPage(e); }, { passive: true });
|
||||||
|
|
||||||
|
/* ─── Swipe gesture for page navigation ────────────────────────────────────
|
||||||
|
* Egyszerűsített verzió: NEM vár pointermove/touchmove eseményekre.
|
||||||
|
* Közvetlenül a felengedéskor méri a távolságot a lenyomás pontjától.
|
||||||
|
* Ez azért kell, mert egyes touchscreen-ek (pl. WCH USB touch) NEM
|
||||||
|
* küldenek mozgás eseményeket (pointermove/touchmove).
|
||||||
|
* ──────────────────────────────────────────────────────────────────────────── */
|
||||||
|
let swipeStartX = 0;
|
||||||
|
let swipeStartY = 0;
|
||||||
|
let swipeDownTime = 0;
|
||||||
|
let swipeTarget = null;
|
||||||
|
|
||||||
|
function handleSwipeEnd(endX, endY, target) {
|
||||||
|
const dx = endX - swipeStartX;
|
||||||
|
const dy = endY - swipeStartY;
|
||||||
|
const elapsed = Date.now() - swipeDownTime;
|
||||||
|
|
||||||
|
// Nem swipe ha: túl kis távolság (>20px), vagy túl lassú (>500ms),
|
||||||
|
// vagy nem elég vízszintes, vagy gombról indult
|
||||||
|
if (Math.abs(dx) < 20 || elapsed > 500) return;
|
||||||
|
if (Math.abs(dx) < Math.abs(dy) * 1.5) return; // nem elég vízszintes
|
||||||
|
if (target && target.closest('.button')) return; // gombról indult
|
||||||
|
|
||||||
|
if (dx > 0 && currentPage > 0) renderPage(currentPage - 1);
|
||||||
|
else if (dx < 0 && currentPage < config.pages.length - 1) renderPage(currentPage + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pointer events – minden touchscreen ezt küldi (UPDD driver is)
|
||||||
|
document.addEventListener('pointerdown', (e) => {
|
||||||
|
swipeStartX = e.screenX;
|
||||||
|
swipeStartY = e.screenY;
|
||||||
|
swipeDownTime = Date.now();
|
||||||
|
swipeTarget = e.target;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
document.addEventListener('pointerup', (e) => {
|
||||||
|
handleSwipeEnd(e.screenX, e.screenY, swipeTarget);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// Touch events – egyes eszközök ezt küldik pointer helyett
|
||||||
|
document.addEventListener('touchstart', (e) => {
|
||||||
|
swipeStartX = e.changedTouches[0].screenX;
|
||||||
|
swipeStartY = e.changedTouches[0].screenY;
|
||||||
|
swipeDownTime = Date.now();
|
||||||
|
swipeTarget = e.target;
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
document.addEventListener('touchend', (e) => {
|
||||||
|
handleSwipeEnd(
|
||||||
|
e.changedTouches[0].screenX,
|
||||||
|
e.changedTouches[0].screenY,
|
||||||
|
swipeTarget
|
||||||
|
);
|
||||||
|
}, { passive: true });
|
||||||
|
|
||||||
|
// ← → keyboard nav
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'ArrowRight' && currentPage < config.pages.length - 1) renderPage(currentPage + 1);
|
||||||
|
if (e.key === 'ArrowLeft' && currentPage > 0) renderPage(currentPage - 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Document-level event logger (for troubleshooting touch) ──────────── */
|
||||||
|
function docLog(e) {
|
||||||
|
window.debugLog(`📄 ${e.type}`, `target:${e.target?.tagName} pt:${e.pointerType || '-'} btn:${e.which || e.button || 0}`);
|
||||||
|
}
|
||||||
|
document.addEventListener('pointerdown', docLog);
|
||||||
|
document.addEventListener('pointerup', docLog);
|
||||||
|
document.addEventListener('mousedown', docLog);
|
||||||
|
document.addEventListener('mouseup', docLog);
|
||||||
|
document.addEventListener('click', docLog);
|
||||||
|
document.addEventListener('touchstart', docLog);
|
||||||
|
document.addEventListener('touchend', docLog);
|
||||||
|
|
||||||
|
/* ─── Debug overlay ──────────────────────────────────────────────────────── */
|
||||||
|
const debugEl = document.getElementById('debug-overlay');
|
||||||
|
let debugCount = 0;
|
||||||
|
window.debugLog = function(type, label) {
|
||||||
|
const now = new Date();
|
||||||
|
const t = now.toLocaleTimeString();
|
||||||
|
const entry = `[${t}] ${type.padEnd(15)} ${label || ''}`;
|
||||||
|
debugEl.innerHTML += `<div>${entry}</div>`;
|
||||||
|
debugEl.scrollTop = debugEl.scrollHeight;
|
||||||
|
if (++debugCount > 100) { debugEl.innerHTML = debugEl.innerHTML.split('</div>').slice(-50).join('</div>'); }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Press F2 to toggle debug overlay
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'F2') {
|
||||||
|
debugEl.style.display = debugEl.style.display === 'none' ? 'block' : 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* ─── Init ────────────────────────────────────────────────────────────────── */
|
||||||
|
(async function init() {
|
||||||
|
await loadConfig();
|
||||||
|
renderPage(0);
|
||||||
|
connectWS();
|
||||||
|
})();
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, viewport-fit=cover">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<title>StreamDeck</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<!-- Page indicator / header -->
|
||||||
|
<div id="header">
|
||||||
|
<span id="ws-status" class="ws-offline">●</span>
|
||||||
|
<span id="page-title"></span>
|
||||||
|
<button id="fullscreen-btn">⛶</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button grid with arrow overlays -->
|
||||||
|
<div id="grid-wrapper">
|
||||||
|
<div id="grid"></div>
|
||||||
|
<button id="nav-prev" class="nav-arrow">‹</button>
|
||||||
|
<button id="nav-next" class="nav-arrow">›</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Page navigation dots -->
|
||||||
|
<div id="nav"></div>
|
||||||
|
|
||||||
|
<!-- Page indicator text -->
|
||||||
|
<div id="page-indicator"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="debug-overlay" style="display:none; position:fixed; bottom:0; left:0; right:0; background:rgba(0,0,0,0.85); color:#0f0; font:11px monospace; padding:6px; max-height:80px; overflow-y:auto; z-index:999; pointer-events:none;"></div>
|
||||||
|
<script src="app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,359 @@
|
|||||||
|
/* ─── Reset ────────────────────────────────────────────────────────────────── */
|
||||||
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
html, body {
|
||||||
|
width: 100%; height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #1a1a2e;
|
||||||
|
color: #fff;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
touch-action: manipulation;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Layout ──────────────────────────────────────────────────────────────── */
|
||||||
|
#app {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 10px;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#header {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #888;
|
||||||
|
padding: 2px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.7;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ws-status {
|
||||||
|
font-size: 10px;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
#ws-status.ws-online { color: #4ade80; }
|
||||||
|
#ws-status.ws-offline { color: #f87171; }
|
||||||
|
|
||||||
|
#fullscreen-btn {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #555;
|
||||||
|
color: #888;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 8px;
|
||||||
|
line-height: 1.4;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
#fullscreen-btn:active { background: rgba(255,255,255,0.1); }
|
||||||
|
|
||||||
|
.button {
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #16213e;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 10px;
|
||||||
|
transition: all 0.1s ease;
|
||||||
|
box-shadow: 0 3px 12px rgba(0,0,0,0.4);
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button .icon {
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button .label {
|
||||||
|
font-size: 16px;
|
||||||
|
opacity: 0.95;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pressed state */
|
||||||
|
.button:active, .button.pressed {
|
||||||
|
transform: scale(0.92);
|
||||||
|
filter: brightness(1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Color variants */
|
||||||
|
.button.color-blue { background: #0f3460; }
|
||||||
|
.button.color-green { background: #1b4332; }
|
||||||
|
.button.color-red { background: #5c1a1a; }
|
||||||
|
.button.color-purple { background: #3b1f6e; }
|
||||||
|
.button.color-orange { background: #5c3a1a; }
|
||||||
|
.button.color-teal { background: #1a4a4a; }
|
||||||
|
.button.color-pink { background: #5c1a3a; }
|
||||||
|
.button.color-yellow { background: #5c4a1a; color: #ffe066; }
|
||||||
|
.button.color-white { background: #2a2a3e; }
|
||||||
|
.button.color-dark { background: #0d0d1a; }
|
||||||
|
|
||||||
|
/* Transparent (image only) */
|
||||||
|
.button.color-transparent { background: transparent; box-shadow: none; }
|
||||||
|
.button.color-transparent:active { filter: brightness(1.5); }
|
||||||
|
|
||||||
|
/* ─── Grid wrapper with side arrows ──────────────────────────────────────── */
|
||||||
|
#grid-wrapper {
|
||||||
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
gap: 10px;
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-arrow {
|
||||||
|
position: absolute;
|
||||||
|
top: 0; bottom: 0;
|
||||||
|
width: 56px;
|
||||||
|
border: none;
|
||||||
|
background: rgba(255,255,255,0.05);
|
||||||
|
color: rgba(255,255,255,0.35);
|
||||||
|
font-size: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 10;
|
||||||
|
transition: all 0.2s;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.nav-arrow:active { background: rgba(255,255,255,0.15); color: #fff; }
|
||||||
|
#nav-prev { left: 0; border-radius: 0 10px 10px 0; }
|
||||||
|
#nav-next { right: 0; border-radius: 10px 0 0 10px; }
|
||||||
|
|
||||||
|
/* ─── Navigation dots ─────────────────────────────────────────────────────── */
|
||||||
|
#nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 8px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dot {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #444;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
touch-action: manipulation;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dot:active {
|
||||||
|
background: #666;
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dot.active {
|
||||||
|
background: #4a9eff;
|
||||||
|
border-color: #6bb4ff;
|
||||||
|
box-shadow: 0 0 10px #4a9eff;
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Page indicator text ────────────────────────────────────────────────── */
|
||||||
|
#page-indicator {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #555;
|
||||||
|
padding: 2px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Responsive ──────────────────────────────────────────────────────────── */
|
||||||
|
/* Ultrawide landscape (e.g. 1920×480) — the touchscreen */
|
||||||
|
@media (min-aspect-ratio: 3/1) {
|
||||||
|
.button { padding: 10px 14px; }
|
||||||
|
.button .icon { font-size: 48px; }
|
||||||
|
.button .label { font-size: 16px; }
|
||||||
|
#app { padding: 8px 12px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Small portrait (e.g. 1024×768) */
|
||||||
|
@media (max-aspect-ratio: 4/3) {
|
||||||
|
.button { border-radius: 20px; }
|
||||||
|
.button .icon { font-size: 56px; }
|
||||||
|
.button .label { font-size: 20px; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Animations ──────────────────────────────────────────────────────────── */
|
||||||
|
@keyframes flash {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.5; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.executing {
|
||||||
|
animation: flash 0.3s ease 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Drag scroll (for pages with many rows) ──────────────────────────────── */
|
||||||
|
#grid.drag-scroll {
|
||||||
|
overflow-y: auto;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#grid.drag-scroll::-webkit-scrollbar {
|
||||||
|
width: 3px;
|
||||||
|
}
|
||||||
|
#grid.drag-scroll::-webkit-scrollbar-track {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
#grid.drag-scroll::-webkit-scrollbar-thumb {
|
||||||
|
background: #555;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ─── Monitor dashboard ───────────────────────────────────────────────────── */
|
||||||
|
#monitor-dashboard {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
grid-template-rows: 1fr 1fr;
|
||||||
|
gap: 8px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-section {
|
||||||
|
background: #16213e;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px 14px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-title {
|
||||||
|
font-size: 11px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
color: #888;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-bar-bg {
|
||||||
|
height: 20px;
|
||||||
|
background: #0d1b2a;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-bar {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
transition: width 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-bar-cpu { background: linear-gradient(90deg, #4a9eff, #6bb4ff); }
|
||||||
|
.monitor-bar-mem { background: linear-gradient(90deg, #4ade80, #6ee7a0); }
|
||||||
|
|
||||||
|
.monitor-value {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Per-core bars */
|
||||||
|
.monitor-cores {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 3px;
|
||||||
|
flex: 1;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-bar-bg {
|
||||||
|
height: 14px;
|
||||||
|
background: #0d1b2a;
|
||||||
|
border-radius: 7px;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-label {
|
||||||
|
position: absolute;
|
||||||
|
left: 6px;
|
||||||
|
font-size: 8px;
|
||||||
|
color: #aaa;
|
||||||
|
z-index: 1;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(90deg, #4a9eff, #7bb8ff);
|
||||||
|
transition: width 0.6s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.core-pct {
|
||||||
|
position: absolute;
|
||||||
|
right: 6px;
|
||||||
|
font-size: 8px;
|
||||||
|
color: #ddd;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* System info section */
|
||||||
|
#monitor-sys {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.monitor-line {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #bbb;
|
||||||
|
padding: 3px 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ultrawide tuning */
|
||||||
|
@media (min-aspect-ratio: 3/1) {
|
||||||
|
#monitor-dashboard { gap: 6px; padding: 2px; }
|
||||||
|
.monitor-section { padding: 6px 10px; border-radius: 8px; }
|
||||||
|
.monitor-title { font-size: 10px; }
|
||||||
|
.monitor-value { font-size: 16px; }
|
||||||
|
.monitor-bar-bg { height: 16px; }
|
||||||
|
.core-bar-bg { height: 12px; }
|
||||||
|
.monitor-line { font-size: 11px; }
|
||||||
|
}
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
const express = require('express');
|
||||||
|
const WebSocket = require('ws');
|
||||||
|
const http = require('http');
|
||||||
|
const path = require('path');
|
||||||
|
const { exec, spawn } = require('child_process');
|
||||||
|
const fs = require('fs');
|
||||||
|
|
||||||
|
// ─── Config ───────────────────────────────────────────────────────────────────
|
||||||
|
const PORT = 8090;
|
||||||
|
const CONFIG_PATH = path.join(__dirname, 'config.json');
|
||||||
|
|
||||||
|
let config = { pages: [], gridCols: 5, gridRows: 3 };
|
||||||
|
function loadConfig() {
|
||||||
|
try {
|
||||||
|
config = JSON.parse(fs.readFileSync(CONFIG_PATH, 'utf-8'));
|
||||||
|
console.log(` ✓ Config loaded: ${config.pages.length} page(s), ${config.gridCols}×${config.gridRows} grid`);
|
||||||
|
} catch (e) {
|
||||||
|
console.log(' ! No config.json found, using defaults');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
loadConfig();
|
||||||
|
|
||||||
|
// ─── Express server ────────────────────────────────────────────────────────────
|
||||||
|
const app = express();
|
||||||
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
app.use(express.json());
|
||||||
|
|
||||||
|
// API endpoint to get config
|
||||||
|
app.get('/api/config', (req, res) => res.json(config));
|
||||||
|
|
||||||
|
// API endpoint to reload config
|
||||||
|
app.post('/api/reload', (req, res) => {
|
||||||
|
loadConfig();
|
||||||
|
res.json({ ok: true, pages: config.pages.length });
|
||||||
|
});
|
||||||
|
|
||||||
|
// API endpoint to run AppleScript
|
||||||
|
app.post('/api/osascript', (req, res) => {
|
||||||
|
const { script } = req.body;
|
||||||
|
if (!script) return res.status(400).json({ error: 'missing script' });
|
||||||
|
exec(`osascript -e '${script.replace(/'/g, "'\\''")}'`, (err, stdout, stderr) => {
|
||||||
|
if (err && stderr) console.error(' ✗ osascript error:', stderr.trim());
|
||||||
|
res.json({ ok: !err, stdout: stdout?.trim(), stderr: stderr?.trim() });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API endpoint to run shell commands
|
||||||
|
app.post('/api/exec', (req, res) => {
|
||||||
|
const { command } = req.body;
|
||||||
|
if (!command) return res.status(400).json({ error: 'missing command' });
|
||||||
|
exec(command, { timeout: 5000 }, (err, stdout, stderr) => {
|
||||||
|
if (err && stderr) console.error(' ✗ exec error:', stderr.trim());
|
||||||
|
res.json({ ok: !err, stdout: stdout?.trim(), stderr: stderr?.trim() });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API endpoint to open an app
|
||||||
|
app.post('/api/open', (req, res) => {
|
||||||
|
const { app, url } = req.body;
|
||||||
|
if (url) {
|
||||||
|
exec(`open '${url.replace(/'/g, "'\\''")}'`, (err) => {
|
||||||
|
res.json({ ok: !err });
|
||||||
|
});
|
||||||
|
} else if (app) {
|
||||||
|
exec(`open -a '${app.replace(/'/g, "'\\''")}'`, (err) => {
|
||||||
|
res.json({ ok: !err });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
res.status(400).json({ error: 'missing app or url' });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── WebSocket server ──────────────────────────────────────────────────────────
|
||||||
|
const server = http.createServer(app);
|
||||||
|
const wss = new WebSocket.Server({ server });
|
||||||
|
|
||||||
|
function runAction(action, ws) {
|
||||||
|
if (!action) return;
|
||||||
|
|
||||||
|
const { type, value } = action;
|
||||||
|
console.log(` ▶ ${type}: ${value?.substring(0, 60)}`);
|
||||||
|
|
||||||
|
switch (type) {
|
||||||
|
case 'keystroke': {
|
||||||
|
// Simulate keyboard shortcut via AppleScript
|
||||||
|
// value: "cmd+c", "cmd+shift+4", "cmd+space", etc.
|
||||||
|
const parts = value.split('+').map(s => s.trim().toLowerCase());
|
||||||
|
const key = parts.pop();
|
||||||
|
const specialKeys = {
|
||||||
|
'cmd': 'command down', 'ctrl': 'control down', 'alt': 'option down',
|
||||||
|
'shift': 'shift down', 'option': 'option down', 'command': 'command down',
|
||||||
|
'control': 'control down', 'fn': 'fn down',
|
||||||
|
};
|
||||||
|
// Map key names to AppleScript key codes or names
|
||||||
|
const keyMap = {
|
||||||
|
'enter': 'return', 'return': 'return', 'tab': 'tab', 'space': 'space',
|
||||||
|
'escape': 'escape', 'esc': 'escape', 'backspace': 'backspace',
|
||||||
|
'delete': 'backspace', 'up': 'up', 'down': 'down', 'left': 'left',
|
||||||
|
'right': 'right', 'home': 'home', 'end': 'end', 'pageup': 'page up',
|
||||||
|
'pagedown': 'page down',
|
||||||
|
};
|
||||||
|
|
||||||
|
const appleKey = keyMap[key] || key;
|
||||||
|
const pressedKeys = parts.map(k => specialKeys[k] || k).join(', ');
|
||||||
|
const script = pressedKeys
|
||||||
|
? `tell application "System Events" to keystroke "${appleKey}" using {${pressedKeys}}`
|
||||||
|
: `tell application "System Events" to keystroke "${appleKey}"`;
|
||||||
|
|
||||||
|
exec(`osascript -e '${script.replace(/'/g, "'\\''")}'`, (err) => {
|
||||||
|
if (err) console.error(` ✗ keystroke error: ${err.message}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'app': {
|
||||||
|
exec(`open -a '${(value || '').replace(/'/g, "'\\''")}'`, (err) => {
|
||||||
|
if (err) console.error(` ✗ open app error: ${err.message}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'url': {
|
||||||
|
exec(`open '${(value || '').replace(/'/g, "'\\''")}'`, (err) => {
|
||||||
|
if (err) console.error(` ✗ open url error: ${err.message}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'shell': {
|
||||||
|
exec(value, { timeout: 5000 }, (err, stdout, stderr) => {
|
||||||
|
if (err) console.error(` ✗ shell error: ${err.message}`);
|
||||||
|
else if (stdout?.trim()) console.log(` ↳ ${stdout.trim().substring(0, 80)}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'osascript': {
|
||||||
|
exec(`osascript -e '${(value || '').replace(/'/g, "'\\''")}'`, (err, stdout, stderr) => {
|
||||||
|
if (err && stderr) console.error(` ✗ osascript error: ${stderr.trim()}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'volume': {
|
||||||
|
const vol = parseInt(value);
|
||||||
|
if (!isNaN(vol)) {
|
||||||
|
exec(`osascript -e 'set volume output volume ${vol}'`, (err) => {
|
||||||
|
if (err) console.error(` ✗ volume error: ${err.message}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'brightness': {
|
||||||
|
// Requires external tool or AppleScript
|
||||||
|
exec(`osascript -e 'tell application "System Events"' -e 'repeat 20 times' -e 'key code 107' -e 'end repeat' -e 'end tell'`, () => {});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'sleep': {
|
||||||
|
exec('pmset displaysleepnow', (err) => {
|
||||||
|
if (err) console.error(` ✗ sleep error: ${err.message}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
case 'screenshot': {
|
||||||
|
const script = value === 'window'
|
||||||
|
? 'tell application "System Events" to keystroke "3" using {command down, shift down}' // full screen
|
||||||
|
: value === 'area'
|
||||||
|
? 'tell application "System Events" to keystroke "4" using {command down, shift down}' // area
|
||||||
|
: 'tell application "System Events" to keystroke "5" using {command down, shift down}'; // screen record
|
||||||
|
exec(`osascript -e '${script}'`, (err) => {
|
||||||
|
if (err) console.error(` ✗ screenshot error: ${err.message}`);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
default: {
|
||||||
|
if (ws) ws.send(JSON.stringify({ type: 'error', message: `Unknown action type: ${type}` }));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
wss.on('connection', (ws) => {
|
||||||
|
console.log(' ◉ Browser connected via WebSocket');
|
||||||
|
ws.send(JSON.stringify({ type: 'connected', message: 'Stream Deck ready' }));
|
||||||
|
|
||||||
|
ws.on('message', (raw) => {
|
||||||
|
try {
|
||||||
|
const msg = JSON.parse(raw.toString());
|
||||||
|
console.log(` ◀ ${msg.type}${msg.id ? ` [${msg.id}]` : ''}`);
|
||||||
|
|
||||||
|
switch (msg.type) {
|
||||||
|
case 'press':
|
||||||
|
if (msg.actions) {
|
||||||
|
// Execute multiple actions sequentially
|
||||||
|
const executeNext = (index) => {
|
||||||
|
if (index >= msg.actions.length) return;
|
||||||
|
const action = msg.actions[index];
|
||||||
|
const delay = action.delay || 0;
|
||||||
|
if (delay > 0) {
|
||||||
|
setTimeout(() => { runAction(action, ws); executeNext(index + 1); }, delay);
|
||||||
|
} else {
|
||||||
|
runAction(action, ws);
|
||||||
|
executeNext(index + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
executeNext(0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 'ping':
|
||||||
|
ws.send(JSON.stringify({ type: 'pong' }));
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ws.send(JSON.stringify({ type: 'error', message: `Unknown message type: ${msg.type}` }));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(' ✗ Invalid message:', e.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.on('close', () => console.log(' ◉ Browser disconnected'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// ─── Start ─────────────────────────────────────────────────────────────────────
|
||||||
|
server.listen(PORT, '0.0.0.0', () => {
|
||||||
|
console.log('');
|
||||||
|
console.log('╔══════════════════════════════════════════════╗');
|
||||||
|
console.log('║ 🎛 Custom Stream Deck Server ║');
|
||||||
|
console.log('╠══════════════════════════════════════════════╣');
|
||||||
|
console.log(`║ Local: http://localhost:${PORT} ║`);
|
||||||
|
console.log(`║ Network: http://192.168.1.231:${PORT} ║`);
|
||||||
|
console.log('╠══════════════════════════════════════════════╣');
|
||||||
|
console.log(`║ Pages: ${config.pages.length} Grid: ${config.gridCols}×${config.gridRows} ║`);
|
||||||
|
console.log('╚══════════════════════════════════════════════╝');
|
||||||
|
console.log('');
|
||||||
|
});
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
#!/bin/bash
|
||||||
|
# StreamDeck — Electron app (touchscreen) / Web server (böngésző)
|
||||||
|
DIR="$(cd "$(dirname "$0")" && pwd)"
|
||||||
|
cd "$DIR"
|
||||||
|
|
||||||
|
case "${1:-electron}" in
|
||||||
|
server|node)
|
||||||
|
pkill -f "node $DIR/server.js" 2>/dev/null
|
||||||
|
nohup node server.js > /tmp/streamdeck.log 2>&1 &
|
||||||
|
echo "StreamDeck server started (PID $!)"
|
||||||
|
echo " → http://localhost:8090"
|
||||||
|
echo " → Log: /tmp/streamdeck.log"
|
||||||
|
echo " → Stop: pkill -f \"node $DIR/server.js\""
|
||||||
|
;;
|
||||||
|
electron|app|--dev)
|
||||||
|
echo "Starting StreamDeck Electron app..."
|
||||||
|
if [ "$1" = "--dev" ]; then
|
||||||
|
npx electron . --dev
|
||||||
|
else
|
||||||
|
npx electron .
|
||||||
|
fi
|
||||||
|
;;
|
||||||
|
*)
|
||||||
|
echo "Usage: $0 [electron|server|--dev]"
|
||||||
|
echo " electron (default) Start native macOS app on touchscreen"
|
||||||
|
echo " server Start web server (browser mode)"
|
||||||
|
echo " --dev Electron app with DevTools"
|
||||||
|
exit 1
|
||||||
|
;;
|
||||||
|
esac
|
||||||
Reference in New Issue
Block a user