From ef8ff009730f3bd979a1a7199596f497c2508ad1 Mon Sep 17 00:00:00 2001 From: Ivan Savenko Date: Sun, 18 Feb 2024 22:15:31 +0200 Subject: [PATCH] Unified common primitive-based UI elements --- client/gui/InterfaceObjectConfigurable.cpp | 25 ++++++-- client/widgets/GraphicalPrimitiveCanvas.h | 2 + config/widgets/commonPrimitives.json | 53 +++++++++++++++ config/widgets/extraOptionsTab.json | 10 +-- config/widgets/mapOverview.json | 56 ++++++---------- config/widgets/turnOptionsTab.json | 75 +++++----------------- 6 files changed, 116 insertions(+), 105 deletions(-) create mode 100644 config/widgets/commonPrimitives.json diff --git a/client/gui/InterfaceObjectConfigurable.cpp b/client/gui/InterfaceObjectConfigurable.cpp index 50d6eedbc..89887d0ff 100644 --- a/client/gui/InterfaceObjectConfigurable.cpp +++ b/client/gui/InterfaceObjectConfigurable.cpp @@ -114,8 +114,20 @@ void InterfaceObjectConfigurable::build(const JsonNode &config) { if (!config["library"].isNull()) { - const JsonNode library(JsonPath::fromJson(config["library"])); - loadCustomBuilders(library); + if (config["library"].isString()) + { + const JsonNode library(JsonPath::fromJson(config["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"]); @@ -718,11 +730,16 @@ std::shared_ptr InterfaceObjectConfigurable::buildGraphicalPrimitive for (auto const & entry : config["primitives"].Vector()) { auto color = readColor(entry["color"]); - //auto typeString = entry["type"]; + auto typeString = entry["type"].String(); auto pointA = readPosition(entry["a"]); auto pointB = readPosition(entry["b"]); - widget->addLine(pointA, pointB, color); + if (typeString == "line") + widget->addLine(pointA, pointB, color); + if (typeString == "filledBox") + widget->addBox(pointA, pointB, color); + if (typeString == "rectangle") + widget->addRectangle(pointA, pointB, color); } return widget; diff --git a/client/widgets/GraphicalPrimitiveCanvas.h b/client/widgets/GraphicalPrimitiveCanvas.h index 2cf508b94..21087f566 100644 --- a/client/widgets/GraphicalPrimitiveCanvas.h +++ b/client/widgets/GraphicalPrimitiveCanvas.h @@ -13,6 +13,7 @@ class GraphicalPrimitiveCanvas : public CIntObject { +public: enum class PrimitiveType { LINE, @@ -20,6 +21,7 @@ class GraphicalPrimitiveCanvas : public CIntObject FILLED_BOX }; +private: struct PrimitiveEntry { ColorRGBA color; diff --git a/config/widgets/commonPrimitives.json b/config/widgets/commonPrimitives.json new file mode 100644 index 000000000..8520efe25 --- /dev/null +++ b/config/widgets/commonPrimitives.json @@ -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 ] }, + ] + }, +} diff --git a/config/widgets/extraOptionsTab.json b/config/widgets/extraOptionsTab.json index 91b41bced..f0b939192 100644 --- a/config/widgets/extraOptionsTab.json +++ b/config/widgets/extraOptionsTab.json @@ -37,27 +37,27 @@ }, { "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] }, { "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] }, { "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] }, { "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] }, { "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] }, { diff --git a/config/widgets/mapOverview.json b/config/widgets/mapOverview.json index d451afda4..9aff4aab7 100644 --- a/config/widgets/mapOverview.json +++ b/config/widgets/mapOverview.json @@ -1,4 +1,6 @@ { + "library" : "config/widgets/commonPrimitives.json", + "items": [ { @@ -8,10 +10,8 @@ "rect": {"w": 428, "h": 379} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 5, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 5, "w": 418, "h": 20} }, { "type": "label", @@ -22,10 +22,8 @@ "position": {"x": 214, "y": 15} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 30, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 30, "w": 418, "h": 20} }, { "type": "label", @@ -37,10 +35,8 @@ "position": {"x": 214, "y": 40} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 55, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 55, "w": 418, "h": 20} }, { "type": "label", @@ -51,10 +47,8 @@ "position": {"x": 214, "y": 65} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 29, "y": 79, "w": 171, "h": 171}, - "color": [0, 0, 0, 255], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 29, "y": 79, "w": 171, "h": 171} }, { "type": "label", @@ -70,10 +64,8 @@ "rect": {"x": 30, "y": 80, "w": 169, "h": 169} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 228, "y": 79, "w": 171, "h": 171}, - "color": [0, 0, 0, 255], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 228, "y": 79, "w": 171, "h": 171} }, { "type": "label", @@ -90,10 +82,8 @@ "rect": {"x": 229, "y": 80, "w": 169, "h": 169} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 254, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 254, "w": 418, "h": 20} }, { "type": "label", @@ -104,10 +94,8 @@ "position": {"x": 214, "y": 264} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 279, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 279, "w": 418, "h": 20} }, { "type": "label", @@ -119,10 +107,8 @@ "position": {"x": 214, "y": 289} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 304, "w": 418, "h": 20}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 304, "w": 418, "h": 20} }, { "type": "label", @@ -133,10 +119,8 @@ "position": {"x": 214, "y": 314} }, { - "type": "transparentFilledRectangle", - "rect": {"x": 5, "y": 329, "w": 418, "h": 45}, - "color": [0, 0, 0, 75], - "colorLine": [128, 100, 75, 255] + "type": "boxWithBackground", + "rect": {"x": 5, "y": 329, "w": 418, "h": 45} }, { "type": "textBox", diff --git a/config/widgets/turnOptionsTab.json b/config/widgets/turnOptionsTab.json index 65ff54687..d642b1b35 100644 --- a/config/widgets/turnOptionsTab.json +++ b/config/widgets/turnOptionsTab.json @@ -1,5 +1,8 @@ { - "library" : "config/widgets/turnOptionsDropdownLibrary.json", + "library" : [ + "config/widgets/turnOptionsDropdownLibrary.json", + "config/widgets/commonPrimitives.json", + ], "customTypes" : { "verticalLayout66" : { @@ -88,66 +91,18 @@ }, { - "type": "graphicalPrimitive", - "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" : "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 ] }, - - // 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": "boxWithNoBackground", + "rect": {"x" : 64, "y" : 394, "w": 316, "h": 124} }, - - -// { -// "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": "horizontalLine", + "rect": {"x" : 65, "y" : 416, "w": 314, "h": 2} + }, + { + "type": "horizontalLine", + "rect": {"x" : 65, "y" : 466, "w": 314, "h": 2} + }, + { "type" : "verticalLayout66", "customType" : "labelTitle",