Lottie support, but very raw state

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "sdk/rlottie"]
+	path = sdk/rlottie
+	url = https://github.com/Samsung/rlottie.git

CMake/FileList.cmake

@@ -26,6 +26,7 @@ set(Core_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementDefinition.h
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementHandle.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementImage.h
+    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementLottie.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementTextSelection.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/InputType.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/InputTypeButton.h
@@ -281,6 +282,7 @@ set(Core_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementFormControlSelect.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementFormControlTextArea.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementImage.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementLottie.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementProgressBar.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementTabSet.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/ElementTextSelection.cpp

CMakeLists.txt

@@ -303,6 +303,14 @@ if(NOT NO_FONT_INTERFACE_DEFAULT)
 	endif()
 endif()
 
+list(APPEND CMAKE_MODULE_PATH ${CMAKE_SOURCE_DIR}/sdk/rlottie/build)
+find_package(rlottie REQUIRED)
+if (rlottie_FOUND)
+	message("rlottie FOUND")
+	include_directories(${CMAKE_SOURCE_DIR}/sdk/rlottie/inc/)
+	list(APPEND CORE_LINK_LIBS ${rlottie_LIBRARIES})
+endif()
+
 #Lua
 if(BUILD_LUA_BINDINGS)
 	find_package(Lua REQUIRED)

Samples/assets/lottie.json

@@ -0,0 +1 @@
+{"v":"5.1.7","fr":29.9700012207031,"ip":0,"op":24.00000097754,"w":100,"h":100,"nm":"heart","ddd":0,"assets":[{"id":"comp_4","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":180,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":130,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":90,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":45,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-135,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-90,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"Shape Layer 2 Comp 2","refId":"comp_5","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":0,"op":900.000036657751,"st":0,"bm":0}]},{"id":"comp_5","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.281]},"n":["0p667_1_0p333_0p281"],"t":3,"s":[0],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":9,"s":[100],"e":[0]},{"t":17.0000006924242}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.567},"o":{"x":0.333,"y":0.406},"n":"0p667_0p567_0p333_0p406","t":3,"s":[39.878,39.582,0],"e":[39.878,22.253,0],"to":[0,-0.83333331346512,0],"ti":[0,2.48720121383667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.5},"n":"0p667_1_0p333_0p5","t":9,"s":[39.878,22.253,0],"e":[39.878,2.25,0],"to":[0,-8.33440494537354,0],"ti":[0,3.3337619304657,0]},{"t":17.0000006924242}],"ix":2},"a":{"a":0,"k":[-0.122,-27.75,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[15.897,15.897,-17.409]},"o":{"x":[0.333,0.333,0.333],"y":[-44.172,-44.172,107.618]},"n":["0p667_15p897_0p333_-44p172","0p667_15p897_0p333_-44p172","0p667_-17p409_0p333_107p618"],"t":3,"s":[78.68,78.68,100],"e":[78,78,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[-0.562,-0.562,24.545]},"n":["0p667_1_0p333_-0p562","0p667_1_0p333_-0p562","0p667_1_0p333_24p545"],"t":9,"s":[78,78,100],"e":[54,54,100]},{"t":17.0000006924242}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[6.66,6.66],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.909803921569,0.18431372549,0.56862745098,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.17,-26.594],"ix":2},"a":{"a":0,"k":[0,1.076],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Shape Layer 3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.281]},"n":["0p667_1_0p333_0p281"],"t":0,"s":[0],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":6,"s":[100],"e":[0]},{"t":17.0000006924242}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.567},"o":{"x":0.333,"y":0.406},"n":"0p667_0p567_0p333_0p406","t":0,"s":[49.878,39.582,0],"e":[49.878,22.253,0],"to":[0,-2.35414934158325,0],"ti":[0,2.48720121383667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.687},"n":"0p667_1_0p333_0p687","t":6,"s":[49.878,22.253,0],"e":[49.878,2.25,0],"to":[0,-8.33440494537354,0],"ti":[0,3.3337619304657,0]},{"t":17.0000006924242}],"ix":2},"a":{"a":0,"k":[-0.122,-27.75,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[15.897,15.897,-17.409]},"o":{"x":[0.333,0.333,0.333],"y":[-44.172,-44.172,107.618]},"n":["0p667_15p897_0p333_-44p172","0p667_15p897_0p333_-44p172","0p667_-17p409_0p333_107p618"],"t":0,"s":[78.68,78.68,100],"e":[78,78,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[-0.773,-0.773,33.75]},"n":["0p667_1_0p333_-0p773","0p667_1_0p333_-0p773","0p667_1_0p333_33p75"],"t":6,"s":[78,78,100],"e":[54,54,100]},{"t":17.0000006924242}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[6.66,6.66],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[0.964705882353,0.309803921569,0.4,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.17,-26.594],"ix":2},"a":{"a":0,"k":[0,1.076],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 2","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0.281]},"n":["0p667_1_0p333_0p281"],"t":5,"s":[0],"e":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"n":["0p667_1_0p333_0"],"t":11,"s":[100],"e":[0]},{"t":19.0000007738859}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":0.567},"o":{"x":0.333,"y":0.406},"n":"0p667_0p567_0p333_0p406","t":5,"s":[59.878,39.582,0],"e":[59.878,22.253,0],"to":[0,-2.35414934158325,0],"ti":[0,2.48720121383667,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.5},"n":"0p667_1_0p333_0p5","t":11,"s":[59.878,22.253,0],"e":[59.878,2.25,0],"to":[0,-8.33440494537354,0],"ti":[0,3.3337619304657,0]},{"t":19.0000007738859}],"ix":2},"a":{"a":0,"k":[-0.122,-27.75,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[15.897,15.897,-17.409]},"o":{"x":[0.333,0.333,0.333],"y":[-44.172,-44.172,107.618]},"n":["0p667_15p897_0p333_-44p172","0p667_15p897_0p333_-44p172","0p667_-17p409_0p333_107p618"],"t":5,"s":[78.68,78.68,100],"e":[78,78,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[-0.562,-0.562,24.545]},"n":["0p667_1_0p333_-0p562","0p667_1_0p333_-0p562","0p667_1_0p333_24p545"],"t":11,"s":[78,78,100],"e":[54,54,100]},{"t":19.0000007738859}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[6.66,6.66],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"fl","c":{"a":0,"k":[1,0.868822583965,0.051056981554,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.17,-26.594],"ix":2},"a":{"a":0,"k":[0,1.076],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5.00000020365417,"op":905.000036861406,"st":5.00000020365417,"bm":0}]}],"layers":[{"ddd":0,"ind":3,"ty":4,"nm":"Layer 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50.085,49.972,0],"ix":2},"a":{"a":0,"k":[20.392,17.022,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.486,0.486,0.333],"y":[0,0,0]},"n":["0p667_1_0p486_0","0p667_1_0p486_0","0p667_1_0p333_0"],"t":0,"s":[0,0,100],"e":[119,119,100]},{"i":{"x":[0.576,0.576,0.667],"y":[1,1,1]},"o":{"x":[0.439,0.439,0.333],"y":[0,0,0]},"n":["0p576_1_0p439_0","0p576_1_0p439_0","0p667_1_0p333_0"],"t":5,"s":[119,119,100],"e":[82,82,100]},{"i":{"x":[0.288,0.288,0.667],"y":[1,1,1]},"o":{"x":[0.152,0.152,0.333],"y":[0,0,0]},"n":["0p288_1_0p152_0","0p288_1_0p152_0","0p667_1_0p333_0"],"t":10,"s":[82,82,100],"e":[100,100,100]},{"t":15.0000006109625}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.008,2.091],[-2.887,0.06],[0,0],[-2.098,-2.123],[0,0],[0,0],[-3.003,0.063],[0,0],[-2.092,-2.008],[-0.059,-2.889],[2.542,-1.428],[0.178,8.815]],"o":[[2.007,-2.09],[0,0],[3.002,-0.062],[0,0],[0,0],[2.009,-2.205],[0,0],[2.89,-0.058],[2.09,2.008],[0.229,11.336],[-7.185,-3.885],[-0.059,-2.89]],"v":[[-17.06,-13.009],[-9.471,-16.342],[-9.465,-16.342],[-1.555,-13.145],[-0.209,-11.783],[1.081,-13.198],[8.851,-16.714],[8.855,-16.714],[16.579,-13.69],[19.913,-6.096],[0.38,16.772],[-20.083,-5.285]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.964999988032,0.310000011968,0.4,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[20.392,17.022],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":900.000036657751,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"Shape Layer 2 Comp 1","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[86,86,100],"ix":6}},"ao":0,"w":100,"h":100,"ip":3.00000012219251,"op":903.000036779944,"st":3.00000012219251,"bm":0},{"ddd":0,"ind":6,"ty":1,"nm":"White Solid 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[50,50,0],"ix":2},"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"sw":100,"sh":100,"sc":"#ffffff","ip":0,"op":900.000036657751,"st":0,"bm":0}],"markers":[]}

Samples/assets/lottie.rml

@@ -0,0 +1,28 @@
+<rml>
+	<head>
+		<title>Demo</title>
+		<link type="text/template" href="window.rml" />
+		<style>
+			body
+			{
+				width: 300px;
+				height: 225px;
+
+				margin: auto;
+			}
+
+			div#title_bar div#icon
+			{
+				display: none;
+			}
+
+			div#content
+			{
+				text-align: left;
+			}
+		</style>
+	</head>
+	<body template="window">
+		<lottie></lottie>
+	</body>
+</rml>

Samples/basic/loaddocument/src/main.cpp

@@ -105,7 +105,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 	Shell::LoadFonts("assets/");
 
 	// Load and show the demo document.
-	if (Rml::ElementDocument * document = context->LoadDocument("assets/demo.rml"))
+	if (Rml::ElementDocument * document = context->LoadDocument("assets/lottie.rml"))
 		document->Show();
 
 	Shell::EventLoop(GameLoop);

Source/Core/Elements/ElementLottie.cpp

@@ -0,0 +1,223 @@
+#include "ElementLottie.h"
+#include "../TextureDatabase.h"
+#include "../../../Include/RmlUi/Core/URL.h"
+#include "../../../Include/RmlUi/Core/PropertyIdSet.h"
+#include "../../../Include/RmlUi/Core/GeometryUtilities.h"
+#include "../../../Include/RmlUi/Core/ElementDocument.h"
+#include "../../../Include/RmlUi/Core/StyleSheet.h"
+
+namespace Rml
+{
+	ElementLottie::ElementLottie(const String& tag) : Element(tag), geometry(this), m_dimensions(200.0f, 200.0f), m_is_need_recreate_texture(true), m_is_need_recreate_geometry(true), m_p_raw_data(nullptr)
+	{
+	}
+
+	ElementLottie::~ElementLottie(void)
+	{
+	}
+
+	bool ElementLottie::GetIntrinsicDimensions(Vector2f& dimensions, float& ratio)
+	{
+		if (this->m_is_need_recreate_texture)
+			this->LoadTexture();
+
+		dimensions = this->m_dimensions;
+
+		return true;
+	}
+
+	void ElementLottie::OnRender()
+	{
+
+		geometry.Render(GetAbsoluteOffset(Box::CONTENT).Round());
+		this->Play();
+	}
+
+	void ElementLottie::OnUpdate()
+	{
+
+	}
+
+	void ElementLottie::OnResize()
+	{
+		this->GenerateGeometry();
+	}
+
+	void ElementLottie::OnAttributeChange(const ElementAttributes& changed_attributes)
+	{
+	}
+
+	void ElementLottie::OnPropertyChange(const PropertyIdSet& changed_properties)
+	{
+	}
+
+	void ElementLottie::GenerateGeometry()
+	{
+		geometry.Release(true);
+
+		Vector< Vertex >& vertices = geometry.GetVertices();
+		Vector< int >& indices = geometry.GetIndices();
+
+		vertices.resize(4);
+		indices.resize(6);
+
+		// Generate the texture coordinates.
+		Vector2f texcoords[2];
+/*
+		if (rect_source != RectSource::None)
+		{
+			Vector2f texture_dimensions((float)texture.GetDimensions(GetRenderInterface()).x, (float)texture.GetDimensions(GetRenderInterface()).y);
+			if (texture_dimensions.x == 0.0f)
+				texture_dimensions.x = 1.0f;
+
+			if (texture_dimensions.y == 0.0f)
+				texture_dimensions.y = 1.0f;
+
+			texcoords[0].x = rect.x / texture_dimensions.x;
+			texcoords[0].y = rect.y / texture_dimensions.y;
+
+			texcoords[1].x = (rect.x + rect.width) / texture_dimensions.x;
+			texcoords[1].y = (rect.y + rect.height) / texture_dimensions.y;
+		}
+		else
+		{*/
+			texcoords[0] = Vector2f(0.0f, 0.0f);
+			texcoords[1] = Vector2f(1.0f, 1.0f);
+/*
+		}
+*/
+
+		const ComputedValues& computed = GetComputedValues();
+
+		float opacity = computed.opacity;
+		Colourb quad_colour = computed.image_color;
+		quad_colour.alpha = (byte)(opacity * (float)quad_colour.alpha);
+
+		Vector2f quad_size = GetBox().GetSize(Box::CONTENT).Round();
+
+		GeometryUtilities::GenerateQuad(&vertices[0], &indices[0], Vector2f(0, 0), quad_size, quad_colour, texcoords[0], texcoords[1]);
+
+		this->m_is_need_recreate_geometry = false;
+	}
+
+	bool ElementLottie::LoadTexture()
+	{
+		this->m_is_need_recreate_texture = false;
+
+		const String& attiribute_value_name = GetAttribute<String>("src", "C:\\Users\\lord\\RmlUi\\Samples\\assets\\lottie.json");
+
+		if (attiribute_value_name.empty())
+			return false;
+
+		this->m_file_name = attiribute_value_name;
+		this->m_p_lottie = rlottie::Animation::loadFromFile(attiribute_value_name.c_str());
+
+		if (this->m_p_lottie == nullptr)
+		{
+			Log::Message(Rml::Log::Type::LT_WARNING, "can't load lottie file properly");
+			return false;
+		}
+
+		auto p_callback = [this](const String& name, UniquePtr<const byte[]>& data, Vector2i& dimensions) -> bool {
+			size_t bytes_per_line = m_dimensions.x * sizeof(std::uint32_t);
+			std::uint32_t* p_data = new std::uint32_t[bytes_per_line * m_dimensions.y];
+			this->m_p_raw_data = p_data;
+/*			rlottie::Surface surface(p_data, m_dimensions.x, m_dimensions.y, bytes_per_line);*/
+/*			m_p_lottie->renderSync(m_p_lottie->frameAtPos(counter), surface);*/
+			const Rml::byte* p_result = reinterpret_cast<Rml::byte*>(p_data);
+			data.reset(p_result);
+
+			dimensions.x = m_dimensions.x;
+			dimensions.y = m_dimensions.y;
+
+
+			return true;
+		};
+
+		this->texture.Set(attiribute_value_name, p_callback);
+
+		this->geometry.SetTexture(&this->texture);
+
+		return true;
+	}
+
+	void ElementLottie::UpdateRect()
+	{
+	}
+
+	void ElementLottie::Play(void)
+	{
+		if (this->m_p_raw_data == nullptr)
+			return;
+
+		static std::uint32_t current_frame = 0;
+		++current_frame;
+		current_frame = current_frame % this->m_p_lottie->totalFrame();
+		static float pos = 0.0f;
+		pos += 0.1f / this->m_p_lottie->frameRate();
+		if (pos >= 1.0f)
+			pos = 0.0f;
+
+		auto p_callback = [this](const String& name, UniquePtr<const byte[]>& data, Vector2i& dimensions) -> bool {
+			size_t bytes_per_line = m_dimensions.x * sizeof(std::uint32_t);
+			std::uint32_t* p_data = new std::uint32_t[bytes_per_line * m_dimensions.y];
+			this->m_p_raw_data = p_data;
+			rlottie::Surface surface(p_data, m_dimensions.x, m_dimensions.y, bytes_per_line);
+			m_p_lottie->renderSync(this->m_p_lottie->frameAtPos(pos), surface);
+
+			size_t total_bytes = m_dimensions.x * m_dimensions.y * 4;
+
+/*
+
+			for (int i = 0; i < total_bytes; ++i)
+			{
+				p_data[i] = p_data[i] << 8 | p_data[i] >> 24;
+			}
+*/
+			// temporary convertation, but need future fixes
+			for (int i = 0; i < total_bytes; ++i)
+			{
+				p_data[i] = p_data[i] << 8 | p_data[i] >> 24;
+			}
+
+/* not working well
+			for (int i = 0; i < total_bytes; i += 4) {
+				auto a = p_data[i + 3];
+				// compute only if alpha is non zero
+				if (a) {
+					auto r = p_data[i + 2];
+					auto g = p_data[i + 1];
+					auto b = p_data[i];
+
+					if (a != 255) {  // un premultiply
+						r = (r * 255) / a;
+						g = (g * 255) / a;
+						b = (b * 255) / a;
+
+						p_data[i] = r;
+						p_data[i + 1] = g;
+						p_data[i + 2] = b;
+
+					}
+					else {
+						// only swizzle r and b
+						p_data[i] = r;
+						p_data[i + 2] = b;
+					}
+				}
+			}*/
+			const Rml::byte* p_result = reinterpret_cast<Rml::byte*>(p_data);
+			data.reset(p_result);
+
+			dimensions.x = m_dimensions.x;
+			dimensions.y = m_dimensions.y;
+
+
+			return true;
+		};
+
+		this->texture.Set(this->m_file_name, p_callback);
+
+		this->geometry.SetTexture(&this->texture);
+	}
+}