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
Start VS Code and open a working folder.
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.
This is the code we'll be working with:
You see a JSON object with 5 attributes. This is a Component Definition, that contains a component id
, empty parameters
array, empty onUpdate
string, that (if relevant) holds the onUpdate RoomleScript definition. If you read the geometry
(which is also a RoomleScript stored in the string value), you probably guess it draws a cube that is 1000 x 1000 x 1000 units big (1 unit = 1 mm), with an articleNr
value of '123.456'
.
Working with the test site
Open the Configurator Test Site.
Changing the component definition
Press the Alt+Shift+F / Option+Shift+F keys to run the Roomle Component formatter. The resulting code should look like this:
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.
Unfold the configuration field and paste following code and click "Load configuration"
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.
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 simple testing or introduction to the Roomle platform. More powerful tools are needed for a real development, though. Please refer to the chapter RubensCLI Setup and Usage Tutorial or Using offline loader snippets.
Last updated