gwt: use canvas defined in html

- handle resize in js
- app option for tileSize in MapConfig js object
This commit is contained in:
Hannes Janetzek
2014-03-22 00:26:11 +01:00
parent 4115bdf4c0
commit e6eab7f773
11 changed files with 281 additions and 343 deletions

View File

@@ -16,57 +16,35 @@
*/
package org.oscim.web.client;
// -draftCompile -localWorkers 2
import org.oscim.core.Tile;
import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.backends.gwt.GwtApplication;
import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration;
import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderCallback;
import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderState;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.RootPanel;
public class GwtLauncher extends GwtApplication {
@Override
public GwtApplicationConfiguration getConfig() {
GwtApplicationConfiguration cfg =
new GwtApplicationConfiguration(getWindowWidthJSNI(),
getWindowHeightJSNI());
new GwtApplicationConfiguration(getWindowWidth(),
getWindowHeight());
DockLayoutPanel p = new DockLayoutPanel(Unit.EM);
p.setHeight("100%");
p.setWidth("100%");
RootPanel.get().add(p);
//HTML header = new HTML("header");
//p.addNorth(header, 2);
//header.setStyleName("header");
//HTML footer = new HTML("footer");
//footer.setStyleName("footer");
//p.addSouth(footer, 2);
cfg.rootPanel = new FlowPanel();
p.add(cfg.rootPanel);
//cfg.antialiasing = true;
cfg.canvasId = "map-canvas";
cfg.stencil = true;
cfg.fps = 60;
cfg.fps = 120;
return cfg;
}
@Override
public ApplicationListener getApplicationListener() {
// if (GwtGraphics.getDevicePixelRatioJSNI() > 1)
// Tile.SIZE = 400;
// else
// Tile.SIZE = 360;
Tile.SIZE = MapConfig.get().getTileSize();
return new GwtGdxMap();
return new GwtMap();
}
@Override
@@ -84,11 +62,11 @@ public class GwtLauncher extends GwtApplication {
};
}
public static native int getWindowWidthJSNI() /*-{
private static native int getWindowWidth() /*-{
return $wnd.innerWidth;
}-*/;
public static native int getWindowHeightJSNI() /*-{
private static native int getWindowHeight() /*-{
return $wnd.innerHeight;
}-*/;

View File

@@ -22,10 +22,10 @@ import org.oscim.backend.CanvasAdapter;
import org.oscim.backend.GL20;
import org.oscim.backend.GLAdapter;
import org.oscim.core.MapPosition;
import org.oscim.core.MercatorProjection;
import org.oscim.gdx.GdxAssets;
import org.oscim.gdx.GdxMap;
import org.oscim.gdx.client.GwtGdxGraphics;
import org.oscim.gdx.client.UrlUpdater;
import org.oscim.layers.tile.bitmap.BitmapTileLayer;
import org.oscim.layers.tile.vector.BuildingLayer;
import org.oscim.layers.tile.vector.VectorTileLayer;
@@ -42,11 +42,10 @@ import org.slf4j.LoggerFactory;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.backends.gwt.GwtApplication;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
class GwtGdxMap extends GdxMap {
static final Logger log = LoggerFactory.getLogger(GwtGdxMap.class);
class GwtMap extends GdxMap {
static final Logger log = LoggerFactory.getLogger(GwtMap.class);
SearchBox mSearchBox;
@@ -58,7 +57,8 @@ class GwtGdxMap extends GdxMap {
// https://bug568526.bugzilla.mozilla.org/attachment.cgi?id=447932
// <- circle/stroke test 800ms firefox, 80ms chromium..
// TODO use texture atlas to avoid drawing text-textures
if (GwtApplication.agentInfo().isLinux() && GwtApplication.agentInfo().isFirefox())
if (GwtApplication.agentInfo().isLinux() &&
GwtApplication.agentInfo().isFirefox())
GwtGdxGraphics.NO_STROKE_TEXT = true;
GwtGdxGraphics.init();
@@ -123,10 +123,9 @@ class GwtGdxMap extends GdxMap {
}
}
final String addParam =
(themeName == null ? "" : ("theme=" + themeName + "&"))
+ (mapName == null ? "" : ("map=" + mapName + "&"))
+ addOpts;
String addParam = (themeName == null ? "" : ("theme=" + themeName + "&"))
+ (mapName == null ? "" : ("map=" + mapName + "&"))
+ addOpts;
MapPosition p = new MapPosition();
p.setZoomLevel(zoom);
@@ -185,42 +184,46 @@ class GwtGdxMap extends GdxMap {
mSearchBox = new SearchBox(mMap);
// update URL hash to current position, every 5 seconds
Timer timer = new Timer() {
private int curLon, curLat, curZoom, curTilt, curRot;
private MapPosition pos = new MapPosition();
// // update URL hash to current position, every 5 seconds
// Timer timer = new Timer() {
// private int curLon, curLat, curZoom, curTilt, curRot;
// private MapPosition pos = new MapPosition();
//
// public void run() {
// mMap.viewport().getMapPosition(pos);
// int lat = (int) (MercatorProjection.toLatitude(pos.y) * 1000);
// int lon = (int) (MercatorProjection.toLongitude(pos.x) * 1000);
// int rot = (int) (pos.bearing);
// rot = (int) (pos.bearing) % 360;
// //rot = rot < 0 ? -rot : rot;
//
// if (curZoom != pos.zoomLevel || curLat != lat || curLon != lon
// || curTilt != rot || curRot != (int) (pos.bearing)) {
//
// curLat = lat;
// curLon = lon;
// curZoom = pos.zoomLevel;
// curTilt = (int) pos.tilt;
// curRot = rot;
//
// String newURL = Window.Location
// .createUrlBuilder()
// .setHash(addParam
// + "scale=" + pos.zoomLevel
// + "&rot=" + curRot
// + "&tilt=" + curTilt
// + "&lat=" + (curLat / 1000f)
// + "&lon=" + (curLon / 1000f))
// .buildString();
// Window.Location.replace(newURL);
// }
// }
// };
// timer.scheduleRepeating(5000);
public void run() {
mMap.viewport().getMapPosition(pos);
int lat = (int) (MercatorProjection.toLatitude(pos.y) * 1000);
int lon = (int) (MercatorProjection.toLongitude(pos.x) * 1000);
int rot = (int) (pos.bearing);
rot = (int) (pos.bearing) % 360;
//rot = rot < 0 ? -rot : rot;
if (curZoom != pos.zoomLevel || curLat != lat || curLon != lon
|| curTilt != rot || curRot != (int) (pos.bearing)) {
curLat = lat;
curLon = lon;
curZoom = pos.zoomLevel;
curTilt = (int) pos.tilt;
curRot = rot;
String newURL = Window.Location
.createUrlBuilder()
.setHash(addParam
+ "scale=" + pos.zoomLevel
+ "&rot=" + curRot
+ "&tilt=" + curTilt
+ "&lat=" + (curLat / 1000f)
+ "&lon=" + (curLon / 1000f))
.buildString();
Window.Location.replace(newURL);
}
}
};
timer.scheduleRepeating(5000);
UrlUpdater urlUpdater = new UrlUpdater(mMap);
urlUpdater.setParams(addParam);
urlUpdater.scheduleRepeating(5000);
}
@Override

View File

@@ -49,4 +49,9 @@ class MapConfig extends JavaScriptObject {
public final native String getBackgroundLayer() /*-{
return this.background;
}-*/;
public final native int getTileSize() /*-{
return this.tileSize || 256;
}-*/;
}