Matthew Knott

I've been working on version 2 of the iPhone version of my blog. I love writing webapps for a device like the iPhone because your code is so much more direct and streamlined with out all that cross browser malarkey.

I've used the sliding tab interface that I've described in a previous post. It's a bit shaker but I'm going to work on optimizing it somewhat. Also, search, comments, categories, tags and progressive article loading have yet to be implemented.

On a side note I was really happy to have found the blog of Sacha Chua, an IBM web 2.0 specialist and evangelist. I love reading her posts, they're always engaging and insightful, and I'm supprised she hasn't featured on "a list apart yet.

Tags: Blog iPhone Sacha Chua

After spending some time today looking into ways to insert HTML tags into textareas on iPhone, I decided to knock up a quick editor for this site based around the insert at cursor position model as discussed in the previous article.

This post is the first real test of it's function. The biggest problem is scrolling up and down the textarea, it's extremely difficult.

To accentuate the positives however, it can insert the tags I mainly use, such as paragraph, bold, and code. Also it's better than typing it manually. I'm going to try using a two finger scroll to move the textarea.

Roll on firmware 2.0 and the copy and paste feature. For now though, here's how it's done.

function insertAtCursor(myField, myValue) {

if (myField.selectionStart || myField.selectionStart == '0') {

var startPos = myField.selectionStart;

var endPos = myField.selectionEnd;

myField.value = myField.value.substring(0, startPos)

+ myValue

+ myField.value.substring(endPos, myField.value.length);

} else {

myField.value += myValue;

}

}

To call the function, I pass in a reference to my textarea object, followed by the text to insert.

<span onClick="insertAtCursor(document.getElementById('articleBody'), '<p></p>');">P</span>

Tags: Javascript iPhone Content Rich Text Editor Textarea Function

I've been looking around for a rich text editor that works with the iPhone / iPod Touch Safari browser. I sometimes make posts when I'm out and about and manually creating html tags is a real bind, so my options, at a high level are:

• Use a rich text editor
• Add buttons to insert common tags
• Dynamically add paragraph tags based on carriage returns

The problem with the iPhone is that the keyboard is only displayed when the cursor is inside a textarea, which rules out rich text editing, beside the fact that you can't currently highligh a block of text.

The next reasonable option would invove a textarea and using javascript to insert html tags at the cursor point. The only problem with this approach is that although it works it removes focus from the textarea and the keyboard disapears. This is an inconvenience but is the best available option available currently.

Dynamically adding paragraph tags is a time saver, as you just need to focus on typing. The problem occurs when you don't want to automatically add paragraph tags, say around a block of code.

A solution we haven't discussed, which would be ideal, is a custom key / keyboard feature. If you could have a keyboard set aside for custom, complex phrases, that were user programmable, then you could add your html syntax this was. Alternatively, a html key, which when held down, lists 5 / 6 common html tags.

Hopefully, within the next year or so this issue will be addressed for Safari, otherwise, native os html editors will need to be used and the content pasted into the web page, which is far from ideal.

Tags: Javascript Safari iPhone Apple HTML Rich Text Editor Webkit

I'm in the process of developing a project management web app for the iPhone / iPod Touch, and I wanted to build a canvas based charting component to reflect time spent, resource use, etc.

I knew I could code bar graphs quite easily, but pie charts were a different matter, it'd been a few years since I'd needed PI for anything, so I had a look around for some direction.

There are a couple of ready made solutions out there, notably plotKit, which I really liked the look of, but it is dependent on another framework. I wanted some bare bones code so that I could build upon it easily, and most importantly, understand what was happening at each stage.

I found this example, which was perfect, a well written article with clearly written code. I quickly incorporated it into my application, but wanted it to be more like the plotKit example in appearance, with some additional visuals that was absent from both examples. Only a small thing, but I wanted a line from just inside each segment of the pie, leading to the label. Below is the result of my labours.

 

It was quite a job to achieve but I'm happy to share how I got there.

Firstly though, a disclaimer, I have not gone through tidying up the code yet this is a rough and ready block of javascript. Now that's out the way, on to the code. You should insert this into the for loop where the segments are built.

 

//Attempt to get label position

var sliceStart = Math.PI * (2 * sofar);

var sliceEnd = Math.PI * (2 * (sofar + thisvalue));

var angle = (sliceStart + sliceEnd)/2;

// normalize the angle

var normalisedAngle = angle;

 

if (normalisedAngle > Math.PI * 2){

normalisedAngle = normalisedAngle - Math.PI * 2;

}else if (normalisedAngle < 0){

normalisedAngle = normalisedAngle + Math.PI * 2;

}

 

What I've done is define the start and end position of the slice, please note I've removed the -0.5 from the calculation for the labels, otherwise they appear at the wrong positions. I then add the two values and devide by two to find the mid point of the arc.

 

var labelx = center[0] + Math.sin(normalisedAngle) * (radius + 10);

var labely = center[1] - Math.cos(normalisedAngle) * (radius + 10);

var labelBack = '';

var labelAlign = '';

 

Now that I have the correct angle, I use sine and cosine to determine the x,y pixel reference for the labels.

 

if (normalisedAngle <= Math.PI * 0.5) { //Top Left

labelx = (labelx - 10) + "px";

labely = labely + "px";

labelBack = 'none';

labelAlign = 'right';

}

else if ((normalisedAngle > Math.PI * 0.5) && (normalisedAngle <= Math.PI)) { //Bottom Right Quarter

labelx = (labelx + 15) + "px";

labely = labely + 10 + "px";

labelBack = 'none';

labelAlign = 'left';

}

else if ((normalisedAngle > Math.PI) && (normalisedAngle <= Math.PI*1.5)) { //Bottom Left Quarter

labelx = (labelx  - 30) + "px";

labely = (labely + 10 )+ "px";

labelBack = 'none';

labelAlign = 'right';

}

else { //Top Right

// text on top and align right

labelx = (labelx  - 20) + "px";

labely = (labely) + "px";

labelBack = 'none';

labelAlign = 'left';

}

 

Depending on which quarter of the pie chart the label falls into the is some adjusting to be done, see comments to understand which quarter is being addressed. I also included a variable for background colour and another one for text direction.

 

//Create Label

var percentage = thisvalue * 100;

var labelContainer = document.getElementById('label_container');

var oSpan = document.createElement('span');

var oLabelText = document.createTextNode(percentage.toFixed(2)+'%');

oSpan.setAttribute('style','left: '+labelx+'; top: '+labely+'; position: absolute; font-size: 60%; z-index: 100; background:'+labelBack+'; width: 45px; display: block; text-align: '+labelAlign+';');

oSpan.appendChild(oLabelText);

labelContainer.insertBefore(oSpan, labelContainer.lastChild);

//End of create label

 

Finally I output the labels to a div that surrounds my canvas tag, and hey presto, the tags are on the form. Note that I've positioned the elements absolute, therefore the enclosing div tag must be set to position: relative. So that's the labels out of the way, now I render the pie segment. Now, after that the relatively simple task of adding the indicator lines.

 

// Draw label line

var labelLineFromX = center[0] + Math.sin(normalisedAngle) * (radius * 0.9);

var labelLineFromY = center[1] - Math.cos(normalisedAngle) * (radius * 0.9);

var labelLineToX = center[0] + Math.sin(normalisedAngle) * (radius + 10);

var labelLineToY = center[1] - Math.cos(normalisedAngle) * (radius + 10);

 

ctx.beginPath();

ctx.shadowBlur       = 0;

ctx.moveTo(labelLineFromX,labelLineFromY);

ctx.lineTo(labelLineToX,labelLineToY);

ctx.lineWidth = 1;

ctx.strokeStyle = '#000';

ctx.stroke();

 

To get the start point, I go one tenth into the segment, and go 10 pixels outside of it, adjust the values to suit your needs.

 

That's it, simple looking back at it but took me a couple of days tinkering at it getting it the way I wanted it. Feel free to use this code as you will, and my sincerest thanks to the guy who came up with the original code, you saved me a lot of work, and this isn't meant as disrespect, merely a desire to customise and take your work further.

 

Tags: iPhone HTML Canvas Charting Javascipt Pie Chart plotKit

Well, it's late and has been a long day so I'll keep things brief. Today has been really productive in terms of iPhone development. Not started on the objective-c stuff yet, this is pure web-app territory.

Firstly, I was concentrating on effective navigation for iPhone apps. The outcome was a really funky tab system.

 

It's a good system because it allows you to have six or seven tabs easily selectable even on a portrait view. Also animated the closing action of the tabs to slide shut.

Secondly, I began porting my personal project management software over to an iphone Ajax-based application, for which I used the window.location.hash function to provide structure to the app. A first time implementation for me.

Finally, Demetrie came over and we watched "Hard Boiled", classic John Woo

Tags: Ajax iPhone Demetrie Tabs Hash Hard_Boiled John_Woo

Just a very quick and simple tip for your site. Why not add an iPhone compatible icon to your site. When a user adds your site to their iPhone / iPod touch home screen, rather that a clip of the page, it will use your specified icon.

Start by creating a 60px x 60px png image that you want to show as your icon, I've opted for a cheesy example :).

Then, in your site, add the following line to the head:

<link rel="apple-touch-icon" href="/images/iphone_icon.png" />

Then, when someone adds your site to their home screen, they see the nice, purpose made icon rather than a flakey corner of the webpage.

Tags: iPhone iPod_Touch Apple Icon PNG Homescreen

For a long time now I've fancied trying to make an online web-based ajax-powered 4x game for myself. It would be a space-based game, similar to a game I used to love, Star Wars Supremacy (Rebellion in the US).

I used to stay up till the early hours grinding away at that game. It was not well received critically but it struck a chord with me anyway.

The only part I wouldn't be able to replicate is the real-time 3d space combat component, which is only a small piece of the game anyway. I don't really plan on hosting the game, though I may offer it for free download if I think it's any good.

I've worked out the majority of algorithms already, either by myself or by googling. The last one was how the combat system would work. In the end, I decided to give each vessel an attacking and defensive value to start with, that gives us a simple calculation for victory. 

Sum of attack from side a versus sum of defense from side b, and vice versa. For example:

• Side a totals an Attack value of 65, and a defensive value of 135. 
• Side b totals an attack value of 105, and a defensive value of 110
  
• Side a's attack v defense outcome is -45, and their defense outcome is +25 giving them a total score of -20.
• Side b's attack v defense outcome is -20, and their defense outcome is +45, giving them a total score of +20.

It is a high level approach, playing real-time the result may differ through tactical deployment of assets and targeting strategically.

Add to this captain bonuses for game characters on-board the ships and it does get slightly more complicated, but that's a different discussion.

Anyway, back to the topic. As a proud Mac owner and an iPod touch owner, I've decided to side-line the web-based version and concentrate on a version for the iPhone / iPod touch using the highly capable iPhone SDK.

Having seen the demos, I think it might be possible to create a 3d space battle engine also, which would just be amazing.

We'll see how it goes, I'm going to dust of my C programming skills and brush up on objective-c through a couple of books that I've ordered and see where it takes me.

Tags: iPhone iPod_Touch Apple 4x 4x_game Objective-C Game Algorithm Space Starwars Star Wars Supremacy Rebellion

Just watched the apple keynote on the new iPhone sdk. I was very impressed by the apparent ease of use of the Api's and the comprehensive yet straight forward development tools and environments.

It gave me some great ideas for projects anyway!

I'm glad that apple were sensible with the pricing structure. Free meaning free in every respect. This allays some fears I had of spending a fortune on apps for my ipod touch. phew.

 

Tags: iPhone iPod iPod_Touch SDK Apple Projects