0602 assignment lego ming tu
TRANSCRIPT
Table of Contents - Introduction ---------------------------------------------------------------------------------------------------------- 01 - User Scenario ------------------------------------------------------------------------------------------------------- 02 - Software User Interface ----------------------------------------------------------------------------------------- 09 0. Overview --------------------------------------------------------------------------------------------------------- 10 1. Connection Tab ------------------------------------------------------------------------------------------------ 11 2. Run / Stop ------------------------------------------------------------------------------------------------------- 11
3. Remote Control ------------------------------------------------------------------------------------------------ 12 4. Palette ------------------------------------------------------------------------------------------------------------ 12 5. Header ----------------------------------------------------------------------------------------------------------- 19
• Menu ------------------------------------------------------------------------------------------------------------- 19
• Profile ------------------------------------------------------------------------------------------------------------ 19
• Go to gallery ----------------------------------------------------------------------------------------------------- 21 6. Gallery ------------------------------------------------------------------------------------------------------------ 22 7. Keypad ----------------------------------------------------------------------------------------------------------- 23
- Design Process ---------------------------------------------------------------------------------------------------- 24 INTRODUCTION Features • Intuitive, color mapped, graphical icon based, highly responsive, and animated user interface.
• Big and animated Run/Stop tab for easily tapping. The magic wand graphic implies users will transfer the programming in the digital platform to a real movement/ function in the physical world like using magic.
• Big Remote Control for users to easily set up and turn the tablet into a remote control. • Make a user feel and understand the structure of real programming by the hierarchical layout
and portrait oriented coding. 1. Connection tab = void setup() 2. Palette = Class (Object-oriented) 3. Canvas = void draw() / void loop() • Gives users more input options on built-in keypad of a tablet. • Gives highly customized programming experience. Users can easily: 1. Customize and show their minifigure hear on the header. 2. Customize the canvas background. 3. Draw on the canvas. 4. Create their own gallery for sharing with friends, family, and community. • Tap any of the programming block or the help icon on the canvas to show instructions,
programming samples, and interactive activity. • A programming block shows all options and function right next to it for users to see and play
with after dropping on the canvas.
USER SCENARIO
1. Tap the icon on a tablet 2. Loading 3. Main page of the user interface
4. Tap the help tab on the bottom right corner to reveal icon function.
5. Tap any of the description labels to show detailed function and programming examples
6. Tap the description label of “Help” to show:
- Quick start video - Mechanical educator - Interactive building and programming activities.
7. Back to the main page. Turn on the Bluetooth of a tablet. The software asks the tablet to search and connect to the intelligent brick. It then shows the battery level, Bluetooth connection status, and connected devices.
8. Start to build my first robot. Firstly, drag the Motor from the palette, and drop it on the canvas.
9. Choose the number of the needed motor. If only one is needed, choose the rotating direction, rotating time and speed (power).
10. Use the popup keypad on the screen to get more input options.
11. Tap the programming block to reveal edit options (cut, copy, paste) and more information/ programming examples of the block.
12. Tap the “Input” tab of the palette, drag the Eye Sensor to the canvas.
13. After dropping on the canvas, insert the desired value by the slider on the block or popup keypad.
14. Tap the “Other” tab of the palette, drag the loop block to the canvas.
15. After dropping it on the canvas, insert the desired value by the popup keypad.
16. Tap the Run / Stop tab to upload and run the program. Tap it again to stop the program. The current functioning block will be highlighted while running the program. .
17. Tap the “Other” tab of the palette, drag the Comment / Bubble block to the canvas. Then enter notes or descriptions in the block. Rescale the block size on the canvas by dragging the bottom right corner of the block.
18. Tap the “Draw” tab of the palette, use the pen, eraser, and color picker tools to draw or make notes on the canvas. Use the Eye Open / Close tool to reveal / hide the drawings.
SOFTWARE USER INTERFACE OVERVIEW
1. CONNECTION TAB
None is connected.
Two motors and the intelligent block are connected. Bluetooth is activated.
- Start to connect the digital world with physical world! This section serves as the void setup() part in the programming. Users can set up and check the connections easily here.
- Show connected devices and the ports. If itʼs connected, the icon will show the battery level of the intelligent brick and the Bluetooth connection status.
- Click the intelligent brick icon to set up Bluetooth connection to the intelligent brick.
2. RUN / STOP
- Big and responsive icon for users to tab for uploading and running (start) script / stop script. The icon implies users will turn the programming to a real movement/ function to a model in the physical world like using magic.
- This may be one of the most important tab in the interface because it gives a programming script life.
- Make it big, obvious, and responsive for users to easily tab, and also encourages users to tab to see the effect.
- After touching it, the icon becomes a stop button for users to stop running the script.
3. REMOTE CONTROL
- Make a tablet as a remote control and set up the function (joystick / slider / button) by touching this tab.
4. PALETTE Programming blocks are divided to 4 categories according to their types and nature (it uses the same color code as Mindstorms and WeDo):
Input: eye sensor (infrared), ear (sound), keyPressed (tablet keypad), message in
Output: motor, speaker, display, message out
Flow/Other: wait for/ delay, loop, comment
Draw: Pen, eraser, color picks
- Block overview
Drag and drop the desired programming blocks to the canvas, then start to explore the block function. Users will see block options and be bale to play with them after dropping blocks on the canvas. - Eye Sensor – Infrared
- Ear Sensor – Sound
- Start On Key Pressed The assigned letter/ character/ number/ arrow key will show on the block.
- Message In
- Motor
- Speaker
- Message Out
- Display
- Wait for / Delay
- Loop / Repeat Default is infinite, but users can set up the value by using the keypad.
- Comment / Bubble
Put the comment dialogue box anywhere on the canvas and type the content. The comment box can be resized by dragging the corner of the box.
- Draw
A user can draw or make a note on the canvas by different color from the draw panel. The drawn content can be revealed or hidden by the view button on the right side
5. HEADER – LEFT MENU BAR Tap the menu icon, the left menu panel will popup. Here a user can do: New / Open / Save / Share files here.
5. HEADER – PROFILE Tap on the minifigure head icon, the profile page will show up.
Users can :
1. Customize his own minifigure head icon and show it on the header. 2. Customize the background image of the canvas. 3. View and edit his profile. 4. Enter the account information of the community. And a user can use this login information when he wants to share his projects.
6. HEADER – GALLERY
Tap the gallery icon to go to my gallery page.
Users can:
- Sort and filter (All / Featured / Favorite / Examples for LEGO) projects
- View the detail of a project
- Search
Tap a project to see its detail.
Users can both view and edit:
- Project pictures / videos - Project name / description / time / category - Share - Tap the hammer icon to go to the programming page, viewing and editing its code.
7. KEYPAD
DESIGN PROCESS
1.Research 1 + Questions 1 (focus on target audience: What are they? How do they think? What interests them? What are they learning in school? What do they want to see? What do parents expect? What do parents want to see?)
Research 2 + Questions 2 (LEGO programmable products, graphic based programming tools, programming app for tablet, what sensors do a tablet have) 2. Receive LEGO WeDo box -> Play with it 3. Information architecture 4. Concept and idea development 5. Sketch 6. Choose appropriate interactive medium (HTML 5, CSS3, jQuery) 7. Prototype development 8. User testing (Target: 8 year-old boys) 9. Modification based on user testing 10. Documentation
Happy Building & Programming!