use full window canvas and try to use the real size in pixel...

vtm-gdx-html/src/org/oscim/gdx/client/GwtLauncher.java

@@ -1,15 +1,19 @@
 package org.oscim.gdx.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.GwtGraphics;
 
 public class GwtLauncher extends GwtApplication {
 
-
 	@Override
 	public GwtApplicationConfiguration getConfig() {
-		GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(1400, 800);
+		GwtApplicationConfiguration cfg = new GwtApplicationConfiguration(GwtGraphics.getWindowWidthJSNI(),
+				GwtGraphics.getWindowHeightJSNI() );
 		cfg.stencil = true;
 		cfg.fps = 25;
 
@@ -18,6 +22,10 @@ public class GwtLauncher extends GwtApplication {
 
 	@Override
 	public ApplicationListener getApplicationListener() {
+		if (GwtGraphics.getDevicePixelRatioJSNI() > 1)
+			Tile.SIZE = 400;
+		else
+			Tile.SIZE = 360;
 
 		return new GwtGdxMap();
 	}

vtm-gdx-html/src/org/oscim/gdx/emu/com/badlogic/gdx/backends/gwt/GwtApplication.java

@@ -49,13 +49,16 @@ import com.google.gwt.user.client.ui.Label;
 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.TextArea;
 import com.google.gwt.user.client.ui.VerticalPanel;
 
-/** Implementation of an {@link Application} based on GWT. Clients have to override {@link #getConfig()} and
+/**
- * {@link #getApplicationListener()}. Clients can override the default loading screen via
+ * Implementation of an {@link Application} based on GWT. Clients have to
- * {@link #getPreloaderCallback()} and implement any loading screen drawing via GWT widgets.
+ * override {@link #getConfig()} and {@link #getApplicationListener()}. Clients
- * @author mzechner */
+ * can override the default loading screen via {@link #getPreloaderCallback()}
+ * and implement any loading screen drawing via GWT widgets.
+ *
+ * @author mzechner
+ */
 public abstract class GwtApplication implements EntryPoint, Application {
 	private ApplicationListener listener;
 	private GwtApplicationConfiguration config;
@@ -63,7 +66,6 @@ public abstract class GwtApplication implements EntryPoint, Application {
 	private GwtInput input;
 	private GwtNet net;
 	private Panel root = null;
-	private TextArea log = null;
 	private int logLevel = LOG_ERROR;
 	private Array<Runnable> runnables = new Array<Runnable>();
 	private Array<Runnable> runnablesHelper = new Array<Runnable>();
@@ -78,11 +80,9 @@ public abstract class GwtApplication implements EntryPoint, Application {
 
 	@Override
 	public void onModuleLoad() {
-		consoleLog("onModuleLoad");
 		this.agentInfo = computeAgentInfo();
 		this.listener = getApplicationListener();
 		this.config = getConfig();
-		this.log = config.log;
 
 		if (config.rootPanel != null) {
 			this.root = config.rootPanel;
@@ -152,8 +152,10 @@ public abstract class GwtApplication implements EntryPoint, Application {
 			root.add(new Label("Sorry, your browser doesn't seem to support WebGL"));
 			return;
 		}
+
 		lastWidth = graphics.getWidth();
 		lastHeight = graphics.getHeight();
+
 		Gdx.app = this;
 		//Gdx.audio = new GwtAudio();
 		Gdx.graphics = graphics;
@@ -164,11 +166,15 @@ public abstract class GwtApplication implements EntryPoint, Application {
 		Gdx.input = this.input;
 		this.net = new GwtNet();
 		Gdx.net = this.net;
+		final double pixelRatio = GwtGraphics.getDevicePixelRatioJSNI();
+		consoleLog(">>>> " + config.width + "x"+ config.height + " ratio " + pixelRatio);
 
 		// tell listener about app creation
 		try {
 			listener.create();
-			listener.resize(graphics.getWidth(), graphics.getHeight());
+			listener.resize(
+					(int)(graphics.getWidth()),
+					(int)(graphics.getHeight()));
 		} catch (Throwable t) {
 			error("GwtApplication", "exception: " + t.getMessage(), t);
 			t.printStackTrace();
@@ -181,11 +187,14 @@ public abstract class GwtApplication implements EntryPoint, Application {
 			public void run() {
 				try {
 					graphics.update();
-					if (Gdx.graphics.getWidth() != lastWidth || Gdx.graphics.getHeight() != lastHeight) {
+					if (Gdx.graphics.getWidth() != lastWidth
-						GwtApplication.this.listener.resize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());
+							|| Gdx.graphics.getHeight() != lastHeight) {
+						GwtApplication.this.listener.resize(
+								(int)(Gdx.graphics.getWidth()),
+								(int)(Gdx.graphics.getHeight()));
 						lastWidth = graphics.getWidth();
 						lastHeight = graphics.getHeight();
-						Gdx.gl.glViewport(0, 0, lastWidth, lastHeight);
+						//Gdx.gl.glViewport(0, 0, lastWidth, lastHeight);
 					}
 					runnablesHelper.addAll(runnables);
 					runnables.clear();
@@ -264,75 +273,47 @@ public abstract class GwtApplication implements EntryPoint, Application {
 		return Gdx.net;
 	}
 
-	private void checkLogLabel () {
-		if (log == null) {
-			log = new TextArea();
-			log.setSize(graphics.getWidth() + "px", "200px");
-			log.setReadOnly(true);
-			root.add(log);
-		}
-	}
-
 	@Override
 	public void log(String tag, String message) {
 		if (logLevel >= LOG_INFO) {
-			checkLogLabel();
+			consoleLog(tag + ": " + message);
-			log.setText(log.getText() + "\n" + tag + ": " + message);
-			log.setCursorPos(log.getText().length() - 1);
-			System.out.println(tag + ": " + message);
 		}
 	}
 
 	@Override
 	public void log(String tag, String message, Exception exception) {
 		if (logLevel >= LOG_INFO) {
-			checkLogLabel();
+			consoleLog(tag + ": " + message + "\n" + exception.getMessage());
-			log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage() + "\n");
+			consoleLog(getStackTrace(exception));
-			log.setCursorPos(log.getText().length() - 1);
-			System.out.println(tag + ": " + message + "\n" + exception.getMessage());
-			System.out.println(getStackTrace(exception));
 		}
 	}
 
 	@Override
 	public void error(String tag, String message) {
 		if (logLevel >= LOG_ERROR) {
-			checkLogLabel();
+			consoleLog(tag + ": " + message);
-			log.setText(log.getText() + "\n" + tag + ": " + message);
-			log.setCursorPos(log.getText().length() - 1);
-			System.err.println(tag + ": " + message);
 		}
 	}
 
 	@Override
 	public void error(String tag, String message, Throwable exception) {
 		if (logLevel >= LOG_ERROR) {
-			checkLogLabel();
+			consoleLog(getStackTrace(exception));
-			log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage());
-			log.setCursorPos(log.getText().length() - 1);
-			System.err.println(tag + ": " + message + "\n" + exception.getMessage() + "\n");
-			System.out.println(getStackTrace(exception));
 		}
 	}
 
 	@Override
 	public void debug(String tag, String message) {
 		if (logLevel >= LOG_DEBUG) {
-			checkLogLabel();
+			consoleLog(tag + ": " + message + "\n");
-			log.setText(log.getText() + "\n" + tag + ": " + message + "\n");
-			log.setCursorPos(log.getText().length() - 1);
-			System.out.println(tag + ": " + message + "\n");
 		}
 	}
 
 	@Override
 	public void debug(String tag, String message, Throwable exception) {
 		if (logLevel >= LOG_DEBUG) {
-			checkLogLabel();
+			consoleLog(tag + ": " + message + "\n" + exception.getMessage());
-			log.setText(log.getText() + "\n" + tag + ": " + message + "\n" + exception.getMessage() + "\n");
+			consoleLog(getStackTrace(exception));
-			log.setCursorPos(log.getText().length() - 1);
-			System.out.println(tag + ": " + message + "\n" + exception.getMessage());
-			System.out.println(getStackTrace(exception));
 		}
 	}
 
@@ -402,8 +383,11 @@ public abstract class GwtApplication implements EntryPoint, Application {
 	public void exit() {
 	}
 
-	/** Contains precomputed information on the user-agent. Useful for dealing with browser and OS behavioral differences. Kindly
+	/**
-	 * borrowed from PlayN */
+	 * Contains precomputed information on the user-agent. Useful for dealing
+	 * with browser and OS behavioral differences. Kindly
+	 * borrowed from PlayN
+	 */
 	public static AgentInfo agentInfo() {
 		return agentInfo;
 	}
@@ -485,7 +469,7 @@ public abstract class GwtApplication implements EntryPoint, Application {
 		}
 	}
 
-	native void consoleLog(String message) /*-{
+	private native void consoleLog(String message) /*-{
-		console.log( "GWT:" + message );
+		console.log(message);
 	}-*/;
 }

vtm-gdx-html/src/org/oscim/gdx/emu/com/badlogic/gdx/backends/gwt/GwtGraphics.java

@@ -0,0 +1,346 @@
+/*******************************************************************************
+ * Copyright 2011 See AUTHORS file.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ ******************************************************************************/
+
+package com.badlogic.gdx.backends.gwt;
+
+import com.badlogic.gdx.Gdx;
+import com.badlogic.gdx.Graphics;
+import com.badlogic.gdx.graphics.GL10;
+import com.badlogic.gdx.graphics.GL11;
+import com.badlogic.gdx.graphics.GL20;
+import com.badlogic.gdx.graphics.GLCommon;
+import com.badlogic.gdx.utils.GdxRuntimeException;
+import com.google.gwt.canvas.client.Canvas;
+import com.google.gwt.dom.client.CanvasElement;
+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.webgl.client.WebGLContextAttributes;
+import com.google.gwt.webgl.client.WebGLRenderingContext;
+
+public class GwtGraphics implements Graphics {
+	CanvasElement canvas;
+	WebGLRenderingContext context;
+	GL20 gl;
+	String extensions;
+	float fps = 0;
+	long lastTimeStamp = System.currentTimeMillis();
+	float deltaTime = 0;
+	float time = 0;
+	int frames;
+	GwtApplicationConfiguration config;
+	boolean inFullscreenMode = false;
+	double pixelRatio;
+
+	public GwtGraphics(Panel root, GwtApplicationConfiguration config) {
+		Canvas canvasWidget = Canvas.createIfSupported();
+		if (canvasWidget == null)
+			throw new GdxRuntimeException("Canvas not supported");
+		canvas = canvasWidget.getCanvasElement();
+		root.add(canvasWidget);
+
+		this.pixelRatio = getDevicePixelRatioJSNI();
+
+		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);
+
+		this.config = config;
+
+		WebGLContextAttributes attributes = WebGLContextAttributes.create();
+		attributes.setAntialias(config.antialiasing);
+		attributes.setStencil(config.stencil);
+		attributes.setAlpha(false);
+		attributes.setPremultipliedAlpha(false);
+
+		context = WebGLRenderingContext.getContext(canvas, attributes);
+		context.viewport(0, 0, config.width, config.height);
+
+		this.gl = config.useDebugGL ? new GwtGL20Debug(context) : new GwtGL20(context);
+
+		Window.addResizeHandler(new ResizeHandler() {
+			@Override
+			public void onResize(ResizeEvent event) {
+				int w = getWindowWidthJSNI();
+				int h = getWindowHeightJSNI();
+
+				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() /*-{
+		return $wnd.devicePixelRatio || 1.0;
+	}-*/;
+
+	public static native int getWindowWidthJSNI() /*-{
+		return $wnd.innerWidth;
+	}-*/;
+
+	public static native int getWindowHeightJSNI() /*-{
+		return $wnd.innerHeight;
+	}-*/;
+
+	public WebGLRenderingContext getContext() {
+		return context;
+	}
+
+	@Override
+	public boolean isGL11Available() {
+		return false;
+	}
+
+	@Override
+	public boolean isGL20Available() {
+		return true;
+	}
+
+	@Override
+	public GLCommon getGLCommon() {
+		return gl;
+	}
+
+	@Override
+	public GL10 getGL10() {
+		return null;
+	}
+
+	@Override
+	public GL11 getGL11() {
+		return null;
+	}
+
+	@Override
+	public GL20 getGL20() {
+		return gl;
+	}
+
+	@Override
+	public int getWidth() {
+		return canvas.getWidth();
+	}
+
+	@Override
+	public int getHeight() {
+		return canvas.getHeight();
+	}
+
+	@Override
+	public float getDeltaTime() {
+		return deltaTime;
+	}
+
+	@Override
+	public int getFramesPerSecond() {
+		return (int) fps;
+	}
+
+	@Override
+	public GraphicsType getType() {
+		return GraphicsType.WebGL;
+	}
+
+	@Override
+	public float getPpiX() {
+		return 96;
+	}
+
+	@Override
+	public float getPpiY() {
+		return 96;
+	}
+
+	@Override
+	public float getPpcX() {
+		return 96 / 2.54f;
+	}
+
+	@Override
+	public float getPpcY() {
+		return 96 / 2.54f;
+	}
+
+	@Override
+	public boolean supportsDisplayModeChange() {
+		return true;
+	}
+
+	@Override
+	public DisplayMode[] getDisplayModes() {
+		return new DisplayMode[] { new DisplayMode(getScreenWidthJSNI(), getScreenHeightJSNI(), 60,
+				8) {
+		} };
+	}
+
+	private native int getScreenWidthJSNI() /*-{
+		return $wnd.screen.width;
+	}-*/;
+
+	private native int getScreenHeightJSNI() /*-{
+		return $wnd.screen.height;
+	}-*/;
+
+	private native boolean isFullscreenJSNI() /*-{
+		if ("webkitIsFullScreen" in $doc) {
+			return $doc.webkitIsFullScreen;
+		}
+		if ("mozFullScreen" in $doc) {
+			return $doc.mozFullScreen;
+		}
+		return false
+	}-*/;
+
+	private void fullscreenChanged() {
+		if (!isFullscreen()) {
+			canvas.setWidth(config.width);
+			canvas.setHeight(config.height);
+		}
+	}
+
+	private native boolean setFullscreenJSNI(GwtGraphics graphics, CanvasElement element) /*-{
+		if (element.webkitRequestFullScreen) {
+			element.width = $wnd.screen.width;
+			element.height = $wnd.screen.height;
+			element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
+			$doc.addEventListener(
+							"webkitfullscreenchange",
+							function() {
+								graphics.@com.badlogic.gdx.backends.gwt.GwtGraphics::fullscreenChanged()();
+							}, false);
+			return true;
+		}
+		if (element.mozRequestFullScreen) {
+			element.width = $wnd.screen.width;
+			element.height = $wnd.screen.height;
+			element.mozRequestFullScreen();
+			$doc.addEventListener(
+							"mozfullscreenchange",
+							function() {
+								graphics.@com.badlogic.gdx.backends.gwt.GwtGraphics::fullscreenChanged()();
+							}, false);
+			return true;
+		}
+		return false;
+	}-*/;
+
+	private native void exitFullscreen() /*-{
+		if ($doc.webkitExitFullscreen)
+			$doc.webkitExitFullscreen();
+		if ($doc.mozExitFullscreen)
+			$doc.mozExitFullscreen();
+	}-*/;
+
+	@Override
+	public DisplayMode getDesktopDisplayMode() {
+		return new DisplayMode(getScreenWidthJSNI(), getScreenHeightJSNI(), 60, 8) {
+		};
+	}
+
+	@Override
+	public boolean setDisplayMode(DisplayMode displayMode) {
+		if (displayMode.width != getScreenWidthJSNI()
+				&& displayMode.height != getScreenHeightJSNI())
+			return false;
+		return setFullscreenJSNI(this, canvas);
+	}
+
+	@Override
+	public boolean setDisplayMode(int width, int height, boolean fullscreen) {
+		if (fullscreen) {
+			if (width != getScreenWidthJSNI() && height != getScreenHeightJSNI())
+				return false;
+			return setFullscreenJSNI(this, canvas);
+		} else {
+			if (isFullscreenJSNI())
+				exitFullscreen();
+			canvas.setWidth(width);
+			canvas.setHeight(height);
+			canvas.getStyle().setWidth(width, Unit.PX);
+			canvas.getStyle().setHeight(height, Unit.PX);
+			return true;
+		}
+	}
+
+	@Override
+	public BufferFormat getBufferFormat() {
+		return new BufferFormat(8, 8, 8, 0, 16, config.stencil ? 8 : 0, 0, false);
+	}
+
+	@Override
+	public boolean supportsExtension(String extension) {
+		if (extensions == null)
+			extensions = Gdx.gl.glGetString(GL10.GL_EXTENSIONS);
+		return extensions.contains(extension);
+	}
+
+	public void update() {
+		long currTimeStamp = System.currentTimeMillis();
+		deltaTime = (currTimeStamp - lastTimeStamp) / 1000.0f;
+		lastTimeStamp = currTimeStamp;
+		time += deltaTime;
+		frames++;
+		if (time > 1) {
+			this.fps = frames;
+			time = 0;
+			frames = 0;
+		}
+	}
+
+	@Override
+	public void setTitle(String title) {
+	}
+
+	@Override
+	public void setVSync(boolean vsync) {
+	}
+
+	@Override
+	public float getDensity() {
+		return 96.0f / 160;
+	}
+
+	@Override
+	public void setContinuousRendering(boolean isContinuous) {
+	}
+
+	@Override
+	public boolean isContinuousRendering() {
+		return false;
+	}
+
+	@Override
+	public void requestRendering() {
+	}
+
+	@Override
+	public float getRawDeltaTime() {
+		return getDeltaTime();
+	}
+
+	@Override
+	public boolean isFullscreen() {
+		return isFullscreenJSNI();
+	}
+}

vtm-gdx-html/war/index.html

@@ -3,17 +3,31 @@
 <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>
 canvas {
 	cursor: default;
 	outline: none;
+	position: fixed;
+	left: 0;
+	top: 0;
 }
 </style>
 </head>
 
 <body>
+	<script type="text/javascript" src="js/_tessellate.js"></script>
+	<script type="text/javascript" src="js/tessellate.js"></script>
 	<div align="center" id="embed-org.oscim.gdx.GwtDefinition"></div>
-		<script type="text/javascript" src="org.oscim.gdx.GwtDefinition/org.oscim.gdx.GwtDefinition.nocache.js"></script>
+	<script type="text/javascript"
+		src="org.oscim.gdx.GwtDefinition/org.oscim.gdx.GwtDefinition.nocache.js"></script>
 </body>
 
 <script>
@@ -29,7 +43,9 @@
 		evt.target.style.cursor = '';
 	}
 
-		document.getElementById('embed-org.oscim.gdx.GwtDefinition').addEventListener('mousedown', handleMouseDown, false);
+	document.getElementById('embed-org.oscim.gdx.GwtDefinition')
-		document.getElementById('embed-org.oscim.gdx.GwtDefinition').addEventListener('mouseup', handleMouseUp, false);
+			.addEventListener('mousedown', handleMouseDown, false);
+	document.getElementById('embed-org.oscim.gdx.GwtDefinition')
+			.addEventListener('mouseup', handleMouseUp, false);
 </script>
 </html>