UI Toolkit

Reply

Level 1

Level 1
bitzaros
Posts: 11
Registered: ‎03-07-2010
Message 1 of 7 (220 Views)
Accepted Solution

drag n drop

Hello, I am trying to make a very simple application: I just want to have 3 buttons on the screen with a background image each, and be able to drag them on the screen and when I click in one of them, I want to change the image to another... How can I do this? I have done it in C# in Visual Studio 2010 for a windows application but here I'm having trouble handling the events... Could someone please help me with the code in order to make the above?

 

any help will be greatly appreciated!!

 

Please use plain text.

Level 2

Level 2
rey5137
Posts: 24
Registered: ‎19-04-2012
Message 2 of 7 (214 Views)

Re: drag n drop

Here is my sample code :

using System;
using System.Collections.Generic;

using Sce.Pss.Core;
using Sce.Pss.Core.Environment;
using Sce.Pss.Core.Graphics;
using Sce.Pss.Core.Input;
using Sce.Pss.HighLevel.UI;

namespace Test
{
	public class AppMain
	{
		private static GraphicsContext graphics;	
		private static CustomPanel panel;
		private static Button button;
		private static bool drag;
		private static Vector2 memo_pos;
		
		public static void Main (string[] args)
		{
			Initialize ();

			while (true) {
				SystemEvents.CheckEvents ();
				Update ();
				Render ();
			}
		}

		public static void Initialize ()
		{
			// Set up the graphics system
			graphics = new GraphicsContext ();
			
			UISystem.Initialize (graphics);
			
			Scene scene = new Scene();
			panel = new CustomPanel();
			panel.SetSize(960, 544);
			panel.TouchEventReceived += PanelTouchEventReceived;
			
			button = new Button();
			button.Text = "Button";
			button.SetPosition(100, 100);
			panel.AddChildLast(button);
			drag = false;
			
			
			scene.RootWidget.AddChildLast(panel);
			
			UISystem.SetScene (scene, null);
		}

		static void PanelTouchEventReceived (object sender, TouchEventArgs e)
		{
			TouchEvent touchEvent = e.TouchEvents.PrimaryTouchEvent;	
			switch(touchEvent.Type){
			case TouchEventType.Down:
				if(button.HitTest(touchEvent.WorldPosition)){
					drag = true;			
					memo_pos = touchEvent.WorldPosition;
				}
				break;
			case TouchEventType.Up:
				if(drag)
					drag = false;
				Console.WriteLine(touchEvent.Type.ToString());
				break;
			case TouchEventType.Move:
				if(drag){
					button.X += touchEvent.WorldPosition.X - memo_pos.X;
					button.Y += touchEvent.WorldPosition.Y - memo_pos.Y;
					memo_pos = touchEvent.WorldPosition;
				}
				break;				
			}
			
		}
		
		public static void Update ()
		{
			// Query gamepad for current state
			var gamePadData = GamePad.GetData (0);
			
			List<TouchData> list = Touch.GetData (0);			
			UISystem.Update (list);
		}

		public static void Render ()
		{
			// Clear the screen
			graphics.SetClearColor (0.0f, 0.0f, 0.0f, 0.0f);
			graphics.Clear ();
			
			UISystem.Render ();
			
			// Present the screen
			graphics.SwapBuffers ();
		}
	}
	
	class CustomPanel : Panel {
		
		public CustomPanel(){
			HookChildTouchEvent = true;			
		}
	}
	
}

 It has a button in scene and you can drag it. Some main points:

- scene.RootWidget can't receive touch event, so you need add those button into a panel and handle touch event of panel.

- You have to set panel's property HookChildTouchEvent = true. That way, your panel can receive touch event of button. Unfortunately, this property is protected and default is false, so you need a CustomPanel extends from Panel and set this property in constructor.

Please use plain text.

Level 1

Level 1
bitzaros
Posts: 11
Registered: ‎03-07-2010
Message 3 of 7 (210 Views)

Re: drag n drop


rey5137 wrote:

Here is my sample code :

using System;
using System.Collections.Generic;

using Sce.Pss.Core;
using Sce.Pss.Core.Environment;
using Sce.Pss.Core.Graphics;
using Sce.Pss.Core.Input;
using Sce.Pss.HighLevel.UI;

namespace Test
{
	public class AppMain
	{
		private static GraphicsContext graphics;	
		private static CustomPanel panel;
		private static Button button;
		private static bool drag;
		private static Vector2 memo_pos;
		
		public static void Main (string[] args)
		{
			Initialize ();

			while (true) {
				SystemEvents.CheckEvents ();
				Update ();
				Render ();
			}
		}

		public static void Initialize ()
		{
			// Set up the graphics system
			graphics = new GraphicsContext ();
			
			UISystem.Initialize (graphics);
			
			Scene scene = new Scene();
			panel = new CustomPanel();
			panel.SetSize(960, 544);
			panel.TouchEventReceived += PanelTouchEventReceived;
			
			button = new Button();
			button.Text = "Button";
			button.SetPosition(100, 100);
			panel.AddChildLast(button);
			drag = false;
			
			
			scene.RootWidget.AddChildLast(panel);
			
			UISystem.SetScene (scene, null);
		}

		static void PanelTouchEventReceived (object sender, TouchEventArgs e)
		{
			TouchEvent touchEvent = e.TouchEvents.PrimaryTouchEvent;	
			switch(touchEvent.Type){
			case TouchEventType.Down:
				if(button.HitTest(touchEvent.WorldPosition)){
					drag = true;			
					memo_pos = touchEvent.WorldPosition;
				}
				break;
			case TouchEventType.Up:
				if(drag)
					drag = false;
				Console.WriteLine(touchEvent.Type.ToString());
				break;
			case TouchEventType.Move:
				if(drag){
					button.X += touchEvent.WorldPosition.X - memo_pos.X;
					button.Y += touchEvent.WorldPosition.Y - memo_pos.Y;
					memo_pos = touchEvent.WorldPosition;
				}
				break;				
			}
			
		}
		
		public static void Update ()
		{
			// Query gamepad for current state
			var gamePadData = GamePad.GetData (0);
			
			List<TouchData> list = Touch.GetData (0);			
			UISystem.Update (list);
		}

		public static void Render ()
		{
			// Clear the screen
			graphics.SetClearColor (0.0f, 0.0f, 0.0f, 0.0f);
			graphics.Clear ();
			
			UISystem.Render ();
			
			// Present the screen
			graphics.SwapBuffers ();
		}
	}
	
	class CustomPanel : Panel {
		
		public CustomPanel(){
			HookChildTouchEvent = true;			
		}
	}
	
}

 It has a button in scene and you can drag it. Some main points:

- scene.RootWidget can't receive touch event, so you need add those button into a panel and handle touch event of panel.

- You have to set panel's property HookChildTouchEvent = true. That way, your panel can receive touch event of button. Unfortunately, this property is protected and default is false, so you need a CustomPanel extends from Panel and set this property in constructor.


 

thank you very much my friend!!! I will try your code tonight!!! If I have any questions I will let you know!

 

Please use plain text.

Level 1

Level 1
bitzaros
Posts: 11
Registered: ‎03-07-2010
Message 4 of 7 (207 Views)

Re: drag n drop

Your code works perfectly!!! However, I wanted to add a second button (button2), so I created a second panel (panel2)... I added the button2 to the panel2 and created a similar function like yours to handle the touch events... But, when I ran the application and tried to drag the 2nd button, it dragged the 1st!!! I may have done something wrong ... (definitely done something wrong)... 

Please use plain text.

Level 3

Level 3
niwrA
Posts: 152
Registered: ‎31-07-2008
Message 5 of 7 (200 Views)

Re: drag n drop

Why do you need two panels, and do they overlap?

 

I also wonder if you can't just handle the drag events by hooking up to events on the button directly? You'd only need to have them on the panel level I think if you also need to be able to drag outside of the buttons? 

 

Just guessing.

Please use plain text.

Level 2

Level 2
rey5137
Posts: 24
Registered: ‎19-04-2012
Message 6 of 7 (192 Views)

Re: drag n drop

You can add more button into panel, and you need change the event handler of panel a little to determine which button is dragged. The main point of using panel like i told before is receive touch Event in whole scene. And If you handle event of button directly, some case you move cursor too fast and it goes out of button, then button can't receive a touch event.
Please use plain text.

Level 1

Level 1
bitzaros
Posts: 11
Registered: ‎03-07-2010
Message 7 of 7 (190 Views)

Re: drag n drop

[ Edited ]

it worked... I created a panel for each button and now everything works fine!!! thanks to all for your help!!!

 

One final question: I am trying to play an intro video for my application. I have the file in AVI format.... Which function do I use to show it when my application starts?

Please use plain text.
Announcements

Welcome to the PlayStation Mobile Developer Forums


This is a community for the discussion of technical topics with other developers and SCE engineers. Posting ideas/requests are also appreciated. Join the discussion!

PlayStation®Mobile開発者フォーラムでは世界中の開発者の皆様と一緒に、議論や情報交換が可能です。SCEも議論に参加し、皆様の開発をサポートします。アイデアやリクエストも大歓迎です。ぜひご参加ください。

PSM Developer Registration (for free) on PSM DevPortal is required to post on the forum.
Please sign out then sign in again to the forum and PSM DevPortal after you have completed the registration.

フォーラムへ投稿をするにはPSM DevPortalへの登録(無料)が必要です。
登録後はフォーラムと PSM DevPortalを一度ログアウトし、再度ログインしてください。