I want to align a Custom Button Field (the Star on the Screenshot) to the center in a Horizontal Manager
Definition of the HFM
final HorizontalFieldManager _navigation = new HorizontalFieldManager(HorizontalFieldManager.NO_VERTICAL_SCROLL | HorizontalFieldManager.FIELD_VCENTER | Field.USE_ALL_WIDTH)
{
protected void paint(Graphics graphics)
{
graphics.setGlobalAlpha(100);
int[] xInds = new int[]{0, getExtent().width, getExtent().width, 0};
int[] yInds = new int[]{0, 0, getExtent().height, getExtent().height};
final int[] cols = new int[]{Color.WHITE, Color.WHITE, color_computacenter_light_blue, color_computacenter_light_blue};
graphics.drawShadedFilledPath(xInds, yInds, null, cols, null);
super.paint(graphics);
}
protected void sublayout(int maxWidth, int maxHeight)
{
super.sublayout(maxWidth, maxHeight);
setExtent(maxWidth, navigation_vertical_manager_height);
}
};
Custom Field (partial)
public class NavigationButton extends Field
{
private String label;
Bitmap img;
int horizontalPadding = 4;
int verticalPadding = 10;
static int height;
static int weight;
ToolTip _tooltip;
public NavigationButton(String name, Bitmap img)
{
label = name;
this.img = img;
this.height = img.getHeight() + 4;
this.weight = img.getWidth() + 2;
}
public NavigationButton(String name, Bitmap img, long style)
{
super(style);
label = name;
this.img = img;
this.height = img.getHeight() + 4;
this.weight = img.getWidth() + 2;
}
protected void layout(int maxWidth, int maxHeight)
{
setExtent(maxWidth, maxHeight);
// setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
}
protected void paint(Graphics graphics)
{
// Draw background
graphics.setGlobalAlpha(255);
if(isFocus())
{
graphics.setColor(0x005AA1);
graphics.drawRoundRect(0 ,0 , weight + 1, height + 1, 2, 2);
}
if (img != null)
{
graphics.drawBitmap(0, 0 , img.getWidth(), img.getHeight(), img, 0, 0);
}
}
[...]
Any Ideas, what I'm doing wrong?!
Thanks!
I haven't tested this code out, but I suspect your problem is in the layout method of your field:
protected void layout(int maxWidth, int maxHeight)
{
setExtent(maxWidth, maxHeight);
// setExtent(Math.min(weight, maxWidth), Math.min(height, maxHeight));
}
Is there a reason you commented that line? I think what's happening is that your custom field is taking up the whole width, and in your paint method you're drawing the bitmap at the extreme left, making it look like the field is aligned left. If you uncomment that line, and add a field style bit of Field.FIELD_HCENTER when you construct your field it should work.
Alternatively, you can keep the layout as is, and just draw the bitmap centered, by changing the line in your paint method to something like this
graphics.drawBitmap((this.getWidth()-img.getWidth())/2, 0 , img.getWidth(), img.getHeight(), img, 0, 0);
The field will still take up the whole width, but the image will be centered. This might cause unexpected behavior on touchscreen devices (i.e. the Storm).
Actually, it is quite simple. You must use HorizontalFieldManger and DrawStyle.Center.
here is the code snippet (in case you haven't solved it yet) :
HorizontalFieldManager hfm = new HorizontalFieldManager(HorizontalFieldManager.FIELD_HCENTER);
ButtonField button = new ButtonField("Button",DrawStyle.HCENTER);
hfm.add(button);
Kindly,
Hrvoje
Related
I want to write a custom subclass of JLabel that would have two images attached to the border, that can be moved by moving the mouse. Real effects like this:
Here's my subclass, how could I add these attached images?
public class Rect extends JLabel{
private int width,height;
public Rect (int width,int height){
this.width = width;
this.height = height;
setText("b1");
repaint();
}
public void paintComponent(Graphics g){
super.paintComponent(g);
g.setColor(Color.red);
g.drawRect(0, 0, this.width, this.height);
}
public void reDraw(){
this.repaint();
}
public void setWidth(int width) {
this.width = width;
repaint();
}
public void setHeight(int height) {
this.height = height;
repaint();
}
}
To do this there are 4 things you should to do:
Extend an AbstractBorder not a Jlabel, then you can easily add your custom border to any component, not just a jLabel.
Override the paintBorder method so that you can draw your border.
Add an mouse action listeners to keep track of your border images.
And lastly you need a bit of logic to manage your border images.
I found this question interesting so I took a crack at making something as a test. It came out well, and does what you want, but will need a bit of work to get it looking correct. See below for a break down of each point.
Example image before we look at the code:
Extend an AbstractBorder:
public class MyCustomBorder extends AbstractBorder
{
private Color borderColour;
private int borderThickness = 10;
private Point firstSlider = new Point(0, 0);
private Point secondSlider = new Point(0, 0);
private BufferedImage firstSliderImage;
private BufferedImage secondSliderImage;
Boolean draggingFirst = false;
Boolean draggingSecond = false;
//See usage info
public MyCustomBorder(Color colour, int thickness, Point firstSlider, BufferedImage firstSliderImage, Point secondSlider, BufferedImage secondSliderImage)
{
borderColour = colour;
borderThickness = thickness;
this.firstSlider = firstSlider;
this.secondSlider = secondSlider;
this.firstSliderImage = firstSliderImage;
this.secondSliderImage = secondSliderImage;
}
Override the paintBorder method and insets:
#Override
public void paintBorder(Component c, Graphics g, int x, int y, int width, int height)
{
super.paintBorder(c, g, x, y, width, height);
Graphics2D g2d = null;
if (g instanceof Graphics2D)
{
g2d = (Graphics2D) g;
//Draw border fill (currently hard coded to white, but can be changed)
g2d.setColor(Color.white);
//Top
g2d.fill(new Rectangle2D.Double(0, 0, width, borderThickness));
//Left
g2d.fill(new Rectangle2D.Double(0, 0, borderThickness, height));
//Bottom
g2d.fill(new Rectangle2D.Double(0, height-borderThickness, width, borderThickness));
//Right
g2d.fill(new Rectangle2D.Double(width-borderThickness, 0, borderThickness, height));
//draw black seperator
g2d.setColor(borderColour);
//Top
g2d.fill(new Rectangle2D.Double(borderThickness, borderThickness, width-(borderThickness*2), 1));
//Left
g2d.fill(new Rectangle2D.Double(borderThickness, borderThickness, 1, height-(borderThickness*2)));
//Bottom
g2d.fill(new Rectangle2D.Double(borderThickness, height-borderThickness-1, width-(borderThickness*2), 1));
//Right
g2d.fill(new Rectangle2D.Double(width-borderThickness-1, borderThickness, 1, height-(borderThickness*2)));
//draw sliders an custom position
g2d.drawImage(scale(secondSliderImage), null, secondSlider.x, secondSlider.y);
g2d.drawImage(scale(firstSliderImage), null, firstSlider.x, firstSlider.y);
}
}
#Override
public Insets getBorderInsets(Component c)
{
return (getBorderInsets(c, new Insets(borderThickness, borderThickness, borderThickness, borderThickness)));
}
#Override
public Insets getBorderInsets(Component c, Insets insets)
{
insets.left = insets.top = insets.right = insets.bottom = borderThickness;
return insets;
}
#Override
public boolean isBorderOpaque()
{
return false;
}
}
Add mouse action listeners:
//listeners for dragging
void addListeners(Component button)
{
button.addMouseMotionListener(new java.awt.event.MouseMotionAdapter()
{
public void mouseDragged(java.awt.event.MouseEvent evt)
{
//Only drag if a slider was selected
if (draggingFirst)
{
//update position of silder
firstSlider = snapToEdge(evt.getPoint(), evt.getComponent());
evt.getComponent().repaint();
}
else if (draggingSecond)
{
//update position of silder
secondSlider = snapToEdge(evt.getPoint(), evt.getComponent());
evt.getComponent().repaint();
}
}
});
button.addMouseListener(new java.awt.event.MouseAdapter()
{
//check if a slider was selected
public void mousePressed(java.awt.event.MouseEvent evt)
{
if (isInside(evt.getPoint(), firstSlider))
{
draggingFirst = true;
}
else if (isInside(evt.getPoint(), secondSlider))
{
draggingSecond = true;
}
}
public void mouseReleased(java.awt.event.MouseEvent evt)
{
//cancel selected slider
draggingFirst = false;
draggingSecond = false;
}
});
}
Logic:
//check if a slider was selected
private Boolean isInside(Point clicked, Point toCheck)
{
if (clicked.x > toCheck.x && clicked.x < toCheck.x + borderThickness)
{
if (clicked.y > toCheck.y && clicked.y < toCheck.y + borderThickness)
{
return true;
}
}
return false;
}
//snap a sliders co-ords to as edge
private Point snapToEdge(Point dragged, Component label)
{
//work out how close to each edge
int topEdge = dragged.y;
int leftEdge = dragged.x;
int rightEdge = label.getWidth()- dragged.x;
int bottomEdge = label.getHeight() - dragged.y;
//snap to slider co-ords to closest edge
if (topEdge < leftEdge && topEdge < rightEdge && topEdge < bottomEdge)
{
dragged.y = 0;
}
else if (leftEdge < rightEdge && leftEdge < bottomEdge)
{
dragged.x = 0;
}
else if (rightEdge < bottomEdge)
{
dragged.x = label.getWidth()-borderThickness;
}
else
{
dragged.y = label.getHeight()-borderThickness;
}
return dragged;
}
//scale slider images to fit border size
public BufferedImage scale(BufferedImage image)
{
BufferedImage resizedImage = null;
if (image != null)
{
double border = borderThickness;
resizedImage = new BufferedImage(borderThickness, borderThickness, TYPE_INT_ARGB);
Graphics2D g = resizedImage.createGraphics();
AffineTransform at = AffineTransform.getScaleInstance(border / (double)image.getWidth(), border / (double)image.getHeight());
g.drawRenderedImage(image, at);
}
return resizedImage;
}
The full code to copy and paste can be found here:
https://github.com/sorifiend/customBorder/blob/master/MyCustomBorder.java
Usage Example:
You can put this code in your form class to add a border to most swing components. In this example I added it to a jLabel called my_jLabel:
//Create border
MyCustomBorder border = new MyCustomBorder(Color.BLACK, 10, new Point(0, 0), img1, new Point(0, 0), img2);
//Add border to component called my_jLabel
my_jLabel.setBorder(border);
//Add action listeners for dragging sliders (very important)
border.addListeners(my_jLabel);
I'm trying to implement undo/redo in JavaFX - I draw all my shapes using graphicsContext(). I have looked around and found that there's a save method on Graphics Context but it just saves attributes and not the actual shape/state of the canvas. What would be the best way of going about this?
This is one of my code snippets when I create a circle, for instance:
public CircleDraw(Canvas canvas, Scene scene, BorderPane borderPane) {
this.borderPane = borderPane;
this.scene = scene;
this.graphicsContext = canvas.getGraphicsContext2D();
ellipse = new Ellipse();
ellipse.setStrokeWidth(1.0);
ellipse.setFill(Color.TRANSPARENT);
ellipse.setStroke(Color.BLACK);
pressedDownMouse = event -> {
startingPosX = event.getX();
startingPosY = event.getY();
ellipse.setCenterX(startingPosX);
ellipse.setCenterY(startingPosY);
ellipse.setRadiusX(0);
ellipse.setRadiusY(0);
borderPane.getChildren().add(ellipse);
};
releasedMouse = event -> {
borderPane.getChildren().remove(ellipse);
double width = Math.abs(event.getX() - startingPosX);
double height = Math.abs(event.getY() - startingPosY);
graphicsContext.setStroke(Color.BLACK);
graphicsContext.strokeOval(Math.min(startingPosX, event.getX()), Math.min(startingPosY, event.getY()), width, height);
removeListeners();
};
draggedMouse = event -> {
ellipse.setCenterX((event.getX() + startingPosX) / 2);
ellipse.setCenterY((event.getY() + startingPosY) / 2);
ellipse.setRadiusX(Math.abs((event.getX() - startingPosX) / 2));
ellipse.setRadiusY(Math.abs((event.getY() - startingPosY) / 2));
};
}
The problem here is that there is that information like this is not saved in a Canvas. Furthermore there is no inverse operation that allows you to get back to the previous state for every draw information. Surely you could stroke the same oval, but with backgrund color, however the information from previous drawing information could have been overwritten, e.g. if you're drawing multiple intersecting ovals.
You could store the drawing operations using the command pattern however. This allows you to redraw everything.
public interface DrawOperation {
void draw(GraphicsContext gc);
}
public class DrawBoard {
private final List<DrawOperation> operations = new ArrayList<>();
private final GraphicsContext gc;
private int historyIndex = -1;
public DrawBoard(GraphicsContext gc) {
this.gc = gc;
}
public void redraw() {
Canvas c = gc.getCanvas();
gc.clearRect(0, 0, c.getWidth(), c.getHeight());
for (int i = 0; i <= historyIndex; i++) {
operations.get(i).draw(gc);
}
}
public void addDrawOperation(DrawOperation op) {
// clear history after current postion
operations.subList(historyIndex+1, operations.size()).clear();
// add new operation
operations.add(op);
historyIndex++;
op.draw(gc);
}
public void undo() {
if (historyIndex >= 0) {
historyIndex--;
redraw();
}
}
public void redo() {
if (historyIndex < operations.size()-1) {
historyIndex++;
operations.get(historyIndex).draw(gc);
}
}
}
class EllipseDrawOperation implements DrawOperation {
private final double minX;
private final double minY;
private final double width;
private final double height;
private final Paint stroke;
public EllipseDrawOperation(double minX, double minY, double width, double height, Paint stroke) {
this.minX = minX;
this.minY = minY;
this.width = width;
this.height = height;
this.stroke = stroke;
}
#Override
public void draw(GraphicsContext gc) {
gc.setStroke(stroke);
gc.strokeOval(minX, minY, width, height);
}
}
Pass a DrawBoard instance to your class instead of the Canvas and replace
graphicsContext.setStroke(Color.BLACK);
graphicsContext.strokeOval(Math.min(startingPosX, event.getX()), Math.min(startingPosY, event.getY()), width, height);
with
drawBoard.addDrawOperation(new EllipseDrawOperation(
Math.min(startingPosX, event.getX()),
Math.min(startingPosY, event.getY()),
width,
height,
Color.BLACK));
The undo and redo to move through the history.
I've made a Button class which allows me to have buttons (Kind of obvious). But in my button class, I'm using an image to display the button on the screen. I got that to work, but I want to resize the image to the size of the button.
My "Image Resizer" works flawlessly, but when I try to resize the button, the button doesn't show up. I don't get any errors.
Here's my Button class:
private String text;
private int size = 0;
private BufferedImage buttonHD;
public Button(int x, int y, int width, int height, int size) {
super(x, y, width, height);
this.size = size;
buttonHD = Renderer.resizeImage(Images.button, x, y, width, height);
}
public Button setText(String text) {
this.text = text;
return this;
}
public void drawButton(Graphics g, int xoffset, int yoffset) {
int xx = x + xoffset;
int yy = y + yoffset;
if(!MouseInput.MOUSE.intersects(this)) {
g.drawImage(buttonHD, x, y, width, height, null);
} else if(MouseInput.MOUSE.intersects(this)){
g.setColor(Color.DARK_GRAY);
g.fillRect(x, y, width, height);
}
Renderer.drawText(text, g, xoffset, yoffset, size);//Draws button text
}
The original image that I'm resizing is stored into my Images class as:
public static BufferedImage button;
Here's my "Button Resizer" method:
public static BufferedImage resizeImage(BufferedImage origImg, int x, int y, int initWidth, int initHeight) {
BufferedImage resizedImg = new BufferedImage(initWidth, initHeight, BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = resizedImg.createGraphics();
g2d.drawImage(origImg, x, y, initWidth, initHeight, null);
g2d.dispose();
return resizedImg;
}
The way I'm using these buttons are in ScreenState classes. Each class representing as each state. The buttons are set in there and are loaded up by the class's constructor.
The buttons do work as they should, but the images just don't show up. If more code is needed, just let me know and I'll provide you with it.
I've been trying to fix this problem, but had no luck. If someone could just hint out as to where my problem is or maybe have a solution, that'd be great. Thanks!
This function resizes the BufferedImage to the given width and height:
public static BufferedImage resizeImage(BufferedImage image, int width, int height) {
// calculate the scale factor
double xScale = width / (double) image.getWidth();
double yScale = height / (double) image.getHeight();
// create the object that will contain the resized image
BufferedImage resizedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
// resize the image
Graphics2D g = (Graphics2D) resizedImage.getGraphics();
g.scale(xScale, yScale);
g.drawImage(image, 0, 0, null);
g.dispose();
// return the resized image
return resizedImage;
}
Then simply use it:
public class MyButton extends JButton
{
private BufferedImage image;
public MyButton() {
image = resizeImage(ImageIO.read(IMAGE_PATH), BUTTON_WIDTH, BUTTON_HEIGHT);
}
#Override protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawImage(image, 0, 0, null);
}
}
IMAGE_PATH is the File where your image is located, BUTTON_WIDTH and BUTTON_HEIGHT is your button dimension.
I`ve customized an jSlider facing a little problem-
After changing values, on my custom jSlider is a border shown. Sorry, I´ve made pictures but Iàm not allowed to post it. The not customized jSlider do not show such border after click on it.
Is there an Method i have to Override to get rid of this border? Thank you in advance!
Sorry for my english! Hope anyone can help me!
This is my Customized UI:
public class RedGreenSliderUI extends BasicSliderUI{
Image knobImage ;
private BasicStroke stroke = new BasicStroke(1f, BasicStroke.CAP_ROUND,
BasicStroke.JOIN_ROUND, 0f, new float[]{1f, 2f}, 0f);
private static final float[] fractions = {0.0f, 0.5f};
private static final Color[] fillColors = {
/* new Color(0x2687AE),*/
/* new Color(0x1658AE)*/
new Color(0xc8041b),
new Color(0xc8041b)
};
private static final Color[] backColors = {
new Color(0x04c814),
new Color(0x04c814)
};
private static final Paint hFillGradient = new LinearGradientPaint(0, 0, 0, 11,
fractions, fillColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
private static final Paint hBackGradient = new LinearGradientPaint(0, 0, 0, 11,
fractions, backColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
private static final Paint vFillGradient = new LinearGradientPaint(0, 0, 11, 0,
fractions, fillColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
private static final Paint vBackGradient = new LinearGradientPaint(0, 0, 11, 0,
fractions, backColors, MultipleGradientPaint.CycleMethod.NO_CYCLE);
private static final Stroke roundEndStroke = new BasicStroke(5,
BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND);
public RedGreenSliderUI( JSlider aSlider ) {
super( aSlider );
try {
this.knobImage = ImageIO.read(getClass().getResource("ringelblumensalbe- Updater-Grafiken/tongThumb01.png")); //.getClassLoader()
} catch ( IOException e ) {
e.printStackTrace();
}
}
public void paintThumb(Graphics g) {
g.drawImage( this.knobImage, thumbRect.x, thumbRect.y, 15, 30, null );
}
#Override
protected Dimension getThumbSize() {
return new Dimension(15, 30);
}
#Override
protected Color getHighlightColor() {
return new Color(98, 94, 0);
}
public void paintTrack(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
if (slider.getOrientation() == JSlider.HORIZONTAL) {
int cy = (trackRect.height / 2) - 2;
g.translate(trackRect.x, trackRect.y + cy);
g2.setStroke(roundEndStroke);
g2.setPaint(hBackGradient);
g2.drawLine(thumbRect.x, 2, trackRect.width, 2);
g2.setPaint(hFillGradient);
g2.drawLine(0, 2, thumbRect.x, 2);
g.translate(-trackRect.x, -(trackRect.y + cy));
} else {
int cx = (trackRect.width / 2) - 2;
g.translate(trackRect.x + cx, trackRect.y);
g2.setStroke(roundEndStroke);
g2.setPaint(vBackGradient);
g2.drawLine(2, 0, 2, thumbRect.y);
g2.setPaint(vFillGradient);
g2.drawLine(2, thumbRect.y, 2, trackRect.height);
g.translate(-(trackRect.x + cx), -trackRect.y);
}
}
EDIT: I`ve got it. The answer is to override getFocusColor().
#Override
protected Color getFocusColor(){
return new Color(255,255,255);
}
The focus rectangle is renderered by the slider's UI delegate, typically based on BasicSliderUI. Although I can't advocate defeating the focus indicator, you can try one of the following:
Use the UIManager to set the "Slider.focus" color to match the "Slider.background".
Override the paintFocus() method to do nothing; a related example is seen here.
Trashgod's answer works nicely. For noob's like me the syntax is;
UIManager.put("Slider.focus", UIManager.get("Slider.background"));
You can try using border:0px; property for particular class where border is shown.
I want to make a chess type board using a custom subclass of JButton. My problem is that my images of the chess pieces are a bit too small. Is there a way I can get the image to scale to exactly the size of each grid in my gridlayout? If I resize the Jframe, the grids will change size as well. Is there a way to get the image to resize dynamically upon resizing of the whole frame?
You have 3 option for this
1) Resize the images themselves using Gimp, Photoshop, etc.
2) Create an icon dynamically
Image i = icon.getImage();
if(i != null){
int width = (int)(size * fraction);
int height =(int)(size*icon.getIconHeight()/icon.getIconWidth()*fraction);
miniature = new ImageIcon(i.getScaledInstance(width, height, Image.SCALE_SMOOTH));
}
3) on the paint of your frame you can use scale
private void scaledDrawing(Graphics g, float scale){
Graphics2D g2 = (Graphics2D) g;
AffineTransform at = new AffineTransform();
AffineTransform save = g2.getTransform();
at.setToIdentity();
at.scale(goa.getScale().x, goa.getScale().y);
g2.transform(at);
image.paintIcon(c, g2);
g2.setTransform(save);
}
You could apply some transformation to the images but it might look a little ugly. If the images are small enough, maybe you can just force a minimum size of the button so that a scrollbar will appear if the frame is sized really small. Another option might be to have two or three different sets of the images at nicely scaled sizes, and swap them out for different board sizes.
Another alternative will be to override the paint function to fill all the available place:
#Override
public final void paint(final Graphics g) {
super.paint(g);
g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
}
Here is an example:
import java.awt.Component;
import java.awt.Graphics;
import java.awt.Image;
public final class Tileset extends Component {
private Image image;
public Tileset(final Image image) {
this.image = image;
}
#Override
public final void paint(final Graphics g) {
super.paint(g);
g.drawImage(image, 0, 0, getWidth(), getHeight(), this);
}
public final Image getImage() {
return (image);
}
public final void setImage(final Image image) {
this.image = image;
}
}
With:
import javax.swing.JPanel;
import java.awt.GridLayout;
public final class Map extends JPanel {
public Map(final GridLayout layout) {
setLayout(layout);
}
public Map(final Integer width, final Integer height) {
this(new GridLayout(width, height));
}
}
And:
final Map map = new Map(13, 17);
final Image grass = new ImageIcon("src/main/res/tilesets/grass1.png").getImage();
final Image wood = new ImageIcon("src/main/res/tilesets/wood1.png").getImage();
final Image rock = new ImageIcon("src/main/res/tilesets/rock1.png").getImage();
for (int i = 0; i != 13; ++i) {
for (int j = 0; j != 17; ++j) {
if (i % 2 == 0) {
if (j % 2 == 0)
map.add(new Tileset(grass), i, j);
else
map.add(new Tileset(rock), i, j);
}
else
map.add(new Tileset(wood), i, j);
}
}
That will give you: