Muddy Games: Digital Arts and Humanities PhD Candidate: March 2017

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

<!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.