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
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/
gwt-unitCache/
build/

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

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

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.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

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() /*-{
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>