theCrag / website

theCrag.com: Add your voice and help guide the development of the world's largest collaborative rock climbing & bouldering platform
https://www.thecrag.com/
110 stars 8 forks source link

Assess suitability for integrating topo javascript library into android app #795

Closed scd closed 10 years ago

scd commented 11 years ago

Initial tight release timeframes, workload and developer priorities mean that the first android app will go out with a rudimentary native topo drawing and updating facility.

In the long term it would be good to align the app topo tool with website capabilities by either:

  1. Integrating the topo tool javascript libraries into the app
  2. Spending time and effort enhancing the native android code so it has similar capabilities as the web version.

Adam will undertake a assessment of Brendan's js tool for use in the Andriod app.

brendanheywood commented 11 years ago

Well I think everyone knows where I stand on this one :)

Just to throw some more weight behind the argument, at some point we'll want to build an iPhone version as well, and have the same discussion all over. When I built the prototype iPhone app it was fairly trivial to create a WebView inside the ListView or PageView or whatever, populate it with a barebones html document which contains the js to render the topo, set the webview dimension to the same as the topo, and then wire up events both ways between the topo and the outside container view.

Doing this in android land looks exactly equivalent to iPhone: http://developer.android.com/reference/android/webkit/WebView.html

The html doc is created on the fly and loaded with 'webview.loadData'

Events like 'this route has been tapped' would be passed from inside the WebView to it's container by pushing a java handler object into the WebView's js environment:

Outside setup (java):

interface TopoEventHandler {
  public void selectNode(String routeId);
  public void serialiseTopo(String data);
  ... etc
}

webview.addJavascriptInterface(new TopoEventHandlerImpl(), "handler");

Inside (javascript):

handler.selectNode("123456");

Events from outside the WebView to inside can be triggered with:

Inside (html/javscript):

<html>
<div id="topo"></div>
<script>
var topo = new PhotoTopo({id:'123456', elementId: 'topo', width: 300, height: 200, .....});
</script>
</html>

Outside (java):

webView.loadUrl("javascript:topo.selectRoute('123456')");
webView.loadUrl("javascript:topo.setRouteVisibility(false)");

If we want to allow pinch and zoom, pan into the topo then that's just a matter of configuring the WebView:

webview.setDisplayZoomControls(true);

The topo js code should work as-is in this environment, but we may want to do some mods to make it more responsive by having it handle taps events rather than click events. I think this will fall out in testing whether we need this.

There are possibly other gestures we may want to implement, in the prototype iPhone app you could 'scrub' across the topo with your finger which would select each route in turn every 10 pixels or so, and if you got to the edge of the topo it would load the next topo. It synchronised this with a ListView under the topo of the routes, highlighting and scrolling the route in the table to be visible if needed. All of this can be implemented in a layer of JS around the topo in the temporary html document inside the WebView without touching the Topo js code itself.

brendanheywood commented 10 years ago

I'm gonna close this one. The question shouldn't be 'is it suitable' but 'how do we make it work'. new topo code does / will work with touch events