xiaoyan159/vtm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

gwt: use canvas defined in html

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
vtm-web-app/.gitignore vendored
View File

@ -1,4 +1,7 @@
war/ src/main/webapp/
war/VtmWebApp/
war/assets/
war/WEB-INF/
assets/ assets/
gwt-unitCache/ gwt-unitCache/
build/ build/

7
vtm-web-app/build.gradle
View File

@ -79,9 +79,16 @@ task copyVtmAssets(type: Copy) {
include '**/*' include '**/*'
} }
task copyWarSources(type: Copy) {
from 'war/index.html'
from 'war/default.css'
into "src/main/webapp"
}
tasks.withType(JavaCompile) { compileTask -> tasks.withType(JavaCompile) { compileTask ->
compileTask.dependsOn copyThemeAssets compileTask.dependsOn copyThemeAssets
compileTask.dependsOn copyVtmAssets compileTask.dependsOn copyVtmAssets
compileTask.dependsOn copyWarSources
} }
// Configuring Eclipse classpath // Configuring Eclipse classpath

162
vtm-web-app/src/main/webapp/index.html
View File

@ -1,162 +0,0 @@
<!doctype html>
<html>
<head>
<title>vtm-gdx</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- pixel and dpi are way too simple concepts for web devs, lets also have css-pixels! -->
<!-- http://www.html5rocks.com/de/mobile/touch/ -->
<!-- http://www.quirksmode.org/mobile/viewports.html -->
<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html -->
<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<style>
.header {
background-color: #ddd;
text-align: center;
}
html, body {
height: 100%;
width: 100%;
margin: 0 0 0 0;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#gdx-canvas {
cursor: default;
outline: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
}
#credits {
position: absolute;
bottom: 0.2em;
right: 0.2em;
z-index: 20000;
color: white;
background-color: #000;
opacity: 0.5;
padding: 0.2em 0.5em 0.2em 0.5em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 11px;
}
#credits a {
color: white;
text-decoration: none;
font-variant: small-caps;
}
#search {
z-index: 20000;
position: absolute;
top: 0.5em;
left: 0.5em;
background-color: rgba(0,0,0,0.8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
visibility: hidden;
}
#listContainer{
color: #FFFFFF;
}
#nameFieldContainer, .gwt-TextBox {
width: 250px;
}
/* Turn on a 16x16 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 0px;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:end:increment {
/*background-image: url(images/scroll_cntrl_dwn.png);*/
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:start:decrement {
/*background-image: url(images/scroll_cntrl_up.png);*/
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
/*background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;*/
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
/*background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;
background-position: bottom left, 0 0;*/
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 56px;
width: 12px;
/* -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;*/
background-color: #DDDDDD;
opacity: 0.5;
}
</style>
<script type="text/javascript">
var mapconfig = {
tilesource : "oscimap4",
tileurl : "http://opensciencemap.org/tiles/vtm",
zoom : 2,
latitude : 0.0,
longitude : 0.0
}
//background : "naturalearth"
</script>
</head>
<body oncontextmenu="return false;">
- <script type="text/javascript" src="VtmWebApp/js/_tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/js/tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/VtmWebApp.nocache.js"></script>
<div id="credits">
<a href="https://github.com/hjanetzek/vtm">Source</a>
| map data © <a href="http://www.openstreemap.org">OpenStreetMap</a> contributors
| <a href="http://www.opensciencemap.org">OpenScienceMap</a>
</div>
<div id="search">
<table align="center">
<tr>
<td id="nameFieldContainer">
<td id="sendButtonContainer">
</tr>
<tr>
<td colspan="2" id="listContainer">
</tr>
</table>
</div>
</body>
</html>

44
vtm-web-app/src/org/oscim/web/client/GwtLauncher.java
View File

@ -16,57 +16,35 @@
*/ */
package org.oscim.web.client; package org.oscim.web.client;
// -draftCompile -localWorkers 2 import org.oscim.core.Tile;
import com.badlogic.gdx.ApplicationListener; import com.badlogic.gdx.ApplicationListener;
import com.badlogic.gdx.backends.gwt.GwtApplication; import com.badlogic.gdx.backends.gwt.GwtApplication;
import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration; import com.badlogic.gdx.backends.gwt.GwtApplicationConfiguration;
import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderCallback; import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderCallback;
import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderState; 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 { public class GwtLauncher extends GwtApplication {
@Override @Override
public GwtApplicationConfiguration getConfig() { public GwtApplicationConfiguration getConfig() {
GwtApplicationConfiguration cfg = GwtApplicationConfiguration cfg =
new GwtApplicationConfiguration(getWindowWidthJSNI(), new GwtApplicationConfiguration(getWindowWidth(),
getWindowHeightJSNI()); getWindowHeight());
DockLayoutPanel p = new DockLayoutPanel(Unit.EM); cfg.canvasId = "map-canvas";
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.stencil = true; cfg.stencil = true;
cfg.fps = 60; cfg.fps = 120;
return cfg; return cfg;
} }
@Override @Override
public ApplicationListener getApplicationListener() { public ApplicationListener getApplicationListener() {
// if (GwtGraphics.getDevicePixelRatioJSNI() > 1) Tile.SIZE = MapConfig.get().getTileSize();
// Tile.SIZE = 400;
// else
// Tile.SIZE = 360;
return new GwtGdxMap(); return new GwtMap();
} }
@Override @Override
@ -84,11 +62,11 @@ public class GwtLauncher extends GwtApplication {
}; };
} }
public static native int getWindowWidthJSNI() /*-{ private static native int getWindowWidth() /*-{
return $wnd.innerWidth; return $wnd.innerWidth;
}-*/; }-*/;
public static native int getWindowHeightJSNI() /*-{ private static native int getWindowHeight() /*-{
return $wnd.innerHeight; return $wnd.innerHeight;
}-*/; }-*/;

91
vtm-web-app/src/org/oscim/web/client/GwtGdxMap.java → vtm-web-app/src/org/oscim/web/client/GwtMap.java
View File

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

5
vtm-web-app/src/org/oscim/web/client/MapConfig.java
View File

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

106
vtm-web-app/war/default.css Normal file
View File

@ -0,0 +1,106 @@
.header {
background-color: #ddd;
text-align: center;
}
html,body {
height: 100%;
width: 100%;
margin: 0 0 0 0;
font-family: Arial, "MS Trebuchet", sans-serif;
}
#credits {
position: absolute;
bottom: 0.2em;
right: 0.2em;
z-index: 20000;
color: white;
background-color: #000;
opacity: 0.5;
padding: 0.2em 0.5em 0.2em 0.5em;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 11px;
}
#credits a {
color: white;
text-decoration: none;
font-variant: small-caps;
}
#search {
z-index: 20000;
position: absolute;
top: 0.5em;
left: 0.5em;
background-color: rgba(0, 0, 0, 0.8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
visibility: hidden;
}
#listContainer {
color: #FFFFFF;
}
#nameFieldContainer,.gwt-TextBox {
width: 250px;
}
/* Turn on a 16x16 scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 0px;
}
/* Turn on single button up on top, and down on bottom */
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment
{
display: block;
}
/* Turn off the down area up on top, and up area on bottom */
::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement
{
display: none;
}
/* Place The scroll down button at the bottom */
::-webkit-scrollbar-button:end:increment {
/*background-image: url(images/scroll_cntrl_dwn.png);*/
}
/* Place The scroll up button at the up */
::-webkit-scrollbar-button:start:decrement {
/*background-image: url(images/scroll_cntrl_up.png);*/
}
/* Top area above thumb and below up button */
::-webkit-scrollbar-track-piece:vertical:start {
/*background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;*/
}
/* Bottom area below thumb and down button */
::-webkit-scrollbar-track-piece:vertical:end {
/*background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
background-repeat: no-repeat, repeat-y;
background-position: bottom left, 0 0;*/
}
/* The thumb itself */
::-webkit-scrollbar-thumb:vertical {
height: 56px;
width: 12px;
/* -webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;*/
background-color: #DDDDDD;
opacity: 0.5;
}

75
vtm-web-app/war/index.html Normal file
View File

@ -0,0 +1,75 @@
<!doctype html>
<html>
<head>
<title>vtm-gdx</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- pixel and dpi are way too simple concepts for web devs, lets have css-pixels!
definition is limited only by your imagination! -->
<!-- http://www.html5rocks.com/de/mobile/touch/ -->
<!-- http://www.quirksmode.org/mobile/viewports.html -->
<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html -->
<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="default.css">
<script type="text/javascript">
var mapconfig = {
tilesource : "oscimap4",
tileurl : "http://opensciencemap.org/tiles/vtm",
zoom : 2,
latitude : 0.0,
longitude : 0.0,
tileSize : 400
}
//background : "naturalearth"
</script>
</head>
<body oncontextmenu="return false;">
<div id="credits">
<a href="https://github.com/hjanetzek/vtm">Source</a> | map data © <a
href="http://www.openstreemap.org">OpenStreetMap</a> contributors | <a
href="http://www.opensciencemap.org">OpenScienceMap</a>
</div>
<div id="canvas-area"
style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%;">
<canvas id="map-canvas"></canvas>
</div>
<script type="text/Javascript">
function canvasResize() {
div = document.getElementById('canvas-area')
canvas = document.getElementById('map-canvas')
var w = div.scrollWidth;
var h = div.scrollHeight;
//console.log(div.clientHeight + " " + div.clientWidth)
canvas.width = w;
canvas.height = h;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
}
canvasResize();
window.addEventListener('resize', canvasResize, false);
</script>
<script type="text/javascript" src="VtmWebApp/js/_tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/js/tessellate.js"></script>
<script type="text/javascript" src="VtmWebApp/VtmWebApp.nocache.js"></script>
<div id="search">
<table>
<tr>
<td id="nameFieldContainer">
<td id="sendButtonContainer">
</tr>
<tr>
<td colspan="2" id="listContainer">
</tr>
</table>
</div>
</body>
</html>

82
vtm-web/src/org/oscim/gdx/emu/com/badlogic/gdx/backends/gwt/GwtApplication.java
View File

@ -35,25 +35,14 @@ import com.badlogic.gdx.backends.gwt.preloader.Preloader.PreloaderState;
import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.utils.Array; import com.badlogic.gdx.utils.Array;
import com.badlogic.gdx.utils.Clipboard; import com.badlogic.gdx.utils.Clipboard;
import com.badlogic.gdx.utils.GdxRuntimeException;
import com.badlogic.gdx.utils.ObjectMap; import com.badlogic.gdx.utils.ObjectMap;
import com.badlogic.gdx.utils.TimeUtils; import com.badlogic.gdx.utils.TimeUtils;
import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT; import com.google.gwt.core.client.GWT;
import com.google.gwt.core.client.JavaScriptObject; import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.Timer; import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HasVerticalAlignment;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.InlineHTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Panel; import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.VerticalPanel;
/** /**
* Implementation of an {@link Application} based on GWT. Clients have to * Implementation of an {@link Application} based on GWT. Clients have to
@ -71,7 +60,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
private GwtGraphics graphics; private GwtGraphics graphics;
private GwtInput input; private GwtInput input;
private GwtNet net; private GwtNet net;
private Panel root = null; private int logLevel = LOG_ERROR;
private Array<Runnable> runnables = new Array<Runnable>(); private Array<Runnable> runnables = new Array<Runnable>();
private Array<Runnable> runnablesHelper = new Array<Runnable>(); private Array<Runnable> runnablesHelper = new Array<Runnable>();
private Array<LifecycleListener> lifecycleListeners = new Array<LifecycleListener>(); private Array<LifecycleListener> lifecycleListeners = new Array<LifecycleListener>();
@ -94,31 +83,6 @@ public abstract class GwtApplication implements EntryPoint, Application {
this.listener = getApplicationListener(); this.listener = getApplicationListener();
this.config = getConfig(); this.config = getConfig();
if (config.rootPanel != null) {
this.root = config.rootPanel;
} else {
Element element = Document.get().getElementById("embed-" + GWT.getModuleName());
if (element == null) {
VerticalPanel panel = new VerticalPanel();
panel.setWidth("" + config.width + "px");
panel.setHeight("" + config.height + "px");
panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
RootPanel.get().add(panel);
RootPanel.get().setWidth("" + config.width + "px");
RootPanel.get().setHeight("" + config.height + "px");
this.root = panel;
} else {
VerticalPanel panel = new VerticalPanel();
panel.setWidth("" + config.width + "px");
panel.setHeight("" + config.height + "px");
panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
panel.setVerticalAlignment(HasVerticalAlignment.ALIGN_MIDDLE);
element.appendChild(panel.getElement());
root = panel;
}
}
final PreloaderCallback callback = getPreloaderCallback(); final PreloaderCallback callback = getPreloaderCallback();
preloader = createPreloader(); preloader = createPreloader();
preloader.preload("assets.txt", new PreloaderCallback() { preloader.preload("assets.txt", new PreloaderCallback() {
@ -131,7 +95,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
public void update(PreloaderState state) { public void update(PreloaderState state) {
callback.update(state); callback.update(state);
if (state.hasEnded()) { if (state.hasEnded()) {
getRootPanel().clear(); //getRootPanel().clear();
setupLoop(); setupLoop();
} }
} }
@ -142,15 +106,16 @@ public abstract class GwtApplication implements EntryPoint, Application {
Gdx.app = this; Gdx.app = this;
// setup modules // setup modules
try { try {
graphics = new GwtGraphics(root, config); graphics = new GwtGraphics(null, config);
} catch (Throwable e) { } catch (Throwable e) {
root.clear(); error("GwtApplication", "exception: " + e.getMessage(), e);
root.add(new Label("Sorry, your browser doesn't seem to support WebGL")); //root.clear();
//root.add(new Label("Sorry, your browser doesn't seem to support WebGL"));
return; return;
} }
lastWidth = graphics.getWidth(); lastWidth = graphics.getWidth();
lastHeight = graphics.getHeight(); lastHeight = graphics.getHeight();
//Gdx.audio = new GwtAudio(); Gdx.app = this;
Gdx.graphics = graphics; Gdx.graphics = graphics;
Gdx.gl20 = graphics.getGL20(); Gdx.gl20 = graphics.getGL20();
Gdx.gl = Gdx.gl20; Gdx.gl = Gdx.gl20;
@ -186,7 +151,6 @@ public abstract class GwtApplication implements EntryPoint, Application {
throw new RuntimeException(t); throw new RuntimeException(t);
} }
} }
//}.scheduleRepeating((int) ((1f / config.fps) * 1000));
}.schedule(1); }.schedule(1);
} }
@ -214,7 +178,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
} }
public Panel getRootPanel() { public Panel getRootPanel() {
return root; throw new GdxRuntimeException("no panel!");
} }
long loadStart = TimeUtils.nanoTime(); long loadStart = TimeUtils.nanoTime();
@ -224,33 +188,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
} }
public PreloaderCallback getPreloaderCallback() { public PreloaderCallback getPreloaderCallback() {
final Panel preloaderPanel = new VerticalPanel(); return null;
preloaderPanel.setStyleName("gdx-preloader");
final Image logo = new Image(GWT.getModuleBaseURL() + "logo.png");
logo.setStyleName("logo");
preloaderPanel.add(logo);
final Panel meterPanel = new SimplePanel();
meterPanel.setStyleName("gdx-meter");
meterPanel.addStyleName("red");
final InlineHTML meter = new InlineHTML();
final Style meterStyle = meter.getElement().getStyle();
meterStyle.setWidth(0, Unit.PCT);
meterPanel.add(meter);
preloaderPanel.add(meterPanel);
getRootPanel().add(preloaderPanel);
return new PreloaderCallback() {
@Override
public void error(String file) {
System.out.println("error: " + file);
}
@Override
public void update(PreloaderState state) {
meterStyle.setWidth(100f * state.getProgress(), Unit.PCT);
}
};
} }
@Override @Override

45
vtm-web/src/org/oscim/gdx/emu/com/badlogic/gdx/backends/gwt/GwtGraphics.java
View File

@ -25,10 +25,8 @@ import com.badlogic.gdx.graphics.GL30;
import com.badlogic.gdx.utils.GdxRuntimeException; import com.badlogic.gdx.utils.GdxRuntimeException;
import com.google.gwt.canvas.client.Canvas; import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.dom.client.CanvasElement; import com.google.gwt.dom.client.CanvasElement;
import com.google.gwt.dom.client.Document;
import com.google.gwt.dom.client.Style.Unit; import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.logical.shared.ResizeEvent;
import com.google.gwt.event.logical.shared.ResizeHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Panel; import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.webgl.client.WebGLContextAttributes; import com.google.gwt.webgl.client.WebGLContextAttributes;
import com.google.gwt.webgl.client.WebGLRenderingContext; import com.google.gwt.webgl.client.WebGLRenderingContext;
@ -48,19 +46,24 @@ public class GwtGraphics implements Graphics {
double pixelRatio; double pixelRatio;
public GwtGraphics(Panel root, final GwtApplicationConfiguration config) { public GwtGraphics(Panel root, final GwtApplicationConfiguration config) {
Canvas canvasWidget = Canvas.createIfSupported();
if (canvasWidget == null)
throw new GdxRuntimeException("Canvas not supported");
canvas = canvasWidget.getCanvasElement();
root.add(canvasWidget);
this.pixelRatio = getDevicePixelRatioJSNI(); this.pixelRatio = getDevicePixelRatioJSNI();
canvas.setWidth((int) (config.width * pixelRatio)); if (config.canvasId == null) {
canvas.setHeight((int) (config.height * pixelRatio)); Canvas canvasWidget = Canvas.createIfSupported();
if (canvasWidget == null)
throw new GdxRuntimeException("Canvas not supported");
canvas = canvasWidget.getCanvasElement();
root.add(canvasWidget);
} else {
canvas = (CanvasElement) Document.get().getElementById(config.canvasId);
canvas.setWidth((int) (config.width * pixelRatio));
canvas.setHeight((int) (config.height * pixelRatio));
canvas.getStyle().setWidth(config.width, Unit.PX);
canvas.getStyle().setHeight(config.height, Unit.PX);
}
canvas.getStyle().setWidth(config.width, Unit.PX);
canvas.getStyle().setHeight(config.height, Unit.PX);
this.config = config; this.config = config;
WebGLContextAttributes attributes = WebGLContextAttributes.create(); WebGLContextAttributes attributes = WebGLContextAttributes.create();
@ -82,22 +85,6 @@ public class GwtGraphics implements Graphics {
} }
this.gl = config.useDebugGL ? new GwtGL20Debug(context) : new GwtGLAdapter(context); this.gl = config.useDebugGL ? new GwtGL20Debug(context) : new GwtGLAdapter(context);
canvas.setId("gdx-canvas");
Window.addResizeHandler(new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
int w = config.rootPanel.getOffsetWidth();
int h = config.rootPanel.getOffsetHeight();
canvas.getStyle().setWidth(w, Unit.PX);
canvas.getStyle().setHeight(h, Unit.PX);
Gdx.app.log("onResize", w + "/" + h);
canvas.setWidth((int) (w * pixelRatio));
canvas.setHeight((int) (h * pixelRatio));
}
});
} }
public static native double getDevicePixelRatioJSNI() /*-{ public static native double getDevicePixelRatioJSNI() /*-{

2
vtm-web/src/org/oscim/gdx/emu/org/oscim/tiling/source/LwHttp.java
View File

@ -19,7 +19,6 @@ import java.io.InputStream;
import java.net.URL; import java.net.URL;
import org.oscim.core.Tile; import org.oscim.core.Tile;
import org.oscim.tiling.source.UrlTileDataSource;
import com.google.gwt.typedarrays.client.Uint8ArrayNative; import com.google.gwt.typedarrays.client.Uint8ArrayNative;
import com.google.gwt.typedarrays.shared.Uint8Array; import com.google.gwt.typedarrays.shared.Uint8Array;
@ -33,7 +32,6 @@ public class LwHttp {
private final String mUrlPath; private final String mUrlPath;
private final byte[] mRequestBuffer; private final byte[] mRequestBuffer;
private int mContentLength = -1; private int mContentLength = -1;
private XMLHttpRequest mHttpRequest; private XMLHttpRequest mHttpRequest;