IONCANNON » web design http://www.ioncannon.net Thoughts on Software Development and Engineering Tue, 03 Jan 2012 13:59:08 +0000 en hourly 1 Mingruby 0.1.8 released http://www.ioncannon.net/ruby/111/mingruby-018-released/ http://www.ioncannon.net/ruby/111/mingruby-018-released/#comments Sun, 17 Dec 2006 19:41:33 +0000 carson http://www.ioncannon.net/ruby/111/mingruby-018-released/ I have brought the Ming Ruby library up to date with Ming 0.3, added patches submitted by users over the past year and included a ton of user supplied examples. I hope to find time soon to include the real examples on a page by themselves with the code needed to generate each. You can check it out on rubyforge: Ming Ruby 0.1.8

]]> http://www.ioncannon.net/ruby/111/mingruby-018-released/feed/ 0 Using Flash video metadata to display annotations http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/ http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/#comments Sat, 09 Dec 2006 19:58:30 +0000 carson http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/ Now that you can create a streaming Flash video player with PHP or Ruby and you know add metadata for cuepoints to Flash videos you are ready for something else. The following code will show you how to create a video player with PHP that will watch for metadata events and display annotations contained inside the metadata either over the video itself or in a div on the same page as the movie.

The first steps are to create your Flash video if you haven't already and then add the metadata to it. See my post on adding cuepoint metadata with flvtool2 if you want to know more on how to create the Flash video and add the metadata. I'm using the same video from that post but a different set of metadata.

Here is the metadata I've added to the video for the following examples:

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 1</name>
        <timestamp>4000</timestamp>
        <parameters>
            <mydata>Some data 1</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 2</name>
        <timestamp>8000</timestamp>
        <parameters>
            <mydata>Some data 2</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 3</name>
        <timestamp>12000</timestamp>
        <parameters>
            <mydata>Some data 3</mydata>
        </parameters>
        <type>event</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 4</name>
        <timestamp>16000</timestamp>
        <parameters>
            <mydata>Some data 4</mydata>
        </parameters>
        <type>event</type>
    </metatag>
</tags>

The main thing to notice here is that the type for each metatag is event and in the parameters list there is a tag called mydata that contains some text. The text inside mydata is what we will be using for annotations. This tag can be called anything you like and you can have more than one.

I am using icons from the famfamfam silk collection in the following examples. You will want to download them before trying these examples.

wget http://www.famfamfam.com/lab/icons/silk/icons/control_pause.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_pause_blue.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_start.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_start_blue.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_play.png
wget http://www.famfamfam.com/lab/icons/silk/icons/control_play_blue.png

The first example will display the annotation over the video itself. Here is the PHP code for generating the Flash player to display the annotations:

<?php
function createImage($img)
{
  $shape = new SWFShape();
  $shape->setRightFill($shape->addFill(new SWFBitmap(fopen($img, "rb"))));
  $shape->drawLine(16,0);
  $shape->drawLine(0,16);
  $shape->drawLine(-16,0);
  $shape->drawLine(0,-16);
  return $shape;
}

function createButton($movie, $name, $loc, $script)
{
  $button = new SWFButton();
  $button->addShape(createImage("control_" . $name . ".png"), SWFBUTTON_UP);
  $button->addShape(createImage("control_" . $name . "_blue.png"), SWFBUTTON_DOWN | SWFBUTTON_HIT | SWFBUTTON_OVER);
  $button->addAction(new SWFAction($script), SWFBUTTON_HIT);
  $item=$movie->add($button);
  $item->moveto($loc,248);
}

Ming_setScale(20.0000000);
ming_useswfversion(7);

$movie = new SWFMovie(7);
$movie->setDimension(320,270); // width x height
$movie->setBackground(0×33,0×33,0×33);
$movie->setRate(8);

createButton($movie, "start", 10, "_root.videoStream.seek(0);");
createButton($movie, "pause", 40, "_root.videoStream.pause(true);");
createButton($movie, "play", 70, "_root.videoStream.pause(false);");

$strAction = "
this.createTextField('video_txt', 999, 0, 0, 100, 100);
video_txt.autoSize = 'left';
video_txt.multiline = true;
video_txt.textColor = 0xeeeeee;

stop();
nc=new NetConnection();
nc.connect(null);
videoStream=new NetStream(nc);
videoStreamItem.attachVideo(videoStream);
videoStream.setBufferTime(10);
videoStream.play('http://localhost/test.flv');
videoStream.pause();

videoStream.onCuePoint = function(infoObject)
{
  video_txt.text = 'Name: ' + infoObject.name + '\n';
  if( infoObject.parameters != undefined )
  {
    video_txt.text += 'Info: ' + infoObject.parameters['mydata'] + '\n';
  }
  else
  {
    video_txt.text += 'Info: undef\n';
  }
};
";

$stream = new SWFVideoStream();
$stream->setDimension(320, 240);
$item=$movie->add($stream);
$item->setName("videoStreamItem");
$movie->add(new SWFAction($strAction));

$movie->nextFrame();

$movie->save("test.swf");
?>

The following part of the above PHP is what connects the cuepoints to the overlay text. Notice the use of the mydata tag. The tag data is available in the parameters hash:

videoStream.onCuePoint = function(infoObject)
{
  video_txt.text = 'Name: ' + infoObject.name + '\n';
  if( infoObject.parameters != undefined )
  {
    video_txt.text += 'Info: ' + infoObject.parameters['mydata'] + '\n';
  }
  else
  {
    video_txt.text += 'Info: undef\n';
  }
};

Here is the result (hit the play button to start the video):

The following examples is the same as the above example except that it uses a javascript call to display the annotation data in a div on the page:

<?php
function createImage($img)
{
  $shape = new SWFShape();
  $shape->setRightFill($shape->addFill(new SWFBitmap(fopen($img, "rb"))));
  $shape->drawLine(16,0);
  $shape->drawLine(0,16);
  $shape->drawLine(-16,0);
  $shape->drawLine(0,-16);
  return $shape;
}

function createButton($movie, $name, $loc, $script)
{
  $button = new SWFButton();
  $button->addShape(createImage("control_" . $name . ".png"), SWFBUTTON_UP);
  $button->addShape(createImage("control_" . $name . "_blue.png"), SWFBUTTON_DOWN | SWFBUTTON_HIT | SWFBUTTON_OVER);
  $button->addAction(new SWFAction($script), SWFBUTTON_HIT);
  $item=$movie->add($button);
  $item->moveto($loc,248);
}

Ming_setScale(20.0000000);
ming_useswfversion(7);

$movie = new SWFMovie(7);
$movie->setDimension(320,270); // width x height
$movie->setBackground(0×33,0×33,0×33);
$movie->setRate(8);

createButton($movie, "start", 10, "_root.videoStream.seek(0);");
createButton($movie, "pause", 40, "_root.videoStream.pause(true);");
createButton($movie, "play", 70, "_root.videoStream.pause(false);");

$strAction = "
this.createTextField('video_txt', 999, 0, 0, 100, 100);
video_txt.autoSize = 'left';
video_txt.multiline = true;
video_txt.textColor = 0xeeeeee;

stop();
nc=new NetConnection();
nc.connect(null);
videoStream=new NetStream(nc);
videoStreamItem.attachVideo(videoStream);
videoStream.setBufferTime(10);
videoStream.play('http://localhost/test.flv');
videoStream.pause();

videoStream.onCuePoint = function(infoObject)
{
  if( infoObject.parameters != undefined )
  {
    geturl('javascript:aTestCall(\" + infoObject.parameters['mydata'] + '\')');
  }
};
";

$stream = new SWFVideoStream();
$stream->setDimension(320, 240);
$item=$movie->add($stream);
$item->setName("videoStreamItem");
$movie->add(new SWFAction($strAction));

$movie->nextFrame();

$movie->save("test.swf");
?>

This javascript will display the data in the div (note that this won't work for all browsers, I'm just making it simple):

function aTestCall(data)
  {
    document.getElementById("infoDisplayArea").innerHTML = data;
  }

This is how you would set up the div to display the data:

<div id="infoDisplayArea" style="border: solid 1px #000; padding: 5px 5px 5px 5px; width: 50%;">
No data yet…
</div>

Here is the result (hit the play button to start the video):

No data yet…

Keep an eye on the above box while the video is playing to see the annotations.

Tags: ,

]]> http://www.ioncannon.net/php/110/using-flash-video-metadata-to-display-annotations/feed/ 6 How to create and use Flash video metadata to add cue-points with flvtool2 http://www.ioncannon.net/web-design/109/metadata-cuepoint-flash-video-flvtool/ http://www.ioncannon.net/web-design/109/metadata-cuepoint-flash-video-flvtool/#comments Fri, 08 Dec 2006 13:31:09 +0000 carson http://www.ioncannon.net/web-design/109/metadata-cuepoint-flash-video-flvtool/ Adding cue-points allows you to spice up your flash videos created with FFMpeg. Adding metadata to a FLV will allow you to introduce cue-points that have their own metadata that can be display when the cue-point is reached or let you jump to that cue-point. In the following tutorial you will learn how to add metadata to your FLV files using flvtool2 and how it is useful for adding cue-points.

Metadata is added to a FLV file with flvtool2 using the following XML format:

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 1</name>
        <timestamp>2000</timestamp>
        <parameters>
            <textinfo>This is some text 1</textinfo>
            <thumb>test1.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 2</name>
        <timestamp>4000</timestamp>
        <parameters>
            <textinfo>This is some text 2</textinfo>
            <thumb>test2.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
</tags>

Most of the tags are obvious but the following tags are important to point out:

  • metatag – When the overwrite flag is set to true the metadata is overwritten at the given timestamp
  • timestamp – This is where to put the metadata in milliseconds from the start of the FLV
  • parameters – This is the metadata for the given metadata. It allows you to specify any named parameter that will then be turned into a map available to your actionscript in the flash player playing your FLV file.
  • type – This specifies what this metadata is used for. The options are: navigation, event

The following syntax is used when running flvtool2:

Usage: flvtool2 [-ACDPUVaciklnoprstvx]… [-key:value]… in-path|stdin [out-path|stdout]

Note that you can add any key-value pair by specifying them here. From the help the key-value pair: key:value – Key-value-pair for onMetaData tag (overwrites generated values).

After building your metadata xml file with the above syntax you would run a command like the following:

flvtool2 -AUtP mymeta.xml -thumbLocation:http://localhost/thumb test.flv

Now that you know how to create metadata and cue-points we can talk about one of the things you can do with them. With FFMpeg you can generate thumbnails of your FLV using the following command:

ffmpeg -i test.flv -an -ss 00:00:06 -r 1 -vframes 1 %d.jpg

That command tells FFMpeg to open the file test.flv with no audio support then seek to the 6th second. After seeking to the 6th second it records 1 frame at a framerate of 1. Here are the description of each option from the FFMpeg help:

  • -i = input video
  • -an = disable audio
  • -ss = set the start time offset
  • -r = set frame rate
  • -vframes = number of frames to record

Now we need to put these two things together with a flash video player that will use the cue-point metadata. One such player is the open source flash video player FlowPlayer. To get the following to work you will need to have a streaming video server to stream the FLV from.

I started with the public domain video from the following page: Archive.org – Merry Melodies Fresh Hare. I encoded 17 seconds, starting at the 3rd second and ending at the 20th, of the video with ffmpeg.

wget http://www.archive.org/download/merry_melodies_fresh_hare/merry_melodies_fresh_hare.mpg
ffmpeg -ss 00:03:00 -t 00:00:20 -i merry_melodies_fresh_hare.mpg -s 320×240 -ar 22050 -r 12 test.flv

Next I created 4 thumbnails at 4 second intervals using ffmpeg at a size of 110×80 each:

ffmpeg -i test.flv -an -ss 00:00:04 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test1.jpg
ffmpeg -i test.flv -an -ss 00:00:08 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test2.jpg
ffmpeg -i test.flv -an -ss 00:00:12 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test3.jpg
ffmpeg -i test.flv -an -ss 00:00:16 -r 1 -vframes 1 -s 110×80 %d.jpg
mv 1.jpg test4.jpg

The results are shown here:

I then created the following metadata xml file to specify the cue-points and the thumbnails for each:

<tags>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 1</name>
        <timestamp>4000</timestamp>
        <parameters>
            <textinfo>This is some text 1</textinfo>
            <thumb>test1.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 2</name>
        <timestamp>8000</timestamp>
        <parameters>
            <textinfo>This is some text 2</textinfo>
            <thumb>test2.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 3</name>
        <timestamp>8000</timestamp>
        <parameters>
            <textinfo>This is some text 3</textinfo>
            <thumb>test3.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
    <metatag event="onCuePoint" overwrite="true">
        <name>Cue Point 4</name>
        <timestamp>8000</timestamp>
        <parameters>
            <textinfo>This is some text 3</textinfo>
            <thumb>test4.jpg</thumb>
        </parameters>
        <type>navigation</type>
    </metatag>
</tags>

And then I added it to the FLV file:

flvtool2 -AUtP test-meta.xml -thumbLocation:http://d28nuaxr58rcpu.cloudfront.net/cfvm-thumb test.flv

And here is the result (you need to hit play to get things started and clicking on the images will jump to the cue-points):

Tags: , ,

]]> http://www.ioncannon.net/web-design/109/metadata-cuepoint-flash-video-flvtool/feed/ 8 How to compile ImageMagick for PHP by hand http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/ http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/#comments Wed, 01 Nov 2006 00:33:34 +0000 carson http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/ Some time ago I was looking at how to re-size uploaded images in a way that looks good using PHP. I was impressed that when I uploaded a 4M picture to flickr it managed to re-size and compress it into a smaller version that looked correct. I knew they weren't just resizing it so I went on a quest to find out what it took to do the same thing with PHP. The following is step one in that process.

My goal was to be able to convert a large image into a smaller one and have it look decent. I tried a few different approaches directly in PHP before I decided to see just how hard it was to do with a command line tool. I found that I could re-size and enhance a photos in a way that made them look pretty good using ImageMagick's re-size and sharpen (for more on doing this on the command line see my ImageMagick command line examples).

At this point I started looking into how to translate what I did on the command line into PHP. The first step was to get access to the ImageMagick libraries into PHP. The first step was to get MagickWand for PHP installed so that I could call the ImageMagick functions with PHP. There are a few other ways of calling ImageMagick out there but they all involved system calls to the convert command and I would rather use library calls. Here are the steps you need to get the MagicKWand extension installed:

  1. Install ImageMagick either from source or a binary. In my case I'm running fedora so I just installed it with yum.
  2. Download the MagickWand extension for PHP.
  3. Go to your PHP source directory and find the ext directory under it. In the ext directory expand the extension.
  4. Change directories into the magickwand directory under ext and run phpize.
  5. Change back to the root PHP source directory and remove the current configuration file: rm -f ./configure
  6. In the root PHP source directory run ./buildconf –force to rebuild the configuration script
  7. You can verify the configuration file was created correctly by looking for magickwand in the new configure script: grep magickwand configure
  8. Now reconfigure your PHP. Use the flag –with-magickwand= to enable MagickWand. For me the directory to ImageMagick was /usr
  9. Now you can recompile PHP and reinstall it. You should find MagickWand listed in a phpinfo() once it is compiled in correctly.

Next time I will go into how to use PHP to do some of the tricks you can do with ImageMagick on the command line.

Tags: ,

]]> http://www.ioncannon.net/php/75/how-to-compile-imagemagick-for-php-by-hand/feed/ 3 Good article on keeping javascript maintainable http://www.ioncannon.net/web-design/86/good-article-on-keeping-javascript-maintainable/ http://www.ioncannon.net/web-design/86/good-article-on-keeping-javascript-maintainable/#comments Mon, 17 Jul 2006 18:53:45 +0000 carson http://www.ioncannon.net/web-design/86/good-article-on-keeping-javascript-maintainable/ Vitamin has a good article today on the importance of maintainable javascript. 95% of what the article covers is applicable to any code. The important parts of the article cover javascript specific things like: object literals, namespaces and where to go when you want to compress your javascript to save bandwidth/make it download faster. They recommend packer and JSMIN as two javascript compressors but I think JSMIN is probably a better bet mainly because you can run it from the command line and make it part of a build script.

]]> http://www.ioncannon.net/web-design/86/good-article-on-keeping-javascript-maintainable/feed/ 0 Interesting alternative to tagging http://www.ioncannon.net/web-design/78/interesting-alternative-to-tagging/ http://www.ioncannon.net/web-design/78/interesting-alternative-to-tagging/#comments Wed, 12 Jul 2006 22:58:59 +0000 carson http://www.ioncannon.net/web-design/78/interesting-alternative-to-tagging/ I found a post about an alternative approach to tagging today and thought it would be interesting if someone made a wordpress plugin that would use this idea. It seems like it might be a nice alternative to the normal site map that most sites have when there is a lot of information to drill down into.

]]> http://www.ioncannon.net/web-design/78/interesting-alternative-to-tagging/feed/ 0 Capture full page screenshots with firefox http://www.ioncannon.net/web-design/70/capture-full-page-screenshots-with-firefox/ http://www.ioncannon.net/web-design/70/capture-full-page-screenshots-with-firefox/#comments Sun, 09 Jul 2006 13:36:43 +0000 carson http://www.ioncannon.net/web-design/70/capture-full-page-screenshots-with-firefox/ Ever wanted to capture the entire page you are viewing in firefox instead of just what is shown on your screen? Ever need to do that from a command line? Here are two extensions that let you do just that.

Page Saver

The first extension is called Page Saver and comes in two versions. The pro version you have to pay for but the free version does a good job all by itself. Here is an example of a fullpage screenshot:


Here is an example of a normal screenshot:


I think from a technical standpoint this extension is the better of the two. It seems to perform a little better and doesn't suffer from any obvious bugs. The pro version doesn't offer a lot great extras but if you want to save to an FTP/HTTP server or directly to your clipboard then you will probably want to pay for it.

ScreenGrab

The second extension is ScreenGrab. This is a completely free screen capture extension but doesn't have as many features as Page Saver and suffers from a few bugs. Here is an example of what you get when you capture a full page:


Hower if you happen to have a popup come up in front of the window while it is being captured you get this:


Here is an example of a normal screenshot:


The popup bug seems minor to me so I would say between the two extensions I would pick ScreenGrab because it is completely free.

Tags: , ,

]]> http://www.ioncannon.net/web-design/70/capture-full-page-screenshots-with-firefox/feed/ 1 Some interesting and useful AJAX/Javascript code http://www.ioncannon.net/web-design/63/some-interesting-and-useful-ajaxjavascript-code/ http://www.ioncannon.net/web-design/63/some-interesting-and-useful-ajaxjavascript-code/#comments Fri, 23 Jun 2006 15:10:57 +0000 carson http://www.ioncannon.net/web-design/63/some-interesting-and-useful-ajaxjavascript-code/ I like seeing more and more uses of prototype. I'm not sure if the big guys will win out with their UI toolkits (Yahoo UI/GWT) or if it will always feel better to put things together by hand. Either way it is good to understand how this stuff works. This is an edit in place example that is similar to what you see on flickr.

I've seen something like this a number of times when I've visited sites. They want your feedback on something or other while you are browsing. It is a little floating plus feedback sign that hangs out in the lower right hand corner. Check it out.

Browsing digg I noticed an article on "unobtrusive sidenotes" and found that the idea is pretty cool: The announcement and code. They are done with javascript so you can turn them on and off on the fly.

Tags: , , , ,

]]> http://www.ioncannon.net/web-design/63/some-interesting-and-useful-ajaxjavascript-code/feed/ 0 Search Engine Marketing and Google’s new trending tools http://www.ioncannon.net/web-design/23/search-engine-marketing-and-googles-new-trending-tools/ http://www.ioncannon.net/web-design/23/search-engine-marketing-and-googles-new-trending-tools/#comments Thu, 11 May 2006 18:22:59 +0000 carson http://www.ioncannon.net/uncategorized/23/search-engine-marketing-and-googles-new-trending-tools/ Now that google has anounced their new Google trends site I couldn't help but mention it. If you spend any type of money at all on SEM you need to check your keywords against this site.

There are a couple of intro articles about the new service at Micro Persuasion and TechCrunch.

To get a real feel for how important this information will be you should try out a few queries for yourself. Take a simple query like "motorcycle" and then look at the regions tab. A lot of the queries about motorcycles originated from the Philippines. Now look at "pizza", most of the queries there originated from the US. That should make it much easier to target your audience with your advertisments. The trending is nice as well and should give marketers a better idea of when to boost spending to maximize exposure.

This follows another tool Google just release for their AdWords service. You can read more about it at the adwords blog. That tool gives you a different view of the search trends and is more like what you get from Yahoo's advertising system.

]]> http://www.ioncannon.net/web-design/23/search-engine-marketing-and-googles-new-trending-tools/feed/ 0 Search Engine Optimization http://www.ioncannon.net/web-design/24/search-engine-optimization/ http://www.ioncannon.net/web-design/24/search-engine-optimization/#comments Thu, 11 May 2006 01:38:49 +0000 carson http://www.ioncannon.net/uncategorized/24/search-engine-optimization/ Recently I've been collecting links on interesting SEO topics. I figured I would dump a few of them out with quick reasons why I think they are good to read.

A technical read on how search engines work in general. It focuses on google but has a lot of good general information in it.

This is a recent article on how to optimize your site. I like it because it has an acronym on how to do it "camelot".

SEO chat has a lot of information in its forums.

An article from a guy who works at Google and goes into what the search engines have to deal with to keep people on the up and up. It goes into some of the stuff you don't want to be doing to try to get your site at the top of a search. For some reason I found it interesting that this guy is from kentucky.

Another good article on the "SEO Code of Conduct" AKA what you should not be doing to get your site at the top of a search.

A nice tool to help you find words to go with your website: WordTracker

]]> http://www.ioncannon.net/web-design/24/search-engine-optimization/feed/ 1