Difference between revisions of "Itty Bitty Buggy: Getting Started (mDesigner)"

From Microduino Wiki
Jump to: navigation, search
(→‎Connecting to Itty Bitty Buggy to mDesigner)
Line 15: Line 15:
  
 
=Hardware Preparation=
 
=Hardware Preparation=
 +
{| class="wikitable"
 +
|
 
Assemble Itty Bitty Buggy into it's default '''Buggy''' mode with mCenter+ on top of Buggy Base. Ensure the cable is connected to pin D2/D3 on mCenter+ and the other end connected to to Buggy Base. Attached the wheels onto Buggy Base. This hardware configuration will be used in the remaining tutorials.
 
Assemble Itty Bitty Buggy into it's default '''Buggy''' mode with mCenter+ on top of Buggy Base. Ensure the cable is connected to pin D2/D3 on mCenter+ and the other end connected to to Buggy Base. Attached the wheels onto Buggy Base. This hardware configuration will be used in the remaining tutorials.
−
 
+
|}
 
[[image.png]]
 
[[image.png]]
  
 +
{| class="wikitable"
 +
|
 
Connect the USB cable to Buggy and the other end to your computer's USB port. Switch on Buggy with the power switch.
 
Connect the USB cable to Buggy and the other end to your computer's USB port. Switch on Buggy with the power switch.
−
 
+
|}
 
[[image.png]]
 
[[image.png]]
  
 
=mDesigner's User Interface=
 
=mDesigner's User Interface=
 +
{| class="wikitable"
 +
|
 
Here is a quick overview of mDesigner's User Interface. A more in-depth description can be found [[no_link|'''here''']].
 
Here is a quick overview of mDesigner's User Interface. A more in-depth description can be found [[no_link|'''here''']].
−
 
+
|}
 
[[File:Overview of mDesigner Interface.png]]
 
[[File:Overview of mDesigner Interface.png]]
  
 
=Configuring mDesigner for Itty Bitty Buggy=
 
=Configuring mDesigner for Itty Bitty Buggy=
 +
{| class="wikitable"
 +
|
 
Under the kit selection, select '''Buggy'''.
 
Under the kit selection, select '''Buggy'''.
−
 
+
|}
 
[[File:image.png]]
 
[[File:image.png]]
  
 +
{| class="wikitable"
 +
|
 
This allows access to the Buggy control blocks.
 
This allows access to the Buggy control blocks.
−
 
+
|}
 
[[File:image.png]]
 
[[File:image.png]]
  
Line 60: Line 70:
 
To create a program in mDesigner. Simply drag blocks from the '''Blocks''' section into the '''Script''' section.
 
To create a program in mDesigner. Simply drag blocks from the '''Blocks''' section into the '''Script''' section.
  
−
=First Example=
+
==First Example==
 +
{| class="wikitable"
 +
|
 
Clicking on a '''Block Category''' such as '''Events''' or '''Buggy''' will bring up the '''Blocks''' in that category. This allows you to quickly find the Blocks you need.
 
Clicking on a '''Block Category''' such as '''Events''' or '''Buggy''' will bring up the '''Blocks''' in that category. This allows you to quickly find the Blocks you need.
−
 
+
|}
 +
{| class="wikitable"
 +
|
 
For this example, first click on '''Events''' under the '''Block Categories''' section.  
 
For this example, first click on '''Events''' under the '''Block Categories''' section.  
 +
Then drag the [[File:MDesigner_When_Click_Green_Flag_block_new.png|x50px]] (When Green Flag clicked) block into the '''Scripts''' section.
 +
|}
  
−
Then drag the [[File:MDesigner_When_Click_Green_Flag_block_new.png|x50px]] (When Green Flag clicked) block into the '''Scripts''' section.
+
[[image.png]]
  
 +
{| class="wikitable"
 +
|
 
Next, click on the '''Buggy''' category.
 
Next, click on the '''Buggy''' category.
 +
|}
 +
[[image.png]]
  
 +
{| class="wikitable"
 +
|
 
Then drag the [[File:IBB_mDesigner_ColorLED_Set_Color_NoLabels.png|x50px]] ('''ColorLED - Set Color''') block into the '''Scripts''' section and snap it under the [[File:MDesigner_When_Click_Green_Flag_block_new.png|x50px]] ('''When Green Flag clicked''') block as shown.
 
Then drag the [[File:IBB_mDesigner_ColorLED_Set_Color_NoLabels.png|x50px]] ('''ColorLED - Set Color''') block into the '''Scripts''' section and snap it under the [[File:MDesigner_When_Click_Green_Flag_block_new.png|x50px]] ('''When Green Flag clicked''') block as shown.
 +
|}
 +
[[image.png]]
  
 +
{| class="wikitable"
 +
|
 
Now, change the color on the [[File:IBB_mDesigner_ColorLED_Set_Color_NoLabels.png|x50px]] ('''ColorLED - Set Color''') block by clicking on the color. Set it to '''red''' or to a color of your liking.
 
Now, change the color on the [[File:IBB_mDesigner_ColorLED_Set_Color_NoLabels.png|x50px]] ('''ColorLED - Set Color''') block by clicking on the color. Set it to '''red''' or to a color of your liking.
 +
|}
 +
[[image.png]]

Revision as of 17:31, 25 October 2018

mDesigner software installation must be completed before proceeding to this guide.

The mDesigner software installation guide can be found here for Windows / for Mac

This tutorial will get you getting started with programming Itty Bitty Buggy with mDesigner.

The following topics will be covered:

  • Hardware preparation
  • Overview of mDesigner's user interface.
  • Configuring mDesigner for use with Itty Bitty Buggy.
  • Assembling code blocks (creating a program)
  • Programming Itty Bitty Buggy
  • Online vs. Offline Mode

Hardware Preparation

Assemble Itty Bitty Buggy into it's default Buggy mode with mCenter+ on top of Buggy Base. Ensure the cable is connected to pin D2/D3 on mCenter+ and the other end connected to to Buggy Base. Attached the wheels onto Buggy Base. This hardware configuration will be used in the remaining tutorials.

image.png

Connect the USB cable to Buggy and the other end to your computer's USB port. Switch on Buggy with the power switch.

image.png

mDesigner's User Interface

Here is a quick overview of mDesigner's User Interface. A more in-depth description can be found here.

File:Overview of mDesigner Interface.png

Configuring mDesigner for Itty Bitty Buggy

Under the kit selection, select Buggy.

File:Image.png

This allows access to the Buggy control blocks.

File:Image.png

Connecting to Itty Bitty Buggy to mDesigner

Ensure Itty Bitty Buggy is connected to your computer with the USB cable.

Ensure mDesigner is in Online mode. (If mDesigner is in Offline mode, click on the slider to switch it to Online mode.) Online and Offline mode will be covered later.

File:Image.png


Itty Bitty Buggy is now connected and ready to be programmed!

Assembling A Program

To create a program in mDesigner. Simply drag blocks from the Blocks section into the Script section.

First Example

Clicking on a Block Category such as Events or Buggy will bring up the Blocks in that category. This allows you to quickly find the Blocks you need.

For this example, first click on Events under the Block Categories section. Then drag the MDesigner When Click Green Flag block new.png (When Green Flag clicked) block into the Scripts section.

image.png

Next, click on the Buggy category.

image.png

Then drag the IBB mDesigner ColorLED Set Color NoLabels.png (ColorLED - Set Color) block into the Scripts section and snap it under the MDesigner When Click Green Flag block new.png (When Green Flag clicked) block as shown.

image.png

Now, change the color on the IBB mDesigner ColorLED Set Color NoLabels.png (ColorLED - Set Color) block by clicking on the color. Set it to red or to a color of your liking.

image.png

Retrieved from "https://wiki.microduinoinc.com/index.php?title=Itty_Bitty_Buggy:_Getting_Started_(mDesigner)&oldid=23029"