Android: recording a video of your application

As I am releasing a new application any day now (Kludd) I was in need to record some gameplay from the app in order to do some kind of video promo. I had no idea how to record from a telephone (I knew how to take screenshots on my Samsung Galaxy S4 which was by holding down the on/off-button and the home button simultaneously) so I googled it.
I found that you could do it using your Android SDK. These are the steps in short:

* Connect your android phone to your computer
* In a command prompt, step into your android sdk directory and then platform-tools directory
* Enter the following command: adb shell screenrecord /sdcard/FILENAME.mp4 (cancel/end the recording by pressing CTRL + C)

(don't mind the errors, the recording still works!)
(don’t mind the errors, the recording still works!)

 

After that either go in on the phone via your computer explorer and enter /Phone/ and you’ll find the video there or find it using whatever exploration app you want on the phone.

JavaScript: Using Underscore.js to handle collections

As I was having to match two collections of objects in a project I was working on I faded out for a minute or two thinking of LINQ and the simplicities of working with collections in C#. I then woke up to horrid, nested for-loops in javascript and realized I had to do something. I googled around and found Underscore.js. This was a simple and fast javascript library for working with collections.

I made an example where I had a list of people and another list with some of the people I had already saved. I wanted a new list with the non-saved people. One way is to create a new list, loop over the list with all the people and within it loop through the list with saved people and compare it and add to the new list.
Or you can do as I did with Underscore.js:

http://jsfiddle.net/maffelu/2jCH9/

var people = [
    {name: "Magnus", "Age": 30},
    {name: "Fadangus", "Age": 29},
    {name: "Laban", "Age": 42},
    {name: "Bintje", "Age": 3}
    ];

var saved = [
   {name: "Fadangus", "Age": 29}
    ];

var result = _.filter(people, function(p)
                      {
                         return _.findWhere(saved, p) === undefined;
                      });

//result: [Object { name="Magnus", Age=30}, Object { name="Laban", Age=42}, Object { name="Bintje", Age=3}]

SQL Server: How to copy a row with an incremented primary key

So, today I had to copy a row in our database for testing purposes (needed the exact same data but with one small fix and compare it to the original). Due to fantastic database design the row so many rows that I had no interest in just writing an insert statement and copying the values by hand. I googled the internet and found several solutions that may work. The following was my favorite:

> select * from person

+ ------- + --------- + -------- +

| id      | name      | age      |

+ ------- + --------- + -------- +

| 1       | Magnus    | 29       |

| NULL    | NULL      | NULL     |

+ ------- + --------- + -------- +

I want to copy the row with id 1. This is a very short row with only three columns, so it would be easy to do by hand. Consider it a very small example.
Now, to copy this to another table do the following:

SELECT * INTO tmpperson FROM person

Then drop the id column from the temporary table:

ALTER TABLE tmpperson DROP COLUMN id

and insert it back:

INSERT INTO person SELECT * FROM tmpperson

Windows store app: certifying a game

The Panic Grid

As I had tested my first game developed for windows 8, The Panic Grid, and submitted it I was fairly confident it would pass all their tests. After all, I had used the Windows App Certification Kit (WACK) to test it prior to submitting it and it passed all its tests.
Well, it didn’t. Here are some of the complaints I got back:

“The app failed to resume properly from snapped view. More information on snapped views can be found here: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371.aspx”
I had completely missed out on the fact that an app had to be compliant with the Windows 8 snap feature. My last app has apparently made it passed this check but it could handle both landscape and portrait mode which probably explains it. This app only handles landscape.
So, what to do? Well, I had to handle it somehow and from what I could read in various forums it should be sufficient to show some kind of splash screen if the app goes into snap-mode so to speak and that’s what I did. As it is a HTML5 app I put this in my default.js file:

    window.addEventListener("resize", function (e)
    {
    	var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
    	var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
		
    	if (newViewState === viewStates.fullScreenLandscape)
    	{
			//Handle landscape
    	}
    	else
    	{
			//Handle everything else
    	}
    });

This was an easy way to handle the snap changes. But it didn’t solve it all together though. I also forgot to pause the game when it snapped so I had to fix that as well 🙂

When I had added the GFD project to my solution and added the RC files to it and compiled I got the following issue:
“Error RC1015: cannot open include file ‘afxresh.h’”

This was a bit easier though. The problem, and I’m no C++ expert here, is that the afxresh.h file is used for MFC (Microsoft Foundation Class) and if your project doesn’t utilize the UI controls from that package then you can simply change that include file to ‘windows.h’ instead. (for more information read this SO thread)

“One or more links, including privacy policy, websites or support contact links, provided with your submission do not resolve to a functional webpage and/or do not appear to be complete.”
This error was most likely triggered by the fact that I was linking to a page for the app that wasn’t complete. I didn’t think they actually checked them so I was going to finish it the day after but they were, it seems. Make sure that whatever content you link to is complete and correct.

“The app has declared access to network capabilities and no privacy statement was provided in the Windows Settings Charm.”
This is the standard error. Very embarrassing to get it. I had, however, forgotten to add a privacy policy to my Settings Charm. When I did, however, it turned out you couldn’t just add an external link in your default.js applicationcommands settings. I did the following thing to solve it:

    app.onsettings = function (e)
    {
    	e.detail.applicationcommands = {
    		// Add an About command
    		"about": {
    			href: "/pages/about/about.html",
    			title: "About"
    		},
    		"tips": {
    			href: "/pages/tips/tips.html",
				title: "Tips & Tricks"
    		}
    	};

    	WinJS.UI.SettingsFlyout.populateSettings(e);

    	var vector = e.detail.e.request.applicationCommands;
    	vector.append(new Windows.UI.ApplicationSettings.SettingsCommand("privacy", "Privacy policy", function ()
    	{
    		window.open("http://games.maffelu.net/the_panic_puzzle/privacy_policy.txt");
    	}));
    };

“Your submission includes markets which require a rating from a recognized ratings board. Please see http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh694080.aspx for more information on the ratings boards for the Windows Store. For more information on obtaining a game rating certificate, please see: http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh452763.aspx”
Well, I had totally missed out on the ratings. As I wanted my game to be allowed from 7 years and older I had to get approved from a whole lot of country. The good news is that it’s fairly straight forward to get certificates for Europe, US and large parts of the countries around the world, you simply fill out some forms that are linked in the sections regarding age rating. The bad news is that if you want to get approved everywhere (such as in Germany) you have to have your game approved and tested by some comity or something. I opted out of this and just removed those countries from my list of countries to distribute my app in.

After that the game was approved so my fixes seems to work. You can find it here:
http://apps.microsoft.com/windows/en-US/app/eb598e79-6941-48c4-bc7c-30289e724fa6

JavaScript: Basic form validation

This is a follow-up article to a previous article about basic DOM manipulation with JavaScript which you might want to read if you’re new to JavaScript.

The simplest way to get the element from the document object using the getByElementId() method and then checking the value property of the element:

var name = document.getElementById("Name");

This finds the element with the ID Name and put it in the variable name. We can now use the element to validate it. The following code is an example of how to check that the name isn’t empty and that the age is numeric and above 0. If there is an error it wil return false and color the background of the faulty input box red:

index.htm

<!DOCUMENT html>
<html>
	<head>
		<title>Javascript DOM manipulation Example</title>
		<script type="text/javascript" src="demo.js"></script>
	</head>
	<body>
		<h1>Javascript form validation test!</h1>
		<form id="MyForm" onsubmit="return validateForm()">
			<p>Name: <input type="text" id="Name" /></p>
			<p>Age: <input type="text" id="Age" /></p>
			<p><input type="submit" id="Submit" value="Submit"/></p>
		</form>
	</body>
</html>

demo.js

function validateName(name)
{
	if(name == "" || name == null || name === "undefined")
	{
		return false;
	}
	
	//Name must be more than one letter
	if(name.length <= 1)
	{
		return false;
	}
	
	return true;
}

function validateAge(age)
{
	if(age == "" || age == null || age === "undefined")
	{
		return false;
	}
	
	if(isNaN(age))
	{
		return false;
	}
	
	if(parseInt(age) <= 0)
	{
		return false;
	}
	
	return true;
}

function validateForm()
{
	//Check name
	var name = document.getElementById("Name");
	var isNameOk = validateName(name.value);
	console.log(name);
	
	if(isNameOk)
	{
		name.style.background = "#FFFFFF";
	}
	else
	{
		name.style.background = "#FF0000";
	}
	
	//Check age
	var age = document.getElementById("Age");
	var isAgeOk = validateAge(age.value);
	
	if(isAgeOk)
	{
		age.style.background = "#FFFFFF";
	}
	else
	{
		age.style.background = "#FF0000";
	}

	return isNameOk && isAgeOk;				
}

We hook up to the onsubmit event on the form element in HTML and we return the value we get from the validation method validateForm. If we return false the form won’t submit and that’s why we alter the form and color it, so that the user can identify where the errors are. This can be made even better by adding text or something but in this demo we’ll keep it simple.

Try a demo here if you want!

Remove specific site from history in FireFox

Sometimes when you want to test something out in a web application you notice how certain aspects of your app or page is cached even though you don’t want to. This could be an unexpected browser feature or a parent site behavior. As I was making a facebook application I noticed that when facebook loaded my application it seemed to cache a whole lot more than I wanted it too which caused problems when I made small CSS or javascript changes. I had to go to “Tools => Remove all history” all the time to force empty the cache. This however ruined it for all my history that I didn’t want removed.

It turned out that in FireFox you can actually selectively remove history. To remove the history for a specific site in FireFox, go to History => Show All History, press Today and you’ll see something like this :

To remove all history for facebook, just right-click on the entry and select Forget about this site:

That’s it, you’re done!