Archive for category Javascript

Javascript profiling in IE7…

Posted by shawson in Javascript on March 11, 2011

…cannot be done with the built in dev tools, as I reminded myself today.  I guess my memory painted a fonder picture of the first version of the IE debugger than it deserved.  I’ve been using the IE8 debugger a lot of late as I’m working on a very JS heavy UI targeted primarily at IE users, which has some firebug-esque features, like break points/ profiling etc and I foolishly assumed such things were always there, because a web debugger without these tools wouldn’t be much use..

Anyway turns out all is not lost- after wading through a bunch of rubbish solutions I eventually found  an awesome profiler (for free, of course!) which works with IE 6, 7 & 8!  Check it out- “DynaTrace AJAX Edition“

1 Comment

Javascript development on Cloud9… unless you’re on Windows :(

Posted by shawson in Javascript on March 2, 2011

Update 2011.03.03
@rikarends from the Cloud9 team was nice enough to chat to me on Skype about my windows woes and I’m reliably informed that the Windows chunk of Cloud9 still needs a little polishing and will be up to scratch in a future release; you can follow them on twitter for news (@Cloud9IDE) – in the mean time older branches from GitHub should run fine (v0.2.0)- in the mean time you can always run their most up to date version from their hosted service at http://c9.io

Very excited to try out a new HTML5 IDE for Javascript launched this week called Cloud9- you can sign up for an account and hosting, in much the same way as GitHub, however you can also download the project to run locally via NodeJS.

I did have some trouble with this though- I ran git command to download the project to my computer, no probs, then ran the run batch file (I’m on Win7 x64) and this ran about half way then died with this little beauty;

Failed to recurse into submodule path 'support/ace'

… :| All looked a bit bleak for a moment- did a bit of Googling and found other people had had this issue- dug through the launch script and found the command that gets fired on first time launch which seems to get a bunch of support packages from Git- this seems to be what failed- I CD’ed into the cloud9 folder and manually re-ran that get

git submodule update --init --recursive

And it seems second time’s the charm- everything finished downloading– that’s not to say I got it running!  Also found a problem in the batch file which starts it up in bin/cloud9-win32.bat – the use of EQ on the if conditions broke the script so I adjusted line 9 to;

IF NOT %ERRORLEVEL%==0 goto exit

and line 18 to;

IF %ERRORLEVEL%==0 goto exit

Now it manages to make it through the script only to say

E:\cloud9\cloud9>bin\cloud9-win32.bat
------ Starting Cloud9 server ------
"Something failed unfortunately, please try a clean clone"
Press any key to continue . . .

Digging into the script once more the command which gets fired to launch it is;

start support\node-builds\win32\node bin/cloud9.js -a "cmd /c start"

So I launched this without the “start” at the command line and the underlying error is;

E:\cloud9\cloud9>support\node-builds\win32\node bin/cloud9.js -a "cmd /c start"
2 Mar 21:05:17 - socket.io ready - accepting connections

                           Ajax.org Cloud9 IDE
                              version 0.2.0
Project root is:
Trying to start your browser in: http://localhost:undefined

So port undefined is obviously no use; I mod the batch script again to specify a port- in bin\cloud9-win32.bat line 16 I change to;

start support\node-builds\win32\node bin/cloud9.js -p 3000 -a "cmd /c start"

This sets the default port to 3000 and relaunching the batch file actually now fires it up- but still it doesn’t work. The browser lauches and I can see bits of the top menu from the UI- however in the accompanying console window I get spammed with errors such as;

Error: Command failed: execvp(): No such file or directory

    at ChildProcess.exithandler (child_process:80:15)
    at ChildProcess.emit (events:27:15)
    at Stream. (child_process:148:12)
    at Stream.emit (events:27:15)
    at Array.0 (net:1004:12)
    at EventEmitter._tickCallback (node.js:55:22)
    at node.js:772:9

I give up! If any one gets futher, please drop me a comment!

10 Comments

Work Starts on my WebGL Game!

Posted by shawson in HTML5, Javascript, WebGL on February 28, 2011

Caught up in all the excitement of WebGL becoming more mainstream, I’m building another javascript game. My first offering to the browser based game community was Manic Spaceman, a straight platform game based on ManicMiner which was a little rough around the edges, but boshed out on the quick for the 8weekgame competition.

This time round I intend to go full 3d, taking advantage of WebGL, and make a desert strike style game. I considered starting from scratch, as I did with Manic Spaceman, and writing my own engine to power it all, however given that I’ve next to no 3d experience I thought I would reduce the scope a little and use an engine that’s already out there. After about a week of research I’ve settled for Three.js – I say “settled”, but it’s actually shaping up to be a pretty awesome engine. There’s are a few decent engines out there, all obviously in their infancy, but having reviewed the feature set and looked at the demo’s and read around other developers experiences,  Three feels like the best choice. The other’s I considered were;

The Short List

Other contenders

I only considered open source offerings and looked for engines which

  • were still being actively developed (!)
  • seemed performant with high poly counts
  • handle shadows/ reflections
  • exposed access to GLSL
  • UV Mapping support
  • be relatively stable.

It was surprising how many engines had broken demo’s on their site, which never bodes well, but on the whole, they are all good offerings with almost all of them fulfilling my requirements.

While building my game, I shall be working through some OpenGL tutorials I found- a port of the well known NeHe OpenGL tutorial set, on LearningWebGL.com, which should put me in good stead to build my next game totally from scratch.

I shall post updates as I have something to show.  So far I’ve written a HeightMap generator which works from a greyscale bitmap to build terrains, and I’m currently working on getting the model to follow the landscape; I’ve a long road ahead!

3 Comments

Random Band Generator!

Posted by shawson in .net, C#.net, Javascript, jQuery on February 12, 2011

Just a quick post to mention that I’ve uploaded the Random Band Generator- just a bit of fun I boshed together built for a mate… check it out here.

No Comments

ManicSpaceMan now works in IE(9)!

Posted by shawson in HTML5, Javascript on February 12, 2011

Cast your mind back to about 6 months ago when Gareth, Martin and myself did the first 8WeekGame competition- Controversially I didn’t use XNA, but instead created a game which would run from your browser, using the new HTML5 canvas support- at the time it was a niche feature without wide browser support, but with the recent release of IE9, you can now finally play ManicSpaceman in IE! So go upgrade your browser and give it a go! Although I should note– for some reason the sounds don’t play in IE, despite me creating a whole MP3 set of the sounds specifically for it; so the best experience is still in FireFox or Chrome!

While on the subject of IE9- see here for the terribly useful developer notes on the new browser detailing all the new cool stuff it supports (css3/ html5 features) http://msdn.microsoft.com/en-us/ie/ff468705#_Intro

2 Comments

JQuery Validate() method for JQueryUI AutoComplete drop down boxes, while using KnockoutJS

Posted by shawson in KnockoutJS on January 20, 2011

It seems to be a rare mix, but on my form I have fields which are bound at client side using KnockoutJS, in drop downs styled using jQueryUI, using the expirmental autoComplete variant, which I then want to validate using jquery Validate method, to ensure someone actually selects something from the drop down!

So my form field looks like this;

<select data-bind='options: lookUps.Titles, optionsCaption: "Select...", value: Title, uniqueName: true'></select>

I have the following javascript to add the combobox autocomplete functionality;

 $("select").combobox({
                selected: function (event, ui) {
                    $(ui.item.parentNode).change();
                }
            });

Again, you’ll notice there’s another hack here to make everything play together nicly (see my blog post here)

Finally, the validation fix;

$.validator.addMethod('selectValueSelected',
          function(value, element) {
              return this.optional(element) ||
                (value.indexOf("__ko.bindingHandlers.options.optionValueDomData__") == -1);
          }, "Please select an option");
        $.validator.addClassRules("mustPopulateDropdown", {
            selectValueSelected: true
        });

All you need do now is add the css class “mustPopulateDropdown” to your select tags and they will be validated.

No Comments

KnockoutJS won’t bind to fields with numbers at the end?

Posted by shawson in KnockoutJS on January 20, 2011

Maybe this is just me? Almost finished my Sales Entry form I’ve been tinkering with- adding a “Create Customer” dialogue, and every field bound as it should (using Knockout) except for 3; Address1, Address2 and Address3. The moment I changed Address1 to AddressHouseNumber, it started working- so i changed the other, and sure enough they all started working. I tripple checked for typo’s so it wasn’t that- the input fields looked like this;

<input data-bind="value: Address1, uniqueName: true" class=""/>
<input data-bind="value: Address2, uniqueName: true" class=""/>
<input data-bind="value: Address3, uniqueName: true" class=""/>

Weird! has any one else come across something like this?

2 Comments

More Manic Spaceman (8weekgame) documentation done

Posted by shawson in HTML5, Javascript, jQuery on January 19, 2011

I promised I would, and I’m finally getting round to documenting the rest of the classes I wrote for my javascript platformer I built for the 8weekgame competition, as well as putting up the sourcecode. There’s still a few more to do, which I shall bash out through the course of the rest of the week. Check them out at www.shawson.co.uk/codeblog/8-week-game-competition/

No Comments

KnockoutJS/ jQuery tmpl with jQuery Validate

Posted by shawson in Javascript, jQuery, KnockoutJS on January 16, 2011

Quick post; I found tonight that my jquery validate was letting my knockoutjs viewModel.save() method run, even if the form wasn’t valid. This turned out to be because you need to set “uniqueName: true” on any form fields you want validated. Eg

<input data-bind="value: ChargedShipping, uniqueName: true" class="required number"/>

1 Comment

Unit testing Javascript event handlers or any other asynchronous delegate calls using jsUnit

Posted by shawson in Javascript, Test Driven Development on January 7, 2011

I had to nock up a test for a simple method I had added to a connection manager class. The class tracks wether the client browser has a current connection to the server, and the method I added was simple “check connection” which wrapped prototypejs Ajax.Request method; you basically call the method with a filename and a success and failure call back. I wanted to confirm that, given an accessible filename, the checker would call the passed delegate for success and set a few flags internal to the class.

We needed to make sure the Ajax.Request had totally completed and the result was ready to be tested before the jsUnit test was executed, which meant some how imposing a delay which coudl be cleared once one of the callbacks had fired.

The solution was simple; add a setUpPage function to the page which is a reserved function name which the jsUnit framework looks for. If this function exists it will hold off executing the tests until the setUpPageStatus variable is set to ‘complete’.

My final test for the success case looked something like this;

status = '';

function setUpPage() {
	myConnectionStatus = new ConnectionStatus();
	myConnectionStatus.checkConnection(
		"test.txt",
		function() { // success callback
			status = 'success called';
			setUpPageStatus = 'complete';
		},
		function() { // failure callback
			status = 'failure called';
			setUpPageStatus = 'complete';
		}
	);
}

function test_CheckConnectionCnxOK() {
	assertEquals('The success handler should have been called', 'success called', status);
	assertTrue('Connection should be set to online', myConnectionStatus.isOnLine());
}

1 Comment