# Hello World Example for Roomle Component Scripting

In this tutorial, you'll learn how to start scrpiting on a simple example. You will need VS Code with installed JSON schema, snippet and extensions (see Environment Setup) and Google Chrome.

# Setting up the component definition

  1. Start VS Code and open a folder.
  2. Using VS Code, create a new file with a .json suffix in a folder that you opened as the working folder of VS Code or one of the subfolders.
  3. If you have set up your environemnt, open the file and because we will be creating a component, start typing the word "component". The VS Code should offer you a snippet, that is called "roomleComponentSimple": If you haven't set up the environment yet, simply get the code from the snippet in the next step.
  4. This is the code we'll be working with:
{
    "id":"catalogId:40_helloworld",
    "parameters":[],
    "onUpdate":"",
    "geometry":"AddCube(Vector3f{1000, 1000, 1000});",
    "articleNr":"'123.465'"
}

You see a JSON object with 5 attributes. This is a component definition, that contains a component id, empty parameters, empty onUpdate script. If you read the geometry, you probably guess it draws a cube that is 1000x1000x1000 units big (1 unit = 1 mm), with an articleNr '123.456'.

# Working with the test site

  1. Open the Configurator Test Site (opens new window).
  2. Unfold the "Component" section. A text area shows, where you paste the sample code and click "Load into kernel button".
  3. The configurator should show up. You should see a white cube in the left part of the screen.
  4. In order to see the article number defined in the JSON, unfold the "Interactions" section and find and click the "Open part list >>" button. The part list will open, looking like this:

# Changing the component definition

  1. To change the colour of the cube, start a new line after the semicolon in the geoemtry script and start typing the function "SetObjSurface". The function itself will be offered by the autocomplete, as well as a set of debug colours. Pick one of them. Notice the "<geometry>" prefix in front of the snippet. Functions, that are available in a limited set of scripts, are marked like this. You can not use "SetObjSuface" function outside of the geometry field.
  2. Press the Alt+Shift+F / Option+Shift+F keys to run the Roomle Component formatter. The resulting code should look like this:
{
    "id": "catalogId:40_helloworld",
    "parameters": [],
    "onUpdate": "",
    "geometry": "
        AddCube(Vector3f{1000, 1000, 1000});
         SetObjSurface('isdt:blue');
    ",
    "articleNr": "'123.465'"
}
  1. Copy this code again to the "Configuration" field like you did in step 6. Unless you've refreshed the page, the configurator window still shows the white cube. You have updated the component definition in the configurator cache, but as there is already a configurator running, the step we are going to do now is not made automatically.
  2. Unfold the configuration field and paste following code and click "Load configuration"
{
    "componentId":"catalogId:40_helloworld"
}

If there is still no configurator instance initialized (for example when you enter the fresh configurator page), this step is done automatically once the component source Json loads into kernel.

  1. The configurator now reloads the configuration, using the component definition from the website cache, which was updated in between. The cube has changed the colour now.

This is a basic approach, that can be used for testing. However, usually you need to test a bigger amount of components, making this approach slow. To speed this up, see Using offline loader snippets