Implement progress bar element (progressbar) (#69)

CMake/FileList.cmake

@@ -359,6 +359,7 @@ set(Controls_PUB_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/ElementFormControlInput.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/ElementFormControlSelect.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/ElementFormControlTextArea.h
+    ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/ElementProgressBar.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/ElementTabSet.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/Header.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Controls/SelectOption.h
@@ -380,6 +381,7 @@ set(Controls_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Controls/ElementFormControlInput.cpp
     ${PROJECT_SOURCE_DIR}/Source/Controls/ElementFormControlSelect.cpp
     ${PROJECT_SOURCE_DIR}/Source/Controls/ElementFormControlTextArea.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Controls/ElementProgressBar.cpp
     ${PROJECT_SOURCE_DIR}/Source/Controls/ElementTabSet.cpp
     ${PROJECT_SOURCE_DIR}/Source/Controls/ElementTextSelection.cpp
     ${PROJECT_SOURCE_DIR}/Source/Controls/InputType.cpp

Include/RmlUi/Controls/Controls.h

@@ -40,6 +40,7 @@
 #include "ElementFormControlInput.h"
 #include "ElementFormControlSelect.h"
 #include "ElementFormControlTextArea.h"
+#include "ElementProgressBar.h"
 #include "ElementTabSet.h"
 #include "SelectOption.h"
 

Include/RmlUi/Controls/ElementProgressBar.h

@@ -0,0 +1,122 @@
+/*
+ * This source file is part of RmlUi, the HTML/CSS Interface Middleware
+ *
+ * For the latest information, see http://github.com/mikke89/RmlUi
+ *
+ * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
+ * Copyright (c) 2019 The RmlUi Team, and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+#ifndef RMLUICONTROLSELEMENTPROGRESSBAR_H
+#define RMLUICONTROLSELEMENTPROGRESSBAR_H
+
+#include "Header.h"
+#include "../Core/Element.h"
+#include "../Core/Geometry.h"
+#include "../Core/Texture.h"
+#include "../Core/Spritesheet.h"
+
+namespace Rml {
+namespace Controls {
+
+/**
+	The 'progressbar' element.
+
+	The 'value' attribute should be a number [0, 1] where 1 means completely filled.
+
+	The 'direction' attribute should be one of:
+		top | right (default) | bottom | left | clockwise | counter-clockwise
+
+	The 'start-edge' attribute should be one of:
+		top (default) | right | bottom | left
+	Only applies to 'clockwise' or 'counter-clockwise' directions. Defines which edge the
+	circle should start expanding from.
+
+	The progressbar generates a non-dom 'fill' element beneath it which can be used to style
+	the filled part of the bar. The 'fill' element can use the 'fill-image'-property to set
+	an image which will be clipped according to the progressbar value. This property is the
+	only way to style a 'clockwise' or 'counter-clockwise' progressbar.
+
+ */
+
+class RMLUICONTROLS_API ElementProgressBar : public Core::Element
+{
+public:
+	RMLUI_RTTI_DefineWithParent(ElementProgressBar, Core::Element)
+
+	/// Constructs a new ElementProgressBar. This should not be called directly; use the Factory instead.
+	/// @param[in] tag The tag the element was declared as in RML.
+	ElementProgressBar(const Core::String& tag);
+	virtual ~ElementProgressBar();
+
+	/// Return the value of the progress bar [0, 1]
+	float GetValue() const;
+
+	/// Set the value of the progress bar
+	void SetValue(float value);
+
+protected:
+	void OnRender() override;
+
+	void OnResize() override;
+
+	void OnAttributeChange(const Core::ElementAttributes& changed_attributes) override;
+
+	void OnPropertyChange(const Core::PropertyIdSet& changed_properties) override;
+
+private:
+	enum class Direction { Top, Right, Bottom, Left, Clockwise, CounterClockwise, Count };
+	enum class StartEdge { Top, Right, Bottom, Left, Count };
+
+	static constexpr Direction DefaultDirection = Direction::Right;
+	static constexpr StartEdge DefaultStartEdge = StartEdge::Top;
+
+	void GenerateGeometry();
+	bool LoadTexture();
+
+	Direction direction;
+	StartEdge start_edge;
+
+	float value;
+
+	Core::Element* fill;
+
+	// The size of the fill geometry as if fully filled, and the offset relative to the 'progressbar' element.
+	Core::Vector2f fill_size, fill_offset;
+
+	// The texture this element is rendering from if the 'fill-image' property is set.
+	Core::Texture texture;
+	bool texture_dirty;
+
+	// The rectangle extracted from a sprite, 'rect_set' controls whether it is active.
+	Core::Rectangle rect;
+	bool rect_set;
+
+	// The geometry used to render this element. Only applies if the 'fill-image' property is set.
+	Core::Geometry geometry;
+	bool geometry_dirty;
+};
+
+}
+}
+
+#endif

Include/RmlUi/Controls/ElementTabSet.h

@@ -30,7 +30,6 @@
 #define RMLUICONTROLSELEMENTTABSET_H
 
 #include "../Core/Element.h"
-#include "../Core/EventListener.h"
 #include "Header.h"
 
 namespace Rml {

Include/RmlUi/Core/ID.h

@@ -143,6 +143,8 @@ enum class PropertyId : uint16_t
 	Decorator,
 	FontEffect,
 
+	FillImage,
+
 	NumDefinedIds,
 	FirstCustomId = NumDefinedIds
 };

Samples/assets/invader.rcss

@@ -119,6 +119,15 @@
 	range-inc:           3px 250px 17px 17px;
 	range-inc-hover:    21px 250px 17px 17px;
 	range-inc-active:   39px 250px 17px 17px;
+
+	progress-l:      103px 267px 13px 34px;
+	progress-c:      116px 267px 54px 34px;
+	progress-r:      170px 267px 13px 34px;
+	progress-fill-l: 110px 302px  6px 34px;
+	progress-fill-c: 140px 302px  6px 34px;
+	progress-fill-r: 170px 302px  6px 34px;
+	gauge:      0px 271px 100px 86px;
+	gauge-fill: 0px 356px 100px 86px;
 }
 
 body

Samples/basic/demo/data/demo.rml

@@ -437,12 +437,58 @@ form h2
 	color: #ffd40f;
 	font-size: 1.7em;
 }
+progressbar {
+	margin: 10px 20px;
+	display: inline-block;
+	vertical-align: middle;
+}
+#gauge { 
+	decorator: image( gauge );
+	width: 100px;
+	height: 86px;
+}
+#gauge fill { 
+	fill-image: gauge-fill;
+}
+#progress_horizontal { 
+	decorator: tiled-horizontal( progress-l, progress-c, progress-r );
+	width: 150px;
+	height: 34px;
+}
+#progress_horizontal fill {
+	decorator: tiled-horizontal( progress-fill-l, progress-fill-c, progress-fill-r );
+	margin: 0 7px;
+	padding-left: 14px;
+}
+#progress_label {
+	font-size: 18px;
+	color: #ceb;
+	margin-left: 1em;
+	margin-bottom: 0;
+}
+#gauge_value, #progress_value {
+	font-size: 18px;
+	color: #4ADB2D;
+	text-align: right;
+	width: 50px;
+	font-effect: outline( 2px #555 );
+}
+#gauge_value {
+	margin: 30px 0 0 18px;
+}
+#progress_value { 
+	margin-left: -20px;
+	display: inline-block;
+	vertical-align: -3px;
+}
+
+
 #form_output 
 {
 	border: 1px #666;
 	font-size: 0.9em;
 	background-color: #ddd;
-	min-height: 30px;
+	min-height: 180px;
 	margin-top: 10px;
 	padding: 5px 8px;
 	color: #222;
@@ -755,8 +801,16 @@ form h2
 		<div style="margin-bottom: 15px;">
 			<input type="submit">Submit</input>
 		</div>
-		<h2>Form output</h2>
-		<div id="form_output"></div>
+		<div id="submit_progress" style="display: none;">
+			<p id="progress_label">&nbsp;</p>
+			<progressbar id="gauge" direction="clockwise" start-edge="bottom" value="0.0">
+				<div id="gauge_value">50%</div>
+			</progressbar>
+			<progressbar id="progress_horizontal" direction="right" value="0.0"/>
+			<div id="progress_value">50%</div>
+			<h2>Form output</h2>
+			<div id="form_output"></div>
+		</div>
 	</form>
 </panel>
 <tab>Sandbox</tab>