# Hello World Example for Roomle Component Scripting

In this tutorial, you'll learn how to start scrpiting on the simplest possible 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. 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":
  4. The injected code shoud look like this:
{
    "id":"catalogId:40_helloworld",
    "parameters":[],
    "onUpdate":"",
    "geometry":"AddCube(Vector3f{1000, 1000, 1000});",
    "articleNr":"'123.465'"
}

You see that it prescribed a JSON object with 5 attributes. If you read it, it should provide data for a component, that draws a cube that is 1000x1000x1000 units big (1 unit = 1 mm), with an articleNr '123.456' and an identifier.

# 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 partlist >>" button. The partlist 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 Alf+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