Piccolo Snippets - Revision history

Henon: /* Tips and Tricks */

2007-11-08T10:55:15Z

Tips and Tricks

← Older revision		Revision as of 10:55, 8 November 2007
Line 2:		Line 2:
	The [http://www.cs.umd.edu/hcil/jazz/index.shtml Piccolo Toolkit] is a structured 2D graphics framework with striking visual effects like '''zooming''', '''animation''' and '''multiple representations'''. With Piccolo it is very easy to build Zoomable User Interfaces (ZUIs). A ZUI is a user interface that is able to present highly complex visualizations on a traditional computer display without restrictions by the screen resolution. By letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview it is intuitively interactive and understandable.		The [http://www.cs.umd.edu/hcil/jazz/index.shtml Piccolo Toolkit] is a structured 2D graphics framework with striking visual effects like '''zooming''', '''animation''' and '''multiple representations'''. With Piccolo it is very easy to build Zoomable User Interfaces (ZUIs). A ZUI is a user interface that is able to present highly complex visualizations on a traditional computer display without restrictions by the screen resolution. By letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview it is intuitively interactive and understandable.

-	== Tips and Tricks ==	+	== Tips and Tricks (for Piccolo.NET 1.2)==
	=== Keyboard Focus ===		=== Keyboard Focus ===
	By default the events '''KeyDown''', '''KeyPressed''' and '''KeyUp''' are not called for any Piccolo node. To solve this problem all you need to do is add the following event handler to canvas.Layer:		By default the events '''KeyDown''', '''KeyPressed''' and '''KeyUp''' are not called for any Piccolo node. To solve this problem all you need to do is add the following event handler to canvas.Layer:

Henon: /* Useful Piccolo Extensions */

2007-11-08T10:53:51Z

Useful Piccolo Extensions

← Older revision		Revision as of 10:53, 8 November 2007
Line 11:		Line 11:

	== Useful Piccolo Extensions ==		== Useful Piccolo Extensions ==
		+	=== Click Controller ===
		+	It is quite annoying that the Piccolo toolkit does not differentiate between dragging and clicking. So when I register an event handler for the Camera.Click-event I get clicks even if the mouse-down-location is far away from the mouse-up-location potentially interfering with any dragging controllers. To overcome this problem I wrote this simple little click-controller which checks for '''real''' clicks on all three mouse buttons and fires a Click-event.
		+
		+	public class ClickController
		+	{
		+
		+	#region Constants
		+	public const float MAX_CLICK_DELTA = 2f;
		+	#endregion
		+
		+	#region Fields
		+	PointF[] m_last_mouse_down_array;
		+	#endregion
		+
		+	#region Events
		+	public event PInputEventHandler Click;
		+	#endregion
		+
		+	#region Constructors
		+	public ClickController(PCamera camera)
		+	{
		+	m_last_mouse_down_array = new PointF[3];
		+	camera.MouseDown += OnMouseDown;
		+	camera.MouseUp += OnMouseUp;
		+	}
		+	#endregion
		+
		+	public void OnMouseDown(object o, PInputEventArgs e)
		+	{
		+	Console.WriteLine("On Mouse Down");
		+	int i = ButtonToIndex(e.Button);
		+	if (i >= 0)
		+	m_last_mouse_down_array[i] = e.CanvasPosition;
		+	}
		+
		+	public void OnMouseUp(object sender, PInputEventArgs e)
		+	{
		+	if (Click != null && IsValidClickEvent(e))
		+	Click(sender, e);
		+	}
		+
		+	bool IsValidClickEvent(PInputEventArgs e)
		+	{
		+	int i = ButtonToIndex(e.Button);
		+	if (i < 0) return false;
		+	float delta_x, delta_y;
		+	delta_x = m_last_mouse_down_array[i].X - e.CanvasPosition.X;
		+	delta_y = m_last_mouse_down_array[i].Y - e.CanvasPosition.Y;
		+	if (delta_x * delta_x > MAX_CLICK_DELTA \|\| delta_y * delta_y > MAX_CLICK_DELTA)
		+	return false;
		+	return true;
		+	}
		+
		+	int ButtonToIndex(MouseButtons mb)
		+	{
		+	switch (mb)
		+	{
		+	case MouseButtons.Left:
		+	return 0;
		+	case MouseButtons.Middle:
		+	return 1;
		+	case MouseButtons.Right:
		+	return 2;
		+	default:
		+	return -1;
		+	}
		+	}
		+	}
		+
	=== Mouse Wheel Zoom ===		=== Mouse Wheel Zoom ===
	The class '''MouseWheelZoomController''' replaces Piccolo's not very intuitive default zoom event handler with a mouse wheel zoom event handler. Just instantiate it and mouse wheel zooming just works with your Piccolo canvas!		The class '''MouseWheelZoomController''' replaces Piccolo's not very intuitive default zoom event handler with a mouse wheel zoom event handler. Just instantiate it and mouse wheel zooming just works with your Piccolo canvas!

Henon: /* Piccolo */

2007-11-06T18:45:58Z

Piccolo

← Older revision		Revision as of 18:45, 6 November 2007
Line 1:		Line 1:
	== Piccolo ==		== Piccolo ==
-	The [http://www.cs.umd.edu/hcil/jazz/index.shtml Piccolo Toolkit] is a structured 2D graphics framework with striking visual effects like '''zooming''', '''animation''' and '''multiple representations'''. With Piccolo it is very easy to build Zoomable User Interfaces (ZUIs). A ZUI is a user interface that is able to present highly complex visualizations on a traditional computer display without restrictions by the screen resolution. By letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview it is intuitively interactive and understandable.	+	The [http://www.cs.umd.edu/hcil/jazz/index.shtml Piccolo Toolkit] is a structured 2D graphics framework with striking visual effects like '''zooming''', '''animation''' and '''multiple representations'''. With Piccolo it is very easy to build Zoomable User Interfaces (ZUIs). A ZUI is a user interface that is able to present highly complex visualizations on a traditional computer display without restrictions by the screen resolution. By letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview it is intuitively interactive and understandable.
		+
		+	== Tips and Tricks ==
		+	=== Keyboard Focus ===
		+	By default the events '''KeyDown''', '''KeyPressed''' and '''KeyUp''' are not called for any Piccolo node. To solve this problem all you need to do is add the following event handler to canvas.Layer:
		+
		+	canvas.Layer.MouseMove += delegate(object o, PInputEventArgs e) { e.InputManager.KeyboardFocus = e.Path; };
		+
		+	This updates the keyboard focus to which the InputManager is dispatching keyboard events whenever the mouse is moved. The keyboard events will be called for every node that is under the cursor (represented by the PPickPath data structure) giving each node a chance to handle it. If you want to handle the keyboard events for all nodes in the same way then simply register your event handlers in canvas.Layer.

	== Useful Piccolo Extensions ==		== Useful Piccolo Extensions ==

Henon: /* Useful Piccolo Extensions */

2007-10-29T07:23:49Z

Useful Piccolo Extensions

← Older revision		Revision as of 07:23, 29 October 2007
Line 1:		Line 1:
-	= Useful Piccolo Extensions =	+	== Piccolo ==
-	== Mouse Wheel Zoom ==	+	The [http://www.cs.umd.edu/hcil/jazz/index.shtml Piccolo Toolkit] is a structured 2D graphics framework with striking visual effects like '''zooming''', '''animation''' and '''multiple representations'''. With Piccolo it is very easy to build Zoomable User Interfaces (ZUIs). A ZUI is a user interface that is able to present highly complex visualizations on a traditional computer display without restrictions by the screen resolution. By letting the user smoothly zoom in, to get more detailed information, and zoom out for an overview it is intuitively interactive and understandable.
		+
		+	== Useful Piccolo Extensions ==
		+	=== Mouse Wheel Zoom ===
	The class '''MouseWheelZoomController''' replaces Piccolo's not very intuitive default zoom event handler with a mouse wheel zoom event handler. Just instantiate it and mouse wheel zooming just works with your Piccolo canvas!		The class '''MouseWheelZoomController''' replaces Piccolo's not very intuitive default zoom event handler with a mouse wheel zoom event handler. Just instantiate it and mouse wheel zooming just works with your Piccolo canvas!

Henon: /* MouseWheelScrollController */

2007-10-29T07:12:09Z

MouseWheelScrollController

← Older revision		Revision as of 07:12, 29 October 2007
Line 1:		Line 1:
	= Useful Piccolo Extensions =		= Useful Piccolo Extensions =
-	== ~~MouseWheelScrollController~~ ==	+	== Mouse Wheel Zoom ==
-	~~This~~ class replaces Piccolo's default zoom event handler ~~which is not very attractive~~ with a mouse wheel zoom event handler. Just ~~instanciate~~ it ~~with your canvas' camera as parameter~~ and mouse wheel zooming just works!	+	The class '''MouseWheelZoomController''' replaces Piccolo's not very intuitive default zoom event handler with a mouse wheel zoom event handler. Just instantiate it and mouse wheel zooming just works with your Piccolo canvas!

	<pre>		<pre>

Henon: Piccolo Nuts and Bolts moved to Piccolo Snippets

2007-10-28T21:33:13Z

Piccolo Nuts and Bolts moved to Piccolo Snippets

← Older revision

Revision as of 21:33, 28 October 2007

Henon at 21:31, 28 October 2007

2007-10-28T21:31:57Z

← Older revision		Revision as of 21:31, 28 October 2007
Line 1:		Line 1:
-	= Piccolo ~~Nodes~~ =	+	= Useful Piccolo Extensions =
		+	== MouseWheelScrollController ==
		+	This class replaces Piccolo's default zoom event handler which is not very attractive with a mouse wheel zoom event handler. Just instanciate it with your canvas' camera as parameter and mouse wheel zooming just works!

-	== ~~PComposite~~ ==	+	<pre>
-	~~The PComposite node and all of it's Children act like a single PNode~~. ~~All user interaction~~, ~~even~~ if ~~it happened on a child node~~, ~~is handled by the composite node~~. ~~For instance~~, ~~if you add a PDragInputHandler to the composite and drag it all its children get dragged too~~.	+	public class MouseWheelZoomController
		+	{
		+	public static float MIN_SCALE = .0001f;
		+	public static float MAX_SCALE = 2500;
		+	PCamera camera;
		+
		+	public MouseWheelZoomController(PCamera camera)
		+	{
		+	this.camera = camera;
		+	camera.Canvas.ZoomEventHandler = null;
		+	camera.MouseWheel += OnMouseWheel;
		+	}
		+
		+	public void OnMouseWheel(object o, PInputEventArgs ea)
		+	{
		+	float currentScale = camera.ViewScale;
		+	float scaleDelta = (1.0f + (0.001f * ea.WheelDelta));
		+	float newScale = currentScale * scaleDelta;
		+	if (newScale < MIN_SCALE)
		+	{
		+	camera.ViewScale = MIN_SCALE;
		+	return;
		+	}
		+	if ((MAX_SCALE > 0) && (newScale > MAX_SCALE))
		+	{
		+	camera.ViewScale = MAX_SCALE;
		+	return;
		+	}
		+	PointF pos = ea.Position;
		+	camera.ScaleViewBy(scaleDelta, pos.X, pos.Y);
		+	}
		+	}
		+	</pre>

Henon: New page: = Piccolo Nodes = == PComposite == The PComposite node and all of it's Children act like a single PNode. All user interaction, even if it happened on a child node, is handled by the compo...

2007-10-27T12:25:49Z

New page: = Piccolo Nodes = == PComposite == The PComposite node and all of it's Children act like a single PNode. All user interaction, even if it happened on a child node, is handled by the compo...

New page

= Piccolo Nodes =

== PComposite ==
The PComposite node and all of it's Children act like a single PNode. All user interaction, even if it happened on a child node, is handled by the composite node. For instance, if you add a PDragInputHandler to the composite and drag it all its children get dragged too.