This site requires JavaScript, please enable it in your browser!
Greenfoot back
Twitter Twitter.hover
Theangryman
Theangryman wrote ...

2017/2/20

Label on Image Hover Event

Theangryman Theangryman

2017/2/20

#
The title is rather descriptive of what I'm trying to achieve here; I have an image and I want to be able to make a label appear that displays some text and follows the user's cursor while the mouse is over the image drawn. Here's my code: 
public void drawTraits()
    {
        setImage(new GreenfootImage(464, 32));
        GreenfootImage traitBg = getImage();
        
        traitBg.setFont(traitBg.getFont().deriveFont(20f));
        traitBg.setColor(new Color(255, 255, 255));
        traitBg.drawString("Traits", 1, 24);
        
        if(CellStats.returnWaterT() == true){
            traitBg.drawImage(waterIcon, 170, 0);
            
            MouseInfo mouse = Greenfoot.getMouseInfo();
            if(mouse != null){
                int mX = mouse.getX();
                int mY = mouse.getY();
                if(Greenfoot.mouseMoved(null)){
                    boolean onThis = Greenfoot.mouseMoved(this);
                    if(onThis){
                        traitBg.setFont(traitBg.getFont().deriveFont(20f));
                        traitBg.setColor(new Color(255, 255, 255));
                        traitBg.drawString("Water Transmission", mX, mY);
                    }
                }
            }
        }
        
        if(CellStats.returnLavaT() == true){
            traitBg.drawImage(lavaIcon, 230, 0);
        }
        if(CellStats.returnRadiation() == true){
            traitBg.drawImage(radiationIcon, 290, 0);
        }
        if(CellStats.returnZombie() == true){
            traitBg.drawImage(zombieIcon, 350, 0);
        }
        
        setImage(traitBg);
    }
Ideally, if there's a way to compact this down using a more efficient layout I'd be more than happy to use it as I essentially want each icon to do the exact same thing, but in a different location and using a different label depending on if its associated Boolean is true or not. I'm currently trying to get this working for just the water drop icon and was planning on copy+pasting the label-on-hover code into each if statement just to get it working.
Super_Hippo Super_Hippo

2017/2/20

#
I don't really get the context here. In what class is this code? I think that I recently wanted to do something similar (even though it does not follow the mouse). I have a button and if the mouse is above the button, a description appears. I create a new actor, give it the correct image and place it where I want it. When the mouse is no longer hovering the button, I remove the actor again. I am not sure in which class this code is because it checks if the mouse is on "this", but "this" is also the one which is displaying the text...
Theangryman Theangryman

2017/2/20

#
@Super_Hippo have the entire subclass: 
import greenfoot.*;
import java.awt.Color;

public class Traits extends CellStats
{
    GreenfootImage zombieIcon = new GreenfootImage("Zombie.png");
    GreenfootImage waterIcon = new GreenfootImage("WaterDrop.png");
    GreenfootImage lavaIcon = new GreenfootImage("LavaDrop.png");
    GreenfootImage radiationIcon = new GreenfootImage("Radiation2.png");
    
    public Traits()
    {
        updateTraits();
    }
    public void act() 
    {
        updateTraits();
    }
    public void updateTraits()
    {
        drawTraits();
        
        CellStats waterT = new CellStats();
        waterT.returnWaterT();
        CellStats lavaT = new CellStats();
        lavaT.returnLavaT();
        CellStats radiation = new CellStats();
        radiation.returnRadiation();
        CellStats zombie = new CellStats();
        zombie.returnZombie();
    }
    public void drawTraits()
    {
        setImage(new GreenfootImage(464, 32));
        GreenfootImage traitBg = getImage();
        
        traitBg.setFont(traitBg.getFont().deriveFont(20f));
        traitBg.setColor(new Color(255, 255, 255));
        traitBg.drawString("Traits", 1, 24);
        
        if(CellStats.returnWaterT() == true){
            traitBg.drawImage(waterIcon, 170, 0);
            
            MouseInfo mouse = Greenfoot.getMouseInfo();
            if(mouse != null){
                int mX = mouse.getX();
                int mY = mouse.getY();
                if(Greenfoot.mouseMoved(null)){
                    boolean onThis = Greenfoot.mouseMoved(this);
                    if(onThis){
                        traitBg.setFont(traitBg.getFont().deriveFont(20f));
                        traitBg.setColor(new Color(255, 255, 255));
                        traitBg.drawString("Water Transmission", mX, mY);
                    }
                }
            }
        }
        
        if(CellStats.returnLavaT() == true){
            traitBg.drawImage(lavaIcon, 230, 0);
        }
        if(CellStats.returnRadiation() == true){
            traitBg.drawImage(radiationIcon, 290, 0);
        }
        if(CellStats.returnZombie() == true){
            traitBg.drawImage(zombieIcon, 350, 0);
        }
        
        setImage(traitBg);
    }
}
And seriously, just assume this is garbage code and if you can think of a way for it to be done better it probably is. I'm rather inexperienced with greefoot so I'm mostly just throwing code at the wall until it sticks.
Theangryman Theangryman

2017/2/20

#
I don't mind dropping the idea of having the label track the mouse while it's hovering over the drop image if it makes things easier, just as long as a label is displayed while hovering over the image and then removed when not hovering over the image. The mouse tracking was mainly just a way to make it fancier (i.e of no practical use).
Super_Hippo Super_Hippo

2017/2/20

#
Please explain what the class represents. So what is cellstats, what is a trait? Maybe I am just stupid, but I don't get your structure yet.
Theangryman Theangryman

2017/2/20

#
"CellStats" is a subclass of Actor used to store and pass a set of integers and booleans around so the subclasses within it know how to draw the UI elements I'm using on the screen. "Trait" itself is meant to be a subclass of CellStats that is passed the boolean values mentioned above and then displays an icon to represent if said boolean values are true or not. The values in CellStats are also intended to be used within a completely different area of the program being developed and it's been purposely designed that way for ease of use for the other programmer I'm working with. I know my class structures are stupid to think about to literally everybody but me; but if it works then it works, which is all I care about right now.
Super_Hippo Super_Hippo

2017/2/20

#
I made it using the suggestion in this post: click here You have an object in the world for each different thing which can be hovered. (These can be objects of the same class. When creating them, you let them know what their job is.) When it is hovered, you add a new actor to the world. You give this object an image with the text description. When it is not hovered anymore, you simply remove the added actor from the world again.
You need to login to post a reply.