Difference between revisions of "Getting Started with Mixly1.0"

From Keyestudio Wiki
Jump to: navigation, search
(Created blank page)
 
Line 1: Line 1:
 +
== Download == 
  
 +
There are two kind installation packages provided for you in the following links:
 +
 +
Mixly1.0 for Win 7/8/10:<big>https://fs.keyestudio.com/Mixly1-Windows</big>
 +
 +
Mixly1.0 for Mac:<big>https://fs.keyestudio.com/Mixly1-MACOS</big>
 +
 +
=== Windows version: ===
 +
 +
We will take Mixly1.0 (Windows version) as example.
 +
 +
=== Install Software: ===
 +
 +
You will get installation package after downloading. As shown below:
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
Unzip the package, you will see “Mixly 1.0 for keyestudio.exe”
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
Double-click ”Mixly 1.0 for keyestudio.exe”, the following interface pops up.
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
2.Interface Instruction:
 +
Look at the main interface of Mixly 1.0, it includes five parts, that is, blocks selection, code edit, text code (hidden), system function and message prompt area. As shown below.
 +
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
 +
=== Blocks selection ===
 +
 +
There are different blocks in the block selection area, you could finish programming via them.
 +
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
=== Code Edit Area ===
 +
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
Design program by combine the blocks you need.
 +
 +
=== Delete program: ===
 +
 +
* Drag the useless code to the recycle bin at the lower right corner
 +
* Move the code to the block selection area
 +
* Right click the block to delete, or tap “Delete” and “Backspace” on keyboard.
 +
 +
=== Zoom in and out program ===
 +
 
 +
Of course, you could zoom in and out program by the scroll wheel of mouse
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>:Center the program
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>: Zoom in program of code edit area
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>: minify program of code edit area
 +
 +
=== Copy program: ===
 +
 +
Right click to select “Duplicate” and you can copy an instruction block. 
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
Select program via mouse, then press “Ctrl+C” and “Ctrl+V” to replicate block.
 +
 +
=== Switch Language ===
 +
 +
Mixly 1.0 supports four languages: English、Español (Spanish)、中文简体(Chinese Simplified)、中文繁体(Chinese Traditional).
 +
 +
<br>[[Image:3.1-1.png|800px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>: undo, we could get the deleted block back by this icon (or press Ctrl + Z)when deleting blocks mistakenly.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>: redo, click this icon or press Ctrl + Y key to go back to the previous step
 +
 +
=== Assistant document: ===
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>:click this icon to enter the page that contains the detailed information and introduction about Mixly software
 +
 +
=== System function area: ===
 +
 +
As shown below:
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
General function: New, open, save and save as function.
 +
The saved format of the code is .mix.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Enable Mixly 1.0 software and click “Open” to find *.mix file to reach the saved document, or you could double-click *.mix file or drag it to the code edit area.
 +
 +
 +
=== Compile & Upload ===
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
After programming, click “Compile” to check errors in the code.
 +
 +
If display “Compile failed!”, you need to look over if code is wrong.
 +
 +
If popping up “Upload failed!”, unplug and connect USB cable to address this problem.
 +
 +
If “Upload success” appears, which means the code is uploaded successfully on the board.
 +
 +
=== Control board & COM port: ===
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Click drop-down triangle to see the options for distinct control boards, select the board you use.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Next to choose the corresponding COM port which is the communication path between PC and control board.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
'''Serial monitor:'''
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Monitor only works with the blocks of serial port, it is used to display the output variables and value of sensors.
 +
 +
'''Enlarge page:'''
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
There is a scroll button beside the monitor, drag this button to magnify the whole page.
 +
 +
2.Start your first program---Saying Hello World!
 +
 +
Next, we will take example as Arduino V4.0 control board:
 +
(1)Wire-up Guide:             
 +
Link control board with computer by USB cable.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
(2)Open Program Code
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
The sample code ”Hello World” is provided for you, you could directly open it.
 +
   
 +
A.Click”Open” to find sample code“Hello World”, as shown below:
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
In fact, open it directly( click “Mixly 1.0 for keyestudio”package ->“sample”->“Arduino”->07 Serial Port ->“Hello World”) and drag to code edit area, then switch language.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
B.Then tap “Compile”, if compile successfully, the code is approved well, enter the next step.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
C.Connect control board to your PC via USB wire, choose the control board type and COM port(Right-click “Computer”-> “Properties”-> “Device Manager”, then you could see COM port at the “Other devices”), upload the program code to your control board. (illustrate by COM19)
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Upload program successfully.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
 +
(3)Display Hello World!
 +
Then open serial monitor and set baud rate to 9600, “Hello World!” is shown on monitor.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Check Arduino Code:
 +
 +
Click [[Image:3.1-1.png|300px|frameless]] button to check Arduino code on the right side.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Or click “Code” to look through Arduino code.
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
You could design code by yourself.
 +
A.Click“Control” to find “set up” block and drag it to the edit area.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
B.Click “Serial port”, move “Serial baud rate 9600”block into “set up” block.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
C.Select “Serial port” to drag “ Serial println” out.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
D.Add a text to be printed, click “Text” to find “hello” block and combine it with “serial println” block, then change “hello” into“Hello,world!”
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
E.Enter “Control” to add delay block in editing area, delay time can be set freely, set to 100ms.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
Upload code, click “Save as” to save and name this file. You could upload on the control board directly. Then see the result on serial monitor.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
 +
On the other hand, if you intend to delete some code in editing area, just right-click to select the block to be deleted, or directly put it into recycle bin.
 +
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>
 +
<br>[[Image:3.1-1.png|300px|frameless]]<br>

Revision as of 17:34, 1 July 2020

Download

There are two kind installation packages provided for you in the following links:

Mixly1.0 for Win 7/8/10:https://fs.keyestudio.com/Mixly1-Windows

Mixly1.0 for Mac:https://fs.keyestudio.com/Mixly1-MACOS

Windows version:

We will take Mixly1.0 (Windows version) as example.

Install Software:

You will get installation package after downloading. As shown below:
3.1-1.png

Unzip the package, you will see “Mixly 1.0 for keyestudio.exe”
3.1-1.png

Double-click ”Mixly 1.0 for keyestudio.exe”, the following interface pops up.
3.1-1.png

2.Interface Instruction: Look at the main interface of Mixly 1.0, it includes five parts, that is, blocks selection, code edit, text code (hidden), system function and message prompt area. As shown below.


3.1-1.png

3.1-1.png


Blocks selection

There are different blocks in the block selection area, you could finish programming via them.


3.1-1.png

Code Edit Area


3.1-1.png

Design program by combine the blocks you need.

Delete program:

  • Drag the useless code to the recycle bin at the lower right corner
  • Move the code to the block selection area
  • Right click the block to delete, or tap “Delete” and “Backspace” on keyboard.

Zoom in and out program

Of course, you could zoom in and out program by the scroll wheel of mouse


3.1-1.png
:Center the program
3.1-1.png
: Zoom in program of code edit area
3.1-1.png
: minify program of code edit area

Copy program:

Right click to select “Duplicate” and you can copy an instruction block.
3.1-1.png

Select program via mouse, then press “Ctrl+C” and “Ctrl+V” to replicate block.

Switch Language

Mixly 1.0 supports four languages: English、Español (Spanish)、中文简体(Chinese Simplified)、中文繁体(Chinese Traditional).


3.1-1.png


3.1-1.png
: undo, we could get the deleted block back by this icon (or press Ctrl + Z)when deleting blocks mistakenly.


3.1-1.png
: redo, click this icon or press Ctrl + Y key to go back to the previous step

Assistant document:


3.1-1.png
:click this icon to enter the page that contains the detailed information and introduction about Mixly software

System function area:

As shown below:


3.1-1.png

General function: New, open, save and save as function. The saved format of the code is .mix.


3.1-1.png

Enable Mixly 1.0 software and click “Open” to find *.mix file to reach the saved document, or you could double-click *.mix file or drag it to the code edit area.


Compile & Upload


3.1-1.png

After programming, click “Compile” to check errors in the code.

If display “Compile failed!”, you need to look over if code is wrong.

If popping up “Upload failed!”, unplug and connect USB cable to address this problem.

If “Upload success” appears, which means the code is uploaded successfully on the board.

Control board & COM port:


3.1-1.png

Click drop-down triangle to see the options for distinct control boards, select the board you use.


3.1-1.png

Next to choose the corresponding COM port which is the communication path between PC and control board.


3.1-1.png

Serial monitor:


3.1-1.png

Monitor only works with the blocks of serial port, it is used to display the output variables and value of sensors.

Enlarge page:


3.1-1.png

There is a scroll button beside the monitor, drag this button to magnify the whole page.

2.Start your first program---Saying Hello World!

Next, we will take example as Arduino V4.0 control board: (1)Wire-up Guide: Link control board with computer by USB cable.


3.1-1.png

(2)Open Program Code


3.1-1.png

The sample code ”Hello World” is provided for you, you could directly open it.

A.Click”Open” to find sample code“Hello World”, as shown below:


3.1-1.png


3.1-1.png


3.1-1.png


3.1-1.png

3.1-1.png

In fact, open it directly( click “Mixly 1.0 for keyestudio”package ->“sample”->“Arduino”->07 Serial Port ->“Hello World”) and drag to code edit area, then switch language.


3.1-1.png


3.1-1.png

B.Then tap “Compile”, if compile successfully, the code is approved well, enter the next step.


3.1-1.png

C.Connect control board to your PC via USB wire, choose the control board type and COM port(Right-click “Computer”-> “Properties”-> “Device Manager”, then you could see COM port at the “Other devices”), upload the program code to your control board. (illustrate by COM19)


3.1-1.png


3.1-1.png


3.1-1.png

Upload program successfully.


3.1-1.png


(3)Display Hello World! Then open serial monitor and set baud rate to 9600, “Hello World!” is shown on monitor.


3.1-1.png

Check Arduino Code:

Click 3.1-1.png button to check Arduino code on the right side.


3.1-1.png


3.1-1.png

Or click “Code” to look through Arduino code.
3.1-1.png

You could design code by yourself. A.Click“Control” to find “set up” block and drag it to the edit area.


3.1-1.png

B.Click “Serial port”, move “Serial baud rate 9600”block into “set up” block.


3.1-1.png

3.1-1.png

C.Select “Serial port” to drag “ Serial println” out.


3.1-1.png

3.1-1.png

D.Add a text to be printed, click “Text” to find “hello” block and combine it with “serial println” block, then change “hello” into“Hello,world!”


3.1-1.png

3.1-1.png

E.Enter “Control” to add delay block in editing area, delay time can be set freely, set to 100ms.


3.1-1.png

Upload code, click “Save as” to save and name this file. You could upload on the control board directly. Then see the result on serial monitor.


3.1-1.png

On the other hand, if you intend to delete some code in editing area, just right-click to select the block to be deleted, or directly put it into recycle bin.


3.1-1.png

3.1-1.png