Unified common primitive-based UI elements

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<CIntObject> 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;

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;

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 ] },
+		]
+	},
+}

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]
 		},
 		{

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",

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",