diff --git a/CMake/FileList.cmake b/CMake/FileList.cmake
index 81c58fe30..4f77e8007 100644
--- a/CMake/FileList.cmake
+++ b/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
diff --git a/Include/RmlUi/Controls/Controls.h b/Include/RmlUi/Controls/Controls.h
index 1805bebff..cf487e4a4 100644
--- a/Include/RmlUi/Controls/Controls.h
+++ b/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"
diff --git a/Include/RmlUi/Controls/ElementProgressBar.h b/Include/RmlUi/Controls/ElementProgressBar.h
new file mode 100644
index 000000000..0d1dd22ca
--- /dev/null
+++ b/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
diff --git a/Include/RmlUi/Controls/ElementTabSet.h b/Include/RmlUi/Controls/ElementTabSet.h
index 73b3806bb..4e3cc002f 100644
--- a/Include/RmlUi/Controls/ElementTabSet.h
+++ b/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 {
diff --git a/Include/RmlUi/Core/ID.h b/Include/RmlUi/Core/ID.h
index c0ba751db..a0387db1d 100644
--- a/Include/RmlUi/Core/ID.h
+++ b/Include/RmlUi/Core/ID.h
@@ -143,6 +143,8 @@ enum class PropertyId : uint16_t
Decorator,
FontEffect,
+ FillImage,
+
NumDefinedIds,
FirstCustomId = NumDefinedIds
};
diff --git a/Samples/assets/invader.rcss b/Samples/assets/invader.rcss
index 413a7c55f..3625b73ec 100644
--- a/Samples/assets/invader.rcss
+++ b/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
diff --git a/Samples/assets/invader.tga b/Samples/assets/invader.tga
index a6131a2b8..3223e72f3 100644
Binary files a/Samples/assets/invader.tga and b/Samples/assets/invader.tga differ
diff --git a/Samples/basic/demo/data/demo.rml b/Samples/basic/demo/data/demo.rml
index c8ffc81df..28e0e9015 100644
--- a/Samples/basic/demo/data/demo.rml
+++ b/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