javaapplettooltipmarkerpgraphics

PGraphics text (tooltip) display appears garbled on top of images


I have been struggling with this for a while and did not find a solution. I am trying to display a tooltip (a rectangular box with different color which contains some text) when user hovers the mouse over specific markers displayed in side a PGraphics object. It is programmed in java and run as a java applet using the PApplet class.

The problem is that, text is not seen clearly as not all of it stays on top of other images. Although the color is changed and preserved to the color of the tooltip, the edges of other markers still stay on top.

here is part of the code to explain better what I am trying to do:

// Common piece of drawing method for markers; 
    // Note that you should implement this by making calls 
    // drawMarker and showTitle, which are abstract methods 
    // implemented in subclasses
    public void draw(PGraphics pg, float x, float y) {
        // For starter code just drawMaker(...)
        if (!hidden) {

            drawMarker(pg, x, y);

            if (selected) {
                showTitle(pg, x, y);  // You will implement this in the subclasses
            }

        }
    }

@Override
    public void drawMarker(PGraphics pg, float x, float y) {
        // TODO Auto-generated method stub
        pg.pushStyle();

        // IMPLEMENT: drawing triangle for each city
        pg.fill(150, 30, 30);
        pg.triangle(x, y-TRI_SIZE, x-TRI_SIZE, y+TRI_SIZE, x+TRI_SIZE, y+TRI_SIZE);

        // Restore previous drawing style
        pg.popStyle();
    }

public void showTitle(PGraphics pg, float x, float y)
    {
        // TODO: Implement this method
        pg.pushStyle();

        pg.fill(255, 255, 202);
        pg.rect(x+TRI_SIZE+1, y-TRI_SIZE, 150, 15);
        pg.textAlign(PConstants.LEFT, PConstants.CENTER);
        pg.fill(0,0,0);
        pg.text(getCity()+", " + getCountry() + ", " + getPopulation(), x+TRI_SIZE+2, y);

        // Restore previous drawing style
        pg.popStyle();
    }

Is it possible to remove the edges of some markers to not be displayed or another way to insure that the tooltip always stays on top? Thanks in advance


Solution

  • Well, I already found a solution. What you have to do is to display (draw) the text (tooltip) only after every other image/object is displayed (drawn). This will make the text always stay on stop and appear clearly without problem. To Do This, You have to it in the main class in the draw method as in this ex:

    public void draw() {
            background(0);
            map.draw();
            addKey();
    
            if (lastSelected != null)
            {
                lastSelected.showToolTip(this,lastSelected.getScreenPosition(map).x,lastSelected.getScreenPosition(map).y);
    
            }
    
        } 
    

    Hope other people find this useful.