Category Archives: Windows Phone

Monetizing win phone 8 app with Microsoft pubCenter

Ok, there are many online tutorial out there if you google, and they will guide you step by step from installing the Microsoft advertising SDK for win phone 8, register account at pubcenter… until getting the ads display on your app. For example, like this one: http://msdn.microsoft.com/en-us/library/advertising-mobile-windows-phone-8-adcontrol-walkthrough-api(v=msads.20).aspx However, I followed this tutorial but ads is not showing in my app. Something wrong. The debug output shows an exception message:

An exception of type 'Microsoft.Advertising.Shared.AdException' occurred in Microsoft.Advertising.Mobile.DLL and wasn't handled before a managed/native boundary

1	An exception of type 'Microsoft.Advertising.Shared.AdException' occurred in Microsoft.Advertising.Mobile.DLL and wasn't handled before a managed/native boundary

Thanks to Chia Shaw Chyn that highlighted it could be a missing capabilities issue. So i hook up a function onto this adControl object to track down the detail when error occurred.

...
adControl.ErrorOccurred += AdUnit_ErrorOccurred;
}

void AdUnit_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("ad error "+e.Error.Message.ToString()); 
}

...

adControl.ErrorOccurred += AdUnit_ErrorOccurred;

}

void AdUnit_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)

{

System.Diagnostics.Debug.WriteLine("ad error "+e.Error.Message.ToString());

}

Ok… now it output debug msg like:

ad error Required capabilities are missing from manifest (WMAppManifest.xml): ID_CAP_IDENTITY_DEVICE,ID_CAP_MEDIALIB.

1	ad error Required capabilities are missing from manifest (WMAppManifest.xml): ID_CAP_IDENTITY_DEVICE,ID_CAP_MEDIALIB.

To add missing capabilities, Goto Solution->project->properties->WMAppManifest.xml->Capabilities (tab), make sure you have the following ticks:

ID_CAP_IDENTITY_DEVICE
ID_CAP_IDENTITY_USER
ID_CAP_MEDIALIB_AUDIO
ID_CAP_MEDIALIB_PHOTO
ID_CAP_MEDIALIB_PLAYBACK
ID_CAP_NETWORKING
ID_CAP_PHONEDIALER
ID_CAP_WEBBROWSERCOMPONENT

BOLD: are the one that the tutorial missed and is important to make sure they are ticked. For you who are interested, the complete code for my MainPage.xaml.cs is as below:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using wp_ads.Resources;
using Microsoft.Advertising.Mobile.UI;

namespace wp_ads
{
    public partial class MainPage : PhoneApplicationPage
    {
        private const string APPLICATION_ID = "test_client";
        private const string AD_UNIT_ID = "Image480_80";
        AdControl adControl;
        Grid grid;

        public MainPage()
        {
            InitializeComponent();

            grid = (Grid)this.LayoutRoot.Children[1];
            adControl = new AdControl(APPLICATION_ID, AD_UNIT_ID, true);
            adControl.Width = 480;
            adControl.Height = 80;
            adControl.ErrorOccurred += AdUnit_ErrorOccurred;

            grid.Children.Add(adControl);
        }

        void AdUnit_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)
        {
            System.Diagnostics.Debug.WriteLine("ad error "+e.Error.Message.ToString()); 
        }

    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

using wp_ads.Resources;

using Microsoft.Advertising.Mobile.UI;

namespace wp_ads

{

public partial class MainPage : PhoneApplicationPage

{

private const string APPLICATION_ID = "test_client";

private const string AD_UNIT_ID = "Image480_80";

AdControl adControl;

Grid grid;

public MainPage()

{

InitializeComponent();

grid = (Grid)this.LayoutRoot.Children[1];

adControl = new AdControl(APPLICATION_ID, AD_UNIT_ID, true);

adControl.Width = 480;

adControl.Height = 80;

adControl.ErrorOccurred += AdUnit_ErrorOccurred;

grid.Children.Add(adControl);

}

void AdUnit_ErrorOccurred(object sender, Microsoft.Advertising.AdErrorEventArgs e)

{

System.Diagnostics.Debug.WriteLine("ad error "+e.Error.Message.ToString());

}

Window 8 Start menu

I am being force to use window 8.1 pro by Microsoft due to the need to develop windows phone app. No matter how hard i force myself to try, same with the majority windows 7 users, I hate the new metro interface and miss the good old start button. Good news, there is an open source program that restore your start menu in windows 8. http://www.classicshell.net/ Mind you that it can be slow if you enable item in the menu as a list, especially the recently open doc. You can speed it up by changing them to link. More info here. But this still takes like 10s to start. To speed things up further, disable your jump list in Classic Shell, and the windows as well by right click on windows task bar->properties->Jump lists, unchecked all item under privacy section. And you might also wanto change the default shell logo, probably to your familiar windows logo. You can get a bunch of them at the forum. FYI, the best size for a logo is 36. You might also wanto disable the pretty but pointless lock screen, so you can directly boot to your desktop or login page. Follow this tutorial.

Font Awesome to PNG converter using PHP

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. It’s free and open source, available at http://fortawesome.github.io/Font-Awesome/ It’s very ready to use in HTML:

<html>
<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
  <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
</body>
</html>

<html>

<head>

</head>

<body>

<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>

</body>

</html>

I have created this open source at Github: https://github.com/exiang/php-font-awesome-to-png that helps you mass extract the icons into PNG images. Then, you can use it for your native mobile app development like ios, android and windows phone.

First, download the zip file and extract it to htdocs\php-font-awesome-to-png-master
Make sure your web server have php5 and gd module installed.
We need to download fontawesome-webfont.ttf separately from https://github.com/FortAwesome/Font-Awesome/tree/master/fonts. Drop it into the same directory as the php code.
You may run the php code from browser or console.

Modify the generate.php By default, php-font-awesome-to-png generate png images at the following size as this code shows:

$outputSizes = array('128', '96', '64', '48', '32', '24', '16');

1	$outputSizes = array('128', '96', '64', '48', '32', '24', '16');

It’s a PHP array, just modify at your will to add-in or deduct any size. As for colors, it is define as PHP array too:

$outputColors = array
(
	'white'=>array('r'=>255, 'g'=>255, 'b'=>255),
	'grey'=>array('r'=>128, 'g'=>128, 'b'=>128),
	'black'=>array('r'=>0, 'g'=>0, 'b'=>0),
);

$outputColors = array

(

'white'=>array('r'=>255, 'g'=>255, 'b'=>255),

'grey'=>array('r'=>128, 'g'=>128, 'b'=>128),

'black'=>array('r'=>0, 'g'=>0, 'b'=>0),

);

Please note not to use 255,0,255 as it is reserved color for background trimming. Modify the icons.data.php icons.data.php is a mapping between the character code used by fontawesome into the outputted png file name. Edit it if necessary, for example when fontawesome added new icon. You will need to refer to fontawesome css file. http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css For example, glass icon in css is:

.fa-glass:before {
  content: "\f000";
}

.fa-glass:before {

content: "\f000";

}

so the mapping in our php code would be like:

$icons = array
(
	'glass'=>array('code'=>'&#xf000;'),
);

$icons = array

(

'glass'=>array('code'=>''),

);

Now, we are done 😉 Happy using the converter and please help the project by contribute your latest up to date icons.data.php that sync with fontawesome. TQ.

YS Tech Share

Sharing knowledge and information on geeky stuff

Category Archives: Windows Phone

Monetizing win phone 8 app with Microsoft pubCenter

Window 8 Start menu

Font Awesome to PNG converter using PHP