Add an Arduino LED Light (from Seeed's Grove Kit) block

In this tutorial, we will make a block to control Arduino's LED light. We will use the LED module from Seeed's Grove Kit as an Example, But you can simply apply this to other electronic kits.

Step 1. Login and add a new Extension

Go to ext.mblock.cc, and sign in with your Makeblock Account (sign up if you do not have one yet)

Fill in the ID, Version and Name field in the Add Extension dialog (You may choose an ID as you like for your extension) Then select the support platform. In this case mBlock PC and Web. Therefore, the extension will show up on the PC and Web version, but not the mobile (iOS and Android) version of mBlock.

Finally, Scroll down and fill in "arduino_uno" at the "Supported device/sprite" field.

In this way, your extension will show up when the "Extension" button of the "Arduino Uno" device is clicked.

Step 2. Add new Blocks for your extension

Click on the name of your extension to make further edits.

Before adding new blocks to the extension, we need to make sure the blocks generates Arduino code. In order to do this, enter the "Transcode Settings" tab and select "ArduinoC" as the transcode language. REMEMBER TO CLICK THE SAVE BUTTON after doing this!! Otherwise you will lose your choice.

Then switch back to "Block Settings", Click "Add Category" to add a new Block Category. I use "Seeed Grove" as the category name. You may also select the color for your blocks in the new category.

Then create a new block under this category by clicking the plus sign in the bottom of the screen.

For example, I wish to create a block like: LED Light (port name) (on/off)

In the "Content" region, I enter "LED Light ", then an "@" symbol. As soon as I enter the "@" symbol, a popup appears, allowing me to choose the type of the field I wish to add to my block.

Since my field is a drop down of Arduino Ports, I chose "Dropdown". Then a dropdown appears. In this way I can add all my fields and preview my block on the block editor.

Then I select the first tab to create options for the first dropdown. Enter "port" as the parameter name, then Click the "Plus Sign" at the bottom of the tab to enter the option input screen.

Seeed allows me to plug LED Lights into the digital ports, naming D1 to D8. So I input the name of the ports and their respected values for the Arduino Code, 1-8. The "name" and the "value" is separated by a comma, and each option takes a separate line.

After that, make sure to delete the empty first line by clicking the "X" button:

In the same method, I added options for the on/off "status" field.

Before moving on, select "mBlock PC" and "mBlock Web" as the supported platform, and change the block status to "Live Mode not Configured". In this way, the block works in the "Upload" mode and is greyed out in the "Live" mode.

Step 3: Setup code generation

Then switch to the "Upload Transcode" tab. the code generation is split into parts explained here. You can double click the regions below to edit the code of each part.

I looked up the documentation of Grove Green LED I have, it has the following Arduino code example:

void setup() {
  // initialize digital pin2  as an output.
  pinMode(2, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(2, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);                       // wait for a second
  digitalWrite(2, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);                       // wait for a second
}

After reading the code, I know that I need to insert pinMode at the setup part; and digitalWrite at the code part. This is my transcode settings for my block. I use /*{port}*/ to refer to the value of the dropdown field named "port".

Don't forget to hit the "Save" button at the bottom to save your work!

After everything is done, you may use the "Preview" button at the top right corner to give your extension a test.