Design Space Hierarchy

Design Space
	Space Style
	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.

Adding a Design Space Node

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

Space Style

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

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.

Space Settings

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

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.