Design Document: Learning With Linkbot

Size: px

Start display at page:

Download "Design Document: Learning With Linkbot"

Jeffery Walsh
5 years ago
Views:

1 Design Document: Learning With Linkbot Alaskan Firedragons: Armante Washington, Arvind Badrinarayanan, Eric Lieu, Jennifer Ma, & Ryan Nguyen Technology Background: What is going to be used? HTML, CSS, Javascript, XML, SVG, Canvas Blockly Robosim/Linkbot HTML, CSS, Javascript: The HTML, CSS and Javascript will be used at the lowest level to design the look, layout and functionality of the web page. The web page will be divided vertically with the grid on one side and the blocks with the code generation on the other. There is also a section where the user can insert his or her own code that will move the linkbot. The user should be able to click an options bar to change the units or the specifications of the linkbot. Blockly: Blockly is a library created by Google which allows programmers to create a visual programming interface for users to code using puzzle-like pieces. Blocks are created in which users can connect specific pieces in order to perform some function. The blocks control the action of linkbots. They simplify the understanding for users rather than having them write the code themselves. XML, SVG or Canvas: XML will be used to facilitate the layout and animation of the virtual linkbot. The SVG library will be used to animate the virtual linkbot. Pictures will

2 be taken every 1 degree for 360 degrees to simulate the linkbot changing directions. Robosim and Linkbot: Robosim is a programming interface used to program C-STEM linkbots. It allows the users to simulate their code with a virtual linkbot before programming the actual hardware. We will use Robosim s virtual linkbot environment as a model for our own virtual linkbot. The environment will be similar to that of code.org.

3 Design Goal: Summary: Our ultimate goal is to create a series of web-based educational lessons that students of beginner levels can use to practice math and programming through an interactive and engaging format. User Interface: We want the user to be able to use the Blockly interface in order to write code that controls a virtual linkbot. The user can then generate the Ch/C++ code for that would make the linkbot move in the same way if the user were to input the generated code into Robosim. We will also allow the user to control the virtual linkbot by entering Ch/C++ code directly. Visual Feedback: Our web pages will have a visual user interface which will have functionality similar to Robosim s virtual linkbot environment. The final product will have a rotatable 3D grid environment where the virtual linkbots will reside. The grid can be toggled between feet/inches and metric units. The environment can support multiple linkbots. The linkbots will have their movements traced and the models can be toggled on and off. Code Generation: The user will be able to click a button to view the Ch/C++ code that is equivalent to the Blockly code. This generated code should be able to be put into Robosim and the virtual linkbot in the Robosim environment should move identically to our virtual linkbot.

4 Architectural Choices and Pros and Cons: Blockly will be used to create the puzzle pieces and code generation. There are other choices for the visual language aspect of this project such as Scratch and Hopscotch, however Blockly appears to be more robust and developed as it provides code generation from the puzzle piece functions to javascript or python. Learning with Linkbot will have custom made functions directly related to moving the web based virtual linkbot. These functions will be named after the Ch functions that actually move the physical linkbot and robosim virtual link bot. By default the user will be fitting puzzle pieces together in order to move the web based linkbot. Similarly the users will be able to switch to a code view, enter in Ch code, and move the web based linkbot in the same way they would with the default puzzle view. There will be documentation provided so the users will know the Ch functions that are available for usage. There will also be a show code button that allows users to see the Ch code that the puzzle pieces make. This could be accomplished by converting the Blockly generated Javascript or Python to Ch. While most of us have more experience with Python than Javascript, we will convert from Javascript to maintain consistency with the large amounts of Javascript that we will be using. We have many ways to implement the front-end design other than the Blockly items. For the animation the are a few choices. We could use only Canvas or only SVG, but we will use both as they provide extra functionality when used together. As for the Grid that the web based linkbot traverses, we will use Javascript to trace the trajectory and perform movement operations.

5 Selected Architecture: User: The users will consist of K-12 students, teachers, and professors. Web Interface: The web interface will be hosted on C-Stem and allow the users to interact with the blocks. In addition, the users may manually call functions in Ch to control the movement of the Virtual Linkbot. Animations: The animations will enable the Virtual Linkbot to move in a certain pattern on the grid, based on the lessons. The back end for these animations will be made using SVG and Canvas.

6 Blockly: Blockly is composed of Google open source code and the puzzle pieces are written in HTML, CSS, and JavaScript. Code Generation: We will have to convert the JavaScript code to Ch code in order for the user to be integrated into Robosim. Robosim: Once in Robosim, the user can simulate the robot s movement in any pattern on the grid.

7 Implementation Notes: HTML file that uses a XML toolbox for the selection of blocks, needs to translate user s program into Ch, and includes a JS Interpreter to run the blocks. Use the GUI Block Factory to create a few blocks for the application. If we want specific blocks not available through Block Factory, we have to manually create the code. Probably easier for the user to use drop-down menus in the blocks when solving the lessons. Because some of the lessons require math calculations, we need to include in the code generations the Ch order of operations ( Pull exercises from Learning Robot Programming with Linkbot for the Absolute Beginner for the lessons.

Design Document V2 ThingLink Startup

Design Document V2 ThingLink Startup Yon Corp Andy Chen Ashton Yon Eric Ouyang Giovanni Tenorio Table of Contents 1. Technology Background.. 2 2. Design Goal...3 3. Architectural Choices and Corresponding