Available translations

Style

foundations.png
style.png
A style is a definition of color and opacity in case of a polygon body, and color, opacity and line thickness in case of polygon borders.
Content
A style applied to a polygon body or a polygon border node acts as the default style. Styles including colors, opacity, line width, and more, are defined in the node's configuration.
Configuring
Style Configuration
Properties
A typical definition for a polygon body style looks like this: 
 {
    "default": {
        "opacity": 0.2,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    }
}
A typical definition for a polygon border style has a couple more properties: 
 {
    "default": {
        "opacity": 0.2,
        "lineWidth": 1,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "lineWidth": 2,
        "lineDash": [0,0],
        "paletteColor": "UI_COLOR.RUSTED_RED"
    }
}
The first section of the definition refers, as explicitly stated, to the default state of the style.
The second section refers to the style assigned to the column or period on which the mouse pointer is located. This is very useful for highlighting the specific zone of interest as the user browses the charts.
  • opacity is probably self-explanatory. It may range from 0 for a fully transparent object to 1 for a solid object.
  • paletteColor sets the color for the fill or stroke in cases of polygon bodies and polygon borders respectively. Use the variable UI_COLOR followed by a dot and any of the properties in the following list for a selection of currently available colors.
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
   
SILVER 191, 192, 192
   
TRUE_GREEN 0, 225, 0
   
TRUE_RED 255, 0, 0
   
TRUE_YELLOW 255, 255, 0
   
TRUE_BLUE 0, 0, 255
   
BROWN 121, 58, 21
   
TRUE_ORANGE 255, 160, 10
   
JUNGLE_GREEN 50, 175, 162
   
JUNGLE_LIGHT 165, 223, 210
   
LIGHT_PINK 254, 180, 200
   
NEON_GREEN 15, 252, 31
   
PINK 255, 77, 78
   
TENKAN_GREEN 43, 117, 55
   
TENKAN_ORANGE 233, 100, 34
   
SKY_BLUE 133, 206, 255
   
MDA_PURPLE 126, 71, 255
   
PERSIAN_GREEN 27, 153, 139
   
ORANGE_WEB 252, 163, 17
   
OXFORD_BLUE 20, 33, 61
   
BYZANTINE_PINK 181, 23, 158
   
TRUE_PURPLE 114, 9, 183
   
ULTRAMARINE_BLUE 67, 97, 238
   
OCEAN_GREEN 116, 198, 157
   
BOTTLE_GREEN 45, 106, 79
   
WINDSOR_TAN 153, 88, 42
   
PERSIAN_PLUM 111, 29, 27
   
APPLE_GREEN 128, 185, 24
   
MIDNIGHT_GREEN 6, 90, 96
   
RED_ORANGE 255, 72, 0
   
CARIBBEAN_GREEN 59, 206, 172
   
CAMEL_TAN 187, 148, 87
   
CYBER_GRAPE 98, 84, 160
   
  • lineWidth is the width of the border line, which should be greater than 0.
  • lineDash is used to turn the border into a dashed-line; the first value corresponds to the length of the dash while the second value defines the length of the space.
Initial Values
These are the Initial Values for Style configuration: 
 {
    "default": {
        "opacity": 0.2,
        "lineWidth": 1,
        "lineDash": [
            0,
            0
        ],
        "paletteColor": "UI_COLOR.DARK_TURQUOISE"
    },
    "atMousePosition": {
        "opacity": 0.3,
        "lineWidth": 2,
        "lineDash": [
            0,
            0
        ],
        "paletteColor": "UI_COLOR.RUSTED_RED"
    }
}
Examples
This is a list of properties featured by the Style configuration. Expanding a property shows sample values for the property extracted from the current Workspace.
Style Menu
The Style node has the following Node Menu items:
The Configure menu item has the following properties:
  • action: Configure
  • actionFunction: uiObject.configEditor.activate
  • label: Configure
  • iconPathOn: configuration
  • iconPathOff: configuration
The Delete menu item has the following properties:
  • action: Delete UI Object
  • actionProject: Visual-Scripting
  • askConfirmation: true
  • confirmationLabel: Confirm to Delete
  • actionFunction: payload.executeAction
  • label: Delete
  • iconPathOn: delete-entity
  • iconPathOff: delete-entity
Style Attaching Rules
The following are the Node Attaching Rules that govern the attachment of Style with other nodes:
Compatible Types: