I'm trying to use PhoneGap and LeafLet in Android.
I read tutorial about LeafLet and I've chosen to start with mobile example
My problem with this gray area.. Why this gray area appearing ?
There is no gray area on browser. I didn't change anything except file path.
How can i make map full screen ?
Update Note : I'm working 10" tablet landscape mode, now I tried this example in 3,2" phone and there is no problem with 3.2" screen. Problem with 10" screen-landscape mode
MainActivity.java
public class MainActivity extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
appView= (CordovaWebView) findViewById(R.id.tutorialView);
appView.loadUrl("file:///android_asset/www/main.html");
}
}
activity_main.xml
<RelativeLayout 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:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<org.apache.cordova.CordovaWebView
android:id="#+id/tutorialView"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
main.html
<!DOCTYPE html>
<html>
<head>
<title>Leaflet mobile example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="leaflet.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="leaflet.ie.css" /><![endif]-->
<script src="leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map = L.map('map');
L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © CloudMade'
}).addTo(map);
function onLocationFound(e) {
var radius = e.accuracy / 2;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({setView: true, maxZoom: 16});
</script>
</body>
</html>
Leaflet doesn't always correctly infer the dimensions of maps without explicit dimensions. As a general solution to this kind of problem with Leaflet, try adding this to the end your javascript:
setTimeout(map.invalidateSize.bind(map));
This will cause Leaflet to recalculate the dimensions of the map, and hopefully fix the gray tiles you're seeing.
Occasionally, it may also be necessary to delay the recalculation further, with something like setTimeout(map.invalidateSize.bind(map),200); this may fix gray tiles under unusual browser loading conditions.
Setting position:absolute for #map element helped me. Try this style:
<style>
body {
padding: 0;
margin: 0;
}
#map {
height: 100%;
width: 100%;
position: absolute;
}
</style>
Related
I am currently developing an HTML kiosk presentation for iPad and Android. Issue I am having is with popup videos on Android, which works perfectly on iPad and also within Chrome on Android. I need to present this as a kiosk style application and so am using Protosee on iPad and Fully Kiosk Browser on android which I believe uses the Android Webview (Chromium) engine so should work too but doesn't.
Using FKB the video popup comes up but with a blank screen and a video icon in the centre, touching the screen again removes the popup and the video plays in the background.
Any pointers would be much appreciated.
Code is as follows
<html>
<head>
<title>BASE Charging Stand</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="logitech.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/logitech.js"></script>
</head>
<body>
<div class="main_content basechargingstand">
<div class="header">
<div class="hotspot" onclick="goBack()"></div>
<div class="hotspot"></div>
<div class="hotspot"></div>
</div>
<div class="page_navigation">
<div class="top_slot" onclick="goBack()"></div>
</div>
<div class="product_detail">
<div id="video_pop" onclick="onPopClick()"></div>
<a onclick="onVideoClick('videos/Base.mp4');">
<img src="images/play_btn_lrg.png" width="78"/>
</a>
<div class="hotspot 3col"></div>
</div>
</div>
</body>
</html>
</script>
function onVideoClick(theLink) {
document.getElementById("video_pop").innerHTML = "<video poster autoplay id=\"the_Video\"><source src=\""+theLink+"\" type=\"video/mp4\" ></video>";
document.getElementById("video_pop").style.display="block";
document.getElementById('video_pop').play();
}
function onPopClick() {
document.getElementById("video_pop").style.display="none";
document.getElementById("video_pop").innerHTML = "";
}
</script>
<style>
#video_pop {
z-index: 9999;
position: absolute;
left: 0px;
width: 100%;
height: 100%;
background: rgb(193, 198, 201) !important;
display: none;
cursor: pointer;
top: 20.7%;
}
#the_Video {
width: 100%;
position: fixed;
top: 60.5%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
Android and iOS have disabled video autoplay with purpose! Imagine browsing the web with your phone and all the video advertisements that could be playing in the background will just simply eat up all your bandwidth.
While working with hybrid HTML clients, I used this trick/workaround to start autoplaying videos: When user entered the page for the first time, then <video> element with empty src has to be created the page (hidden somewhere). Whenever user touches the screen for the first time for whatever reason, then I tried to invoke play method on the video element (this breaks the first usergesture on html video element). This will usually give a small error/warning in console but that is okay because what matters is that the first user gesture has been made, thus enabling you to use play() method whenever you want! So after the first user gesture has been made, you simply just have to use the same <video> element!
I hope this helps.
I think that you cannot Autoplay a video inside a WebView in Android. I believe Android does it for security reasons, so apps don't use too much mobile data unless the user wants it. Maybe you could try it by having the video stored locally?
I has a problem with the new implementation of webview for android 4.4+.
My HTML code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://s.videos.globo.com/p2/j/api.min.js" type="text/javascript"></script>
<style type="text/css" media="all">
#player-wrapper, #image-wrapper {
width: 100% !important;
height: 100% !important;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
#image-wrapper {
z-index: 999;
background-color: white;
}
</style>
</head>
<body>
<div id="player-wrapper"></div>
<img id="image-wrapper">
<script type="text/javascript">
var element = document.getElementById('player-wrapper');
var image = document.getElementById('image-wrapper');
var player = new WM.Player({
autoPlay: true,
width: 640,
height: 360
});
player.attachTo(element);
image.onclick = function() {
player.playVideo();
image.style.visibility = 'hidden';
};
</script>
</body>
But the rule width: 100% is not working, the # player-wrapper is getting bigger than the webview. Strange that only the #player is being affected, #image are right.
Can anyone help me with this?
The problem lies in the WM.player constructor, which sets the width of the player to 640px, which is probably bigger than your viewport. There is no parameter for max-width in the WM.Player constructor, so you'll have to use a meta tag. Trying adding <meta name="viewport" content="width=640px"> in the head section of your HTML so that the viewport is sized to fit the 640px width set in the WM.Player constructor.
This html tag might be useful.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I debugged the css used with version 2 player.js (0002/player.js) and found the css below for the RED Overlay i want to remove from my default receiver.
from player.css
#player[type="video"][state="idle"]:after {
content: "SAMPLE";
position: absolute;
left: 0;
right: 0;
top: 50%;
bottom: 0;
text-align: center;
font-size: 50px;
margin-top: -150px;
opacity: 0.1;
color: red;
}
As the default player.js cycles thru states [IDLE PLAY BUFFER] the red , transparent overlay, "SAMPLE" is displayed.
I want to get rid of that feature when i play my own mp4s.
So, I removed the offending css above and i hosted the new css file without the red sample.
I went to the dev console for "Google Cast SDK" and changed the custom style to the URL for my hosted CSS file.
I wait 4 hours.
I reboot the chromecast device.
I manually reload the window in the debugger console for the device.
And , i still see the old CSS with the red SAMPLE.
What do i have to change to get rid of that CSS on the player.js used with the default receiver?
Below is the html loaded in the debugger for the chromecast device by my android app.
<html><head>
<title>Cast Media Player</title>
<link rel="stylesheet" href="0002/player.css">
<script type="text/javascript" src="0002/player.js"></script><link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/gtv-videos-bucket/receivers/f742e4109ea711e3a5e20800200c9a66/style.css">
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/mediaplayer/0.3.0/media_player.js"></script>
</head>
<body>
<div id="player" class="gcpa" type="video" state="playing"><div class="background"></div><div class="gcpb" style=""><video style="background-image: none;" src="http://....0685/fade0569-bd5b-4cc2-a05d-85cb24860c56-20140430101403.mp4"></video><div class="logo"></div><div class="gcpr"></div><div class="splash"></div><div class="watermark"></div><div class="gcpc"></div><div class="gcpd"><div class="gcph"><div class="gcpg" style="background-image: url(http://.....ecb7c32-me1563624197.jpg);"></div><div class="gcpf"><div class="gcpi">the light the Divinity t</div><div class="gcpj"><div><span>robrowntree</span></div><div><span>the light the Divinity the absolute poise Aaron rumpled beds at morning </span></div></div></div></div><div class="gcpk"><span class="gcpl"></span><span class="gcpp">00:08</span><span class="gcpq">00:10</span><div class="gcpm"><div class="gcpn progressBar" style="width: 80%;"></div><div class="gcpo" style="left: 80%;"></div></div></div></div></div><div class="message"></div></div>
<script>
var playerDiv = document.querySelector("#player");
new castplayer.CastPlayer(playerDiv).start();
</script>
</body></html>
If you use the applicationId "CC1AD845", then the SAMPLE is removed.
This is the default application ID and defined by constant CastMediaControlIntent.DEFAULT_MEDIA_RECEIVER_APPLICATION_ID.
I am not clear what the issue is here. If you use the "Default Receiver" or your own Styled Receiver, there will be no SAMPLE watermark at all; if you use the receiver that CastVideos app is using, you'll see that big red watermarking (which you will not be able to remove).
I do not work with intel XDK long. I'm making a game and I want the canvas was stretched across the screen on any phone. I tried this
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
In the emulator, it was fine. But on my Android (Nexus 7 G) was only the page background. Canvas disappeared!
Try initializing canvas inside after DeviceReady is fired, the width and height may not be initialized before the intel.xdk.device.ready is fired.
Here is the modified code:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); margin:0; padding:0; }
input, textarea { -webkit-user-select:text; }
html, body { background-color:red; color:black; width:100%; height:100%;}
canvas{background-color: #f00; position: relative; display:block;}
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
/* This code is used to run as soon as Intel activates */
var onDeviceReady=function(){
initCanvas();
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function initCanvas(){
var canvas = document.getElementById("game");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
</script>
</head>
<body>
<canvas id="game"></canvas>
</body>
</html>
With Intel XDK, having the <canvas id="game"></canvas> is optional, you can access the canvas object directly via intel.xdk.canvas.
Moreover, the canvas is always fullscreen, you don't need to stretch it yourself.
So, your problem might be related to something else, and you have to show us a sample of your code so we can help you.
I have been scratching my head for several days over this issue. I am attempting to embed a flash stream from own3d.tv in a HTML page that is view-able in the android web browser. No matter what I do the flash object goes white several seconds after the page loads. I have tried copying their exact code as well as using swfobject but have had no luck. The more confusing part is I am able to view the same stream on their homepage just fine. (own3d.tv). Here are the details:
What I am using:
Android 4.0.1 on Google Galaxy Nexus
swfobject 2.0
Flash 11
Always use a stream id that is online
The Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<style type="text/css">
* { margin: 0; padding: 0; }
body { text-align: center; }
html, body { height: 100%, width: 100%; }
</style>
<script>
$(document).ready(function(){
var flashvars = {};
var params = {
allowscriptaccess : "always",
allowfullscreen : "true",
wmode : "transparent"
};
var attributes = {};
swfobject.embedSWF("http://www.own3d.tv/livestream/34046;autoplay=true", "player", "400", "300", "11.0.0","expressInstall.swf", flashvars, params, attributes);
});
</script>
</head>
<body>
<div id="player" style="visibility: hidden;"></div>
</body>
</html>