How Blocks Connect to the Drone
Overview
Section titled “Overview”Between your blocks and the drone there is a transport problem, and it is the single biggest design constraint of block coding. This page explains it in plain terms, because it determines what you need to install before the first block can fly.
The two hard facts
Section titled “The two hard facts”- A browser cannot send raw UDP. The drone is controlled over UDP (the protocol the stock firmware uses). JavaScript in a page can open a WebSocket but not a raw UDP socket — so something must sit in the middle and translate.
- Connected to the drone means no internet. The drone runs its own Wi-Fi hotspot. Once your computer joins it, it loses the internet connection — so any editor that lives on a cloud website will not load.
Any block-coding product for this class of drone has to answer both facts. There are only three honest answers.
Option A — local bridge
Section titled “Option A — local bridge”- How it works — a small program runs on the computer. It serves the block editor locally and forwards WebSocket traffic to UDP towards the drone.
- What you need — install one small program once; the editor then works with no internet connection.
- Best for — home use and field demos where you cannot rely on a router.
- Trade-off — one extra installation step; the program must be kept in sync with the block library.
Option B — classroom Wi-Fi
Section titled “Option B — classroom Wi-Fi”- How it works — the drone joins the classroom router instead of creating its own hotspot, and serves a control endpoint. The browser talks to the drone’s IP address over the same network.
- What you need — a router, plus a one-time configuration of the drone’s Wi-Fi credentials.
- Best for — a fixed classroom or lab where a router is always available.
- Trade-off — does not work in hotspot (AP) mode, so it is not a field option.
Option C — page hosted on the drone
Section titled “Option C — page hosted on the drone”- How it works — connect to the drone’s own Wi-Fi, open
192.168.4.1in the browser, and the block editor appears. Nothing to install, no internet needed. - What you need — nothing beyond a browser.
- Best for — the smoothest classroom experience: zero installation, zero configuration.
- Trade-off — the page must be very small (roughly 100–200 KB compressed) because it lives in the firmware’s flash, and the firmware has to carry a command-sequence interpreter to execute what the blocks produce.
How to choose
Section titled “How to choose”- Home, one drone — Option A.
- Classroom, many drones, fixed room — Option B, or Option C once available.
- Exhibition, workshop, no infrastructure — Option A, since it needs no router.
- Schools that cannot install software — Option C is the only zero-install answer; it is also the most expensive to build.
Why this matters for the tutorial text
Section titled “Why this matters for the tutorial text”Every hands-on page in this track will name which option it assumes. If a step says “install the bridge”, it is Option A; if it says “join the classroom network”, it is Option B; if it says “open 192.168.4.1”, it is Option C. Mixing them mid-lesson is the most common way to lose ten minutes in a classroom.
First published atdrone.imagrove.com/block-coding/how-blocks-connect/Please credit Imagrove and link back to this page when quoting or republishing.
Questions or issues with this tutorial?
Sign in with GitHub to leave a comment. If a step fails for you, tell us — we verify it and update the tutorial.
© 2026 ESP32 Drone. All rights reserved.