cordova-admob-pro not working on iPhone - html

I am trying to use this cordova plugin for admob ads with Intel XDK:
cordova-admob-pro
So far, for android devices its perfect, but it does not seem to work when exported to iOS apps... Did somebody fix this issue?
Thanks

I had this problem but solved it by using another plugin, from here https://github.com/sunnycupertino/cordova-plugin-admob-simple
To install it:
cordova plugin add cordova-plugin-admob-simple
Integration is as follows:
-Add the following javascript functions, put in your own ad code, play with the variables if you want.
-Call initAd() from onDeviceReady(), and showBannerFunc() and showInterstitialFunc() to show ads.
//initialize the goodies
function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
var ad_units = {
ios : {
banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
},
android : {
banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;
window.plugins.AdMob.setOptions( {
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER, //use SMART_BANNER, BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
bannerAtTop: false, // set to true, to put banner at top
overlap: true, // banner will overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: false // auto show interstitial ad when loaded
});
registerAdEvents();
window.plugins.AdMob.createInterstitialView(); //get the interstitials ready to be shown
window.plugins.AdMob.requestInterstitialAd();
} else {
//alert( 'admob plugin not ready' );
}
}
//functions to allow you to know when ads are shown, etc.
function registerAdEvents() {
document.addEventListener('onReceiveAd', function(){});
document.addEventListener('onFailedToReceiveAd', function(data){});
document.addEventListener('onPresentAd', function(){});
document.addEventListener('onDismissAd', function(){ });
document.addEventListener('onLeaveToAd', function(){ });
document.addEventListener('onReceiveInterstitialAd', function(){ });
document.addEventListener('onPresentInterstitialAd', function(){ });
document.addEventListener('onDismissInterstitialAd', function(){
window.plugins.AdMob.createInterstitialView(); //REMOVE THESE 2 LINES IF USING AUTOSHOW
window.plugins.AdMob.requestInterstitialAd(); //get the next one ready only after the current one is closed
});
}
//display the banner
function showBannerFunc(){
window.plugins.AdMob.createBannerView();
}
//display the interstitial
function showInterstitialFunc(){
window.plugins.AdMob.showInterstitialAd();
}

Related

TAU: How do we use the PageIndicator for Wearable Devices

I am trying the Page Indicator in Tizen Wearable Application for Gear S3 Frontier. When I use the code pasted there, It works fine for text only. E.g. when I try to add controls on each section (being shown as page on the screen) It doesn't work. Even if I set a background image the whole design gets scattered. I've tried some approaches, including the answer given on this question
My Output:
HTML Code:
Page1 of 2
Page2 of 2
CSS:
.ui-content section {
overflow: hidden;
overflow-y: auto;
text-align: center;
}
JavaScript:
/*global tau */
(function() {
var page = document.getElementById("taskListPage"),
changer = document.getElementById("hsectionchanger"),
sections = document.querySelectorAll("section"),
sectionChanger,
elPageIndicator = document.getElementById("pageIndicator"),
pageIndicator,
pageIndicatorHandler;
/**
* pagebeforeshow event handler
* Do preparatory works and adds event listeners
*/
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
/**
* pagehide event handler
* Destroys and removes event listeners
*/
page.addEventListener( "pagehide", function() {
// release object
sectionChanger.destroy();
pageIndicator.destroy();
});
/**
* sectionchange event handler
*/
pageIndicatorHandler = function (e) {
pageIndicator.setActive(e.detail.active);
};
changer.addEventListener("sectionchange", pageIndicatorHandler, false);
}());
I am facing an error as well:
file:///lib/tau/wearable/js/tau.min.js (20) :[tau][10/24/2019, 1:28:31
The HTML code is not attached. Basing on the screens I assume that your application has two sections. The SectionChanger widget with "circular" option can be build only with apps that contain at least 3 sections, hence the error in console.
Please change the circular option for section changer to false:
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: true,
orientation: "horizontal",
useBouncingEffect: true
});
});
into:
page.addEventListener( "pagebeforeshow", function() {
// make PageIndicator
pageIndicator = tau.widget.PageIndicator(elPageIndicator, { numberOfPages: sections.length });
pageIndicator.setActive(0);
// make SectionChanger object
sectionChanger = new tau.widget.SectionChanger(changer, {
circular: false,
orientation: "horizontal",
useBouncingEffect: true
});
});
This option is responsible for switching between sections mode. If it's set to true user can move from first section to the last one and vice versa.

Opentok on streamCreated subscribe makes mobile chrome freeze

I am developing webRTC chat on opentok platform and vue.js. While everything is fine on desctop and mobile firefox browser, mobile chrome gets hung up when trying to subscribe to the event.stream. The weird thing is that if I activate developer tools then it will work on mobile chrome as expected so I can not debug error log on this one. I have been racking my brain on this for three days now. If anyone can help me I would appreciate it! Here is the relevant part of my code:
//start the live vicdeo sessiion
startLivevideoSession: function(session){
this.call = true; //set call to true
//initiate opentok session
this.LiveVideo_session = OT.initSession(session.apiKey, session.session)
//define on streamcreated method
this.LiveVideo_session.on('streamCreated', function(event) {
//this is the problem:
this.LiveVideo_session.subscribe(event.stream, 'stream_video1', {
height: '100%',
width: '100%',
showControls: true,
style: {
audioLevelDisplayMode: 'auto',
buttonDisplayMode: 'off',
nameDisplayMode: 'off',
videoDisabledDisplayMode: 'auto',
showArchiveStatus: false
}
}, this.handleError)
//problem ends
}.bind(this))
//define on sessionDisconnected method
this.LiveVideo_session.on("sessionDisconnected", function (event) {
if(this.call){
this.stopVideoButtonPress() //stop on going chat session if any
bus.$emit('showModal', "stopLivevideoSessionLeft"); //notify user that other user left the page
}
}.bind(this))
//define connect method
this.LiveVideo_session.connect(session.token, function(error) {
if(error){
this.handleError(error)
}else{
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
this.LiveVideo_session.publish(this.my_video); //publish my video to chatroom
}
//if testsession, publish stream also to stream_video1
if(this.testSession){
this.LiveVideo_session.publish(this.test_publisher)
}
}
}.bind(this));
//store session.premium_session to premium_session
this.premium_session = session.premium_session
//wait for UI elements to be created on page before OT.initPublisher
setTimeout(() => {
//setup my_video
if(this.call_mode == "audio") //if only audio is selected
var publisherOptions = {
videoSource: null,
name: this.connection_setup.stream_video_description+" (vain ääni)",
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on",
}
}
else
//setup my_video for videochat
var publisherOptions = {
name: this.connection_setup.stream_video_description,
width: '100%',
height: '100%',
opaque: '1',
style: {
nameDisplayMode: "on",
audioLevelDisplayMode: "on",
}
}
//if call mode is chat, do not publish chat at all
if(this.call_mode != 'chat'){
console.log("call mode"+this.call_mode)
this.my_video = OT.initPublisher('my_video', publisherOptions, this.handleError)
}
//if testsession, publish stream also to stream_video1
if(this.testSession){
console.log("call testSession "+this.testSession)
publisherOptions.name = 'Sinun kuvasi keskustelukumppanin näkemänä';
this.test_publisher = OT.initPublisher('stream_video1', publisherOptions, this.handleError)
}
}, 600);
},
It might be Chrome that freezes, not opentok. See this chrome 61/android bug which includes a workaround of adding a border-radius

Google Maps API v3 - how to detect when map changes to full screen mode?

Is there a way to detect when the user clicks the default fullscreen mode button?
These are the map options I'm using:
var mapOptions = {
center: {
lat: 40.907192,
lng: 20.036871
},
zoom: 2,
fullscreenControl: true
};
I'm not sure if you want to detect the actual click event or just the state change between full screen and not. I needed to do the latter. The two things you need to know are that a) when the map size changes, the map will fire the bounds_changed event and b) within your event handler for that, you need to compare the map div's size with the size of the entire screen. Do this like so:
google.maps.event.addListener( map, 'bounds_changed', onBoundsChanged );
function onBoundsChanged() {
if ( $(map.getDiv()).children().eq(0).height() == window.innerHeight &&
$(map.getDiv()).children().eq(0).width() == window.innerWidth ) {
console.log( 'FULL SCREEN' );
}
else {
console.log ('NOT FULL SCREEN');
}
}
Note that getDiv() returns your own div that you passed to the Map() constructor. That div doesn't get resized for full screen - its child does. So that part where I'm getting the child of the map's div is correct but a little unwieldy. You could also rewrite that more briefly like this and it will work but this could break in the future if Google changes the map div's class name:
if ( $( '.gm-style' ).height() == window.innerHeight &&
$( '.gm-style' ).width() == window.innerWidth ) {
DaveBurns answer worked with some modifications because I don't use jQuery. Also I needed to use clientHeight and clientWidth
window.google.maps.event.addListener(
map,
'bounds_changed',
onBoundsChanged,
);
function onBoundsChanged() {
if (
map.getDiv().firstChild.clientHeight === window.innerHeight &&
map.getDiv().firstChild.clientWidth === window.innerWidth
) {
console.log('FULL SCREEN');
} else {
console.log('NOT FULL SCREEN');
}
}
This solution it is working for me:
/** Full Screen event */
$(document).bind('webkitfullscreenchange mozfullscreenchange fullscreenchange', function() {
var isFullScreen = document.fullScreen ||
document.mozFullScreen ||
document.webkitIsFullScreen;
if (isFullScreen) {
console.log('fullScreen!');
} else {
console.log('NO fullScreen!');
}
});
You can use HTML5 Fullscreen API which has the fullscreenchange event:
"When fullscreen mode is successfully engaged, the document which
contains the element receives a fullscreenchange event. When
fullscreen mode is exited, the document again receives a
fullscreenchange event".
Please note that
"For the moment not all browsers are using the unprefixed version of the API".
So, for instance, in Mozilla Firefox the event handler would look like this
document.onmozfullscreenchange = function(event) {
console.log("Full screen change")
}

Device location path error for navigation of screen in iOS 9

In my Cordova based iOS app, when I am trying to navigate to next screen from home page ,It is remaining in Home page in iOS 9 where as navigation working fine with iOS 8.4 and below.
Here is the path in iOS 8.4(working fine)
file:///var/mobile/Containers/Bundle/Application/EABC-4728-97BF-466B/MyApp.app/www/index-telugu.html#publicinterface
Here is the path in iOS 9.0 which is different from supposed path
file:///var/mobile/Containers/Bundle/Application/47CF-A77E-97ACED384A/MyApp.app/www/index-telugu.html#main
If anyone facing the similar issue Please suggest me the way to solve this
Here is my code:
$('#publicinterface_main_id').click(function()
{
if (!checkConnection())
{
navigator.notification.alert('Please Check Your Internet Connection');
}
else if (!navigator.geolocation)
{
navigator.notification.alert('Please switch on location settings on your mobile');
}
else
{
window.location.href = "index-telugu.html#"+$(this).attr('reloadIndex');
console.log("Path for navigation: : " + window.location.href );
location.reload();
navigator.geolocation.getCurrentPosition(function (p)
{
getAddress(p.coords.latitude,p.coords.longitude);
$('#pub_HgeoLocation').val(p.coords.latitude+","+p.coords.longitude);
});
var places = new google.maps.places.Autocomplete(document.getElementById('pub_geoLocation'));
google.maps.event.addListener(places, 'place_changed', function ()
{
var place = places.getPlace();
var address = place.formatted_address;
var longitude = place.geometry.location.lng();
var latitude = place.geometry.location.lat();
$('#pub_HgeoLocation').val(latitude+","+longitude)
});
}
});
A bug/"feature" of the iOS 9.0 UIWebView (used by Cordova/Phonegap) is that setting of window.location.hash is asynchronous - see this bug report for details. Note that Safari on iOS 8+ uses WKWebView not UIWebView, so this issue is not evident in the Safari browser on iOS 9.0
console.log(window.location.hash); // -> "#bar"
window.location.hash = '#foo';
console.log(window.location.hash);
// -> "#bar" // iOS 9.0 UIWevView
// -> "#foo" // iOS 9.0 WKWebView (Safari) and all other known browsers except
// in all other known browsers at this point window.location.hash will read '#foo'. In iOS9 UIWebView it won't.
if(window.location.hash !== '#foo') {
// bang: iOS 9 webview
} else {
// ok: any other browser
}
As a workaround, you can try using window.setTimeout to make operations following setting the value window.location.hash asynchronous, allowing for the value to be applied before you use it. So using your code above, try something like:
window.location.href = "index-telugu.html#"+$(this).attr('reloadIndex');
window.setTimeout(function(){
console.log("Path for navigation: : " + window.location.href );
location.reload();
},0);

Google Map gets rendered with an offset when put in a lightbox

I'm using Ember.js to implement a lightbox containing a Google Map. The problem is that when the map is in the lightbox it renders shifted up and to the left of where I expected it to be. The left over space on the bottom and right is just a blank area where you cannot drag the map. When I render the same map view in the main page, there is no problem. I also noticed that if I open the developer tools (in Chrome and Firefox), the map becomes correct. I have no idea why that is.
Here's the JSFiddle: http://jsfiddle.net/hekevintran/qt5k4/9/.
Screenshot (the bottom map is in the lightbox):
HTML:
<script src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/x-handlebars" data-template-name="buttons">
<button {{action "openBox" }}>Open Box</button>
<button {{action "closeBox" }}>Close Box</button>
{{view App.MapView}}
</script>
<script type="text/x-handlebars" data-template-name="lightbox">
<div style="
background-color: lightgray;
border: 2px solid #000000;">
{{view App.MapView}}
</div>
</script>
JavaScript:
App = Ember.Application.create({});
App.MapView = Ember.View.extend({
installMap: function () {
var mapOptions = {
// San Francisco
center: new google.maps.LatLng(37.773429,-122.424774),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
new google.maps.Map(this.$()[0], mapOptions);
},
didInsertElement: function () {
this.$().css(
{'height': '350px',
'width': '350px'}
);
this.installMap();
}
});
Lightbox = Ember.Object.extend({
isVisible: false,
open: function () {
this.set('isVisible', true);
},
close: function () {
this.set('isVisible', false);
},
view: function () {
var controller = this;
return Ember.View.extend({
templateName: 'lightbox',
controller: controller,
isVisibleBinding: 'controller.isVisible'
})
}.property()
});
lightbox = Lightbox.create();
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
lightbox.open();
},
closeBox: function () {
lightbox.close();
}
})
}).append();
lightbox.get('view').create().append();
The problem is that you are creating the map in the lightbox when you first load your page. This happens when you call lightbox.get('view').create().append(); at the end of your JavaScript page.
But the lightbox is not visible yet, and that confuses the Maps API. You could probably work around the problem by triggering a resize event on the map after opening the lightbox, but it's better by far to avoid creating the map and the lightbox view until you need them.
That fixes the problem, and as a bonus your page loads faster because you avoid creating the second map at load time.
To do this, I replaced the last part of your code with:
var lightbox;
Ember.View.create({
templateName: 'buttons',
controller: Ember.Object.create({
openBox: function () {
if( ! lightbox ) {
lightbox = Lightbox.create();
lightbox.get('view').create().append();
}
lightbox.open();
},
closeBox: function () {
if( lightbox ) {
lightbox.close();
}
}
})
}).append();
As you can see, I moved the lightbox = Lightbox.create(); and lightbox.get('view').create().append(); calls inside openBox(), but only calling them the first time this function is called.
I also added a guard in closeBox() so it doesn't try to close the nonexistent lightbox if it hasn't been created yet.
Here is an updated fiddle with the working code.