Tuesday 21 March 2017

Spatial Awareness


Touch a village
From the Neolithic Revolution to the Information Age whereby the world is being wrapped in a blanket of sensors IoT Internet of Things. The dilemmas of life remain fragile for a huge portion of the world's population. Natural Disasters, wars, and famine are barometers for the health of our planet, its population, and its citizens. We depend on the planet for life and depend on its inhabitants to care for it and for its citizens. As the population grows so do the issues. How can we effectively manage resources and deployed them to address issues'. No resource is infinite and choices have to be made; human choices are required. Artificial intelligence could be employed to sift and highlight data, decision trees could be build to determine the allocation of resources and subsequent engagement.

One tap saves a family
The creation of integrity checked GeoData is critical to the success of Non-governmental Organisation missions. MSF UK's Mapswipe and HOT's Humanitarian OpenStreetMap Tasking are applications created by two NGO's to enable crowd-sourced satellite image classification. Both applications allow registered users to download satellite imagery and classify artifacts of interest including buildings, roads, and other environmental infrastructure.

Mapswipe was easiest to use and contribute to as it application design is focused for input limited use, and employs swipe input as much as possible as can be seen within the promotion and tutorial video.




The use of gesture swipes and tap combinations are key to the usability of Mapswipe.
Another key element of Mapswipe is the feeling of contribution, as you complete mapping assignments a user's progression is continually updated. The Mapswipe team has included achievements to keep users engaged with the application and continue their contributions. As users feel more rewarded their engagement with the app and continued use will increase.

The costs associated with acquiring each new user should decrease as the number of referrals increase. Interestingly the ability to share from the app with others is in the main menu, it may be interesting to add this as part of the mapping screen where users are expected to spend most of their time.

After about five minutes of using Mapswipe, there was a real sense of achievement, and it's very clear how the next achievements will be unlocked. As you swipe map tiles from right to left the realisation grows as to how important each swipe is. The impact of each swipe and how the gesture of one user can become the receipt of life altering aid. All this is achieved through the power of touch and by being spatially aware micro-humanitarian.

Sunday 19 March 2017

Data Visualisation Open-Source Tool:Webcharts using Excel

Data visualisation can be performed in the browser and as our team are familiar with Microsoft Excel a solution to combine webcharts with Excel was explored. Chart.js is open-source framework and after creating a number of JavaScript samples; it was chosen as the charting framework.

The next challenge is to import Excel Spreadsheets into a JSON or Array Object. The open-source library JS-XLSX was tested, even though reviews highlighted its complexity. After setting up a Node.js server the main issue was to parse JSON in a cross browser compatible way. A Node.js server would store the Excel spreadsheets and run the import code. As the server had to have the ability to run Node.js Heroku was selected; as they provide a free Node.js container for non-commercial projects. Heroku integration with Github enables easy deployment of applications.

A HTML5 boilerplate was downloaded along with Heroku's Node.js Starter Kit. Chart.js was installed using the NPM package manager along with JS-XLSX.

Completed application is located here (as iframes to be included in a DH6010 Blogpost)

https://dh6010.herokuapp.com/iframes/iframes.html

The DH6010 Data Visualisation App is located @ https://bitbucket.org/MuddyGames/dh6010

Import and Webchart JavaScript

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title id="page_title"><title>
        <link rel="stylesheet" href="/stylesheets/graph.css">

  <script type="text/javascript" src="/engine/jquery/scripts/jquery.min.js"></script>
  <script type="text/javascript" src="/engine/chart.js/scripts/Chart.min.js"></script>
  <script type="text/javascript" src="/engine/xlsx/scripts/xlsx.full.min.js"></script>

  <script>
  function get(name){
      if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
        return decodeURIComponent(name[1]);
  }


  function loadSpreadsheet(filename, chart_type, chart_title) {

   // Define Vars
   var request;
   var keys = [];
   var values = [];


   if (window.XMLHttpRequest) {
       request = new XMLHttpRequest();
   } else {
       // code for older browsers
       request = new ActiveXObject("Microsoft.XMLHTTP");
   }
   request.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {
       }
   };

   request.open("GET", "./spreadsheets/" + filename, true);
   request.responseType = "arraybuffer";

   request.onload = function(e) {
    var arraybuffer = request.response;
      var data = new Uint8Array(arraybuffer);
      var arr = new Array();
      for(var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
      var bstr = arr.join("");
      var workbook = XLSX.read(bstr, {type:"binary"});
      var first_sheet_name = workbook.SheetNames[0];
      var worksheet = workbook.Sheets[first_sheet_name];

      var roa = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[first_sheet_name]);

      for (var i = 0; i < roa.length; i++) {
       var row = roa[i];

       if(i == 0){
        $.each(row,function(value, index){ 
           keys.push(value);
          }
        );
       }

       $.each(row,function(value, index){ 
          values.push(row[value]);
         }
       );
      }


       var ctx = document.getElementById("chart");

    var chart = new Chart(ctx, {
     type: chart_type,
     data: {
         labels: keys,
          datasets: [{
             label: chart_title,

             fill: false,
                lineTension: 0.1,
                backgroundColor: border_Color,
                borderColor: border_Color,
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: border_Color,
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: border_Color,
                pointHoverBorderColor: border_Color,
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,

             data: values,
             }]
         },
         options: {
             scales: {
                 yAxes: [{
                     ticks: {
                         beginAtZero:true
                     }
                 }]
             }
         }
     });
   }

   request.send();
  }

  var page_title = get("page_title");
  var filename  = get("filename");
  var chart_type  = get("chart_type");
  var chart_title = get("chart_title");
  var border_Color = get("border_Color");

  window.onpaint = loadSpreadsheet(filename, chart_type, chart_title);

  </script>

 <body>
  <h2 id="chart_title"></h2>

     <div class="container">
         <div class="container">
             <canvas id="chart"></canvas>
         </div>
     </div>

     <script type="text/javascript">
      document.getElementById("chart_title").innerHTML = page_title;
      document.getElementById("page_title").innerHTML = page_title;
     </script>

 </body>


</html>

Tuesday 7 March 2017

Start coding Bots (with simple AI)

If your one of the lucky people heading to Games Fleadh this week your going to run into robocode robot programmers. Decided to take a look at programming a bot that would make some elimentary decisions. To really get a robot to make intellegent robot decision trees would be required and another post on this subject is planned for later.

The first thing to do is setup the Robocode envirnment and Eclipse is recommended as the best way to edit Robocode Robots.

Robocode is event based system so rather than just reacting to events, each event is stored in an event list. The list can be traversed or sorted and actions taken based on the priority of each event. The code has been added to GitHub and comments are very welcome.

Wednesday 25 January 2017

Library Catalogue

As part of a literature review, researchers need to access UCC Library Catalogue on a regular basis. Login can quickly become a repetitive task and therefore a little automation might be useful. The following works with IE, Firefox, Chrome and others. Hope it helps.

Create an HTML web page with the following text;

<!DOCTYPE html>
<html>
<head>
<style>
.inline {
  display: inline;
}

.link-button {
  background: none;
  border: 1pt;
  color: blue;
  text-decoration: underline;
  cursor: pointer;
  font-size: 1em;
  font-family: serif;
}

.link-button:focus {
  outline: none;
  color: red;
}
.link-button:active {
  color:red;
}
</style>
</head>
<body>

<form method="post" action="https://library.ucc.ie/patroninfo" class="inline">
  <input type="hidden" name="name" id="name" value="Joe Bloggs">
  <input type="hidden" name="code" id="code" value="123456789">
  <input type="password" name="pin" id="pin" value="my_pass"><br/>
  <button type="submit" name="submit_param" value="submit_value" class="link-button">
    Login to Research
  </button>
</form>

</body>
</html>

The form input lines highlighted below can be edited to include your login details or just type details in each time to overcome Firefox login problems, if this is your preferred browser.

<input type="hidden" name="name" id="name" value="Joe Bloggs"> Student Name
<input type="hidden" name="code" id="code" value="123456789"> Student Number
<input type="password" name="pin" id="pin" value="my_pass"> Password

When the HTML page is created you get a simple login page that brings you straight to UCC Library Catalogue.


Wednesday 11 January 2017

Evaluation of Sources: Creating a Digital Artefact

As part of the module PG6004 - Getting Started with Graduate Research and Generic Skills, an assignment was set to locate and evaluate research sources. There are various mechanisms to record sources and the relevance of those sources to one's research.  Some of my colleagues opted for spreadsheets or more traditional note taking. This blog post will guide you through a digital solution and some alternatives. A key requirement is to use a document format which could produce necessary marked up text and output documents formatted correctly. This is a very simple goal but one not easily achieved with a standard word processor. LaTeX was selected as its a typesetting system used for scientific publications and can also be used for other publishing too. As part of this assignment, LaTeX was utilised to prepare the evaluation of sources deliverable. In order to evaluate sources, the first challenge was to identify valid search portals, valid sources, record locations and begin the review. This is not an exhaustive list and please add any suggestions within the comments and the blog post will be edited to include new repositories.

Search Portals

  • https://academic.microsoft.com
  • https://scholar.google.com/

Citation Formats

  • Research Information Systems - RIS
    • Supported by EndNote and others
  • XML
  • MAchine-Readable Cataloging - MARC
    •  Supported by Zotero et al

Research Associations and Digital Repositories (Technical)


For this assignment, the search portals above were utilised in conjunction with research databases provided by UCC Library Catalogue. On finding a 'research paper of interest', to read, review and cite the document will, in all probability, be available via the UCC Library Catalogue (which is a portal to numerous repositories)

The next important challenge is reference management. JabRef was chosen as a lightweight reference manager and as it supports BibTeX and can be used with a LaTeX editor. TeXstudio is a LaTeX editor which requires a LaTeX distribution. The LaTeX distribution used in this introduction is MikTeX.

Toolchain installation steps (Quick Guide):
  1. Install reference manager JabRef
  2. Install LaTeX distribution MikTeX
  3. Install LaTeX editor TeXstudio
  4. Create a sample LaTeX document with TeXstudio
  5. Read the guide on LaTeX markup at https://tobi.oetiker.ch/lshort/lshort.pdf
This is a really useful video on getting started with TeXstudio



The source files produced by TeXstudio .tex and JabRef .bib can be stored within a version control system such as Github or BitBucket.

A LaTeX table generator was utilised to create more complex document tables and which were edited with Sublime Text 3.

Thursday 5 January 2017

State of the JavaScript Landscape: A Map for Newcomers

State of the JavaScript Landscape: A Map for Newcomers: Modern JavaScript development is in constant motion. Build tools that were popular 12 or even six months ago are no longer en vogue. In this article, Bonnie Eisenman gives JavaScript newcomers a map to get started on their JavaScript journey. For more experienced JavaScript developers, Bonnie provides an update on where the community is at and what technologies to use for new projects.