blog.rohanlatimer.com.au http://rohanlatimer.com.au/blog melbourne freelance web developer Wed, 16 May 2012 12:49:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Building a CMS with CodeIgniter: Part 4 File Uploading http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-4-file-uploading/ http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-4-file-uploading/#comments Wed, 16 May 2012 12:48:32 +0000 ro http://rohanlatimer.com.au/blog/?p=158 Continue reading →]]> so i’m cheating a bit here because i already have a file upload script i prepared earlier. this script allows the upload of an image to a directory. no extra fancy features. there are plenty of upload plugins out there but this is about as basic as you get. the script was orginally from the CI website here although i have modified it a bit.

1. create a controller for handling uploads called upload. in this controller, place the following code:

<?php

class Upload extends CI_Controller {

	function do_upload()
	{
		$config['upload_path'] = FCPATH . 'uploads/';
		$config['allowed_types'] = 'gif|jpg|png';
		$config['max_size']	= '100';
		$config['max_width']  = '1024';
		$config['max_height']  = '768';

		$this->load->library('upload', $config);
		$this->upload->initialize($config);

		$this->output->set_output( base_url() . 'uploads/' );

		if ( ! $this->upload->do_upload())
		{
			$error = array('error' => $this->upload->display_errors());

			$this->load->view('v_upload_fail', $error);
		}
		else
		{
			$data = array('upload_data' => $this->upload->data());

			$this->load->view('v_upload_success', $data);
		}
	}
}
?>

2. create the view for upload fail and success.
fail:

<html>
	<head>
		<title>Upload Failed</title>
	</head>
	<body>

		<?php echo $error;?>

	</body>
</html>

success:

<html>
	<head>
		<title>Upload Success</title>
	</head>
	<body>
		<h3>Your file was successfully uploaded!</h3>

		<ul>
			<?php foreach ($upload_data as $item => $value):?>
			<li><?php echo $item;?>: <?php echo $value;?></li>
			<?php endforeach; ?>
		</ul>

		<p><?php echo anchor('welcome', 'Upload Another File!'); ?></p>

	</body>
</html>

4. now you need to create the uploads directory in the web server root and give it the correct permissions.

5. throw this code in the welcome view and you’re good to go.

<?php
	echo form_open_multipart('upload/do_upload');
	echo form_input( array( 'type' => 'file', 'name' => 'userfile', 'size' => '20' ) );
	echo form_submit( 'submit', 'Upload' );
	echo form_close();
?>

well that’s two parts in one night! phew i’m done for now. next part i’ll setup a basic database to handle creating pages and get into dynamic url routing.

]]> http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-4-file-uploading/feed/ 0 Building a CMS with CodeIgniter: Part 3 Basic text input http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-3-basic-text-input/ http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-3-basic-text-input/#comments Wed, 16 May 2012 11:34:01 +0000 ro http://rohanlatimer.com.au/blog/?p=143 Continue reading →]]> so the point of this post is to first show how to make form input controls with Code Igniter, then to plug in a basic wysiwyg editor.

for form inputs, just check this official code igniter page

now for a WYSIWYG editor, i’ll use a plug-in as these have been around for a while and its much quicker than making my own. tinymce is my weapon of choice. after a couple of hours coding in front of the telly i’ve got a working verson. note that i’ve decided to use the jquery version as it’s highly likely i’ll use jquery at some stage in this CMS and that means the file size will be a little smaller.

1. download tinymce from here and put it in your web directory under ‘js’ for example.

2. download jquery from here. add it into your directy. or you can link directly to the web version at google or whatever.

3. in the welcome view (remember, you are now logged in), add the following code to head section. this firstly includes the js files including the base url from CI. next some jquery targets textareas called ‘tinymce’ and converts them to the wysiwyg editors. i’ve used the simple editor and changed the formatting so that css classes are used instead of html tags for bold, italic, underline and strikethrough. 

<script src="<?=base_url()?>js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="<?=base_url()?>js/tiny_mce/jquery.tinymce.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('textarea.tinymce').tinymce({
			// Location of TinyMCE script
			script_url : '<?=base_url()?>js/tiny_mce/tiny_mce.js',
			theme : "simple",
			formats : {
				bold : {inline : 'span', 'classes' : 'bold'},
				italic : {inline : 'span', 'classes' : 'italic'},
				underline : {inline : 'span', 'classes' : 'underline', exact : true},
				strikethrough : {inline : 'span', 'classes' : 'strikethrough', exact : true}
			}
		});
	});
</script>

4. put the following php in the body part of the welcome view. this just creates a simple form with a textarea and submit button. there is also the logout button from the last part.

<?php
	echo form_open('wysiwyg');
	echo form_textarea(array( 'name' => 'content', 'class' => 'tinymce' ));
	echo form_submit('submit', 'Submit');
	echo form_close();
	echo anchor('logout', 'Logout', array('class' => 'logout') );
?>

5. now you need to make the wysiwyg controller. use the following code. the important part here is storing the contents of the text area in the data variable so you can pass it to the view. ideally i’ll store this in a database, but i need a database first!

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class WYSIWYG extends CI_Controller {

	public function __construct()
	{
		parent::__construct();
		$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");

		$this->load->library('authenticate');
		$this->authenticate->checkLoggedIn();
	}

	public function index()
	{
		// store data in db here via model.

		// for now just spit it out to the page
		$data['content'] = $this->input->post('content');
		$this->load->view('v_wysiwyg', $data);
	}
}

6. now for the view. here’s the code

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>WYSIWYG demo</title>
	</head>

	<body>
		<h1>WYSIWYG demo</h1>
		<?php
			echo $content;
		?>

	</body>
</html>

that’s it! the wysiwyg is now passing the html typed by a user into a controller and then to a view. this is a very basic CMS! (without any db storage!)

next up is image uploading

]]> http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-3-basic-text-input/feed/ 0 Building a CMS with CodeIgniter: Part 2 Authentication http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-2-authentication/ http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-2-authentication/#comments Tue, 08 May 2012 13:57:57 +0000 ro http://rohanlatimer.com.au/blog/?p=128 Continue reading →]]> I’ve discovered a really annoying video tutorial by nettuts, but it gets the job done. just be glad you don’t have to listen to the annoying voice over. if you really want to bash your ears, find the video here

First thing is to create a new Controller called admin.

1. In application/controllers, create a file called admin.php. in this file, add the following code:

<?php if( !defined('BASEPATH')) exit('No direct script access allowed');
	class Admin extends CI_Controller
	{
		public function index()
		{
			$this->load->view('v_login');
		}
	}
?>

2. Now you need to create the view for the login screen. In the view folder, create a file called v_login.php. insert some html code here to display your login UI. the tutorial suggested the code below:

<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Login</title>
	</head>

	<body>
		<h1>Login</h1>
		<?php echo form_open('admin'); ?>
			<p>
				<?php echo form_label('Username', 'username' ); ?>
				<?php echo form_input('username', '', 'id="username"'); ?>
			</p>
			<p>
				<?php echo form_label('Password', 'password' ); ?>
				<?php echo form_password('password', '', 'id="password"'); ?>
			</p>
			<p>
				<?php echo form_submit('submit', 'Login'); ?>
			</p>
		<?php echo form_close(); ?>
	</body>
</html>

3. You need to alter the CodeIgniter autoload config. Open config/autoload and find the ‘libraries’ object and add ‘databases’ to it like so

$autoload['libraries'] = array('database');

also add url and form helpers by finding the helpers object and as follows:

$autoload['helper'] = array('url', 'form');

4. The next step is to add some validation so modify the admin controller and add the following code in the index function

$this->load->library('form_validation');
$this->form_validation->set_rules('username', 'Username', 'required|valid_email');
$this->form_validation->set_rules('password', 'Password', 'required');

if ( $this->form_validation->run() != false )
{
	// validation pass
}

You’ll also need to add the markup for the validation error in your login view.

<div class="error"><?php echo validation_errors(); ?></div>

5. next up is the database. you’ll need to create a new one however you prefer. i’ll use phpmyadmin. i’ve created an auto incrementing id field, a username field, password field, first and last name fields and a created field. a note when creating a timestamp field, do not enter a length for the field, phpmyadmin doesn’t like it. Once that’s done, manually enter one user into the db.

6. now you need a model for your controller to connect to. create a file in the application/models directory called m_admin.php and insert the following code:

<?php
	class M_Admin extends CI_Model
	{
		function __contruct()
		{

		}

		public function verify_user( $username, $password )
		{
			$query = $this->db->where( 'username', $username )->where( 'password', sha1($password) )->limit(1)->get('users');

			if ( $query->num_rows > 0 )
			{
				echo '<pre>';
				print_r($query->row());
				echo '</pre>';
				return $query->row();
			}
			else
			{
				//error or empty
			}
		}
	}
?>

7. now head back to the admin controller and load the model in by adding the following code: (swap the username and password out for your one)

$this->load->model('m_admin');
$this->m_admin->verify_user( 'username here', 'password here' );

8. you’ll need to alter the default database config in CodeIgnitor for this code to work. so open the database.php in the config directory and enter your database details. give it a test and it should spit out the first row from the db.

more to come soon…it’s bed time!

ok i’m back. so the next step is to take the actual user input. this is the same as using good ol $_POST.

9. replace the hard-coded username and password in the controller with $this->input->post(‘username’) and $this->input->post(‘password’) so the final line is

$this->m_admin->verify_user( $this->input->post('username'), ( $this->input->post('password') ) );

10. updating some config stuff. now this video changes the base url now which is something that should be done at the start. find the line that reads base_url and copy the root of your web site url into it. i’ll also change some security settings.

  • xss should be set to true. this filters dodgy hacks from POST, GET and COOKIE data
  • csrf should also be set to true. this helps prevent attacks that use image tags to conduc http requests to trusted websites

11. Next in the video, they store the logged in username into a session variable, except instead of using CodeIgniter for this, they use the php SESSION variable. strange. so i’ll use the CodeIgniter method instead.
first load the library using the following command in the constructor:

public function __construct()
{
	parent::__construct();
	$this->load->library('session');
}

you’ll also need to modify the config and add your own encryption key. this should be a 32 character (256-bit) string made up of letters and numbers.

to store a custom entry into the session, in this case the username, do the following:

$this->session->set_userdata('username', $this->input->post('username') );

finally, redirect to the secure page using redirect(‘welcome’)

12. now for a bit of fanciness, i’ll make it so the username field retains the value you entered if you enter an incorrect password. simply open the view class and change form_input for username to have a second parameter of set_value(‘username’).

13. a logout function would be good so use the following code:

public function logout()
{
	$this->session->sess_destroy();
	$this->load->view('v_login');
}

so now there is a logout function ready for a button to call it.

14. now is a good time to modify the config to load the login page by default. open the routes file in the config folder and set the default controller to admin.

15. now i’ll make sure that only logged in users can access the welcome page. add a constructor and the following code:

public function __construct()
{
	parent::__construct();

	$this->load->library('session');
	if ( !$this->session->userdata('username') )
	{
		redirect( 'admin' );
	}
}

it’s probably a good idea to add this functionality to the login page as well so if you are already logged in, just redirect to the welcome page.

16. now i’ll move the auth check into a library file so it can be reused across lots of controllers. create a library file called authenticate.php and paste the following code:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 

class Authenticate
{
    public function checkLoggedIn()
    {
		$CI =& get_instance();
		$CI->load->library('session');

		if ( !$CI->session->userdata('username') )
		{
			redirect( 'admin' );
		}
    }
}

now in each secure controller you just use the following two lines in the constructor:

$this->load->library('authenticate');
$this->authenticate->checkLoggedIn();

17. cleaning up the url. this should be done first really. once i’ve had some sleep i’ll tidy up this tutorial. create a .htaccess file in the root of your ci install. this is quite tricky in windows as it doesn’t like .htaccess files but the quick work around is to copy the .htaccess from the ci application directory. paste the following rewrite code:

RewriteEngine on
RewriteCond $1 !^(index\.php!resources!robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

now you don’t need the index.php in the url. you should also go into the config file and remove the index.php. just leave it blank. lastly i added a pretty url called logout so i don’t need to type admin/logout. i did this inside the routes file by adding the line:

$route['logout'] = 'admin/logout';

that’s it! again thanks to nettuts (even if the video was really annoying!) next up will be creating various user input modules for the CMS like text and images.

EDIT:
I discovered a new problem. after you logout you can still get back into the secure area by using the browser back button due to caching. luckily it’s very easy to fix. put this line inside your secure constructors:

$this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate");
]]> http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-2-authentication/feed/ 0 Building a CMS with CodeIgniter: Part 1 Installation http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-1-installation/ http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-1-installation/#comments Tue, 08 May 2012 12:18:20 +0000 ro http://rohanlatimer.com.au/blog/?p=124 Continue reading →]]> This tutorial series is more for my own benefit than anything else as I’ve decided to learn CodeIgniter and as with learning any technology, information is sprawled all over the web. I’ll be building a basic CMS using the CodeIgniter framework. The CMS will be simple and reusable so each component needs to be modular in nature.

This series assumes you have good knowledge of PHP, HTML, CSS and web development in general. You should also have an understanding of the MVC design pattern. I also wont be going into great detail into each process, but I will provide the links where i have got the information from so you can learn as much or as little as you  like.

For this series i’ll be using the latest version of CodeIgniter at the time of writing; 2.10.

Installation

1. head over to the CodeIgniter website http://codeigniter.com/ and download the source.

2. extract the CodeIgniter files into an appropriate folder on your web server. if you want to work locally, use WAMP, MAMP or XAMPP.

3. open your installation in a web browser and you should get the screen below.

CodeIgnitor Installed correctly

 

ok that was easy. so next up is authentication. i’ll figure out how to create a simple login screen. check back soon.

 

]]> http://rohanlatimer.com.au/blog/2012/05/building-a-cms-with-codeigniter-part-1-installation/feed/ 0 FlashDevelop AS3 Deus Ex:HR syntax colour http://rohanlatimer.com.au/blog/2012/02/flashdevelop-as3-deus-exhr-syntax-colour/ http://rohanlatimer.com.au/blog/2012/02/flashdevelop-as3-deus-exhr-syntax-colour/#comments Sat, 11 Feb 2012 01:24:13 +0000 ro http://rohanlatimer.com.au/blog/?p=111 Continue reading →]]> yep this is as nerdy as it gets people. i had some time to finally do a custom syntax colour scheme for flashdevelop, my tool of choice and here it is, based on Deus Ex:HR. Note this is only for AS3 and i just whipped it up so let me know if there are any oddities with it.

 

click here to download
the font is called Square 721 BT and appears to be a free one. i grabbed the ttf from here

]]> http://rohanlatimer.com.au/blog/2012/02/flashdevelop-as3-deus-exhr-syntax-colour/feed/ 0 planned obsolescence and printers http://rohanlatimer.com.au/blog/2012/02/planned-obsolescence-and-printers/ http://rohanlatimer.com.au/blog/2012/02/planned-obsolescence-and-printers/#comments Fri, 10 Feb 2012 07:15:07 +0000 ro http://rohanlatimer.com.au/blog/?p=108 Continue reading →]]> home printers in my view are one of the most blatant examples of capitalism saying: “i don’t give a fuck about anything but money”. for starters, it’s nearly cheaper to buy a new printer, than get replacement cartridges. then they are just designed to stop working after a certain time.

take my Epson Stylus PHOTO TX700W. the other day it decide to spit out a message saying i needed to replace my ink pads and then refused to work. forget that the unit also has a scanner built in meaning you can’t use that anymore either. and so why can’t i just replace the ink pads? well they are designed to be only replaceable by a qualified technician (which i very much doubt even exists given the price of this level of printers).

so do you think i would just lay down and let Epson rape me printer style? fuck no! here’s what i’ve done. firstly, around 2 years ago (the printer is about 3 years old) i purchased a CISS from http://www.rihac.com.au/. since then, i haven’t even had to buy replacement ink. i’ve reset the ink sensor on the printer around 6 times, so i’m thinking that’s at least how many cartidges i’ve saved purchasing. so this stopped the INCREDIBLE waste of plastic in ink cartidges not to mention the cost – $139.99 for 6 colours or $26.99 for one on epson australia’s website compared with $130 for the CISS which comes with about 8 TIMES THE AMOUNT OF INK IN CARTIDGES.

and as for the replacement ink pad? i called bullshit and downloaded some software to reset the printers inkpad counter. a quick search of the web and i found this utility. within seconds the error had gone and the printer was working again. this is just absolute bullshit and i know it’s not just Epson doing this.

so here is a message to Epson and the other printer companies openly engaging in planned obsolescence. GO FUCK YOURSELF.

]]> http://rohanlatimer.com.au/blog/2012/02/planned-obsolescence-and-printers/feed/ 0 Making Photoshop a tilemap editor with ExtendScript http://rohanlatimer.com.au/blog/2012/02/making-photoshop-a-tilemap-editor-with-extendscript/ http://rohanlatimer.com.au/blog/2012/02/making-photoshop-a-tilemap-editor-with-extendscript/#comments Tue, 07 Feb 2012 10:06:08 +0000 ro http://rohanlatimer.com.au/blog/?p=97 Continue reading →]]> i’ve been working on a basic actionscript tile engine for making 2d games for ages. i’ve played around with a few frameworks on the net, most notably flixel and while these tools are great, i just want something really simple. the tile engine itself is nearly ready and has been for some time now. the main issue has been an easy way of creating tilemaps. when searching for tools i just haven’t found anything that suits my liking so i thought i’d make my own. now if i could get funding to make a nice air app so everyone could use it for free i would, but because i’m flat out busy and have little time i decided just to make a little script  for photoshop that would output a tilemap txt file. it’s called tileshop and here’s how it works:

  • arrange uniform tiles in photoshop, with each tile on it’s own layer
  • make sure each layer is named. if two layers (tiles) are the same, make sure they have the same name. using numbers will be the most efficient.
  • go to file > scripts > browse… and find the tileshop script.
  • enter the size of the tile in pixels ( at the moment it only supports square tiles )
  • select folder to save the tilemap and presto, tilemap generated!

The tilemap simply stores the size and a CSV string of the tile ids. so very basic but it should do the trick!

here’s the script:

// tileshop.jsk
// @author rohanlatimer.com.au
// @version 1.0
// @date 07Feb2012

// enabled debugging by commenting out this script
//$.level = 1;

if( BridgeTalk.appName == "photoshop" )
{
// check a document is open
if( app.documents.length > 0 )
{
// ask user for tile size
var userCancelled = false;

var dlg = new Window('dialog', 'Tileshop setup',[400,300,800,430]);
dlg.msgPnl = dlg.add('panel', [25,15,375,120], 'Welcome to tileshop 1.0!');
dlg.msgPnl.okBtn = dlg.msgPnl.add('button', [20,60,115,90],'OK', {name:'ok'});
dlg.msgPnl.cancelBtn = dlg.msgPnl.add('button', [225,60,325,90],'Cancel', {name:'cancel'});
dlg.msgPnl.titleSt = dlg.msgPnl.add('statictext', [15,20,210,40],'What size are your tiles? ');
dlg.msgPnl.titleSt = dlg.msgPnl.add('statictext', [287,20,320,40],"px");
dlg.msgPnl.titleEt = dlg.msgPnl.add('edittext', [215,20,285,40],0);
dlg.msgPnl.titleEt.active=true;

// Check that the number input is within the valid range.
// If OK - continue, else display an error message.
dlg.msgPnl.okBtn.onClick = function()
{
if(!isNaN(dlg.msgPnl.titleEt.text))
{
if((dlg.msgPnl.titleEt.text)> 0)
{
dlg.close(0);
}
else
{
alert("Number must be between greater than 0!");
}
}
else
{
alert("Invalid number input!")
}
};

// Set the cancel variable to true if the user cancels the operation
dlg.msgPnl.cancelBtn.onClick = function()
{
userCancelled = true;
dlg.close(0);
};

// Display the dialog
buttonSelected = dlg.show();

if( !userCancelled )
{
var tileString = "size:" + dlg.msgPnl.titleEt.text + ";\rmap:";

// iterate through each layer and create a comma delimited string
for( var i = 0; i < activeDocument.layers.length; i++ ) { if( !activeDocument.layers[i].allLocked && !activeDocument.layers[i].isBackgroundLayer ) { if( i > 0 )
{
tileString += ",";
}
tileString += activeDocument.layers[i].name;
}
}

tileString += ";";

try
{
var outputFolder = Folder.selectDialog( "Select a folder to save the tilemap" );
if( outputFolder == null )
{
alert( "Please select a folder" );
}
else
{
var of = new File( outputFolder + "\\tilemap.txt" );
of.open( "w" );
of.write( tileString );
of.close();

alert( "Tilemap saved!" );
}
}
catch( exception )
{
alert( "Please select a folder" );
}
}
}
else
{
alert( "Please open a document to export" );
}
}
else
{
alert( "This script is only for Photoshop!" );
}

download it here: tileshop.jsx

]]> http://rohanlatimer.com.au/blog/2012/02/making-photoshop-a-tilemap-editor-with-extendscript/feed/ 1 2011 wrap up http://rohanlatimer.com.au/blog/2011/12/2011-wrap-up/ http://rohanlatimer.com.au/blog/2011/12/2011-wrap-up/#comments Mon, 19 Dec 2011 09:16:37 +0000 ro http://rohanlatimer.com.au/blog/?p=85 Continue reading →]]> no one probably gives two shits what i think was the best things to come out of this year, but hey it’s a good record for myself. so if you are reading this, give yourself a pat on the back for me. also note that not everything in this list was released in 2011, it’s just when i first experienced it. and remember, this is a list of my favourite things.

Console/PC Game of the year
Winner: Deus-Ex: Human Revolution (PC)
being a huge fan of the original and given invisible war was a let down, i was hugely sceptical of this one. the very nice augmented edition enticed me to pre-order – something i hadn’t done all year. and so entering was expectations set to zero, i was pleasantly surprised by the brilliant world square enix had created. they obviously took a lot of notes out of the original’s book and it showed. now if i can just get a new computer so i can run it at max settings…

Mobile Game of the year
Winner: Phone Story (Android)
this game is not so much a game but a cheeky and depressing lesson. it hits the nail right on the head and screams the message out with hilarity that makes you feel bad for laughing. hopefully this game starts a trend in this genre learning through games that stays far away from games in the 90s like ‘mario is missing’

Movie of the year
Winner: In The Footsteps of Marco Polo (2008)
Ok i don’t watch many movies. probably saw under 20 this year. and half of them on flights. and the ones i do watch are normally documentaries. so it comes with no surprise that a documentary wins. this one is about 2 insane americans who decide to follow the route of marco polo from venice to china and back again – avoiding air travel. they somehow get through Afghanistan and Iran with the help of local warlords. great watch if you like travel.

Album of the year
Winner: Endgame by Rise Against
No surprise here from a punk rocker. Brilliant flow. message stronger and clearer than ever and the vinyl edition sounds great. if you like punk or just rock music with a message, give this one a listen.

Book of the year
Winner: The Shock Doctrine by Naomi Klein (2007)
It’s a beast of a read and pretty heavy to digest, but once you get through this book, it will change the way you view economics and politics. thought provoking, scary and surreal, klein begins the book with a massive slap to the face and remains relentless throughout. not one you’ll want to put down. an eye opener.

Gig of the year
Winner: One day as a lion (Prince of Wales)
Out for the big day out, Zach de la Rocha and Jon Theodore played at St Kilda’s prince in a one off gig with all proceeds going to Queensland flood victims. Considering they only have one EP out i didn’t really know what to expect. Zach was his usual ball of intense anger screaming out lyrics from the self titled EP. Closing with the band/title track One Day as a Lion, the bass was an experience unto itself – I think most of the audiences hearts were moved if not emotionally, definitely physically!

Travel Desitination of the year
Winner: Mimosa Rocks NP
I randomly ended up here with Laurel on new years eve and subsequently the 1st day of the year and this is a great spot. I won’t say exactly where it is but you’re smart right? you’ll figure it out. And this spot beat out the New Zealand Ski fields, the Canadian Rockies and Central Australia – all great places. who says you need to go overseas to find great places?

Idiot of the year
Winner: The Australian public
Why? for giving Tony Abbott a better approval rating than Julia Gillard. Ok Julia, isn’t doing a fantastic job at selling herself and the Labor party, but come on. Tony Abbott is an absolute moron. I would rather vote for Family First than this buffoon – actually nah i wouldn’t go that far, i’d just off myself instead. so if you are like me and consider Abbott a loser consider yourself excused from this award.

]]> http://rohanlatimer.com.au/blog/2011/12/2011-wrap-up/feed/ 1 AIR 3.0/FP 11.0 Mobile game test: Pure AS3 vs Flixel vs Starling http://rohanlatimer.com.au/blog/2011/10/air-3-0fp-11-0-mobile-game-test-pure-as3-vs-flixel-vs-starling/ http://rohanlatimer.com.au/blog/2011/10/air-3-0fp-11-0-mobile-game-test-pure-as3-vs-flixel-vs-starling/#comments Fri, 21 Oct 2011 09:57:39 +0000 ro http://rohanlatimer.com.au/blog/?p=73 Continue reading →]]> since the new air runtime is out for mobiles i thought i’d give it’s new performance benefits a speed test. i’ve created a simple demo which continuously generates a bitmap sprite and drops it down the screen at a random speed. on top of that each sprite rotates to add some extra strain on the cpu/gpu. once the sprite leaves the screen, it is destroyed. sprites are capped at 100 on screen at a time. i’ve also used my swfconsole tool to track the fps.

my test device is an HTC Desire running 2.2.2. i don’t have an iphone and don’t really want to sign up to there development program so if someone has an iphone and wants to test this, send me an email and i’ll put the results up. i run the test on the phone for a minute and take the average fps score.

the demo was built using FlashDevelop and following this very quick and ace tutorial. i decided to test out the performance of pure as3 with no additional libraries, the flixel framework and the starling framework. and here are the results: *drumroll*

Pure AS3
i deliberately didn’t use any blitting techniques in my demo as this is pretty much what flixel will do for me so this is simply a bunch of Sprite classes with embedded bitmaps falling down the screen.

CPU: 20 fps
GPU: 18 fps
File size:  60kb (not including air runtime)

Flixel
i had some pretty high hopes for flixel as i’ve used it before a few times and its fast. in this case it was too, however it’s only good for pixel based games as it was actually slower than pure as3 at full resolution (zoom 1). at a zoom level of 2, i got the following results:

CPU: 25 fps
GPU: 16 fps
File size:  112kb (not including air runtime)

Starling
this is the new GPU enabled library and unfortunately it doesn’t work yet :( most likely due to AIR for mobile not supporting stage3D yet. apparently it will be available sometime early next year according to Adobe. the demo kind of worked, but the viewport was totally screwed. i’ll post an update once stage3D is available for mobile. alternatively, if anyone has been able to get it to work, please let me know!

 

winner: 
well there isn’t really any clear cut winner. choose pure as3 if the res matters, otherwise go for flixel for pixel based games. as for starling, we’ll just have to wait and see…

]]> http://rohanlatimer.com.au/blog/2011/10/air-3-0fp-11-0-mobile-game-test-pure-as3-vs-flixel-vs-starling/feed/ 1 tutorial: twitter hashtag display with jquery http://rohanlatimer.com.au/blog/2011/10/tutorial-twitter-hashtag-display-with-jquery/ http://rohanlatimer.com.au/blog/2011/10/tutorial-twitter-hashtag-display-with-jquery/#comments Wed, 19 Oct 2011 06:21:34 +0000 ro http://rohanlatimer.com.au/blog/?p=62 Continue reading →]]> so i had an idea for a friend’s party to have a live twitter feed – kind of like Q&A if you know that program on abc. the idea was to have a constant stream of tweets so people could see what’s going on at the party. yeah pretty nerdy party i know, but it also gave me an excuse to try out the twitter API and a bit of jquery.

discovering how to do this on the internet actually took quite a bit of searching as both twitter and jquery have a bazillion articles on them so i decided to make this tutorial.

before you start, check out how it works here

step 1. create the html
this bit is the easiest part. the html can be anything. it’s the jquery that does all the work. just make sure you have an html file with a linked css file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Party</title>
<link rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="twitterparty.js"></script>
</head>
<body>
<div id="tweets">

</div>
</body>
</html>

the important parts are lines 6 – 8 and a having a div with id of “tweets” (although you can change this if you don’t like it).

step 2. calling the twitter API
so first thing you need to do is grab some tweets from twitter. for this we’ll use jquery since we’ll be using it for some visual effects as well. you first need to make sure jquery is ready to use so you can use the following code:

(function() {
})();

this is a shortcut for the jquery document.ready function. if you’re not sure what i’m talking about, search for it and you’ll find stupid amounts of resources on it. with jquery ready to go, we need to call the twitter api with the following call:

$.getJSON( "http://search.twitter.com/search.json?q=%23hashtag&result_type=recent&rpp=5&callback=?", {}, function (data)
{
$.each(data.results, handleTweets);
});

we’ve just used the jquery function getJSON which returns a set of data in the JSON format. you need to provide it with a url, a data set (in this case empty) and a callback function for when the function is complete. for the url, check the twitter api https://dev.twitter.com/docs/api/1/get/search. you’ll need to replace ‘hashtag’ with your own hashtag (don’t include the #. that’s what %23 is). here’s a breakdown of the url parameters:

  • result_type: here we are forcing twitter to return the most recent tweets
  • rpp: the number of tweets to get in one call. you might want to increase this if it’s a very popular topic.
  • callback: this forces a JSONP return which allows us to make a request from a different server than the twitter server.

as for the callback function, we use the jquery $.each function to send the data to a function to handle and display our tweets.

step 3. show me the tweets
so now you need a handler for the tweets. this isn’t too tricky so check out the code:

function handleTweets( key, data )
{
// use jquery to add html to the page
$( '#tweets' ).prepend( "<article><table><tr><td><span class='user'>@" + data.from_user + "</span> " + data.text + "</td></tr></table></article>" );

// hide the tweet so it can be animated in
$( article ).hide( 0 );

$( article ).slideDown( 500 );
}

this code grabs the data for twitter and creates a new article tag (html5) to put the message in. it also includes the user name wrapped in a span for some custom styling. so if you want to check what data you can get from twitter feeds, check the api link above. it’ll show you a break down of the result set and the corresponding name value pairs.

for this example we only use the ‘text’ and ‘form_user’ values to populate our article tag. note that i have used a table for vertical centering of the text in this demo. once the html has been created, it’s then a matter of animating it nicely. first you need to hide it using jquery, then use your favourite animation to bring it it. i simply used a slideDown which was effective enough for me. for more info check out http://api.jquery.com/category/effects/

step 4. handling multiple tweets
this is where it gets tricky. you’ll need to modify your existing code and add in a number of timers. do not use the jquery delay function. this only works on a single element. since we will be creating many elements, this will not work, instead you’ll need to use the javascript setTimeout to delay animations. anyways, check the complete code here:

* twitter party
* @author rohanlatimer.com.au
*/

var HASHTAG = 'ows'; // don't include the #
var UPDATE_INTERVAL = 2000; // how often to update the hash tag in milliseconds
var MAX_TWEETS = 10; // max number of tweets at a time. make this larger if the topic is popular
var ANIM_SPEED = 500; // speed of animation

var tweets = new Array();
var count = 0;
var tweets_per_call = 0;
var firstID = -1;

(function() {

// call the twitter api on a set interval
setInterval( function()
{
$.getJSON( "http://search.twitter.com/search.json?q=%23" + HASHTAG + "&result_type=recent&rpp=5&callback=?", {}, function (data)
{
tweets_per_call = data.results.length;
firstID = -1;
// for each response, create a visual tweet
$.each(data.results, handleTweets);
});
}, UPDATE_INTERVAL );
})();

// handle the data from twitter
function handleTweets( key, data )
{
tweetFound = false;

// see if tweet already exists, if so don't handle it and exit
for( var i = 0; i < tweets.length; i++ )
{
if( tweets[ i ].tweet == data.text )
{
tweets_per_call--;
return;
}
}

// increase tweet counter
count++;

// if its the first tweet in a request, set it to the current counter
if( firstID == -1 )
{
firstID = count;
}

// add tweet to array
tweets.push( { id : count, tweet : data.text } );

// add tweet to page
addTweet( count, data );

// remove the oldest tweet if there are more than
if( tweets.length > MAX_TWEETS )
{
$( '#' + tweets[0].id ).hide( ANIM_SPEED, removeTweet( tweets[0].id ) );
tweets.shift();
}
}

// add tweet to html
function addTweet( id, data )
{
var delayTime = ANIM_SPEED;

// set delay time for each tweet
delayTime = ( id - firstID ) * ANIM_SPEED;

// use jquery to add html to the page
$( '#tweets' ).prepend( "<article id='" + id + "'><table><tr><td><span class='user'>@" + data.from_user + "</span> " + data.text + "</td></tr></table></article>" );

// hide the tweet so it can be animated in
$( '#' + id ).hide( 0 );

// delay the display of the tweet until the ones in front of it have finished
setTimeout(function()
{
$( '#' + id ).slideDown( ANIM_SPEED );
}, delayTime);

}

// remove a tweet
function removeTweet( id )
{
$( '#' + id ).remove();
}

i also added some variables in here to make modifying it a bit easier.

step 5. style it up
now you just need to make it pretty. first you want to style the container. you’ll want to change the height and width of this if you want to make a little widget for your site. also set the overflow to hidden.

then you just need to style the article element to change the background and text colour. you can also edit the user name using the .user class.

note i’ve also added table styling if you need it. you could always use fixed margins instead of tables if you prefer.

the code:

*
{
border: 0px;
padding: 0px;
margin: 0px;
}

html, body, #tweets
{
overflow: hidden;
font-family: Verdana, Arial, sans-serif;
font-size: 17px;
}

#tweets
{
position: absolute;
width: 900px;
left: 50%;
margin-left: -450px;
top: 20px;
color: #FFF;
}

/* each tweet box */
article
{
width: 900px;
height: 80px;
background-color: #222;
border-radius: 0px;
margin-bottom: 40px;
}

table
{
height: 100%;
width: 100%;
}

td
{
vertical-align: middle;
padding: 0px 20px 0px 20px;
}

/* twitter user name */
.user
{
font-weight: bold;
font-size: 20px;
color: #7e9137;
}

and that’s it.
download source here

]]> http://rohanlatimer.com.au/blog/2011/10/tutorial-twitter-hashtag-display-with-jquery/feed/ 3