Map view roll (#474)

vtm-web-app/src/org/oscim/web/client/CameraRollControl.java

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2018 Izumi Kawashima
+ * Copyright 2018 devemux86
+ *
+ * This program is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU Lesser General Public License as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ * PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License along with
+ * this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+package org.oscim.web.client;
+
+import java.util.Collection;
+import java.util.HashSet;
+
+public class CameraRollControl {
+    private final String divQuerySelector;
+    public final int MAX_VALUE = 32768;
+    private Collection<BuildingSolutionControl.ValueChangeListener> listeners = new HashSet<>();
+
+    public CameraRollControl(String divQuerySelector) {
+        this.divQuerySelector = divQuerySelector;
+    }
+
+    public void init() {
+        initNative(divQuerySelector);
+        refresh();
+    }
+
+    private native void initNative(String divQuerySelector)/*-{
+var crc = $doc.querySelector(divQuerySelector);
+var that = this;
+function onUpdate(val){
+that.@org.oscim.web.client.CameraRollControl::fireValueChangeListeners(I)(val);
+}
+crc.addEventListener("input",function(){onUpdate(this.value);});
+crc.addEventListener("change",function(){onUpdate(this.value);});
+    }-*/;
+
+    private native void refresh()/*-{
+
+    }-*/;
+
+    public void addValueChangeListener(BuildingSolutionControl.ValueChangeListener l) {
+        this.listeners.add(l);
+    }
+
+    public void removeValueChangeListener(BuildingSolutionControl.ValueChangeListener l) {
+        this.listeners.remove(l);
+    }
+
+    private void fireValueChangeListeners(int val) {
+        for (BuildingSolutionControl.ValueChangeListener l : this.listeners) {
+            l.onValueChange(val, MAX_VALUE);
+        }
+    }
+
+    public interface ValueChangeListener {
+        void onValueChange(int val, int max);
+    }
+}

vtm-web-app/src/org/oscim/web/client/GwtMap.java

@@ -1,7 +1,7 @@
 /*
  * Copyright 2013 Hannes Janetzek
- * Copyright 2016-2017 Izumi Kawashima
- * Copyright 2017 devemux86
+ * Copyright 2016-2018 Izumi Kawashima
+ * Copyright 2017-2018 devemux86
  *
  * This file is part of the OpenScienceMap project (http://www.opensciencemap.org).
  *
@@ -52,6 +52,7 @@ class GwtMap extends GdxMap {
 
     BuildingLayer mBuildingLayer;
     BuildingSolutionControl mBuildingSolutionControl;
+    CameraRollControl mCameraRollControl;
     SearchBox mSearchBox;
 
     @Override
@@ -175,6 +176,17 @@ class GwtMap extends GdxMap {
                 mMap.updateMap(true);
             }
         });
+
+        mCameraRollControl = new CameraRollControl("#camera-roll-input");
+        mCameraRollControl.addValueChangeListener(new BuildingSolutionControl.ValueChangeListener() {
+            @Override
+            public void onValueChange(int val, int max) {
+                mMap.viewport().setRoll((float) val / (float) max * 180.0f);
+                mMap.updateMap(true);
+            }
+        });
+
         mBuildingSolutionControl.init();
+        mCameraRollControl.init();
     }
 }

vtm-web-app/war/default.css

@@ -111,6 +111,12 @@ html,body {
     top: 40px;
     left: 0px;
 }
+#camera-roll{
+    z-index: 20001;
+    position: absolute;
+    top: 220px;
+    left: 0px;
+}
 input[type=range][orient=vertical]{
     writing-mode: bt-lr; /* IE */
     -webkit-appearance: slider-vertical; /* WebKit */

vtm-web-app/war/index.html

@@ -76,5 +76,8 @@
 <div id="building-solution">
     <input type="range" orient="vertical" id="building-solution-input" min="0" max="65536" value="65536"/>
 </div>
+<div id="camera-roll">
+    <input type="range" orient="vertical" id="camera-roll-input" min="-32768" max="32768" value="0"/>
+</div>
 </body>
 </html>