GWT Animation final value is not respected - gwt

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.

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.

In Unity, how to detect if window is being resized and if window has stopped resizing

I wanted my UI to not resize when user is still resizing the game (holding click in the window border) and only when the user has released the mouse the resize event will trigger.
I have tried to achieve it on Unity but so far I only able to detect windows size change, which my script checked every 0.5 second and if detected change it will resize the UI. But of course resizing everything caused a heavy lag, so resizing every 0.5 second is not a good option but resizing every 1 second is not a good idea either because 1 second is considered too long.
The question might be too broad but I have specified the problem as small as possible, how do I detect if user is still resizing the window? And how do I detect if user has stopped resizing the window (stop holding click at window border)?
You can't tell when someone stops dragging a window, unless you want to code a low level solution for ever desktop environment and every operating system.
Here's what worked for me with any MonoBehavior class, using the OnRectTransformDimensionsChange event:
public class StackOverflow : MonoBehaviour
{
private const float TimeBetweenScreenChangeCalculations = 0.5f;
private float _lastScreenChangeCalculationTime = 0;
private void Awake()
{
_lastScreenChangeCalculationTime = Time.time;
}
private void OnRectTransformDimensionsChange()
{
if (Time.time - _lastScreenChangeCalculationTime < TimeBetweenScreenChangeCalculations)
return;
_lastScreenChangeCalculationTime = Time.time;
Debug.Log($"Window dimensions changed to {Screen.width}x{Screen.height}");
}
}
I have some good news - sort of.
When the user resizes the window on Mac or PC,
Unity will AUTOMATICALLY re-layout everything.
BUT in fact ONLY when the user is "finished" resizing the Mac/PC window.
I believe that is what the OP is asking for - so the good news, what the OP is asking for is quite automatic.
However. A huge problem in Unity is Unity does not smoothly resize elements as the user is dragging the mouse to expand the Mac/PC window.
I have never found a solution to that problem. (A poor solution often mentioned is to check the size of the window every frame; that seems to be about the only approach.)
Again interestingly, what the OP mentions
" ..and if window has stopped resizing .."
is automatically done in Unity; in fact do nothing to achieve that.
I needed something like this for re generating a line chart, but as it has too many elements, it would be heavy to do it on every update, so I came up with this, which for me worked well:
public class ToRunOnResize : MonoBehaviour
{
private float screenWidth;
private bool screenStartedResizing = false;
private int updateCounter = 0;
private int numberOfUpdatesToRunXFunction = 15; // The number of frames you want your function to run after, (usually 60 per second, so 15 would be .25 seconds)
void Start()
{
screenWidth = Screen.width; // Identifies the screen width
}
private void Update()
{
if (Screen.width != screenWidth) // This will be run and repeated while you resize your screen
{
updateCounter = 0; // This will set 0 on every update, so the counter is reset until you release the resizing.
screenStartedResizing = true; // This lets the application know when to start counting the # of updates after you stopped resizing.
screenWidth = Screen.width;
}
if (screenStartedResizing)
{
updateCounter += 1; // This will count the updates until it gets to the numberOfUpdatesToRunXFunction
}
if (updateCounter == numberOfUpdatesToRunXFunction && screenStartedResizing)
{ // Finally we make the counter stop and run the code, in my case I use it for re-rendering a line chart.
screenStartedResizing = false;
// my re-rendering code...
// my re-rendering code...
}
}
}

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.

GWT Google Map Api V3 - broken when changing it

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);
}

Updating ListView after animation

My app has a sliding drawer for notifications. I've managed to get it to function like the android notifications including the "clear all" button.
When the clear all button is clicked my database is cleared, my list adapter is refreshed, and my list adapter gets set to the list. The view updates and the list is cleared.
When I added slide-out animation (just like jelly bean) I got a NullPointerException. The issue crops up when my adapter is set. If I comment out setting the adapter the animation runs without a problem.
// Animation
int count = drawer_list.getCount();
for (int i = 0; i < count; i++) {
View view = drawer_list.getChildAt(i);
if (view != null) {
// create an Animation for each item
Animation animation = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
animation.setDuration(300);
// ensure animation final state is "persistent"
animation.setFillAfter(true);
// calculate offset (bottom ones first, like in notification panel)
animation.setStartOffset(300 * (count - 1 - i));
// animation listener to execute action code
if (i == 0) {
animation.setAnimationListener(new AnimationListener() {
public void onAnimationStart(Animation animation) {
// NOT USED
}
public void onAnimationRepeat(Animation animation) {
// NOT USED
}
public void onAnimationEnd(Animation animation) {
// Clear table
notifications.flushNotificationTempTable_ActiveOnly();
// Update list adapter
refreshNotifications();
// Close drawer
notification_drawer.close();
}
});
}
view.startAnimation(animation);
}
}
The trouble spot is in the refreshNotifications() method when the line drawer_list.setAdapter(notificationAdapter); executes. I use this method and adapter all throughout my app and, as I said above, it works flawlessly without the animations.
I was able to solve this by eliminating the animation listener and adding a delayed runnable after it that ran my post animation code.
I was unable to find a way to set a new adapter (required because i used a custom adapter) inside the animation listener. If anyone knows how to do this I would like to know.