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

2021/3/7

Circular Progress Bar

1
2
ronald ronald

2021/3/7

#
How to make a circular progress bar not like Circularhealth but as an arcbar in 360 degrees Thank you for your help
danpost danpost

2021/3/7

#
ronald wrote...
How to make a circular progress bar not like Circularhealth but as an arcbar in 360 degrees
My BGMusic Actor Class Demo scenario has an ArcBar class. You can set angular range to 360 and rotate 180 degrees to get what you are looking for. Or, you can use it as a guide in creating one.
ronald ronald

2021/3/7

#
I am working on bgmusic For the moment I managed to create an arcbar of 180 degrees based on your code with two buttons I will try to create a later
danpost danpost

2021/3/7

#
ronald wrote...
I am working on bgmusic For the moment I managed to create an arcbar of 180 degrees based on your code with two buttons I will try to create a later
You can only use it as a guide. It's a bit more complicated using a full circle. Each half of the image will need to be done separately. That is probably why I maxed mine out at 180 degrees. If you want revised code, it can be provided.
ronald ronald

2021/3/7

#
I want please
danpost danpost

2021/3/7

#
ronald wrote...
I want please
Here it is:
/**
 * CLASS:  CircleBar (subclass of Actor)
 * AUTHOR:  danpost (greenfoot.org username)
 * DATE:  MAR 7, 2021
 * DESCRIPTION:  An actor class whose objects display a quantitative measure in the form of a
 *               circular bar
 */
import greenfoot.*;

public class CircleBar extends Actor
{
    private static GreenfootImage barImage; // image of the curved colored portion of the bar
    static
    { // create the image for the 'barImage' field
        barImage = new GreenfootImage(150, 300);
        barImage.setColor(Color.GREEN);
        barImage.fillOval(0, 0, 300, 300); // create large green filled circle
        barImage.setColor(Color.WHITE);
        barImage.fillOval(20, 20, 260, 260); // create black filled inner circle (inside the green one)
    }
    
    private int percentSized = 20; // size to scale images to when setting current image
    private String caption; // the caption for this bar
    private int value; // the current value for this bar
    private int maximumValue; // the maximum value for this bar
    
    /**
     * CircleBar Constructor: saves the specified state values and creates this actors initial image
     *
     * @param text the caption for this bar
     * @param initVal the initial value of this bar
     * @param maxVal the maximum value allowed for this cbar
     */
    public CircleBar(String text, int initVal, int maxVal)
    {
        // save the state values
        caption = text;
        value = initVal;
        maximumValue = maxVal;
        updateImage(); // set initial image of this arcbar
    }
    
    /**
     * Method add: adjusts the value of this bar by the specified amount
     *
     * @param amount the adjustment amount for the value of this bar
     */
    public void add(int amount)
    {
        setValue(value+amount);
    }
    
    /**
     * Method getValue: returns the current value of this bar
     *
     * @return the current value of this bar
     */
    public int getValue()
    {
        return value;
    }
    
    /**
     * Method setValue: sets the current value of this bar to the specified value
     *
     * @param val the value at which the value of this bar is to be set
     */
    public void setValue(int val)
    {
        // limit range to max and min values
        if (val > maximumValue) val = maximumValue;
        if (val < 0) val = 0;
        value = val; // set value
        updateImage(); // update image
    }
    
    /**
     * Method getMaximumValue: returns the maximum limit of this bar
     *
     * @return the maximum limit of this bar
     */
    public int getMaximumValue()
    {
        return maximumValue;
    }
    
    /**
     * Method setPercentSized: sets the visual size of this bar to between 20 and 100 percent of full-sized
     *
     * @param pct the scaling percentage of the size of the image for this bar (full-sized is 300x300)
     */
    public void setPercentSized(int pct)
    {
        if (pct < 20) pct = 20;
        if (pct > 100) pct = 100;
        percentSized = pct;
        updateImage();
    }
    
    /**
     * Method updateImage: creates/updates the image of this bar
     */
    private void updateImage()
    {
        GreenfootImage bar = new GreenfootImage(300, 300); // new image
        GreenfootImage half = new GreenfootImage(150, 300); // half image
        GreenfootImage rotater = new GreenfootImage(300, 300);
        rotater.drawImage(barImage, 0, 0);
        int pct = (value*100)/maximumValue;
        rotater.rotate(180+360*pct/100); // rotate as needed
        // cut half of image off by drawing on half-sized image
        if (pct > 50)
        {
            bar.drawImage(barImage, 0, 0);
            half.drawImage(rotater, -150, 0);
            bar.drawImage(half, 150, 0);
        }
        else
        {
            half.drawImage(rotater, 0, 0);
            bar.drawImage(half, 0, 0);
        }
        // add text (caption and textual amount) to image
        GreenfootImage text = new GreenfootImage(""+value+caption, 96
        , Color.BLACK, TRANS);
        bar.drawImage(text, 150-text.getWidth()/2, 150-text.getHeight()/2);
        bar.scale(300*percentSized/100, 300*percentSized/100);
        // set the image of this bar
        setImage(bar);
    }
}
ronald ronald

2021/3/7

#
Thank you for the code I will try to put buttons otherwise I will not see anything
ronald ronald

2021/3/7

#
I keep you informed
ronald ronald

2021/3/8

#
import greenfoot.*;  // (World, Actor, GreenfootImage, Greenfoot and MouseInfo)

/**
 * Write a description of class MyWorld here.
 * 
 * @author (your name) 
 * @version (a version number or a date)
 */
public class Background extends World
{

    /**
     * Constructor for objects of class MyWorld.
     * 
     */
    
    static final Color TRANS = new Color(0,0,0,0);
    Actor btn01,btn02;
    Actor mouseOn;
    CircleBar_01 percentBar;
    int percentTimer;
    
    public Background()
    {    
        // Create a new world with 600x400 cells with a cell size of 1x1 pixels.
        super(900, 600, 1);
        
        addObject(btn01 = getNewButton("BUTTON 01"),200,300);
        addObject(btn02 = getNewButton("BUTTON 02"),200,350);
    }
    
     public void act()
    {
        if(percentTimer == 0)
        {
            int dPct = 0;
            if(Greenfoot.mouseClicked(btn01)) dPct++;
            if(Greenfoot.mouseClicked(btn02)) dPct--;
            if(dPct != 0)
            {
                BGMusic.adjustPercent(dPct);
                percentBar.setValue(BGMusic.getPercent());
                percentTimer=5;
            }
        }
        else percentTimer--;
    }
    
    private Actor getNewButton(String caption)
    {
        GreenfootImage base = new GreenfootImage(200,30);
        base.fill();
        base.setColor(Color.BLUE);
        base.fillRect(3,3,194,24);
        
        GreenfootImage text = new GreenfootImage(caption,24,Color.WHITE,TRANS);
        base.drawImage(text,100-text.getWidth()/2,15-text.getHeight()/2);
        base.setTransparency(128);
        
        Actor button = new Actor()
        {
            public void act()
            {
                if(mouseOn==null && Greenfoot.mouseMoved(this))
                {
                    mouseOn=this;
                    getImage().setTransparency(255);
                }
                
                if(mouseOn==this && Greenfoot.mouseMoved(null) && !Greenfoot.mouseMoved(this))
                {
                    mouseOn=null;
                    getImage().setTransparency(128);
                }
            }
        };
        button.setImage(base);
        return button;
    }
}
import greenfoot.*;  // (World, Actor, GreenfootImage, Greenfoot and MouseInfo)

/**
 * Write a description of class BGMusic here.
 * 
 * @author (your name) 
 * @version (a version number or a date)
 */
public class BGMusic extends Actor
{
    /**
     * Act - do whatever the BGMusic wants to do. This method is called whenever
     * the 'Act' or 'Run' button gets pressed in the environment.
     */
    
    private static int percent = 0;
    
    public void act() 
    {
        // Add your action code here.
    }
    
    public static void setPercent(int pct)
    {
        if(pct>=0 && pct<=100)
        {
            percent = pct;
        }
    }
    
    public static void adjustPercent(int adjustment)
    {
        if (percent+adjustment >= 0 && percent+adjustment <= 100)
        {
            percent += adjustment;
        }
    }
    
    public static int getPercent()
    {
        return percent;
    }    
}
java.lang.NullPointerException at Background.act(Background.java:42) at greenfoot.core.Simulation.actWorld(Simulation.java:573) at greenfoot.core.Simulation.runOneLoop(Simulation.java:506) at greenfoot.core.Simulation.runContent(Simulation.java:193) at greenfoot.core.Simulation.run(Simulation.java:183) I add two buttons and some pieces of code I do not understand the error and do not know or is error
ronald ronald

2021/3/8

#
it's been I find l error I have to add an object
danpost danpost

2021/3/8

#
ronald wrote...
it's been I find l error I have to add an object
Yes. You have to at least create a percentBar object.
ronald ronald

2021/3/8

#
static
    {
        barImage = new GreenfootImage(150,300);
        barImage.setColor(Color.BLUE);
        barImage.fillOval(0,0,300,300);
        barImage.setColor(Color.WHITE);
        barImage.fillOval(20,20,260,260);
        
        GreenfootImage image = new GreenfootImage(300, 300);
        image.drawImage(barImage, 0, 0);
        
        int x = 20;
        Color trans = TRANS;
        for (int y=149; y>=20; y--)
        {
            while (!Color.WHITE.equals(image.getColorAt(x++, y)) && x<150);
            for (int n=(--x); n<=300-x; n++) image.setColorAt(n, y, trans);
        }
        
        barImage.clear();
        barImage.drawImage(image, 0, 0);
    }
I have a very small problem with the numbers The circular progress bar leaves a white inside I try to bring out the image inside otherwise it leaves a white
danpost danpost

2021/3/8

#
ronald wrote...
I have a very small problem with the numbers The circular progress bar leaves a white inside I try to bring out the image inside otherwise it leaves a white
I think there is a glitch in the matrix (a Greenfoot bug) which makes it impossible to restore transparency on the inside.
ronald ronald

2021/3/8

#
ah ok yet it works a little but there is still white inside I thank you anyway for the circular progress bar
ronald ronald

2021/3/8

#
I think it's the same problem as the last time the progress bars did not go until the end, once the scenario put online
There are more replies on the next page.
1
2