tclayson

three.js, 3d webGL and animation

tclayson — Fri, 28 Sep 2012 14:25:28 +0000

This is a cool 3d modelling and animation library with some cool examples such as these birds: Mr Doob Canvas Geometry Birds

It seems pretty cool, time to get into browser based 3d.

See more examples and download three.js at Three.js Github

Simple MY_Model class for all models in Codeigniter

tclayson — Tue, 10 Jul 2012 11:24:59 +0000

Codeigniter’s model structure is a bit complicated and doesn’t quite work in the ways you would think it should.

However, I have extended the default model class to include some helpful functions which should be available to all models. It is by far the easiest and most comfortable way to use models in Codeigniter that I’ve found so far.

Here is the code. Feel free to extend and edit as you feel. Let me know how you get on.

Put this in application/core/MY_Model.php


 
class MY_Model extends CI_Model {
 
	protected $table;
	public $obj;
 
	function __construct(){
		parent::__construct();
	}
 
        // insert a row - pass in an object to $o and it will insert
	public function insert($o){
		$this->db->insert($this->table, $o);
		$id = $this->db->insert_id();
 
		$query = $this->db->where($this->table.".id", $id)->get($this->table);
		$this->obj = $query->row();
	}
 
        // update - set the model's obj variable to be the updated object
        // then run this function. Assumes your primary key column is id
	public function update(){
		$this->db->update($this->table, $this->obj, array("id"=>$this->obj->id));
	}
 
        // get all the records with where clause if necessary
        // returns array of objects
	public function get_all($where = false){
		if($where){
			$this->db->where($where);
		}
		$query = $this->db->get($this->table);
		return $query->result();
	}
 
        // get a single record with where clause if necessary
        // returns object
	public function get($where = false){
		if($where){
			$this->db->where($where);
		}
		$query = $this->db->get($this->table, 1);
		return $query->row();
	}
 
}

Now you can extend and set the $table variable in your constructor.

class Table_model extends MY_Model {
    public function __construct(){
        parent::__construct();
 
        $this->table = "tblTable";
    }
}

This means you get all the default get(), get_all() and insert, update functions out of the box, with no need to replicate code.

Simple layouts/template system for Codeigniter

tclayson — Wed, 04 Jul 2012 11:22:14 +0000

Codeigniter comes with a nice way of dealing with views and such as part of its MVC structure.

However, it gets a bit more complicated when you want to replicate layouts, for instance if you have a header and footer, and don’t want to have to copy the code for this into lots of different views. After a couple of different views it gets pretty complicated and not very manageable.

So I’ve come up with a simple layouts/template system to work with Codeigniter in order to help alleviate some of the issues. You’re free to use this as you want.

Basically I’ve extended the controller class to include a couple more methods. Copy this into a file called MY_Controller.php in application/core/.


 
class MY_Controller extends CI_Controller {
 
	private $content_areas;
 
	function __construct(){
		parent::__construct();
	}
 
	function add_view($content_area, $view, $data = array()){
		$this->add_content($content_area, $this->load->view($view, $data, TRUE));
	}
 
	function add_content($content_area, $content){
		$this->content_areas[$content_area] = $content;
	}
 
	function render($layout = "default"){
		$this->load->view('layouts/'.$layout, $this->content_areas);
	}
 
}

The idea is that you create “layouts”, and within these layouts you can define “content areas” and fill those content areas with either generated content, or with views you have created.

Go ahead and create a file called default.php in application/views/layouts/. It can look like this:


    
        
        <?=$page_title?>
    
    
        My Website Layout

And create a view called homepage.php in application/views/. It can look something like this:

Hello World.

Now you need to create a controller which extends MY_Controller:

class Homepage extends MY_Controller

… and put this code in the index() function:

$data = array("text"=>"optional data variable if wanted for the views");
$this->add_view("main", "homepage", $data); // put the "homepage" view in the "main" content area, passing in the $data array if wanted
$this->add_content("page_title", "Welcome to my website"); // pass in the standard text content
$this->render(); // render the page with the layout and the content

How you should be able to go to http://yourwebsite.com/index.php/homepage and see the layout, view and content rendered correctly.

Custom WP_Query and loop with pagination – without plugins

tclayson — Wed, 28 Mar 2012 10:56:30 +0000

This is very easy to do, and yet is so difficult to find info on around the net. Follow this guide to build functional custom WP_Querys and loops with the correct pagination using WordPress’ built in functions.

Firstly you need to define your WP_Query. Importantly you don’t want to use the $wp_query variable. This may mess up other queries around the site (especially if you’re doing this in a template page and you’re using plugins). So, use another variable. Lets say you want to get all posts under the custom post type global_news.


	$global_posts_query = new WP_Query(
		array(
			'posts_per_page' => 10,
			'paged' => get_query_var('paged'),
			'post_type' => 'global_news'
		)
	);
 
	if($global_posts_query->have_posts()) :
 
		echo "";
 
		while($global_posts_query->have_posts()) : $global_posts_query->the_post();
		?>
			 the_title(); ?>
		
		endwhile;
 
		echo "
";
 
	endif;
?>
 

	 next_posts_link('« Older Entries', $global_posts_query->max_num_pages) ?>
	 previous_posts_link('Newer Entries »', $global_posts_query->max_num_pages) ?>

Ok, great, let me explain. The first block:

	$global_posts_query = new WP_Query(
		array(
			'posts_per_page' => 10,
			'paged' => get_query_var('paged'),
			'post_type' => 'global_news'
		)
	);

This sets up the WP_Query. If you look at the reference for WP_Query you will see a list of parameters that WP_Query accepts. You can modify most things about the query, and actually set up some complicated filtering if you need to. For now we’re just using the three simple parameters:

'posts_per_page' => 10

This tells the query how many posts to get per page. Lets say you have 24 posts altogether: on the first page there will be 10 posts, on the second page there will be 10 posts and (because there are 4 posts left over) on the third page there will be the remaining 4 posts.

'paged' => get_query_var('paged')

WordPress features a built in pagination system which appends /page/1 or ?page=1 style suffixes to your current url (depending on your permalink settings). This line of code will make sure that that value is parsed and passed into the WP_Query. So if you’re on page 2, you get the second lot of results.

'post_type' => 'global_news'

This last bit is just for our example. This gets posts which are of the custom post type global_news. For more information on custom post types see the reference.

The next section is the loop. Again, this should be quite self explanatory, especially if you’ve done any programming with WordPress before. The main thing to note is the use of the $global_posts_query variable we used before. Because we’ve created a custom WP_Query in a separate variable (not $wp_query) the standard have_posts() and the_post() won’t work. They need to be prefixed with our custom variable.

	if($global_posts_query->have_posts()) :
 
		echo "";
 
		while($global_posts_query->have_posts()) : $global_posts_query->the_post();
		?>
			 the_title(); ?>
		
		endwhile;
 
		echo "
";
 
	endif;

So we’re testing to see if we have posts. Then we set up an unordered list to display a list of the titles. Then we set up the loop. Again, note the use of the prefixed custom query variable. Once we have run $global_posts_query->the_post(); however we can now use the standard functions (e.g. the_title(); and the_content(); as we have set up a custom loop. This will only work within the while loop however.

Then its just a matter of outputting the title into a list item, ending the while loop, unordered list and then the if statement.

The last section is where we set up the links to go backwards and forwards through the list of posts.


	 next_posts_link('« Older Entries', $global_posts_query->max_num_pages) ?>
	 previous_posts_link('Newer Entries »', $global_posts_query->max_num_pages) ?>

The functions next_posts_link() and previous_posts_link() will output anchors with the text you set as the first argument which use WordPress’ /page/1 or ?page=1 URL vars we discussed earlier.

Due to the fact we have set up a custom WP_Query with our own variable name ($global_posts_query) we need to pass the max_num_pages variable of our custom post as the second argument (or else the correct links won’t display at all!).

If you put all this code together and place it in a template file in your theme then you should get the correct output of a list of titles of custom posts and the appropriate backwards and forwards links to go with it.

You can also use plugins like WP_Pagenavi to change the standard back and forwards links to have much more functionality, such as a page count and links to specific pages, such as you see on a Google search listing.

Let me know how you get on!

How To Fix Error: “Warning: session_start() [function.session-start]: open(/path/to/file, O_RDWR) failed: Permission denied (13) in /path/to/script.php on line LINE”

tclayson — Thu, 08 Mar 2012 16:23:33 +0000

I recently had this error. There was lots of information on the internet, but nothing that could help me with my specific case. It would appear that a session file is not accessible anymore and this is causing the error. Aside from the error itself, I was only seeing this error on one particular browser on one particular computer and could not replicate anywhere else.

The fix I found was to remove the session file at the location defined in open(/path/to/file, O_RDWR). To do this you need to SSH into your server. If you don’t have access to your server via SSH then you should probably submit a support ticket with your hosting company explaining which file you need removed and they’ll be able to do this for you.

Open terminal (or equivalent, I’m on a Mac) and SSH to your web server:

$ ssh username@server.com

And just remove the file. You could use sudo rm but you’re probably better off just renaming the file incase you need it again.

$ sudo mv /path/to/file /path/to/file.backup

This should clear up the error for you. I hope this helps someone else.

600 Windows Metro Icons Worth £320 For Free!

tclayson — Wed, 07 Mar 2012 13:33:23 +0000

Syncfusion are currently offering their “Metro Studio 1″, which features 600+ royalty free Windows Metro-style icons for free. It has a face value of $499 (~£320), so is a steal for nothing.

Syncfusion do not state whether this is a time limited offer, although all the information would point to it being a permanent offer. Syncfusion have noted on their FAQ:

It’s our 10th year in business and this is just our way of giving back to the development community. Additionally, as a developer of .NET components we have every incentive to stay in touch with developers.

As a Windows application I haven’t had a chance to test out the program yet, but reviews seem to point to the fact that this is an exceptionally useful and brilliant program.

Syncfusion are actively developing the range of icons, so it is definitely worth the space on your hard drive. On their website they state, “… we plan to create hundreds or even thousands more so keep the requests coming.”.

Metro UI is a Windows’ led realisation of Microsofts new Metro Design Language and features a tile-based interface with distintive block-colour, 2d icons. At the time of writing it is currently featured in Windows Mobile 7 and Windows 8.

Download Syncfusion’s Metro Studio 1 here. If you have downloaded it, tell me what you think of it in the comments, or tweet me.

Informal review of my new Macbook Air

tclayson — Mon, 05 Mar 2012 22:04:43 +0000

I’ve just bought myself a brand new Macbook Air. I went for the 13″ model with 4GB RAM, 1.7Ghz i5 and 128GB SSD (or, as the guy in the shop so eloquently put it “the entry level model”!!!). Its the best thing to ever happen to me (with the notable exception of all the other things that should probably come above a laptop, like my family and my girlfriend – they’re definitely better – no question).

I was a bit hesitant to tell the truth. Its not every day I spend huge amounts of money on something and the little niggles set in as I made my way to the KRCS shop (our version of an Apple shop). Realistically I’d have liked a Macbook Pro. They’re superior in every way, and I’m really a tech spec’s kinda person – the more RAM, Ghz and GB something has the better. I’m a sucker for a high number. But also I realised that I wouldn’t have the money to buy myself a top of the range MBP (if you’re going to spend a huge amount you might as well go all out and get the top spec model… right?), and also, one of the main complaints I have with my Dell 17″ Studio laptop is that it is so heavy, after a few hours with it in a shoulder strap bag I’m in excruciating pain.

So I turned my attentions to the Macbook Air. Falling in love with it wasn’t difficult. Its a think of beauty. A physiological phenomenon. However beauty very rarely wins me over in matters of such importance.

My main issues were the spec of the machine. You only get a choice between 128GB and 256GB, and the processor speed is a poultry 1.7Ghz i5 (or a 1.8Ghz i7 if you buy the 256GB version and choose to upgrade at great expense). This thing has the spec of a smart phone! There was no way it would reliably run XCode. It would have no chance compiling Android apps… surely?

How wrong I was.

I bit the bullet and bought the machine. I had done a great lot of research into its capabilities as a development machine and had read many reviews and discussions on the internet regarding how well it worked with XCode and Eclipse, as well as the general performance of it.

I opted for the 13″ version. As a developer I’m very keen to monopolise on screen real estate. I must say that the new spaces with OSX Lion has helped with a lot of the issues with having a small screen, but I still wanted something that I would be able to use appropriately, that wouldn’t cause overcrowding, or cause IDEs to only be able to display a few lines of code at a time. The 13″ model has the screen resolution of a 15″ Macbook Pro and I must say it fits a hell of a lot into it, very concisely and with no impact on visibility at all. Text is crisp and legible, colours shine through the wafer-thin screen as vibrantly as they do on my iMac. The screen never feels small.

To say that I don’t notice any performance loss is a complete understatement. In fact in many ways (presumably thanks to the SSD) my Macbook Air is much faster than my iMac at many tasks. Startup, loading programs and all sorts takes mere seconds compared to the long waiting times (e.g. opening Photoshop and booting) I experience on my iMac. OSX Lion runs smoothly and capably without any signs of a “slow” processor, as do all the programs I’m running, XCode, Eclipse, Coda and more. Multitasking is also smooth as hell. Although I haven’t tested it to full capacity it has no problem running Chrome with large numbers of tabs, Mail, iCal, twitter, XCode, Coda, Eclipse all at the same time. I’m sure there will be times when the processing power of my iMac will prove visibly better, but for my normal day to day needs I have no complaints.

My only worry is the size of the hard drive. I’m not one to put movies onto my laptop, nor will I use it to store photos or music (I have my iMac for that) however as I opted for the 128GB model I am wary that I don’t have that much space to mess around with. Applications that I don’t use come off as soon as I realise I’m not using them, and files I don’t use are deleted. I will probably learn to relax as time goes on, but its an issue that’s always at the back of my mind.

Overall I couldn’t be happer with my purchase. I’ve got a light machine, that beautifully sleek and impossibly thin. Its portable enough to be taken anywhere, but also durable and powerful enough to be used as I would any laptop or computer. Apple have thought of everything, even allowing my iMac to “share” its CD/DVD drive wirelessly with the Air, should I need to (although I can’t remember if I have ever even used the optical drive on my iMac for “reading” – I’ve probably burnt a few discs).

I would recommend a Macbook Air to anyone who is thinking of buying a new Apple laptop. Realistically there isn’t much that this little piece of magic can’t do that a Macbook Pro can, and it can do it all looking beautiful, and not denting your wallet, or breaking your shoulder!

50GB Free Storage with Box.net and Android

tclayson — Fri, 24 Feb 2012 10:52:12 +0000

Box, the main competitor to Dropbox and my favourite personal cloud storage service, is currently giving away 50GB with their updated Android app as long as you register and sign in on the Android app before March 24th. You also get a file size bump up to 100MB from 25MB.

This is an offer Box have offered before with the iPhone and the HP Touchpad. I received my 50GB free when I bought my HP Touchpad in the fire sale last year, and it’s brilliantly useful, offering a well designed app, cross platform compatibility, a web site for all situations and all the features that you get with Dropbox.

Plus, if you want to get into your friends’ good books you can give them all 50GB for free too. For this to work you must have your own domain name and be able to set up mail accounts on that domain. Change the main email address on your Box account to one @ your domain. Set your friends up with temporary mail accounts @ your domain too. When you’ve received your free 50GB you should see a link in the web control panel to give 50GB to your co-workers. Click this and fill out the form. Use the temporary emails you set up for your mates (so it looks like you all work at the same company). Once they’ve signed up using your temporary email addresses the can change their account email back to their personal email address and you can remove the temporary email address from your domain name.

Just to reiterate, in order to get the 50GB free you need to register (where you register doesn’t matter) then you need to download the Android app and sign in before the deadline (March 24th). The part which is important is the signing in to the app part. If you register and put off downloading the Android app and signing in till after the deadline you will not receive your 50GB free.

Creating Word Documents on the fly, on any platform, using HTML and CSS

tclayson — Thu, 23 Feb 2012 10:45:41 +0000

This is something I’ve come across a few times, and something I’ve had a few people ask me from time to time. Unless you’re using C#, and/or want a huge headache, this is probably your best option, and works very effectively.

The trick is to use HTML, CSS, save the file with a .doc extension and add a tiny bit of custom code to force Page View in Microsoft Word.

Here’s the code you want:

Word Document

This is a table with some text. This should be working fine.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quam tellus, blandit a commodo eget, consequat ac risus. Cras laoreet porttitor nisi. Etiam tempor, quam vitae lobortis condimentum, urna quam vestibulum turpis, ac dignissim sapien orci et lectus. Nunc cursus eros id lorem suscipit ornare. Sed eu imperdiet arcu. Nulla nec pharetra nunc. Phasellus iaculis sodales leo, quis ultricies est vehicula eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras posuere, mi ut commodo lobortis, eros lorem aliquam urna, sed iaculis lacus orci non neque. Aliquam eu sem nisi.

I would probably stick to standard layouts, and not do anything too fancy as you can’t guarantee compatibility. Remember Word is NOT a browser.

Just save your HTML document with a .doc extension and you’re good to go. If you’re building this server side using PHP (or any other language, the example is transferable to other languages) you can also set the headers to force the file to download as a .doc document like so:

header("Content-type: application/vnd.ms-word");
header("Content-Disposition: attachment; Filename=YourDocument.doc");

CSS Tricks: Clear floated elements

tclayson — Wed, 22 Feb 2012 22:55:52 +0000

This is my favourite CSS trick at the moment. Floated elements are so useful, however, they also cause so much annoyance when you have to find ways of clearing them to allow content to start properly further down the page.

Normally I would create a new element below the floated elements which would clear the elements ready for what was coming next:

However, the whole point of CSS is that you are removing the style from the layout, and this particular “fix” for the issue of floated elements has always annoyed me. It was the only way to get around the issue, however never conformed to the CSS/HTML divide.

The workaround is to use CSS’s :after pseudo class. This effectively lets you select the area immediately at the end of the element you’re referencing. Contrary to the definition :after actually behaves like jQuery’s append() function. As such be wary to apply the :after to the parent element which contains your floated elements.


  
    Left Column

    Left Column

    Left Column
  
  
    Right Col

    Right Col

    Right Col

/* 
 * set the container bg colour
 * so that you can see the effect
 */
.container {
  background: red;
  color: white;
  width: 500px;
}
 
.left_col, .right_col {
  width: 250px;
  float: left;
}
 
/*
 * here is where the magic happens
 * we use the :after pseudo class
 * to append some content to the
 * .container element. We then set
 * that appended content to display
 * as a block and clear: both.
 * We use visibility: hiddden because
 * we are using display: block and as
 * such we will have to set the height
 * to 0 to make sure no space is taken
 * up
 */
.container:after {
  clear: both;
  display: block;
  content: '.';
  visibility: hidden;
  height: 0;
}

Here is a jsfiddle to display the difference. Feel free to play around with it.