Coding

Feb 15, 2012

Feels good, man.

Jon Lim Extra Credit, Ladies Learning Code, Pearl Chen, Penny Arcade Coding, Photography 0 Comment

Awesome person, Pearl Chen, just pointed out that one of my photos for Ladies Learning Code made it into an episode of Penny Arcade TV’s Extra Credits entitled “So You Want To Be a Programmer (Part 1).”

It’s not exactly a stunning achievement, but it feels good to know that something you’ve captured gets used for something as awesome as Extra Credits.

Bonus: it’s a great video for anyone who is curious about or wants to become better at programming.

Nov 13, 2011

Creating an Image with Dynamic Text in PHP

Jon Lim dynamic image, GD, image function, PHP Coding 0 Comment

As Christmas approaches, many of my friends have begun their countdowns to that wonderful holiday at the end of the year.

One of my friends started her countdown back in August, when she opened up her calendar and had to count the number of days until Christmas and continuously keep track of what day it was and where her count was. I told her that I could spend the 5 minutes to help her out using the power of the internets, and that’s how my Christmas page was born.

Today, I spent a bit more time spicing up the page. It now has a Calvin & Hobbes image that has a bunch of static text, but will update the number of days dynamically.

To preface: I had no idea how to do this, and found out that PHP has a rather sizeable GD and Image Function library. I used this example to start:

<?php
 
header("Content-type: image/png");
$string = $_GET['text'];
$im     = imagecreatefrompng("images/button1.png");
$orange = imagecolorallocate($im, 220, 210, 60);
$px     = (imagesx($im) - 7.5 * strlen($string)) / 2;
imagestring($im, 3, $px, 9, $string, $orange);
imagepng($im);
imagedestroy($im);
 
?>

Unfortunately, you can only use some LATIN2 font with imagestring(), and did it fit the style of the Calvin & Hobbes comic I was using, but it was a good start.

In order to load your own font and dictate its size, we can use imagettftext(). I had to include the Comic Sans (Don’t hurt me!) font file in the same folder as the PHP file.

Here is the complete code for my dynamic Christmas image:

<?php
// Filename: christmas-image.php
 
header("Content-type: image/png");
$string = $_GET['days'];
$im     = imagecreatefrompng("calvin_resolutions.png");
$black = imagecolorallocate($im, 0, 0, 0);
$font = 'comicsans.ttf';
 
$initialX = '153';
$initialY = '35';
$increaseY = '23';
 
$fontSize = '16';
$fontRotation = '0';
 
$firstline = 'What do you mean';
$secondline = 'there are ' . $string . ' days until';
$thirdline = 'Christmas?! What am';
$fourthline = 'I supposed to do until';
$fifthline = 'then? WAIT?! I am';
$sixthline = 'not a patient man!';
 
//imagestring($im, $font, $px, 20, $string, $black);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY, $black, $font, $firstline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+$increaseY, $black, $font, $secondline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*2), $black, $font, $thirdline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*3), $black, $font, $fourthline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*4), $black, $font, $fifthline);
imagettftext($im, $fontSize, $fontRotation, $initialX, $initialY+($increaseY*5), $black, $font, $sixthline);
imagepng($im);
imagedestroy($im);
 
?>

The positioning of the text is specific to the Calvin & Hobbes image I used, and I made it easier on myself by creating a variable for the X and Y positions as well as the amount I wanted to push the next lines down.

All you have to do now is refer to the PHP file and pass the variables through the URL.

<img src="christmas-image.php?days=<?php echo $remainingDays; ?>">

The PHP file will create a PNG that has the updated text. That was pretty simple, no?

Aug 27, 2011

Google Docs Spreadsheets: Using COUNT with Multiple Conditions

Jon Lim Excel, Formula, Google Docs, Spreadsheet Business, Coding, Technology 2 Comments

This past week, I spent a good amount of time analyzing our current customers with PostageApp and figuring out some of the metrics that we use to determine the health of Postage. Of course, there’s only one tool for the job: a spreadsheet.

Being somewhat familiar with Microsoft Excel, I figured this would be a piece of cake to do on Google Docs Spreadsheets, considering I won’t be doing anything ridiculous. I’d just have to record all of our data and use a bunch of math to figure out some numbers.

Then I hit a snag: I couldn’t count the number of rows if I had more than one condition.

I was using the COUNTIF function to count the number of rows given a specific value inside a column, but it would fail if I tried to do more than one at a time.

I searched for solutions and found quite a few, but many that did not work, especially with Google Docs Spreadsheets. Finally, I stumbled onto a solution: using COUNT with FILTER!

What?

Here’s an example, multiple column data sheet that has some string information along with numeric information:

Let’s say I wanted to get a count of how many rows there were with ’223′ under the ‘Derp Column’ and ‘Herp’ under the ‘Herp Again’ column. (Don’t ask, I’ve been on Reddit far too much.) This is the formula you would use to get that count:

1	=COUNT(FILTER(B:B ; B:B=223 ; C:C="Herp"))

The important part here is the FILTER function. The first parameter (B:B)) is the row or column which you are trying to sort through (should be the one you are applying at least one condition on), which in our case is column B (‘Derp Column’), and any other parameters (as separated by the semi-colon) are conditions which you are applying to filter the row.

The result should be, of course, 1.

You can be pretty flexible when applying conditions. For example, you can also use this to figure out how many rows have a number greater than 100 in ‘Derp Column’:

1	=COUNT(FILTER(B:B ; B:B>=100))

This is a really neat way to quickly sort and count through data programmatically, and I hope it can be useful to those of you who are using Google Docs Spreadsheets to do calculations like I am!

Cheers.

Jun 4, 2011

The Cake Isn’t A Lie

Jon Lim blog, CakePHP, coding, PostageApp Coding 0 Comment

Yesterday, I tweeted out that I was going to give CakePHP a try over the weekend, with the end goal of creating a plugin for CakePHP to be able to send emails via PostageApp.

CakePHP!

Welp, I’ve done the bare minimum to give it a try – I went through the ‘create a blog’ example they had in their documentation.

What you end up with is a pretty simple web page that lists all of the posts (title and body) that are in your database, and you can add, edit, or delete posts as you see fit. It was pretty darn easy to set up, and it gave me a much better understanding of the MVC coding process.

I’m going to fiddle with it some more until I can actually add functionality to it (thinking of adding comments) and some sort of layout. If you want to check out what I’ve built so far, here’s the link: hellocake.upatom.com

Feel free to add/edit/delete posts on the site, and even feel more free to leave me weird messages!

Let’s see how far I can get with this!

Jun 1, 2011

Tracking Ye Olde Expenses Using Google Chart Tools

Jon Lim expenses, Google Chart Tools, Javascript Blog, Coding, Life 2 Comments

Since I’ve started my hunt for a proper place to live downtown, another activity I’ve proactively started is to be a lot more careful about where and how I spend my money, in an effort to be able to afford rent and have enough money to continue to save.

Bob Newhart, why am I so broke?!

As a way of making myself accountable, I have created an expenses page that tracks my month to month expenses, which I track through Quicken Essentials.

I create the chart using Google Chart Tools, which is a pretty nifty way to display all your data using JavaScript. Though it’s a bit difficult to integrate it into WordPress posts, I took the simplest solution (NOT having to pull and parse data from custom fields) and just passed the data into the header manually.

Here’s the code I used:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("visualization", "1", {packages:["corechart"]});
	google.setOnLoadCallback(drawChart);
	function drawChart() {
		var data = new google.visualization.DataTable();
		data.addColumn('string', 'Month');
		data.addColumn('number', '2011');
		data.addRows(12);
		data.setValue(0, 0, 'Jan');
		data.setValue(0, 1, 2610.62);
		data.setValue(1, 0, 'Feb');
		data.setValue(1, 1, 1973.72);
		data.setValue(2, 0, 'Mar');
		data.setValue(2, 1, 3303.36);
		data.setValue(3, 0, 'Apr');
		data.setValue(3, 1, 2836.86);
		data.setValue(4, 0, 'May');
		//data.setValue(4, 1, 882.64);
		data.setValue(5, 0, 'Jun');
		//data.setValue(5, 1, 882.64);
		data.setValue(6, 0, 'Jul');
		//data.setValue(6, 1, 882.64);
		data.setValue(7, 0, 'Aug');
		//data.setValue(7, 1, 882.64);
		data.setValue(8, 0, 'Sep');
		//data.setValue(8, 1, 882.64);
		data.setValue(9, 0, 'Oct');
		//data.setValue(9, 1, 882.64);
		data.setValue(10, 0, 'Nov');
		//data.setValue(10, 1, 882.64);
		data.setValue(11, 0, 'Dec');
		//data.setValue(11, 1, 882.64);
 
		var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
		chart.draw(data, {width: 920, height: 240, title: 'Monthly Expenses',
		                  vAxis: {format:'$#,###', minValue: 0, maxValue: 5000}
		                 });
	}
</script>

Just drop that into your header file (copy and paste the header from header.php and drop it into your template file to isolate it to particular pages) and create a div with the id that matches whatever you put into this line:

35	var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

And if we used that, you would use this to place your chart anywhere on the page like so:

1	<div id="chart_div"></div>

Ta daaa!

My eventual goal is to be spending less than $1500 a month, before rent, which ensures that I am saving at least SOME money. Well, here goes nothing.

Enjoy watching me waste my money, thanks for reading!

Apr 16, 2011

Kickass Weekend Ahead

Jon Lim ruby on rails Coding, Life, Ruby on Rails 6 Comments

You know how I know my weekend is going to rock?

Let’s do this.

SIDE NOTE: Hopefully I can blog the progress I am having with learning this – I spent a portion of my lab day yesterday setting up Comfortable Mexican Sofa, and it was so easy. Can’t wait to actually build things.