Skip to main content

Create my first brick with DRAW and CODE

Once you have set up an Olympe project you can start adding new coded bricks. This is done in two steps:

  1. Create a brick interface using DRAW
  2. Implement it with CODE

In this example we will create a simple function that takes as parameters a string s and an integer n and returns s with a space inserted every n characters and the number of chunks in s.

Create the brick interface and CODE skeleton with DRAW#

Open your project in DRAW. On the right-hand side, the marketplace provides you all the objects you can create. Select Coded Function and drop it in your project. Give it a name (this tutorial will use String Spacer) and open it.


You are provided with two buttons to create the function's inputs and outputs, respectively. Use Add input to create two inputs:

  • a first input named s of type String
  • a second input n of type Number

Similarly, use Add output to create two outputs:

  • spaced s of type String
  • chuncks of type Number


The interface of your brick is ready. You can generate the JS code skeletton using button Generate brick code in the screen top right corner. You will be offered to download the JS file StringSpacer.js. Store it in the src/bricks folder generated by yeoman when initializing the project.


Implement your brick with CODE#

NB You may have to restart webpack for it to serve correctly your new file. Any further changes to that file will be automatically propagated to the browser.

Open StringSpacer.js in an editor. The files contains a single class StringSpacer, which contains a single method onUpdate. Implementing the brick consitst in implementing this method.

The method onUpdate takes as parameters the inputs you defined in DRAW, s and n. It also takes as parameters the brick's output setters, setSpacedS and setChuncks. The method expects no return statement as the brick's outputs are set using their respective setter functions.

Find the line

/* Write your code here. You have to implement this method ! */

and replace it with the brick implementation:

const splitS = s.match(new RegExp('.{1,' + n + '}', 'g'));
setChuncks(splitS ? splitS.length : 0);
setSpacedS(splitS ? splitS.join(' ') : '');

Test your brick#

Return in DRAW and click on Run button in the screen top right corner. This opens a popup that lets you enter a value for each function input and displays the output values.