1
0
mirror of https://github.com/vcmi/vcmi.git synced 2025-08-13 19:54:17 +02:00

Unified common primitive-based UI elements

This commit is contained in:
Ivan Savenko
2024-02-18 22:15:31 +02:00
parent 14e3c762c0
commit ef8ff00973
6 changed files with 116 additions and 105 deletions

View File

@@ -113,11 +113,23 @@ void InterfaceObjectConfigurable::build(const JsonNode &config)
if(config.getType() == JsonNode::JsonType::DATA_STRUCT) if(config.getType() == JsonNode::JsonType::DATA_STRUCT)
{ {
if (!config["library"].isNull()) if (!config["library"].isNull())
{
if (config["library"].isString())
{ {
const JsonNode library(JsonPath::fromJson(config["library"])); const JsonNode library(JsonPath::fromJson(config["library"]));
loadCustomBuilders(library); loadCustomBuilders(library);
} }
if (config["library"].isVector())
{
for (auto const & entry : config["library"].Vector())
{
const JsonNode library(JsonPath::fromJson(entry));
loadCustomBuilders(library);
}
}
}
loadCustomBuilders(config["customTypes"]); loadCustomBuilders(config["customTypes"]);
for(auto & item : config["variables"].Struct()) for(auto & item : config["variables"].Struct())
@@ -718,11 +730,16 @@ std::shared_ptr<CIntObject> InterfaceObjectConfigurable::buildGraphicalPrimitive
for (auto const & entry : config["primitives"].Vector()) for (auto const & entry : config["primitives"].Vector())
{ {
auto color = readColor(entry["color"]); auto color = readColor(entry["color"]);
//auto typeString = entry["type"]; auto typeString = entry["type"].String();
auto pointA = readPosition(entry["a"]); auto pointA = readPosition(entry["a"]);
auto pointB = readPosition(entry["b"]); auto pointB = readPosition(entry["b"]);
if (typeString == "line")
widget->addLine(pointA, pointB, color); widget->addLine(pointA, pointB, color);
if (typeString == "filledBox")
widget->addBox(pointA, pointB, color);
if (typeString == "rectangle")
widget->addRectangle(pointA, pointB, color);
} }
return widget; return widget;

View File

@@ -13,6 +13,7 @@
class GraphicalPrimitiveCanvas : public CIntObject class GraphicalPrimitiveCanvas : public CIntObject
{ {
public:
enum class PrimitiveType enum class PrimitiveType
{ {
LINE, LINE,
@@ -20,6 +21,7 @@ class GraphicalPrimitiveCanvas : public CIntObject
FILLED_BOX FILLED_BOX
}; };
private:
struct PrimitiveEntry struct PrimitiveEntry
{ {
ColorRGBA color; ColorRGBA color;

View File

@@ -0,0 +1,53 @@
{
"boxWithNoBackground" : {
"type": "graphicalPrimitive",
"primitives" : [
// Top line
{ "type" : "line", "a" : { "x" : 0, "y" : 0}, "b" : { "x" : -1, "y" : 0}, "color" : [ 255, 255, 255, 32 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : -1, "y" : 1}, "color" : [ 0, 0, 0, 48 ] }
// Left line
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : 0, "y" : -2}, "color" : [ 255, 255, 255, 32 ] },
{ "type" : "line", "a" : { "x" : 1, "y" : 2}, "b" : { "x" : 1, "y" : -2}, "color" : [ 0, 0, 0, 48 ] }
// Right line
{ "type" : "line", "a" : { "x" : -2, "y" : 2}, "b" : { "x" : -2, "y" : -3}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : -1, "y" : 1}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 48 ] },
// Bottom line
{ "type" : "line", "a" : { "x" : 1, "y" : -2}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : -1}, "b" : { "x" : -1, "y" : -1}, "color" : [ 255, 255, 255, 48 ] },
]
},
"horizontalLine" : {
"type": "graphicalPrimitive",
"primitives" : [
{ "type" : "line", "a" : { "x" : 0, "y" : 0}, "b" : { "x" : -1, "y" : 0}, "color" : [ 255, 255, 255, 64 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : -1, "y" : 1}, "color" : [ 0, 0, 0, 64 ] },
]
}
"boxWithBackground" : {
"type": "graphicalPrimitive",
"primitives" : [
{ "type" : "filledBox", "a" : { "x" : 1, "y" : 1}, "b" : { "x" : -2, "y" : -2}, "color" : [ 0, 0, 0, 75 ] },
// Top line
{ "type" : "line", "a" : { "x" : 0, "y" : 0}, "b" : { "x" : -1, "y" : 0}, "color" : [ 255, 255, 255, 32 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : -1, "y" : 1}, "color" : [ 0, 0, 0, 48 ] }
// Left line
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : 0, "y" : -2}, "color" : [ 255, 255, 255, 32 ] },
{ "type" : "line", "a" : { "x" : 1, "y" : 2}, "b" : { "x" : 1, "y" : -2}, "color" : [ 0, 0, 0, 48 ] }
// Right line
{ "type" : "line", "a" : { "x" : -2, "y" : 2}, "b" : { "x" : -2, "y" : -3}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : -1, "y" : 1}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 48 ] },
// Bottom line
{ "type" : "line", "a" : { "x" : 1, "y" : -2}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : -1}, "b" : { "x" : -1, "y" : -1}, "color" : [ 255, 255, 255, 48 ] },
]
},
}

View File

@@ -37,27 +37,27 @@
}, },
{ {
"type": "transparentFilledRectangle", "type": "transparentFilledRectangle",
"rect": {"x": 54, "y": 127, "w": 335, "h": 1}, "rect": {"x": 54, "y": 127, "w": 335, "h": 2},
"color": [24, 41, 90, 255] "color": [24, 41, 90, 255]
}, },
{ {
"type": "transparentFilledRectangle", "type": "transparentFilledRectangle",
"rect": {"x": 158, "y": 90, "w": 2, "h": 37}, "rect": {"x": 159, "y": 90, "w": 2, "h": 38},
"color": [24, 41, 90, 255] "color": [24, 41, 90, 255]
}, },
{ {
"type": "transparentFilledRectangle", "type": "transparentFilledRectangle",
"rect": {"x": 234, "y": 90, "w": 2, "h": 37}, "rect": {"x": 235, "y": 90, "w": 2, "h": 38},
"color": [24, 41, 90, 255] "color": [24, 41, 90, 255]
}, },
{ {
"type": "transparentFilledRectangle", "type": "transparentFilledRectangle",
"rect": {"x": 310, "y": 90, "w": 2, "h": 37}, "rect": {"x": 311, "y": 90, "w": 2, "h": 38},
"color": [24, 41, 90, 255] "color": [24, 41, 90, 255]
}, },
{ {
"type": "transparentFilledRectangle", "type": "transparentFilledRectangle",
"rect": {"x": 55, "y": 556, "w": 334, "h": 18}, "rect": {"x": 55, "y": 556, "w": 335, "h": 19},
"color": [24, 41, 90, 255] "color": [24, 41, 90, 255]
}, },
{ {

View File

@@ -1,4 +1,6 @@
{ {
"library" : "config/widgets/commonPrimitives.json",
"items": "items":
[ [
{ {
@@ -8,10 +10,8 @@
"rect": {"w": 428, "h": 379} "rect": {"w": 428, "h": 379}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 5, "w": 418, "h": 20}, "rect": {"x": 5, "y": 5, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -22,10 +22,8 @@
"position": {"x": 214, "y": 15} "position": {"x": 214, "y": 15}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 30, "w": 418, "h": 20}, "rect": {"x": 5, "y": 30, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -37,10 +35,8 @@
"position": {"x": 214, "y": 40} "position": {"x": 214, "y": 40}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 55, "w": 418, "h": 20}, "rect": {"x": 5, "y": 55, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -51,10 +47,8 @@
"position": {"x": 214, "y": 65} "position": {"x": 214, "y": 65}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 29, "y": 79, "w": 171, "h": 171}, "rect": {"x": 29, "y": 79, "w": 171, "h": 171}
"color": [0, 0, 0, 255],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -70,10 +64,8 @@
"rect": {"x": 30, "y": 80, "w": 169, "h": 169} "rect": {"x": 30, "y": 80, "w": 169, "h": 169}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 228, "y": 79, "w": 171, "h": 171}, "rect": {"x": 228, "y": 79, "w": 171, "h": 171}
"color": [0, 0, 0, 255],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -90,10 +82,8 @@
"rect": {"x": 229, "y": 80, "w": 169, "h": 169} "rect": {"x": 229, "y": 80, "w": 169, "h": 169}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 254, "w": 418, "h": 20}, "rect": {"x": 5, "y": 254, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -104,10 +94,8 @@
"position": {"x": 214, "y": 264} "position": {"x": 214, "y": 264}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 279, "w": 418, "h": 20}, "rect": {"x": 5, "y": 279, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -119,10 +107,8 @@
"position": {"x": 214, "y": 289} "position": {"x": 214, "y": 289}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 304, "w": 418, "h": 20}, "rect": {"x": 5, "y": 304, "w": 418, "h": 20}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "label", "type": "label",
@@ -133,10 +119,8 @@
"position": {"x": 214, "y": 314} "position": {"x": 214, "y": 314}
}, },
{ {
"type": "transparentFilledRectangle", "type": "boxWithBackground",
"rect": {"x": 5, "y": 329, "w": 418, "h": 45}, "rect": {"x": 5, "y": 329, "w": 418, "h": 45}
"color": [0, 0, 0, 75],
"colorLine": [128, 100, 75, 255]
}, },
{ {
"type": "textBox", "type": "textBox",

View File

@@ -1,5 +1,8 @@
{ {
"library" : "config/widgets/turnOptionsDropdownLibrary.json", "library" : [
"config/widgets/turnOptionsDropdownLibrary.json",
"config/widgets/commonPrimitives.json",
],
"customTypes" : { "customTypes" : {
"verticalLayout66" : { "verticalLayout66" : {
@@ -88,66 +91,18 @@
}, },
{ {
"type": "graphicalPrimitive", "type": "boxWithNoBackground",
"rect": {"x" : 64, "y" : 394, "w": 316, "h": 124}, "rect": {"x" : 64, "y" : 394, "w": 316, "h": 124}
"primitives" : [ },
// Top line {
{ "type" : "line", "a" : { "x" : 0, "y" : 0}, "b" : { "x" : -1, "y" : 0}, "color" : [ 255, 255, 255, 32 ] }, "type": "horizontalLine",
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : -1, "y" : 1}, "color" : [ 0, 0, 0, 48 ] } "rect": {"x" : 65, "y" : 416, "w": 314, "h": 2}
},
// Left line {
{ "type" : "line", "a" : { "x" : 0, "y" : 1}, "b" : { "x" : 0, "y" : -2}, "color" : [ 255, 255, 255, 32 ] }, "type": "horizontalLine",
{ "type" : "line", "a" : { "x" : 1, "y" : 2}, "b" : { "x" : 1, "y" : -2}, "color" : [ 0, 0, 0, 48 ] } "rect": {"x" : 65, "y" : 466, "w": 314, "h": 2}
// Right line
{ "type" : "line", "a" : { "x" : -2, "y" : 2}, "b" : { "x" : -2, "y" : -3}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : -1, "y" : 1}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 48 ] },
// Central separator
{ "type" : "line", "a" : { "x" : 1, "y" : 22}, "b" : { "x" : -2, "y" : 22}, "color" : [ 255, 255, 255, 64 ] },
{ "type" : "line", "a" : { "x" : 1, "y" : 23}, "b" : { "x" : -2, "y" : 23}, "color" : [ 0, 0, 0, 64 ] },
// 2nd Central separator
{ "type" : "line", "a" : { "x" : 1, "y" : 72}, "b" : { "x" : -2, "y" : 72}, "color" : [ 255, 255, 255, 64 ] },
{ "type" : "line", "a" : { "x" : 1, "y" : 73}, "b" : { "x" : -2, "y" : 73}, "color" : [ 0, 0, 0, 64 ] },
// Bottom line
{ "type" : "line", "a" : { "x" : 1, "y" : -2}, "b" : { "x" : -1, "y" : -2}, "color" : [ 255, 255, 255, 24 ] },
{ "type" : "line", "a" : { "x" : 0, "y" : -1}, "b" : { "x" : -1, "y" : -1}, "color" : [ 255, 255, 255, 48 ] },
]
}, },
// {
// "type": "transparentFilledRectangle",
// "rect": {"x" : 64, "y" : 394, "w": 316, "h": 124},
// "color": [0, 0, 0, 0],
// "colorLine": [64, 80, 128, 128]
// },
// {
// "type": "transparentFilledRectangle",
// "rect": {"x" : 65, "y" : 416, "w": 314, "h": 1},
// "color": [0, 0, 0, 0],
// "colorLine": [80, 96, 160, 128]
// },
// {
// "type": "transparentFilledRectangle",
// "rect": {"x" : 65, "y" : 417, "w": 314, "h": 1},
// "color": [0, 0, 0, 0],
// "colorLine": [32, 40, 128, 128]
// },
// {
// "type": "transparentFilledRectangle",
// "rect": {"x" : 65, "y" : 466, "w": 314, "h": 1},
// "color": [0, 0, 0, 0],
// "colorLine": [80, 96, 160, 128]
// },
// {
// "type": "transparentFilledRectangle",
// "rect": {"x" : 65, "y" : 467, "w": 314, "h": 1},
// "color": [0, 0, 0, 0],
// "colorLine": [32, 40, 128, 128]
// },
{ {
"type" : "verticalLayout66", "type" : "verticalLayout66",
"customType" : "labelTitle", "customType" : "labelTitle",