KS0456 Keyestudio Honeycomb Smart Wearable Coding Kit for Micro:bit: Difference between revisions

From Keyestudio Wiki
Jump to navigation Jump to search
Line 335: Line 335:
Go to MakeCode and choose '''My Projects''' and click on '''New Projects'''.<br>
Go to MakeCode and choose '''My Projects''' and click on '''New Projects'''.<br>
If you want to see the codes behind, then you can click on JavaScript and it will display JavaScript code there in IDE.<br>
If you want to see the codes behind, then you can click on JavaScript and it will display JavaScript code there in IDE.<br>
[[File:02456图片26.png|400px|frameless]]<br>
[[File:02456图片26.png|700px|frameless]]<br>




Line 342: Line 342:
Now drag and drop, and go to <span style="color:Purple">Led</span> and click <span style="color:Purple">more</span> to drag the block <span style="color:Purple">led enable(false)</span> out; choose <span style="color:Purple">true</span>.<br>
Now drag and drop, and go to <span style="color:Purple">Led</span> and click <span style="color:Purple">more</span> to drag the block <span style="color:Purple">led enable(false)</span> out; choose <span style="color:Purple">true</span>.<br>
Now go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">on (shake)</span>; and duplicate it for six times. Choose the posture you want.<br>
Now go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">on (shake)</span>; and duplicate it for six times. Choose the posture you want.<br>
[[File:0456图片-3.png|400px|frameless]]<br>
[[File:0456图片-3.png|700px|frameless]]<br>


And again go to <span style="color:Blue">Basic</span> and drag the <span style="color:Blue">show leds</span> block into the block you just made. You can duplicate the leds display block and choose to draw different led icons as you like.<br>
And again go to <span style="color:Blue">Basic</span> and drag the <span style="color:Blue">show leds</span> block into the block you just made. You can duplicate the leds display block and choose to draw different led icons as you like.<br>
[[File:0456图片-4.png|400px|frameless]]<br>
[[File:0456图片-4.png|700px|frameless]]<br>


So let's move on and name and download the program you’ve written.<br>
So let's move on and name and download the program you’ve written.<br>
[[File:0456图片-5.png|400px|frameless]]<br>
[[File:0456图片-5.png|700px|frameless]]<br>
[[File:0456图片-6.png|400px|frameless]]<br>
[[File:0456图片-6.png|400px|frameless]]<br>
<br>
<br>
'''Run Code on Micro:bit'''<br>
'''Run Code on Micro:bit'''<br>
Downloaded well the code, connect the micro:bit to your computer with a micro USB cable. You can right-click the microbit HEX file to send to your micro:bit main board. See what will show on micro:bit when move the micro:bit.<br>
Downloaded well the code, connect the micro:bit to your computer with a micro USB cable. You can right-click the microbit HEX file to send to your micro:bit main board. See what will show on micro:bit when move the micro:bit.<br>
[[File:0456图片15.png|400px|frameless]]<br>
[[File:0456图片15.png|700px|frameless]]<br>
'''Code 1:''' <br>
'''Code 1:''' <br>
[[File:0456图片-8.png|400px|frameless]]
[[File:0456图片-8.png|700px|frameless]]<br>
'''Result'''<br>
'''Result'''<br>
Done sending the code 1 to micro:bit, when we move the micro:bit logo up, LED matrix will show the first icon set in the code;<br>
Done sending the code 1 to micro:bit, when we move the micro:bit logo up, LED matrix will show the first icon set in the code;<br>
[[File:0456图片-9.png|400px|frameless]]<br>
[[File:0456图片-9.png|700px|frameless]]<br>


Move the micro:bit pin logo down, LED matrix will show the second icon set in the code;<br>
Move the micro:bit pin logo down, LED matrix will show the second icon set in the code;<br>
Place the micro:bit horizontally, make the matrix screen up, LED matrix will show the third icon set in the code;<br>
Place the micro:bit horizontally, make the matrix screen up, LED matrix will show the third icon set in the code;<br>
[[File:0456图片-10.png|400px|frameless]]<br>
[[File:0456图片-10.png|700px|frameless]]<br>


Place the micro:bit horizontally, make the matrix screen down, LED matrix will show the fourth icon set in the code;<br>
Place the micro:bit horizontally, make the matrix screen down, LED matrix will show the fourth icon set in the code;<br>
Shake the micro:bit board, LED matrix will show the fifth icon set in the code;<br>
Shake the micro:bit board, LED matrix will show the fifth icon set in the code;<br>
When the micro:bit main board is tilted left, LED matrix will show a left arrow icon; if tilted right, LED matrix will show a right arrow icon.<br>
When the micro:bit main board is tilted left, LED matrix will show a left arrow icon; if tilted right, LED matrix will show a right arrow icon.<br>
[[File:0456图片-10.png|400px|frameless]]<br>
[[File:0456图片-10.png|700px|frameless]]<br>
'''Showing X-Y-Z axis Data'''  
'''Showing X-Y-Z axis Data'''<br>
 
Go further, let's get started and display acceleration X-Y-Z axis data on our micro:bit when move micro:bit in different direction. <br>
Go further, let's get started and display acceleration X-Y-Z axis data on our micro:bit when move micro:bit in different direction. <br>
To run code when the program starts, you just need to go to <span style="color:Blue">Basic</span> and scroll down to see an <span style="color:Blue">on start</span> block. <br>
To run code when the program starts, you just need to go to <span style="color:Blue">Basic</span> and scroll down to see an <span style="color:Blue">on start</span> block. <br>
Now drag and drop, and again go to <span style="color:Blue">Basic</span> and click <span style="color:Blue">more</span> to drag the block <span style="color:Blue">clear screen</span> out; means turn off all LEDs.<br>
Now drag and drop, and again go to <span style="color:Blue">Basic</span> and click <span style="color:Blue">more</span> to drag the block <span style="color:Blue">clear screen</span> out; means turn off all LEDs.<br>
[[File:0456图片-12.png|400px|frameless]]<br>
[[File:0456图片-12.png|700px|frameless]]<br>


Now go to the <span style="color:Blue">Basic</span> and scroll down to see a <span style="color:Blue">forever</span> and <span style="color:Blue">show string</span> block. Now drag and drop, and duplicate it. Change the word to a capital letter.<br>
Now go to the <span style="color:Blue">Basic</span> and scroll down to see a <span style="color:Blue">forever</span> and <span style="color:Blue">show string</span> block. Now drag and drop, and duplicate it. Change the word to a capital letter.<br>
Go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">acceleration(mg){x}</span> into <span style="color:Blue">show string</span> block. <br>
Go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">acceleration(mg){x}</span> into <span style="color:Blue">show string</span> block. <br>
[[File:0456图片-13.png|400px|frameless]]<br>
[[File:0456图片-13.png|700px|frameless]]<br>
Duplicate this piece of block for several times, and separately change the string <hello> block to X, Y, Z.<br>
Duplicate this piece of block for several times, and separately change the string <hello> block to X, Y, Z.<br>
Next, we go to <span style="color:Navy">'''Serial'''</span>, drag and drop the block <span style="color:Navy">'''serial write value(x)=(0)'''</span><br>
Next, we go to <span style="color:Navy">'''Serial'''</span>, drag and drop the block <span style="color:Navy">'''serial write value(x)=(0)'''</span><br>
[[File:0456图片-14.png|400px|frameless]]<br>
[[File:0456图片-14.png|700px|frameless]]<br>
<span style="color:Navy">In this way it can write the acceleration value to the serial port and show it on monitor</span>. Go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">acceleration(mg){x}</span> to replace the <span style="color:Navy">'''(0)'''</span> field.
<span style="color:Navy">In this way it can write the acceleration value to the serial port and show it on monitor</span>. Go to <span style="color:Purple">input</span>, drag and drop the block <span style="color:Purple">acceleration(mg){x}</span> to replace the <span style="color:Navy">'''(0)'''</span> field.
[[File:0456图片-15.png|400px|frameless]]<br>
[[File:0456图片-15.png|700px|frameless]]<br>
After that, duplicate this piece of code block twice and change the value to Y, Z.<br>
After that, duplicate this piece of code block twice and change the value to Y, Z.<br>
[[File:0456图片-16.png|400px|frameless]]<br>
[[File:0456图片-16.png|700px|frameless]]<br>
So let's move on and name and download the program you’ve written.<br>
So let's move on and name and download the program you’ve written.<br>
[[File:0456图片-17.png|400px|frameless]]<br>
[[File:0456图片-17.png|700px|frameless]]<br>


'''Run Code on Micro:bit'''<br>
'''Run Code on Micro:bit'''<br>

Revision as of 09:39, 4 September 2019

Keyestudio Honeycomb Smart Wearable Coding Kit for Micro:bit


Kit Guide

The BBC micro:bit is a tiny programmable computer designed to make learning and teaching easy and fun! This embedded board has a Bluetooth, USB interface, accelerometer, compass, light and temperature sensors, 5x5 LED matrix, buttons, and edge connectors for accessories.
Keyestudio Honeycomb Smart wearable Kit for Micro:bit is designed for people who is at the door step of learning electric circuit and programming knowledge.
The kit has provided some basic electronic modules like RGB LED, button, buzzer, TEMT6000 light module and more. You can not only learn basic knowledge of these modules, but also use it to design circuit.
With the help of Micro:bit programming technique, your circuit becomes more animated. Micro:bit Starter kit can help you enter a wonderful of electronic world.  

thumb


Kit List

No. Component Quantity Picture
1 BBC micro:bit main board 1
thumb
2 keyestudio Edge Connector IO Breakout Board for micro:bit 1
thumb
3 Keyestudio micro:bit 1W LED Module 1
thumb
4 Keyestudio micro:bit 5050 RGB Module 1
thumb
5 keyestudio micro:bit Tactile Button Module 1
thumb
6 Keyestudio micro:bit Capacitive Touch Module 1
thumb
7 Keyestudio micro:bit TEMT6000 Light Module 1
thumb
8 keyestudio micro:bit PIR Motion Module 1
thumb
9 keyestudio micro:bit Microphone Module 1
thumb
10 keyestudio micro:bit Passive Buzzer Module 1
thumb
11 Black USB cable 1m 1
thumb
12 Alligator clip cable 10
thumb



micro:bit Driver Installation

Next, let’s install the driver for micro:bit main board.
1) First of all, connect the micro:bit to your computer using a USB cable.
thumb

2)Then, double click the driver software to install it. Here you can click the icon below to download it.thumb

thumb

3) After that, click Next to continue the installation.
thumb

4) Wait the driver installing finished.
thumb

5) Wait the driver installing finished.
thumb

6) Driver installation completed, then you can right click the “Computer” —> “Properties”—> “Device Manager”.
thumb
You can check the detailed Ports information shown as below.
thumb

micro:bit Example Use

Step 1: Connect It

Connect the micro:bit to your computer via a micro USB cable. Your micro:bit will show up on your computer as a drive called 'MICROBIT'.
thumb

Step 2: Program It

Using micro bit MakeCode Block editor https://makecode.microbit.org/, write your first micro:bit code.
You can drag and drop some example blocks and try your program on the Simulator in the Javascript Blocks Editor, like in the image below.
thumb

Click the JavaScript, you can see the corresponding program code. Shown as below figure.
thumb

Step 3: Download It

Click the Download button in the editor. This will download a 'hex' file, which is a compact format of your program that your micro:bit can read. Here you can name the project as LED1, then click “Save”. Shown below.
thumb

Once the hex file has downloaded, copy it to your micro:bit just like copying a file to a USB drive. On Windows find the microbit-LED1 file, you can right click and choose "Send To→MICROBIT."
thumb

thumb

Step 4: Play It

The micro:bit will pause and the yellow 5*5 LED on the back of the micro:bit will display the images while your code is programmed.
thumb

You can power it using USB cable or battery. The battery holder need to connect two 1.5V AA batteries. Shown below.
thumb


micro:bit Pins

Before getting started with the following projects, first need to figure out each pin of micro:bit main board. Please refer to the reference diagram shown below.
thumb
The BBC micro:bit has 25 external connections on the edge connector of the board, which we refer to as ‘pins’. The edge connector is the grey area on the right side of the figure above. There are five large pins, that are also connected to holes in the board labelled: 0, 1, 2, 3V, and GND. And along the same edge, there are 20 small pins that you can use when plugging the BBC micro:bit into an edge connector.

Note that it read from the BBC micro:bit official website. More reference you can click the link below:
BBC micro bit Pins: http://microbit.org/guide/hardware/pins/
BBC micro:bit website: http://microbit.org/
Micro bit MakeCode Block Editor: https://makecode.microbit.org/
Meet micro:bit starter programming: http://microbit.org/guide/
BBC micro:bit Features Guide: http://microbit.org/guide/features/
BBC micro:bit Safety Warnings: http://microbit.org/guide/features/
BBC micro:bit Quick Start Guide: http://microbit.org/guide/quick/


thumb thumb


Getting Started with Micro:bit Projects


The BBC micro:bit is a tiny programmable computer designed to make learning and teaching easy and fun!
Combine the micro:bit main board, keyestudio Edge Connector IO Breakout Board for micro:bit, and other sensor modules to make your own micro:bit projects. Looking to discover more coding projects for micro:bit.

Project 1: Hello

Overview
This project is very simple. You can use only a micro:bit main board and a USB cable to display the “Hello!”. This is an entry experiment for you to enter the programming world of micro:bit.


Components:

  • Micro:bit main board*1
  • USB cable*1


Pre-Test:
So let's test our micro:bit before programming it. There are two ways to test your micro:bit.

  • 1.via USB cable: You can test your micro:bit just to see if it is working fine or not. To do so connect your micro:bit to your computer via USB cable and wait for a second your micro:bit will display "HELLO" by blinking LEDs. If it does, then it is working fine.
  • 2.via Battery Connector: Insert batteries into battery box and connect your micro:bit via power pins and then see if it's displaying "HELLO". If it does, then it is working fine.


thumb


Coding
So now let's move to coding. Let us see how we can code and display "Hello" manually. Below are some steps to follow.
1. Open the https://makecode.micro:bit.org/#editor to write your code. Microsoft MakeCode is actually a platform that allows us to code for a micro:bit, and also provides an interactive simulator where we can debug and run our code, and will be able to see what to expect out right there on the site.


Go to MakeCode and choose My Projects and click on New Projects.

thumb


After this, you will see the following screen. As we can see that there is one micro:bit simulator, which will show the output instantly when we will finish writing our code.


2.Tools
We can see that there are different tools to program the micro:bit just next to simulator. It is quite easy to program by dragging and dropping the blocks, and if you want to see the codes behind, then you can click on JavaScript and it will display JavaScript code there in IDE.

thumb


3.Display "Hello,world!"
Let's get started and display "Hello, KEYESTUDIO!" on our micro:bit. To do so, you just need to go to Basic and scroll down to see an on start block.
Now drag and drop, and go to Led and click more to drag the block led enable(True) out;
And again go to Basic and search for the show string <hello> block. That's all; now you will see HELLO on your simulator.

thumb


After completing this step micro:bit will restart itself and run the code. It will display "HELLO" there on the simulator. Quite easy? Yeah, quite easy. So let's move on and code for the rest.
Now drag and drop, and again go to Basic and search for the show string <hello> block; change the word to KEYESTUDIO and add a pause block in milliseconds.
thumb


That's all for the coding part.
Name and download your program that you have written.
thumb


Run Code on Micro:bit
Now let us see how to run our code on the actual Micro:bit.

  • Plug in the Micro:bit to a computer via USB.
  • After plugging in, you should see Micro:bit drive on your computer.


thumb


Now go to your download folder and right-click to send the downloaded microbit Hex file to your micro:bit main board.
Now wait for a second for Micro:bit to restart, and it will start displaying output automatically.

thumb


Code:

thumb


Project 2: Buttons


Overview
The micro:bit main board comes with 3 buttons. One for reset; button A and B are used as control button. The micro:bit has 25 individually-programmable LEDs, allowing you to display text, numbers, and images.
In this project, we are going to use the two built-in buttons to make the LED matrix showing the patterns.
There are two test codes for you. One is without loop function; the other is with loop function.

0456图片25.png


Hardware Components:

  • Micro:bit main board*1
  • USB cable*1


Coding
So now let's move to coding. Let us see how we can code and display different icons via button control. Below are some steps to follow.
Open the https://makecode.micro:bit.org/#editor to write your code.
Microsoft MakeCode is actually a platform that allows us to code for a micro:bit, and also provides an interactive simulator where we can debug and run our code, and will be able to see what to expect out right there on the site.
Go to MakeCode and choose My Projects and click on New Projects.
If you want to see the codes behind, then you can click on JavaScript and it will display JavaScript code there in IDE.

0456图片14.png


LED Display
Let's get started and display different icons on our micro:bit. To do so, you just need to go to Basic and scroll down to see an on start block.
Now drag and drop, and go to Led and click more to drag the block led enable(false) out; choose true.
On the micro:bit main board, we can see the button A and B. Now we set the buttons to make the led matrix show different icons.
Now go to input, drag and drop the block on button()pressed; and duplicate it twice. Separately change the button to button A, B, A+B.
And again go to Basic and search for the show leds block; duplicate the block twice and drag these blocks into the button block you just made.
You can show different icons as you like by drawing the leds.
0456图片28.png


After completing this step micro:bit will restart itself and run the code. It will display icons on the simulator. Quite easy? Yeah, quite easy. So let's move on and name and download the program you’ve written.
02456图片29.png


Run Code on Micro:bit
Downloaded well the code, connect the micro:bit to your computer with a micro USB cable. You can right-click the microbit HEX file to send to your micro:bit main board. See what will show on micro:bit.
0456图片30.png


Code 1:
02456图片31.png

Furthermore, you can change to use the forever block and logic conditionals to make the same function.
0456图片32.png
0456图片33.png

Go to the Basic and scroll down to see a forever block. Now drag and drop, and go to Logic and search for if (true) then ... block. Drag this block into forever block.
Go to input, drag and drop the block button () is pressed to replace the (true). And again go to Basic and search for the show leds block; change the led display as you want. We draw a big heart shape.
0456图片34.png


So let's move on and can duplicate this whole block twice. Just change the button and leds show.
Go to finish the code by yourself. After that, download and send the microbit hex file to your micro:bit main board. See what result it will make.

Code 2:
0456图片35.png

Result
Done sending the code 1 or code 2 to micro:bit.
Press down the button A, LED matrix on the micro:bit main board will show a heart shape icon.
0456图片36.png

Press the button B, LED matrix will show a diamond shape icon.
0456图片37.png


Press the button A and B at the same time, LED matrix shows another different icon.
tumble



Project 3: Accelerometer


Overview
An accelerometer measures the acceleration of your micro:bit; this component senses when the micro:bit is moved.
The compass detects the earth's magnetic field, allowing you to detect which direction the micro:bit is facing.
In this project, you will learn how to use both accelerometer and compass to make LED matrix show the images. Besides, learn to test the 3-axis acceleration, showing on the LED matrix and serial monitor.

0456图片-1.png


Components:

  • Micro:bit main board*1
  • USB cable*1

Coding
So now let's move to coding. Let us see how we can code and display different icons via controlling the micro:bit direction. Below are some steps to follow.
Open the https://makecode.micro:bit.org/#editor to write your code.
Microsoft MakeCode is actually a platform that allows us to code for a micro:bit, and also provides an interactive simulator where we can debug and run our code, and will be able to see what to expect out right there on the site.
Go to MakeCode and choose My Projects and click on New Projects.
If you want to see the codes behind, then you can click on JavaScript and it will display JavaScript code there in IDE.
02456图片26.png


LED Display
Let's get started and display different icons on our micro:bit when move micro:bit in different direction. To do so, you just need to go to Basic and scroll down to see an on start block.
Now drag and drop, and go to Led and click more to drag the block led enable(false) out; choose true.
Now go to input, drag and drop the block on (shake); and duplicate it for six times. Choose the posture you want.
0456图片-3.png

And again go to Basic and drag the show leds block into the block you just made. You can duplicate the leds display block and choose to draw different led icons as you like.
0456图片-4.png

So let's move on and name and download the program you’ve written.
0456图片-5.png
0456图片-6.png

Run Code on Micro:bit
Downloaded well the code, connect the micro:bit to your computer with a micro USB cable. You can right-click the microbit HEX file to send to your micro:bit main board. See what will show on micro:bit when move the micro:bit.
0456图片15.png
Code 1:
0456图片-8.png
Result
Done sending the code 1 to micro:bit, when we move the micro:bit logo up, LED matrix will show the first icon set in the code;
0456图片-9.png

Move the micro:bit pin logo down, LED matrix will show the second icon set in the code;
Place the micro:bit horizontally, make the matrix screen up, LED matrix will show the third icon set in the code;
0456图片-10.png

Place the micro:bit horizontally, make the matrix screen down, LED matrix will show the fourth icon set in the code;
Shake the micro:bit board, LED matrix will show the fifth icon set in the code;
When the micro:bit main board is tilted left, LED matrix will show a left arrow icon; if tilted right, LED matrix will show a right arrow icon.
0456图片-10.png
Showing X-Y-Z axis Data
Go further, let's get started and display acceleration X-Y-Z axis data on our micro:bit when move micro:bit in different direction.
To run code when the program starts, you just need to go to Basic and scroll down to see an on start block.
Now drag and drop, and again go to Basic and click more to drag the block clear screen out; means turn off all LEDs.
0456图片-12.png

Now go to the Basic and scroll down to see a forever and show string block. Now drag and drop, and duplicate it. Change the word to a capital letter.
Go to input, drag and drop the block acceleration(mg){x} into show string block.
0456图片-13.png
Duplicate this piece of block for several times, and separately change the string <hello> block to X, Y, Z.
Next, we go to Serial, drag and drop the block serial write value(x)=(0)
0456图片-14.png
In this way it can write the acceleration value to the serial port and show it on monitor. Go to input, drag and drop the block acceleration(mg){x} to replace the (0) field. 0456图片-15.png
After that, duplicate this piece of code block twice and change the value to Y, Z.
0456图片-16.png
So let's move on and name and download the program you’ve written.
0456图片-17.png

Run Code on Micro:bit
Downloaded well the code, connect the micro:bit to your computer with a micro USB cable. You can right-click the microbit HEX file to send to your micro:bit main board. See what will show on micro:bit when move the micro:bit.
02456图片26.png
Code 2:
0456图片-19.png
Result
Done sending the code 2 to micro:bit, we can work out the 3-axis X, Y, Z acceleration data, with a unit of mg.
On one hand, see the data scroll on the micro:bit LED matrix; on the other hand, check the data on the serial monitor of Arduino IDE.
0456图片-20.png
0456图片-21.png
Note: the baud rate of micro:bit is defaulted by 115200.