Cordova error message in logcat:
D/chromium(24894): Unknown chromium error: 0
D/CordovaLog(24894): file:///android_asset/www/index.html: Line 2 : Uncaught TypeError: object is not a function
E/Web Console(24894): Uncaught TypeError: object is not a function at file:///android_asset/www/index.html:2
I did not find an android_asset folder. My best bet is myapp-debug.apk/assets/www/index.html, but where should there be an issue in line 2?
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="apple-touch-icon" href="resources/icons/myApp-ico.png">
<title>myApp</title>
<script type="text/javascript" src="cordova.js"></script>
<style type="text/css">
/**
* Example of an initial loading indicator.
* It is recommended to keep this as minimal as possible to provide instant feedback
* while other resources are still being loaded for the first time
*/
html, body {
height: 100%;
background-color: #1985D0
}
#appLoadingIndicator {
position: absolute;
top: 50%;
margin-top: -15px;
text-align: center;
width: 100%;
height: 30px;
-webkit-animation-name: appLoadingIndicator;
-webkit-animation-duration: 0.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
}
#appLoadingIndicator > * {
background-color: #FFFFFF;
display: inline-block;
height: 30px;
-webkit-border-radius: 15px;
margin: 0 5px;
width: 30px;
opacity: 0.8;
}
#-webkit-keyframes appLoadingIndicator{
0% {
opacity: 0.8
}
50% {
opacity: 0
}
100% {
opacity: 0.8
}
}
</style>
<!-- The line below must be kept intact for Sencha Command to build your application -->
<script type="text/javascript">
/**
* Sencha Blink - Testing
* #author Jacky Nguyen <jacky#sencha.com>
*/
(function(global) {
var head = global.document.head,
Ext = global.Ext;
if (typeof Ext == 'undefined') {
global.Ext = Ext = {};
}
function write(content) {
document.write(content);
}
function addMeta(name, content) {
var meta = document.createElement('meta');
meta.setAttribute('name', name);
meta.setAttribute('content', content);
head.appendChild(meta);
}
Ext.blink = function(options) {
var scripts = options.js || [],
styleSheets = options.css || [],
i, ln, path, platform, theme;
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#media screen and (orientation: portrait) {" +
"#-ms-viewport {width: 320px !important;}" +
"}" +
"#media screen and (orientation: landscape) {" +
"#-ms-viewport {width: 560px !important;}" +
"}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
addMeta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
addMeta('apple-mobile-web-app-capable', 'yes');
addMeta('apple-touch-fullscreen', 'yes');
Ext.microloaded = true;
var filterPlatform = window.Ext.filterPlatform = function(platform) {
var profileMatch = false,
ua = navigator.userAgent,
j, jln, exclude;
platform = [].concat(platform);
function isPhone(ua) {
var isMobile = /Mobile(\/|\s)/.test(ua);
// Either:
// - iOS but not iPad
// - Android 2
// - Android with "Mobile" in the UA
return /(iPhone|iPod)/.test(ua) ||
(!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
(/(BlackBerry|BB)/.test(ua) && isMobile) ||
/(Windows Phone)/.test(ua);
}
function isTablet(ua) {
return !isPhone(ua) && (/iPad/.test(ua) || /Android|Silk/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
(/MSIE 10/.test(ua) && /; Touch/.test(ua)));
}
// Check if the ?platform parameter is set in the URL
var paramsString = window.location.search.substr(1),
paramsArray = paramsString.split("&"),
params = {},
testPlatform, i;
for (i = 0; i < paramsArray.length; i++) {
var tmpArray = paramsArray[i].split("=");
params[tmpArray[0]] = tmpArray[1];
}
testPlatform = params.platform;
if (testPlatform) {
return platform.indexOf(testPlatform) != -1;
}
for (j = 0, jln = platform.length; j < jln; j++) {
switch (platform[j]) {
case 'phone':
profileMatch = isPhone(ua);
break;
case 'tablet':
profileMatch = isTablet(ua);
break;
case 'desktop':
profileMatch = !isPhone(ua) && !isTablet(ua);
break;
case 'ios':
profileMatch = /(iPad|iPhone|iPod)/.test(ua);
break;
case 'android':
profileMatch = /(Android|Silk)/.test(ua);
break;
case 'blackberry':
profileMatch = /(BlackBerry|BB)/.test(ua);
break;
case 'safari':
profileMatch = /Safari/.test(ua) && !(/(BlackBerry|BB)/.test(ua));
break;
case 'chrome':
profileMatch = /Chrome/.test(ua);
break;
case 'ie10':
profileMatch = /MSIE 10/.test(ua);
break;
case 'windows':
profileMatch = /MSIE 10/.test(ua) || /Trident/.test(ua);
break;
case 'tizen':
profileMatch = /Tizen/.test(ua);
break;
case 'firefox':
profileMatch = /Firefox/.test(ua);
}
if (profileMatch) {
return true;
}
}
return false;
};
for (i = 0,ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
platform = path.platform;
exclude = path.exclude;
theme = path.theme;
path = path.path;
}
if (platform) {
if (!filterPlatform(platform) || filterPlatform(exclude)) {
continue;
}
Ext.theme = {
name: theme || 'Default'
};
}
write('<link rel="stylesheet" href="'+path+'">');
}
for (i = 0,ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
platform = path.platform;
exclude = path.exclude;
path = path.path;
}
if (platform) {
if (!filterPlatform(platform) || filterPlatform(exclude)) {
continue;
}
}
write('<script src="'+path+'"></'+'script>');
}
}
})(this);
if(document.URL.indexOf('file://')==0) {
oldBlink = Ext.blink;
Ext.blink = function(options) {
document.addEventListener("deviceready", function() {
oldBlink(options);
}, false);
}
}
</script>
</head>
<body>
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Could it be that "Line 2" does refer to something different entirely? If yes, what does it refer to?
Prettify this ugly line of code and try again to get a useful error message.
<script type="text/javascript">
(function(e) {
var c = e.document.head,
b = e.Ext;
if (typeof b == "undefined") {
e.Ext = b = {}
}
function d(f) {
document.write(f)
}
function a(f, g) {
var h = document.createElement("meta");
h.setAttribute("name", f);
h.setAttribute("content", g);
c.appendChild(h)
}
b.blink = function(p) {
var j = p.js || [],
n = p.css || [],
l, m, o, g, k;
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var h = document.createElement("style");
h.appendChild(document.createTextNode("#media screen and (orientation: portrait) {#-ms-viewport {width: 320px !important;}}#media screen and (orientation: landscape) {#-ms-viewport {width: 560px !important;}}"));
document.getElementsByTagName("head")[0].appendChild(h)
}
a("viewport", "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");
a("apple-mobile-web-app-capable", "yes");
a("apple-touch-fullscreen", "yes");
b.microloaded = true;
var f = window.Ext.filterPlatform = function(u) {
var D = false,
r = navigator.userAgent,
w, A, s;
u = [].concat(u);
function z(E) {
var i = /Mobile(\/|\s)/.test(E);
return /(iPhone|iPod)/.test(E) || (!/(Silk)/.test(E) && (/(Android)/.test(E) && (/(Android 2)/.test(E) || i))) || (/(BlackBerry|BB)/.test(E) && i) || /(Windows Phone)/.test(E)
}
function y(i) {
return !z(i) && (/iPad/.test(i) || /Android|Silk/.test(i) || /(RIM Tablet OS)/.test(i) || (/MSIE 10/.test(i) && /; Touch/.test(i)))
}
var q = window.location.search.substr(1),
t = q.split("&"),
v = {},
B, x;
for (x = 0; x < t.length; x++) {
var C = t[x].split("=");
v[C[0]] = C[1]
}
B = v.platform;
if (B) {
return u.indexOf(B) != -1
}
for (w = 0, A = u.length; w < A; w++) {
switch (u[w]) {
case "phone":
D = z(r);
break;
case "tablet":
D = y(r);
break;
case "desktop":
D = !z(r) && !y(r);
break;
case "ios":
D = /(iPad|iPhone|iPod)/.test(r);
break;
case "android":
D = /(Android|Silk)/.test(r);
break;
case "blackberry":
D = /(BlackBerry|BB)/.test(r);
break;
case "safari":
D = /Safari/.test(r) && !(/(BlackBerry|BB)/.test(r));
break;
case "chrome":
D = /Chrome/.test(r);
break;
case "ie10":
D = /MSIE 10/.test(r);
break;
case "windows":
D = /MSIE 10/.test(r) || /Trident/.test(r);
break;
case "tizen":
D = /Tizen/.test(r);
break;
case "firefox":
D = /Firefox/.test(r)
}
if (D) {
return true
}
}
return false
};
for (l = 0, m = n.length; l < m; l++) {
o = n[l];
if (typeof o != "string") {
g = o.platform;
exclude = o.exclude;
k = o.theme;
o = o.path
}
if (g) {
if (!f(g) || f(exclude)) {
continue
}
b.theme = {
name: k || "Default"
}
}
d('<link rel="stylesheet" href="' + o + '">')
}
for (l = 0, m = j.length; l < m; l++) {
o = j[l];
if (typeof o != "string") {
g = o.platform;
exclude = o.exclude;
o = o.path
}
if (g) {
if (!f(g) || f(exclude)) {
continue
}
}
d('<script src="' + o + '"><\/script>')
}
}
})(this);
if (document.URL.indexOf("file://") == 0) {
oldBlink = Ext.blink;
Ext.blink = function(a) {
document.addEventListener("deviceready", function() {
oldBlink(a)
}, false)
}
}
Ext.blink({
id: "8b19cfab-9dd1-44d0-892e-28f50a42aecd",
js: [{
path: "lzstring.js",
update: "full",
version: "1.0.0"
}, {
path: "microloader-enhancement.js",
update: "full",
version: "1.0.0"
}, {
path: "app.js",
update: "full",
version: "1.1.11"
}],
css: [{
path: "resources/css/app.css",
update: "full",
theme: "Default"
}, {
path: "resources/css/sch.css",
update: "full"
}, {
path: "resources/css/myApp.css",
update: "full"
}]
});
</script>
The webviewis just trying to make you understand that you're trying to call functions from the object Ext (like Ext.blink) but did not include any js library that would include that object.
You need to copy extjs somewhere in jour www folder and then add the missing <script type="text/javascript" src="somewhere/extjs.js"></script> line.
Next time, put your js in a separate file, you should get more accurate error messages.
I found the error to be caused by a script that is added to index.html by code from another javascript, using Ext.Loader.injectScriptElement, which roughly translates to the following JS:
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
For some reason yet to be determined, the "object is not a function" error inside the referenced script is thrown inside Cordova WebView, but not inside Chrome. Once I found the line where it is thrown and corrected it, no more error is thrown.
For some other reason yet to be determined, it is thrown as an "error in index.html:2", whereas the error could also have read "error in locale-de.js:72".
Don't ask how I found it, this tiny little problem just required a whole week of debugging...
Related
Im injecting html and js in my web view. What im trying to do is allow support on my Android phone to connect to a local Node.js Server to send and receive Audio and Video.
This is my Server.js that runs:
const HTTPS_PORT = 8443;
const fs = require('fs');
const https = require('https');
const WebSocket = require('ws');
const WebSocketServer = WebSocket.Server;
// Yes, TLS is required
const serverConfig = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem'),
};
// ----------------------------------------------------------------------------------------
// Create a server for the client html page
const handleRequest = function(request, response) {
// Render the single client html file for any request the HTTP server receives
console.log('request received: ' + request.url);
if(request.url === '/') {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end(fs.readFileSync('client/index.html'));
} else if(request.url === '/webrtc.js') {
response.writeHead(200, {'Content-Type': 'application/javascript'});
response.end(fs.readFileSync('client/webrtc.js'));
}
};
const httpsServer = https.createServer(serverConfig, handleRequest);
httpsServer.listen(HTTPS_PORT, '192.168.1.62');
// ----------------------------------------------------------------------------------------
// Create a server for handling websocket calls
const wss = new WebSocketServer({server: httpsServer});
wss.on('connection', function(ws) {
ws.on('message', function(message) {
// Broadcast any received message to all clients
console.log('received: %s', message);
wss.broadcast(message);
});
});
wss.broadcast = function(data) {
this.clients.forEach(function(client) {
if(client.readyState === WebSocket.OPEN) {
client.send(data);
}
});
};
console.log('Server running. Visit https://localhost:' + HTTPS_PORT + ' in Firefox/Chrome.\n\n\
Some important notes:\n\
* Note the HTTPS; there is no HTTP -> HTTPS redirect.\n\
* You\'ll also need to accept the invalid TLS certificate.\n\
* Some browsers or OSs may not allow the webcam to be used by multiple pages at once. You may need to use two different browsers or machines.\n'
);
This is the HTML thats viewable on the Webview in Android:
<!DOCTYPE html>
<html lang="en">
<head>
<title>P2P Video Chat</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=320, initial-scale=1" />
<script src="https://unpkg.com/peerjs#1.3.1/dist/peerjs.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
div::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
#live {
background-color: #000;
height:100%;
width:100%;
}
#local-video {
width: 100%;
background-color:black;
}
#divider{
height:20px;
background-color:black;
}
#remote-video {
width: 100%;
background-color:black;
}
#end-call {
position: absolute;
top: 0;
left: 0;
padding: 8px;
background-color: red;
color: white;
border: none;
}
.d1{border-bottom:1px solid #ffffff;font-weight:bold;font-size:22px;color:#90CAF9;top:20px;left:20px;padding:8px;background-color:#0D47A1;opacity:0.7;text-align:center;}
.s1{color:white;font-size:12px;}
.d2{position:absolute;left:20px;top:20px;width:70px;height:70px;border-radius:35px;background-color:green;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i1{width:50px;height:50px;margin-left:10px;margin-top:10px;}
#record1{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:-180px;z-index:400;}
#timer1{width:100%;margin-top:-50px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:10px;}
.d3{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:-105px;display:inline-block;z-index:1000}
.d4{font-weight:bold;margin-top:-15px;margin-left:15px;position:absolute;width:120px;height:30px;z-index:300;}
.i2{float:left;width:50px;height:50px;margin-top:3px;}
.d5{float:left;color:black;margin-top:0px;margin-left:5px;}
.d6{position:absolute;color:gray;font-size:23px;text-align:center;z-index:200;width:100%;margin-top:-22px;padding:0px;background-color:white;}
.d7{background-color:white;padding:10px;border-radius:25px;font-size:23px;}
.d8{position:absolute;opacity:0.7;padding:0px;color:white;font-weight:bold;font-size:18px;margin-top:70px;display:inline-block;z-index:400;}
#timer2{width:100%;margin-top:80px;position:absolute;text-align:center;color:white;padding:8px;z-index:800;font-size:3px;}
#record2{display:none;left:20px;border-radius:25px;width:50px;height:50px;position:absolute;background-color:red;opacity:0.7;padding:8px;color:white;font-weight:bold;font-size:18px;margin-top:135px;z-index:100}
.d9{position:absolute;left:20px;bottom:20px;width:70px;height:70px;border-radius:35px;background-color:green;z-index:1200;opacity:0.7;display:flex:justify-content:center;align-items:center;}
.i3{width:50px;height:50px;margin-left:10px;margin-top:10px;}
.d10{border-top:1px solid #ffffff;text-align:center;font-weight:bold;font-size:22px;color:#90CAF9;position:absolute;left:0;bottom:0;right:0;padding:8px;background-color:#0D47A1;opacity:0.7;}
.s2{color:white;font-size:12px;}
/* Exact resolution */
#media (-webkit-device-pixel-ratio: 1) {
}
/* Minimum resolution */
#media (-webkit-min-device-pixel-ratio: 1.1) {
.d1{font-size:8px;}
.d2{width:40px;height:40px;background-color:red;}
.d2 img{width:20px;height:20px}
#record1{width:20px;height:20px;border-radius:10px; margin-top:-100px;}
#timer1{font-size:8px;}
#record2{width:20px;height:20px;border-radius:10px;margin-top:53px;}
#timer2{font-size:8px;margin-top:15px;}
.d3{font-size:12px;display:inline-block;}
.d5{font-size:8px;margin-top:4px;}
.d6{font-size:23px;}
.d8{font-size:12px;margin-top:50px;display:inline-block;}
.d3 img{ width:20px; height:20px;margin-right:5px; padding:2px;display:inline-block;}
.d8 img{ width:20px; height:20px;margin-right:5px;padding:2px;display:inline-block;}
.i2{float:left;width:20px;height:20px;}
.d9{width:40px;height:40px;background-color:red;}
.d9 img{width:20px;height:20px;}
.i4{width:20px;height:20px;margin-right:5px;}
.i5{width:20px;height:20px;margin-right:5px;}
.d7{font-size:10px;}
.d10{font-size:8px;}
.d11{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
.d12{display:inline-block;margin-top:16px;position:absolute;width:300px;font-size:8px;}
}
/* Maximum resolution */
#media (-webkit-max-device-pixel-ratio: 3) {
}
</style>
</head>
<body style="margin:0;padding:0;overflow:hidden;" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">
<!-- App code -->
<div id="live">
<div class=""><div class="d1"><img class="i4" src="vote.png" />VOTE: <span class="s1">123</span></div></div>
<div class="d2"><img class="i1" src="like.png" /></div>
<video id="remote-video" autoplay muted="true"></video>
<div id="divider">
<div id="record1" class=""></div>
<div id="timer1" class="">15 seconds</div>
<div class="d3"><img class="i1" src="rap.png" /><div class="d11">MC Trix</div></div>
<div class="d4">
<img class="i2" src="views.png"/> <div class="d5">1.1k</div> </div>
<div class="d6"><div class="d7">VS</div></div>
<div class="d8"><img class="i1" src="rap.png" /><div class="d12">MC Trix and Metz</div></div>
<div id="timer2" class="">15 seconds</div>
<div id="record2" class=""></div>
</div>
<video id="local-video" muted="true" autoplay></video>
<input value="lfnvsfnsnfvsnvsn" style="z-index:10000;position:absolute;top:0;left:0;" type="button" onclick="start(true)" />
<div class="d9"><img class="i3" src="like.png" /></div>
<div class=""><div class="d10"><img class="i5" src="vote.png" />VOTE: <span class="s2">123</span></div></div>
<!--<button id="end-call" onclick="endCall()">End Call</button>-->
</div>
</body>
</html>
<script>
var timer = 15;
setTimeout(setTimer1, 5000);
var interval;
function setTimer1(){
interval = setInterval(setTimer1Elapsed, 1000);
}
function setTimer1Elapsed(){
--timer;
if(timer > 0){
$("#timer1").text(timer + " seconds");
}else{
$("#record1").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#remote-video")[0].muted = !$("#remote-video")[0].muted;
$("#timer1").text("");
interval = null;
}
}
var timer2 = 15;
var interval2;
//function setTimer2AfterContestantFinish(){
setTimeout(setTimer2, 5000);
//}
function setTimer2(){
interval2 = setInterval(setTimer1Elapsed2, 1000);
}
function setTimer1Elapsed2(){
if(timer2 > 0){
$("#timer2").text(timer2 + " seconds");
}else{
$("#record2").fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
$("#local-video")[0].muted = !$("#local-video")[0].muted;
$("#timer2").text("");
interval = null;
}
--timer2;
}
var height = $(document).height() / 2 - 60;
$("#remote-video").height(height);
$("#local-video").height(height);
$("#remote-video").css("opacity", 0);
$("#local-video").css("opacity", 0);
$("#live").width($(document).width());
$("#live").height($(document).height());
var localVideo;
var localStream;
var remoteVideo;
var peerConnection;
var uuid;
var serverConnection;
var peerConnectionConfig = {
'iceServers': [
{'urls': 'stun:stun.stunprotocol.org:3478'},
{'urls': 'stun:stun.l.google.com:19302'},
]
};
pageReady();
async function pageReady() {
uuid = createUUID();
localVideo = document.getElementById('local-video');
remoteVideo = document.getElementById('remote-video');
serverConnection = new WebSocket('wss://' + "192.168.1.62" + ':8443');
serverConnection.onmessage = gotMessageFromServer;
var constraints = {
video: true,
audio: false,
};
var stream;
if(navigator.mediaDevices.getUserMedia) {
stream = await navigator.mediaDevices.getUserMedia(constraints).catch(errorHandler);
getUserMediaSuccess(stream);
} else {
alert('Your browser does not support getUserMedia API');
}
}
function getUserMediaSuccess(stream) {
alert(uuid);
$("#local-video").css("opacity", 1);
localStream = stream;
localVideo.srcObject = stream;
localVideo.play();
}
function start(isCaller) {
peerConnection = new RTCPeerConnection(peerConnectionConfig);
peerConnection.onicecandidate = gotIceCandidate;
peerConnection.ontrack = gotRemoteStream;
peerConnection.addStream(localStream);
if(isCaller) {
peerConnection.createOffer().then(createdDescription).catch(errorHandler);
}
}
function gotMessageFromServer(message) {
if(!peerConnection) start(false);
var signal = JSON.parse(message.data);
// Ignore messages from ourself
if(signal.uuid == uuid) return;
if(signal.sdp) {
peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp)).then(function() {
// Only create answers in response to offers
if(signal.sdp.type == 'offer') {
peerConnection.createAnswer().then(createdDescription).catch(errorHandler);
}
}).catch(errorHandler);
} else if(signal.ice) {
peerConnection.addIceCandidate(new RTCIceCandidate(signal.ice)).catch(errorHandler);
}
}
function gotIceCandidate(event) {
if(event.candidate != null) {
serverConnection.send(JSON.stringify({'ice': event.candidate, 'uuid': uuid}));
}
}
function createdDescription(description) {
console.log('got description');
peerConnection.setLocalDescription(description).then(function() {
serverConnection.send(JSON.stringify({'sdp': peerConnection.localDescription, 'uuid': uuid}));
}).catch(errorHandler);
}
function gotRemoteStream(event) {
console.log('got remote stream');
remoteVideo.srcObject = event.streams[0];
}
function errorHandler(error) {
console.log("xxxxx " + error);
}
// Taken from http://stackoverflow.com/a/105074/515584
// Strictly speaking, it's not a real UUID, but it gets the job done here
function createUUID() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}
</script>
I have the local video loading, just when the start(true) is causing the error:
WebSocket is already in CLOSING or CLOSED state.
I want to implement print functionality in Android app, I'm using AngularJS. I have tried the below code, but it works only on browser, it doesn't work on Android.
AngularJS:
$scope.print = function (divName) {
var w = window.open();
w.document.write($('#' + divName).html());
w.print();
w.close();
}
Html:
<img ng-click="print('print');" class="card-img-top image-responsive" src="./plugins/images/print.png" alt="Card image cap">
<div id="print" style="display:none;">
<style>
#page {
size: auto;
margin: 7mm;
}
#media all {
.page-break {
display: none;
}
}
#media print {
.page-break {
display: block;
page-break-before: always;
}
}
</style>
<div class="row">
</div>
</div>
Update:
I have tried the solution provided by #VicJordan, But it gives the below error.
ReferenceError: cordova is not defined at ChildScope.$scope.print
(MyJs.js:37) at fn (eval at compile (angular.js:15500),
:4:149) at callback (angular.js:27285) at ChildScope.$eval
(angular.js:18372) at ChildScope.$apply (angular.js:18472) at
HTMLImageElement. (angular.js:27290) at
HTMLImageElement.dispatch (jquery.min.js:3) at
HTMLImageElement.r.handle (jquery.min.js:3)
Package.json
{
"name": "helloworld",
"displayName": "HelloCordova",
"version": "1.0.0",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Apache Cordova Team",
"license": "Apache-2.0",
"dependencies": {
"cordova-android": "^7.0.0",
"cordova-browser": "^5.0.3",
"cordova-plugin-device-orientation": "^1.0.7",
"cordova-plugin-printer": "^0.7.3",
"cordova-plugin-whitelist": "^1.3.3"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-device-orientation": {},
"cordova-plugin-printer": {}
},
"platforms": [
"browser",
"android"
]
}
}
Update2
MyJS.js
app.controller('ReciepieController', ['$scope', '$http', '$rootScope', '$state', '$window', '$uibModal', function ($scope, $http, $rootScope, $state, $window, $uibModal) {
$("#header").show();
$rootScope.back = true;
$rootScope.enableback = true;
$scope.toggleText = "See More...";
$scope.toggle = 0;
$scope.print = function (divName) {
console.log('2222222222222222222');
//Enter the page location.
var page = document.getElementById(divName).innerHTML;
cordova.plugins.printer.print(page, 'Document.html', function () {
alert('printing finished or canceled')
});
}
$scope.change = function () {
if ($scope.toggle == 0) {
$scope.toggleText = "See Less...";
$scope.toggle = 1;
}
else if ($scope.toggle == 1) {
$scope.toggleText = "See More...";
$scope.toggle = 0;
}
}
var recipe = null;
var categorylist = [];
$scope.GetRecipe = function (paginate) {
if (paginate == "next") {
if ($rootScope.RecipeIndex < categorylist.length - 1) {
$rootScope.RecipeIndex = $rootScope.RecipeIndex + 1;
$scope.IsNext = true;
$scope.IsPrevious = true;
if ($rootScope.RecipeIndex == categorylist.length - 1) { $scope.IsNext = false; }
}
}
else if (paginate == "previous") {
if ($rootScope.RecipeIndex < $rootScope.RecipeList.length) {
$rootScope.RecipeIndex = $rootScope.RecipeIndex - 1;
$scope.IsNext = true;
$scope.IsPrevious = true;
}
}
if ($rootScope.RecipeIndex == -1) {
$rootScope.RecipeIndex = 0;
}
if ($rootScope.RecipeIndex == 0 || $rootScope.RecipeIndex == -1) { $scope.IsPrevious = false; }
recipe = categorylist[$rootScope.RecipeIndex];
$scope.Ingredient = recipe.recipeIngredients.split('\n');
$scope.Method = recipe.recipeMethod.split('\n');
$scope.Image = recipe.imageName;
$scope.Name = recipe.recipeTitle;
$scope.Description = recipe.recipeDescription;
$scope.Prep = recipe.preparationTime;
$scope.Cook = recipe.cookingTime;
$scope.Serves = recipe.servings;
$scope.QrCode = recipe.QrCode;
$rootScope.IsBack = false;
$rootScope.IsTitle = false;
}
$scope.share = function () {
var modalInstance = $uibModal.open({
animation: true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'QrCode.html',
controller: 'ReciepieController',
controllerAs: '$ctrl',
size: 'sm',
backdrop: 'static', /* this prevent user interaction with the background */
keyboard: false
});
}
function NextRecipe() {
alert();
}
}]);
I also had the same issue.
Try to do it using cordova-plugin-printer plugin. It will solve your problem. From your code it looks you want to print div by id. Below are various usage of above plugin:
Print the whole HTML page:
var page = location.href;
cordova.plugins.printer.print(page, 'Document.html');
Print the content from one part of the page:
var page = document.getElementById('legal-notice');
cordova.plugins.printer.print(page, 'Document.html');
Print some custom content:
var page = '<h1>Hello Document</h1>';
cordova.plugins.printer.print(page, 'Document.html');
For more options, check out the documentation : https://github.com/katzer/cordova-plugin-printer#usage
It works for me in javascript
var dowloadurl = "/.../sample.pdf" // Here your file location
window.cordova.plugins.FileOpener.openFile(
dowloadurl,
onSuccessFileOpen,
onErrorFileOpen
);
var onSuccessFileOpen = function (data) {
alert('onSuccessFileOpen');
};
function onErrorFileOpen(err) {
alert('message: ' + err);
}
Is there any way to get the native look and feeling in Navigation drawer(Menu) in ionic v1 application rather than pushing the center content?
I want to get the Android native look and feel in ionic application like above picture.
Though this is an old question and Ionic v2+ is currently available with this native Navigation drawer features (<ion-menu>). I just thought to share some code that shows how to implement this feature in Ionic v1 app. I think it will help to those who are still using Ionic v1 in their mobile app. Also Ionic v2+ implementation could be found at the end of this post.
Ionic v1
I just created a sample Ionic v1 app using their ready-made sidemenu app template.
ionic start myApp sidemenu --type ionic1
Then I created the following nativeSideMenu.js file inside js folder.
(function () {
'use strict';
angular.module('ionic.contrib.NativeDrawer', ['ionic'])
.controller('drawerCtrl', ['$rootScope', '$scope', '$element', '$attrs', '$ionicGesture', '$ionicBody', '$document', function ($rootScope, $scope, $element, $attr, $ionicGesture, $ionicBody, $document) {
var el = document.querySelectorAll("drawer")[0];
var mainContent = angular.element(document.querySelectorAll("ion-pane")[0]);
var dragging = false;
var startX, lastX, offsetX, newX, startY, lastY, offsetY, newY;
var side;
var isOpen = false;
var primaryScrollAxis = null;
mainContent.addClass('drawer-content');
// How far to drag before triggering
var thresholdX = 10;
// How far from edge before triggering
var edgeX = 40;
// Width of drawer set in css
var drawerWidth = 270;
var LEFT = 0;
var RIGHT = 1;
var isTargetDrag = false;
var isContentDrag = false;
var width = $element[0].clientWidth;
var height = $element[0].clientHeight;
var enableAnimation = function () {
angular.element(el).addClass('animate');
};
var disableAnimation = function () {
angular.element(el).removeClass('animate');
};
// Check if this is on target or not
var isTarget = function (el) {
while (el) {
if (el === $element[0]) {
return true;
}
el = el.parentNode;
}
};
var startDrag = function (e) {
disableAnimation();
dragging = true;
offsetX = lastX - startX;
offsetY = lastY - startY;
$ionicBody.addClass('drawer-open');
};
var startTargetDrag = function (e) {
disableAnimation();
dragging = true;
isTargetDrag = true;
offsetX = lastX - startX;
offsetY = lastY - startY;
};
var doEndDrag = function (e) {
startX = null;
lastX = null;
offsetX = null;
startY = null;
lastY = null;
offsetY = null;
isTargetDrag = false;
if (!dragging) {
return;
}
dragging = false;
enableAnimation();
if (isOpen && newX < (-width / 3)) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + (-width - 5) + 'px, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
} else if (newX < (-width / 1.5)) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + (-width - 5) + 'px, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(0px, 0, 0)';
$ionicBody.addClass('drawer-open');
isOpen = true;
}
};
var doEndContentDrag = function (e) {
if (startX > lastX) {
startX = null;
lastX = null;
offsetX = null;
startY = null;
lastY = null;
offsetY = null;
isTargetDrag = false;
isContentDrag = false;
if (!dragging) {
return;
}
dragging = false;
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(-101%, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
}
else {
el.style.transform = el.style.webkitTransform = 'translate3d(0 0, 0)';
}
};
var doDrag = function (e) {
if (e.defaultPrevented) {
return;
}
if (!lastX) {
startX = e.gesture.touches[0].pageX;
}
if (!lastY) {
startY = e.gesture.touches[0].pageY;
}
lastX = e.gesture.touches[0].pageX;
lastY = e.gesture.touches[0].pageY;
if (!dragging) {
// Dragged 15 pixels and finger is by edge
if (Math.abs(lastX - startX) > thresholdX) {
if (isTarget(e.target)) {
startTargetDrag(e);
} else if (startX < edgeX) {
startDrag(e);
}
}
// Closing from outside of drawer
else if (isOpen && startX > width) {
disableAnimation();
dragging = true;
isContentDrag = true;
}
} else {
newX = Math.min(0, (-width + (lastX - offsetX)));
newY = Math.min(0, (-height + (lastY - offsetY)));
var absX = Math.abs(lastX - startX);
var absY = Math.abs(lastY - startY);
if (isContentDrag && lastX < startX) {
var drawerOffsetX = lastX - drawerWidth;
el.style.transform = el.style.webkitTransform = 'translate3d(' + -absX + 'px, 0, 0)';
}
else if (isTargetDrag && absX > absY + 5) {
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
} else {
el.style.transform = el.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
}
}
if (dragging) {
e.gesture.srcEvent.preventDefault();
}
};
side = $attr.side == 'left' ? LEFT : RIGHT;
var dragFunction = function (e) {
if (el.attributes.candrag) {
doDrag(e);
}
};
var dragEndFunction = function (e) {
if (el.attributes.candrag) {
doEndDrag(e);
}
};
var onContentDrag = function (e) {
if (isOpen) {
doDrag(e);
}
};
var onContentTap = function (e) {
if (isOpen) {
closeDrawer();
e.gesture.srcEvent.preventDefault();
}
};
var contentDragEndFunction = function (e) {
if (isOpen) {
doEndContentDrag(e);
e.gesture.srcEvent.preventDefault();
}
};
var openDrawer = function () {
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(0%, 0, 0)';
$ionicBody.addClass('drawer-open');
isOpen = true;
};
var closeDrawer = function () {
enableAnimation();
el.style.transform = el.style.webkitTransform = 'translate3d(-101%, 0, 0)';
$ionicBody.removeClass('drawer-open');
isOpen = false;
};
var toggleDrawer = function () {
if (isOpen) {
closeDrawer();
} else {
openDrawer();
}
};
this.close = function () {
closeDrawer();
};
$rootScope.toggleDrawerRoot = function () {
toggleDrawer();
};
this.open = function () {
openDrawer();
};
this.toggle = function () {
toggleDrawer();
};
$ionicGesture.on('drag', function (e) {
doDrag(e);
}, $document);
$ionicGesture.on('dragend', function (e) {
doEndDrag(e);
}, $document);
var dragGesture = $ionicGesture.on('drag', dragFunction, $document);
var dragEndGesture = $ionicGesture.on('dragend', dragEndFunction, $document);
var contentTapGesture = $ionicGesture.on('tap', onContentTap, mainContent);
var contentDragGesture = $ionicGesture.on('drag', onContentDrag, mainContent);
var contentDragEndGesture = $ionicGesture.on('dragend', contentDragEndFunction, mainContent);
$scope.$on('$destroy', function () {
$ionicGesture.off(dragGesture, 'drag', dragFunction);
$ionicGesture.off(dragEndGesture, 'dragend', dragEndFunction);
$ionicGesture.off(contentTapGesture, 'tap', onContentTap);
$ionicGesture.off(contentDragGesture, 'drag', onContentDrag);
$ionicGesture.off(contentDragEndGesture, 'dragend', contentDragEndFunction);
});
}])
.directive('drawer', ['$rootScope', '$ionicGesture', function ($rootScope, $ionicGesture) {
return {
restrict: 'E',
controller: 'drawerCtrl',
link: function ($scope, $element, $attr, ctrl) {
$element.addClass($attr.side);
$scope.openDrawer = function () {
ctrl.open();
};
$scope.closeDrawer = function () {
ctrl.close();
};
$scope.toggleDrawer = function () {
ctrl.toggle();
};
}
}
}])
.directive('menuAndDrawerToggle', ['$rootScope', '$ionicGesture', function ($rootScope, $ionicGesture) {
return {
controller: '',
link: function ($scope, $element, $attr) {
$element.bind('click', function () {
$rootScope.toggleDrawerRoot();
});
}
};
}])
.directive('menuAndDrawerClose', ['$ionicViewService', function ($ionicViewService) {
return {
restrict: 'AC',
require: '^drawer',
link: function ($scope, $element, $attr, ctrl) {
$element.bind('click', function () {
ctrl.close();
});
}
};
}]);
})();
And also created the following nativeSideMenu.css file inside css folder
drawer {
display: block;
position: fixed;
width: 270px;
height: 100%;
z-index: 100;
background-color:white;
}
drawer .header-menu{
margin-top:0px;
padding-top:0px;
}
drawer .header-menu ion-list .list{
padding-top:0px;
}
drawer.animate {
-webkit-transition: all ease-in-out 400ms;
transition: all ease-in-out 400ms;
}
drawer.left {
-webkit-transform: translate3d(-101%, 0, 0);
transform: translate3d(-101%, 0, 0);
box-shadow: 1px 5px 10px rgba(0,0,0,0.3);
}
drawer.right {
right: 0;
top: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.drawer-open .drawer-content .pane, .drawer-open .drawer-content .scroll-content {
pointer-events: none;
opacity:0.2;
}
drawer .item-icon-left .icon{
font-size: 24px;
padding-bottom: 2px;
}
ion-side-menu .current a.item-content,ion-side-menu .clickable.current, drawer .current a.item-content, drawer .clickable.current {
color:#343434 !important;
}
drawer a.item-content, drawer .clickable{
color: #858585;
font-size:20px;
}
drawer .item-complex .item-content{
padding-top:16px;
padding-bottom:16px;
font-size:20px;
}
/*This section would normally have .platform-android at the front */
.platform-android4_0 drawer.left{
box-shadow: none;
border-left:0px;
border-right:0px;
}
.header-menu{
top:0px;
bottom:44px;
}
.menu .scroll-content {
top: 42px;
}
.menu-content{
box-shadow: none;
}
.drawer-open ion-pane.pane{
background-color: rgb(0,0,0);
}
.drawer-open view{
background-color: rgb(0,0,0);
}
.ion-view.pane{
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.menu-open ion-view.pane, .drawer-open ion-view.pane{
/* opacity:0.4;
*/
}
.bar .title.no-nav{
text-align: left;
left: 0px !important;
}
.bar .button-icon.ion-navicon{
margin-left: -20px;
padding-right: 20px;
}
.bar .title{
text-align: left;
left: 16px !important;
}
.modal-wrapper .bar .title{
text-align: center;
left: 0px !important;
}
.bar .title.title-center{
text-align: center;
left: 0px !important;
right: 0px !important;
}
.ion-ios7-arrow-back:before{
content:"\f2ca";
}
.bar .button.button-icon.ion-ios7-arrow-back:before{
font-size: 17px;
line-height: 32px;
padding-right: 100px;
}
After that I added reference links to index.html file
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/nativeSideMenu.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/nativeSideMenu.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
Then I included the ionic.contrib.NativeDrawer in angular.module in app.js file.
angular.module('starter', ['ionic', 'starter.controllers','ionic.contrib.NativeDrawer'])
After that I updated the code of menu.html file inside templates folder like below.
<ion-side-menus>
<ion-side-menu-content>
<ion-nav-bar class="bar-stable bar-positive-900">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-and-drawer-toggle>
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-pane drawer-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-pane>
</ion-side-menu-content>
<drawer side="left">
<ion-content>
<ion-list>
<ion-item menu-and-drawer-close ng-click="login()">
Login
</ion-item>
<ion-item menu-and-drawer-close href="#/app/search">
Search
</ion-item>
<ion-item menu-and-drawer-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-and-drawer-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</drawer>
</ion-side-menus>
Now just run the ionic serve and have the native feeling in Navigation drawer.
Use bellow reference links for more details
Ref. 1
Ref. 2
Ref. 3
Ionic v2+
We do not have that much of work to do in Ionic v2+ because by default it is giving the native feeling of the Navigation drawer. But we could change that behavior by passing the value to type on the <ion-menu>
<ion-menu type="overlay" [content]="mycontent">...</ion-menu>
According to DOC type details as bellow.
The display type of the menu. Default varies based on the mode, see
the menuType in the config. Available options: "overlay", "reveal",
"push".
Hope this will help to someone else!
I want to change the meta viewport tag based on detection of an android or an iphone. I have this code but it is not working:
<script type="text/javascript">
var metas = document.getElementsByTagName('meta');
var i;
var ua = navigator.userAgent;
var isAndroid = navigator.userAgent.match(/Android/i) !=null;
var isAndroid = /Android/i.test(ua);
var isiPhone = navigator.userAgent.match(/iPhone/i) !=null;
var isiPhone = /iPhone/i.test(ua);
if(isiPhone) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "";
}
}
} else if(isAndroid) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "";
}
}
} else {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, initial-scale=.5";
}
}
}
</script>
I tried this code as a test and it works just fine:
<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua) || /iPhone OS 4_3_3/i.test(ua) || /iPhone OS 4_3_3/i.test(ua);
var isAndroid = navigator.userAgent.match(/Android/i) !=null;
var isAndroid = /Android/i.test(ua);
var isiPhone = navigator.userAgent.match(/iPhone/i) !=null;
var isiPhone = /iPhone/i.test(ua);
if(isiPad) {
alert("hello ipad!");
} else if(isAndroid) {
alert("hello android!");
} else if(isiPhone) {
alert("hello iphone!");
}
</script>
Any idea what I'm doing wrong with the meta tag code?
target meta viewport and test the user agent :
viewport = document.querySelector("meta[name=viewport]");
var iOS_iphone = ( navigator.userAgent.match(/(iPhone)/i) ? true : false );
if (iOS_iphone==true){
viewport.setAttribute('content', 'width=device-width, initial-scale=0.2, maximum-scale=0.2, user-scalable=no');
}
if( navigator.userAgent.match(/Android/i)){
viewport.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0');
}
}
I am using the following code to allow user scaling on iPad only. It is not dependent on jQuery and so can be placed in the head, after the viewport meta and before any other external scripts for perf reasons.
<!-- Allow zooming for iPad only -->
<script>
if (navigator.userAgent.match(/iPad/i)) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width; initial-scale=1; user-scalable=1;');
}
</script>
I used the open source Mobile Detect php script. Here is all it took once I downloaded the lightweight script:
include 'Mobile_Detect.php';
$detect = new Mobile_Detect();
if ($detect->isMobile() && !$detect->isTablet())
echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />';
I've created a 3d scene with below code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>3d Model using HTML5 and three.js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="three.min.js" type="text/javascript"></script>
<script src="Curve.js" type="text/javascript"></script>
<script src="TubeGeometry.js" type="text/javascript"></script>
<script src="Stats.js" type="text/javascript"></script>
<script src="Detector.js" type="text/javascript"></script>
<script>
// variables
var container, stats;
var camera, scene, renderer, splineCamera, cameraHelper, cameraEye;
var text, plane, tube, tubeMesh, parent;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var binormal = new THREE.Vector3();
var normal = new THREE.Vector3();
init();
animate();
function init(){
// container
container = document.createElement( 'div' );
document.body.appendChild( container );
// info div
info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
//info.innerHTML = 'Drag to spin the cylinder<br/> You can identify cylinder face by clicking on it.</br>';
container.appendChild( info );
// camera
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(30,10,10);
//camera.up = new THREE.Vector3( 0, 1, 1 );
// scene
scene = new THREE.Scene();
camera.lookAt(scene.position);
// light
scene.add( new THREE.AmbientLight( 0x404040 ) );
light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 0 );
scene.add( light );
// CONTROLS
controls = new THREE.TrackballControls( camera );
// Grid
geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
for ( var i = 0; i <= 20; i ++ ) {
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );
line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );
}
// extrudePath, Helix Curve
extrudePath = new THREE.SplineCurve3([
new THREE.Vector3(0, 10, 10),
new THREE.Vector3(10, 0, 10),
new THREE.Vector3(10, 0, 0)
]);
console.log(extrudePath);
// Tube Geometry
var segments = 50;
var closed = false;
var debug = true;
var radiusSegments = 12;
//alert('hello');
var tube = new THREE.TubeGeometry(extrudePath, segments, 2, radiusSegments, closed, debug);
// Tube Mesh
tubeMesh = THREE.SceneUtils.createMultiMaterialObject( tube, [
new THREE.MeshLambertMaterial({
color: 0xff00ff,
opacity: tube.debug ? 0.2 : 0.8,
transparent: true
}),
new THREE.MeshBasicMaterial({
color: 0x000000,
opacity: 0.5,
wireframe: true
})]);
parent = new THREE.Object3D();
parent.position.y = 100;
if ( tube.debug ) tubeMesh.add( tube.debug );
//parent.add( tubeMesh );
scene.add( tubeMesh );
// projector
projector = new THREE.Projector();
// renderer
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
// stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mouseover', onDocumentMouseOver, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
camera.aspect = window.innerWidth / window.innerHeight;
//camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseDown( event ) {
event.preventDefault();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
}
function onDocumentMouseUp( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOut( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentMouseOver( event ) {
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
}
}
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function update()
{
controls.update();
stats.update();
}
function render() {
tubeMesh.rotation.y += ( targetRotation - tubeMesh.rotation.y ) * 0.15;
camera.updateMatrixWorld();
renderer.render( scene, camera );
}
</script>
</body>
</html>
Now when I change rendering from WebGL to Canvas, the FPS drops down to 1-2 FPS from 56-57 FPS on mobile browser. Native browser does not display anything on page and in Opera page becomes too slow for operations. How do I make page operations fast with Canvas rendering or how do I enable webgl rendering on mobile browsers ?
canvas renderer is software mode only, that means no GPU acceleration, the CPU has to do all the hard work that's why your fps drop.
AFAIK not every mobile browser is able to use webgl renderer yet, you could give opera mobile a try it's capable of webgl.
One way to speed up canvas rendering is to reduce the number of segments used in TubeGeometry