Technical

A short and simple beginners look at Markdown

At SevenStrokes, we forego email support and go straight to a forum / discussion-based system based off Vanilla. This is great, because we can organise client discussions much better, focus discussions on certain topics, split and merge topics as they spin off from original topics, and through an intuitive interface that takes no time to learn. Best of all, we can escape from those badly formatted client emails with the annoying 10-line signature and get to the point. That’s the reason our discussion post formatting is based off Markdown.

Too bad it’s not obvious enough how to use Markdown.

I wrote this very short, basic, and purposely omitting details guide to What is Markdown? – I hope you like it :)

Creative

Eight rotary phones – an art installation

Late last year, I helped run the University of Sydney annual graduation exhibition for the Architecture faculty. One of the things I was responsible for was helping set up an “artistic” installation. Architects have strange concepts of what is and isn’t art, and apparently an isolated network of eight rotary phones qualifies.

An old rotary phone

The concept was simple: throw eight hipster phones around with a few numbers and see what happens. You could call each other around the building. I’m sorry, were you expecting more? Nope. That’s art for you.

It did, however, give me an opportunity to learn the basics of traditional phone systems – from things like pulses, tones, VOIPs, PABX, switchboards, right down to the physical labour of installing more than 200 meters of phone cable across a building.

On the night itself, I’m happy to say that the installation (in both the technical and artistic sense) was a success. I’ve never heard such creative instant role playing or even inappropriate words said to would-be employers.

… I wonder how long I can keep that phone network running before people realise it’s not a legitimate part of their system?

Technical

Installing Gentoo on Android with chroot

Note: recently edited 8th Nov 2014

Installing Gentoo in a chroot alongside Android is easy, so if you already use Gentoo and have an Android phone, there’s really no reason why you shouldn’t do it. With a ginormous phablet like the Samsung Galaxy Note 2 and a bluetooth keyboard, you can get a super-mobile full Linux workstation everywhere you go.

Before we begin, let’s see the pretty pictures. Here’s Larry saying hello :) (Installing a talking cow should be the top priority once the base system is up and running)

Larry saying hello on Android

… and of course a shot of emerging stuff …

Gentoo on Android compiling stuff

… and finally we’re running Enlightenment 17 with the Webkit-based Midori browser with X, accessed via (Tight)VNC …

E17 on Android with Gentoo Linux

Installing Gentoo on Android

Prerequisites first: you’ll need a rooted device. You’ll also need a terminal with busybox. I recommend Android Terminal Emulator and busybox by stericson. I would also recommend installing Hacker’s Keyboard, which gives you a full keylayout.

Installing is rather straightforward: modern Android phones usually run on ARMv7 so just follow the appropriate handbook. If you are installing it onto your internal storage (not on an external SD), you can skip to chapter 5 :)

You will need to be root to install, so su - in your terminal emulator of choice. Similarly, remount Android into read-write so that you can create the necessary files for Gentoo with mount -o remount,rw /. Finally, remember to install in /data/gentoo instead of /mnt/gentoo so to not conflict with Android’s mounting preferences.

Since we’re only installing a chroot and not booting alongside android, you can safely skip configuring the kernel, configuring fstab, configuring networking, and setting up the bootloader.

When mounting, you will need to do so as root user, and use the busybox implementation for --rbind support, as so:

$ su -
[ ... superuser access granted ... ]
$ cd /
$ mount -t proc proc /data/gentoo/proc
$ busybox mount --rbind /dev /data/gentoo/dev
$ busybox mount --rbind /sys /data/gentoo/sys
$ chroot /data/gentoo /bin/bash
[ ... now in the chroot ... ]
$ source /etc/profile

This is assuming you’ve put Gentoo in /data/gentoo

Android quirks

There doesn’t seem to be a /dev/fd on Android, so let’s fix that:

[ ... in Gentoo chroot ... ]
$ cd /dev
$ ln -s /proc/self/fd`

Portage won’t be able to download files as it doesn’t download as root, but instead as another user by default. No problem:

[ ... in /etc/portage/make.conf ... ]
FEATURES="-userfetch"`

Sometimes I’ve noticed that on bad reboots the /etc/resolv.conf can get reset. This will cause host resolving issues. Resolving is as easy as:

[ ... in /etc/resolv.conf ... ]
nameserver 8.8.4.4
nameserver 8.8.8.8`

It will be a good idea to set your main user to the same UID as the Android normal user. Also, running id -a in android will show you that your user is part of various reserved Android groups. To fix issues such as your Gentoo user’s (in)ability to go online or use bluetooth, just create these groups in your Gentoo install with matching GIDs, and add your user to these groups. Here’s a list of Android UIDS and GIDS. For example, I needed to add my Gentoo user to groups with GIDs 3003 and 3004 before it could successfully go online.

If you want an X server, VNC will do the trick. I recommend android-vnc-viewer 24-bit colour seems to work, and perhaps change the input method to touchpad rather than touchscreen so it’s relatively usable.

Finally, with no fan and big heatsink on a mobile phone, you might find yourself running hot. So even though monsters like the Galaxy Note 2 have 4 cores, I recommend sticking it to MAKEOPT="-j2"

Creative

USyd Architecture Exhibition website released

Today I’d like to officially release the Usyd Architecture Exhibition website.

USyd Graduation Exhibition Website Homepage

USyd Graduation Exhibition Website Catalogue

Taken from the site itself:

The University of Sydney Architecture Faculty puts together an annual exhibition for its graduating Bachelors and Masters students. This gives students an opportunity to showcase their best projects. An event is held to exhibit these works, and along with this a hardcopy curated catalogue and a digital catalogue is released.

So as expected, the site hosts this year’s digital catalogue, and will continue to host future year’s submissions. There are currently about 100 submissions listed across five diverse project briefs. Feel free to look around, but I’d like to issue a word of warning to my readers that you might find the project descriptions more affiliated towards the romantic and social science-esque narrative.

If you’re wondering why a lot of the work is more art than design, I’d like to highlight that we aren’t incapable of making functional, logical and real-world problem solving designs. However it does seem that a lot of students aren’t taught how to write, and end up romanticizing the design into an artwork. That said, some designs do aim to be utopian and speculative, but I guess if you’re going to be spending the rest of your life looking at glazing and bolts, you’re excused for a little fun during university.

I’d also like to get the chance to highlight my own submission on the website.

Flinders Street Hotel Proposal Render

My project this semester involved proposing a Flinders St Hotel. It’s a rather large scale project, and would take too long to explain fully, even for the generous space that the online catalogue allows. I recommend viewing my project page and reading the full description there. It gives an overview of the project.

Finally, I’d like to quickly highlight the under-the-hood of the website. The website runs on vtemplate, is responsive, and has it’s technology colophon visible at its humans.txt. In particular, it was designed to be quite generic and highlight the work itself, and function on a phone or iPad as you scanned QR codes during the event itself. The entire website is open-source (view repository), and I’ve just tagged 1.0.0 today :)

Technical

vtemplate 1.0.0 released

Today I’d like to release vtemplate 1.0.0. I’ve blogged about vtemplate before, but now I am relatively confident about its maturity to make an official release. Jeff Atwood has spoken about The Rule of Three in Reusable Software, and I’m happy to say that I’ve used vtemplate in far more than three sites since then. Oh, and if you are not a web developer, this post is probably not for you.

What is vtemplate?

The Git repository says it well enough: vtemplate is a boilerplate setup for starting new [web] projects which combines various industry standards. There are a few tweaks here and there, but otherwise it’s loyal to upstream. You’ll recognise many favourite technologies used in vtemplate, ranging from Stylus to Kohana to Behat. But before I run through these technologies, I’d like to highlight the ideals behind vtemplate:

  1. Favour industry standards over proprietary and personal hacks
  2. Promote standards that emphasise readable, maintainable, and simple code
  3. Don’t restrict or govern your desired code architecture

Let’s take a brief tour over the awesome stuff we get with vtemplate.

HTML5Boilerplate

You really can’t go wrong with HTML5Boilerplate. It’s a great piece of collaboration by very experienced frontend web coders and very well documented. This is a great first step to writing responsive, cross-browser, HTML5-valid code. This also brings in so many other frontend joys like HumansTXT, Modernizer, JQuery and so on.

Stylus

If If you’re using another CSS preprocessor, this’ll show you just how clean your CSS can really be. If you’re not yet using a preprocessor … well, you’ll soon find out why it’s so awesome. Admittedly Stylus isn’t as popular as the big boys like LESS, but it has a very lenient syntax and is easy to swap out.

Mustache

Learn why writing logic in your templates is evil! Stop writing Model-View-Controller and start writing Model-View-Template-Controller. Don’t let the backend team hold up the frontend or vice versa.

WYMEditor CMS

Why are your clients modifying their site with bloated CMSes and complex, unsemantic rich text WYSIWYGs? Keep things simple, and let your code govern the CMS, not the other way around. WYMEditor reads and writes directly to clean segments of frontend files and understands your CSS. Best of all, it makes it easy to review changes with version control. Read more about the simple CMS approach here.

Kohana

Modular (quite literally split into many Git submodules), PSR-0 compatible, forward thinking and high coding standards PHP web delivery mechanism with extremely flexible routing and HMVC architecture.

Composer

Composer is everything you wished PEAR could’ve been, and more.

Swiftmailer

Most webapps need a mailer library. Swiftmailer is a great one.

PHPSpec2

We all love TDD, right? BDD is even better because it’s semantic TDD! PHPSpec2 provides a really simple (but powerful) BDD tool complete with clean mocking and stubbing.

Behat and Mink

Another great tool from the same guys who brought PHPSpec2. Whereas PHPSpec covers all your unit testing, Behat is excellent for full stack and UI testing, with the beauty of a semantic Gherkin syntax. Mink is just icing on the cake, giving an easy to use abstraction to emulate browsers.

Phing

Test. Configure. Build. Deploy. Do it again!

So if you’re developing a web application with PHP, check out vtemplate :)

What’s new in vtemplate 1.0.0?

Well, apart from being the first release, where by definition everything is new, there have been a few more tweaks since my last post on it.

  • Phing building, deploying and quality control with all sorts of goodies
  • UTF8 and URL replacement bugs fixed in CMS
  • Sahi comes to Behat
  • New “Photoshopper” driver for image manipulation needs
  • More Behat feature definitions as defined in my post about behat
  • Improved humanstxt
  • Default encourages variable page titles and metas
  • moult/contact form bundled
  • Kohana bumped to develop version
  • Simplified installation / configuration

Feel free to fork :)

Life & much, much more

The Architecture Graduate Exhibition – University of Sydney

On the 5th of December, there will be the Architecture Graduate Exhibition at the University of Sydney. Yes, that’s right, my Bachelors degree is over! But before I move on to Masters, other projects, and life, I would like to dedicate a post to the exhibition itself.

The Architecture Graduate Exhibition is an annual event which showcases the work of all the graduating students. This year, it’ll feature the the graduating Bachelors, who show projects tackling the controversial redevelopment of Flinders Street Station in Melbourne, and the graduating Masters, who’ll showcase three distinct projects. Our organising team of five including myself are happy to present “ANALOGUE” (that’s an artsy theme, in case you haven’t guessed).

Architecture Graduate Exhibition - USyd - Logo

If you are available in Sydney on the 5th of December, be sure to drop in at the Wilkinson Building at 148 City Road around 6PM for live music (which I shall participate), free booze (which I shall graciously donate), and perhaps some design here and there.

This year shall also feature the release of the first online graduate exhibition catalogue. This’ll be reused in future years. It’s still under wraps but will be released at UsydArchExhibition.com once I have enough entries. You may also follow our Analogue Architecture Exhibition Facebook page where we post ongoings – you might witness the 200 plinths we built (don’t mind the mess in the backdrop, that’s the natural state of a creative environment).

Analogue Architecture Exhibition Plinths

Back to work!

Life & much, much more

A bullet point blog post because I’m back in business

What a hectic month. Will post about projects later, but here’s a bit of here and there:

  • Final exam on Monday 18th then I will truly be free.
  • All servers and boxes updated to latest software after several months.
  • Amarok is an amazing app, but that it took me this long to wrap my head around is a little sad. The MusicBrainz tagger is a lifesaver.
  • New GPG keys. It’s been 3 years since my old one.
  • Finally got around to talking to the registrars upstream to remove the hold status from WIPUP.org. It’s back online, still running the old Eadrax, but has some hotfixes applied.
  • The KDE Connect GSOC project is great.
  • The Sydney Architecture Revue went very well. Can’t wait for next year.
  • Oh, what’s this?

More posts later.

Life & much, much more

Architecture IRC channel on Freenode

Most of my readers will know that despite the majority of my blog posts being about technical content, I actually study architecture. The crossover between these two fields from my experience seems to be rather minimal. The computer geeks know a little about buildings, but not enough to do much about it. Similarly, the architecture folks dabble with computers, creating fields such as algorithmic architecture and parametric design. This dabbling rarely turns into anything serious from either party, and it’s quite hard to find an online community of those who are interested in both. I hope to change that with the new architecture IRC channel on freenode.

I recall lurking with the hopes of meeting another architect in #architect for a while. Occasionally someone would come but never stay, and the original channel founder left and hasn’t been back for a year or so. For this reason I have now registered ##architect (the double hash prefix due to Freenode’s channel rules) and will lurk yet again. I hope by writing this blog post other architects might notice and pop in.

What is IRC and how do I join the architecture IRC channel?

I realise that many architects might not be so familiar with what IRC is. IRC can be thought of as an online chat room divided into channels, which represent common topics of discussion. These channels are grouped into networks, which are simply organisations that provide these channels. So the full access details you need are as such:

Network: Freenode
Channel: ##architect

Just like you need a program such as Skype in order to chat with others using Skype, you will need an IRC program to chat with others on IRC. I recommend using downloading Quassel – it works on Windows, Mac and Linux.

If you don’t want to use a program, you can easily chat using the online Freenode webchat service. It’s super easy to get started, just type in a nickname for yourself and put ##architect in the channel box, and press connect.

Finally, don’t worry if nobody seems to be around, just stick around and we’ll respond when we’re back at a computer.

See you in the architecture IRC channel!

Edit: some people have popped up but leave quite quickly. Small IRC communities are frequently inactive but need people to stick around for it to grow. Please consider waiting a few hours, or just connecting frequently and when somebody else is also around we’ll have a chat.

Life & much, much more

Sydney revue coming up from the architecture faculty!

As some might remember, I was involved in a Sydney revue last year by the university of Sydney architecture faculty as the musical director. It was called Game of Homes (a shameless pun on the Game of Thrones series). Not only was I involved with music, it also gave me the wonderful opportunity to create a 3D animation for its opening sequence based on the original (and very well done) Game of Thrones sequence. You can view the animation sequence and corresponding revue poster in this post.

As this is an annual event, I’m happy to say that I’m again involved in it this year (as music again) and would like to present Floorless, a spaghetti western with a particularly complex pun for a title. It’s a joke on both the film Lawless, and on Flawless with an architectural twist. Get it? Nope? That’s alright. Me neither.

Sydney revue architecture

Anyway, you can tell that this is a quality Sydney revue because it has a quality poster. This means that if you’re in Sydney on the 5th, 6th or 7th of September, you should buy a cheap ticket and watch it.

Sydney revue poster alternative

It contains all the right ingredients for a successful western. These include bandits, sherrifs, the town stranger, the town drunk, the fastest shot in the West (which may sometime be the town drunk), the banjo brandishing hillbilly, the lonely harmonica player, a whip*, the mayor, Mexicans, the fine lass, and a Final standoff with capital F.

Also, there used to be an official revue website somewhere but as I can’t find it I assume that someone forgot to renew the domain and the site no longer exists.

Cheers, and see you at the event!

  • the whip may or may not be used at the actual event, and audience are recommended to not buy tickets for the front row.
Creative

Blender panoramic renders howto and demonstration

Doing a Blender panoramic render isn’t easy. This is because you can’t actually see what you’re going to create in the regular OpenGL-shaded 3D view. In fact, even when looking through the Blender camera, you won’t see what you’re going to end up with.

Blender panoramic renders with Blender Internal renderer

The technique is actually rather simple: just select the camera. Then in the object data settings panel, just click the panoramic button and play with the focal length until you get something you want. You can see an example of how to create a simple Blender panoramic render in the screenshot below:

Blender panoramic settings

You’ll soon discover is that you can only actually see what you’re going to get when you hit the render button. If you’re using the internal Blender renderer, this’ll become a pain really quickly. This is because you’ll have to constantly hit render and wait for the image to come up.

Blender panoramic renders with Cycles renderer

However if you switch the scene to Cycles Renderer, things become easier. This is because Cycles provides a real-time rendering view. Just set one window open to rendered view and you’ll see what you’re going to get (roughly) in real time. At the same time, you’ll notice that Cycles opens up new options on how your panoramic render should be like: the type of panoramic – whether it’s fish eye, equidistant, or rectangular, and how many degrees the field of view is.

Blender cycles panoramic camera settings

Now comes the fun part, actually building your scene. The best strategy is to have planned out your scene beforehand on paper so you know its composition. With panoramic renders, if you haven’t already got a scene built, now is your chance to bend reality in a Dali-esque manner and have fun with perspective.

Once your composition is planned out, create simple cubes and planes as proxy objects for the rough locations of where your scene objects are going to be. Then slowly replace them with the more detailed meshes of what you want to make.

Another useful tip is to use the Blender preview window. In Cycles, when in camera view, just press shift-b and drag and drop a cropped portion of your screen, and it’ll only render that area. This keeps rendering times low. There are plenty of other tips on how to reduce rendering times, so I won’t repeat them all here.

Below you can see a panoramic render I did a few months ago which uses the above techniques. As you can see, I’ve blended several scenes together with varying perspectives, which was only possible with a panoramic render.

Blender panoramic render

Good luck, and create those awesome renders!

Technical

Motion tracking with Javascript, HTML5 and a webcam

Why would you use the web for motion tracking? Simple. HTML5 Canvas is exciting. Javascript is (pretty) cool. Combined with a lazy afternoon, we can create an ultra simple hand motion tracking and colour recognition system.

This isn’t entirely true. It doesn’t track the hand, it tracks a bright blue bottle cap I found on the floor. Even more truthful is to say that it tracks anything bright blue. But enough chat, here’s a demonstration. Just click the small button with the dash in it to get started, grab something blueish and wave it in front of your camera. It won’t be as good as we got it since we adjusted it for specific lighting conditions, but it’s enough as a proof of concept.

We’ve also got pretty pictures to show. Here’s one of the quick n’ dirty strap we used to embed the bottle cap in.

php_hand_motion_tracking

And here is one of it in action.

php_hand_motion_tracking1

You can see the (bad, hackish, thrown together) code for it in my playground repository on GitHub.

Life & much, much more

Hello SevenStrokes: Building websites … a little differently

A few months ago, Chris Paplinski, Nathan Charrois, Kaushal Inna, Andre Brokman, Kelsie Rose and I, Dion Moult, gathered to create a company. Today, we would like to present to the world: SevenStrokes.

Sevenstrokes web development

SevenStrokes is a web development company but with a few key differences.

  1. Firstly, we see websites as a service, not a product. We don’t just build a website, we treat it as part of your larger corporate strategy.
  2. We build systems that mirror your day-to-day domain issues. We use a combination of behavior-driven development and code architecture that employs the same daily language that you do. This ensures our system makes sense not just in the software world, but in real life, and thus always move a step towards achieving your corporate goals.
  3. We follow many aspects of the open-source business model, ensuring that we assign the most motivated staff that want your site to succeed just as much as you do, and that full inspection guarantees your system integrity.
  4. We push for the latest industry standards and keep on pushing, even after launch. Websites are usually short-lived, but we’re changing that with a system architecture that maximises long-term life.

So what are you waiting for? Do you need a website built? Do you need somebody to help spearhead your latest online initiative? Check out SevenStrokes: Building websites … a little differently

sevenstrokes unique web design

Life & much, much more

DraftSight: a free and cross-platform alternative to AutoCAD

Whilst Linux is an excellent system for programmers, it’s certainly a little wanting for people who deal with creative graphics. There are tools like Krita, GIMP, Inkscape, Blender and Digikam and so on to help fill this gap, but one area which isn’t talked about so often are CAD tools. As an architecture student and a Linux user, I can safely say that the options are disappointing. It certainly is possible to have a complete graphics workflow on Linux, but it’s not as good as on Windows.

There were always CAD packages around such as FreeCAD and QCAD (I believe rebranded to LibreCAD) and its various derivatives, but they were all slow and not particularly powerful. However for the past few years, I’ve enjoyed DraftSight.

DraftSight - a free and cross-platform alternative to AutoCAD

Firstly, a disclaimer: DraftSight is not open-source. It is certainly free to use and works very well on all platforms, but it is backed by a commercial company (Dassault Systemes), is financed through an enterprise license, and certainly has no obligation to the community.

However perhaps the reason DraftSight is so much more powerful than the open-source alternatives is because it has a very clear goal: it wants to clone AutoCAD. Unlike GIMP, which has tried to define a new paradigm for itself, DraftSight keeps users in a familiar environment.

If you are on Gentoo Linux, I am maintaining the DraftSight package and as of May earlier this year, it is available in the betagarden overlay. For more information, you can see this bug.

Life & much, much more

A Beaglebone, a Blender, a Board, and a Swarm.

Hardware isn’t generally my thing. When it comes to software, I like to break and create. But in my opinion, hardware should just work. But even though that’s another story altogether, it did explain my apprehension when I greeted the UPS guy one morning delivering a BeagleBone Black.

beagleboneblack

Let’s begin with the BBB. It’s a computer the size of a credit card, which isn’t that impressive if you realise that your phone is a computer. I find the best way to explain it is in terms of two other products, the Arduino and the Raspberry Pi. The Arduino is a similarly sized (comes in multiple sizes though) controller where you can upload scripts, plug in a hardware circuit (wires and lightbulb, that sort of thing), and have it control the circuit. Despite its power in hardware control, it only has a small scripting interface for you to do your programming. The Raspberry Pi is the opposite. It’s a full Linux computer (based off Debian), but does not have proper hardware controls out of the box. The BBB provides the best of both worlds: a full Linux system (Angstrom Linux, but of course you can flash your own), and a ridiculous number of IO pins to control circuits. All this awesome power at 45USD.

The next step upon receiving this wonderboard was obvious. Let’s build a swarm of robots. Along with two university friends, Lawrence Huang and Gloria Nam, we set out planning the system.

world

The base was to be constructed out of a 1200x1200mm wooden plywood board and cut it into a circle with a hole in the middle. This would be the “world” where the robot swarm would live on. This world would operate like a Lazy Susan, and would have a two depots filled with some sort of resource. One at the center, and one at the perimeter. This gave the colony a purpose: it would need to collect resources. Above the board was where we would put the computer, BBB, power supply, and cables to hook up to all the bots below.

We then had to determine the behavior and movement capabilities of the swarm. It had to act as one, but still remain separate entities. It also had to disperse to discover where the rotated resource depots were, and the swarm as a whole had a set of goals and quota limitations. Five movement types (along with the math) were worked out to allow the bots smooth and flexible movement across the terrain.

rules

The overmind was next. We would use Blender‘s very flexible boid simulator along with custom Python scripts using Blender’s Python API to simulate the swarm behavior on the computer and set swarm goals. At the same time, a real-time top-down view could be generated and displayed. Due to budget reasons, we couldn’t build the entire swarm of robots, but instead settled on building just one bot in the swarm, and having this bot track the motions of a single bot on the computer screen, but still behave as part of the full 32-robot swarm on the screen. Viewers could then see on the screen the full swarm behavior, and physically see a single bots behavior in front of them.

swarmscreenshot

The car itself was then built. It was relatively small and was barely enough to fit the two continuous-rotation servo motors that were required to power its left and right treads. It had a little tank on its top to hold resources, a depositing mechanism at its front, and dragged along a massive conveyor belt to collect resources behind it.

car

Now the fun part – calibrating the simulated swarm with the actual physical swarm behavior, and doing all the physical PWM circuits. Many sleepless nights later it was a success. Here we see the bot doing a weird parking job into the depot and collecting resources, going back to the center, and depositing it. Apologies for the lack of video.

collect

And there we have it. A swarm of robots. Did it curb my fear of hardware? Not entirely.

frontshot

For those interested in the actual system, here’s a macro overview:

system

A few extra fun things from the project:

  • Calibration was not easy. Actually, it was very hard. No, it was stupidly hard. It was ridiculously hard. Real life has so many uncertainties.
  • Each bot is tethered to the overmind via 8 wires (3 per tread, 2 for conveyor belt). Could it be made into a wireless swarm? Yes. Did we have the money? No.
  • Could it be modified to move in 3D XYZ space like a swarm of helicopters? Yes. Would I do the math for it? No.
  • The actual simulation was done on the computer via Blender + custom python scripts. The computer was then connected via a persistent master SSH connection, which was reused to send simple signals to the pin’s embedded controller. So all in all the BBB actually didn’t do much work. It was just a software->hardware adapter.
  • Because the computer was doing all the work, it wasn’t hard to add network hooks. This meant we could actually control the system via our phones (which we did).
  • Weirdest bug? When (and only when) we connected the computer to the university wifi, flicking a switch 10 meters away in a completely separate circuit (seriously, completely separate) would cause the BBB to die. Still completely confused and will accept any explanation.
  • Timeframe for the project? 4 weeks along with other obligations.
  • Prior hardware and circuit experience: none. Well. Hooking up a lightbulb to a battery. Or something like that.
  • Casualties included at least three bot prototypes, a motor, and at least 50 Styrofoam rabbits (don’t ask)
  • Why are all these diagrams on weird old paper backgrounds? Why not?
  • At the time of the project, the BBB was less than a month old. This meant practically no documentation, and lack of coherent support in their IRC channels. As expected, this was hardly a good thing.

Project success. I hope you enjoyed it too :)

Technical

In order to discuss BDD, as a blogger, I need to talk about Behat

If you’re developing a web application, especially one that uses PHP, you should know about Behat.

Behat introduces itself as “a php framework for testing your business expectations”. And it does exactly that. You write down your business expectations of the application, and it automatically tests whether or not your application achieves them.

You begin every feature description with a three liner following the form:

[sourcecode]
Feature: Foo bar
In order to … (achieve what goal?)
As a … (what target audience?)
I need to … (use what feature?)
[/sourcecode]

This is then split up into individual scenarios of using this feature, all of which are described using natural English following the Gherkin syntax. It then uses Mink which is a browser abstraction layer to run these tests.

I’ve been enjoying Behat for quite some time now, and I’ve noticed certain tests I need to write that come up again and again which aren’t included in the default Mink definitions.

The first is to check whether or not an element is visible. These days, Javascript heavy UIs use a lot of hiding and showing, and often this is vital to the business expectations of how the website should work. These sorts of tests need a non-headless browser emulator, such as Sahi. Simply prefix your test with the line @mink:sahi, and now we can use the following definition:

[php]
/**
* @Then /^"([^"]*)" should be visible$/
*/
public function shouldBeVisible($selector)
{
$element = $this->getSession()->getPage()->find(‘css’, $selector);
if (empty($element))
throw new Exception(‘Element "’.$selector.’" not found’);

    $display = $this->getSession()->evaluateScript(
        'jQuery("'.$selector.'").css("display")'
    );

    if ($display === 'none')
        throw new Exception('Element "'.$selector.'" is not visible');
}

[/php]

… so you can now write …

[sourcecode]
Then "div" should be visible
[/sourcecode]

Worth highlighting is the ->evaluateScript() function that is being called. This means that anything you can check with JQuery can be tested. This is pretty much everything.

Another useful query is dealing with images. Modern web apps have to handle image uploading quite a bit, and often this comes with resizing or cropping (for avatars, keeping to layout widths, thumbnails). Wouldn’t it be great if you could just write…

[sourcecode]
Given I have an image with width "500" and height "400" in "/tmp/foo.png"
Then the "img" element should display "/tmp/foo.png"
And the "img" element should be "500" by "400" pixels
[/sourcecode]

… and of course, now you can. All this code is included in vtemplate under the FeatureContext file.

Happy testing!