Posts

Integrating AdMob into an Android Processing App

Integrating AdMob into an Android Processing App is surprisingly easy, once you know how. Here we show you the steps so you can display ads and monetise your app The processing forum has some great advice on doing this, but having tried it, we've adapted and improved this a little and listed the steps here The following steps assumes you already have a Processing sketch working in an Android app created in an IDE like Android Studio or Eclipse, as you will be dealing with non-Processing libraries. If not, you will need to port your sketch over as shown in the really useful tutorial over on processing.org We also assume you have signed up to AdMob and have an app key for your app. If not, you'll need to have over to AdMob and do so. We recommend using a Smart Banner as this easily adapts to screen size and resolution Step 1 - Import the AdMob library If you're using Android Studio or a dependency management build tool such as Gradle this is as simple as adding the ...

Android Live Wallpaper using Processing in Android Studio

We've recently wanted to create an Android Live Wallpaper using Processing, which is an ideal language for writing these as it makes it easy to create exciting animations using a Java-like language As it turns out, creating a live wallpaper from some existing Processing code is surprisingly simple You can, of course, do this using the Processing environment as shown in the tutorial over on processing.org . This covers the basics but we wanted to incorporate this into our Android Studio app which took a few extra steps Step 1 - Create a Processing sketch in your Android app If you don't already have a Processing sketch, now's the time to write one! If you've written this using the Processing environment, you'll need to create a new class that extends processing.core.PApplet and import the processing-android library, similarly to the processing.org tutorial on creating a processing app in Android Studio import processing.core.PApplet; public class YourSke...

How to show Admob ads in an Apache Cordova app on Android

Since the demise of AdWhirl and my previous post about how to set up ads with Cordova, I've had to revisit it and get it working with AdMob which now uses Google Play Services.  Again there are very few instructions around for this, though I did find this useful looking Cordova plugin  which seems to offer a neat solution which is likely easier than the solution I'm about to propose and is cross-platform where I am only working with Android.  However, for various reasons, I don't want to use the Cordova tools, I want to do it manually.  If you're like me then here is how to do it This How-To uses a mash of the Cordova official documentation  on WebViews, my previous post on AdWhirl and the Admob Quick Start guide .  The premise here is that, since Cordova can be made to display in an Android WebView, and AdMob also uses WebViews, we can combine the two and display one in front of the other I'll assume you have an AdMob account and know how to create an...

Adding Multiple Google Accounts to Kindle Fire

Image
I recently bought a Kindle Fire because they are great value for an Android tablet and I knew they were ways of installing Google Play so I could access the apps I had already purchased through Google Play without having to repurchase them from Amazon. Specifically I wanted Minecraft for my son to play - honestly, for my son ;-) The Fire I bought was the 5th Gen Kindle Fire (not HD, I wanted inexpensive!) and the awesome instructions on How To Geek  worked perfectly at installing Google Play. I highly recommend this solution for installing it, it was simple to follow and easy to do. From here I was able to log in to Google Play and download my apps including Minecraft which I had previously paid for on another device If all you want from this is to install apps from Google Play using your account, you are all set! However, if, like me, you also want to add a second Google user (in my case, my son) so he can use his account to synchronise his games, I got a bit stuck.  Unli...

How to manually add Cordova plugins to your app

I have recently been trying to add a plugin to an existing Cordova app (using Cordova 3.7.0).  Since I didn't create my app using the CLI I had 2 options: Create a new app using the CLI and copy my source files over Add the plugin files to my existing app For some reason I don't really like the idea of the CLI and wanted to do do this manually into an existing Android app, using Cordova, rather than use the CLI.  Don't ask me why, I just like doing things manually so I know what's going on under-the-hood I guess If you are like me and want to add a plugin manually, this is how to do it.  These instructions, though written for Android, will work for any any supported platform.  I will call out any differences between platforms that I know of Get the plugin source files You need the source code files for your platform (so .java for Android, .m .h for iPhone etc) as well as the plugin javascript files.  You might be able to get the source files from ...

Manual upgrade of Apache Cordova for Android (2.9.0 to 3.7.0)

I hadn't upgraded Cordova for ages and was still on version 2.4.0 (now at 3.7.0 at the time of writing). so I was surprised, but mostly dismayed, that I now had to use the Cordova tools to create apps.  Maybe it is just me but I liked being able to copy the jar, javascript file and config into an Android app myself.  I did have a go at using the tool, but the npm still didn't create the jar I wanted and I'd be forever tied into using the tool.  So I spent some time working out how to upgrade manually, and this is how to do it.   This obviously relies on you having java and android installed, which I'd guess you have if you're upgrading an Android app Step 1 Download the latest zip file from  http://cordova.apache.org/  and unzip it. Step 2  Install android if necessary and add it to the OS path.  You need ANDROID_HOME set or the android executable on the path.  I added both. Make sure you have Android version 19 installed from Andr...

Mobilize.js versus responsive web design (RWD)

Image
Mobilize.js versus responsive web design (RWD) Both mobilize.js and responsive web design offer solutions to having a mobile and desktop site from the same codebase.  This is a comparison and evaluation of the 2 approches mobilize.js rendering I previously blogged about mobilize.js and how it can be used to transform a website dynamically between a desktop and mobile-enabled site.  As a brief background, mobilize.js is a javascript library that detects if a mobile browser is being used and, using client-side javascript, and re-renders the page using predefined mobile-optimised css.  However mobilize.js is no longer being developed - the developers now recommend using responsive web design instead.  In one of the comments to my original post I said I would check out the relative merits and report back - this is me reporting back Responsive web design works by detecting the size of the display and rendering differently using css (css3) media queries. ...

Launch a website as a mobile app using PhoneGap/Apache Cordova

How to launch a website as a mobile app using PhoneGap/Apache Cordova I spent some time recently trying to find out how to launch my website as a mobile app.  The information was available around the internet but since it took me a while, I thought I'd collate it here in one simple post for anyone who wants to do the same I decided to use Apache Cordova since it gave me the framework for developing an HTML5 site as a mobile app already, meaning all I really needed to do was plug my website into it.  Their getting started guide has good information on how to create a Cordova project - I used Android but you can use whatever means you wish A basic Cordova app gives you a way to launch the app with an HTML page that you use to display your app contents.  The trick then is make the page load your website which you can do in one of 3 ways: 1. Package your site inside the app. This means it loads fast and without an internet connection.  The downside i...

Android Daydream with Processing.js

Image
How to create an Android Daydream with processing.js I've spent some time working out how to get processing.js (a nice javascript graphics library ported from Processing ) to display an Android Daydream (basically a screensaver that activates when the device is docked or charging) I previously wrote about how to display an HTML page as a Daydream which forms the basis for this post.  Please see my earlier post for full details but to summarise you can load an HTML page in a webview like this webView.loadUrl("file:///android_asset/www/index.html"); Processing.js allows you to display Processing code as javascript in a page, so all you need to do is either embed the processing.js code or load the Processing PDE file containing the code as explained on the processing.js site I only had a couple of issues with it which were: 1. The js code seemed to run at a much  higher frame rate than my native Processing code such that my animation looked insane . In the end I...

How to bypass SSL certificate checking in Apache Cordova 2.2 on Android

How to bypass SSL certificate checking in Apache Cordova 2.2 on Android (or how to override CordovaWebViewClient in versions of Cordova 1.9+) I came across a strange issue where I was unable to access a secure URL using HTTPS.  At first I thought it was due to the Cordova whitelist since there was an issue with it in Cordova 2.1.  In order to access an external URL you have to whitelist them eg <access origin="https://www.wikipedia.org" subdomains="true"/> This didn't help though and even if I allowed all URLS using <access origin = "*"/> it still didn't work.  Strangely though it was only one secure URL I couldn't access, not all of them As it turns out, it was probably to do with the way Cordova assesses valid certificates.  When an Android app is signed and deployed it is deployed in 'production mode' which means that any secure URL accessed must have a valid certificate signed by a certificate authority (C...

Creating an Android Jelly Bean Daydream from a WebView

Image
One of the new nifty features on Android Jelly Bean 4.2 is the concept of daydreams (basically a screensaver but also displays when docked etc).  I wanted to create one that displayed an HTML page, which makes for prety easy development and this is how First of all, this assumes you have API 17 (Android 4.2) installed, otherwise you won't have access to the relevant Android class Android Daydream option You need to create a new class that extends android.service.dreams.DreamService and override the onAttachedToWindow() method which is what is called when the service starts up.  In here all you really need to do is create a new WebView as normal and attach it.  Example code below import android.annotation.TargetApi; import android.service.dreams.DreamService; import android.webkit.WebView; @TargetApi(17) public class MyDreamService extends DreamService {   @Override   public void onAttachedToWindow() {     super.onAttachedToWindow(); ...

Eclipse Appcache Generator - auto-generate HTML5 appcache files

HTML5 Appache I won't go into a full explanation here (if you want a tutorial the  HTML5 Rocks  website) but HTML5 appache is a method of caching web content so that, when offline, it can still be accessed One method of doing this is to add a meta tag to each page specifying an appcache file, which will tell the browser to cache that page. But what if you want to tell the browser to cache everything when the site is first accessed? Well HTML5 has a way of doing that too - you still add the meta tag but also specify the files to be cached in the file. When it is accessed, those files will be cached. This though leaves you with a problem - how do you make sure you locate every file to be cached and add them to the file? This is where this plugin can help Plugin The Appcache Eclipse Plugin is a plugin for the Eclipse IDE that will check all your files for your site and add all html, image, css and javascript files to the appcache. Once the plugin is installed, all you n...

Running Jenkins CI on a Raspberry Pi

Image
I've had this idea for some time of running my own Jenkins CI (continuous integration) server for building my mobile apps.  That was exactly what I intended to run on my Raspberry Pi when it arrived.  Now it has arrived, I thought I would share an issue I had so that others with the same problem can also solve it My Raspberry Pi My Pi is running Raspbian, which is Debian based, so theoretically installing Jenkins is as simple as running apt-get: sudo apt-get install jenkins This certainly installed it ok, but for some reason, it wouldn't start up.  Searching google revealed on possible issue regarding Java versions - specifically that Sun Java currently doesn't run on the Raspberry Pi.  A summary of how to fix that issue is: sudo update-alternatives --config java then chose OpenJDK followed by a reboot of the Pi.Jenkins starts up as expected after boot. However, my installation had already installed OpenJDK, so that wasn't my issue As it turns out...

No cursor in Ubuntu linux 11.10

I've had this weird problem lately on Ubuntu 11.10 (64 bit) - I only seem to have a cursor in some windows and never in any of the system windows (desktop, unity bar etc). Well today it was winding me up so I decided to try and fix it A quick google got me this page: No Cursor in Ubuntu 11.04 with a Legacy Nvidia Card . Not the right version of Ubuntu I know, and I have no idea what video card I have either, as the system info shows it as 'unknown'. But I figured I'd try it anyway Steps from that page: 1. Open a terminal window 2. Stop the x server: sudo service gdm stop 3 Uninstall the nouveau driver: sudo apt-get --purge remove xserver-xorg-video-nouveau 4. Reboot the machine When I got the step 2 though, it said the gdm service wasn't found, so I just did step 3. This unfortunately stopped the cursor moving at all! So I reinstalled the nouveau driver, and now it works! Now idea why! So for anyone who needs this, my steps were: 1. Open a terminal ...

Apache Cordova (PhoneGap) + processing.js

The problem I wanted to be able to create cross-platform mobile applications whilst not having to do it in Javascript.  I've never liked Javascript, I'm not really sure why, maybe I don't fully understand it. The solution I had a brainwave that I could create a functional Java application using Processing (that I have used a lot and, hopefully, will be contributing author to a book on the subject if it ever gets published), port it to processing.js and deploy that as an Apache Cordova ( PhoneGap ) based mobile application.  As a short explanation, Apache Cordova is a cross-platform framework for writing and deploying HTML5 apps to most mobile platforms.  Processing is a graphical Java-based library of which processing.js is the Javascript equivalent.  Using both processing.js and Cordova, I should be able to deploy a java-based application into a cross-platform framework and run it as javascript The code This is the easiest way to do it (there are othe...

PhoneGap + processing.js = big problems

This is less a 'code solution' than it is a code issue, in that I don't know how to fix it and abandoned the solution.  I will likely go back and attempt to resolve at some point, but for now I just want to tell you about what I'd wanted to create, what the issues were and how it caused my PhoneGap app to be labelled as "sucks!!!!" As I previously blogged this solution, I figured I should also share these issues The problem I wanted to be able to create cross-platform mobile applications whilst not having to do it in Javascript.  I've never liked Javascript, I'm not really sure why, maybe I don't fully understand it. The solution I had a brainwave that I could create a functional Java application using   Processing  (that I have used a lot and, hopefully, will be contributing author to a book on the subject if it ever gets published), port it to   processing.js   and deploy that as an Apache Cordova ( PhoneGap ) based mobile ...

The PhoneGap Viewport size is too small on Android?

Image
I spent quite some time today trying to figure out why, when I load an external HTML file into my PhoneGap (Apache Cordova) app, the viewport only filled part of the screen Notice the big space at the bottom and the side border. I couldn't figure it out, so I started searching on Google: Googled solution 1 - Set the viewport meta tag Lots of the solutions I found involved setting the meta tag for the viewport, eg <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0/> However, this seemed to have absolutely no effect whatsoever.  I tried many variations of this Googled solution 2 - Set the page to use all the space Other solutions involved setting CSS so that the page filled the screen, eg html, body {   width: 100%;   height: 100%;   padding: 0;   margin: 0; } This also had absolutely no effect.  I was getting confused by now Googled solution 3 - Set Android propert...