Piccolo Snippets

From eqqon

Revision as of 18:45, 6 November 2007

Piccolo

The 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

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!

    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);
        }
    }