The design space hierarchy features controls over the space style and space settings.
The design space is the visual environment that hosts all system and user definitions. In practical terms, it is the black space below the slider that splits the screen horizontally, separating the design space in the bottom from the charting space on top. As a hierarchy, it features nodes that enable user-control over certain aspects of the look, feel, and behavior of the space.

Think of the design space as your desktop, or the control room of the system.

Click to learn more about design spaces

Adding a Design Space Node

To add the design space node, select Add Design Space on the spaces node of the Superalgos Project hierarchy.


Design Space

Space Style

Space Settings

Space Style

The space style node features controls over the look and feel of the space, in particular, of background colors and font sizes.

Click to learn more about space styles

Adding a Space Style Node

To add the space style node, select Add Space Style on the parent node menu.

Configuring the Space Style

Select Configure on the menu to access the configuration.

    {
        "backgroundColor": "UI_COLOR.BLACK",
        "node": {
            "fontSize": 16,
            "imageSize":  60,
            "type": {
                "fontColor": "UI_COLOR.WHITE"
            },
            "name": {
                "fontColor": "UI_COLOR.WHITE"
            },
            "menuItem": {
                "backgroundColor": "UI_COLOR.BLACK",
                "fontColor": "UI_COLOR.WHITE",
                "fontSize": 14,
                "imageSize": 14
            }
        }
    }
  • backgroundColor refers to the background of the design space (see table below).

  • node refers to all nodes in the design space.

    • fontSize refers to the size of fonts affecting the type and name of nodes.

    • imageSize refers to the size of icons representing nodes.

  • type refers to the type of node, as indicated by the string of text below each node.

    • fontColor refers to the color of the font (see table below).
  • name refers to the name or label of the node, as indicated above the node.

  • menuItem refers to items on the right-hand side of the menu.

    • backgroundColor refers to the color of the font (see table below).

    • fontSize refers to the size of the font of the string of text.

    • imageSize refers to the size of the icon illustrating the menu item.

Variable Value RGB Value Color Sample
DARK 48, 48, 54  
LIGHT 234, 226, 222  
GREY 150, 150, 150  
LIGHT_GREY 247, 247, 247  
WHITE 255, 255, 255  
BLACK 0, 0, 0  
GOLDEN_ORANGE 240, 162, 2  
RUSTED_RED 204, 88, 53  
GREEN 188, 214, 67  
RED 223, 70, 60  
PATINATED_TURQUOISE 27, 153, 139  
TITANIUM_YELLOW 244, 228, 9  
MANGANESE_PURPLE 91,80, 122  
TURQUOISE 74, 207, 217  
DARK_TURQUOISE 2, 149, 170  

Space Settings

The space settings node features controls over the phisics, proportions, and positioning of icons representing node, and their menus.

Click to learn more about space settings

Adding a Space Settings Node

To add the space settings node, select Add Space Settings on the parent node menu.

Configuring the Space Settings

Select Configure on the menu to access the configuration.

{
    "node": {
        "distancePercentage": 60,
        "radiusPercentage": 85,
        "massPercentage": 100,
        "menuItem": {
            "widthPercentage": 100,
            "heightPercentage": 60,
            "radiusPercentage": 90
        }
    },
    "physics": false
}
  • node refers to every node in the design space.

    • distancePercentage is the reference distance applied as a percentage of an arbitrary default distance separating a node from it’s parent node, assigned to the medium distance setting (gree marking) of the Distance to Parent setting on the menu.

    • radiusPercentage is the radius of the circular nodes’ menu applied as a percentage of an arbitrary default radius.

    • massPercentage is the refernce mass of nodes that affect the attraction and repulsion of the environment’s pysics whe the physics setting is set to true.

    • menuItem refers to the items on the right-hand side of nodes’ menus.

      • widthPercentage is the reference width of an item applied as a percentage of an arbitrary default width.

      • heightPercentage is the reference height of an item applied as a percentage of an arbitrary default height.

      • radiusPercentage is the reference radious of the circular matrix that governs the distribution of items in the circular menu. Larger numbers cause items to spread appart while smaller numbers makes items lie closer to each other.

  • physics determines wether the environment is static (false) or dynamic (true). When physics is set to true, nodes in the design space are affected by th gravitational pull and repulsion of other nodes.