Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Update the transform sample: Add some 3d cubes.

Michael Ragazzon 6 years ago
parent
f81e52f901
commit
95bd871b31
2 changed files with 180 additions and 56 deletions
Unified View Show Diff Stats
  1. 138 39
      Samples/basic/transform/data/transform.rml
  2. 42 17
      Samples/basic/transform/src/main.cpp

+ 138 - 39
Samples/basic/transform/data/transform.rml
View File 

@@ -1,46 +1,133 @@
 
 <rml>
 
 <rml>
 
 <head>
 
 <head>
 
-	<link type="text/template" href="../../../assets/window.rml"/>
 
-	<title>Transform Sample</title>
 
-	<style>
 
-		body
 
-		{
 
-			width: 350px;
 
-			height: 300px;
 
-
 
-			perspective: 800px;
 
-		}
 
-		
-		/* Hide the window icon. */
 
-		div#title_bar div#icon
 
-		{
 
-			display: none;
 
-		}
 
-
 
-		div#title_bar:hover
 
-		{
 
-			transform: rotate3d(1, 0, 0, 25) scale(0.5);
 
-			transform-origin: center bottom;
 
-		}
 
-
 
-		spacer
 
-		{
 
-			display: inline-block;
 
-			width: 25px;
 
-		}
 
-
 
-		scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 
-		{
 
-			transform: translateZ(10px);
 
-		}
 
-
 
-		p
 
-		{
 
-			transform: translateZ(10px);
 
-		}
 
-	</style>
 
+<link type="text/template" href="../../../assets/window.rml"/>
 
+<title>Transform Sample</title>
 
+<style>
 
+body
 
+{
 
+	width: 550px;
 
+	height: 500px;
 
+
 
+	/*transform: rotate3d(0, 1, 0, 30deg);*/
 
+}
 
+
 
+/* Hide the window icon. */
 
+div#title_bar div#icon
 
+{
 
+	display: none;
 
+}
 
+
 
+div#title_bar:hover
 
+{
 
+	transform: rotate3d(1, 0, 0, 25) scale(1.1);
 
+	transform-origin: center bottom;
 
+}
 
+
 
+spacer
 
+{
 
+	display: inline-block;
 
+	width: 25px;
 
+}
 
+scrollbarvertical sliderbar,scrollbarvertical sliderbar
 
+{
 
+	/*transform: translateZ(0px);*/
 
+}
 
+scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
 
+{
 
+	/*transform: translateZ(10px);*/
 
+}
 
+
 
+
 
+/* Perspective cubes based on:
 
+   https://developer.mozilla.org/en-US/docs/Web/CSS/perspective */
 
+
 
+.pers250 {
 
+	perspective: 250px;
 
+}
 
+
 
+.pers350 {
 
+	perspective: 350px;
 
+}
 
+
 
+.pers500 {
 
+	perspective: 500px;
 
+}
 
+
 
+.pers650 {
 
+	perspective: 650px;
 
+}
 
+
 
+.container {
 
+	width: 200px;
 
+	height: 200px;
 
+	margin: 75px auto;
 
+	border: none;
 
+	background-color: #a003;
 
+}
 
+
 
+.cube {
 
+	width: 100%;
 
+	height: 100%;
 
+	backface-visibility: visible;
 
+	perspective-origin: 150% 150%;
 
+}
 
+
 
+.face {
 
+	display: block;
 
+	position: absolute;
 
+	width: 100px;
 
+	height: 100px;
 
+	border: none;
 
+	line-height: 100px;
 
+	font-size: 60px;
 
+	color: white;
 
+	text-align: center;
 
+}
 
+
 
+/* Define each face based on direction */
 
+.front {
 
+	background: rgba(0, 0, 0, 160);
 
+	transform: translateZ(50px);
 
+}
 
+.back {
 
+	background: rgba(0, 255, 0, 255);
 
+	color: black;
 
+	transform: rotateY(180deg) translateZ(50px);
 
+}
 
+.right {
 
+	background: rgba(196, 0, 0, 200);
 
+	transform: rotateY(90deg) translateZ(50px);
 
+}
 
+.left {
 
+	background: rgba(0, 0, 196, 200);
 
+	transform: rotateY(-90deg) translateZ(50px);
 
+}
 
+.top {
 
+	background: rgba(196, 196, 0, 200);
 
+	transform: rotateX(90deg) translateZ(50px);
 
+}
 
+.bottom {
 
+	background: rgba(196, 0, 196, 200);
 
+	transform: rotateX(-90deg) translateZ(50px);
 
+}
 
+</style>
 
 </head>
 
 </head>
 
 <body template="window">
 
 <body template="window">
 
+
 
+<div class="container">
 
+	<div class="cube pers650">
 
+		<div class="face back">6</div>
 
+		<div class="face top">5</div>
 
+		<div class="face left">4</div>
 
+		<div class="face bottom">3</div>
 
+		<div class="face right">2</div>
 
+		<div class="face front">1</div>
 
+	</div>
 
+	Perspective: 650px.
 
+</div>
 
+
 
+<p>Press 'space' to toggle rotation.</p>
 
+
 
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
 
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
 
 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
 
 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
 
@@ -75,6 +162,18 @@ laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
 
 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
 
 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
 
 commodo consequat.</p>
 
 commodo consequat.</p>
 
 
 
+<div class="container">
 
+	<div class="cube pers250">
 
+		<div class="face back">6</div>
 
+		<div class="face top">5</div>
 
+		<div class="face left">4</div>
 
+		<div class="face bottom">3</div>
 
+		<div class="face right">2</div>
 
+		<div class="face front">1</div>
 
+	</div>
 
+	Perspective: 250px.
 
+</div>
 
+
 
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
 
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
 
 molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
 
 molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>

+ 42 - 17
Samples/basic/transform/src/main.cpp
View File 

@@ -36,7 +36,9 @@
 
 #include <cmath>
 
 #include <cmath>
 
 #include <sstream>
 
 #include <sstream>
 
 
 
-class DemoWindow
 
+static bool run_rotate = true;
 
+
 
+class DemoWindow : public Rml::Core::EventListener
 
 {
 
 {
 
 public:
 
 public:
 
 	DemoWindow(const Rml::Core::String &title, const Rml::Core::Vector2f &position, Rml::Core::Context *context)
 
 	DemoWindow(const Rml::Core::String &title, const Rml::Core::Vector2f &position, Rml::Core::Context *context)
 
@@ -87,12 +89,29 @@ public:
 
 		}
 
 		}
 
 	}
 
 	}
 
 
 
+	void ProcessEvent(Rml::Core::Event& ev) override
 
+	{
 
+		if (ev == Rml::Core::EventId::Keydown)
 
+		{
 
+			Rml::Core::Input::KeyIdentifier key_identifier = (Rml::Core::Input::KeyIdentifier) ev.GetParameter< int >("key_identifier", 0);
 
+
 
+			if (key_identifier == Rml::Core::Input::KI_SPACE)
 
+			{
 
+				run_rotate = !run_rotate;
 
+			}
 
+			else if (key_identifier == Rml::Core::Input::KI_ESCAPE)
 
+			{
 
+				Shell::RequestExit();
 
+			}
 
+		}
 
+	}
 
+
 
 private:
 
 private:
 
 	Rml::Core::ElementDocument *document;
 
 	Rml::Core::ElementDocument *document;
 
 };
 
 };
 
 
 
 Rml::Core::Context* context = nullptr;
 
 Rml::Core::Context* context = nullptr;
 
-ShellRenderInterfaceExtensions *shell_renderer;
 
+ShellRenderInterfaceExtensions* shell_renderer;
 
 DemoWindow* window_1 = nullptr;
 
 DemoWindow* window_1 = nullptr;
 
 DemoWindow* window_2 = nullptr;
 
 DemoWindow* window_2 = nullptr;
 
 
 
@@ -104,16 +123,19 @@ void GameLoop()
 
 	context->Render();
 
 	context->Render();
 
 	shell_renderer->PresentRenderBuffer();
 
 	shell_renderer->PresentRenderBuffer();
 
 
 
-	static float deg = 0;
 
-	Rml::Core::SystemInterface* system_interface = Rml::Core::GetSystemInterface();
 
-	deg = (float)std::fmod(system_interface->GetElapsedTime() * 30.0, 360.0);
 
-	if (window_1)
 
-	{
 
-		window_1->SetRotation(deg);
 
-	}
 
-	if (window_2)
 
+	double t = Rml::Core::GetSystemInterface()->GetElapsedTime();
 
+	static double t_prev = t;
 
+	double dt = t - t_prev;
 
+	t_prev = t;
 
+
 
+	if(run_rotate)
 
 	{
 
 	{
 
-		window_2->SetRotation(deg);
 
+		static float deg = 0;
 
+		deg = (float)std::fmod(deg + dt * 50.0, 360.0);
 
+		if (window_1)
 
+			window_1->SetRotation(deg);
 
+		if (window_2)
 
+			window_2->SetRotation(deg);
 
 	}
 
 	}
 
 }
 
 }
 
 
 
@@ -134,12 +156,15 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	RMLUI_UNUSED(argv);
 
 	RMLUI_UNUSED(argv);
 
 #endif
 
 #endif
 
 
 
+	constexpr int width = 1600;
 
+	constexpr int height = 1000;
 
+
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
 
 	ShellRenderInterfaceOpenGL opengl_renderer;
 
 	shell_renderer = &opengl_renderer;
 
 	shell_renderer = &opengl_renderer;
 
 
 
 	// Generic OS initialisation, creates a window and attaches OpenGL.
 
 	// Generic OS initialisation, creates a window and attaches OpenGL.
 
 	if (!Shell::Initialise() ||
 
 	if (!Shell::Initialise() ||
 
-		!Shell::OpenWindow("Transform Sample", shell_renderer, 1024, 768, true))
 
+		!Shell::OpenWindow("Transform Sample", shell_renderer, width, height, true))
 
 	{
 
 	{
 
 		Shell::Shutdown();
 
 		Shell::Shutdown();
 
 		return -1;
 
 		return -1;
 
@@ -147,7 +172,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 
 
 	// RmlUi initialisation.
 
 	// RmlUi initialisation.
 
 	Rml::Core::SetRenderInterface(&opengl_renderer);
 
 	Rml::Core::SetRenderInterface(&opengl_renderer);
 
-	opengl_renderer.SetViewport(1024,768);
 
+	opengl_renderer.SetViewport(width, height);
 
 
 
 	ShellSystemInterface system_interface;
 
 	ShellSystemInterface system_interface;
 
 	Rml::Core::SetSystemInterface(&system_interface);
 
 	Rml::Core::SetSystemInterface(&system_interface);
 
@@ -155,7 +180,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Rml::Core::Initialise();
 
 	Rml::Core::Initialise();
 
 
 
 	// Create the main RmlUi context and set it on the shell's input layer.
 
 	// Create the main RmlUi context and set it on the shell's input layer.
 
-	context = Rml::Core::CreateContext("main", Rml::Core::Vector2i(1024, 768));
 
+	context = Rml::Core::CreateContext("main", Rml::Core::Vector2i(width, height));
 
 	if (context == nullptr)
 
 	if (context == nullptr)
 
 	{
 
 	{
 
 		Rml::Core::Shutdown();
 
 		Rml::Core::Shutdown();
 
@@ -170,12 +195,12 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 
 
 	Shell::LoadFonts("assets/");
 
 	Shell::LoadFonts("assets/");
 
 
 
-	window_1 = new DemoWindow("Orthographic transform", Rml::Core::Vector2f(81, 200), context);
 
+	window_1 = new DemoWindow("Orthographic transform", Rml::Core::Vector2f(120, 200), context);
 
 	if (window_1)
 
 	if (window_1)
 
 	{
 
 	{
 
-		window_1->SetPerspective(100000);
 
+		context->GetRootElement()->AddEventListener(Rml::Core::EventId::Keydown, window_1);
 
 	}
 
 	}
 
-	window_2 = new DemoWindow("Perspective transform", Rml::Core::Vector2f(593, 200), context);
 
+	window_2 = new DemoWindow("Perspective transform", Rml::Core::Vector2f(900, 200), context);
 
 	if (window_2)
 
 	if (window_2)
 
 	{
 
 	{
 
 		window_2->SetPerspective(800);
 
 		window_2->SetPerspective(800);