Published March 30, 2019 © CC BY-NC

WiFi Web Server on BBC micro:bit and ESP-01 (ESP8266)

Create a micro:bit web server via AT commands which can respond to web browser requests over WiFi.

IntermediateFull instructions provided18,827

WiFi Web Server on BBC micro:bit and ESP-01 (ESP8266)

Things used in this project

Hardware components

BBC micro:bit

Edge Connector Breakout Board for BBC micro:bit

Optional - you can use any micro:bit edge connectors/motor boards/expansion boards. Or you can use crocodile clip cables.

Espressif ESP8266 ESP-01

Both ESP-01 and ESP-01S works. Make sure that it has factory firmware.

USB-to-TTL cable/module

Optional. You need this to read serial responses of the ESP-01 on your computer.

LED (generic)

Also optional depends on what you want to control on micro:bit

Breadboard (generic)

3.3V external power source

Capable for at least 200-400mA. You can also use special micro:bit edge connectors/motor boards/expansion boards which has strong 3.3v output.

Jumper wires (generic)

Software apps and online services

Microsoft MakeCode

Story

The project allows you to control your BBC micro:bit via WiFi, by using a cheap ESP-01 (ESP8266) module. The micro:bit would generate an HTML web page for the user with control buttons on it. The web page can be accessed from your computer or smartphone without using any apps.

The micro:bit talks to the ESP-01 via AT commands, to set up a web server in either station or AP mode. These commands are in the factory firmware of ESP-01s.

The code is written in TypeScript (JavaScript). You can paste the code into the Microsoft MakeCode editor. You can also modify the HTTP request handle process and HTML generate function for your needs.

You can view the code here or copy the attachment in this article.

A USB-to-TTL cable/module is not necessary but can be used to monitor AT responses from the ESP-01. (In the photos I used a CR2102 6-in-1 module and Tera Term. I'll skip tutorials about their setup and use.) Since the micro:bit's serial port is reassigned, this is the only way for the user to read serial port data.

(Note: I haven't considered to make this into a MakeCode extension, because it's complicated to customize the web page and HTTP responses by using predefined blocks. Not so flexible too.)

(Another node: at the end of June 2019 the MakeCode had a minor upgrade. Users can now set buffer size of both Tx and Rx. However if you did change them this code may not run properly. I can confirm it still runs well without adding any changes other than different pin numbers.)

BBC micro:bit

Making the micro:bit as a Internet of Things (IoT) device

ESP-01 (ESP8266)

Pins of ESP-01: Vcc and CH to 3.3V, Rx to micro:bit's Tx, and Tx to micro:bit's Rx. In my photos I was using a micro:bit motor board which can provide 3.3V/5V power from its onboard 18650 lithium battery.

For the micro:bit pins to be used to connect the ESP-01, try to use P0, P1, P2, P8, P12, P13-15 only. Other pins have functions shared with LEDs or buttons, etc and may not function correctly for this.

Serial port output from the ESP-01 when it setup the AP mode web server.

The new server now appears in the WiFi list (someone nearby has setup a ESP8266 server on micropython as well!)

The web page generated by micro:bit itself loaded in the phone's web browser.

Serial port output during a HTTP request/response. When micro:bit read /LED in the string it would cycle a LED on/off.

If effect, you can control your micro:bit via WiFi without using apps.

The HTML code received by the web browser

In AP mode the default IP is 192.168.4.1. Connect your computer or phone to the new WiFi (named as SSID_2 in the code) and enter the password (as PASSWORD_2). You can rename both if you want. Then open web browser and enter 192.168.4.1 and you'll should see the web page.

Change WIFI_MODE to 1 if you want the micro:bit to connect to your WiFi router: SSID_1 is the name of the router and PASSWORD_1 is the password. You'll need a USB-to-TTL cable/module (baud rate 115200) to look up the IP assigned to the ESP-01 after it boot up, usually 192.168.0.xxx. Your computer or phone have to be on the same WIFI. Remember DO NOT SHARE YOUR CODE WITH YOUR OWN WiFi ROUTER PASSWORD ONLINE.

Some of the older ESP-01's baud rate may be 57600 or 9600. In my test both ESP-01 and ESP-01S (bigger flash size) works.

* * *

All AT commands have to end with CR+LF (\r\n) or \u000D\u000A line ending characters. The Serial.writeLine() function in MakeCode generates different result hence can't be use to send AT commands. This is the primary reason why we don't simply use the blocky interface of MakeCode editor.

The commands in the code by order are as follows:

-----

AT+RESTORE

Restore to factory settings

AT+RST

Reset

AT+CWMODE=2

Set WIFI mode (1=STA or station, 2=AP)

-----

Then, if you are using AP mode:

AT+CWSAP=ssid,pwd,chl,ecn

Setup AP:

ssid/pwd=name and password of the WIFI AP

chl=number of connection channels

ecn=encryption mode (1=OPEN, 2=WPA_PSK, 3=WPA2_PSK, 4=WPA_WPA2_PSK)

-----

If you are using station (STA) mode:

AT+CWJAP=ssid,pwd

Join WIFI router (it might take a while; the code would wait for OK response)

ssid/pwd=name and password of your WIFI router

-----

Then:

AT+CIPMUX=1

Enable multiplex mode (allow multiple connections), which is required for the following command

AT+CIPSERVER=1,80

Start web server and listen to port 80

AT+CIFSR

Display local IP. In AP mode default 192.168.4.1; in STA mode it might be 192.168.0.xxx (assigned by WIFI router)

Hence the server should be on.

If your ESP-01 have trouble starting up, try to disconnect and reconnect power. Also it might shut down and reboot if not enough power is supplied.

-----

When ESP-01 received a HTTP request it would return something like

+IPD,0,467:GET / HTTP/1.1

Host: 192.168.xxx.xxx

Connection: keep-alive

Cache-Control: max-age=0

Upgrade-Insecure-Requests: 1

User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36

DNT: 1

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8

Referer: http://192.168.xxx.xxx/

Accept-Encoding: gzip, deflate

Accept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7

-----

The first number after +IPD is connection ID.

The string between GET / and HTTP/1.1 is the GET URL sent from client (if the client request http://192.168.4.1/LED, you will receive GET /LED. "GET /" means root directory).

Due to the limit of serial port buffer (64 bytes) I use while(true) loop to force the micro:bit to read responses (stored in a 200-length string) as quickly as it can. The built-in "forever loop" has a tiny delay time, so I don't use it. But you might need it in case you want to run multiple forever loops or receive radio messages, etc.

-----

So the micro:bit cycle LED and generate HTTP response/HTML page for the user then send it:

AT+CIPSEND=id,length

Send data to a specific connection

id=connection ID

length=the length of your data (HTTP response + HTML web page, plus 2 for \u000D\u000A)

-----

The data are generated as follows:

HTTP/1.1 200 OK\r\n

Content-Type: text/html\r\n

Connection: close\r\n

\r\n

<!DOCTYPE html>

<html>

<head>

<link rel="icon" href="data:,">

<title>Webpage title</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

...

</body>

</html>

The first 3 lines are the HTTP response. Without it (at least you'll need HTTP/1.1 200 OK) your web browser might not be able to read the web page. Also a new line between HTTP response and HTML is required.

The <link rel="icon" href="data:,"> is to prevent favicon.ico requests.

<meta name="viewport" content="width=device-width, initial-scale=1"> is for mobile view mode. Otherwise the text and buttons would be way too small on your phone screen. This does not affect views on computer browsers.

The button in the web page is as follows:

<input type="button" onClick="window.location.href='LED'" value="Text on the button">

By clicking it the button would GET request http://192.168.x.x/LED via JavaScript.

-----

After AT+CIPSEND command you immediately send your data. And you should get the following response from ESP-01 :

AT+CIPSEND=0,541

Recv 541 bytes

SEND OK

-----

Then:

AT+CIPCLOSE=id

Close connection; id=connection ID

However this is not required. If a connection didn't close after for a while the ESP-01 would automatically terminate it.

Code

micro:bit + ESP-01 (ESP8266) Web Server Demo

// ESP8266 ESP-01 Wifi control via AT commands on BBC micro:bit
// by Alan Wang
// v0.02

// user settings
const WIFI_MODE: number = 2 // 1 = STA (station, connect to wifi router); 2 = AP (make itself an access point)
const Tx_pin: SerialPin = SerialPin.P0 // To Rx pin of ESP-01
const Rx_pin: SerialPin = SerialPin.P1 // To Tx pin of ESP-01
const LED_pin: DigitalPin = DigitalPin.P2 // pin for LED control
const SSID_1: string = "your_wifi_ssid" // wifi router ssid for station mode
const PASSWORD_1: string = "your_wifi_password" //wifi router password for station mode
const SSID_2: string = "ESP8266" // AP server ssid for AP mode
const PASSWORD_2: string = "microbit" // AP password for AP mode (at least 8 characters)

let LED_status: number = 0
let serial_str: string = ""

// initialize LED
pins.digitalWritePin(LED_pin, 0)
// redirect serial port
serial.redirect(Tx_pin, Rx_pin, 115200) // older ESP8266s may use 51200 or 9600...
// restore settings
sendAT("AT+RESTORE", 1000)
// reset
sendAT("AT+RST", 1000)
// set wifi mode
sendAT("AT+CWMODE=" + WIFI_MODE)
if (WIFI_MODE == 1) {
    // join wifi router
    sendAT("AT+CWJAP=\"" + SSID_1 + "\",\"" + PASSWORD_1 + "\"")
    let result: boolean = wait_for_response("OK")
    if (!result) control.reset()
} else if (WIFI_MODE == 2) {
    // setup AP with 1 channels and authenticate mode = 4 (WPA_WPA2_PSK)
    sendAT("AT+CWSAP=\"" + SSID_2 + "\",\"" + PASSWORD_2 + "\",1,4", 1000)
}
// allow multiple connections
sendAT("AT+CIPMUX=1")
//start web server
sendAT("AT+CIPSERVER=1,80")
// display IP (you will need this in STA mode; in AP mode it would be default 192.168.4.1)
sendAT("AT+CIFSR")
// startup completed
basic.showIcon(IconNames.Yes)

// process HTTP request
while (true) {
    // read and store 200 characters from serial port
    serial_str += serial.readString()
    if (serial_str.length > 200) {
        serial_str = serial_str.substr(serial_str.length - 200)
    }
    if (serial_str.includes("+IPD") && serial_str.includes("HTTP")) {
        // got a HTTP request
        let client_ID: string = serial_str.substr(serial_str.indexOf("IPD") + 4, 1)
        let GET_pos: number = serial_str.indexOf("GET")
        let HTTP_pos: number = serial_str.indexOf("HTTP")
        let GET_command: string = serial_str.substr(GET_pos + 5, (HTTP_pos - 1) - (GET_pos + 5))
        let GET_success: boolean = false
        // handle GET command
        switch (GET_command) {
            case "": // request 192.168.x.x/
                GET_success = true
                break
            case "LED": // request 192.168.x.x/LED
                GET_success = true
                LED_status = 1 - LED_status
                pins.digitalWritePin(LED_pin, LED_status)
                break
        }
        // output HTML
        let HTML_str: string = getHTML(GET_success)
        // send HTML to user
        sendAT("AT+CIPSEND=" + client_ID + "," + (HTML_str.length + 2))
        sendAT(HTML_str, 1000)
        // close connection
        sendAT("AT+CIPCLOSE=" + client_ID)
        serial_str = ""
    }
}

// write AT command with CR+LF ending
function sendAT(command: string, waitTime: number = 100) {
    serial.writeString(command + "\u000D\u000A")
    basic.pause(waitTime)
}

// generate HTML
function getHTML(normal: boolean): string {
    let LED_statusString: string = ""
    let LED_buttonString: string = ""
    let web_title: string = "ESP8266 (ESP-01) Wifi on BBC micro:bit"
    let html: string = ""
    html += "HTTP/1.1 200 OK\r\n" // HTTP response
    html += "Content-Type: text/html\r\n"
    html += "Connection: close\r\n\r\n"
    html += "<!DOCTYPE html>"
    html += "<html>"
    html += "<head>"
    html += "<link rel=\"icon\" href=\"data:,\">"
    html += "<title>" + web_title + "</title>"
    html += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">" // mobile view
    html += "</head>"
    html += "<body>"
    html += "<div style=\"text-align:center\">"
    html += "<h1>" + web_title + "</h1>"
    html += "<br>"
    // generate status text
    if (normal) {
        if (LED_status) {
            LED_statusString = "ON"
            LED_buttonString = "TURN IT OFF"
        } else {
            LED_statusString = "OFF"
            LED_buttonString = "TURN IT ON"
        }
        html += "<h3>LED STATUS: " + LED_statusString + "</h3>"
        html += "<br>"
        // generate buttons
        html += "<input type=\"button\" onClick=\"window.location.href=\'LED\'\" value=\"" + LED_buttonString + "\">"
        html += "<br>"
    } else {
        html += "<h3>ERROR: REQUEST NOT FOUND</h3>"
    }
    html += "<br>"
    html += "<input type=\"button\" onClick=\"window.location.href=\'/'\" value=\"Home\">"
    html += "</div>"
    html += "</body>"
    html += "</html>"
    return html
}

// for wifi connection
function wait_for_response(str: string): boolean {
    let result: boolean = false
    let time: number = input.runningTime()
    while (true) {
        serial_str += serial.readString()
        if (serial_str.length > 200) {
            serial_str = serial_str.substr(serial_str.length - 200)
        }
        if (serial_str.includes(str)) {
            result = true
            break
        }
        if (input.runningTime() - time > 300000) break
    }
    return result
}

Credits

Alan Wang

32 projects • 102 followers

Please do not ask me for free help for school or company projects. My time is not open sourced and you cannot buy it with free compliments.

WiFi Web Server on BBC micro:bit and ESP-01 (ESP8266)

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

Connect ESP-01 to micro:bit and 3.3v power

Code

micro:bit + ESP-01 (ESP8266) Web Server Demo

Credits

Alan Wang

Comments

Embed the widget on your own site

WiFi Web Server on BBC micro:bit and ESP-01 (ESP8266)

WiFi Web Server on BBC micro:bit and ESP-01 (ESP8266)

Things used in this project

Hardware components

Software apps and online services

Story

Schematics

Connect ESP-01 to micro:bit and 3.3v power

Code

micro:bit + ESP-01 (ESP8266) Web Server Demo

Credits

Alan Wang

Comments

Related channels and tags