Superalgos - Space Style

Space Style

The Space Style node Controls the Look and Feel of it's Parent Nodes Space.

The Space Style node can have two different configuration options depending on what space it is attached to. Currently this node can be attached to either the or the .

The Design Space Default 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
                       }
            }
}

Design Space Default Configuration Notes:

backgroundColor refers to the background of the design space (see table below).

node refers to all nodes in the design space.

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

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.

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.

The Charting Space Default Configuration:

 {
        "backgroundColor": "UI_COLOR.WHITE",
        "candleStickColor": "UI_COLOR.DARK",
        "candleBorderLineWidth": "1",
        "candleUpColor": "UI_COLOR.GREEN",
        "candleUpBorderColor": "UI_COLOR.PATINATED_TURQUOISE",
        "candleDownColor": "UI_COLOR.RUSTED_RED",
        "candleDownBorderColor": "UI_COLOR.GREEN",
        "candleSideColor": "UI_COLOR.DARK",
        "candleSideBorderColor": "UI_COLOR.DARK",
        "panelBackgroundColor": "UI_COLOR.WHITE",
        "panelBackgroundOpacity": "0.5",
        "panelNameColor": "UI_COLOR.GREY",
        "panelExchangeMarketName": "UI_COLOR.GREY",
        "timeMachineNameColor": "UI_COLOR.DARK",
        "onMouseFrameColor": "UI_COLOR.TITANIUM_YELLOW",
        "machineFrameColor": "UI_COLOR.DARK_TURQUOISE",
        "machineFrameOpacity": "1",
        "timeScalePanelColor": "UI_COLOR.BLACK",
        "timeScalePanelLabelColor": "UI_COLOR.WHITE",
        "timeScaleDateColor": "UI_COLOR.GREY",
        "timeScaleDateTimeColor": "UI_COLOR.GREY",
        "rateScalePanelColor": "UI_COLOR.BLACK",
        "rateScalePanelLabelColor": "UI_COLOR.WHITE",
        "rateScaleLabelColor": "UI_COLOR.GREY",
        "rateScaleLabelDecimalColor": "UI_COLOR.GREY",
        "timeFrameScalePanelColor": "UI_COLOR.BLACK",
        "timeFramePanelLabelColor": "UI_COLOR.WHITE",
        "indicatorDropDownPanelColor": "UI_COLOR.BLACK",
        "indicatorDropDownPanelOpacity": "0",
        "indicatorDropDownPanelBorderColor": "UI_COLOR.RUSTED_RED",
        "indicatorDropDownPanelLabel1Color": "UI_COLOR.WHITE",
        "indicatorDropDownPanelLabel2Color": "UI_COLOR.WHITE",
        "indicatorDropDownPanelLabel3Color": "UI_COLOR.WHITE",
        "indicatorLayersPanelColor": "UI_COLOR.BLACK",
        "indicatorLayersPanelOpacity": "1",
        "indicatorLayersPanelBorderColor": "UI_COLOR.RUSTED_RED",
        "indicatorLayersPanelLabel1": "UI_COLOR.WHITE",
        "indicatorLayersPanelLabel2": "UI_COLOR.WHITE",
        "indicatorFrameBackgroundColor": "UI_COLOR.WHITE",
        "indicatorFrameBackgroundOpacity": "0.75",
        "indicatorFrameTextColor": "UI_COLOR.WHITE",
        "indicatorPanelTopBarColor": "UI_COLOR.DARK",
        "indicatorPanelTopBarOpacity": "1",
        "indicatorPanelTopBarTitleColor": "UI_COLOR.WHITE",
        "minCursorSize": "10",
        "maxCursorSize": "30"
    }

Charting Space Default Configuration Notes:

Most changes will instantly take effect upon saving the workspace. For any changes that do not take effect right away a refresh of the web page may be required.

It is recommended to completely close the Charting Space before making changes to the space style nodes configuration.

All colors must come from the list of available colors found below and be referenced by name at the configuration.

Configuration options that have to do with opacity will work with any value between zero and one.

Chart Design Stages

Configuration Name	Explanation
"backgroundColor":	This controls the background color of the charting space.
"candleStickColor":	This controls the color of the candle sticks
"candleBorderLineWidth":	Controls the border line width of the candles and sticks. candleStickColor must be defined to access
"candleUpColor":	This controls the candle up color on the charts.
"candleUpBorderColor":	This controls the candle UP border color.
"candleDownColor":	This controls the candle down color on the charts.
"candleDownBorderColor":	This controls the candle down border color.
"candleSideColor":	This controls the candle sideways color on the charts.
"candleSideBorderColor":	This controls the candle sideways border color.
"panelBackgroundColor"	This controls the background of the time machines in the charting space.
"panelBackgroundOpacity":	This controls the background opacity of the time machine.
"panelNameColor":	This controls the color of the exchange name shown on the top outside left of each time machine.
"panelExchangeMarketName":	This controls the color of the pair for each panel (BTC/USDT)
"timeMachineNameColor":	This controls the time machines title color and the color of the tab on the top left of the machine.
"onMouseFrameColor":	This controls the time machine frame color when a mouse is hovered over it.
"machineFrameColor":	This controls the color of the time machine frames.
"machineFrameOpacity":	This controls the opacity of the time machine frame.
"timeScalePanelColor":	This controls the background color of the time scale at the top of the charts.
"timeScalePanelLabelColor":	For this to work the timeScalePanelColor must also be defined.
"timeScaleDateColor":	This controls the date (day and month) at the top of the chart.
"timeScaleDateTimeColor":	This controls the time under the date at the top of the chart.
"rateScalePanelColor":	This controls the color of the value/ rate scale panel on the right in the charts.
"rateScalePanelLabelColor":	For this to work the rateScalePanelColor must also be defined.
"rateScaleLabelColor":	This controls the color of the rate scale numbers on the right side of the charts.
"rateScaleLabelDecimalColor":	This controls the color of what comes after the decimal place in the rate scale numbers on the right side of the chart.
"timeFrameScalePanelColor":	This controls the color of the timeFrame scale at the bottom of a chart.
"timeFramePanelLabelColor":	For this to work the timeFrameScalePanelColor must also be defined.
"indicatorDropDownPanelColor":	This controls the color of the drop down indicator panels inside the chart.
"indicatorDropDownPanelOpacity":	This controls the opacity for the indicator drop down panel if it is defined.
"indicatorDropDownPanelBorderColor":	This controls the top and bottom border color for the indicator drop down panel.
"indicatorDropDownPanelLabel1Color":	This controls the text color of the largest font size in the drop down indicator layers panels.
"indicatorDropDownPanelLabel2Color":	This controls the text color of the MidSized font size in the drop down indicator layers panels.
"indicatorDropDownPanelLabel3Color":	This controls the text color of the ON/OFF font size in the drop down indicator layers panels.
"indicatorLayersPanelColor":	This controls the color of the panels before scrolling to open them.
"indicatorLayersPanelOpacity":	This controls the opacity of the panels before scrolling to open them.
"indicatorLayersPanelBorderColor":	This controls the panel border color inside the indicator layer panels.
"indicatorLayersPanelLabel1":	This controls the color of the text in the indicator drop down panel top First line.
"indicatorLayersPanelLabel2":	This controls the color of the text in the indicator drop down panel top second line.
"indicatorFrameBackgroundColor":	This controls the background color of the indicator frame inside the charts.
"indicatorFrameBackgroundOpacity":	This controls the opacity for the indicator frame background.
"indicatorFrameTextColor":	This controls the text color inside the indicator panel.
"indicatorPanelTopBarColor":	This controls the color of the indicator panel top bar.
"indicatorPanelTopBarOpacity":	This controls the opacity of the indicator panel top bar.
"indicatorPanelTopBarTitleColor":	This controls the color of the title at the indicator frame panel top bar.
"minCursorSize":	This controls the initial amount of data that is plotted in the charts.
"maxCursorSize":	This controls the max amount of data that can be plotted when users scroll the chart.

Available Colors:

Variable Value	RGB Value	Color Sample
WHITE	255, 255, 255
LIGHT_GREY	247, 247, 247
LIGHT	234, 226, 222
GREY	150, 150, 150
DARK	48, 48, 54
BLACK	0, 0, 0
TRUE_YELLOW	255,255,0
GARGOYLE_GAS	255, 235, 66
TITANIUM_YELLOW	244, 228, 9
GOLDEN_ORANGE	240, 162, 2
TRUE_ORANGE	255,160,10
TENKAN_ORANGE	233,100,34
ORANGE_WEB	252,163,17
RED_ORANGE	255,72,0
RUSTED_RED	204, 88, 53
RED	223, 70, 60
PATINATED_TURQUOISE	27, 153, 139
MANGANESE_PURPLE	91,80, 122
TURQUOISE	74, 207, 217
DARK_TURQUOISE	2, 149, 170
OXFORD_BLUE	20,33,61
BYZANTINE_PINK	181,23,158
TRUE_PURPLE	114,9,183
ULTRAMARINE_BLUE	67,97,238
PERSIAN_PLUM	111,29,27
SILVER	191,192,192
PINK	255,77,78
SKY_BLUE	133,206,255
MDA_PURPLE	126,71,255
CYBER_GRAPE	98,84,160
TRUE_RED	255,0,0
TRUE_BLUE	0,0,255
LIGHT_PINK	254,180,200
JUNGLE_LIGHT	165,223,210
CARMINE_PINK	240, 80, 52
MANGO_TANGO	255, 139, 57
CHARLESTON_GREEN	42, 46, 49
GREEN	188, 214, 67
OCEAN_GREEN	116,198,157
BOTTLE_GREEN	45,106,79
APPLE_GREEN	128,185,24
MIDNIGHT_GREEN	6,90,96
CARIBBEAN_GREEN	59,206,172
NEON_GREEN	15,252,31
TENKAN_GREEN	43,117,55
PERSIAN_GREEN	27,153,139
TRUE_GREEN	0,225,0
JUNGLE_GREEN	50,175,162
BROWN	121,58,21
CAMEL_TAN	187,148,87
WINDSOR_TAN	153,88,42

Initial Values

These are the Initial Values for Space Style configuration:

 {
    "Please See Doc's for desired configuration.": ""
}

Examples

This is a list of properties featured by the Space Style configuration. Expanding a property shows sample values for the property extracted from the current .

Space Style Menu

The Space Style node has the following 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

Tip: When a menu item is grayed out, it means that Space Style already has the required child type that the menu item may add, and only that child is allowed for that case.

Space Style Attaching Rules

The following are the that govern the attachment of Space Style with other nodes:

Compatible Types:

Superalgos is an open-source project run and governed by a decentralized community of contributors. There is no legal entity behind the project. Our body of work lives on the Internet.