Piccolo zoomable interface, how to change text when zooming

Question

I'm experimenting with some Piccolo to create a zoomable interface.

I'm creating a rectangle on a canvas with some PText on it. Now when zooming, I want to change the text to something different.

I've done this in my initialize:

//
        //specify the current Piccolo PCanvas
        //
        m_canvas = getCanvas();
        m_canvas.removeInputEventListener(m_canvas.getPanEventHandler());
        //m_canvas.addInputEventListener(new ClickAndDragHandler(m_canvas));

        //
        //add nodes to the collection -> adding to the collection = adding to the canvas
        //
        m_nodecollection = new NodeCollection(m_canvas);

        RectangleNode node_links = new RectangleNode();
        node_links.setBounds(10, 10, 500, 500);
        m_nodecollection.addNode(node_links);

        RectangleNode node_rechts = new RectangleNode();
        node_rechts.setBounds(600,10,500,500);
        m_nodecollection.addNode(node_rechts);

        PImage node_arrowLeft = new PImage("left.gif");
        node_arrowLeft.setBounds(600, 550, node_arrowLeft.getWidth(), node_arrowLeft.getHeight());
        m_nodecollection.addNode(node_arrowLeft);

        PImage node_arrowRight = new PImage("right.gif");
        node_arrowRight.setBounds(680, 550, node_arrowRight.getWidth(), node_arrowRight.getHeight());
        m_nodecollection.addNode(node_arrowRight);

        m_nodecollection.connectNodesWithLine(node_rechts, node_arrowRight, true);
        m_nodecollection.connectNodesWithLine(node_rechts, node_arrowLeft, true);


        PText node_text = new PText("Zoomlevel Not Supported");
        node_text.setBounds(180,150, node_text.getWidth(), node_text.getHeight());
        m_nodecollection.connectNodesWithLine(node_links, node_text, true);
        m_nodecollection.addNode(node_text);
        node_links.addChild(node_text);
        node_links.setCollection(m_nodecollection);

Created my own rectangle class with the whole nodecollection and PText as membervar.

public class RectangleNode extends PNode{

    private Rectangle2D m_rectangle;
    private NodeCollection collection;
private PText text;

    public RectangleNode()
    {
        m_rectangle = new Rectangle2D.Double();
    }

    public Rectangle2D getRectangle()
    {
        if(m_rectangle == null)
            m_rectangle = new Rectangle2D.Double();
        return m_rectangle;
    }

    public boolean setBounds(double x, double y, double w, double h)
    {
        if(super.setBounds(x, y, w, h))
        {
            m_rectangle.setFrame(x, y, w, h);
            return true;
        }
        return false;
    }

    public void setCollection(NodeCollection collection)
    {
        this.collection = collection;
    }
        public void setText(PText text)
{
    this.text = text;
}
    public void paint(PPaintContext paintcontext)
    {
        Graphics2D g2 = paintcontext.getGraphics();

        //niet ingezoomd
        if(paintcontext.getScale() <= 0.2)
            g2.setPaint(Color.BLACK);

        //half ingezoomd
        if(paintcontext.getScale() > 0.2 && paintcontext.getScale() < 0.7)
        {

            g2.setPaint(Color.BLACK);

        }

        //volledig ingezoomd
        if(paintcontext.getScale() > 0.7)
        {
            g2.setPaint(Color.RED);
            g2.fill(getRectangle());
            g2.setPaint(Color.BLACK);
            g2.draw(getRectangle());
        }
    }
}

Now, I thought I could change the text like this: text.setText("Tester"); but It doesn't work, also when for example settext and then add the node to collection then it displays over the current text with a huge error...

Can someone help me please?

kind regards,

Answer 1

Consider posting the whole example as SSCCE, looks like some parts of the code are missing. It is not clear how you actually execute setText.

It may be easier to compose existing nodes and listen to events fired from camera. Consider the following example that draws a rectangle with some text which gets updated according to a zoom level:

import java.awt.Color;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;

import edu.umd.cs.piccolo.PCamera;
import edu.umd.cs.piccolo.nodes.PPath;
import edu.umd.cs.piccolo.nodes.PText;
import edu.umd.cs.piccolo.util.PPaintContext;
import edu.umd.cs.piccolox.PFrame;

public class TestRectZoom extends PFrame {
    public TestRectZoom() {
        super("TestRectZoom", false, null);
    }

    public void initialize() {
        getCanvas().setInteractingRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);
        getCanvas().setDefaultRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);
        getCanvas().setAnimatingRenderQuality(
                PPaintContext.HIGH_QUALITY_RENDERING);

        final PPath rect = PPath.createRectangle(100, 100, 200, 200);
        rect.setPaint(Color.GREEN);
        getCanvas().getLayer().addChild(rect);

        final PText text = new PText(getZoomLevelString());
        rect.addChild(text);

        text.centerFullBoundsOnPoint(rect.getBounds().getCenterX(), rect
                .getBounds().getCenterY());

        getCanvas().getCamera().addPropertyChangeListener(
                PCamera.PROPERTY_VIEW_TRANSFORM, new PropertyChangeListener() {
                    public void propertyChange(final PropertyChangeEvent evt) {
                        text.setText(getZoomLevelString());

                        if (getCanvas().getCamera().getViewScale() > 0.9) {
                            rect.setPaint(Color.GREEN);
                        } else {
                            rect.setPaint(Color.RED);
                        }
                    }
                });
    }

    private String getZoomLevelString() {
        return "Zoom level:"
                + String.format("%.2f", getCanvas().getCamera().getViewScale());
    }

    public static void main(final String[] args) {
        new TestRectZoom();
    }
}

That's how the result looks like:

Answer 2

You are looking for semantic zooming available on the Piccolo Patterns page. Pattern 17: Semantic Zooming

http://www.piccolo2d.org/learn/patterns.html

Answer 3

I solved the problem like Aqua suggested.