The Water Tank Level Display Model
Simulator preview
Change the slider level and observe the 5x5 LED display.
📁 Tools
▴
- Web browser (Chrome, Edge, Firefox)
- Internet connection
- MakeCode (micro:bit) online editor
🔧 Build Your Tank Level Bar Graph
1
Store 'tankLevel' as an integer variable from 0 (empty) to 5 (full capacity).
2
Program Button A to decrement water level (simulating taps consuming water).
3
Program Button B to increment water level (simulating solar pump filling the tank).
4
Render horizontal LED rows from the bottom row up to depict the true water column depth!
🧩 Block plan / Starter code
▴
let tankLevel = 3
function drawTank() {
basic.clearScreen()
if (tankLevel == 0) {
basic.showIcon(IconNames.No) // Tank empty alert
return
}
// Plot horizontal rows from bottom (y=4) upwards
for (let y = 4; y > (4 - tankLevel); y--) {
for (let x = 0; x < 5; x++) {
led.plot(x, y)
}
}
}
input.onButtonPressed(Button.A, function () {
if (tankLevel > 0) {
tankLevel -= 1
drawTank()
}
})
input.onButtonPressed(Button.B, function () {
if (tankLevel < 5) {
tankLevel += 1
drawTank()
}
})
drawTank()Nested loops iterate across X columns and Y rows to create solid horizontal bar graph tiers.
⚗️ Test your model
| Test Condition / Action | Expected Result |
|---|---|
| Start at Level 3 | Bottom 3 rows (15 LEDs) illuminate solid; top 2 rows dark |
| Press Button B twice (Level 5) | All 25 LEDs illuminate (100% full capacity) |
| Press Button A until Level 0 | All rows clear; red X alert icon displays empty state |
⚑ Try a challenge
Make the bottom row flash on and off continuously when tankLevel equals 1 to indicate critical low reserve!
❓ Quick check
On the BBC micro:bit 5x5 LED matrix, which coordinate represents the bottom-most row of LEDs?
📖 Our Story & Concepts
In community water management, climbing a tall metal ladder in the heat to check a water tank with a wooden stick is dangerous and imprecise. Instead, smart utilities use electronic depth gauges.
The 5x5 LED display on the BBC micro:bit provides a natural bar graph visualizer. By mapping a 1-dimensional level number (0 to 5) to a 2D coordinate grid, students learn coordinate plotting, 2D arrays, and intuitive human-machine interface (HMI) design.
</> Full Annotated Code Walkthrough
// Complete Tank Level Bar Graph with Critical Low Alert
let tankLevel = 3
function renderDisplay() {
basic.clearScreen()
if (tankLevel == 0) {
basic.showIcon(IconNames.Skull)
return
}
for (let y = 4; y > (4 - tankLevel); y--) {
for (let x = 0; x < 5; x++) {
led.plot(x, y)
}
}
}
input.onButtonPressed(Button.A, function () {
if (tankLevel > 0) {
tankLevel -= 1
renderDisplay()
if (tankLevel == 1) {
music.playTone(262, music.beat(BeatFraction.Half))
}
}
})
input.onButtonPressed(Button.B, function () {
if (tankLevel < 5) {
tankLevel += 1
renderDisplay()
}
})
renderDisplay()Nested loops iterate across X columns and Y rows to create solid horizontal bar graph tiers.
▷ Expected Results & Troubleshooting
| Test Condition / Action | Expected Result |
|---|---|
| Start at Level 3 | Bottom 3 rows (15 LEDs) illuminate solid; top 2 rows dark |
| Press Button B twice (Level 5) | All 25 LEDs illuminate (100% full capacity) |
| Press Button A until Level 0 | All rows clear; red X alert icon displays empty state |
⚑ Extension Challenges & Blueprints
⚑ Extension Challenges
- Level 1: Play an alarm beep whenever the tank reaches 100% full to prevent water overflow.
- Level 2: Connect an ultrasonic sensor to automatically calculate real water distance.
- Level 3: Display estimated remaining drinking days based on current tank height.
❓ Check Your Understanding
Question 1: On the BBC micro:bit 5x5 LED matrix, which coordinate represents the bottom-most row of LEDs?
Question 2: How many LED pixels are illuminated across a full horizontal row of the micro:bit matrix?
Question 3: When the water tank is completely full (Level 5), what does the micro:bit LED matrix display?
Question 4: What safety alert occurs when the tank drops to Level 1 (Critical Low Water)?
Feedback appears after you check your answer.