Added drag and tooltip to sample#2 HelloGUI

Bin/Data/LuaScripts/02_HelloGUI.lua

@@ -3,11 +3,20 @@
 --     - Creation of controls and building a UI hierarchy
 --     - Loading UI style from XML and applying it to controls
 --     - Handling of global and per-control events
+-- For more advanced users (beginners can skip this section):
+--     - Dragging UIElements
+--     - Displaying tooltips
+--     - Accessing available Events data (eventData)
 
 require "LuaScripts/Utilities/Sample"
 
 local window = nil
 
+local cache = GetCache()
+local engine = GetEngine()
+local input = GetInput()
+local ui = GetUI()
+
 function Start()
     -- Execute the common startup for samples
     SampleStart()
@@ -27,6 +36,9 @@ function Start()
     -- Create and add some controls to the Window
     InitControls()
 
+    -- Create a draggable Fish
+    CreateDraggableFish()
+
     SubscribeToEvents()
 end
 
@@ -127,3 +139,46 @@ function HandleControlClicked(eventType, eventData)
     -- Update the Window's title text
     windowTitle.text = "Hello " .. name .. "!"
 end
+
+
+-----------------------------------------------------  Dragging / Tooltips  ----------------------------------------------
+
+local dragBeginPosition = IntVector2(0, 0)
+
+function CreateDraggableFish()
+    -- Create a draggable Fish button
+    local draggableFish = ui.root:CreateChild("Button", "Fish")
+    draggableFish.texture = cache:GetResource("Texture2D", "Textures/UrhoDecal.dds") -- Set texture
+    draggableFish.blendMode = BLEND_ADD
+    draggableFish:SetSize(128, 128)
+    draggableFish:SetPosition((GetGraphics().width - draggableFish.width) / 2, 200)
+
+    -- Add a tooltip to Fish button
+    local toolTip = draggableFish:CreateChild("ToolTip")
+    toolTip.position = IntVector2(draggableFish.width + 5, draggableFish.width/2) -- Slightly offset from fish
+    local textHolder = toolTip:CreateChild("BorderImage")
+    textHolder:SetStyle("ToolTipBorderImage")
+    local toolTipText = textHolder:CreateChild("Text")
+    toolTipText:SetStyle("ToolTipText")
+    toolTipText.text = "Please drag me!"
+
+    -- Subscribe draggableFish to Drag Events (in order to make it draggable)
+    -- See "Event list" in documentation's Main Page for reference on available Events and their eventData
+    SubscribeToEvent(draggableFish, "DragBegin", "HandleDragBegin")
+    SubscribeToEvent(draggableFish, "DragMove", "HandleDragMove")
+    SubscribeToEvent(draggableFish, "DragEnd", "HandleDragEnd")
+end
+
+function HandleDragBegin(eventType, eventData)
+    -- Get UIElement relative position where input (touch or click) occured (top-left = IntVector2(0,0))
+    dragBeginPosition = IntVector2(eventData:GetInt("ElementX"), eventData:GetInt("ElementY"))
+end
+
+function HandleDragMove(eventType, eventData)
+    local dragCurrentPosition = IntVector2(eventData:GetInt("X"), eventData:GetInt("Y"))
+    local draggedElement = eventData:GetPtr("UIElement", "Element")
+    draggedElement:SetPosition(dragCurrentPosition - dragBeginPosition)
+end
+
+function HandleDragEnd(eventType, eventData) -- For reference (not used here)
+end

Bin/Data/Scripts/02_HelloGUI.as

@@ -3,6 +3,10 @@
 //     - Creation of controls and building a UI hierarchy
 //     - Loading UI style from XML and applying it to controls
 //     - Handling of global and per-control events
+// For more advanced users (beginners can skip this section):
+//     - Dragging UIElements
+//     - Displaying tooltips
+//     - Accessing available Events data (eventData)
 
 #include "Scripts/Utilities/Sample.as"
 
@@ -25,6 +29,9 @@ void Start()
     // Initialize Window
     InitWindow();
 
+    // Create a draggable Fish
+    CreateDraggableFish();
+
     // Create and add some controls to the Window
     InitControls();
 
@@ -132,3 +139,50 @@ void HandleControlClicked(StringHash eventType, VariantMap& eventData)
     // Update the Window's title text
     windowTitle.text = "Hello " + name + "!";
 }
+
+
+//-----------------------------------------------------  Draging / Tooltips  ----------------------------------------------
+
+IntVector2 dragBeginPosition = IntVector2(0, 0);
+
+void CreateDraggableFish()
+{
+    // Create a draggable Fish button
+    Button@ draggableFish = ui.root.CreateChild("Button", "Fish");
+    draggableFish.texture = cache.GetResource("Texture2D", "Textures/UrhoDecal.dds"); // Set texture
+    draggableFish.blendMode = BLEND_ADD;
+    draggableFish.SetSize(128, 128);
+    draggableFish.SetPosition((graphics.width - draggableFish.width) / 2, 200);
+
+    // Add a tooltip to Fish button
+    ToolTip@ toolTip = draggableFish.CreateChild("ToolTip");
+    toolTip.position = IntVector2(draggableFish.width + 5, draggableFish.width/2); // slightly offset from fish
+    BorderImage@ textHolder = toolTip.CreateChild("BorderImage");
+    textHolder.SetStyle("ToolTipBorderImage");
+    Text@ toolTipText = textHolder.CreateChild("Text");
+    toolTipText.SetStyle("ToolTipText");
+    toolTipText.text = "Please drag me!";
+
+    // Subscribe draggableFish to Drag Events (in order to make it draggable)
+    // See "Event list" in documentation's Main Page for reference on available Events and their eventData
+    SubscribeToEvent(draggableFish, "DragBegin", "HandleDragBegin");
+    SubscribeToEvent(draggableFish, "DragMove", "HandleDragMove");
+    SubscribeToEvent(draggableFish, "DragEnd", "HandleDragEnd");
+}
+
+void HandleDragBegin(StringHash eventType, VariantMap& eventData)
+{
+    // Get UIElement relative position where input (touch or click) occured (top-left = IntVector2(0,0))
+    dragBeginPosition = IntVector2(eventData["ElementX"].GetInt(), eventData["ElementY"].GetInt());
+}
+
+void HandleDragMove(StringHash eventType, VariantMap& eventData)
+{
+    IntVector2 dragCurrentPosition = IntVector2(eventData["X"].GetInt(), eventData["Y"].GetInt());
+    UIElement@ draggedElement = eventData["Element"].GetUIElement();
+    draggedElement.position = dragCurrentPosition - dragBeginPosition;
+}
+
+void HandleDragEnd(StringHash eventType, VariantMap& eventData) // For reference (not used here)
+{
+}

Source/Samples/02_HelloGUI/HelloGUI.cpp

@@ -21,13 +21,19 @@
 //
 
 #include "Button.h"
+#include "BorderImage.h"
 #include "CheckBox.h"
 #include "CoreEvents.h"
 #include "Engine.h"
+#include "Graphics.h"
 #include "Input.h"
 #include "LineEdit.h"
+#include "ResourceCache.h"
 #include "Text.h"
+#include "Texture2D.h"
+#include "ToolTip.h"
 #include "UI.h"
+#include "UIElement.h"
 #include "UIEvents.h"
 #include "Window.h"
 
@@ -62,6 +68,9 @@ void HelloGUI::Start()
     // Initialize Window
     InitWindow();
 
+    // Create a draggable Fish
+    CreateDraggableFish();
+
     // Create and add some controls to the Window
     InitControls();
 
@@ -167,3 +176,58 @@ void HelloGUI::HandleControlClicked(StringHash eventType, VariantMap& eventData)
     // Update the Window's title text
     windowTitle->SetText("Hello " + name + "!");
 }
+
+
+//-----------------------------------------------------  Dragging / Tooltips  ----------------------------------------------
+
+IntVector2 dragBeginPosition = IntVector2(0, 0);
+
+void HelloGUI::CreateDraggableFish()
+{
+    ResourceCache* cache = GetSubsystem<ResourceCache>();
+    Graphics* graphics = GetSubsystem<Graphics>();
+
+    // Create a draggable Fish button
+    Button* draggableFish = new Button(context_);
+    draggableFish->SetTexture(cache->GetResource<Texture2D>("Textures/UrhoDecal.dds")); // Set texture
+    draggableFish->SetBlendMode(BLEND_ADD);
+    draggableFish->SetSize(128, 128);
+    draggableFish->SetPosition((graphics->GetWidth() - draggableFish->GetWidth()) / 2, 200);
+    draggableFish->SetName("Fish");
+    uiRoot_->AddChild(draggableFish);
+
+    // Add a tooltip to Fish button
+    ToolTip* toolTip = new ToolTip(context_);
+    draggableFish->AddChild(toolTip);
+    toolTip->SetPosition(IntVector2(draggableFish->GetWidth() + 5, draggableFish->GetWidth() / 2)); // slightly offset from close button
+    BorderImage* textHolder = new BorderImage(context_);
+    toolTip->AddChild(textHolder);
+    textHolder->SetStyle("ToolTipBorderImage");
+    Text* toolTipText = new Text(context_);
+    textHolder->AddChild(toolTipText);
+    toolTipText->SetStyle("ToolTipText");
+    toolTipText->SetText("Please drag me!");
+
+    // Subscribe draggableFish to Drag Events (in order to make it draggable)
+    // See "Event list" in documentation's Main Page for reference on available Events and their eventData
+    SubscribeToEvent(draggableFish, E_DRAGBEGIN, HANDLER(HelloGUI, HandleDragBegin));
+    SubscribeToEvent(draggableFish, E_DRAGMOVE, HANDLER(HelloGUI, HandleDragMove));
+    SubscribeToEvent(draggableFish, E_DRAGEND, HANDLER(HelloGUI, HandleDragEnd));
+}
+
+void HelloGUI::HandleDragBegin(StringHash eventType, VariantMap& eventData)
+{
+    // Get UIElement relative position where input (touch or click) occured (top-left = IntVector2(0,0))
+    dragBeginPosition = IntVector2(eventData["ElementX"].GetInt(), eventData["ElementY"].GetInt());
+}
+
+void HelloGUI::HandleDragMove(StringHash eventType, VariantMap& eventData)
+{
+    IntVector2 dragCurrentPosition = IntVector2(eventData["X"].GetInt(), eventData["Y"].GetInt());
+    UIElement* draggedElement = static_cast<UIElement*>(eventData["Element"].GetPtr());
+    draggedElement->SetPosition(dragCurrentPosition - dragBeginPosition);
+}
+
+void HelloGUI::HandleDragEnd(StringHash eventType, VariantMap& eventData) // For reference (not used here)
+{
+}

Source/Samples/02_HelloGUI/HelloGUI.h

@@ -36,6 +36,10 @@ class Window;
 ///     - Creation of controls and building a UI hierarchy
 ///     - Loading UI style from XML and applying it to controls
 ///     - Handling of global and per-control events
+/// For more advanced users (beginners can skip this section):
+///     - Dragging UIElements
+///     - Displaying tooltips
+///     - Accessing available Events data (eventData)
 class HelloGUI : public Sample
 {
     OBJECT(HelloGUI);
@@ -58,6 +62,14 @@ private:
     void HandleControlClicked(StringHash eventType, VariantMap& eventData);
     /// Handle close button pressed and released.
     void HandleClosePressed(StringHash eventType, VariantMap& eventData);
+    /// Create a draggable fish button
+    void CreateDraggableFish();
+    /// Handle drag begin
+    void HandleDragBegin(StringHash eventType, VariantMap& eventData);
+    /// Handle drag move
+    void HandleDragMove(StringHash eventType, VariantMap& eventData);
+    /// Handle drag end
+    void HandleDragEnd(StringHash eventType, VariantMap& eventData);
 
     /// The Window.
     SharedPtr<Window> window_;