How to make a customizable graph - java

I'm looking to use the java2d API to make a graph in which users can manipulate certain features using their mouse - such as the scale used for an axis or move around the different points plotted on the graph.
So far all I have found is the drawX methods on a Graphics2D object, however there does not seem to be an easy way to capture a user clicking on one of these and moving it so that I can redraw the graph.
Can anyone suggest the best/easiest way to implement this? Just looking for a point in the right direction.

Not reinventing the wheel is always the best way, there are plenty of excellent libraries you can use: http://www.jfree.org/jfreechart/
If you are looking to implement this yourself, you would listen to mouse events on whatever component you're actually using to display your chart (say a JPanel), and then would have to convert between screen and chart coordinates to figure out what you need to change.

Related

Barrel distortion effect for image (JavaFX)

I'm looking for some way to set background image with barrel distortion effect(FishEye/FOV) for node using JavaFX. I found algorithm with pixel manipulation, but I want to find some another way(some hack) for reach it. This effect will be use for create node background high definition image changing animation(animation wil be change factor(power/value/degree?)) of this effect.
I'd like to offer an alternative approach which is much more efficient (real-time capable). Any solution which is based on direct pixel manipulations is doomed to be very inefficient especially for a "high definition image".
Instead I'd propose to use a TriangleMesh for this and use the image as its texture. You can then apply any kind of distortion you like by just manipulating the texture coordinates. This approach can be easily integrated into any 2D graphics via the JavaFX scene graph.
I am actively using this concept for on-the-fly reprojection of raster map tiles, so I know it works.
I will answer this question in the spirit that it was asked, i.e. no code.
JavaFX has an effect framework.
There is no in-built fisheye effect.
You could create your own custom fisheye effect implementation and plug it into the effect framework if you are a skilled developer.
Easier would be to apply your algorithm using a WritableImage with a PixelWriter or Canvas. Perhaps that could even plug into the effect framework (if you actually needed to do that, which you probably don't) using an ImageInput.
For an example of applying an algorithm to the pixels in an input image see:
Reduce number of colors and get color of a single pixel
Of course, you would use a fisheye algorithm (coded for JavaFX instead of the linked implementations) for a fisheye transform.
To animate use an AnimationTimer or, again for skilled developers, create a custom transition that plugs into the JavaFX animation framework.
You can add properties to your custom effect and manipulate them using additional properties defined on the custom transition you create.
Providing a complete solution is out of scope for a StackOverflow answer. To get help with individual tasks, split the problem up into different pieces, e.g. creating a custom effect, manipulating pixels to create a fisheye, animating an effect on an image or timeline, etc. Write the code and ask questions about the actual code with a minimal example for the problem portion you are trying to solve when you get stuck.

Confused with image scaling and positioning in libgdx

I'm having quite a bit of difficulty wrapping my head around the actual display side of things with libgdx. That is, it just seems fairly jumbled in terms of what needs to be done in order to actually put something up onto the screen. I guess my confusion can sort of be separated into two parts:
What exactly needs to be done in terms of creating an image? There's
Texture, TextureRegion, TextureAtlas, Sprite, Batch, and probably a
few other art related assets that I'm missing. How do these all
relate and tie into each other? What's the "production chain" among
these I guess would be a way of putting it.
In terms of putting
whatever is created from the stuff above onto the monitor or
display, how do the different coordinate and sizing measures relate
and translate to and from each other? Say there's some image X that
I want to put on the screen. IT's got it's own set of dimensions and
coordinates, but then there's also a viewport size (is there a
viewport position?) and a camera position (is there a camera size?).
On top of all that, there's also the overall dispaly size that's
from Gdx.graphics. A few examples of things I might want to do could
be as follow:
X is my "global map" that is bigger than my screen
size. I want to be able to scroll/pan across it. What are the
coordinates/positions I should use when displaying it?
Y is bigger
than my screen size. I want to scale it down and have it always be
in the center of the screen/display. What scaling factor do I use
here, and which coordinates/positions?
Z is smaller than my screen
size. I want to stick it in the upper left corner of my screen and
have it "stick" to the global map I mentioned earlier. Which
positioning system do I use?
Sorry if that was a bunch of stuff... I guess the tl;dr of that second part is just which set of positions/coordinates, sizes, and scales am I supposed to do everything in terms of?
I know this might be a lot to ask at once, and I also know that most of this stuff can be found online, but after sifting through tutorial after tutorial, I can't seem to get a straight answer as to how these things all relate to each other. Any help would be appreciated.
Texture is essentially the raw image data.
TextureRegion allows you to grab smaller areas from a larger texture. For example, it is common practice to pack all of the images for your game/app into a single large texture (the LibGDX “TexturePacker” is a separate program that does this) and then use regions of the larger texture for your individual graphics. This is done because switching textures is a heavy and slow operation and you want to minimize this process.
When you pack your images into a single large image with the TexturePacker it creates a “.atlas” file which stores the names and locations of your individual images. TextureAtlas allows you to load the .atlas file and then extract your original images to use in your program.
Sprite adds position and color capabilities to the texture. Notice that the Texture API has no methods for setting/getting position or color. Sprites will be your characters and other objects that you can actually move around and position on the screen.
Batch/SpriteBatch is an efficient way of drawing multiple sprites to the screen. Instead of making drawing calls for each sprite one at a time the Batch does multiple drawing calls at once.
And hopefully I’m not adding to the confusion, but another I option I really like is using the “Actor” and “Stage” classes over the “Sprite” and “SpriteBatch” classes. Actor is similar to Sprite but adds additional functionality for moving/animating, via the act method. The Stage replaces the SpriteBatch as it uses its own internal SpriteBatch so you do not need to use the SpriteBatch explicitly.
There is also an entire set of UI components (table, button, textfield, slider, progress bar, etc) which are all based off of Actor and work with the Stage.
I can’t really help with question 2. I stick to UI-based apps, so I don’t know the best practices for working with large game worlds. But hopefully someone more knowledgeable in that area can help you with that.
This was to long to reply as a comment so I’m responding as another answer...
I think both Sprite/SpriteBatch and Actor/Stage are equally powerful as you can still animate and move with Sprite/SpriteBatch, but Actor/Stage is easier to work with. The stage has two methods called “act” and “draw” which allows the stage to update and draw every actor it contains very easily. You override the act method for each of your actors to specify what kind of action you want it to do. Look up a few different tutorials for Stage/Actor with sample code and it should become clear how to use it.
Also, I was slightly incorrect before that “Actor” is equivalent to Sprite, because Sprite includes a texture, but Actor by itself does not have any kind of graphical component. There is an extension of Actor called “Image” that includes a Drawable, so the Image class is actually the equivalent to Sprite. Actor is the base class that provides the methods for acting (or “updating”), but it doesn’t have to be graphical. I've used Actors for other purposes such as triggering audio sounds at specific times.
Atlas creates the large Texture containing all of your png files and then allows you to get regions from it for individual png's. So the pipeline for getting a specific png graphic would be Atlas > Region > Sprite/Image. Both Image and Sprite classes have constructors that take a region.

Java 2D Graphics API that can provide zooming facilities?

Actually, my work is based on displaying a diagram in the screen, and while zooming in/out, the information in the diagram becomes more/less (just like Google Map).
May anyone guide to a 2D Graphics API that can allow me zoom in/out my drawings in Java easily?
I have used Graphics2D with AffineTransform, but showing more/less details in the diagram is somehow difficult using these stuff. I actually mean that Java Graphics API does not help in showing more/less details, positioning them, changing their size, etc. I have to write code for everything and every change in my design requires too much effort to modify my code.
You should use the MVC pattern where the diagram class representing the diagram with all the details is your model, the displayed image is your view and the zoom buttons/wheel are your controllers.
Here are some quick ideas:
You could have some method that builds the rendered image always using the same "internal" size, with more or less details depending on the zoom required and then use the AffineTransform to enlarge it (which is the easiest way to zoom an image as far as I know). Each time the zoom is changed this method is invoked passing the new zoom and the image is rebuilt.
If this is not feasible (e.g. because the coordinates of the additional information are not easy to compute on a small image) you can try the other way round: first build the basic image, enlarge it, then use the method to incrementally add new informations to this image. You can even cache the images built from smaller zoom values to speed up the process.

How should I proceed to do a interactive program with drag feature and graph arrows

I'm doing a college project which I must finish in 3 months. And I have 8 hours a week to spend in that project.
The project consists in doing a graphical interface that shows many rectangles next to each other which should be movable. It should be very similar to the tabs in the chrome browser, where you can drag them to which ever position you want.
In addition to that there should be arrows connecting one rectangle to the other. And these arrows should still connect the same rectangles even when I change the order of the rectangles. The image below illustrates what I'm saying.
The image shows before and after one of the rectangles being dragged.
Since Java is my first language, I would like to use it.
My question is: What framework, APIs should I use to do this project. What will be the easiest and fastest way to do it? Should I use Swing? or JavaFX? or GWT? or other alternative?
Is there an API for handling arrows connecting objects? Maybe one used for representing graphs may be ok.
Edit: I don't know anything about Swing and neither about JavaFX. So which one would be more worthwhile learning given that I don’t have too much time this semester because I’m very busy?
This shouldn't be too hard to write from scratch.
Use this site : http://www.codeproject.com/Articles/116088/Draggable-Components-in-Java-Swing for the drag-able components
Draw arrows with some kind of parameterization (math formula) for half of an oval. Pass the draw path into a java.awt.Graphics2D pen object.
You might want to check Java Universal Network/Graph Framework.
It has some extensive support for making editable graphs while maintaining relationship among nodes and edges.
What you can do is change the icon of node to a squared rectagnle, while add logic to plot them in a straight axis so that it would look the way you want, plus it would be editable while linked arrows will remain where they should be.
But incase you don't have experience with Swing, better start learning the basis of SWING first, as JUNG framework pretty much requires some good basic knowledge of swing itself.

Does SWT Canvas Provide Tools For Mouse Move/Click Active Areas?

I'm creating an application with Java and SWT, and have a workspace generated on a Canvas. I need to make certain areas (controls) on the canvas trigger an event when mouseover-ed or clicked. Of course this could be done by listening to the MouseMoveEvent and checking the location of the mouse manually, but I would like to know if SWT provides an easier way to do this.
Thanks
As far as I know, there is no facility to automate this. You will need to register mouse listeners and investigate the x & y coordinates manually.
A different approach might be adding individual Canvas objects onto an enclosing Canvas. This way, you could add listeners to the individual controls. This will, however, use more memory (as the underlying object has a buffer, as well as the control on top) and redrawing will be more CPU intensive.
My personal preference goes to the first technique.
Thanks for the answer, Paul. I finally created an ArrayList of Rectangle objects for each control. Whenever the mousemove event triggers, I loop through each Rectangle and call Rectangle.contains() with the mouse coordinates. This solution turned out to be very organized.
In my case, the control events are homogenous (they all do the same thing), but if anyone has multiple control actions, Rectangle.data can be used to contain a Command object.

Categories

Resources