Matthew Roper

I've recently been working as the technical lead for a project at the University of Bath to investigate the use of QR Codes to support mobile users.

Moodle pages have long, crufty URLs that would be difficult to enter into a mobile browser. To help these users, a QR Code encoding of the current Moodle page URL was appended to printed output using a little bit of PHP and CSS.

To append a QR Code to your Moodle pages, add the following code to your Moodle theme footer template (./moodle-root/themes/theme-name/footer.html):

 
<?php
	if (empty($_SERVER['HTTPS'])) {
		$url = "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
?>
<div class="qrcode print">
<h3>Mobile Barcode</h3>
 
    <img class="qrcode print" src="http://go.bath.ac.uk/qr/download?DATA=
            <?php echo(urlencode($url)); ?>" alt="QR Code for this Moodle Page." />
</div>
 
<?php
	}
?>

Hide the QR Code in normal screen output:

div.qrcode.print {
    display: none;
}

... and add a little styling to the print stylesheet as follows:

div.qrcode.print {
    border-top: 1px black solid;
    margin-top: 1em;
    padding-top: 1em;
    text-align: center;
    display: block;
    font-size: 90%;
}
img.qrcode.print {
    padding: 1em;
}

See it in action at the Bath University Moodle installation (login required).

As part of the interface for a web application, I wrote the following code to implement a modal dialogue box in JavaScript (similar to the Lightbox effect).

While there are a few different examples of this effect that I could have used, I was after something straight-forward and lightweight with clear separation of design (CSS) and presentation logic (JavaScript).

function DialogOverlay(content, container) {
 
	// Manage arguments and assign defaults,
	if (typeof container == 'undefined' ) container = document.body;
	if (null == (this.container = $(container))) throw("container is not valid");
 
	// Assign instance variables
	this.content = content;
	this.overlay = new Element('div', { 'class': 'overlay' }).hide();
	this.dialog = new Element('div', { 'class': 'dialog' }).hide();
 
	// Hide the overlay when clicked. Ignore clicks on the dialog.
	Event.observe(this.overlay, 'click', this.hide.bindAsEventListener(this));
	Event.observe(this.dialog, 'click',  function(event) { Event.stop(event) });
 
	// Insert the elements into the DOM
	this.dialog.insert(this.content);
	this.container.insert(this.overlay);
	this.container.insert(this.dialog);
 
	// Content may have been hidden if it is embedded in the page
	content.show();
	this.dialog.hide();
}
 
DialogOverlay.prototype.show = function() {
	new Effect.Appear(this.overlay, { duration: 0.5,  to: 0.8 });
	this.dialog.show();
	return this;
};
DialogOverlay.prototype.hide = function(event) {
	this.dialog.hide();
	this.overlay.hide();
	return this;
};

Adding a dialogue object to your page is simple:

<script type="text/javascript">
	var dialog = new Element('div');
	dialog.insert(new Element('h2').insert('Dialogue'));
	var overlay = new DialogOverlay(dialog);
</script>

In addition, you'll need some CSS to control the presentation of the overlay and dialogue box:

.overlay {
	width: 100%;
	height: 100%;
	background: black;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 98;
}
.dialog {
	width: 50%;
	min-height: 50%;
	background: white;
	position: fixed;
	top: 25%;
	left: 25%;
	z-index: 99;
}

I uploaded the JavaScript class (overlay.js) and made a quick example page to show it working.

Create a directory in your webroot (e.g. /var/www/ruby/ on Debian/Ubuntu) to store and execute your Ruby scripts and add the following directives to a .htaccess file in that directory:

AddHandler cgi-script .rb
Options +ExecCGI

Note: these directives can (and should) be specified in the Apache sites configuration file if you have permission to edit it.

To test that files in the created directory are being properly executed, copy (or download) the following code into a file named test.rb within the directory:

#!/usr/bin/env ruby
require "cgi"
cgi = CGI.new("html4")
cgi.out{
  cgi.html{
    cgi.head{ "\n"+cgi.title{"Ruby is working!"} } +
    cgi.body{ "\n"+
      cgi.h1 { "Ruby is working!" } + "\n"+
      cgi.p { "Now it's time to get on with some real work." }
    }
  }
}

Change the permissions on your file so that it is executable (chmod 774 should work fine) and visit the page you created (e.g. http://example.com/ruby/test.rb) with a web browser.

Hopefully, you should see a successful Ruby test page.

I've recently been working on a project at the University of Bath (I'm a Software Developer in their e-Learning Team) that aims to increase mobile/handheld access to online resources by promoting the use of QR Codes.

Obviously, the first thing I needed was a QR Code generator and I set about creating one using rQRCode (a Ruby library for encoding QR Codes, developed by Duncan Robertson) and RMagick (a Ruby interface to the ImageMagick image processing libraries).

To output the QR Code as an image, I created a class, QRImage, that extends Magick::Image and then used the following code to output the image to a file:

# QR Code parameters
text = 'http://mattroper.co.uk/'
size = 3
level = 'h'
 
# Produce the QR Code
require 'rubygems'
require 'rqrcode'
qr = RQRCode::QRCode.new(text,  :size => size, :level => level)
 
# Create the image and double its size
require 'qr_image'
img = QRImage.new(qr).sample(2)
 
# Write image to disk
img.write('/home/matt/Desktop/qr.png') { quality = 100 }

I've recently been involved in the upgrade and migration of a fairly large, customised deployment of the Moodle open source e-Learning platform at the University of Bath.

To help us understand the code changes that had been made by several different developers over a number of years, I wrote a simple Subversion log viewer to extract the logs and output them to a spreadsheet.

The spreadsheet format allowed non-technical staff to identify why modifications were made and was useful in identifying which features and bugfixes would need to be reimplemented by the development team.

I have made the simple Subversion log viewer and Java source code available on Google Code.