Environment Setup for Making Roomle Content

This document will guide you to setup your environment for the effective scripting of Roomle Rubens content using Visual Studio Code and conversion of meshes using Blender.

If you find any inaccuracies in this document, something is not working or you have a problem you need to solve, please, don't hesitate to tell us!

Mesh Conversion

Blender

Blender is a free 3D modelling tool. You can get it at the blender.org website. You need to install the Roomle Blender Add-On in order to be able to get the meshes in a correct status to Rubens Admin and also to be able to use them in Component Definitions (more on that later). For installation instructions, please refer to the add-on readme file.

Component Definition Scripting

There are three different levels of your possibilities that depend on if you just need to write a simple content or fix a simple bug, or if you need to develop a complex content project.

Without Any Tools

Technically you do not need to install anything and you can just type the component definition in the Rubens Admin or in the configurator test site. This is however reasonable only if you need to do the most simple work. You only need the web browser and possibly a text tool. However, with this method you will quickly reach its limits and for actual content development, you should use the VS Code + Rubens CLI.

To understand the usage of test site, please refer to Hello world example.

VS Code + Roomle Component Tool Extension with the Rubens Local Content Server

This is the recommended way to develop Roomle content. The Rubens Local Content Server is now an integral part of the Roomle Component Tool extension for VS Code.

To load a component from your local drive, follow these steps:

1. Install VS Code with the extension:

   • Visual Studio Code - https://code.visualstudio.com/ and following extensions:
   • Roomle Component Tool
2. Open a folder to work in VS Code and create/open a file at the path ./content/{your_catalogId}/components/{your_componentId}.json. The extension should activate and should give you a default

3. At the right side of the bottom status bar, use the RLCS: Start button or use the command Roomle: Start Rubens Local Content Server.

4. Go to your component definition. It should be prefilled to:

{
    "id": "your_catalogId:your_componentId",
    "parameters": [],
    "onUpdate": "
        if (isnull(inited)) {
            inited = true;
        }
    ",
    "geometry": "",
    "articleNr": "'your_catalogId:your_componentId'"
}

1. Either use the key combination Ctrl+Alt+R / Cmd+Opt+R, or use the command Roomle: Run configurator with current componentId, or open http://localhost:55000/?id=component@your_catalogId:your_componentId in your browser (the port number should match to one you see at the RLCS status, 55000 is the default one).

2. When you change the componentId, the browser will hot-reload the current configuration with the updated content.

For more details, refer to the Roomle Component Tool documentation available in the VS Code extension marketplace.

VS Code + loader snippets

This is considered to be a lighter way of setting up the environment in cases when you are finding alternatives to the RLCS and where you are not able or allowed to install Rubens CLI or its software dependencies.

You need to install:

• Visual Studio Code - https://code.visualstudio.com/ and following extensions:

  • Roomle Component Tool
  • Live Server
• Web browser that supports JavaScript snippets

You will write code in the Visual Studio Code editor and then feed it to the instance of the https://www.roomle.com/t/cp site using a custom-writte loader snippet, which fetches the data from the HTTP server provided by the Live Server extension.

VS Code + Rubens CLI + Git (Obsolete)

This was a recommended way for content developers. Rubens CLI is a node.js package that mimics the RAPI backend with data stored locally on your drive. Git is recommended for version control. To use it, please refer to Rubens CLI Setup and Usage Tutorial.

Q&A

Do I need to use Visual Studio Code?

The VS Code will be used to write the code, so you actually do not have to, but we only provide language support extension for VS Code and we do not plan to support other code editors at the moment.

What does the Roomle Component Tool extension do?

This extension provides languaged support for the Roomle Component Definition language, which is basically RoomleScript written in JSON structure. It provides with syntax highlighting, code formatting, outline and static analysis. For further details, check the extension itself, which provides the documentation on how to use it.

Does the Roomle Component extension send any data?

No, the extension does not send anything anywhere.

Are there further good VS Code extensions that will help me with content development?

We can recommend those:

• Bracket Lens

  • Shows content before opening bracket at long code blocks. You can improve it for RoomleScript language by adding following to the VS Code user settings under bracketLens.languageConfiguration.brackets.

{
    "opening": "\": \"",
    "closing": "\"",
    "headerMode": "smart",
    "inters": []
},
{
    "opening": "BeginObjGroup",
    "closing": "EndObjGroup",
    "headerMode": "smart",
    "inters": []
}

• Highlight-words - keyword highlighter.

  • Allows you to select a piece of text and have all its occurences highlighted.

• Edit csv

  • Some RuAd import data are in the CSV format. This renders CSV files as tables.

• Rainbow CSV

  • Allows easy column distinguishing by applying a different colour at each.

• Project Manager

  • Switches between multiple Git repositories.