Announcing Microsoft MakeCode for Cue!

Posted on March 5th, 2018 by samelhusseini

Since last summer, we’ve had a snarky little black and blue team member in the office – alternately heckling us and literally running around in circles around us. Meet Cue, the CleverBot:

Today, we are excited to announce MakeCode support for Cue. This was our first time working in Robotics, so we learned a lot, and built a great collaborative relationship with our friends over at Wonder Workshop.

Here’s a rundown of some of the MakeCode features for Cue.

Toolbox

You may notice some changes to the usual MakeCode Toolbox – we tried to simplify categories as much as possible to support small screen mobile device scenarios. Aside from the language constructs, most blocks are categorized into Actions, Events, and Control.

  • Actions: Any action you want Cue to do – like moving, making sounds, or changing light colors.
  • Events: Inputs that will trigger an action – like sensing an obstacle, pressing a button, or hearing a clap or voice command.
  • Control: Contains both Logic and Loops blocks – like Repeat, If…The…Else, and boolean expressions.
Toolbox categories Actions subcategrories

In each of these Toolbox drawers, there are subcategories like Move, Color, or Sound which make finding blocks a lot easier.

Field Editors

The team at Wonder Workshop is quite amazing - really talented interaction designers who came up with some simple, but beautiful field editors for the blocks.

Some examples of these are:

Color picker

Color picker

Speed, Distance and Angle sliders

Slider

Face Pattern picker

Face picker

Sounds menu

Sounds menu

Speaking of Sounds, one thing we had a lot of fun with was using the Custom Sounds. You can record your voice saying something like, “Sam, get back to work!”. Then, have Cue sneak up on people and say it! Lots of fun 😊

Touchscreen

As well as being our first robot, Cue was our first partner used primarily with mobile devices. This meant we had to do a lot of work to make the editor more friendly for touchscreens. So, as well as simplifying the Toolbox, we made everything a bit bigger for fingers to grab and drag blocks around, and select from menus. We also added the ability to pinch with two fingers to zoom in and out of the workspace, and made the JavaScript text editor more touch friendly to better support on-screen keyboards.

JavaScript editor

Blocks <--> JavaScript

As with all MakeCode editors, you can toggle back and forth between editing your code in Blocks, or in JavaScript (and Wonder Workshop has added a super cool sound effect when you switch back and forth!). I was a bit worried about the coding experience on a tablet. However, with the JavaScript Toolbox code snippets that you can just touch to insert, and the on-screen keyboard improvements, it’s actually quite good.

Run blocks directy

No Simulator – just Run!

Another difference existing MakeCode users may notice is that, like Minecraft, there is no Simulator. Since the device is connected to the robot via Bluetooth, your program instructions are sent directly to Cue – instant gratification! The fun and exciting thing about Robotics is that what happens in the real-world can be very different from what you see on your screen. So, lots of great opportunity for trial and error. The little orange Run button in the bottom right corner will become your friend 😊

Toolbox shown for the JavaScript editor

Putting MakeCode extensibility to the test!

And one last thing I’ll point out, which is probably more of interest to our developer community, is that with Wonder Workshop we really pushed ourselves to be as extensible as possible. We wanted to provide a ‘best in class’ code editor for Wonder Workshop to embed into their Cue experience with their coding challenges, demos, and other educational content driving the use of the editor. So we developed a messaging framework and protocol that preserves the modular design, while making sure MakeCode is fully integrated into the app. It was a great exercise for us, and if you want to see an example of embedding MakeCode inside another app, take a look at this Holiday Card sample on GitHub.

For more information, or to order your very own Cue, please see Wonder Workshop’s website, Cue the Cleverbot. To start programming with MakeCode for Cue, download the free Windows 10 app from the Store.

Have fun Making Code for Cue!

– The MakeCode Team