Articles by


  • posted by mark
  • on Oct. 28, 2015

Here’s a snippet for Kivy, which adds functionality to get the widget at a given screen position. It’s probably not the most refined approach in the world but until we can get a proper mouse over event, this seems to work for now.

To use it, simply add it to your App class like:

class TestApp(WidgetPosition, App):

and call get_widget_at(pos)

And here’s the code:

class WidgetPosition:
    def get_widget_at(self, pos, node=None):
        x, y = pos

        if not node:
            node = self.root

        for widget in node.children:
            if self._is_over_widget(widget, x, y):
                return self.get_widget_at(pos, widget)

        if node == self.root and not self._is_over_widget(node, x, y):
            return None

        return node

    def _is_over_widget(self, widget, x, y):
        if x >= widget.pos[0] and x <= widget.pos[0] + widget.width and \
                y >= widget.pos[1] and y <= widget.pos[1] + widget.height:
            return True
        return False
  • posted by mark
  • on Feb. 26, 2015
Something that's come up a lot in recent jobs is the need for a basic component to enable inline editing on certain fields inside webpages. This drove me to write a small, reusable JQuery component to do the trick, which I've made available on Github in case anyone else finds it useful. You can grab the code here - - along with some basic usage instructions.
  • posted by mark
  • on Sept. 27, 2014
We're looking for authors of all genres and levels of experience, and stories of all lengths, to collaborate with us on an exciting new interactive e-book platform. We can't release too many details yet, but if you're interested in exploring a new writing platform and seeing your work published across multiple platforms, we'd love to hear from you. Send me an e-mail at for more information.
  • posted by mark
  • on Sept. 21, 2014
Based on code I originally implemented in C++ using SDL, I've finally gotten around to porting an initial bare version of my universal co-ordinate system to Unity C#. The aim of this is to allow developers to use device independent co-ordinates to place and size their GUI elements, as seen in OpenGL. It provides a co-ordinate system of -1.0 to 1.0 on the X and Y axis, with 0.0x0.0 always being the center of the screen. Feel free to check it out and as always, contributions are more than welcome.
  • posted by mark
  • on June 5, 2014
Autoform is a convenience class used to quickly render forms in a Yii view. It's compatible with YiiStrap ( and will render fields using TbActiveForm if it's available. It's very much in it's infancy at the moment, and only contains the core functionality we are actually using ourselves, however suggestions and improvements are very much welcome!
  • posted by mark
  • on March 21, 2014
Pleased to announce that I've decided to open source the character conversation and general dialog box engine I've been developing as part of a personal project for Unity 3D. I know there's a lot of existing solutions out there in the asset store, but this one is aimed at games which don't need such a heavyweight solution. There's not too much there at the moment but I'll be adding to it as the project progresses. At present the code is able to render a typing character dialog with optional styling and a background texture, and respond to input. Hopefully some folks will find it useful! Check it out at
  • posted by mark
  • on March 13, 2014
Call it March madness, call it whatever you want, but for a limited time only I'm bringing back my 3 page website deal at a massively reduced price on PeoplePerHour! Get your designs turned in to a beautiful hand coded, fully w3c compliant Wordpress or Joomla based site for a fraction of the normal cost. Find out more below: Wordpress Joomla
  • posted by mark
  • on Jan. 22, 2014
(If you're just looking for the problems and solutions, and not the rant, skip to the bottom) Yesterday was an absolute write off. It was a write off because of my old friend Titanium Appcelerator. Regular readers of this site will know that I have a bit of a love / hate relationship with this product. For the uninitiated, Titanium Appcelerator is a cross platform IDE and toolset that allows for the development of mobile applications using Javascript, and builds for Android, iOS, Blackberry, Tizen and more. It's like PhoneGap, but advertises itself as compiling and optimizing the code so it's much closer to native development when it comes to performance. It does show, in our experience, aside from an initial delay starting up, the Appcelerator apps run a lot faster than PhoneGap ones. It's why we adopted it as our development platform of choice for clients looking for cross platform mobile and tablet applications, where budget, time or support constraints might not allow for native development, or where the client is looking to only maintain and develop everything from a single source. But it's not without it's problems, which takes me back around nicely to my original point. In the middle of last year I switched my primary development environment to Windows 8 in an attempt to give the platform another chance, having previously conducted the bulk of my work under Ubuntu Linux. After a few months of constant problems and workarounds, I was forced to switch back, and in doing so needed to update my development environment with the latest bits and pieces --- which broke my installation of Titanium Appcelerator. Problem 1 - The required installation of Node.js This is one area where Windows surprisingly won. When prompted with the update box for version 3+ of Appcelerator, Node.js was installed at the same time. Not so on Linux. To be fair, the Appcelerator site says this, and offers a guide at!/guide/Installing_Node. The problem is that I followed the advice on there to set npm to use my home directory (or rather a directory inside my home directory), updated my environment path accordingly, and installed npm and nodejs via apt-get. I then tried via the IDE, and it didn't detect Node.js, trying to install it again. I won't bore you with everything I tried (including going through the command line), but safe to say after a lot of googling the issue but not finding a solution, it was solved by uninstalling npm and nodejs completely, stripping npm of it's installed packages and forcing the npm directory back to /usr/local (I even had to override this with the .npmrc file in my home directory since it insisted on picking up my old prefix even when it was removed). So with my prefix set to /usr/local I did: sudo apt-get install npm nodejs nodejs-legacy sudo npm install -g titanium titanium login .. and entered my login details titanium sdk install titanium setup .. and then stepped through the quick setup. During the initial attempts at this I ran in to .. Problem 2 "/usr/bin/env: node: No such file or directory" and "[ERROR] "/usr/bin/titanium" is an unrecognized command" After some googling on this one, I discovered that the former appeared because of a naming convention issue on ubuntu between node / nodejs. The answer here is to install the nodejs-legacy package. The latter issue is caused by this bug, and the solution I used to get around it was to use Julien Vanier's fork as suggested in his comment: sudo npm install -g git:// .. and I'll switch back when they've fixed it. Problem 3 Android SDKs not found This one literally had be clawing at the walls. I have the Android SDK installed to /opt/share/android-sdks. Loading up the previous version of Appcelerator, it was just a matter of pointing this to the right directory, it would tell me what wasn't installed and using the link on the Dashboard I could invoke the android package manager and install what was missing. Not so now. It appears they've replaced it with a wizard which attempts to install the correct packages for you. So I provided my directory and it presented me with a series of checkboxes for what versions to install, then went ahead and downloaded them over the ones that were already installed. At the end of it, it complained that Android Platform 5.0 was required. Again, lots of frustration on this one, but eventually I got it solved by: - Ensuring that my Android tools and platform tools were on the path. - Invoking the Android package manager on the command line (android) and installing API 19, 14, 11, 10, 8 and 5 (you have to make sure Obsolete is selected for this) - Running "titanium setup" on the command line, then using the android setup to point it at this directory. Finally running a check after and it showed up. Well that's the end of my rant, hopefully the above will help anyone else who runs into the same issues as I did. I haven't decided to drop Appcelerator just yet as despite the negative tone of this post, it really is a great system to develop on and a massive time saver -- when it's working.
  • posted by mark
  • on Dec. 12, 2013
A scenario cropped up recently where I was developing a portable extension module in PHP, designed to be used as a drop in component on various sites, and I came across an issue I've hit a few times before. The problem is, the extension I was developing relied heavily on JQuery, but we couldn't guarantee that JQuery was installed in every site the extension would be used on. Sure, there's a couple of easy ways around this. We could have simply brought up a warning message, stating that JQuery was required for use with this plugin and requiring the site owner to install it in their theme. Alternatively we could have just included JQuery in the extensions headers, but this would have had the potential to overwrite any already included version, and as anyone who has ever dealt with JQuery version conflicts between other components supporting different versions knows .. that can be one massive headache. So the solution was to first check if JQuery is included, and load it if it isn't. This was achieved with the following code snippet, used in conjunction with a previous code snippet I've posted to dynamically load scripts .. which can be obtained here - Dynamically Loading Javascript After a Page Load.
function onJQInit() {
    alert("Loaded JQuery!");

if (typeof jQuery == 'undefined') {  
    // jQuery is not loaded .. load it
    loadScript("", function() {
        setTimeout(function() {
            if(typeof jQuery != 'undefined')
        }, 100);
} else {
If you need a later version of JQuery or want to use your own hosted version, just change the URL when calling the loadScript function. Also it's worth remembering if you want to do this as soon as possible, you'll need to wait until after the page has loaded before executing the loadScript function ... otherwise document.body may not exist. Again, there's an example for this you can adapt at Dynamically Loading Javascript After a Page Load.
  • posted by mark
  • on Dec. 12, 2013
I find this requirement is coming up increasingly more often, particularly as various website analysis tools recommend deferring the loading of Javascript elements until after the initial page load and insist on it when testing for mobile devices. So here's a handy little snippet I threw together to do just that. Firstly we need a pure JS function to load a script. This is done by creating a new script element and attaching it at the bottom of the body element. Here's the function:
function loadScript(path, callback) {

    var done = false;
    var scr = document.createElement('script');

    scr.onload = handleLoad;
    scr.onreadystatechange = handleReadyStateChange;
    scr.onerror = handleError;
    scr.src = path;

    function handleLoad() {
        if (!done) {
            done = true;
            callback(path, "ok");

    function handleReadyStateChange() {
        var state;

        if (!done) {
            state = scr.readyState;
            if (state === "complete") {
    function handleError() {
        if (!done) {
            done = true;
            callback(path, "error");
You can use this function to load a script and execute a callback as soon as it's loaded ... like so:
loadScript('', function() {
    alert('I loaded JQuery!');
And the bit of code below can be used to load multiple Javascript files, one after the other, once the page has finished loading.
var downloadJsAtOnload_j = 0;
var jsToDownload = ["script1.js", "script2.js"];
function downloadJSAtOnload(e) {
    if(downloadJsAtOnload_j < jsToDownload.length) {
        loadScript(jsToDownload[downloadJsAtOnload_j], function() {
    } else {
	// All scripts downloaded

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
Simply modify the jsToDownload array with your own scripts. Let me know how this code works for you, interested in any feedback!