🎉 Happy New Year! A Visual Programming Tool for CyberBrick

大家好,新年快樂!:tada:

2025 年對我來說是特別的一年。買了 P2S 之後,開啟了一段讓我很開心的 3D 列印之旅。

後來發現 CyberBrick,覺得這個專案很棒——自己列印零件,搭配模組化的電子元件,就能組出遙控車、機器人這些好玩的東西。不過我在想,對於剛接觸程式的孩子來說,MicroPython 可能還是有點難度。

所以我試著在我之前做的開源專案裡加入了 CyberBrick 支援,讓寫程式可以用拖拉的方式完成。

:warning: 關於相容性:
這個工具使用官方支援的 mpremote 方式上傳程式碼,不會修改或破壞官方韌體。如果想換回官方的 CyberBrick 編輯器,直接用官方編輯器重新設定並燒入即可,程式會直接覆蓋,完全沒問題(我已經實測過)。這是以「擴展」的角度出發,不是取代官方工具。

目前做到的:

  • 基本的 GPIO 控制
  • 板載 LED 顏色設定
  • 延時功能
  • WiFi 連線

老實說還很陽春,只是個開始。像是伺服馬達、感測器這些還沒做,需要慢慢補。

如果你有興趣或想給建議,專案在 GitHub:

在 VS Code 擴充商店搜「Singular Blockly」也找得到。

新的一年,希望能讓更多孩子有機會接觸程式設計。也祝大家 2026 創作愉快!


Hi everyone, Happy New Year! :tada:

2025 was a special year for me. Getting a P2S started an exciting 3D printing journey that I’ve really enjoyed.

Later I discovered CyberBrick—print your own parts, combine them with modular electronics, and build RC cars, robots, and other fun creations. But I wondered if MicroPython might still be challenging for kids just starting with programming.

So I added CyberBrick support to an open-source project I’ve been working on, making coding feel like drag-and-drop.

:warning: About Compatibility:
This tool uploads code using the officially supported mpremote method—it does not modify or damage the official firmware. If you want to switch back to the official CyberBrick editor, just use it to configure and upload—the program will be overwritten directly, no issues at all (I’ve tested this myself). This is meant to “extend” the ecosystem, not replace the official tools.

What’s working so far:

  • Basic GPIO control
  • Onboard LED color settings
  • Delay functions
  • WiFi connection

Honestly, it’s still pretty basic—servo motors and sensors aren’t done yet.

If interested or have suggestions, the project is on GitHub:

You can also search “Singular Blockly” in the VS Code Extension Marketplace.

In the new year, I hope more kids get the chance to explore programming. Wishing everyone a creative 2026! :rocket:

8 Likes

:loudspeaker: 更新進度

感謝大家的關注!這邊更新一下最新進度。

:white_check_mark: X11 擴展板支援已完成

現在 CyberBrick 的 X11 擴展板(Remote Control Receiver Shield)已經可以使用了!

新增的功能:

• 180° / 360° 伺服馬達控制(S1-S4 埠位)
• 直流馬達速度控制(M1-M2 埠位)
• WS2812 LED 燈條顏色控制(D1-D2 埠位)

:hourglass_flowing_sand: X12 發射端擴展板

X12 的遙控通訊功能正在開發中,完成後會再更新!


:loudspeaker: Progress Update

Thanks for the interest! Here’s the latest update.

:white_check_mark: X11 Extension Board Support Completed

The X11 Extension Board (Remote Control Receiver Shield) for CyberBrick is now supported!

What’s new:

• 180° / 360° Servo control (ports S1-S4)
• DC Motor speed control (ports M1-M2)
• WS2812 LED strip color control (ports D1-D2)

:hourglass_flowing_sand: X12 Transmitter Shield

X12 remote control communication is in development. Stay tuned!

3 Likes

I bought CyberBrick for my kids for Christmas, and when I learnt about the micropython support I instantly looked for visual programming tools for it and found your project (back in November) and wondered what it would take to integrate it with cyberbrick…

We will definitely try it out, super good project!

1 Like

:loudspeaker: 更新進度

X12 發射端擴展板支援已完成!

新增的功能:

• 搖桿數值讀取(L1-L3、R1-R3 埠位)

• 搖桿數值映射到自訂範圍

• 按鈕狀態偵測(K1-K4 埠位)

:hourglass_not_done: RC 遙控通訊功能

雙機配對的遠端控制功能正在測試中,穩定後會再更新!


:loudspeaker: Progress Update

X12 Transmitter Shield support is now complete!

What’s new:

• Joystick value reading (ports L1-L3, R1-R3)

• Joystick value mapping to custom range

• Button state detection (ports K1-K4)

:hourglass_not_done: RC Remote Control

Dual-device pairing for remote control is being tested. Stay tuned!

大家好!來更新一下進度。

現在可以用拖拉積木的方式做「遙控車」了!

新功能:

  • 發射端(遙控器)和接收端(車子)的設定積木
  • 搖桿讀取(可以設定輸出範圍,例如 -100 到 100)
  • 按鈕偵測(K1-K4)
  • 配對 ID 和頻道設定 — 一個遙控器可以同時控制多個接收端

完整範例:
我用官方的足球機器人硬體做了一個範例,發射端和接收端的程式都準備好了,用 VS Code 打開就能直接看到積木、直接燒錄:
:backhand_index_pointing_right: GitHub - Shen-Ming-Hong/Blockly_SoccerBot

硬體在 MakerWorld 上有:CyberBrick Official SoccerBot

希望能幫到想玩遙控的朋友!:rocket:


Hi everyone! Quick update.

You can now build remote-controlled projects using visual blocks!

New features:

  • Transmitter (remote) and Receiver (vehicle) setup blocks
  • Joystick reading with customizable output range (e.g., -100 to 100)
  • Button detection (K1-K4)
  • Pair ID and channel settings — one transmitter can control multiple receivers

Complete example:
I’ve made an example using the official SoccerBot hardware. Both transmitter and receiver programs are ready to go — just open the folder in VS Code and you’ll see the blocks, ready to upload:
:backhand_index_pointing_right: GitHub - Shen-Ming-Hong/Blockly_SoccerBot

Hardware available on MakerWorld: CyberBrick Official SoccerBot

Hope this helps anyone looking to try remote control! :rocket:

Just checked out the sample code, looks really cool.
One question: is there a way to select the language? It is auto detected English for me (which works as intended since I use that under Windows), but I would like to select a different language just for blockly (for my kid).

1 Like

Thanks for checking it out! :blush:

Currently the extension follows VS Code’s display language automatically — there’s no manual language selector yet.

Easy way to change language:

  1. Press Ctrl+Shift+P (or click the title bar and type >)
  2. Type “Configure Display Language”
  3. Select your preferred language
  4. VS Code will restart and Blockly will follow

Supported languages (15 total):
en, zh-hant, ja, ko, de, fr, es, it, pt-br, ru, pl, tr, hu, bg, cs

Quick question: Would you like to have VS Code and Blockly set to different languages? For example, VS Code in English but Blockly in another language for your kid? If that’s useful, I can look into adding a separate language setting for Blockly. By default it would still follow VS Code’s language. :bullseye:

1 Like

I see you already updated the readme.
I think it would be nice to change the language, but it’s not a must have, I’m fine with changing the display language.

Since we are already talking, I noticed that I can add multiple Main Program block, and I can’t remove them with the UI, only by editing the json.

Also, can you support timers? Or that would be too complicated?
I’m just wondering how I would implement something like a blinking light while still responding to joystick inputs, etc.

1 Like

Thanks a lot for the feedback — this is really helpful :folded_hands:

Language switching
Quick update: I’ve already added a language switch for Blockly, and I’ll push the update soon.
By default it still follows VS Code, but now Blockly can be changed independently, which should be more convenient when using it with kids :slightly_smiling_face:

Multiple “Main Program” blocks
Good catch — this is definitely a bug.
Design-wise there should only be a single Main Program block, and the current UI allowing multiple ones (and not being able to remove them) isn’t correct.
I’ll fix this as soon as I can. For now, please just use a single main program as a workaround. Thanks a lot for pointing this out!

Timers / blinking light + responding to inputs
That’s a great question, and a very practical use case :+1:

At the moment, I’m leaning toward a non-blocking timing approach (for example, checking how much time has passed using the system runtime), rather than introducing interrupts or complex callbacks. This keeps the model easier to understand and more suitable for kids.

I’m planning to add some timing-related blocks that make it natural to implement things like a blinking light while still continuously responding to joystick inputs, without blocking the main program flow.

Thanks again for the thoughtful observations and questions — feedback from real usage like this is incredibly valuable.
If you have more scenarios you’d like to try, feel free to bring them up. I’m always happy to discuss!

1 Like

Great work! Thanks!

I’m currently trying to get familiar with controlling CyberBrick models with Blockly…

I would like to be able to address the LEDs individually in order to assign effects to single LEDs without affecting the others (turn signals / front and rear lights), or to generate fade-in / fade-out effects. As far as I understand, this currently only works for all LEDs on a “strip” at once — or am I mistaken?

While this is possible using code snippets, it’s far more cumbersome than using Blockly.

Maybe it would be possible for you to integrate this?

Best regards,

Birdy

1 Like

I was thinking about some async framework where you can register functions to events and the “delay” block would be “await sleep”, but that would probably be too complex and custom just for the cyberbrick.

So yes, checking the time and calculating the elapsed time and doing things when it’s bigger than a value is conceptually the simplest even if it is a little cumbersome. Maybe some kind of stopwatch object could make that simpler where you can check the elapsed time and also reset it if you want.

1 Like

Hi Birdy, thanks for the feedback! :blush:

Quick clarification on the current blocks:

  • In the X11 “LED strip” block you can pick D1/D2 and choose index 1–4 (or All).
  • When you set index N, it only updates that LED and won’t affect the other LEDs’ current colors.
  • Each LED has its own RGB state.
    (See the single‑LED example screenshot below.)

About fade‑in / fade‑out:
There isn’t a dedicated fade block on purpose — it’s a teaching choice so students can build the gradient logic themselves and understand PWM / brightness control.

I’m also sharing an onboard LED RGB fade example. Even though it’s for the onboard LED, the exact same logic applies to any LED on the strip — just replace “onboard LED” with “LED strip → index N.” :slightly_smiling_face:


Thanks for your thoughts, Charles! Your analysis is spot on :+1:

The “checking elapsed time and doing things when it’s bigger than a value” approach you described is exactly what I’m planning to implement. In MicroPython, this maps to the time.ticks_ms() and time.ticks_diff() APIs.

My plan is to provide basic timing blocks (get current milliseconds, calculate time difference), and then students can use variable blocks to build their own timers. For example, store “last blink time” in a variable, then check in the main loop whether enough time has passed.

This design allows students to:

  1. Understand the core concept of non-blocking timing
  2. Freely create multiple independent timers (blinking light, sensor read intervals, etc.)
  3. Have full control over the timing logic

This follows the same philosophy as the LED fade design — provide the tools, let students build their own solutions :blush:

Hi Charles, quick update on the “multiple Main Program blocks” issue!

This bug has been fixed in the latest release :tada:

What’s fixed:

  1. Prevention: The Main Program block is now limited to 1 instance max. When one already exists, the block in the toolbox becomes grayed out and can’t be dragged.
  2. Legacy project support: If you open an older project that accidentally has multiple main blocks, the extension will:
  • Automatically detect the issue
  • Make all main blocks deletable
  • Show a Toast warning to remind you to remove the extras
  1. Auto-restore protection: Once you delete down to just one main block, it automatically becomes non-deletable again to prevent accidental removal.

Please update the extension to the latest version and give it a try! Thanks for reporting this :folded_hands:

1 Like

Hi Charles, one more update!

Timing blocks have been added in the latest version :tada:

New blocks:

  • Get current milliseconds — returns the current tick count (time.ticks_ms())
  • Time difference (now - start) — calculates milliseconds between two time points (time.ticks_diff())

How to implement non-blocking blinking light:

  1. Create a variable lastBlinkTime, set it to “Get current milliseconds”
  2. In the main loop:
  • If “Time difference (now - lastBlinkTime)” > 500 ms
  • Toggle the LED state
  • Reset lastBlinkTime to “Get current milliseconds”
  1. Continue handling joystick inputs (won’t be blocked by delay blocks)

:warning: Note: These timing blocks are currently marked as “experimental” since I don’t have the hardware on hand to test them at the moment. If you have time, feel free to give them a try and let me know how it goes! I’ll remove the experimental label once I’ve tested them myself.

Please update to the latest version and give it a try :blush:

Hi Ray,

Pretty cool, thanks for sharing (and developing the solution).

Does BG stand for Bulgarian?

1 Like

Hi milensky,

Thanks! :blush:

Yes, BG stands for Bulgarian (Български). We currently support 15 languages — here’s what the Bulgarian interface looks like.

Except for Traditional Chinese which I maintain manually, all other 14 languages are AI-powered localized translations. While we have 98%+ coverage, AI translations may sometimes sound unnatural or inaccurate.

If you’re a Bulgarian speaker (or any other language), feedback on translations is very welcome! It really helps improve localization quality :pray:

1 Like

Yes, I’m a native Bulgarian speaker and I can take a look at the translation :slight_smile: From what I can see on this screenshot, it looks quite good, but some of the terms can be replaced with better ones.

For me it is surprising that you have a Bulgarian language translation, since we are a rather small country compared to the others on the list. Personally I’m used to having the interface of any application in English, but I do understand that in case kids are using the application it’s always better to have a localized version.

I can also check the German translation, as I’m working on daily basis with the language.

Where can I see these translations? :slight_smile:

1 Like

Hi milensky,

That’s awesome, thank you so much for offering to help! :tada:

About why Bulgarian is available — it’s precisely because of AI-powered translations that supporting multiple languages became feasible. In the past, supporting 15 languages would require a lot of manpower. Now AI can quickly generate the initial version, and native speakers like you can help refine it to improve quality.

Translation files are here:

About the file format: It’s a JavaScript file containing key-value pairs. The left side is the key used by the program (no need to change), and the text in quotes on the right is the translation shown to users. For example: "CATEGORY_LOGIC": "Логика" means the “Logic” category will display as “Логика”.

If you find any terms that need improvement, the easiest way is to simply reply in this thread! Just let me know which term needs correction and what you suggest, and I’ll take care of it. Of course, if you’re familiar with GitHub, you’re also welcome to open an Issue or submit a Pull Request.

Thanks again for your help! :pray:

Sure ray, I’ll took a look. Maybe I’ll have to install the app in VS Studio code and check the UI in its context.

I’ll try to do this in the coming days.

1 Like