SharpShot Vision (ESP32CAM) × SPIKE × MBC Blocks website

This page covers MBC SPIKE Blocks website only: how to set it up for the SharpShot Vision (ESP32CAM) on SPIKE Prime / Robot Inventor, how to read every value, the commands it supports and examples. Use the switcher above to change product, host or software.

Setup

What you need

• Sensor: SharpShot Vision (ESP32CAM) (SPIKE edition).
• Hub: SPIKE Prime or Robot Inventor.
• Computer: open the website in Chrome. Nothing to install.
• Hub firmware: must be switched to Pybricks firmware first (step 2 below, done from the website).

Install the software

1. Open the MBC SPIKE Blocks website (blocks with a Chinese interface, nothing to install).
2. Switch the firmware: top menu "SPIKE Hub → Install/Update Pybricks firmware", follow the screen, about 3 minutes. The website flashes Pybricks v4.1.0.
3. To go back to the official LEGO App later, switch back to the original LEGO firmware with the SPIKE App.

Make the software see the sensor

No library needed: the MBC sensor blocks are built into the website, one block per value.

• To open an example: top menu "File → Open" (or press Ctrl+O) → pick the downloaded .abp.
• The Blocks website reads more data than the official App (no need to split numbers yourself), but example 6, marked "Pybricks only", uses a new mode that the Blocks website cannot read either.

Wiring

1. Plug the sensor into hub port C with the cable (any of A~F works; choose the same port in the blocks).
2. Latch up, push the plug in gently.
3. When the hub is on, the light on the sensor comes on.

Set the colour on the sensor first

All SharpShot settings are made on the colour screen and buttons on the back of the sensor; no computer needed:

1. The sensor only starts when plugged into a hub that is already on (the screen first shows "LEGO Sync..."); once the camera image appears it is ready.
2. Short-press the side button to open the settings menu; left / right to choose, OK to enter. In the menu, hold the side button for 1 s to clear that colour set.
3. Colour settings and camera parameters (brightness, contrast, saturation, exposure, white balance, flip, mirror) are saved automatically and used at the next power-on.

WRO edition (HUE12)

The hub needs Pybricks firmware v4.1 (the stable code.pybricks.com is v4.1.1; v4.1.0 from the MBC Blocks website's "SPIKE Hub → Install/Update Pybricks firmware" works too).

First test

1. Connect the website to the hub (the hub must be running Pybricks firmware).
2. Open the .abp of example 1 on this page and press Run.
3. If the number changes with what is in front of the sensor, everything is connected.

FAQ

• The website can't connect to the hub? The hub still has the original LEGO firmware: do step 2 of "Install the software" to switch to Pybricks firmware.
• The official App can't connect any more? The hub now runs Pybricks firmware: switch back to the original LEGO firmware with the SPIKE App.
• Nothing happens when I plug it in? Check in order: cable firmly in → another port → another cable → another hub.

Reading values (School edition)

The hub needs Pybricks firmware. The MBC Blocks website reads mode 9 of the sensor (all values in one read).

hue hue

Range	Meaning
-1~100	hue of sample point S1, 0100 (hue ring 0240 scaled); −1 = black/white/grey (saturation < 10); 0 when S1 is not set

Add this sensor's blocks on the MBC Blocks website and use the "hue" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[0]
hue = (w & 0xFF)   # hue（lo byte）

saturation saturation

Range	Meaning
0~100	saturation of sample point S1, 0~100

Add this sensor's blocks on the MBC Blocks website and use the "saturation" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[0]
saturation = ((w >> 8) & 0xFF)   # saturation（hi byte）

brightness value

Range	Meaning
0~100	brightness (HSV value) of sample point S1, 0~100

Add this sensor's blocks on the MBC Blocks website and use the "brightness" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[1]
value = (w & 0xFF)   # brightness（lo byte）

motion motion

Range	Meaning
0~100	whole-frame motion 0~100 (more change = larger)

Add this sensor's blocks on the MBC Blocks website and use the "motion" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[1]
motion = ((w >> 8) & 0xFF)   # motion（hi byte）

blob X blobX

Range	Meaning
0~100	blob centre X 0~100, left = 0; 0 when not found

Add this sensor's blocks on the MBC Blocks website and use the "blob X" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[2]
blobX = (w & 0xFF)   # blob X（lo byte）

blob Y blobY

Range	Meaning
0~75	blob centre Y 0~75, bottom = 0, top = 75; 0 when not found

Add this sensor's blocks on the MBC Blocks website and use the "blob Y" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[2]
blobY = ((w >> 8) & 0xFF)   # blob Y（hi byte）

blob width blobW

Range	Meaning
0~100	blob width W 0~100; 0 = not found

Add this sensor's blocks on the MBC Blocks website and use the "blob width" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[3]
blobW = (w & 0xFF)   # blob width（lo byte）

blob height blobH

Range	Meaning
0~75	blob height H 0~75; 0 when not found

Add this sensor's blocks on the MBC Blocks website and use the "blob height" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

w = dev.read(9)[3]
blobH = ((w >> 8) & 0xFF)   # blob height（hi byte）

blob area blobArea

Range	Meaning
0~7500	W×H (0~7500); 0 when not found

Add this sensor's blocks on the MBC Blocks website and use the "blob area" block; on the hub it runs this Pybricks code (mode 9):

from pybricks.iodevices import PUPDevice
from pybricks.parameters import Port

dev = PUPDevice(Port.A)   # sensor on port A

blobArea = dev.read(9)[4]   # blob area

Not readable here：blob found. Use Arduino / mBlock / micro:bit for these.

Reading values (WRO edition)

The hub needs Pybricks firmware. The MBC Blocks website reads mode 9 of the sensor (all values in one read).

Not readable here：spot 1~12 colour code, spot 1~12 vividness. Use Pybricks for these.

Examples (School edition)

Example 1: What color do you see?

What this example does: The hub display keeps showing the "hue" number the SharpShot sees. Put bricks of different colors at the spot you chose in "Setup 1" and the number changes.

What you need

• 1 SPIKE hub
• 1 SharpShot (with "Setup 1: COLOR" done)
• One red, one green, one blue and one white brick

How to connect: SharpShot on port C.

Download the program

Step by step through the program

1. Repeat forever: the blocks inside keep running until you press stop.
2. Read the hue: the official App uses the "color" block and puts it into the variable "hue" (a variable = a box with a name that holds one number); the MBC Blocks website uses "SharpShot school edition C hue"; Pybricks uses cam.hue().
3. Show it on the display: the number scrolls across one character at a time. The MBC Blocks website and Pybricks also print it on the computer screen, which is quicker to read.
4. Wait 0.5 seconds before reading again.

What you should see

• Red brick: about 0 to 5 or 95 to 100.
• Green brick: about 30; blue brick: about 65 (the lighting is different in every room, so the numbers vary a little).
• White paper, black brick: -1 (no color).

Common problems

• It reads 0 no matter what I put there? → "Setup 1: COLOR" has not been done yet.
• The number keeps jumping around? → Classroom lights flicker, and pale colors jump the most; use a brighter, more saturated brick, or move it closer.
• The number changed after moving to another room? → Different lighting; do "Setup 1" again.

Example 2: Beep when you see red

What this example does: When the SharpShot sees red, the light in the middle of the hub turns red and the hub beeps; for any other color the light turns off.

What you need: Same as example 1.

How to connect: SharpShot on port C.

Download the program

Step by step through the program

1. Read the hue into a variable.
2. If hue is between 0 and 5, or hue ≥ 95 (the official App writes it as "> 94", same meaning) → red light, beep. Red sits at both the start and the end of the hue scale, so you have to check both ends.
3. Else (any other color, or -1 for no color) → light off.
4. Wait 0.1 seconds and check again.

What you should see: Put the red brick at the setup spot → red light + continuous beeping; swap in green or white paper → light off, no sound.

Common problems

• It beeps all the time even with nothing there? → Hue is 0, which means "Setup 1: COLOR" has not been done (hue is 0 before setup, same as red).
• Orange beeps too? → Orange hue is very close to red (about 4 to 10); make the "5" smaller, for example 3.
• My red brick reads 7 and does not beep? → Use example 1 to see what your red reads, then change the "5" to that number plus a little.
• How do I pick the light color in the official App? → Click the color dot on the "set Power Button light to" block.

Example 3: Which side is the blob on?

What this example does: The hub display uses an arrow to tell you where the blob is in the picture: on the left → ⬅, on the right → ➡, in the middle → ⬆, not found → ✕.

What you need: Same as example 1; the sensor must have "Setup 2: TRACK" done first.

How to connect: SharpShot on port C.

Download the program

Step by step through the program

1. Read blob X, then read "was it found": the official App checks "is raw blue (area) 0"; the MBC Blocks website checks "blob width = 0"; Pybricks uses cam.found().
2. If not found → show ✕ (X is 0 at this point and cannot be used for the decision, so this check comes first).
3. Else, if X < 35 → left arrow.
4. Else, if X > 65 → right arrow.
5. Otherwise (35 to 65) → up arrow, meaning it is in the middle.

What you should see: Hold the colored block in front of the lens and move it slowly from left to right; the arrow goes ⬅ → ⬆ → ➡. Take the block away and it becomes ✕.

Common problems

• Left and right arrows are swapped? → The camera is mounted the opposite way from the picture. In the camera menu toggle H-Mirror once (then check V-Flip, see the warning above).
• An arrow shows even when the blob is gone? → Something of the same color in the background is being tracked: go back to "Setup 2", lower TOL_HUE and raise MIN AREA.
• Why is the middle 35 to 65 and not just 50? → Leaving a band that "counts as the middle" keeps the arrow from flickering.

Example 4: Turn to follow the blob

What this example does: The robot turns in place to keep the blob in the center of the camera picture. Blob on the left → turn left; on the right → turn right; lined up (or nothing in view) → stop.

What you need

• Everything from example 3, plus
• A two-wheel car (two motors as wheels) with the SharpShot mounted at the front, lens facing forward
• A colored block that you have done "Setup 2: TRACK" on

How to connect

• SharpShot on port C
• Left wheel motor on E, right wheel motor on F

Download the program

Step by step through the program

1. Tell the hub where the wheels are: the official App uses "set movement motors to E+F"; the MBC Blocks website and Pybricks use "drive base: left wheel E, right wheel F".
2. Set the speed: 20% in the official App; the other two use "60 degrees per second". Turning too fast blurs the camera picture, so turn slowly.
3. If no blob found → stop.
4. Else if X < 40 (blob on the left) → turn left in place (official App: steer -100).
5. Else if X > 60 (blob on the right) → turn right in place (official App: steer 100).
6. Else (40 to 60, lined up) → stop.

What you should see: Hold the block in front of the car and walk slowly to the left; the car turns to follow. Stop, and the car stops facing the block.

Common problems

• Blob on the left but the car turns right and keeps turning away? → Left and right are swapped: flip the sign of both turn numbers (official App: -100 and 100; the other two: -60 and 60), or toggle H-Mirror as described in example 3.
• It keeps wobbling left and right? → Turning too fast. Lower the speed in the official App (for example 15%); in the other two change 60 to 40. You can also widen the "middle" band (change 40/60 to 35/65).
• The car turns in place in a strange way? → The motors are mounted the opposite way from the standard LEGO car. Official App: mount the motors the way the LEGO "standard driving base" does; MBC Blocks website: in the "drive base" block switch the "forward" direction of both wheels to the other option; Pybricks: change the left wheel to Direction.CLOCKWISE and the right wheel to Motor(Port.F, Direction.COUNTERCLOCKWISE).

Example 5: Motion-detection alarm

What this example does: Use the hub as a "security guard" that stays still. When something moves in front of the camera (someone walks past, a hand waves), the hub turns on the red light, beeps, and shows on the display how many times it has happened; when nothing moves, the light is green.

What you need: SPIKE hub, SharpShot (no color setup needed for this example).

How to connect: SharpShot on port C, camera pointed at a doorway or a desk, the whole thing sitting still and steady.

Download the program

Step by step through the program

1. Set "count" to 0 at the start (a variable that remembers how many times the alarm has gone off).
2. Read the motion value: the official App uses "reflected light"; the MBC Blocks website uses "SharpShot school edition C motion value"; Pybricks uses cam.motion().
3. If motion value > 20 → red light, beep, add 1 to count, show count on the display, then wait 1 second (so one movement is not counted several times).
4. Else → green light.
5. Wait 0.1 seconds and check again.

What you should see: Wave a hand in front of the camera → red light + beep + display shows 1; wave again → 2… Keep your hands still and the light stays green.

Common problems

• It keeps going off with nobody moving? → "20" is too small. First print cam.motion() in Pybricks, or watch the M number on the sensor screen, to see what it reads when nothing is moving, then set the threshold a bit above that. Flickering classroom lights and trees moving outside the window both push the number up.
• Waving does nothing? → The threshold is too high; make it smaller (for example 10), or move your hand closer to the lens.
• Can I put it on a moving car? → No. When the car itself is moving, the whole picture keeps changing and the motion value stays high. The motion value is only meaningful when the robot is standing still.

Note

These examples have no version for this software: Example 6 (advanced): Blob area: stop when close

Examples (WRO edition)

Example 1: Read the hue at point 1

What this example does: The hub display keeps showing the hue seen at point 1; the computer screen also prints the hue and saturation.

What you need

• 1 SPIKE hub
• 1 HUE12 (with point 1 set)
• One red, one green, one blue, one white and one black brick

How to connect: HUE12 on port C.

Download the program

Step by step through the program

1. Read the data: the official App and Pybricks call cam.update() first (reads the latest values of all 12 points once), then take point 1; the MBC Blocks website uses the "SharpShot HUE12 C point 1 hue" block directly.
2. Show it: the hub display scrolls the hue one character at a time, and the computer screen prints it too.
3. Wait 0.5 seconds before reading again.
4. The big block at the top of the official App program is the "HUE12 reader helper" (the official App cannot import other files, so every program has to carry it). Copy it as is; nothing to change.

What you should see: Red brick 0 to 9 or 230 to 239; green about 80; white paper 240 to 245; black 246 to 250; 255 if the point is not set.

Common problems

• Always 255? → Point 1 is not set, or the sensor is still in the menu (go back to RUN MODE).
• Pybricks always shows 255 and the number after Connected to ID: is not 95? → The hub's Pybricks firmware is too old; update to v4.0.0b5 or newer.

Example 2: Is point 1 red?

What this example does: Point 1 sees red → the light in the middle of the hub turns red and the hub beeps; any other color → light off.

What you need: Same as example 1. How to connect: HUE12 on port C.

Download the program

Step by step through the program

1. Read the hue at point 1.
2. If hue < 10, or hue is between 230 and 239 → red: red light, beep.
3. Else → light off.
4. Wait 0.2 seconds and check again.

What you should see: Put the red brick at point 1 → red light + beep; swap in another color → light off.

Common problems

• Orange beeps too? → Orange is about 10 to 30; make the "10" smaller (for example 6).
• Is there a simpler way in Pybricks? → Yes: if name == "Red":; the library does the check for you (same range as above).

Example 3: How many of the 12 points see a color?

What this example does: Checks the 12 points one by one, counts how many see a color (not white, black or unset), and shows the count on the hub display.

What you need: Same as example 1, with several points set (for example points 1 to 4 in a row), plus a few colored bricks.

How to connect: HUE12 on port C.

Download the program

Step by step through the program

1. Set "color count" to 0 first.
2. Repeat 12 times, checking one point each time: the official App and Pybricks use for slot in range(1, 13) (slot goes 1, 2, … 12 in turn); the MBC Blocks website uses a variable "point number" that starts at 1 and adds 1 after each pass.
3. If this point's hue < 240 (a color) → add 1 to color count.
4. After all 12 points → show color count on the display.

What you should see: 2 colored bricks on 4 points → shows 2; add one more → 3. White paper and black bricks do not count.

Common problems

• The count is higher than the number of bricks I placed? → Some points are seeing a colored background (for example a colored line on the field); clear those points (hold the side button for 1 second in the menu).
• Why 240 as the cutoff? → 240 and above is white (240 to 245), black (246 to 250) and not set (255), none of which is a color.

Example 4: Turn by color

What this example does: Point 1 sees red → turn right in place; sees green → turn left in place; anything else → stop.

What you need

• Everything from example 1, plus a two-wheel car (two motors as wheels) with the HUE12 mounted at the front, lens facing forward
• A red object and a green object

How to connect: HUE12 on port C; left wheel motor on E, right wheel motor on F.

Download the program

Step by step through the program

1. Tell the hub where the wheels are: the official App uses motor_pair.pair(…, port.E, port.F); the MBC Blocks website and Pybricks use "drive base: left wheel E, right wheel F".
2. Read the hue at point 1.
3. If red → turn right in place (official App: steering 100, wheels at 200 degrees per second; the other two: the car body turns at 60 degrees per second).
4. Else if green (hue 60 to 110) → turn left in place.
5. Else → stop.

What you should see: Put the red object in front of the car → the car turns right until it no longer sees red, then stops; green object → turns left.

Common problems

• No reaction to green? → Use example 1 to see what your green reads, and change "60 to 110" to a range that includes it.
• It turns the wrong way? → The motors are mounted the opposite way from the standard LEGO car. Official App: swap 100 and -100; MBC Blocks website: in the "drive base" block switch the "forward" direction of both wheels to the other option; Pybricks: change the left wheel to Direction.CLOCKWISE and the right wheel to Motor(Port.F, Direction.COUNTERCLOCKWISE).

Example 5: Look at the object's color and decide which side to go around (a common WRO pattern)

What this example does: The car drives forward slowly. A red object ahead → go around it on the right; a green object → go around it on the left; then keep going forward. Many WRO tasks use "look at the color to decide which side to take" (for example the red/green traffic-sign posts in the Future Engineers category); this is the most basic way to write it.

What you need: Same as example 4, with a few red and green objects on the field (at least 40 cm apart).

How to connect: HUE12 on port C (point 1 set straight ahead of the car, about 15 cm away, at floor height); left wheel motor on E, right wheel motor on F.

Download the program

Step by step through the program

1. Read the hue at point 1.
2. If red → show R on the display → turn right 45 degrees → drive straight 15 cm → turn left 45 degrees (the car faces its original direction again).
3. Else if green → show G on the display → do the same with left and right swapped.
4. Else (no object in view) → drive straight slowly.
5. The MBC Blocks website and Pybricks use "turn N degrees" and "drive N mm" and work it out for you; the official App version here uses "drive for N milliseconds" (go(100, 450) = turn right for 0.45 seconds), so you have to tune the angle by trial.

What you should see: The car drives forward, swerves right around a red object, swerves left around a green object, and keeps going once it is past.

Common problems

• It turns back before it is past the object and hits it? → Make the straight distance longer (150 → 200; official App 1500 → 2000).
• The official App turns the wrong angle? → Change the 450 in go(100, 450) and go(-100, 450): a bigger number turns farther. Battery level also makes a difference, so for competitions we recommend Pybricks or the MBC Blocks website.
• It keeps going around the same object? → After going around, the camera sees the same object again. Set point 1 lower (closer to the front of the car), or make the turn angle bigger.

More questions

• The hub does not detect the sensor? Unplug and replug, wait 2 s, try another port. The official app shows it as a colour sensor — that is expected.
• Can I use the official app and Pybricks on the same hub? One firmware at a time: Pybricks and the MBC Blocks website need Pybricks firmware, the official app needs LEGO firmware; you can switch back any time with the SPIKE app.

Still stuck? Contact us with your software and a screenshot of the program.

Downloads

• MBC SPIKE Blocks website (online, nothing to install)
• Download centre (libraries, firmware, catalogue for every product)

Sources

• Host and software list：_build/guides.json
• Values and commands：_build/protocol/cam_school.json、_build/protocol/cam_wro.json (single source of truth)
• Setup：_build/guides/software/spike-mbcblocks.en.md、_build/guides/product/esp32cam/spike-mbcblocks.en.md
• Examples：sensors/esp32cam/spike-examples(-wro).md