added context switcher

diff.xml

@@ -1,193 +1,156 @@
 <?xml version="1.0"?>
 <result>
   <request>
-    <application>decodeapp:zontrax</application>
-    <contextType>6</contextType>
+    <application>decodeapp:rank</application>
+    <contextType>2</contextType>
     <required>
-      <property>go:need</property>
-      <property>decode:birthdate</property>
       <property>go:neighborhood_role</property>
+      <property>decode:first_name</property>
+      <property>go:need</property>
     </required>
     <optional>
-      <property>decode:homepage</property>
-      <property>decode:profession</property>
+      <property>go:proof_of_membership</property>
+      <property>twitter:id</property>
     </optional>
-    <plSum>14</plSum>
+    <plSum>12</plSum>
     <plMean>2</plMean>
   </request>
   <diffs>
     <diff>
-      <contextName>Antwan</contextName>
-      <intersect>
-        <property>go:neighborhood_role</property>
-      </intersect>
+      <contextName>Russel</contextName>
+      <intersect/>
       <except>
+        <property>go:neighborhood_role</property>
+        <property>decode:first_name</property>
         <property>go:need</property>
-        <property>decode:birthdate</property>
-        <property>decode:homepage</property>
-        <property>decode:profession</property>
+        <property>go:proof_of_membership</property>
+        <property>twitter:id</property>
       </except>
     </diff>
     <diff>
-      <contextName>Altenwerth and Sons</contextName>
-      <intersect>
-        <property>go:need</property>
-      </intersect>
+      <contextName>Clarinet</contextName>
+      <intersect/>
       <except>
-        <property>decode:birthdate</property>
         <property>go:neighborhood_role</property>
-        <property>decode:homepage</property>
-        <property>decode:profession</property>
+        <property>decode:first_name</property>
+        <property>go:need</property>
+        <property>go:proof_of_membership</property>
+        <property>twitter:id</property>
       </except>
     </diff>
     <diff>
-      <contextName>Metallica</contextName>
-      <intersect/>
+      <contextName>North Colorado College</contextName>
+      <intersect>
+        <property>go:neighborhood_role</property>
+      </intersect>
       <except>
+        <property>decode:first_name</property>
         <property>go:need</property>
-        <property>decode:birthdate</property>
-        <property>go:neighborhood_role</property>
-        <property>decode:homepage</property>
-        <property>decode:profession</property>
+        <property>go:proof_of_membership</property>
+        <property>twitter:id</property>
       </except>
     </diff>
     <diff>
-      <contextName>Dentist</contextName>
-      <intersect>
-        <property>go:need</property>
-        <property>go:neighborhood_role</property>
-      </intersect>
+      <contextName>Alanna</contextName>
+      <intersect/>
       <except>
-        <property>decode:birthdate</property>
-        <property>decode:homepage</property>
-        <property>decode:profession</property>
+        <property>go:neighborhood_role</property>
+        <property>decode:first_name</property>
+        <property>go:need</property>
+        <property>go:proof_of_membership</property>
+        <property>twitter:id</property>
       </except>
     </diff>
   </diffs>
   <profile>
     <contextObj>
-      <contextName>Antwan</contextName>
+      <contextName>Russel</contextName>
       <contextType>0</contextType>
-      <plSum>12</plSum>
-      <plMean>2</plMean>
+      <plSum>5</plSum>
+      <plMean>5</plMean>
       <properties>
         <property>
-          <type>linkedin:id</type>
-          <value>hattie_runolfon@mosciski.org</value>
-          <pl>2</pl>
-        </property>
-        <property>
-          <type>go:newsletter_approval</type>
-          <value>true</value>
-          <pl>3</pl>
-        </property>
-        <property>
-          <type>decode:postcode</type>
-          <value>72708</value>
+          <type>decode:street</type>
+          <value>317 Dietrich Crescent</value>
           <pl>5</pl>
         </property>
-        <property>
-          <type>go:neighborhood_role</type>
-          <value>scholier</value>
-          <pl>1</pl>
-        </property>
-        <property>
-          <type>twitter:id</type>
-          <value>rosa_roberts</value>
-          <pl>1</pl>
-        </property>
-      </properties>
-    </contextObj>
-    <contextObj>
-      <contextName>Altenwerth and Sons</contextName>
-      <contextType>3</contextType>
-      <plSum>0</plSum>
-      <plMean>0</plMean>
-      <properties>
-        <property>
-          <type>go:need</type>
-          <value>I extended my compression algorithm to support... get this... 12-bit color. Okay, so our users will be able to experience a 10 percent increase in image quality with absolutely no increase in server load whatsoever. Just-Just-Just... Just watch this. Before. After. Before. After.</value>
-          <pl>0</pl>
-        </property>
       </properties>
     </contextObj>
     <contextObj>
-      <contextName>Metallica</contextName>
+      <contextName>Clarinet</contextName>
       <contextType>4</contextType>
-      <plSum>21</plSum>
-      <plMean>3</plMean>
+      <plSum>16</plSum>
+      <plMean>4</plMean>
       <properties>
         <property>
-          <type>facebook:id</type>
-          <value>tyson.kaulke@mcclureschaefer.biz</value>
-          <pl>4</pl>
-        </property>
-        <property>
-          <type>decode:first_name</type>
-          <value>Tianna</value>
+          <type>go:newsletter_approval</type>
+          <value>true</value>
           <pl>3</pl>
         </property>
         <property>
-          <type>go:my_dreams</type>
-          <value>It's a figure of speech, Morty! They're bureaucrats! I don't respect them. Just keep shooting, Morty! You have no idea what prison is like here!</value>
-          <pl>3</pl>
+          <type>decode:postcode</type>
+          <value>59936</value>
+          <pl>5</pl>
         </property>
         <property>
-          <type>go:project_association</type>
-          <value>Cold Duck</value>
-          <pl>2</pl>
+          <type>decode:last_name</type>
+          <value>Veum</value>
+          <pl>3</pl>
         </property>
         <property>
-          <type>decode:avg_yearly_gas_use_m3</type>
-          <value>1159</value>
+          <type>decode:avg_yearly_electricy_use_kwh</type>
+          <value>2702</value>
           <pl>5</pl>
         </property>
-        <property>
-          <type>decode:persons_in_household</type>
-          <value>4</value>
-          <pl>4</pl>
-        </property>
       </properties>
     </contextObj>
     <contextObj>
-      <contextName>Dentist</contextName>
-      <contextType>1</contextType>
-      <plSum>18</plSum>
+      <contextName>North Colorado College</contextName>
+      <contextType>2</contextType>
+      <plSum>16</plSum>
       <plMean>2</plMean>
       <properties>
         <property>
-          <type>decode:first_name</type>
-          <value>Hertha</value>
+          <type>decode:email</type>
+          <value>billie@murphy.biz</value>
           <pl>2</pl>
         </property>
         <property>
-          <type>decode:persons_in_household</type>
-          <value>4</value>
-          <pl>4</pl>
+          <type>decode:last_name</type>
+          <value>Skiles</value>
+          <pl>2</pl>
         </property>
         <property>
-          <type>decode:gender</type>
-          <value>Divorced</value>
+          <type>skype:id</type>
+          <value>fredy</value>
           <pl>3</pl>
         </property>
         <property>
-          <type>decode:profile_picture</type>
-          <value>http://lorempixel.com/300/300</value>
+          <type>go:my_dreams</type>
+          <value>No no, If I wanted to be sober, I wouldn&#x2019;t have gotten drunk.</value>
           <pl>3</pl>
         </property>
         <property>
-          <type>go:need</type>
-          <value>Of course they know that you're not pitching Shazam. That already exists. This would be a Shazam... for food.</value>
-          <pl>1</pl>
+          <type>decode:marital_status</type>
+          <value>Divorced</value>
+          <pl>4</pl>
         </property>
         <property>
           <type>go:neighborhood_role</type>
-          <value>geinteresseerd</value>
-          <pl>1</pl>
+          <value>toekomstige</value>
+          <pl>2</pl>
         </property>
+      </properties>
+    </contextObj>
+    <contextObj>
+      <contextName>Alanna</contextName>
+      <contextType>0</contextType>
+      <plSum>4</plSum>
+      <plMean>4</plMean>
+      <properties>
         <property>
-          <type>decode:street</type>
-          <value>4524 Senger Rue</value>
+          <type>decode:avg_yearly_electricy_use_kwh</type>
+          <value>2199</value>
           <pl>4</pl>
         </property>
       </properties>

entitlements.org

@@ -2269,5 +2269,634 @@ void mouseReleased()
 </script> <canvas id="ob-95c93303456868d70e9bd12946e4defd3dfd1425"></canvas>
 #+END_EXPORT
 
-*** TODO: How does the end user actually accept the request? Is it by dragging the request onto the context?
-*** TODO: How does the end user decline the request?
+We have come up with an interaction for entitlements that is based around a 'context switcher'.
+The color of the section in the center always represents the current context.
+The outer ring is divided into separate 'sectors' for each context that you have defined.
+ 
+Each context has a different color, based on the context type and the data that it holds. 
+For example if you are at work you would (or the application will automatically) 
+set the current context to blue by clicking on the blue sector. 
+
+When a request comes in through decode, it will be positioned in orbit around the context switcher,
+close by the sector of the calculated best fitted context. Based on the category and the data diff.
+
+The user can drag the request around the outer ring to compare the impact it would have,
+ accepting the request for each sector in the context switcher.
+
+After a suitable context is found, the user can let go of the request, and a dialog appears in the center,
+asking the user to either accept or decline the request.
+ 
+#+name: context_switcher_src
+#+BEGIN_SRC java :exports none
+//magic numbers
+float contextSize = 500;//random(50,100); //random between 50 and 100
+float requestSize = 50;
+float eqd_angle = TWO_PI / contexts.length;
+float PROPORTION_CENTER = 0.6;
+float DISTANCE_FACTOR = 1.4;
+
+//globals
+float centerX, centerY;
+float xOffset, yOffset;
+float requestX, requestY;//request coordinates, they can move
+boolean hitRequest = false;
+boolean dragging = false;
+int hitContext = -1;
+int currentContext = 1;//first context is the default context
+PFont font;
+PFont titleFont;
+
+void setup()
+{
+  size(800,800);
+  rectMode(RADIUS);
+  smooth();
+
+  titleFont = createFont("HelveticaNeue", 20);
+  font = createFont("HelveticaNeue", 14);
+
+  centerX = width/2;
+  centerY = height/2;
+
+  //TODO: calculate most relevant sector for the request
+  PVector position = positionForSectorIndex(1);
+  requestX = position.x;
+  requestY = position.y;
+}
+
+//the position should be outside the center of the middle of the sector
+PVector positionForSectorIndex(int index)
+{
+  float angle = (PI/2) + (index * eqd_angle) + (eqd_angle/2);
+  float x = centerX + (contextSize/2 * DISTANCE_FACTOR) * cos(angle); //calculate xPos
+  float y = centerY + (contextSize/2 * DISTANCE_FACTOR) * sin(angle); //calculate yPos
+
+  return new PVector(x,y);
+}
+
+//draw each frame
+void draw()
+{
+  background(255);
+  drawTitle();
+  drawBorder();
+  drawSectors();
+  drawCurrentContext();
+  drawRequest();
+}
+
+//draw the request and label
+void drawRequest()
+{
+  color strokeColor = hitRequest? 255 : 153;
+  stroke(strokeColor);
+
+  color reqColor = getColor(request.plMean, request.contextType);
+  fill(reqColor,127);
+  ellipse(requestX,requestY, requestSize,requestSize);
+ 
+  colorMode(HSB);
+  fill(darken(reqColor));
+  textAlign(CENTER,CENTER);
+  text(request.application, requestX, requestY + 50/1.5);
+  text("" + request.plSum, requestX, requestY);
+  colorMode(RGB);
+}
+
+//draw current context as center circle over the pie
+void drawCurrentContext()
+{
+  Context current = contexts[currentContext];
+  
+  //set up colors for current context
+  color contextColor = getColor(current.plMean, current.contextType);
+  colorMode(HSB);
+  color darkContextColor = darken(contextColor);
+  colorMode(RGB);
+
+  fill(contextColor);
+  noStroke();
+  ellipse(centerX, centerY, contextSize * PROPORTION_CENTER, contextSize * PROPORTION_CENTER);
+
+  //if we have hit a context draw detailed information in the center
+  if(hitContext > -1)
+  {
+    fill(255);
+    noStroke();
+    ellipse(centerX, centerY, contextSize * PROPORTION_CENTER * 0.95, contextSize * PROPORTION_CENTER * 0.95);
+    
+    if(dragging == false)
+    {
+      drawButtons(darkContextColor);
+    }
+    else
+    {
+      drawDiff(current, contextColor);
+    }
+  }
+  else //just draw the current context title
+  {
+    textFont(font);
+    fill(255);
+    noStroke();
+    ellipse(centerX, centerY, contextSize * 0.2, contextSize * 0.2);
+    fill(darkContextColor);
+    textAlign(CENTER,CENTER);
+    text("my \n" + current.title + "\n data", centerX, centerY);
+  }
+}
+
+//darken the given color, expects hsb color mode 
+int darken(int c)
+{
+  float h = hue(c);
+  float s = saturation(c);
+  float v = brightness(c);
+
+  return color(h,s,v * 0.6);
+}
+
+//draw the accept / decline buttons
+void drawButtons(color darkContextColor)
+{
+   //draw accept and decline button
+  fill(darkContextColor);
+  textFont(font);
+  textAlign(CENTER,CENTER);
+  text("ACCEPT    |   DECLINE", centerX, centerY);
+}
+
+//show diff information
+void drawDiff(Context c, color contextColor)
+{
+  ellipse(centerX, centerY, contextSize * PROPORTION_CENTER * 0.95, contextSize * PROPORTION_CENTER * 0.95);
+  colorMode(HSB);
+  fill(darken(contextColor));
+  colorMode(RGB);
+    
+  Diff d = diffs[hitContext];
+  String available = getIntersection(c,d);
+  String missing = getMissing(d);
+  String diffMessage = "DATA TO ENTITLE: \n" + available + "\nSTILL MISSING: \n" + missing;
+  textAlign(CENTER,CENTER);
+  text(diffMessage, centerX, centerY);
+}
+
+//draw Sectors for each context as pie pieces
+void drawSectors()
+{
+  int count = 0;
+  float begin = (PI/2);
+  float end = begin + eqd_angle;
+  for(String context : contexts)
+  { 
+    //color strokeColor = (hitContext == count) ? 255 : 153;
+    noStroke();
+
+    color contextColor = getColor(context.plMean, context.contextType);
+    fill(contextColor);
+
+    arc(centerX, centerY, contextSize, contextSize, begin, end);
+    begin = end;
+    end = begin + eqd_angle;
+    count++;
+  }
+}
+
+//draw outer rim
+void drawBorder()
+{
+  stroke(0);
+  fill(255);
+  ellipse(centerX, centerY, contextSize + 10, contextSize + 10);
+}
+
+//draw title
+void drawTitle()
+{
+  textFont(titleFont);
+  fill(150);
+  textAlign(CENTER);
+  text("Do you want to get *****d by Facebook?\nPlease drag the request on to your preferred context." , centerX, 80);
+}
+
+/* interaction functions */
+void mousePressed()
+{
+  //test if request hit
+  boolean hitRequest = (mouseX > requestX - requestSize/2 && mouseX < requestX + requestSize/2 &&
+     mouseY > requestY - requestSize/2 && mouseY < requestY + requestSize/2);
+  
+  //update global
+  dragging = hitRequest;
+  
+  //test if context hit
+  float deltaX = mouseX - centerX;
+  float deltaY = mouseY - centerY;
+  int index = hitContextIndex(deltaX,deltaY);
+  
+  if(index > -1)
+  {
+    currentContext = index;
+  }
+}
+
+void mouseDragged()
+{
+  float deltaX = mouseX - centerX;
+  float deltaY = mouseY - centerY;
+  
+  float distance = sqrt(deltaX*deltaX + deltaY*deltaY);
+  float fraction = distance / (contextSize / 2);
+  float minDistanceFactor = (PROPORTION_CENTER + (1-PROPORTION_CENTER)/2);
+  
+  //outside the circle is allowed anywhere
+  if(fraction > minDistanceFactor  && dragging)
+  {
+      requestX = mouseX - xOffset;
+      requestY = mouseY - yOffset;
+      hitContext = hitContextIndex(deltaX,deltaY);
+      if(hitContext > -1){currentContext = hitContext;}
+  }
+  else if(dragging) //else calculate closest point that is allowed
+  {
+      float mouseAngle = (PI/2) - atan2(deltaX, deltaY);
+      float x = centerX + (contextSize/2 * minDistanceFactor) * cos(mouseAngle); //calculate xPos
+      float y = centerY + (contextSize/2 * minDistanceFactor) * sin(mouseAngle); //calculate yPos
+      requestX = x;
+      requestY = y;
+      hitContext = hitContextIndex(x - centerX, y - centerY);
+      currentContext = hitContext;
+  }
+}
+
+void mouseReleased()
+{
+  dragging = false;
+  //hitContext = -1;
+  //PVector position = positionForSectorIndex(1);
+  //requestX = position.x;
+  //requestY = position.y;
+} 
+
+//calculate which pie part was clicked, 
+//by means of the angle between the mouse point an the center of the circle
+//returns -1 if no pie part was clicked 
+//(because the distance is not between 0.8 and 1 times the distanceSize)
+int hitContextIndex(float deltaX, float deltaY)
+{ 
+  float distance = sqrt(deltaX*deltaX + deltaY*deltaY);
+  float fraction = distance / (contextSize / 2);
+  if(fraction < PROPORTION_CENTER || fraction > 1)
+  {
+    return -1;
+  }
+  
+  //overstaande, aanliggende => tan dus atan2
+  float mouseAngle = atan2(deltaX, deltaY);
+  float degrees = mouseAngle * 180 / PI;
+  if(degrees < 0){degrees = 360 + degrees;} //so everyting is on one continuum
+  float part = eqd_angle * 180 /PI;
+  int index = (contexts.length - ((int) (degrees / part))) - 1;//because we start at the bottom.
+  return index;
+}
+
+/* data functions */
+
+//create a string that lists the values of the intersection in d, with the values in c
+String getIntersection(Context c, Diff d)
+{
+    String result = "";
+    for(String key : d.intersect)
+    {
+        String value = getPropertyValue(c, key);
+        if(value != null) result += key + " (" + value + ")\n";
+    }
+    return result;
+}
+
+//create a string that lists the missing keys in the intersection d
+String getMissing(Diff d)
+{
+    String result = "";
+    for(String key : d.except)
+    {
+        result += key + "\n";
+    }
+    return result;
+}
+
+//get the value of a property value in c designated by key
+String getPropertyValue(Context c, String key)
+{
+    for(Property p : c.properties)
+    {
+        if(p.type == key)
+        {
+            return p.value;
+        }
+    }
+    return null;
+}
+
+#+END_SRC
+
+*** TODO font sizes
+*** TODO cut off long values with ...
+*** TODO correctly place request
+*** TODO change number of generated contexts to multiple sectors and place same category next to eachother.
+
+#+name: context_switcher
+#+BEGIN_SRC processing :noweb yes
+<<pcolors>>
+<<glue>>
+<<context_switcher_src>>
+#+END_SRC
+
+#+RESULTS: context_switcher
+#+BEGIN_EXPORT html
+<script src="processing.js"></script>
+ <script type="text/processing" data-processing-target="ob-b08b9ab6dca87cd6f3682e15abf24f929a90a794">
+String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
+String[] contextTypes = {"personal", "health", "education", "work", "hobby", "financial", "other"};
+
+static class PrivacyLevel {
+  public static int SECRET = 5;
+  public static int PRIVATE = 4;
+  public static int INTIMATE = 3;
+  public static int AFFILIATE = 2;
+  public static int PUBLIC = 1;
+  public static int COMMONS = 0;
+}
+
+static class ContextType {
+  public static int PERSONAL = 0; 
+  public static int HEALTH = 1;
+  public static int EDUCATION = 2;
+  public static int WORK = 3;
+  public static int HOBBY = 4;
+  public static int FINANCIAL = 5;
+  public static int OTHER = 6;
+}
+
+int[][] colors = generateColors();
+
+//generate colors to maximize contrast
+int[][] generateColors()
+{
+  int[][] pcolors = new int[contextTypes.length][levels.length];
+  
+//we start with d0 as a seed color
+  color seed = #FFE9BE;//seed color
+  
+  colorMode(HSB);
+  
+  float h_seed = hue(seed);
+  float s_seed = saturation(seed);
+  float v_seed = brightness(seed);
+
+  float levelshift = 255/levels.length;
+  float contextshift = 255/contextTypes.length + 1;
+  
+  //cycle hue for each level
+  for (int i = 0; i < contextTypes.length; i++){
+    float h = h_seed + i * contextshift;
+    if(h > 255){h = h - 255;}
+    
+    //cycle brightness for each context
+    for(int j = 0; j < levels.length; j++)
+    {
+      float v = v_seed - (j * levelshift);
+      float s = s_seed + (j * levelshift); 
+      
+      color c = color(h,s,v);
+      pcolors[i][j] = c;
+    }
+  }
+  colorMode(RGB);
+
+  return pcolors;
+}
+
+public int getColor(int privacy_level, int context_type)
+{
+    return colors[context_type][privacy_level];
+}
+class Request
+{
+  public String application;
+  public int contextType;
+  public String[] required_properties;
+  public String[] optional_properties;
+  public int plSum;
+  public int plMean;
+
+  public Request(String app, int contextType, String[] req, String[] opt, int sum, int mean)
+  {
+    this.application = app;
+    this.contextType = contextType;
+    this.required_properties = req;
+    this.optional_properties = opt;
+    this.plSum = sum;
+    this.plMean = mean;
+  }
+}
+
+class Diff
+{
+  public String context;
+  public String[] intersect;
+  public String[] except;
+
+  public Diff(String ctx, String[] intersect, String[] except)
+  {
+    this.context = ctx;
+    this.intersect = intersect;
+    this.except = except;
+  } 
+}
+
+class Property
+{
+  public String type;
+  public String value;
+  public int pl;//privacy level
+
+  public Property(String type, String value, int pl)
+  {
+    this.type = type;
+    this.value = value;
+    this.pl = pl;
+  }
+}
+
+class Context
+{
+  public String title;
+  public int plSum;
+  public int plMean;
+  public int contextType;
+  public Property[] properties;
+
+  public Context(String title, int plSum, int plMean, int contextType, Property[] properties)
+  {
+    this.title = title;
+    this.plSum = plSum;
+    this.plMean = plMean;
+    this.properties = properties;
+    this.contextType = contextType;
+  }
+}
+
+XMLElement doc = new XMLElement(this, 'diff.xml');
+
+//create typed versions because this is java :-(
+Request parseRequest(XMLElement xml)
+{
+  XMLElement req = xml.getChild(0);
+  String name = req.getChild(0).getContent();
+  int contextType = req.getChild(1).getContent();
+  String[] required = new String[req.getChild(2).getChildCount()];
+  String[] optional = new String[req.getChild(3).getChildCount()];
+  int plSum = parseInt(req.getChild(4).getContent());
+  int plMean = parseInt(req.getChild(5).getContent());
+
+  for (int i = 0; i < required.length; i++) {
+    required[i] = req.getChild(2).getChild(i).getContent();
+  }
+
+  for (int i = 0; i < optional.length; i++) {
+    optional[i] = req.getChild(3).getChild(i).getContent();
+  }
+
+  Request r = new Request(name,contextType,required,optional, plSum, plMean);
+  return r;
+}
+
+Context[] parseProfile(XMLElement xml)
+{
+  XMLElement profile = xml.getChild(2);
+  Context[] contexts = new Context[profile.getChildCount()];
+
+  for(int i = 0; i < contexts.length; i++)
+  {
+    String contextName = profile.getChild(i).getChild(0).getContent();
+    int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
+    int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
+    int plMean = parseInt(profile.getChild(i).getChild(3).getContent());
+    XMLElement propertiesEl = profile.getChild(i).getChild(4);
+    Property[] properties = new Property[propertiesEl.getChildCount()];
+    for(int j = 0; j < properties.length; j++)
+    {
+      Property prop = parseProperty(propertiesEl.getChild(j));
+      properties[j] = prop;
+    }
+
+    Context context = new Context(contextName, plSum, plMean, contextType, properties);
+    contexts[i] = context;
+  }
+  return contexts;
+}
+
+Property parseProperty(XMLElement propertyEl)
+{
+  String propertyType = propertyEl.getChild(0).getContent();
+  String value = propertyEl.getChild(1).getContent();
+  int pl = parseInt(propertyEl.getChild(2).getContent());
+  return new Property(propertyType, value, pl);
+}
+
+//create typed versions because this is java :-(
+Diff[] parseDiffs(xml)
+{
+  XMLElement diffsEl = xml.getChild(1);
+  Diff[] diffs = new Diff[diffsEl.getChildCount()];
+  for(int i = 0; i < diffs.length; i++)
+  {
+    String contextName = diffsEl.getChild(i).getChild(0).getContent();
+    String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
+    String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
+    
+    for(int j = 0; j < intersects.length; j++)
+    {
+      intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
+    }
+
+    for(int j = 0; j < except.length; j++)
+    {
+      except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
+    }
+
+    Diff diff = new Diff(contextName,intersects,except);
+    diffs[i] = diff;
+  }
+  return diffs;
+}
+
+Request request = parseRequest(doc);
+Diff[] diffs = parseDiffs(doc);
+Context[] contexts = parseProfile(doc);
+
+//magic numbers
+float contextSize = 500;//random(50,100); //random between 50 and 100
+float requestSize = 50;
+float eqd_angle = TWO_PI / contexts.length;
+float PROPORTION_CENTER = 0.6;
+float DISTANCE_FACTOR = 1.4;
+
+//globals
+float centerX, centerY;
+float xOffset, yOffset;
+float requestX, requestY;//request coordinates, they can move
+boolean hitRequest = false;
+boolean dragging = false;
+int hitContext = -1;
+int currentContext = 1;//first context is the default context
+PFont font;
+PFont titleFont;
+
+void setup()
+{
+  size(800,800);
+  rectMode(RADIUS);
+  smooth();
+  
+  titleFont = createFont("HelveticaNeue", 20);
+  font = createFont("HelveticaNeue", 14);
+  
+  centerX = width/2;
+  centerY = height/2;
+  
+  //TODO: calculate most relevant sector for the request
+  PVector position = positionForSectorIndex(1);
+  requestX = position.x;
+  requestY = position.y;
+}
+
+//the position should be outside the center of the middle of the sector
+PVector positionForSectorIndex(int index)
+{
+  float angle = (PI/2) + (index * eqd_angle) + (eqd_angle/2);
+  float x = centerX + (contextSize/2 * DISTANCE_FACTOR) * cos(angle); //calculate xPos
+  float y = centerY + (contextSize/2 * DISTANCE_FACTOR) * sin(angle); //calculate yPos
+  
+  return new PVector(x,y);
+}
+
+void draw()
+{
+  background(255);
+  drawTitle();
+}
+
+void drawTitle()
+{
+  //title
+  textFont(titleFont);
+  fill(150);
+  textAlign(CENTER);
+  text("Do you want to get *****d by Facebook?\nPlease drag the request on to your preferred context." , centerX, 80);
+}
+</script> <canvas id="ob-b08b9ab6dca87cd6f3682e15abf24f929a90a794"></canvas>
+#+END_EXPORT
+