Electrical and Code Interface

Interface Tour

1. To start the RoCo interface server, follow the instructions in README.md
2. Open your browser and navigate to localhost:8000/ to open the interface. Now, click the + sign and choose the menu option labelled "Base Code Interface" to get started.
3. This is the interface used to make modular Code Components that interface with the hardware and other Code Components
4. The grey column on the left is the toolbar. It contains all the blocks you can use to build your code.
5. The green block already on the workspace is the base component. This will be the basis for all the Code Components you build.

Creating Code Components

1. First, give the component a name in the name field.

2. Your Code Component can have inputs, outputs, and parameters

   • Inputs: These are inputs to the Code component. They can come from other Code Components as well as Hardware. Each Code Component can have as many inputs as it wants. Inputs are treated symbolically, so if an input changes during runtime, any outputs you have will also change correspondingly. It’s functionality is similar to that of the assign statement in Verilog.
   • Outputs: The Code Component can process the inputs by doing logical and mathematical operations on them and return outputs. Each Code Component can return multiple outputs. The outputs for each Code Component are not static, if the input changes, the output will reflect that change.
   • Parameters: Parameters are similar to inputs in that they affect the output value, but with two key differences. First, parameters have to be set by the programmer for each instantiation of the Code Component. Second, Parameters values are constant during execution. They cannot be set to outputs from other blocks, which may change at runtime.

3. To add inputs, outputs, and parameters to the Code Component, click the cog

4. Now, drag and drop the Output, Input, and Parameter blocks in the left onto the Component block on the right. Order does not matter.

5. Each input and output has a type. This type is denoted using the notion of ports. To assign a type to an input, click the Ports category in the toolbar and choose input. Then, click and drag the appropriate port into the Input Port Type slot in the Component Block.

6. Ports ensure that the data passed between multiple Components is of the same type. Therefore, If a component has an output that is an OutIntPort, this output can only be connected to an input that is an InIntPort.

7. The ports InPort and OutPort are special. They implement a type of polymorphism. All output ports subclass OutPort and all input ports subclass InPort. This means that

   • Any type of output port can go into an InPort
   • An OutPort can go only connect to an InPort
   • When taking input from an OutPort, be careful that no illegal operations are done on the input.

8. Ensure that each of the inputs, outputs, and parameters have a unique name.

9. Write any code pertaining to the component in the section labelled Insert Code Here:

10. To use the inputs in the code, use the blocks present in the toolbar under the category component

11. The value notch above the output should contain the output of the Code Component, keeping in mind that one Code Component can have multiple outputs.

12. To use this Code Component in other parts of the code, hover over File and click Export Code. This will add the component you just created to your library of components.

Creating Composite Components

1. To start creating Composite Components, Click the + sign in the toolbar and select "Composite Code Interface" from the dropdown menu.

2. To view the components in your library, click the button Labelled Previously Created Blocks, on the top right side of the screen.

3. The component you just created will be visible in the category labelled “code”.

4. Using this mode, you can chain together Code Components you have already made to get more complicated functionality. For example, to make a component that takes in four numbers a, b, c, and d, multiplies a and b, and c and d, and adds the two products together, you would use two multiply blocks, and one add block.

5. The block that already exists on the workspace is the base composite component block. All the blocks you make will build off of this.

6. Since the component we are trying to make will have one output, we denote that by clicking the cog on the base block and dragging out one “output” block as before. Give a name to this block and any new outputs you use as well.

7. To set up our Composite Component, drag and drop two Multiply blocks and one Add block from the toolbar and place them inside the component block. Remember to name the components you drag in.

8. When you drag in a block that has outputs, a new category will appear in the toolbar called “blocks” which will contain a category for every block you have dragged in which has an output.

9. For our block, we want the output of add1 to be the output of the block. Therefore, we will drag add1’s output block from the toolbar into the component’s output slot.

10. We want the inputs for mult1 and mul2 to be the inputs for the block. To accomplish this, we will open the “Other Blocks” category in the toolbar and drag in the Inherit Input block into the all the inputs for the multiply block. This will make those inputs become the inputs for the Composite Code Component that will be created.

11. In order to add the results of the two multiple blocks together, connect the outputs of mult1 and mult2 from the “blocks” category in the toolbar to the inputs of add1. This completes our Composite Code Component. `

12. To export this Code Component and add it to our library, hover over File in the menu bar and click Export Code Component

13. If you refresh the page, the new Component you just exported will be under the code category in the toolbar.