Leo Forney Leo Forney - 1 year ago 60
Android Question

Javascript not passing through on local webview page

Hi I am trying to make an android application that you can draw on a canvas and I found html was the easiest to do this. I grabbed a couple of code samples and created a project, I am only 1/2 way done and I am stuck on this little frustrating part. When I click on a button in the menu to clear the canvas, the javascript doesn't pass through and clear the canvas on the html page. Here is my code...
MainActivity.java

package tk.leoforney.ftcscorer;

import android.content.res.AssetManager;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.Reader;
import java.io.StringWriter;
import java.io.Writer;

public class MainActivity extends AppCompatActivity {

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

final WebView htmlWebView = (WebView)findViewById(R.id.fieldPad);
WebSettings webSetting = htmlWebView.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setDisplayZoomControls(true);
htmlWebView.setWebChromeClient(new WebChromeClient(){
public void onPageFinished(WebView view, String url) {
final Button button = (Button) findViewById(R.id.clearCanvas);
button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.KITKAT) {
htmlWebView.evaluateJavascript("newCanvas()", null);
} else {
htmlWebView.loadUrl("javascript:newCanvas()");
}
}
});
}
});
htmlWebView.getSettings().setAllowFileAccess(true);

String htmlFilename = "index.html";
AssetManager mgr = getBaseContext().getAssets();
try {
InputStream in = mgr.open(htmlFilename, AssetManager.ACCESS_BUFFER);
String htmlContentInStringFormat = StreamToString(in);
in.close();
htmlWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);

} catch (IOException e) {
e.printStackTrace();
}

}

public static String StreamToString(InputStream in) throws IOException {
if(in == null) {
return "";
}
Writer writer = new StringWriter();
char[] buffer = new char[1024];
try {
Reader reader = new BufferedReader(new InputStreamReader(in, "UTF-8"));
int n;
while ((n = reader.read(buffer)) != -1) {
writer.write(buffer, 0, n);
}
} finally {
}
return writer.toString();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

return super.onOptionsItemSelected(item);
}
}


index.html

<!doctype html>
<html>
<head>
<title>Coaches playbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<script type="text/javascript" src="jquery.min.js">

</script>
<script type="text/javascript">
var ctx, color = "#000";

$(document).ready(function () {

// setup a new canvas for drawing wait for device init
setTimeout(function(){
newCanvas();
}, 1000);

// reset palette selection (css) and select the clicked color for canvas strokeStyle
$(".palette").click(function(){
$(".palette").css("border-color", "#777");
$(".palette").css("border-style", "solid");
$(this).css("border-color", "#fff");
$(this).css("border-style", "dashed");
color = $(this).css("background-color");
ctx.beginPath();
ctx.strokeStyle = color;
});

// link the new button with newCanvas() function
$("#new").click(function() {
newCanvas();
});
});

// function to setup a new canvas for drawing
function newCanvas(){
//define and resize canvas
$("#content").height($(window).height());
var canvas = '<canvas id="canvas" width="'+$(window).width()+'" height="'+$(window).height()+'"></canvas>';
$("#content").html(canvas);

// setup canvas
ctx=document.getElementById("canvas").getContext("2d");
ctx.strokeStyle = color;
ctx.lineWidth = 3;


// setup to trigger drawing on mouse or touch
$("#canvas").drawTouch();
$("#canvas").drawPointer();
$("#canvas").drawMouse();
var canvasHeight
}

// prototype to start drawing on touch using canvas moveTo and lineTo
$.fn.drawTouch = function() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.changedTouches[0].pageX;
y = e.changedTouches[0].pageY;
ctx.lineTo(x,y);
ctx.stroke();
};
$(this).on("touchstart", start);
$(this).on("touchmove", move);
};

// prototype to start drawing on pointer(microsoft ie) using canvas moveTo and lineTo
$.fn.drawPointer = function() {
var start = function(e) {
e = e.originalEvent;
ctx.beginPath();
x = e.pageX;
y = e.pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
e.preventDefault();
e = e.originalEvent;
x = e.pageX;
y = e.pageY;
ctx.lineTo(x,y);
ctx.stroke();
};
$(this).on("MSPointerDown", start);
$(this).on("MSPointerMove", move);
};

// prototype to start drawing on mouse using canvas moveTo and lineTo
$.fn.drawMouse = function() {
var clicked = 0;
var start = function(e) {
clicked = 1;
ctx.beginPath();
x = e.pageX;
y = e.pageY;
ctx.moveTo(x,y);
};
var move = function(e) {
if(clicked){
x = e.pageX;
y = e.pageY;
ctx.lineTo(x,y);
ctx.stroke();
}
};
var stop = function(e) {
clicked = 0;
};
$(this).on("mousedown", start);
$(this).on("mousemove", move);
$(window).on("mouseup", stop);

$(document).ready(function () {
if(window.location.indexOf("newCanvas") >= 0)
{
newCanvas();
}
});
};
</script>
<style>
body {
margin:0px;
width:100%;
height:100%;
overflow:hidden;
font-family:Arial;
/* prevent text selection on ui */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
/* prevent scrolling in windows phone */
-ms-touch-action: none;
/* prevent selection highlight */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#content{
position: absolute;
top:0px;
bottom: 100%;
height: 100%;
width: 100%;
overflow:hidden;
background-color:#fff;
}
#canvas {
cursor: crosshair;
background: url('field.png') no-repeat center center fixed;
background-size: 100% 100%;
background-position: center top;
top:0px;
bottom: auto;
}
</style>
</head>
<body>
<div id="page">
<div id="content"><p style="text-align:center">Loading Canvas...</p></div>
<!-- <div class="footer">
<div class="palette-case">
<div id="new" class="action-button">Clear</div>
<div class="palette-box">
<div class="palette red"></div>
</div>
<div class="palette-box">
<div class="palette blue"></div>
</div>
<div style="clear:both"></div>
</div></div> -->
</div>
</body>
</html>


activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="tk.leoforney.ftcscorer"
android:orientation="vertical">

<WebView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/fieldPad"
android:layout_width="match_parent"
android:layout_height="365dp"
/>
</LinearLayout>


menu_main.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
<!--
<item android:id="@+id/action_settings" android:title="@string/action_settings"
android:orderInCategory="100" app:showAsAction="never" />
-->
<item android:id="@+id/clearCanvas" android:title="@string/action_clear" android:orderInCategory="100" app:showAsAction="never" />
</menu>


If anybody can figure this out that would be awesome! thanks...

Answer Source

Thanks all. I just had to move the button click event down to the oncreateoptionsmenu function.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download