devedup.com

When you develop forms or any screens with input fields, occasionally the inputs will be obscured by the keyboard when it appears. This is bad usability for the user who now has to input data without being able to see what they have typed! One solution is to slide the whole view so that the field being edited is always visible.

This solution I provide adds a few methods to UIView (yes i know, adding categories to cocoa classes is naughty) – which will determine how much to slide the view based on the inputs position on the whole screen, and then slide the view at the same speed as the keyboard slide entry. It then will slide back to where it was when you are finished editing.

It is pretty simple to do this – here is how I calculate where to scroll the view:

- (void) maintainVisibityOfControl:(UIControl *)control offset:(float)offset {
	static const float deviceHeight = 480;
	static const float keyboardHeight = 216;
	static const float gap = 5; //gap between the top of keyboard and the control

	//Find the controls absolute position in the 320*480 window - it could be nested in other views
	CGPoint absolute = [control.superview convertPoint:control.frame.origin toView:nil];

	//If it would be hidden behind the keyboard....
	if (absolute.y > (keyboardHeight + gap)) {
		//Shift the view
		float shiftBy = (deviceHeight - absolute.y) - (deviceHeight - keyboardHeight - gap - offset);
		[UIView beginAnimations:nil context:nil];
		[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
		CGAffineTransform slideTransform = CGAffineTransformMakeTranslation(0.0, shiftBy);
		self.transform = slideTransform;
		[UIView commitAnimations];
	}
}

..and then I reset the view afterwards using:

- (void) resetViewToIdentityTransform {
	[UIView beginAnimations:nil context:nil];
	[UIView setAnimationDuration:0.3f]; //this is speed of keyboard
	CGAffineTransform slideTransform = CGAffineTransformIdentity;
	self.transform = slideTransform;
	[UIView commitAnimations];
}

You only need to make minimal changes to your own code, and call these methods from your UITextFieldDelegate methods (or other control delegates):

- (void) textFieldDidBeginEditing:(UITextField *)textField {
	[self.view maintainVisibityOfControl:textField offset:0.0f];
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
	if (textField == currentControl) {
		//If the textfield is still the same one, we can reset the view animated
		[self.view resetViewToIdentityTransform];
	}else {
		//However, if the currentControl has changed - that indicates the user has
		//gone into another control - so don't reset view, otherwise animations jump around
	}
}

Here is a copy of the XCode project:

Thanks

written by admin \\ tags: form visibility, inputs hidden, iPhone, keyboard hiding view, scrolling view

UPDATE: iOS 4.1 Now has this behaviour built into the SDK. You can set your keyboard type to be UIKeyboardTypeDecimalPad ! Finally !

Of the various keyboards you can choose when developing iPhone apps, the number pad doesn’t come with a decimal point. There is a blank button in the bottom left corner that doesn’t do anything, so I’m going to show you how to put a decimal point button there to look like this:

There are a few other tutorial around that show you how to do this, but i believe mine is better….because the code is simpler to use, its more flexible, and the UI colors and button states are perfectly matched to the rest of the keyboard (unlike some of the other tutorials) The code you use to implement this will look like this:

@interface DecimalPointNumberPadViewController : UIViewController <UITextFieldDelegate> {
	NumberKeypadDecimalPoint *numberKeyPad;
}
@end

@implementation DecimalPointNumberPadViewController
- (void) textFieldDidBeginEditing:(UITextField *)textField {
	numberKeyPad = [[NumberKeypadDecimalPoint keypadForTextField:textField] retain];
}
- (void)textFieldDidEndEditing:(UITextField *)textField {
	[numberKeyPad release];
}
@end

• it works on any number of UITextFields that are displayed on your view controller.
• It will only add one decimal point per text field.

To achieve this, here are the basic steps of what i do:

1. Create a custom UIButton with clear background and dark grey text.
2. For the highlighted state i change the background image of the button and the text color to be white
3. I find the UIKeyboard in the application window and add the custom button at the required location
4. I add a delegate to the button to listen for click events and pass the event to a handler which adds a decimal point to the current UITextField

Update 5th June 2010: OS4 compatible and using only public API

As using private API’s is against the SDK agreement, I’ve updated the code to remove references to any private API. It is also now compatible with OS 4.0.

Update 20th July 2010: This code was part of the app I’m working on and was accepted by apple.

A copy of my XCode project is here:

DecimalPointNumberPad-v4

Thanks

written by admin \\ tags: iphone keyboard, legal, number pad, number pad decimal point, OS 4.0

Here i will show you how to animate an object along a path on a UIView. I will create the path and draw it onto the UIView so that you can see it, and then use the same path for the animation.

I’m doing all of this within a UIView that i have added to my screen…

Firstly, we will draw a curved line on the screen….

//This draws a quadratic bezier curved line right across the screen
- ( void ) drawACurvedLine {
	//Create a bitmap graphics context, you will later get a UIImage from this
	UIGraphicsBeginImageContext(CGSizeMake(320,460));
	CGContextRef ctx = UIGraphicsGetCurrentContext();

	//Set variables in the context for drawing
	CGContextSetLineWidth(ctx, 1.5);
	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);

	//Set the start point of your drawing
	CGContextMoveToPoint(ctx, 10, 10);
	//The end point of the line is 310,450 .... i'm also setting a reference point of 10,450
	//A quadratic bezier curve is drawn using these coordinates - experiment and see the results.
	CGContextAddQuadCurveToPoint(ctx, 10, 450, 310, 450);
	//Add another curve, the opposite of the above - finishing back where we started
	CGContextAddQuadCurveToPoint(ctx, 310, 10, 10, 10);

	//Draw the line
	CGContextDrawPath(ctx, kCGPathStroke);

	//Get a UIImage from the current bitmap context we created at the start and then end the image context
	UIImage *curve = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();

	//With the image, we need a UIImageView
	UIImageView *curveView = [[UIImageView alloc] initWithImage:curve];
	//Set the frame of the view - which is used to position it when we add it to our current UIView
	curveView.frame = CGRectMake(1, 1, 320, 460);
	curveView.backgroundColor = [UIColor clearColor];
	[self addSubview:curveView];
}

Now we will create a keyframe animation, and a path that is the same as the line we just drew. We will also draw a circle, and animate it along that path:

- (void) animateCicleAlongPath {
	//Prepare the animation - we use keyframe animation for animations of this complexity
	CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
	//Set some variables on the animation
	pathAnimation.calculationMode = kCAAnimationPaced;
	//We want the animation to persist - not so important in this case - but kept for clarity
	//If we animated something from left to right - and we wanted it to stay in the new position,
	//then we would need these parameters
	pathAnimation.fillMode = kCAFillModeForwards;
	pathAnimation.removedOnCompletion = NO;
	pathAnimation.duration = 5.0;
	//Lets loop continuously for the demonstration
	pathAnimation.repeatCount = 1000;

	//Setup the path for the animation - this is very similar as the code the draw the line
	//instead of drawing to the graphics context, instead we draw lines on a CGPathRef
	CGPoint endPoint = CGPointMake(310, 450);
	CGMutablePathRef curvedPath = CGPathCreateMutable();
	CGPathMoveToPoint(curvedPath, NULL, 10, 10);
	CGPathAddQuadCurveToPoint(curvedPath, NULL, 10, 450, 310, 450);
	CGPathAddQuadCurveToPoint(curvedPath, NULL, 310, 10, 10, 10);

	//Now we have the path, we tell the animation we want to use this path - then we release the path
	pathAnimation.path = curvedPath;
	CGPathRelease(curvedPath);

	//We will now draw a circle at the start of the path which we will animate to follow the path
	//We use the same technique as before to draw to a bitmap context and then eventually create
	//a UIImageView which we add to our view
	UIGraphicsBeginImageContext(CGSizeMake(20,20));
	CGContextRef ctx = UIGraphicsGetCurrentContext();
	//Set context variables
	CGContextSetLineWidth(ctx, 1.5);
	CGContextSetFillColorWithColor(ctx, [UIColor greenColor].CGColor);
	CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
	//Draw a circle - and paint it with a different outline (white) and fill color (green)
	CGContextAddEllipseInRect(ctx, CGRectMake(1, 1, 18, 18));
	CGContextDrawPath(ctx, kCGPathFillStroke);
	UIImage *circle = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();

	UIImageView *circleView = [[UIImageView alloc] initWithImage:circle];
	circleView.frame = CGRectMake(1, 1, 20, 20);
	[self addSubview:circleView];

	//Add the animation to the circleView - once you add the animation to the layer, the animation starts
	[circleView.layer addAnimation:pathAnimation forKey:@"moveTheSquare"];
}

To get all this running, you can use this init method:

- (id)initWithFrame:(CGRect)frame {
	if (self = [super initWithFrame:frame]) {
		[self drawACurvedLine];
		[self animateCicleAlongPath];
    }
    return self;
}

and use something like this in your ViewController….

- (void)viewDidLoad {
	UIView *customView = [[Canvas alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
	customView.backgroundColor = [UIColor blackColor];
	[self.view addSubview:customView];
	[customView release];
    [super viewDidLoad];
}

Also…don’t forget to add your Quartz import:

#import <QuartzCore/QuartzCore.h>

I’m sure there are lots of better ways of doing this, such as using CALayers and adding CGImage to the layers. But that’s something I haven’t tried yet. The example above should be enough to get you started with animation along a path.

Here is a copy of the XCode project:

written by admin \\ tags: "animate along a path", "animation path", animation, CAKeyframeAnimation, iPhone, UIGraphicsBeginImageContext

Doing some iPhone development and this error really caught me out for a while:

2009-11-16 21:02:48.387 Pickers[3779:207] *** Terminating app due to uncaught
exception 'NSUnknownKeyException', reason: '[<UIViewController 0x381d740>
setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key datePicker.'
2009-11-16 21:02:48.388 Pickers[3779:207] Stack: (

It’s seemed fairly cryptic at the time. I had created a Tab Bar Controller and for each tab button, i hadn’t set its class identity – so each tab was still declared as a UIViewController instead of the actual Controller class that i had created.

The error comes from the NSKeyValueCoding category which allows you to access properties via setValue: forKey:

Person *aPerson = [[Person alloc] initWithAge: 53];
aPerson.name = @"Steve";
// NOTE: dot notation, uses synthesized setter, equivalent to [aPerson setName: @"Steve"];
NSLog(@"Access by message (%@), dot notation(%@),
    property name(%@) and direct instance variable access (%@)",
      [aPerson name], aPerson.name, [aPerson valueForKey:@"name"], aPerson->name);

So i guess it is just complaining that it can’t find the generated setter method named setDatePicker – because datePicker instance is not on the generic class.

written by admin \\ tags: iphone development, key value coding-compliant, objective-c

Wake-on-LAN is an Ethernet computer networking standard that allows a computer to be turned on or woken up by a network message. The message is usually sent by a simple program executed on another computer on the local area network.

BIOS Setup

You first need to enable WOL in your bios. This might be a Wake on LAN setting under power management, or it might be something like “Allow power from S5 by PME”. S5 is a power management state and PME is Power Management Event.

Computer Setup

You need to make sure you allow your network device to wake up your pc. In windows you can do this through the device manager for your network adapter. If you edit the properties for your network card (Control Panel > Device Manager > Network Adapters > Your Ethernet card > Properties > Power Management) – you can check a box to ‘Allow this device to wake up the computer’ and you can force it only to allow WOL magic packets to wake up the pc.

Routers

If your pc is behind a router, then you will need to forward all requests to port 9 to your pc that you want to wake up. Some routers allow you to assign applications to certain devices, and you may see ‘Wake On LAN’ as one of the applications.

Java code to wake up your pc

Below is some java code that you can use to wake up your pc using wake on lan. You will need to know your IP address and the MAC address of your network card.

package com.devedup.net;

import org.apache.log4j.Logger;

import java.io.*;
import java.net.*;

/**
 * Used for waking up computers
 *
 * @author dave
 * @since 9 Apr 2009 08:00:04
 */
public class WakeOnLAN {

    private final static Logger logger = Logger.getLogger(WakeOnLAN.class);

    public static final int PORT = 9;

    public static void main(String[] args) {

        if (args.length != 2) {
            logger.info("Usage: java WakeOnLan <broadcast-ip> <mac-address>");
            logger.info(
                "Example: java WakeOnLan 192.168.0.255 00:0D:61:08:22:4A");
            logger.info(
                "Example: java WakeOnLan 192.168.0.255 00-0D-61-08-22-4A");
            System.exit(1);
        }

        String ipStr = args[0];
        String macStr = args[1];

        try {
            wakeup(ipStr, macStr);
        } catch (Exception e) {
            logger.info("Failed to send Wake-on-LAN packet: + e");
            System.exit(1);
        }

    }

    /**
     * Send a Wake On LAN magic packet to ip and mac address specifed
     *
     * @param ip
     * @param macAddress
     */
    public static void wakeup(String ip, String macAddress) {
        if (ip == null || ip.length() < 1)
            throw new IllegalArgumentException(
                          "ip address cannot be null or blank");
        if (macAddress == null || macAddress.length() < 1)
            throw new IllegalArgumentException(
                          "macAddress cannot be null or blank");

        byte[] macBytes = getMacBytes(macAddress);
        byte[] bytes = new byte[6 + 16 * macBytes.length];
        for (int i = 0; i < 6; i++) {
            bytes[i] = (byte) 0xff;
        }
        for (int i = 6; i < bytes.length; i += macBytes.length) {
            System.arraycopy(macBytes, 0, bytes, i, macBytes.length);
        }

        DatagramSocket socket = null;
        try {
            InetAddress address = InetAddress.getByName(ip);
            DatagramPacket packet =
                new DatagramPacket(bytes, bytes.length, address, PORT);

            if (logger.isInfoEnabled()) {
                logger.info("Sending datagram (UDP) packet to ip["
                                   + address + "] on port[" + PORT + "]");
                logger.info("Message bytes [" + bytes + "]");
            }

            socket = new DatagramSocket();
            socket.send(packet);
            logger.info("Wake-on-LAN packet sent.");
            return;
        } catch (UnknownHostException e) {
            logger.error(e);
        } catch (SocketException e) {
            logger.error(e);
        } catch (IOException e) {
            logger.error(e);
        } finally {
            if (socket != null && !socket.isClosed()) {
                socket.close();
            }
        }
    }

    private static byte[] getMacBytes(String macStr)
                                     throws IllegalArgumentException {
        byte[] bytes = new byte[6];
        String[] hex = macStr.split("(\\:|\\-)");
        if (hex.length != 6) {
            throw new IllegalArgumentException("Invalid MAC address.");
        }
        try {
            for (int i = 0; i < 6; i++) {
                bytes[i] = (byte) Integer.parseInt(hex[i], 16);
            }
        } catch (NumberFormatException e) {
            throw new IllegalArgumentException(
                                "Invalid hex digit in MAC address.");
        }
        return bytes;
    }

}

written by admin \\ tags: "wake on lan", java, wol

I switched on my pc and then between 5 and 30 seconds later, before it booted into windows, it would shut down again. It would do this continuously. I disconnected everything from my pc (hard disks, usb devices, all but 1 memory module etc) so I had the bare minimum running. It still happened. So I narrowed it down to cpu, motherboard or power supply.

Doing a search revealed others with similar problems and the most common problem was power supply failures.

I decided to buy a new power supply and the motherboard and cpu upgrade anyway (mine was 3 yrs old). Swapped cpu and motherboard first and the problem was still there. So definitely the power supply. I swapped that, and the problem was resolved.

I then put the old motherboard and power supply on the bench and ran the system from there. I had the power supply fan side down (yes this is bad) – and noticed the system shut down a lot quicker. So I had deduced that it could just be an air flow problem with the power supply overheating. I opened up the power supply (they recommend you not to do this, so be careful!) and there was a lot of dust in there. I vacuumed it all out, ran the system again and the problem hasn’t returned!

So, after all that work (and £250 later) it was dust causing the problem. However, that’s 3 years of dust. I sent back the new power supply and now have put the old one back in and my system has been fine for weeks.

written by admin \\ tags: boot problems, dust, power supply, startup and shutdown