Design space

This commit is contained in:
Julian Molina committed 2021-01-05 17:27:50 +01:00
1 parent dba06e6689
commit 1e7907366f
4 files changed
+47 -236

No files matched your search

@@ -1,7 +1,8 @@
{
"type": "Design Space",
"definition": {
"text": "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."
"text": "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.",
"updated": 1609861711688
},
"paragraphs": [
{
@@ -11,18 +12,6 @@
{
"style": "Text",
"text": "Think of the design space as your desktop, or the control room of the system."
},
{
"style": "Block",
"text": "Configuring"
},
{
"style": "Title",
"text": "Configuring Design Space"
},
{
"style": "Text",
"text": "Select Configure on the menu to access the configuration."
}
]
}
@@ -10,91 +10,47 @@
},
{
"style": "Title",
"text": "Configuring Space Settings"
"text": "Space Settings Configuration",
"updated": 1609863913978
},
{
"style": "Text",
"text": "Select Configure on the menu to access the configuration."
},
{
"style": "Text",
"text": "{"
},
{
"style": "Text",
"text": " \"node\": {"
},
{
"style": "Text",
"text": " \"distancePercentage\": 60,"
},
{
"style": "Text",
"text": " \"radiusPercentage\": 85,"
},
{
"style": "Text",
"text": " \"massPercentage\": 100,"
},
{
"style": "Text",
"text": " \"menuItem\": {"
},
{
"style": "Text",
"text": " \"widthPercentage\": 100,"
},
{
"style": "Text",
"text": " \"heightPercentage\": 60,"
},
{
"style": "Text",
"text": " \"radiusPercentage\": 90"
},
{
"style": "Text",
"text": " }"
},
{
"style": "Text",
"text": " },"
},
{
"style": "Text",
"text": " \"physics\": false"
},
{
"style": "Text",
"text": "}"
"style": "Subtitle",
"text": "Properties",
"updated": 1609863924784
},
{
"style": "List",
"text": "node refers to every node in the design space."
},
{
"style": "Text",
"text": " * radiusPercentage is the radius of the circular nodes' menu applied as a percentage of an arbitrary default radius."
"style": "List",
"text": "radiusPercentage is the radius of the circular nodes' menu applied as a percentage of an arbitrary default radius.",
"updated": 1609863960583
},
{
"style": "Text",
"text": " * 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."
"style": "List",
"text": "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.",
"updated": 1609863964761
},
{
"style": "Text",
"text": " * menuItem refers to the items on the right-hand side of nodes' menus."
"style": "List",
"text": "menuItem refers to the items on the right-hand side of nodes' menus.",
"updated": 1609863969621
},
{
"style": "Text",
"text": " * widthPercentage is the reference width of an item applied as a percentage of an arbitrary default width."
"style": "List",
"text": "widthPercentage is the reference width of an item applied as a percentage of an arbitrary default width.",
"updated": 1609863995477
},
{
"style": "Text",
"text": " * heightPercentage is the reference height of an item applied as a percentage of an arbitrary default height."
"style": "List",
"text": "heightPercentage is the reference height of an item applied as a percentage of an arbitrary default height.",
"updated": 1609863990453
},
{
"style": "Text",
"text": " * 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."
"style": "List",
"text": "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.",
"updated": 1609863985113
},
{
"style": "List",
@@ -10,87 +10,13 @@
},
{
"style": "Title",
"text": "Configuring Space Style"
"text": "Space Style Configuration",
"updated": 1609861783834
},
{
"style": "Text",
"text": "Select Configure on the menu to access the configuration."
},
{
"style": "Text",
"text": " {"
},
{
"style": "Text",
"text": " \"backgroundColor\": \"UI_COLOR.BLACK\","
},
{
"style": "Text",
"text": " \"node\": {"
},
{
"style": "Text",
"text": " \"fontSize\": 16,"
},
{
"style": "Text",
"text": " \"imageSize\": 60,"
},
{
"style": "Text",
"text": " \"type\": {"
},
{
"style": "Text",
"text": " \"fontColor\": \"UI_COLOR.WHITE\""
},
{
"style": "Text",
"text": " },"
},
{
"style": "Text",
"text": " \"name\": {"
},
{
"style": "Text",
"text": " \"fontColor\": \"UI_COLOR.WHITE\""
},
{
"style": "Text",
"text": " },"
},
{
"style": "Text",
"text": " \"menuItem\": {"
},
{
"style": "Text",
"text": " \"backgroundColor\": \"UI_COLOR.BLACK\","
},
{
"style": "Text",
"text": " \"fontColor\": \"UI_COLOR.WHITE\","
},
{
"style": "Text",
"text": " \"fontSize\": 14,"
},
{
"style": "Text",
"text": " \"imageSize\": 14"
},
{
"style": "Text",
"text": " }"
},
{
"style": "Text",
"text": " }"
},
{
"style": "Text",
"text": " }"
"style": "Subtitle",
"text": "Properties",
"updated": 1609862712741
},
{
"style": "List",
@@ -101,8 +27,9 @@
"text": "node refers to all nodes in the design space."
},
{
"style": "Text",
"text": " * imageSize refers to the size of icons representing nodes."
"style": "List",
"text": "imageSize refers to the size of icons representing nodes.",
"updated": 1609862764823
},
{
"style": "List",
@@ -117,84 +44,23 @@
"text": "menuItem refers to items on the right-hand side of the menu."
},
{
"style": "Text",
"text": " * fontSize refers to the size of the font of the string of text."
"style": "List",
"text": "fontSize refers to the size of the font of the string of text.",
"updated": 1609862776218
},
{
"style": "List",
"text": "imageSize refers to the size of the icon illustrating the menu item.",
"updated": 1609862786614
},
{
"style": "Text",
"text": " * imageSize refers to the size of the icon illustrating the menu item."
"text": "Available colors:"
},
{
"style": "Text",
"text": "| Variable Value | RGB Value | Color Sample |"
},
{
"style": "Text",
"text": "| :--- | :---: | :------------------- |"
},
{
"style": "Text",
"text": "| DARK | 48, 48, 54 | RGB(48, 48, 54) |"
},
{
"style": "Text",
"text": "| LIGHT | 234, 226, 222 | RGB(234, 226, 222); border: 1px black |"
},
{
"style": "Text",
"text": "| GREY | 150, 150, 150 | RGB(150, 150, 150) |"
},
{
"style": "Text",
"text": "| LIGHT_GREY | 247, 247, 247 | RGB(247, 247, 247) |"
},
{
"style": "Text",
"text": "| WHITE | 255, 255, 255 | RGB(255, 255, 255) |"
},
{
"style": "Text",
"text": "| BLACK | 0, 0, 0 | RGB(0, 0, 0) |"
},
{
"style": "Text",
"text": "| GOLDEN_ORANGE | 240, 162, 2 | RGB(240, 162, 2) |"
},
{
"style": "Text",
"text": "| RUSTED_RED | 204, 88, 53 | RGB(204, 88, 53) |"
},
{
"style": "Text",
"text": "| GREEN | 188, 214, 67 | RGB(188, 214, 67) |"
},
{
"style": "Text",
"text": "| RED | 223, 70, 60 | RGB(223, 70, 60) |"
},
{
"style": "Text",
"text": "| PATINATED_TURQUOISE | 27, 153, 139 | RGB(27, 153, 139) |"
},
{
"style": "Text",
"text": "| TITANIUM_YELLOW | 244, 228, 9 | RGB(244, 228, 9) |"
},
{
"style": "Text",
"text": "| MANGANESE_PURPLE | 91,80, 122 | RGB(91,80, 122) |"
},
{
"style": "Text",
"text": "| TURQUOISE | 74, 207, 217 | RGB(74, 207, 217) |"
},
{
"style": "Text",
"text": "| DARK_TURQUOISE | 2, 149, 170 | RGB(2, 149, 170) |"
},
{
"style": "Text",
"text": "."
"style": "Table",
"text": "| Variable Value | RGB Value | Color Sample |\n| DARK | 48, 48, 54 | RGB(48, 48, 54) |\n| LIGHT | 234, 226, 222 | RGB(234, 226, 222) |\n| GREY | 150, 150, 150 | RGB(150, 150, 150) |\n| LIGHT_GREY | 247, 247, 247 | RGB(247, 247, 247) |\n| WHITE | 255, 255, 255 | RGB(255, 255, 255) |\n| BLACK | 0, 0, 0 | RGB(0, 0, 0) |\n| GOLDEN_ORANGE | 240, 162, 2 | RGB(240, 162, 2) |\n| RUSTED_RED | 204, 88, 53 | RGB(204, 88, 53) |\n| GREEN | 188, 214, 67 | RGB(188, 214, 67) |\n| RED | 223, 70, 60 | RGB(223, 70, 60) |\n| PATINATED_TURQUOISE | 27, 153, 139 | RGB(27, 153, 139) |\n| TITANIUM_YELLOW | 244, 228, 9 | RGB(244, 228, 9) |\n| MANGANESE_PURPLE | 91,80, 122 | RGB(91,80, 122) |\n| TURQUOISE | 74, 207, 217 | RGB(74, 207, 217) |\n| DARK_TURQUOISE | 2, 149, 170 | RGB(2, 149, 170) |",
"updated": 1609863757224
}
]
}
@@ -68,8 +68,8 @@
},
{
"style": "Table",
"text": "| Variable Value | RGB Value | Color Sample |\n| DARK | 48, 48, 54 | RGB(48, 48, 54) |\n| LIGHT | 234, 226, 222 | RGB(234, 226, 222) |\n| GREY | 150, 150, 150 | RGB(150, 150, 150) |\n| LIGHT_GREY | 247, 247, 247 | RGB(247, 247, 247) |\n| WHITE | 255, 255, 255 | RGB(255, 255, 255) |\n| BLACK | 0, 0, 0 | RGB(0, 0, 0) |\n| GOLDEN_ORANGE | 240, 162, 2 | RGB(240, 162, 2) |\n| RUSTED_RED | 204, 88, 53 | RGB(204, 88, 53) |\n| GREEN | 188, 214, 67 | RGB(188, 214, 67) |\n| RED | 223, 70, 60 | RGB(223, 70, 60) |\n| PATINATED_TURQUOISE | 27, 153, 139 | RGB(27, 153, 139) |\n| TITANIUM_YELLOW | 244, 228, 9 | RGB(244, 228, 9) |\n| MANGANESE_PURPLE | 91,80, 122 | RGB(91,80, 122) |\n| TURQUOISE | 74, 207, 217 | RGB(74, 207, 217) |\n| DARK_TURQUOISE | 2, 149, 170 | RGB(2, 149, 170) |",
"updated": 1609854356242
"text": "| Variable Value | RGB Value | Color Sample |\n| DARK | 48, 48, 54 | RGB(48, 48, 54) |\n| LIGHT | 234, 226, 222 | RGB(234, 226, 222) |\n| GREY | 150, 150, 150 | RGB(150, 150, 150) |\n| LIGHT_GREY | 247, 247, 247 | RGB(247, 247, 247) |\n| WHITE | 255, 255, 255 | RGB(255, 255, 255) |\n| BLACK | 0, 0, 0 | RGB(0, 0, 0) |\n| GOLDEN_ORANGE | 240, 162, 2 | RGB(240, 162, 2) |\n| RUSTED_RED | 204, 88, 53 | RGB(204, 88, 53) |\n| GREEN | 188, 214, 67 | RGB(188, 214, 67) |\n| RED | 223, 70, 60 | RGB(223, 70, 60) |\n| PATINATED_TURQUOISE | 27, 153, 139 | RGB(27, 153, 139) |\n| TITANIUM_YELLOW | 244, 228, 9 | RGB(244, 228, 9) |\n| MANGANESE_PURPLE | 91,80, 122 | RGB(91,80, 122) |\n| TURQUOISE | 74, 207, 217 | RGB(74, 207, 217) |\n| DARK_TURQUOISE | 2, 149, 170 | RGB(2, 149, 170) | </table>",
"updated": 1609862819457
},
{
"style": "List",