|
| 1 | +#pragma once |
| 2 | +#include "global.hpp" |
| 3 | + |
| 4 | +#include <WiFi.h> |
| 5 | +#include <AsyncTCP.h> |
| 6 | +#include <ESPAsyncWebServer.h> |
| 7 | +#include <ESPmDNS.h> |
| 8 | +#include <Adafruit_SSD1306.h> |
| 9 | + |
| 10 | +AsyncWebServer server(80); |
| 11 | +static uint8_t display_copy[(128 * 64) / 8]; |
| 12 | + |
| 13 | +void Headless_Thread(void *pvParameters) |
| 14 | +{ |
| 15 | + while (true) |
| 16 | + { |
| 17 | + memcpy(display_copy, display.getBuffer(), sizeof(display_copy)); |
| 18 | + vTaskDelay(33 / portTICK_PERIOD_MS); |
| 19 | + } |
| 20 | +} |
| 21 | + |
| 22 | +void Headless_Setup(bool on) |
| 23 | +{ |
| 24 | + if (!on) return; |
| 25 | + |
| 26 | + WiFi.mode(WIFI_AP_STA); |
| 27 | + WiFi.softAP("Pocket Puter", "deveclipse"); |
| 28 | + MDNS.begin("pocketputer"); |
| 29 | + |
| 30 | + server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { |
| 31 | + request->send_P(200, "text/html", R"rawliteral( |
| 32 | +<!DOCTYPE html> |
| 33 | +<html> |
| 34 | +<head> |
| 35 | +<meta charset="utf-8"> |
| 36 | +<title>Pocket Puter Display</title> |
| 37 | +<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> |
| 38 | +<style> |
| 39 | +html, body { |
| 40 | + margin: 0; |
| 41 | + padding: 0; |
| 42 | + background: black; |
| 43 | + overflow: hidden; |
| 44 | + height: 100%; |
| 45 | + touch-action: none; |
| 46 | + -webkit-user-select: none; |
| 47 | + user-select: none; |
| 48 | +} |
| 49 | +body { |
| 50 | + display: flex; |
| 51 | + flex-direction: column; |
| 52 | + align-items: center; |
| 53 | + justify-content: center; |
| 54 | +} |
| 55 | +canvas { |
| 56 | + background: black; |
| 57 | + image-rendering: pixelated; |
| 58 | + width: 100vw; |
| 59 | + height: calc(100vw * 0.5); |
| 60 | + max-height: 90vh; |
| 61 | + max-width: calc(90vh * 2); |
| 62 | + border: 2px solid #444; |
| 63 | + border-radius: 10px; |
| 64 | + touch-action: none; |
| 65 | +} |
| 66 | +.buttons { |
| 67 | + display: flex; |
| 68 | + justify-content: space-around; |
| 69 | + width: 100%; |
| 70 | + max-width: 400px; |
| 71 | + margin-top: 15px; |
| 72 | +} |
| 73 | +button { |
| 74 | + flex: 1; |
| 75 | + margin: 5px; |
| 76 | + padding: 15px; |
| 77 | + font-size: 20px; |
| 78 | + background: #222; |
| 79 | + color: white; |
| 80 | + border: 2px solid #555; |
| 81 | + border-radius: 10px; |
| 82 | + outline: none; |
| 83 | + touch-action: manipulation; |
| 84 | + -webkit-user-select: none; |
| 85 | + user-select: none; |
| 86 | +} |
| 87 | +button:active { |
| 88 | + background: #0f0; |
| 89 | + color: black; |
| 90 | +} |
| 91 | +#refreshBtn { |
| 92 | + position: fixed; |
| 93 | + top: 10px; |
| 94 | + right: 10px; |
| 95 | + width: 40px; |
| 96 | + height: 40px; |
| 97 | + background: #222; |
| 98 | + border: 1px solid #666; |
| 99 | + border-radius: 50%; |
| 100 | + color: white; |
| 101 | + font-size: 22px; |
| 102 | + display: flex; |
| 103 | + align-items: center; |
| 104 | + justify-content: center; |
| 105 | + line-height: 1; |
| 106 | + opacity: 0.6; |
| 107 | + transition: opacity 0.2s, background 0.2s; |
| 108 | +} |
| 109 | +#refreshBtn:hover { |
| 110 | + opacity: 1; |
| 111 | + background: #0ff; |
| 112 | + color: black; |
| 113 | +} |
| 114 | +</style> |
| 115 | +</head> |
| 116 | +<body> |
| 117 | +<canvas id="disp" width="128" height="64"></canvas> |
| 118 | +<div class="buttons"> |
| 119 | + <button ontouchstart="press(0)" ontouchend="release(0)" onmousedown="press(0)" onmouseup="release(0)">Left</button> |
| 120 | + <button ontouchstart="press(1)" ontouchend="release(1)" onmousedown="press(1)" onmouseup="release(1)">Center</button> |
| 121 | + <button ontouchstart="press(2)" ontouchend="release(2)" onmousedown="press(2)" onmouseup="release(2)">Right</button> |
| 122 | +</div> |
| 123 | +<button id="refreshBtn" onclick="location.reload()">⟳</button> |
| 124 | +<script> |
| 125 | +document.addEventListener('gesturestart', e => e.preventDefault()); |
| 126 | +document.addEventListener('gesturechange', e => e.preventDefault()); |
| 127 | +document.addEventListener('gestureend', e => e.preventDefault()); |
| 128 | +document.addEventListener('dblclick', e => e.preventDefault()); |
| 129 | +
|
| 130 | +const c = document.getElementById('disp'); |
| 131 | +const ctx = c.getContext('2d', {alpha:false}); |
| 132 | +const imgData = new ImageData(128,64); |
| 133 | +let failCount = 0; |
| 134 | +
|
| 135 | +async function update() { |
| 136 | + try { |
| 137 | + const res = await fetch('/buffer'); |
| 138 | + if (!res.ok) throw new Error("Bad response"); |
| 139 | + const buf = new Uint8Array(await res.arrayBuffer()); |
| 140 | + failCount = 0; |
| 141 | +
|
| 142 | + for (let page = 0; page < 8; page++) { |
| 143 | + for (let x = 0; x < 128; x++) { |
| 144 | + const byte = buf[page * 128 + x]; |
| 145 | + for (let bit = 0; bit < 8; bit++) { |
| 146 | + const y = page * 8 + bit; |
| 147 | + const v = (byte >> bit) & 1 ? 255 : 0; |
| 148 | + const i = (y * 128 + x) * 4; |
| 149 | + imgData.data[i] = v; |
| 150 | + imgData.data[i+1] = v; |
| 151 | + imgData.data[i+2] = v; |
| 152 | + imgData.data[i+3] = 255; |
| 153 | + } |
| 154 | + } |
| 155 | + } |
| 156 | +
|
| 157 | + // Create bitmap and draw once — prevents flicker |
| 158 | + const bmp = await createImageBitmap(imgData); |
| 159 | + ctx.drawImage(bmp, 0, 0); |
| 160 | + } catch(e) { |
| 161 | + failCount++; |
| 162 | + if (failCount > 30) location.reload(); |
| 163 | + } |
| 164 | +} |
| 165 | +setInterval(update, 33); // ~30fps |
| 166 | +
|
| 167 | +function press(id){ fetch(`/btn?id=${id}&state=1`); } |
| 168 | +function release(id){ fetch(`/btn?id=${id}&state=0`); } |
| 169 | +</script> |
| 170 | +</body> |
| 171 | +</html> |
| 172 | +)rawliteral"); |
| 173 | + }); |
| 174 | + |
| 175 | + server.on("/buffer", HTTP_GET, [](AsyncWebServerRequest *request) { |
| 176 | + AsyncWebServerResponse *response = request->beginResponse_P( |
| 177 | + 200, "application/octet-stream", display_copy, sizeof(display_copy)); |
| 178 | + request->send(response); |
| 179 | + }); |
| 180 | + |
| 181 | + server.on("/btn", HTTP_GET, [](AsyncWebServerRequest *request) { |
| 182 | + if (!request->hasParam("id") || !request->hasParam("state")) { |
| 183 | + request->send(400, "text/plain", "Missing params"); |
| 184 | + return; |
| 185 | + } |
| 186 | + int id = request->getParam("id")->value().toInt(); |
| 187 | + int state = request->getParam("state")->value().toInt(); |
| 188 | + bool pressed = (state == 1); |
| 189 | + |
| 190 | + if (id == 0) virtualButtons.left = pressed; |
| 191 | + else if (id == 1) virtualButtons.center = pressed; |
| 192 | + else if (id == 2) virtualButtons.right = pressed; |
| 193 | + |
| 194 | + request->send(200, "text/plain", "OK"); |
| 195 | + }); |
| 196 | + |
| 197 | + server.begin(); |
| 198 | + |
| 199 | + xTaskCreatePinnedToCore( |
| 200 | + Headless_Thread, |
| 201 | + "Headless", |
| 202 | + 4096, |
| 203 | + NULL, |
| 204 | + 1, |
| 205 | + NULL, |
| 206 | + 1 |
| 207 | + ); |
| 208 | +} |
0 commit comments