beamclaw/flash.html at main · technicalaj/beamclaw · GitHub

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
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Flash an Arduino From Your Browser — No Arduino IDE | BeamClaw</title>
<meta name="description" content="One-click flash the BeamClaw firmware to an Arduino Uno straight from your browser over Web Serial — no Arduino IDE, no avrdude. A one-time step; after it, you program by light."/>
<meta name="keywords" content="flash Arduino from browser, Web Serial Arduino, flash Arduino without IDE, upload firmware browser, Arduino Uno bootloader browser"/>
<link rel="canonical" href="https://beam-claw.com/flash.html"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="Flash an Arduino from your browser — no IDE"/>
<meta property="og:description" content="One click installs BeamClaw on your Uno over Web Serial. Do it once; after that you program the board by light."/>
<meta property="og:image" content="assets/og.png"/>
<meta name="twitter:card" content="summary_large_image"/>
<link rel="icon" href="assets/favicon.svg" type="image/svg+xml"/><link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png"/><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"/>
<link rel="stylesheet" href="assets/style.css"/>
</head><body>
<div class="bg-deck"></div><div class="bg-grid"></div><div class="bg-scan"></div>
<canvas id="photons"></canvas>

<nav class="nav"><div class="wrap">
<a class="brand" href="index.html"><img src="assets/logo.svg" alt="BeamClaw" style="height:30px;width:auto;display:block"/></a>
<button class="navtoggle" aria-label="menu" onclick="document.getElementById('nl').classList.toggle('open')">☰</button>
<div class="links" id="nl"><a href="index.html">Home</a><a href="app.html">Console</a><a href="flash.html" class="active">Flash&nbsp;board</a><a href="docs.html">Docs</a></div>
<span class="sp"></span><a class="btn sm ghost" href="https://github.com/technicalaj/beamclaw" target="_blank" rel="noopener">GitHub ↗</a>
</div></nav>

<section style="border-top:0;padding-top:var(--s8)"><div class="wrap">
<div class="sec-head reveal">
  <span class="eyebrow">one-time setup · transmission bay</span>
  <h2 class="h-sec">⚡ Flash your Arduino — from the browser</h2>
  <p class="lead">Put the BeamClaw firmware on your Uno in one click, no Arduino IDE. After this you never flash again — you change behaviour by <b>light</b>.</p>
</div>

<div class="flashcard">
<div class="bay-frame panel reveal" style="padding:24px;margin-top:24px">
  <div class="bay-rail"></div>
  <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
    <h3 style="font-family:var(--disp);font-size:21px;margin:0">One-click imprint</h3>
    <span class="tag" id="wsStatus">checking…</span>
  </div>
  <p class="dim" style="margin:12px 0 16px;font-size:14px">Plug the Uno in via USB and click. Works in <b>desktop Chrome or Edge</b>. It's a <b>one-time</b> step — after this you beam new behaviours from <b>any</b> device, by light. The firmware is built into this page (nothing to download).</p>
  <button class="btn gold lg" id="flashBtn" disabled>⚡ Flash my Arduino</button>
  <div class="prog" style="margin-top:16px"><i id="fprog"></i></div>
  <div class="bstat" id="fstat" style="text-align:left"></div>
  <div class="log" id="log"><span class="d">// flash log appears here</span></div>
  <div id="done" style="display:none;margin-top:16px">
    <p class="dim" style="font-size:14px;margin:0 0 10px">Wire a light sensor: <code>S→A0</code>, <code>+→5V</code>, <code>−→GND</code>. Then:</p>
    <a class="btn primary" href="app.html">▶ Go beam an agent</a>
  </div>
  <p class="dim" style="font-size:13px;margin-top:14px">Board not showing up, or it won't connect? <a href="#" id="fhelpToggle">Fix it →</a></p>
  <div id="fhelp" style="display:none;margin-top:10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:14px 16px">
    <b style="font-size:14px">Can't connect / no port shows up</b>
    <ol class="steps2" style="margin:10px 0 0">
      <li><b>Use desktop Chrome or Edge</b> — on a Mac too (Safari can't flash; nor can Firefox, iPhone/iPad or Android).</li>
      <li><b>Use a DATA USB cable.</b> Many cheap cables are charge-only and show no port at all.</li>
      <li><b>Close the Arduino IDE and its Serial Monitor</b> (or any serial terminal) — they hold the port, so the browser can't open it. Then unplug-replug and click Flash again.</li>
      <li><b>Clone board? Install its USB driver:</b> <a href="https://www.wch-ic.com/downloads/CH341SER_MAC_ZIP.html" target="_blank" rel="noopener">CH340</a> or <a href="https://www.silabs.com/developer-tools/usb-to-uart-bridge-vcp-drivers" target="_blank" rel="noopener">CP210x</a> (most often needed on macOS).</li>
      <li><b>Still nothing?</b> Try another USB port/cable, or use the IDE method below with the <a href="firmware/beamclaw_agent.hex" download>.hex</a>.</li>
    </ol>
  </div>
</div>

<div class="panel reveal" style="padding:24px;margin-top:18px">
  <h3 style="font-family:var(--disp);font-size:19px;margin:0 0 6px">② Then wire the light sensor</h3>
  <p class="dim" style="font-size:14px;margin:0 0 14px">A 3-pin LDR module: <code>S to A0</code>, <code>+ to 5V</code>, <code>− to GND</code>. Point it at your screen, then open the console and beam a behaviour.</p>
  <img src="assets/wiring-diagram.svg" alt="Connection diagram: module pin 1/S to A0, 2/VCC to 5V, 3/GND to GND" loading="lazy" style="display:block;width:100%;max-width:640px;border-radius:12px;border:1px solid var(--line)"/>
  <p class="dim" style="font-size:12.5px;margin:10px 0 0">Pins on cheap modules vary — match by function: <b>signal/AO to A0</b>, <b>VCC/+ to 5V</b>, <b>GND/− to GND</b>.</p>
  <details style="margin-top:12px"><summary style="cursor:pointer;font-size:13px;color:#37e0c4">Show stylized view</summary>
    <img src="assets/wiring.svg" alt="Stylized BeamClaw wiring diagram" loading="lazy" style="display:block;width:100%;max-width:600px;border-radius:12px;border:1px solid var(--line);margin-top:10px"/>
  </details>
</div>

<div class="panel lift reveal d1" style="padding:24px;margin-top:18px">
  <h3 style="font-family:var(--disp);font-size:19px;margin:0 0 10px">No desktop Chrome? Flash with the Arduino IDE</h3>
  <ol class="steps2">
    <li>Install the free <a href="https://www.arduino.cc/en/software" target="_blank" rel="noopener">Arduino IDE</a>.</li>
    <li>Download the firmware: <a class="btn sm ghost" href="firmware/beamclaw_agent.ino" download>beamclaw_agent.ino</a></li>
    <li>Open it, choose <b>Tools → Board → Arduino Uno</b> + your port, click <b>Upload</b>.</li>
    <li>Serial Monitor @ <code>115200</code> should show <code>== BeamClaw AGENT VM v2 ==</code>. Wire the LDR, then beam a behaviour.</li>
  </ol>
  <p class="dim" style="font-size:13px;margin:8px 0 0">Advanced: prefer avrdude? Grab the compiled <a href="firmware/beamclaw_agent.hex" download>beamclaw_agent.hex</a>.</p>
</div>
<p class="dim" style="font-size:12.5px;margin-top:14px">In-browser flashing uses the <b>Web Serial API</b> (desktop Chrome/Edge). Your firmware never leaves your machine — it's pushed straight over USB.</p>
</div></div></section>

<footer style="border-top:1px solid var(--line);margin-top:40px;padding:28px 0">
<div class="wrap" style="display:flex;flex-wrap:wrap;gap:12px;align-items:center">
<a class="brand" href="index.html"><img src="assets/logo.svg" alt="BeamClaw" style="height:30px;width:auto;display:block"/></a>
<span style="flex:1"></span>
<a href="index.html">Home</a><a href="app.html">Console</a><a href="docs.html">Docs</a>
<div style="flex-basis:100%;color:var(--dim);font-size:12.5px;margin-top:8px">MIT licensed · firmware: 498 B RAM / 23% flash on an ATmega328 (Uno).</div>
</div></footer>

<script src="assets/fx.js"></script>
<script src="assets/firmware.js"></script>
<script src="assets/flash.js"></script>
</body></html>