GWT Google Map Api V3 - broken when changing it - gwt

It is working fine for me for the first time it is rendered.
But, If I change anything over the map or recreate it, its broken.
Here is the screen shot for how it looks.
Here is a screen shot after I changed the results per page value.
This is my code.
#UiField DivElement mapPanel;
private GoogleMap googleMap;
public void loadAllMarkers(final List<LatLng> markers)
{
if(!markers.isEmpty())
{
final MapOptions options = MapOptions.create();
options.setMapTypeId(MapTypeId.ROADMAP);
googleMap = GoogleMap.create(mapPanel, options);
final LatLngBounds latLngBounds = LatLngBounds.create();
for(LatLng latLng : markers)
{
final MarkerOptions markerOptions = MarkerOptions.create();
markerOptions.setPosition(latLng);
markerOptions.setMap(googleMap);
final Marker marker = Marker.create(markerOptions);
latLngBounds.extend(marker.getPosition());
}
googleMap.setCenter(latLngBounds.getCenter());
googleMap.fitBounds(latLngBounds);
}
}
I am calling the loadAllMarkers() method whenever new results needs to be loaded.
Can someone point out what I am doing wrong here.

This seems to come from the following (which I pulled from a Google+ Community - GWT Maps V3 API):
Brandon DonnelsonMar 5, 2013
I've had this happen and forgotten why it is, but
mapwidget.triggerResize() will reset the tiles. This seems to happen
when the onAttach occurs and animation exists meaning that the div
started smaller and increases in side, but the map has already
attached. At the end of the animation, the map doesn't auto resize.
I'v been meaning to investigate auto resize but I haven't had time to
attack it yet.
In your case, you would call googleMap.triggerResize() after you finish your changes. this solved my problem when I had the exact same issue. I know it's a little late, but I hope it helps!
Another answer there was to extend the Map widget with the following:
#Override
protected void onAttach() {
super.onAttach();
Timer timer = new Timer() {
#Override
public void run() {
resize();
}
};
timer.schedule(5);
}
/*
* This method is called to fix the Map loading issue when opening
* multiple instances of maps in different tabs
* Triggers a resize event to be consumed by google api in order to resize view
* after attach.
*
*/
public void resize() {
LatLng center = this.getCenter();
MapHandlerRegistration.trigger(this, MapEventType.RESIZE);
this.setCenter(center);
}

Related

How to interact with Canvas through the center of the screen when the cursor is in a locked state in Unity3d?

I tried several ways, but none of them looked like the right solution.
One solution that only works for Windows and only in full screen mode. However, this solution does not work well and looks very wrong:
[System.Runtime.InteropServices.DllImport("user32.dll")]
public static extern int SetCursorPos ( int x , int y );
void SetCursorPositionToCenter()
{
  SetCursorPos(Screen.width/2, Screen.height/2);
}
I also tried to override the BaseInput class. This script is needed so that Input does not come from the mouse, but through the center of the screen. However, when moving the cursor to the blocked state, the BaseInput override is ignored. I assume that this is due to the fact that this function is not called at all when the cursor is put into the locked state.
public class MyInput : BaseInput {
  public override Vector2 mousePosition{
    get { return Camera.main.ViewportToScreenPoint(new Vector3(0.5f, 0.5f)); }
  }
  public void Start(){
    GetComponent<StandaloneInputModule>().inputOverride = this;
  }
}
Is it possible to interact with Canvas through the center of the screen when the cursor is locked? It is important that all Canvas events are handled.

JavaFX Canvas Update

I've been working on switching my applications from Swing to JavaFX. I've been working on a room escape game which displays a description of the item on which the user clicks. In Swing, I'd subclass JComponent and override the paintComponent(Graphics) method. I could draw the text there, knowing that the method is constantly called to update the screen. However, using the JavaFX Canvas, there is no method that is called constantly, which makes this task harder. I attempted save()ing the GraphicsContext after I drew the images and called restore() when I wanted to remove the text, but to no avail. Here's the important code:
package me.nrubin29.jescape;
import javafx.application.Platform;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.shape.Rectangle;
import java.util.Timer;
import java.util.TimerTask;
public class RoomPane extends Canvas {
private Room room;
private Toast toast;
public RoomPane() {
super(640, 480);
setOnMouseClicked(e -> {
for (JObject o : room.getObjects()) {
if (o.getBounds().contains(e.getX(), e.getY())) {
toast = new Toast(o.getDescription());
}
}
});
new Timer().schedule(new TimerTask() {
#Override
public void run() {
if (toast == null) {
return;
}
if (toast.decrement()) { // Decrements the internal counter. If the count is 0, this method returns true.
toast = null;
Platform.runLater(() -> getGraphicsContext2D().restore());
}
else {
Platform.runLater(() -> getGraphicsContext2D().strokeText(toast.getText(), 300, 100));
}
}
}, 0, 1000);
}
public void changeRoom(Room room) {
this.room = room;
GraphicsContext g = getGraphicsContext2D();
g.drawImage(room.getBackground(), 0, 0);
for (JObject o : room.getObjects()) {
g.drawImage(o.getImage(), getCenterX(o.getBounds()), getCenterY(o.getBounds()));
}
g.save();
}
}
I attempted save()ing the GraphicsContext after I drew the images and called restore() when I wanted to remove the text, but to no avail.
save and restore have nothing to with removing things like text, what they do is save in a stack the state of various settings like a stroke or fill to use to draw shapes and allow them to be popped off the stack for application later. Those routines don't effect the pixels drawn on the canvas at all.
To remove something from a GraphicsContext, you can either draw over the of it, or clear it. For your code, what you could do is snapshot the canvas node where you are trying to save it, then draw your snapshot image onto the canvas where you are trying to restore it. It is probably not the most efficient way of handling drawing (a smarter routine which just draws only damaged area where the text is would be better, but probably not required for your simple game).
However, using the JavaFX Canvas, there is no method that is called constantly
Rather than using a timer to trigger canvas calls, use a AnimationTimer or a Timeline. The AnimationTimer has a callback method which is invoked every pulse (60 times a second, or as fast as JavaFX can render frames, whichever is the lesser), so it gives you an efficient hook into the JavaFX pulse based rendering system. The Timeline can have keyframes which are invoked at user specified durations and each keyframe can have an event handler callback which is invoked at that duration.
Using the built-in JavaFX animation framework, you don't have to worry about multi-threading issues and doing things like Platform.runLater which overly complicate your code and can easily lead to subtle and serious errors.
On a kind of unrelated note, for a simple game like this, IMO you are probably better off recoding it completely to use the JavaFX scene graph rather than a canvas. That way you will be working at a higher level of abstraction rather than clip areas and repainting damaged paint components.

How to set the Droppable/Draggable Event on the mouse cursor

I've implemented the Drag-n-Drop effects in Wicket using the Ajax Behavior. If I dragg the Image over the tree nodes, the position of droppable accept is in the middle of image. How to set this position (event) on the cursor?
Thank you.
Also I found it. The solution is:
DroppableAjaxBehavior b = new DroppableAjaxBehavior() {
#Override
public void onDrop(Component droppedComponent, AjaxRequestTarget target) {
//do something to handle event
}
};
b.setTolerance(ToleranceEnum.POINTER);

Images getting cut off using Swing

I am writing a tile based platform game. At the moment I am trying to get 400 tiles to display at once. This is my panel. On the top and left sides everything is working great but on the right and bottom sides the images are cut off by a few pixels. Each image is 32*32. All of blocks are initialized. None are null. What is wrong here?
public class Pane extends JPanel implements ActionListener{
private static final long serialVersionUID = 1L;
Timer timer;
boolean setup = false;
Block[][] blocks;
Level level;
public Pane()
{
level = new Level();
level.Generate();
blocks = level.Parse();
setBackground(Color.WHITE);
timer = new Timer(25, this);
timer.start();
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D)g;
for(Block[] b : blocks)
{
for(Block bx : b)
{
// Debug code if(bx.letter.equals("D"))
// Debug codeSystem.out.println(bx.y*32 +" = "+ bx.x*32);
g2d.drawImage(bx.bpic, bx.x*32, bx.y*32, this);
}
}
Toolkit.getDefaultToolkit().sync();
g.dispose();
}
#Override
public void actionPerformed(ActionEvent e) {
repaint();
}
}
on the right and bottom sides the images are cut off by a few pixels
If you mean the right and bottom sides of the whole panel (not on the single tiles), than it's probably a LayoutManager related problem. The solution depends on the layout manager you are using for the component your JPanel will be added to.
You could try to specify the minimum/preferred size of your JPanel with:
Pane pane = new Pane();
pane.setPreferredSize(...);
pane.setMinimumSize(...);
In order to specify its minimum dimension accordingly to the size of the generated image (32 * COL , 32 * ROW).
Unfortunately the effectiveness of the setPreferredSize call depends on the layout manager of your Pane parent component.
JComponent can do that basically and can return very easily something as MinimumSize or PreferredSize, valid for majority of standard Swing LayoutManagers, examples here.

GWT Animation final value is not respected

I have a FlowPanel that I'm trying to animate back and forth like an iphone nav. (See this post for my original question on how to do this)
So I have it "working" with the code shown below. I say working in quotes because I'm finding that my final position of my scroller is not precise and always changes when scrolling.
The GWT.log always says the actual values I'm looking for, so for instance with the call below to scrollTo, my GWT.log says:
ScrollStart: 0 scrollStop: -246
But when I actually analyze the element in fireBug, its css, left position is never exactly -246px. Sometimes it's off by as much as 10px so my panel has just stopped scrolling before being finished.
The worst part is that this nav animates back and forth, so subsequent clicks can really throw it off, and I need pixel perfect positioning otherwise the whole things looks off.
I don't even know where to start with debugging this other than what I've already done. Any tips are appreciated.
EDIT: Additional logging information:
Logging inside the onUpdate shows this:
Updating: progress: 0.09319577524960648 position: -22.926160711403195
Updating: progress: 0.1328387452821571 position: -32.67833133941065
Updating: progress: 0.609071620698271 position: -149.83161869177468
Updating: progress: 0.7269952498697734 position: -178.84083146796425
Updating: progress: 0.9852532367342712 position: -242.37229623663072
AnimationComplete: final scrollStart/scrollStop: 0/-246
Why does it end at 0.98 % ???
Code to call animation
scroller = new Scroller();
scroller.scrollTo(-246,400);
Animation Code
public class Scroller extends Animation {
private FlowPanel scroller;
private final Element e;
public Scroller(){
scroller = new FlowPanel();
e = scroller.getElement();
}
public void scrollTo(int position, int milliseconds) {
scrollStart = e.getOffsetLeft();
scrollStop = position;
GWT.log("ScrollStart: " + scrollStart + " scrollStop: " + scrollStop);
run(milliseconds);
}
#Override
protected void onUpdate(double progress) {
double position = scrollStart + (progress * (scrollStop - scrollStart));
e.getStyle().setLeft(position, Style.Unit.PX);
}
}
onComplete gets called when the animation is finished (and onStart gets called before it starts), so override that if you want to take an action when the animation is 100% done:
public class Scroller extends Animation {
...
#Override
protected void onComplete() {
e.getStyle().setLeft(scrollStop, Style.Unit.PX);
}
}
Edit As brad notes, the docs aren't very clear that onComplete is what's called when the animation is finished. The Javadoc says Animation.onUpdate is:
Called when the animation should be
updated. The value of progress is
between 0.0 and 1.0 inclusively
(unless you override the
interpolate(double) method to provide
a wider range of values). You can
override onStart() and onComplete() to
perform setup and tear down
procedures.
The code that calls these methods is the only thing that makes clear that onUpdate is only called when the animation has started but not yet finished - that is, when the progress value is > 0 but < 1.