Vagrant Failing To Launch

I use Vagrant based virtual machines to develop on. These are great as you can create custom environments at will without affecting your main machine.

Today I had the following error while trying to bring up my development environment.

wks:Vagrant robertprice$ vagrant up devvm
[ccfs] VM already created. Booting if it's not already running...
[ccfs] Clearing any previously set forwarded ports...
[ccfs] Forwarding ports...
[ccfs] -- 22 => 2222 (adapter 1)
[ccfs] -- 80 => 4567 (adapter 1)
[ccfs] Creating shared folders metadata...
[ccfs] Clearing any previously set network interfaces...
There was an error executing the following command with VBoxManage:

["hostonlyif", "create"]

For more information on the failure, enable detailed logging with
VAGRANT_LOG.

This turned out to be an error with VirtualBox, the virtualisation environment Vagrant uses. The solution is to force a restart of VirtualBox.

sudo /Library/StartupItems/VirtualBox/VirtualBox restart

I hope this helps others experiencing the same problem.

Data URI’s – Using and Generating

A recent project of mine needed an image embedding into some HTML via JavaScript. Rather than use a separate image, I decided to embed it directly using a data URI.

An image in a data URI is the MIME type of the image and it’s content encoded with base64 into a string. This is great as it cuts down HTTP requests but does cause the initial page weight to increase and be difficult to update as each change means the image needs re-encoding. Modern browsers support data URI’s very well, but older browsers such as IE 7 and below won’t like it.

Examples Using A Data URI Encoded Image

HTML Example

Here’s how I can embed the image of a red cross into an HTML <img> tag.

<img src="data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==" alt="red cross" width="20" height="20" />

CSS Example

Here’s how I can embed the image of a red cross into background of an HTML element using CSS.

body { 
  background: url(data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==) no-repeat left center;
}

JavaScript Example

Here’s how I can add an image element with the red cross in to an HTML page using JavaScript.

var imagestring = "data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==";
var image = new Image();
image.src = imagestring;
image.onload = function() {
  document.body.appendChild(image);  
}

Encoding An Image To A Data URI

It’s easy to create the encoded image string using PHP as it comes with a Base64 encoder as part of the language. Automatically detecting the MIME type of an image is a bit harder, but we can use finfo_file with comes as an extension to PHP 5.3 and above to do this.

So assuming the filename of the image is in the variable $filename we can use the following code to get the mimetype, read the image and encode it to a data URI string.

$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimetype = finfo_file($finfo, $filename);
finfo_close($finfo);

$contents = file_get_contents($filename);
echo "data:" . $mimetype . ";base64," . base64_encode($contents);

Conclusion

We’ve seen it’s easy to embed encoded images into code. I have wrapped the encoding routine into a command line PHP script and placed it on GitHub as php-base64-encode so it’s easy to quickly generate data URI’s.

DOMElement Content Extraction In PHP

I was using PHP to parse an HTML document using the PHP DOM extension and got stuck on extracting the contents of an element.

The documentation doesn’t make it clear how to do this, until you look and see that a DOMElement inherits from DOMNode. In DOMNode, there is a nodeValue property that holds the content.

DOMElement Content Example

So if I had a HTML document already loaded into a variable $html, and I wanted to extract the value of an element with the ID of “example”, I could do something like this.

$doc = new DOMDocument()
$doc->loadHTML($html);
$element = $doc->getElementById('example');
echo $element->nodeValue;

An Alternative

A DOMNode also has a textContent property that can be used. This will return all the text for the node and descendants, which may not always be what you are hoping for.

Using Disqus On WordPress Behind A Proxy

I had to implement the Disqus Comment System WordPress plugin on a website that will be located behind an outgoing proxy server. By default the Disqus WordPress plugin does not support proxies, so it is unable to run if a proxy is blocking it’s access to the internet.

Since WordPress 2.8, WordPress supports proxy servers using a few defined values, WP_PROXY_HOST and WP_PROXY_PORT. I have now forked the Disqus WordPress plugin on GitHub, and added support that will look to see if these exist, and use them if they do.

To use it, add the following to your wp-config.php file…

define('WP_PROXY_HOST', 'proxy.yourdomain.com');
define('WP_PROXY_PORT', '3128');

Changing the values to match those of your proxy server of course.

Now replace the url.php file in wp-content/plugins/disqus-comment-system/lib/api/disqus/url.php with the url.php found in my github repository.

Visit your WordPress admin panel and you should now be able to activate and configure the Disqus plugin successfully.

I have issued a pull request for my changes to be pulled back into the main plugin, but it’s up to Disqus is they want to implement this or not.

Allowing Apache To Write To The Vagrant Directory

I had a problem with a website I was developing in Vagrant where the site neeeded to write out to the /vagrant directory (well actually a symlink that pointed there).

Apache doesn’t have permission to write there by default, but the following change to my Vagrantfile sorted it out.

config.vm.share_folder("v-root", "/vagrant", ".", :owner => "www-data", :group => "www-data")

This makes sure that the /vagrant directory is owned by a user that apache has permission to read and write with.

I hope this helps out others who have had the same problem.

Vagrant Update – October 2013

Newer versions of Vagrant have renamed v-root to vagrant-root, so the line for the VagrantFile is now

config.vm.share_folder("vagrant-root", "/vagrant", ".", :owner => "www-data", :group => "www-data")

InnoTab 2 Video Conversion

VTech Innotab 2 video conversion isn’t hard, but getting those settings right the first time can be, so I thought I’d share how I managed it.

The InnoTab 2 needs videos to have the following settings:

File Type AVI
Video Encoder MJPEG
Display Size 480×272
Frame Rate 15 fps
Bit Rate 2400 kbps
Audio Encoder PCM
Audio Channel Mono
Sampling Rate 22.05 kHz
Maximum File Size 2 GB

I have a Mac, so I used Handbrake which is an open source multiplatform video transcoder. It means it’s a free piece of software, that will run on Mac’s, PC’s and Linux boxes, and can be used to transform video from one format to another, such as one that will run on the InnoTab 2.

Once you have Handbrake installed, you need to use the following settings.

The Output Settings Format needs to be MP4 File.

In the video tab you need:

Video Codec: MPEG-4 (FFmpeg
Framerate (FPS): 15
Peak Framerate (VFR): selected
Video Quality: Constant Quality Selected, QP 20

In the audio tab you need:
Codec: AAC (CoreAudio)
Mixdown: Mono
Samplerate: 22.05
Bitrate: 48

In Picture Settings you need:
Width: 480
Height: 272

At this point you may want to save this as new preset, to save entering these details again for each video you want to convert. Click on Preset in the menu bar, and New Present. Call your Preset Name “InnoTab 2”, set the picture size to custom, and enter 480 272 for the width and height. The description is optional so enter something useful here if you want to, then Add.

To use a preset, you need to make sure the Preset Drawer is visible. It should be on the right hand side of the screen, and if not, click on Window in the menu bar, and select Preset Draw. Click on InnoTab 2 to get your InnoTab 2 settings.

Now, to convert a video, click on the Source icon on the top left of the screen. This will let you pick a video. Once selected, choose a name for the Destination File. Make sure you change the extension at the end from .mp4 to .avi, else your InnoTab 2 won’t be able to use the video. Now “Add To Queue”, and “Start”. It may take a while to convert but Handbrake will let you know when it’s ready.

To copy the video to your InnoTab 2, connect it to the your computer. Browse to one of the drives, and click on “LLN” then “MOVIES”. Drag and drop the movie you just converted into this folder. Unmount the InnoTab 2 from your computer and try looking for a movie on it. Your new movie should be at the top of the list and ready to watch.

Downloading A YouTube Movie

YouTube is a great source of videos to watch on your InnoTab 2, but you do need to be able to save them.

There are a few online sites that can help.

I have found an easy one to be ClipConverter.cc. You enter a URL of a page with the video you want to download, this can be a YouTube page. Select “Download” and save this so you can load it into Handbrake for conversion to your InnoTab 2.

A word of warning, ClipConverter.cc does launch popup windows, so be aware of this. Also be aware of Copyright and make sure you have the right to download and save a video to your InnoTab 2.

Conclusion

I hope this has helped other Innotab 2 users out there to get video content onto their device.

I have saved these settings to GitHub, so they are ready to import directly into Handbrake, Innotab 2 Handbrake Settings.

POSTing JSON To A Web Service With PHP

I needed to POST JSON formatted data to a RESTful web service using PHP earlier, so I thought I’d share my solution.

There are a couple of approaches that could be taken, using the CURL extension, or file_get_contents and a http context. I took the later way.

When POSTing JSON to a RESTful web service we don’t send post fields or pretend to be a form, instead we have to send the JSON data in body of the request, and let the web service know it’s JSON data by setting the Content-type header to application/json.

$article = new stdClass();
$article->title = "An example article";
$article->summary = "An example of posting JSON encoded data to a web service";

$json_data = json_encode($article);

$post = file_get_contents('http://localhost/rest/articles',null,stream_context_create(array(
    'http' => array(
        'protocol_version' => 1.1,
        'user_agent'       => 'PHPExample',
        'method'           => 'POST',
        'header'           => "Content-type: application/json\r\n".
                              "Connection: close\r\n" .
                              "Content-length: " . strlen($json_data) . "\r\n",
        'content'          => $json_data,
    ),
)));

if ($post) {
    echo $post;
} else {
    echo "POST failed";
}

Here I’m first creating an example PHP stdClass object, populating it with some data, then serialising it to a JSON string. The real magic is using file_get_contents to POST it over HTTP to my test web service. If the POST succeeds, then it’s displayed, else an error message is shown.

It’s important to note I send the header, Connection: close . Without this, your script will hang until the web server closes the connection. If we include it, then as soon as the data has POSTed the connection is closed and control returned to the script.

jQuery To Scroll To A Specific Element

I thought I’d share a useful snippit of jQuery code for scrolling to a specific element on a page.

$('html, body').animate({
    scrollTop: ($('#element').offset().top)
},500);

We use the .animate() method to scroll to the top of #element, over a period of 500 milliseconds.

jQuery To Scroll To The First Element With A Specific Class

A practical use of this could be in validating a form and you want to scroll to the first error for the user to correct. Assuming all elements with problems have been given the class of error, we can scroll to the first one using jQuery’s .first() method before chaining on .offset() and the property top as before.

$('html, body').animate({
    scrollTop: ($('.error').first().offset().top)
},500);

Now, go get scrolling!

Using SQL Server ntext Columns In PHP

I had to connect to a SQL Server database from a PHP script earlier, and I came across an error I wasn’t expecting.

My SQL was working fine, until I tried to select one particular column, it would then give me a 4004 error. Other columns in this table worked fine, so I investigated more.

The error string returned with the 4004 error code was “Unicode data in a Unicode-only collation or ntext data cannot be sent to clients using DB-Library (such as ISQL) or ODBC version 3.7 or earlier.”

Looking at the table definition, the column I was trying to SELECT was of type ntext. This is used to hold UTF-8 data.

By default the driver I had installed for PHP on Ubuntu Linux using

apt-get install php5-sybase

couldn’t understand this UTF-8 data. The solution is to edit the conf file used by freetds, which is the code used to talk to the SQL Server database by the PDO DBLib library.

So, in /etc/freedts/freetds.conf I added these settings

[global]
tds version = 8.0
client charset = UTF-8

After adding those settings, I was successfully able to SELECT the ntext column from the SQL Server database.

Unit Testing JavaScript With QUnit And Phing

Recently I’ve been using both Phing for my PHP builds, and QUnit for my JavaScript unit tests, so I’ve been looking for a way to run these QUnit tests when Phing builds my application.

By default Phing can run PHPUnit tests, but not QUnit. However Martin Jonsson has come to the rescue with his Qunit Phing Task.

QUnit Phing Tasks lets QUnit tests be run during a build and Phing can either pass or fail based on these results. As QUnit is written in JavaScript, QUnit Phing Task runs PhantomJS to call a JavaScript wrapper that passes the output back to PHP and Phing. PhantomJS is a headless JavaScript browser that can excute on a command line.

Using QUnit Phing Task

To run the QUnit Phing Task you need to install PhantomJS. I downloaded a binary and placed it in /usr/local/bin on my system.

You need to download the QUnit Phing Task. I placed the files in a local ./lib directory in my project.

You will also need to download QUnit. I placed the files in a local ./tests directory in my project.

In the ./tests directory I created an HTML file called runner.html. This is the page we need to call to run our tests.

<!DOCTYPE html>

<html>
        <head>
                <meta chatset="utf-8" />
                <title>Qunit Tests</title>
                <link rel="stylesheet" href="./qunit.css">
                <script src="./qunit.js"></script>
                <script src="./test.js"></script>
        </head>

        <body>
                <div id="qunit"></div>
        </body>
</html>

I also create a JavaScript file called ./test.js in ./tests to hold my JavaScript tests in.

test("testing for true", function() {
        ok(true, "true is true");
});

Finally, I create a build.xml for my Phing build.

<?xml version="1.0" encoding="UTF-8"?>
<project name="qunit example" basedir="." default="qunit">

        <path id="project.class.path">
                <pathelement dir="./lib/" />
        </path>

        <taskdef name="qunit" classname="QunitTask">
                <classpath refid="project.class.path" />
        </taskdef>

        <target name="qunit" description="JavaScript Unit Test">
                <qunit executable="DISPLAY=:0 /usr/local/bin/phantomjs" haltonfailure="true" runner="./lib/run-qunit.js">
                        <fileset dir=".">
                                <include name="tests/runner.html" />
                        </fileset>
                </qunit>
        </target>

</project>

In this I am specifying a path to my ./lib directory as this is where the QUnit Phing Task code is. The path is then used in the taskdeftask which is used to create the <qunit> task. Now when I call <qunit> in my qunit target I just pass in the location of the executable – in this case where PhantomJS is, whether Phing should halt if the QUnit tests fail, and where to find the the JavaScript that runs QUnit. Inside the task, we pass in where our runner pages are, as we only have the one in this example we include it by name tests/runner.html.

Running this gives us the following…

rob@lamp ~/qunitphing> phing
Buildfile: /root/qunitphing/build.xml

qunit example > qunit:

    [qunit] ./tests/runner.html: 1 tests of 1 passed, 0 failed

BUILD FINISHED

Total time: 0.3275 seconds

So we can see our tests have passed. Let’s change our test.js so that it fails.

test("testing for true", function() {
        ok(true, "true is true");
        ok(false, "false is true");
});

This test should fail, as false is not true and will fail the ok assertion.

rob@lamp ~/qunitphing> phing
Buildfile: /root/qunitphing/build.xml

qunit example > qunit:

    [qunit] 1 tests failed on: ./tests/runner.html
    [qunit] Failed test: testing for true (1, 1, 2)
Execution of target "qunit" failed for the following reason: /root/qunitphing/build.xml:13:41: QUnit tests failed

BUILD FAILED
/root/qunitphing/build.xml:13:41: QUnit tests failed
Total time: 0.3258 seconds

So we can see that Phing has failed our build due to the QUnit tests failing, which is what we want.

Summary

Although a very simple and contrived example, I hope this has shown you how to add JavaScript unit tests using QUnit to your Phing build.