Archive for the ‘developer’ Category

  • Adding i18n to a Cordova App

    Date: 2014.02.14 | Category: cordova, developer, developing, development | Response: 0

    i18n (Internationalization) in applications roughly means adding support for translations and other languages.  In this blog post I will talk you through a general approach to implementing i18n in Cordova Apps.  If your app isn’t open-source, move along, the 90s is on another website.

    As Cordova apps are written in HTML/CSS/JS we can easily leverage existing web platforms and services to provide i18n at break-neck speeds.

    TLDR Services/frameworks used:
    * Translatewiki to provide translations
    * Marcel’s html10n i18n implementation
    * Handlebars for templating
    * Etherpad implementation of detecting locale/language also written by Marcel

    Implementation steps

    * Ensure your app fulfills Translatewiki’s requirements (Open source etc)
    * Talk to Translate / Internationalization team at Wikimedia foundation before creating Gerrit commit
    * Gerrit commit to TranslateWiki adding support for your App.
    * Include handlebars and html10n libraries in your app
    * Modify your HTML putting markup in handlebar script tags
    * Move your text strings into locales files.
    * Include a handlebars html10n render helper
    * Use the Etherpad implementation of detecting locale/language* Give someone at WMF access to commit to your Repo

    Sit back and enjoy..

    Once you have completed your implementation and it’s approved by the WMF the WMF translation team will translate all of your strings and commit them back to your repo. You might want to provide the WMF team with the ability to see each of your strings in situ in a browser, this means providing a mechanism to fake Cordova events..

    Summary

    This implementation is basically a straight copy of how we handle i18n in Etherpad, it’s pretty robust and clean to implement. All in all a complete refactor of the NFC Ring Control App while implementing i18n took about a week of full time commitment, well worth doing as now the larger community can provide translations which if I was to do hans solo would take months icon smile Adding i18n to a Cordova App

  • Object measurement with webcam

    Date: 2013.06.30 | Category: developer, developing, development | Response: 0

    Shut up and show me the demo.

    I have been experimenting with using a webcam to measure an objects size, width and height.

    It works by comparing the size of a user defined box to the size of a magnetic strip (which is also user defined). I tested it against a ruler and it seems accurate but obviously the larger the object the more accurate it becomes. Right now it’s setup to measure the size of a ring finger.

    As this is a weekend project I published the source up on github. I haven’t decided on a license yet so for now don’t adopt it in any commercial applications but do feel free to contact me to chat about funding further development.

    I use getUserMedia / Canvas to do most of the interaction between the webcam and the browser and I’m using PaperJS for drawing the boxes onto the canvas. The actual math is really simple

    // Takes a scale value and tries to figure out the mm diameter of each ring
    function scaleToRingSize(widthPx){
      return (85.72500 / stripWidth * widthPx).toFixed(2); // 85.72500 being the width of a magnetic strip in mm
    }
    

    The fingers.js also contains code for converting ring sizes in mm to the nearest smaller ring size. IE if your ring size is 22mm it will give you a ring size in US/EU that is 22.2mm instead of 20mm.

    I’m researching using Tracking.Js with some custom OpenCV maps to do better object detection, I know this is possible but right now the algos are a bit buggy and I’d need a lot of positive images to create a good training set. If I could do some object tracking in theory I could auto detect the strip / target object size and automate / realtime the whole measurement process and in theory I could do ask a server to do real time object detection, but that’s for another day..

    The measurement app might not quite fit on your page, this is because it’s 800px x 600px with absolute positioning, I guess I could make it use relative positioning but right now I’m not interested.

    The tool will work in all browsers that support getUserMedia which is IE11, FF 17, Chjrome 21, Safari 7 and Opera 12, iOS Safari, BBB 10, Opera Mobile 12. For more browser support queries see getUserMedia browser support. Obviously if you are still using IE then you have probably made many other poor life decisions and you are beyond my help. Obviously because I’m using JS / CSS the app will work on a mobile and desktop webcam so you can in theory measure objects whilst on the move.

    I had to worry about the overheads of the large javascript fabric.js library so I decided I didn’t want the additional overheads of jQuery. It’s entirely written in JS (with obv some CSS/HTML) throw into the mix. I could probably refactor it down to just JS without too much headache and this would give site admins the ability to do something like:

    <script src="measurer.js"></script>
    var measure = new Measurer();
    measure.create("targetDiv"); // can do it like this because getUserMedia is limited to one instance of browser/OS.
    measure.on('success', function(measurement){
      alert("Got a measurement of", measurement);
      measure.destroy();
    });
    

    You will need a card with a magnetic strip on the back, ideally a credit card as these are guaranteed to be a universal size.

    Final thoughts: None of the images are saved to a server but as you know these images are being passed through the Internet which means your ISP is sending a copy of them to the NSA. I strongly recommend against using this tool to measure any part of your anatomy.

  • Script to get an email when a new property in your area is registered on Gumtree

    Date: 2012.04.17 | Category: developer, developing | Response: 0

    This script will send you an email when a new property in your area comes up on twitter.. Replace shoreditch with the area you want and add in some email addresses. You will also want to modify the price.. at current it’s set to a minimum price of £150 per week.

    It was written to solve a problem where we would be out looking for flats/apartments and we needed to be one of the first people to respond. This script gave us the edge that meant we could secure a good property in the limited window of time we had.

    You need to be familiar with NodeJS to use this. Execute it as a cron job or however you want.. It will store results to a database called db.db

    The code was written by @pitapoison – He is an awesome developer, you should follow him. We literally made this over a cup of tea and a bowl of pasta, it took 15 minutes and saved many hours.

    I think it’s interesting to see the approach we used to solving a housing problem, something that affects everyone yet so few will take the time to create a piece of software that gives them the edge.

    var request = require("request");
    var parser = require("xml2json");
    var db = require("dirty")("db.db");
    var nodemailer = require("nodemailer");
    var transport = nodemailer.createTransport("Sendmail");
    
    db.on('load', function() {
      request('http://www.gumtree.com/rssfeed/single-room-flatshare/shoreditch', function (err, response, body) {
        if(err){
          throw err;
        }
        
        var json = JSON.parse(parser.toJson(body));
        
        var items = json.rss.channel.item;
        
        items.forEach(function(item){
          try {
            var title = item.title;
            var price = /([0-9]+)pw$/.exec(title)[1];
            var content = item["content:encoded"].replace(/\&\#[0-9]+;/g," ");
            var link = item.link;
          
            if(price < 150){
              return;
            }
          
            if(db.get(link) === true){
              return;
            }
            
            db.set(link, true);
          
            var emails = ["person1@example.com", "person2@example.com"];
            
            emails.forEach(function(email){
              var mailOptions = {
                  from: "gumtreebot@example.com",
                  to: email,
                  subject: "GUMTREE: " + title,
                  text: link + "\n\n\n" + content
              }
                        
              transport.sendMail(mailOptions);
            });
          
          } catch(e){
            console.error(e.stack || e);
          }
        });
      });
    });
    
  • When debugging IE stop it using cache

    Date: 2012.03.26 | Category: developer, developing, development | Response: 0

    I often have problems debugging Etherpad Lite in IE mostly due to IE having a hideous way of relentlessly holding onto files in cache.. well today I figured out to stop that problem and it’s super easy.. In Developer tools, Click Cache –> Always refresh from server

    how to debug javascript in IE 550x372 When debugging IE stop it using cache

  • Ajax CSV upload to a Table with jQuery and PHP

    Date: 2012.01.26 | Category: developer, developing, development, jquery, Php | Response: 3

    So I had to write a new user importer for School Email and I was looking for a simple plugin in solution but didn’t find one so here is a simple way of uploading a csv file that is uploaded to a file and rendered to a table..

    Projects used: CsvToTable & jQuery File Upload & Editable Grid *optional for live edits.

    Grab those two projects, grab the below files and put them in a /js folder then put the .js files into your head..

    Put the jQuery-File-Upload folder in your root, we will be uploading files to here.. You may want to add a layer of security in front of the upload function.

    <head>
    <script src="/js/csvToTable.js"></script>
    <script src="/js/jquery.iframe-transport.js"></script>
    <script src="/js/jquery.fileupload.js"></script>
    </head>
    

    At the bottom of your body add..

    <div id="csvToTable"></div>
    <div id="fileupload"></div>
    <script>
    var loggedIn = 1; // you will want to modify this if you require auth
    $(function () {
      if(loggedIn == "1"){
        $('#fileupload').fileupload({
          dataType: 'json',
          acceptFileTypes: '/(csv)$/i',
          url: '/jQuery-File-Upload/php/index.php',
          done: function (e, data, Users) {
            $.each(data.result, function(index, file){
              $('#csvToTable').html("");
              $('#csvToTable').CSVToTable(file.url).bind("loadComplete",function() {
                console.log("Loaded data into table");
                /*
    
                Call functions to manipulate data here
    
                */
              });;
            });
          }
        });
      }
    });
    </script>
    

    Want to make your table editor like the rest of the cool kids? Check out this jQuery plugin