Browse Source

diff interaction

Taco 1 year ago
parent
commit
1c3c996183
2 changed files with 1314 additions and 63 deletions
  1. 699 58
      entitlements.html
  2. 615 5
      entitlements.org

+ 699 - 58
entitlements.html

@@ -3,7 +3,7 @@
3 3
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 4
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
5 5
 <head>
6
-<!-- 2018-04-06 Fri 17:22 -->
6
+<!-- 2018-04-10 Tue 16:47 -->
7 7
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
8 8
 <meta name="viewport" content="width=device-width, initial-scale=1" />
9 9
 <title>&lrm;</title>
@@ -180,7 +180,6 @@
180 180
   .org-svg { width: 90%; }
181 181
   /*]]>*/-->
182 182
 </style>
183
-<link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-light.min.css" />
184 183
 <script type="text/javascript">
185 184
 /*
186 185
 @licstart  The following is the entire license notice for the
@@ -234,45 +233,45 @@ for the JavaScript code in this tag.
234 233
 <h2>Table of Contents</h2>
235 234
 <div id="text-table-of-contents">
236 235
 <ul>
237
-<li><a href="#orgf028445">1. Introduction</a></li>
238
-<li><a href="#orgcad91ad">2. Data Model</a>
236
+<li><a href="#org83bb610">1. Introduction</a></li>
237
+<li><a href="#org8c11c03">2. Data Model</a>
239 238
 <ul>
240
-<li><a href="#org63ebda6">2.1. Example wallet profile</a>
239
+<li><a href="#org44dc597">2.1. Example wallet profile</a>
241 240
 <ul>
242
-<li><a href="#org6c6b85a">2.1.1. Things to further investigate</a></li>
241
+<li><a href="#org617bd22">2.1.1. Things to further investigate</a></li>
243 242
 </ul>
244 243
 </li>
245
-<li><a href="#org0aa5864">2.2. Example request</a>
244
+<li><a href="#orgda05e27">2.2. Example request</a>
246 245
 <ul>
247
-<li><a href="#org6aefbaa">2.2.1. Things to further investigate</a></li>
246
+<li><a href="#orgce8ccac">2.2.1. Things to further investigate</a></li>
248 247
 </ul>
249 248
 </li>
250 249
 </ul>
251 250
 </li>
252
-<li><a href="#org6ccc64f">3. Data Comparison</a>
251
+<li><a href="#org15a1811">3. Data Comparison</a>
253 252
 <ul>
254 253
 <li>
255 254
 <ul>
256
-<li><a href="#org7fbac77">3.0.1. Things to further investigate</a></li>
255
+<li><a href="#orgd1e0da1">3.0.1. Things to further investigate</a></li>
257 256
 </ul>
258 257
 </li>
259 258
 </ul>
260 259
 </li>
261
-<li><a href="#org065a5b0">4. Visualization</a>
260
+<li><a href="#org4d0f5f5">4. Visualization</a>
262 261
 <ul>
263
-<li><a href="#orge8089d8">4.1. Request</a></li>
264
-<li><a href="#org48ef283">4.2. Contexts</a>
262
+<li><a href="#orgcc3201f">4.1. Request</a></li>
263
+<li><a href="#orgb020a5b">4.2. Contexts</a>
265 264
 <ul>
266
-<li><a href="#org7551d85">4.2.1. Things to further investigate</a></li>
265
+<li><a href="#org240a507">4.2.1. Things to further investigate</a></li>
267 266
 </ul>
268 267
 </li>
269 268
 </ul>
270 269
 </li>
271
-<li><a href="#orge46c738">5. Interaction</a>
270
+<li><a href="#org0f0994b">5. Interaction</a>
272 271
 <ul>
273 272
 <li>
274 273
 <ul>
275
-<li><a href="#orgff14b8e">5.0.1. Things to further investigate</a></li>
274
+<li><a href="#org8875081">5.0.1. Things to further investigate</a></li>
276 275
 </ul>
277 276
 </li>
278 277
 </ul>
@@ -280,8 +279,8 @@ for the JavaScript code in this tag.
280 279
 </ul>
281 280
 </div>
282 281
 </div>
283
-<div id="outline-container-orgf028445" class="outline-2">
284
-<h2 id="orgf028445"><span class="section-number-2">1</span> Introduction</h2>
282
+<div id="outline-container-org83bb610" class="outline-2">
283
+<h2 id="org83bb610"><span class="section-number-2">1</span> Introduction</h2>
285 284
 <div class="outline-text-2" id="text-1">
286 285
 <p>
287 286
 The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
@@ -315,12 +314,12 @@ A preliminary definition of context types
315 314
 </div>
316 315
 </div>
317 316
 
318
-<div id="outline-container-orgcad91ad" class="outline-2">
319
-<h2 id="orgcad91ad"><span class="section-number-2">2</span> Data Model</h2>
317
+<div id="outline-container-org8c11c03" class="outline-2">
318
+<h2 id="org8c11c03"><span class="section-number-2">2</span> Data Model</h2>
320 319
 <div class="outline-text-2" id="text-2">
321 320
 </div>
322
-<div id="outline-container-org63ebda6" class="outline-3">
323
-<h3 id="org63ebda6"><span class="section-number-3">2.1</span> Example wallet profile</h3>
321
+<div id="outline-container-org44dc597" class="outline-3">
322
+<h3 id="org44dc597"><span class="section-number-3">2.1</span> Example wallet profile</h3>
324 323
 <div class="outline-text-3" id="text-2-1">
325 324
 <p>
326 325
 This sample wallet profile datastructure consists of multiple contexts.
@@ -339,7 +338,7 @@ It overrides the default privacy level specified by the property type.
339 338
 </p>
340 339
 
341 340
 <div class="org-src-container">
342
-<pre class="src src-js" id="orgf704401"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
341
+<pre class="src src-js" id="org89e5ad7"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
343 342
     contexts : 
344 343
     <span style="color: #bc6ec5;">[</span>
345 344
         <span style="color: #2d9574;">{</span>
@@ -416,8 +415,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
416 415
 </div>
417 416
 </div>
418 417
 
419
-<div id="outline-container-org6c6b85a" class="outline-4">
420
-<h4 id="org6c6b85a"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
418
+<div id="outline-container-org617bd22" class="outline-4">
419
+<h4 id="org617bd22"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
421 420
 <div class="outline-text-4" id="text-2-1-1">
422 421
 <ul class="org-ul">
423 422
 <li>Apply default weights to each property type, these can be overridden by attributing a privacy level to the property</li>
@@ -429,8 +428,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
429 428
 </div>
430 429
 </div>
431 430
 
432
-<div id="outline-container-org0aa5864" class="outline-3">
433
-<h3 id="org0aa5864"><span class="section-number-3">2.2</span> Example request</h3>
431
+<div id="outline-container-orgda05e27" class="outline-3">
432
+<h3 id="orgda05e27"><span class="section-number-3">2.2</span> Example request</h3>
434 433
 <div class="outline-text-3" id="text-2-2">
435 434
 <p>
436 435
 This sample application request consists of an application name, a set of required property types and a set of optional property types.
@@ -440,7 +439,7 @@ and the cumulative privacy weight by adding the privacy levels of each property
440 439
 </p>
441 440
 
442 441
 <div class="org-src-container">
443
-<pre class="src src-js" id="orgfe0255c"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
442
+<pre class="src src-js" id="org6385e5f"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
444 443
     application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
445 444
     context_type : <span style="color: #a45bad;">5</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">personal</span>
446 445
     required : <span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"decode:name"</span>, <span style="color: #2d9574;">"decode:email"</span>, <span style="color: #2d9574;">"decode:address"</span><span style="color: #bc6ec5;">]</span>,
@@ -452,21 +451,20 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
452 451
 </div>
453 452
 </div>
454 453
 
455
-<div id="outline-container-org6aefbaa" class="outline-4">
456
-<h4 id="org6aefbaa"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
454
+<div id="outline-container-orgce8ccac" class="outline-4">
455
+<h4 id="orgce8ccac"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
457 456
 <div class="outline-text-4" id="text-2-2-1">
458 457
 <ul class="org-ul">
459 458
 <li>Create a generator that seeds a request with random required and optional property types</li>
460
-<li>Attribute a default context type to the application</li>
459
+<li>Calculate the weight of the request</li>
461 460
 </ul>
462 461
 </div>
463 462
 </div>
464 463
 </div>
465 464
 </div>
466 465
 
467
-
468
-<div id="outline-container-org6ccc64f" class="outline-2">
469
-<h2 id="org6ccc64f"><span class="section-number-2">3</span> Data Comparison</h2>
466
+<div id="outline-container-org15a1811" class="outline-2">
467
+<h2 id="org15a1811"><span class="section-number-2">3</span> Data Comparison</h2>
470 468
 <div class="outline-text-2" id="text-3">
471 469
 <p>
472 470
 During the interaction we want to give the user insight into a couple of things;
@@ -482,7 +480,7 @@ In below ruby code a comparison is made by on creating the intersection and its
482 480
 </p>
483 481
 
484 482
 <div class="org-src-container">
485
-<pre class="src src-ruby" id="org1288a0e"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
483
+<pre class="src src-ruby" id="org0f4510f"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
486 484
   <span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'nokogiri'</span> <span style="color: #2aa1ae; background-color: #292e34;">#</span><span style="color: #2aa1ae; background-color: #292e34;">for creating xml</span>
487 485
 
488 486
   request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
@@ -503,8 +501,8 @@ In below ruby code a comparison is made by on creating the intersection and its
503 501
 </div>
504 502
 </div>
505 503
 
506
-<div id="outline-container-org7fbac77" class="outline-4">
507
-<h4 id="org7fbac77"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
504
+<div id="outline-container-orgd1e0da1" class="outline-4">
505
+<h4 id="orgd1e0da1"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
508 506
 <div class="outline-text-4" id="text-3-0-1">
509 507
 <ul class="org-ul">
510 508
 <li>Calculate the weight (sum of privacy levels of the properties it contains) of each context before and after giving permission</li>
@@ -523,8 +521,8 @@ request is size 3
523 521
 </div>
524 522
 </div>
525 523
 
526
-<div id="outline-container-org065a5b0" class="outline-2">
527
-<h2 id="org065a5b0"><span class="section-number-2">4</span> Visualization</h2>
524
+<div id="outline-container-org4d0f5f5" class="outline-2">
525
+<h2 id="org4d0f5f5"><span class="section-number-2">4</span> Visualization</h2>
528 526
 <div class="outline-text-2" id="text-4">
529 527
 <p>
530 528
 We want to visualize the following things;
@@ -543,7 +541,7 @@ Different tones within the hue can be mapped to each privacy level.
543 541
 </p>
544 542
 
545 543
 <div class="org-src-container">
546
-<pre class="src src-java" id="orgd2c28f5"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
544
+<pre class="src src-java" id="org40bdc54"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
547 545
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a3</span> = #<span style="color: #a45bad;">3A3B58</span>;
548 546
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b3</span> = #<span style="color: #a45bad;">734246</span>;
549 547
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d3</span> = #B4561F;
@@ -628,7 +626,7 @@ Below snippet exemplifies a color for the SELF context with a privacy level SECR
628 626
 </p>
629 627
 
630 628
 <div class="org-src-container">
631
-<pre class="src src-java" id="org5a20965"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
629
+<pre class="src src-java" id="org46780dd"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
632 630
   size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
633 631
   background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
634 632
   noStroke<span style="color: #bc6ec5;">()</span>;
@@ -733,7 +731,7 @@ void draw(){
733 731
 </script> <canvas id="ob-493b0e9920a023276fc640f0a2b7a91f2af5a827"></canvas>
734 732
 
735 733
 <div class="org-src-container">
736
-<pre class="src src-java" id="org3010b58"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
734
+<pre class="src src-java" id="orgf6afc6b"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
737 735
   size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
738 736
   background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
739 737
   noStroke<span style="color: #bc6ec5;">()</span>;
@@ -842,7 +840,7 @@ This table shows all colors for each context / privacy level combination.
842 840
 Find out does this make sense?
843 841
 </p>
844 842
 <script src="processing.js"></script>
845
- <script type="text/processing" data-processing-target="ob-3265860db5d715da2187d13bc5ac96386a2d517a">
843
+ <script type="text/processing" data-processing-target="ob-58d472c29ceb0133107f5e516348e8a7cb30af81">
846 844
 //color definitions
847 845
 color a3 = #3A3B58;
848 846
 color b3 = #734246;
@@ -942,7 +940,7 @@ void draw()
942 940
   {
943 941
       text(contexts[j], 20, (j+2) * row_height);
944 942
   }
945
-
943
+  
946 944
   //draw colors
947 945
   for(int i = 0; i < levels.length; i++)
948 946
   {
@@ -959,14 +957,14 @@ void draw()
959 957
   }
960 958
  
961 959
 }
962
-</script> <canvas id="ob-3265860db5d715da2187d13bc5ac96386a2d517a"></canvas>
960
+</script> <canvas id="ob-58d472c29ceb0133107f5e516348e8a7cb30af81"></canvas>
963 961
 </div>
964 962
 
965
-<div id="outline-container-orge8089d8" class="outline-3">
966
-<h3 id="orge8089d8"><span class="section-number-3">4.1</span> Request</h3>
963
+<div id="outline-container-orgcc3201f" class="outline-3">
964
+<h3 id="orgcc3201f"><span class="section-number-3">4.1</span> Request</h3>
967 965
 <div class="outline-text-3" id="text-4-1">
968 966
 <div class="org-src-container">
969
-<pre class="src src-java" id="org6682efe">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
967
+<pre class="src src-java" id="org6654b2b">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
970 968
 <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">background(0);</span>
971 969
 noFill<span style="color: #4f97d7;">()</span>;
972 970
 
@@ -1234,8 +1232,8 @@ text(request.application, centerX, centerY + rsize/1.5);
1234 1232
 </div>
1235 1233
 </div>
1236 1234
 
1237
-<div id="outline-container-org48ef283" class="outline-3">
1238
-<h3 id="org48ef283"><span class="section-number-3">4.2</span> Contexts</h3>
1235
+<div id="outline-container-orgb020a5b" class="outline-3">
1236
+<h3 id="orgb020a5b"><span class="section-number-3">4.2</span> Contexts</h3>
1239 1237
 <div class="outline-text-3" id="text-4-2">
1240 1238
 <p>
1241 1239
 We want to draw each context in relation to the request, 
@@ -1243,7 +1241,7 @@ so we place each context equidistant from the request in the center.
1243 1241
 </p>
1244 1242
 
1245 1243
 <div class="org-src-container">
1246
-<pre class="src src-java" id="orgc2de2ec"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">setup</span><span style="color: #4f97d7;">(){</span>
1244
+<pre class="src src-java" id="orgc9801f0"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">setup</span><span style="color: #4f97d7;">(){</span>
1247 1245
   size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">800</span>,<span style="color: #a45bad;">800</span><span style="color: #bc6ec5;">)</span>;
1248 1246
   smooth<span style="color: #bc6ec5;">()</span>;
1249 1247
   noLoop<span style="color: #bc6ec5;">()</span>;
@@ -1574,8 +1572,8 @@ void draw()
1574 1572
 </script> <canvas id="ob-229253fd493ee5516fed8b7699685319f5c7f734"></canvas>
1575 1573
 </div>
1576 1574
 
1577
-<div id="outline-container-org7551d85" class="outline-4">
1578
-<h4 id="org7551d85"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
1575
+<div id="outline-container-org240a507" class="outline-4">
1576
+<h4 id="org240a507"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
1579 1577
 <div class="outline-text-4" id="text-4-2-1">
1580 1578
 <ul class="org-ul">
1581 1579
 <li>How do we show relation between request and each context with color?</li>
@@ -1587,16 +1585,659 @@ void draw()
1587 1585
 </div>
1588 1586
 </div>
1589 1587
 
1590
-<div id="outline-container-orge46c738" class="outline-2">
1591
-<h2 id="orge46c738"><span class="section-number-2">5</span> Interaction</h2>
1588
+<div id="outline-container-org0f0994b" class="outline-2">
1589
+<h2 id="org0f0994b"><span class="section-number-2">5</span> Interaction</h2>
1592 1590
 <div class="outline-text-2" id="text-5">
1593 1591
 <p>
1594 1592
 We intend to investigate this in Processing as well.
1595 1593
 </p>
1594
+
1595
+<div class="org-src-container">
1596
+<pre class="src src-java" id="orgee03cfb"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">divide the circle by the amount of contexts </span>
1597
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">to get the angle between the lines that indicate the center of each context</span>
1598
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">eqd_angle</span> = TWO_PI / contexts.length;
1599
+
1600
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw request circle in the center of the screen</span>
1601
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerX</span>, <span style="color: #7590db;">centerY</span>;
1602
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">xOffset</span>, <span style="color: #7590db;">yOffset</span>;
1603
+
1604
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">requestSize</span> = <span style="color: #a45bad;">50</span>;
1605
+
1606
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">context parameters</span>
1607
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">contextDistance</span> = <span style="color: #a45bad;">200</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(100,300);//random between 50 and 300</span>
1608
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">contextSize</span> = <span style="color: #a45bad;">100</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(50,100); //random between 50 and 100</span>
1609
+
1610
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">requestX</span>, <span style="color: #7590db;">requestY</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">request coordinates, they can move</span>
1611
+
1612
+<span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">hitRequest</span> = <span style="color: #a45bad;">false</span>;
1613
+<span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">dragging</span> = <span style="color: #a45bad;">false</span>;
1614
+<span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">hitContext</span> = -<span style="color: #a45bad;">1</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">-1 if no context is hit, otherwise indicates the index of the hit context</span>
1615
+
1616
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">setup</span><span style="color: #4f97d7;">(){</span>
1617
+  size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">800</span>,<span style="color: #a45bad;">800</span><span style="color: #bc6ec5;">)</span>;
1618
+  smooth<span style="color: #bc6ec5;">()</span>;
1619
+
1620
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">initialize screen when it is appropriate, </span>
1621
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">before this it will display the wrong size</span>
1622
+  centerX = width/<span style="color: #a45bad;">2</span>;
1623
+  centerY = height/<span style="color: #a45bad;">2</span>;
1624
+
1625
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">request starts in the middle</span>
1626
+  requestX = centerX;
1627
+  requestY = centerY;
1628
+<span style="color: #4f97d7;">}</span>
1629
+
1630
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the request and label</span>
1631
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawRequest</span><span style="color: #4f97d7;">()</span>
1632
+<span style="color: #4f97d7;">{</span>
1633
+  <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">strokeColor</span> = hitRequest? <span style="color: #a45bad;">255</span> : <span style="color: #a45bad;">153</span>;
1634
+  stroke<span style="color: #bc6ec5;">(</span>strokeColor<span style="color: #bc6ec5;">)</span>;
1635
+
1636
+  <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">reqColor</span> = getColor<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, request.contextType<span style="color: #bc6ec5;">)</span>;
1637
+  fill<span style="color: #bc6ec5;">(</span>reqColor<span style="color: #bc6ec5;">)</span>;
1638
+  ellipse<span style="color: #bc6ec5;">(</span>requestX,requestY, requestSize,requestSize<span style="color: #bc6ec5;">)</span>;
1639
+  fill<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
1640
+  textAlign<span style="color: #bc6ec5;">(</span>CENTER,CENTER<span style="color: #bc6ec5;">)</span>;
1641
+  text<span style="color: #bc6ec5;">(</span>request.application, requestX, requestY + <span style="color: #a45bad;">50</span>/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #bc6ec5;">)</span>;
1642
+
1643
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #cc9393;">TODO</span><span style="color: #2aa1ae; background-color: #292e34;">: show weight of request</span>
1644
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">text("" + weights[0], requestX, requestY);</span>
1645
+<span style="color: #4f97d7;">}</span>
1646
+
1647
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">darken the given color, expects hsb color mode </span>
1648
+<span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #bc6ec5; font-weight: bold;">darken</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">c</span><span style="color: #4f97d7;">)</span>
1649
+<span style="color: #4f97d7;">{</span>
1650
+  <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">h</span> = hue<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
1651
+  <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">s</span> = saturation<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
1652
+  <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">v</span> = brightness<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
1653
+
1654
+  <span style="color: #4f97d7; font-weight: bold;">return</span> color<span style="color: #bc6ec5;">(</span>h,s,v * <span style="color: #a45bad;">0</span>.<span style="color: #a45bad;">6</span><span style="color: #bc6ec5;">)</span>;
1655
+<span style="color: #4f97d7;">}</span>
1656
+
1657
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawContexts</span><span style="color: #4f97d7;">()</span>
1658
+<span style="color: #4f97d7;">{</span>
1659
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the contexts equidistant around the center where the request is</span>
1660
+  <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">count</span> = <span style="color: #a45bad;">0</span>;
1661
+  <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">context</span> : contexts<span style="color: #bc6ec5;">)</span>
1662
+  <span style="color: #bc6ec5;">{</span>
1663
+    <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">angle</span> = <span style="color: #2d9574;">(</span>count * eqd_angle<span style="color: #2d9574;">)</span> - <span style="color: #2d9574;">(</span>PI/<span style="color: #a45bad;">2</span><span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">start drawing at the top</span>
1664
+    <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">x</span> = centerX + contextDistance * cos<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate xPos</span>
1665
+    <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">y</span> = centerY + contextDistance * sin<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate yPos</span>
1666
+
1667
+    <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">strokeColor</span> = <span style="color: #2d9574;">(</span>hitContext == count<span style="color: #2d9574;">)</span> ? <span style="color: #a45bad;">255</span> : <span style="color: #a45bad;">153</span>;
1668
+    stroke<span style="color: #2d9574;">(</span>strokeColor<span style="color: #2d9574;">)</span>;
1669
+
1670
+    <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">contextColor</span> = getColor<span style="color: #2d9574;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, context.contextType<span style="color: #2d9574;">)</span>;
1671
+    fill<span style="color: #2d9574;">(</span>contextColor<span style="color: #2d9574;">)</span>;
1672
+    ellipse<span style="color: #2d9574;">(</span>x, y, contextSize,contextSize<span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">fixed sizes and distances for now.</span>
1673
+
1674
+    <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show label</span>
1675
+    fill<span style="color: #2d9574;">(</span><span style="color: #a45bad;">0</span><span style="color: #2d9574;">)</span>;
1676
+    textAlign<span style="color: #2d9574;">(</span>CENTER,CENTER<span style="color: #2d9574;">)</span>;
1677
+    text<span style="color: #2d9574;">(</span>context.title, x, y + contextSize/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #2d9574;">)</span>;
1678
+
1679
+    colorMode<span style="color: #2d9574;">(</span>HSB<span style="color: #2d9574;">)</span>;
1680
+    fill<span style="color: #2d9574;">(</span>darken<span style="color: #67b11d;">(</span>contextColor<span style="color: #67b11d;">)</span><span style="color: #2d9574;">)</span>;
1681
+    text<span style="color: #2d9574;">(</span><span style="color: #2d9574;">""</span> + context.plSum, x, y<span style="color: #2d9574;">)</span>; 
1682
+    colorMode<span style="color: #2d9574;">(</span>RGB<span style="color: #2d9574;">)</span>;
1683
+    count++;
1684
+  <span style="color: #bc6ec5;">}</span>
1685
+<span style="color: #4f97d7;">}</span>
1686
+
1687
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">create a string that lists the values of the intersection in d, with the values in c</span>
1688
+<span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getIntersection</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span>, <span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span><span style="color: #4f97d7;">)</span>
1689
+<span style="color: #4f97d7;">{</span>
1690
+    <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">result</span> = <span style="color: #2d9574;">""</span>;
1691
+    <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span> : d.intersect<span style="color: #bc6ec5;">)</span>
1692
+    <span style="color: #bc6ec5;">{</span>
1693
+        <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">value</span> = getPropertyValue<span style="color: #2d9574;">(</span>c, key<span style="color: #2d9574;">)</span>;
1694
+        <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #2d9574;">(</span>value != <span style="color: #a45bad;">null</span><span style="color: #2d9574;">)</span> result += key + <span style="color: #2d9574;">" ("</span> + value + <span style="color: #2d9574;">")\n"</span>;
1695
+    <span style="color: #bc6ec5;">}</span>
1696
+    <span style="color: #4f97d7; font-weight: bold;">return</span> result;
1697
+<span style="color: #4f97d7;">}</span>
1698
+
1699
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">create a string that lists the missing keys in the intersection d</span>
1700
+<span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getMissing</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span><span style="color: #4f97d7;">)</span>
1701
+<span style="color: #4f97d7;">{</span>
1702
+    <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">result</span> = <span style="color: #2d9574;">""</span>;
1703
+    <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span> : d.except<span style="color: #bc6ec5;">)</span>
1704
+    <span style="color: #bc6ec5;">{</span>
1705
+        result += key + <span style="color: #2d9574;">"\n"</span>;
1706
+    <span style="color: #bc6ec5;">}</span>
1707
+    <span style="color: #4f97d7; font-weight: bold;">return</span> result;
1708
+<span style="color: #4f97d7;">}</span>
1709
+
1710
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">get the value of a property value in c designated by key</span>
1711
+<span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getPropertyValue</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span>, <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span><span style="color: #4f97d7;">)</span>
1712
+<span style="color: #4f97d7;">{</span>
1713
+    <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">Property</span> <span style="color: #7590db;">p</span> : c.properties<span style="color: #bc6ec5;">)</span>
1714
+    <span style="color: #bc6ec5;">{</span>
1715
+        <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #2d9574;">(</span>p.type == key<span style="color: #2d9574;">)</span>
1716
+        <span style="color: #2d9574;">{</span>
1717
+            <span style="color: #4f97d7; font-weight: bold;">return</span> p.value;
1718
+        <span style="color: #2d9574;">}</span>
1719
+    <span style="color: #bc6ec5;">}</span>
1720
+    <span style="color: #4f97d7; font-weight: bold;">return</span> <span style="color: #a45bad;">null</span>;
1721
+<span style="color: #4f97d7;">}</span>
1722
+
1723
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show label</span>
1724
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawDiff</span><span style="color: #4f97d7;">()</span>
1725
+<span style="color: #4f97d7;">{</span>
1726
+    <span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span> = contexts<span style="color: #bc6ec5;">[</span>hitContext<span style="color: #bc6ec5;">]</span>;
1727
+    <span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span> = diffs<span style="color: #bc6ec5;">[</span>hitContext<span style="color: #bc6ec5;">]</span>;
1728
+
1729
+    <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">available</span> = getIntersection<span style="color: #bc6ec5;">(</span>c,d<span style="color: #bc6ec5;">)</span>;
1730
+    <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">missing</span> = getMissing<span style="color: #bc6ec5;">(</span>d<span style="color: #bc6ec5;">)</span>;
1731
+    <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">diffMessage</span> = <span style="color: #2d9574;">"RELEASE TO ENTITLE: \n"</span> + available + <span style="color: #2d9574;">"\nSTILL MISSING: \n"</span> + missing;
1732
+    fill<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
1733
+    textAlign<span style="color: #bc6ec5;">(</span>CENTER,CENTER<span style="color: #bc6ec5;">)</span>;
1734
+    text<span style="color: #bc6ec5;">(</span>diffMessage, centerX, centerY<span style="color: #bc6ec5;">)</span>;
1735
+<span style="color: #4f97d7;">}</span>
1736
+
1737
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">()</span>
1738
+<span style="color: #4f97d7;">{</span>
1739
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">clear bg</span>
1740
+  background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">200</span><span style="color: #bc6ec5;">)</span>;
1741
+
1742
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw hitbox</span>
1743
+  <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">originX</span> = requestX - requestSize/<span style="color: #a45bad;">2</span>;
1744
+  <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">originY</span> = requestY - requestSize/<span style="color: #a45bad;">2</span>;
1745
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">rect(originX,originY, requestSize, requestSize);</span>
1746
+
1747
+    <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">test if cursor is over the hitbox</span>
1748
+  hitRequest = <span style="color: #bc6ec5;">(</span>mouseX &gt; originX &amp;&amp; mouseX &lt; <span style="color: #2d9574;">(</span>originX + requestSize<span style="color: #2d9574;">)</span> &amp;&amp;
1749
+                mouseY &gt; originY &amp;&amp; mouseY &lt; <span style="color: #2d9574;">(</span>originY + requestSize<span style="color: #2d9574;">)</span><span style="color: #bc6ec5;">)</span>;
1750
+
1751
+  drawContexts<span style="color: #bc6ec5;">()</span>;
1752
+  drawRequest<span style="color: #bc6ec5;">()</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">on top</span>
1753
+
1754
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">String debug_info = "mx: " + mouseX + ", my: " + mouseY + ", ox: " + originX + ", oy: " + originY;</span>
1755
+  <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">text(debug_info, mouseX, mouseY);</span>
1756
+
1757
+  <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #bc6ec5;">(</span>hitContext &gt; -<span style="color: #a45bad;">1</span><span style="color: #bc6ec5;">)</span>
1758
+  <span style="color: #bc6ec5;">{</span>
1759
+    <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show diff information</span>
1760
+    drawDiff<span style="color: #2d9574;">()</span>;
1761
+  <span style="color: #bc6ec5;">}</span>
1762
+<span style="color: #4f97d7;">}</span>
1763
+
1764
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mousePressed</span><span style="color: #4f97d7;">()</span> <span style="color: #4f97d7;">{</span>
1765
+    dragging = hitRequest;
1766
+    xOffset = mouseX - requestX; 
1767
+    yOffset = mouseY - requestY; 
1768
+<span style="color: #4f97d7;">}</span>
1769
+
1770
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mouseDragged</span><span style="color: #4f97d7;">()</span>
1771
+<span style="color: #4f97d7;">{</span>
1772
+  <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #bc6ec5;">(</span>dragging<span style="color: #bc6ec5;">)</span>
1773
+  <span style="color: #bc6ec5;">{</span>
1774
+    requestX = mouseX - xOffset;
1775
+    requestY = mouseY - yOffset;
1776
+
1777
+    <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextWasHit</span> = -<span style="color: #a45bad;">1</span>;
1778
+
1779
+    <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #2d9574;">(</span><span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">i</span> = <span style="color: #a45bad;">0</span>; i &lt; contexts.<span style="color: #ce537a; font-weight: bold;">length</span>; i++<span style="color: #2d9574;">)</span>
1780
+    <span style="color: #2d9574;">{</span>
1781
+      <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">angle</span> = <span style="color: #67b11d;">(</span>i * eqd_angle<span style="color: #67b11d;">)</span> - <span style="color: #67b11d;">(</span>PI/<span style="color: #a45bad;">2</span><span style="color: #67b11d;">)</span>;
1782
+      <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">x</span> = centerX + contextDistance * cos<span style="color: #67b11d;">(</span>angle<span style="color: #67b11d;">)</span>;
1783
+      <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">y</span> = centerY + contextDistance * sin<span style="color: #67b11d;">(</span>angle<span style="color: #67b11d;">)</span>;
1784
+
1785
+      <span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">hit</span> = <span style="color: #67b11d;">(</span>mouseX &gt; x - contextSize/<span style="color: #a45bad;">2</span> &amp;&amp; mouseX &lt; <span style="color: #ce537a; font-weight: bold;">x</span> + contextSize/<span style="color: #a45bad;">2</span> 
1786
+                              &amp;&amp; mouseY &gt; y - contextSize/<span style="color: #a45bad;">2</span> &amp;&amp; mouseY &lt; <span style="color: #ce537a; font-weight: bold;">y</span> + contextSize/<span style="color: #a45bad;">2</span><span style="color: #67b11d;">)</span>;
1787
+
1788
+      <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #67b11d;">(</span>hit<span style="color: #67b11d;">)</span> contextWasHit = i;
1789
+    <span style="color: #2d9574;">}</span>
1790
+
1791
+    hitContext = contextWasHit;
1792
+  <span style="color: #bc6ec5;">}</span>
1793
+<span style="color: #4f97d7;">}</span>
1794
+
1795
+<span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mouseReleased</span><span style="color: #4f97d7;">()</span>
1796
+<span style="color: #4f97d7;">{</span>
1797
+  dragging = <span style="color: #a45bad;">false</span>;
1798
+  hitContext = -<span style="color: #a45bad;">1</span>;
1799
+  requestX = centerX;
1800
+  requestY = centerY;
1801
+<span style="color: #4f97d7;">}</span>
1802
+</pre>
1803
+</div>
1804
+
1805
+<script src="processing.js"></script>
1806
+ <script type="text/processing" data-processing-target="ob-013d1595486cf6d0070d352a941e7fecc8038933">
1807
+//color definitions
1808
+color a3 = #3A3B58;
1809
+color b3 = #734246;
1810
+color d3 = #B4561F;
1811
+color c3 = #336F60;
1812
+color f3 = #7A3E2A;
1813
+color g3 = #A48137;
1814
+color e2 = #97BBCB;
1815
+color a4 = #3B4257;
1816
+color b4 = #6A4345;
1817
+color d4 = #86451F;
1818
+color c4 = #345A48;
1819
+color f4 = #A92F21;
1820
+color g4 = #BC983B;
1821
+color a5 = #3D4358;
1822
+color b5 = #402623;
1823
+color d5 = #85442D;
1824
+color c5 = #3B403A;
1825
+color f5 = #7A150B;
1826
+color g5 = #252F2B;
1827
+color a1 = #597099;
1828
+color e4 = #0A3878;
1829
+color b1 = #D16365;
1830
+color d1 = #FFD43B;
1831
+color c1 = #B7BF98;
1832
+color e1 = #CAD2C8;
1833
+color e0 = #F5EDE5;
1834
+color f1 = #D17978;
1835
+color g1 = #FDD23E;
1836
+color a0 = #C5C3CC;
1837
+color e3 = #0485B1;
1838
+color b0 = #FFDCD6;
1839
+color d0 = #FFE9BE;
1840
+color c0 = #F0E9D5;
1841
+color f0 = #E4C8BF;
1842
+color g0 = #FBE6BA;
1843
+color a2 = #3D4B79;
1844
+color e5 = #084064;
1845
+color b2 = #974244;
1846
+color d2 = #F8AA08;
1847
+color c2 = #4E937F;
1848
+color f2 = #8F4330;
1849
+color g2 = #FFDB03;
1850
+
1851
+color colors[][] = {
1852
+  {b0,b1,b2,b3,b4,b5},
1853
+  {c0,c1,c2,c3,c4,c5},
1854
+  {a0,a1,a2,a3,a4,a5},
1855
+  {d0,d1,d2,d3,d4,d5},
1856
+  {e0,e1,e2,e3,e4,e5},
1857
+  {f0,f1,f2,f3,f4,f5},
1858
+  {g0,g1,g2,g3,g4,g5}
1859
+};
1860
+
1861
+class PrivacyLevel {
1862
+  public static int SECRET = 5;
1863
+  public static int PRIVATE = 4;
1864
+  public static int INTIMATE = 3;
1865
+  public static int AFFILIATE = 2;
1866
+  public static int PUBLIC = 1;
1867
+  public static int COMMONS = 0;
1868
+}
1869
+
1870
+class ContextType {
1871
+  public static int FINANCIAL = 6;
1872
+  public static int PERSONAL = 5; 
1873
+  public static int HEALTH = 4;
1874
+  public static int EDUCATION = 3;
1875
+  public static int WORK = 2;
1876
+  public static int HOBBY = 1;
1877
+  public static int OTHER = 0;
1878
+}
1879
+
1880
+public int getColor(int privacy_level, int context_type)
1881
+{
1882
+  return colors[context_type][privacy_level];
1883
+}
1884
+class Request
1885
+{
1886
+  public String application;
1887
+  public int contextType;
1888
+  public String[] required_properties;
1889
+  public String[] optional_properties;
1890
+
1891
+  public Request(String app, int contextType, String[] req, String[] opt)
1892
+  {
1893
+    this.application = app;
1894
+    this.contextType = contextType;
1895
+    this.required_properties = req;
1896
+    this.optional_properties = opt;
1897
+  }
1898
+}
1899
+
1900
+class Diff
1901
+{
1902
+  public String context;
1903
+  public String[] intersect;
1904
+  public String[] except;
1905
+
1906
+  public Diff(String ctx, String[] intersect, String[] except)
1907
+  {
1908
+    this.context = ctx;
1909
+    this.intersect = intersect;
1910
+    this.except = except;
1911
+  } 
1912
+}
1913
+
1914
+class Property
1915
+{
1916
+  public String type;
1917
+  public String value;
1918
+  public int pl;//privacy level
1919
+
1920
+  public Property(String type, String value, int pl)
1921
+  {
1922
+    this.type = type;
1923
+    this.value = value;
1924
+    this.pl = pl;
1925
+  }
1926
+}
1927
+
1928
+class Context
1929
+{
1930
+  public String title;
1931
+  public int plSum;
1932
+  public int contextType;
1933
+  public Property[] properties;
1934
+
1935
+  public Context(String title, int plSum, int contextType, Property[] properties)
1936
+  {
1937
+    this.title = title;
1938
+    this.plSum = plSum;
1939
+    this.properties = properties;
1940
+    this.contextType = contextType;
1941
+  }
1942
+}
1943
+
1944
+XMLElement doc = new XMLElement(this, 'diff.xml');
1945
+
1946
+//create typed versions because this is java :-(
1947
+Request parseRequest(XMLElement xml)
1948
+{
1949
+  XMLElement req = xml.getChild(0);
1950
+  String name = req.getChild(0).getContent();
1951
+  int contextType = req.getChild(1).getContent();
1952
+  String[] required = new String[req.getChild(2).getChildCount()];
1953
+  String[] optional = new String[req.getChild(3).getChildCount()];
1954
+  
1955
+  for (int i = 0; i < required.length; i++) {
1956
+    required[i] = req.getChild(2).getChild(i).getContent();
1957
+  }
1958
+
1959
+  for (int i = 0; i < optional.length; i++) {
1960
+    optional[i] = req.getChild(3).getChild(i).getContent();
1961
+  }
1962
+
1963
+  Request r = new Request(name,contextType,required,optional);
1964
+  return r;
1965
+}
1966
+
1967
+Context[] parseProfile(XMLElement xml)
1968
+{
1969
+  XMLElement profile = xml.getChild(2);
1970
+  Context[] contexts = new Context[profile.getChildCount()];
1971
+
1972
+  for(int i = 0; i < contexts.length; i++)
1973
+  {
1974
+    String contextName = profile.getChild(i).getChild(0).getContent();
1975
+    int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
1976
+    int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
1977
+
1978
+    XMLElement propertiesEl = profile.getChild(i).getChild(3);
1979
+    Property[] properties = new Property[propertiesEl.getChildCount()];
1980
+    for(int j = 0; j < properties.length; j++)
1981
+    {
1982
+      Property prop = parseProperty(propertiesEl.getChild(j));
1983
+      properties[j] = prop;
1984
+    }
1985
+
1986
+    Context context = new Context(contextName, plSum, contextType, properties);
1987
+    contexts[i] = context;
1988
+  }
1989
+  return contexts;
1990
+}
1991
+
1992
+Property parseProperty(XMLElement propertyEl)
1993
+{
1994
+  String propertyType = propertyEl.getChild(0).getContent();
1995
+  String value = propertyEl.getChild(1).getContent();
1996
+  int pl = parseInt(propertyEl.getChild(2).getContent());
1997
+  return new Property(propertyType, value, pl);
1998
+}
1999
+
2000
+//create typed versions because this is java :-(
2001
+Diff[] parseDiffs(xml)
2002
+{
2003
+  XMLElement diffsEl = xml.getChild(1);
2004
+  Diff[] diffs = new Diff[diffsEl.getChildCount()];
2005
+  for(int i = 0; i < diffs.length; i++)
2006
+  {
2007
+    String contextName = diffsEl.getChild(i).getChild(0).getContent();
2008
+    String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
2009
+    String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
2010
+    
2011
+    for(int j = 0; j < intersects.length; j++)
2012
+    {
2013
+      intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
2014
+    }
2015
+
2016
+    for(int j = 0; j < except.length; j++)
2017
+    {
2018
+      except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
2019
+    }
2020
+
2021
+    Diff diff = new Diff(contextName,intersects,except);
2022
+    diffs[i] = diff;
2023
+  }
2024
+  return diffs;
2025
+}
2026
+
2027
+Request request = parseRequest(doc);
2028
+Diff[] diffs = parseDiffs(doc);
2029
+Context[] contexts = parseProfile(doc);
2030
+//divide the circle by the amount of contexts 
2031
+//to get the angle between the lines that indicate the center of each context
2032
+float eqd_angle = TWO_PI / contexts.length;
2033
+
2034
+//draw request circle in the center of the screen
2035
+float centerX, centerY;
2036
+float xOffset, yOffset;
2037
+
2038
+float requestSize = 50;
2039
+
2040
+//context parameters
2041
+float contextDistance = 200;//random(100,300);//random between 50 and 300
2042
+float contextSize = 100;//random(50,100); //random between 50 and 100
2043
+
2044
+float requestX, requestY;//request coordinates, they can move
2045
+
2046
+boolean hitRequest = false;
2047
+boolean dragging = false;
2048
+int hitContext = -1;//-1 if no context is hit, otherwise indicates the index of the hit context
2049
+
2050
+void setup(){
2051
+  size(800,800);
2052
+  smooth();
2053
+
2054
+  //initialize screen when it is appropriate, 
2055
+  //before this it will display the wrong size
2056
+  centerX = width/2;
2057
+  centerY = height/2;
2058
+
2059
+  //request starts in the middle
2060
+  requestX = centerX;
2061
+  requestY = centerY;
2062
+}
2063
+
2064
+//draw the request and label
2065
+void drawRequest()
2066
+{
2067
+  color strokeColor = hitRequest? 255 : 153;
2068
+  stroke(strokeColor);
2069
+
2070
+  color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
2071
+  fill(reqColor);
2072
+  ellipse(requestX,requestY, requestSize,requestSize);
2073
+  fill(0);
2074
+  textAlign(CENTER,CENTER);
2075
+  text(request.application, requestX, requestY + 50/1.5);
2076
+
2077
+  //TODO: show weight of request
2078
+  //text("" + weights[0], requestX, requestY);
2079
+}
2080
+
2081
+//darken the given color, expects hsb color mode 
2082
+int darken(int c)
2083
+{
2084
+  float h = hue(c);
2085
+  float s = saturation(c);
2086
+  float v = brightness(c);
2087
+
2088
+  return color(h,s,v * 0.6);
2089
+}
2090
+
2091
+void drawContexts()
2092
+{
2093
+  //draw the contexts equidistant around the center where the request is
2094
+  int count = 0;
2095
+  for(String context : contexts)
2096
+  {
2097
+    float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
2098
+    float x = centerX + contextDistance * cos(angle); //calculate xPos
2099
+    float y = centerY + contextDistance * sin(angle); //calculate yPos
2100
+
2101
+    color strokeColor = (hitContext == count) ? 255 : 153;
2102
+    stroke(strokeColor);
2103
+
2104
+    color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
2105
+    fill(contextColor);
2106
+    ellipse(x, y, contextSize,contextSize);//fixed sizes and distances for now.
2107
+
2108
+    //show label
2109
+    fill(0);
2110
+    textAlign(CENTER,CENTER);
2111
+    text(context.title, x, y + contextSize/1.5);
2112
+
2113
+    colorMode(HSB);
2114
+    fill(darken(contextColor));
2115
+    text("" + context.plSum, x, y); 
2116
+    colorMode(RGB);
2117
+    count++;
2118
+  }
2119
+}
2120
+
2121
+//create a string that lists the values of the intersection in d, with the values in c
2122
+String getIntersection(Context c, Diff d)
2123
+{
2124
+    String result = "";
2125
+    for(String key : d.intersect)
2126
+    {
2127
+        String value = getPropertyValue(c, key);
2128
+        if(value != null) result += key + " (" + value + ")\n";
2129
+    }
2130
+    return result;
2131
+}
2132
+
2133
+//create a string that lists the missing keys in the intersection d
2134
+String getMissing(Diff d)
2135
+{
2136
+    String result = "";
2137
+    for(String key : d.except)
2138
+    {
2139
+        result += key + "\n";
2140
+    }
2141
+    return result;
2142
+}
2143
+
2144
+//get the value of a property value in c designated by key
2145
+String getPropertyValue(Context c, String key)
2146
+{
2147
+    for(Property p : c.properties)
2148
+    {
2149
+        if(p.type == key)
2150
+        {
2151
+            return p.value;
2152
+        }
2153
+    }
2154
+    return null;
2155
+}
2156
+
2157
+//show label
2158
+void drawDiff()
2159
+{
2160
+    Context c = contexts[hitContext];
2161
+    Diff d = diffs[hitContext];
2162
+
2163
+    String available = getIntersection(c,d);
2164
+    String missing = getMissing(d);
2165
+    String diffMessage = "RELEASE TO ENTITLE: \n" + available + "\nSTILL MISSING: \n" + missing;
2166
+    fill(0);
2167
+    textAlign(CENTER,CENTER);
2168
+    text(diffMessage, centerX, centerY);
2169
+}
2170
+
2171
+void draw()
2172
+{
2173
+  //clear bg
2174
+  background(200);
2175
+
2176
+  //draw hitbox
2177
+  float originX = requestX - requestSize/2;
2178
+  float originY = requestY - requestSize/2;
2179
+  //rect(originX,originY, requestSize, requestSize);
2180
+
2181
+    //test if cursor is over the hitbox
2182
+  hitRequest = (mouseX > originX && mouseX < (originX + requestSize) &&
2183
+                mouseY > originY && mouseY < (originY + requestSize));
2184
+
2185
+  drawContexts();
2186
+  drawRequest();//on top
2187
+
2188
+  //String debug_info = "mx: " + mouseX + ", my: " + mouseY + ", ox: " + originX + ", oy: " + originY;
2189
+  //text(debug_info, mouseX, mouseY);
2190
+
2191
+  if(hitContext > -1)
2192
+  {
2193
+    //show diff information
2194
+    drawDiff();
2195
+  }
2196
+}
2197
+
2198
+void mousePressed() {
2199
+    dragging = hitRequest;
2200
+    xOffset = mouseX - requestX; 
2201
+    yOffset = mouseY - requestY; 
2202
+}
2203
+
2204
+void mouseDragged()
2205
+{
2206
+  if(dragging)
2207
+  {
2208
+    requestX = mouseX - xOffset;
2209
+    requestY = mouseY - yOffset;
2210
+
2211
+    int contextWasHit = -1;
2212
+
2213
+    for(int i = 0; i < contexts.length; i++)
2214
+    {
2215
+      float angle = (i * eqd_angle) - (PI/2);
2216
+      float x = centerX + contextDistance * cos(angle);
2217
+      float y = centerY + contextDistance * sin(angle);
2218
+
2219
+      boolean hit = (mouseX > x - contextSize/2 && mouseX < x + contextSize/2 
2220
+                              && mouseY > y - contextSize/2 && mouseY < y + contextSize/2);
2221
+
2222
+      if(hit) contextWasHit = i;
2223
+    }
2224
+
2225
+    hitContext = contextWasHit;
2226
+  }
2227
+}
2228
+
2229
+void mouseReleased()
2230
+{
2231
+  dragging = false;
2232
+  hitContext = -1;
2233
+  requestX = centerX;
2234
+  requestY = centerY;
2235
+}
2236
+</script> <canvas id="ob-013d1595486cf6d0070d352a941e7fecc8038933"></canvas>
1596 2237
 </div>
1597 2238
 
1598
-<div id="outline-container-orgff14b8e" class="outline-4">
1599
-<h4 id="orgff14b8e"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
2239
+<div id="outline-container-org8875081" class="outline-4">
2240
+<h4 id="org8875081"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
1600 2241
 <div class="outline-text-4" id="text-5-0-1">
1601 2242
 <ul class="org-ul">
1602 2243
 <li>How does the end user actually accept the request? Is it by dragging the request onto the context?</li>
@@ -1608,7 +2249,7 @@ We intend to investigate this in Processing as well.
1608 2249
 </div>
1609 2250
 <div id="postamble" class="status">
1610 2251
 <p class="author">Author: Taco</p>
1611
-<p class="date">Created: 2018-04-06 Fri 17:22</p>
2252
+<p class="date">Created: 2018-04-10 Tue 16:47</p>
1612 2253
 <p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
1613 2254
 </div>
1614 2255
 </body>

+ 615 - 5
entitlements.org

@@ -1,4 +1,3 @@
1
-#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-light.min.css" />
2 1
 * Introduction
3 2
 The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
4 3
 More specifically the focus is on investigating how the user of a decode wallet grants permission to decode application for a specific set of personal data.
@@ -143,9 +142,8 @@ and the cumulative privacy weight by adding the privacy levels of each property
143 142
 
144 143
 *** Things to further investigate
145 144
     - Create a generator that seeds a request with random required and optional property types
146
-    - Attribute a default context type to the application  
145
+    - Calculate the weight of the request
147 146
 
148
-      
149 147
 * Data Comparison
150 148
 During the interaction we want to give the user insight into a couple of things;
151 149
 - How does the requested set of properties relate to the different contexts? How well does a context match to the request?
@@ -170,7 +168,7 @@ In below ruby code a comparison is made by on creating the intersection and its
170 168
       intersect = available & requested
171 169
       except = requested - available
172 170
       diff = {:context => context["title"], :intersect => intersect, :except => except}
173
-
171
+      
174 172
       context_diffs << diff
175 173
     end
176 174
 #+END_SRC
@@ -598,7 +596,7 @@ void draw()
598 596
   {
599 597
       text(contexts[j], 20, (j+2) * row_height);
600 598
   }
601
-
599
+  
602 600
   //draw colors
603 601
   for(int i = 0; i < levels.length; i++)
604 602
   {
@@ -1345,6 +1343,618 @@ text(diffs[0].context, 10, 10);
1345 1343
 * Interaction
1346 1344
 We intend to investigate this in Processing as well.
1347 1345
 
1346
+#+name: diff_interaction_src
1347
+#+BEGIN_SRC java
1348
+  //divide the circle by the amount of contexts 
1349
+  //to get the angle between the lines that indicate the center of each context
1350
+  float eqd_angle = TWO_PI / contexts.length;
1351
+
1352
+  //draw request circle in the center of the screen
1353
+  float centerX, centerY;
1354
+  float xOffset, yOffset;
1355
+
1356
+  float requestSize = 50;
1357
+
1358
+  //context parameters
1359
+  float contextDistance = 200;//random(100,300);//random between 50 and 300
1360
+  float contextSize = 100;//random(50,100); //random between 50 and 100
1361
+
1362
+  float requestX, requestY;//request coordinates, they can move
1363
+
1364
+  boolean hitRequest = false;
1365
+  boolean dragging = false;
1366
+  int hitContext = -1;//-1 if no context is hit, otherwise indicates the index of the hit context
1367
+
1368
+  void setup(){
1369
+    size(800,800);
1370
+    smooth();
1371
+
1372
+    //initialize screen when it is appropriate, 
1373
+    //before this it will display the wrong size
1374
+    centerX = width/2;
1375
+    centerY = height/2;
1376
+  
1377
+    //request starts in the middle
1378
+    requestX = centerX;
1379
+    requestY = centerY;
1380
+  }
1381
+
1382
+  //draw the request and label
1383
+  void drawRequest()
1384
+  {
1385
+    color strokeColor = hitRequest? 255 : 153;
1386
+    stroke(strokeColor);
1387
+
1388
+    color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
1389
+    fill(reqColor);
1390
+    ellipse(requestX,requestY, requestSize,requestSize);
1391
+    fill(0);
1392
+    textAlign(CENTER,CENTER);
1393
+    text(request.application, requestX, requestY + 50/1.5);
1394
+
1395
+    //TODO: show weight of request
1396
+    //text("" + weights[0], requestX, requestY);
1397
+  }
1398
+
1399
+  //darken the given color, expects hsb color mode 
1400
+  int darken(int c)
1401
+  {
1402
+    float h = hue(c);
1403
+    float s = saturation(c);
1404
+    float v = brightness(c);
1405
+  
1406
+    return color(h,s,v * 0.6);
1407
+  }
1408
+
1409
+  void drawContexts()
1410
+  {
1411
+    //draw the contexts equidistant around the center where the request is
1412
+    int count = 0;
1413
+    for(String context : contexts)
1414
+    {
1415
+      float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
1416
+      float x = centerX + contextDistance * cos(angle); //calculate xPos
1417
+      float y = centerY + contextDistance * sin(angle); //calculate yPos
1418
+    
1419
+      color strokeColor = (hitContext == count) ? 255 : 153;
1420
+      stroke(strokeColor);
1421
+
1422
+      color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
1423
+      fill(contextColor);
1424
+      ellipse(x, y, contextSize,contextSize);//fixed sizes and distances for now.
1425
+    
1426
+      //show label
1427
+      fill(0);
1428
+      textAlign(CENTER,CENTER);
1429
+      text(context.title, x, y + contextSize/1.5);
1430
+    
1431
+      colorMode(HSB);
1432
+      fill(darken(contextColor));
1433
+      text("" + context.plSum, x, y); 
1434
+      colorMode(RGB);
1435
+      count++;
1436
+    }
1437
+  }
1438
+
1439
+  //create a string that lists the values of the intersection in d, with the values in c
1440
+  String getIntersection(Context c, Diff d)
1441
+  {
1442
+      String result = "";
1443
+      for(String key : d.intersect)
1444
+      {
1445
+          String value = getPropertyValue(c, key);
1446
+          if(value != null) result += key + " (" + value + ")\n";
1447
+      }
1448
+      return result;
1449
+  }
1450
+
1451
+  //create a string that lists the missing keys in the intersection d
1452
+  String getMissing(Diff d)
1453
+  {
1454
+      String result = "";
1455
+      for(String key : d.except)
1456
+      {
1457
+          result += key + "\n";
1458
+      }
1459
+      return result;
1460
+  }
1461
+
1462
+  //get the value of a property value in c designated by key
1463
+  String getPropertyValue(Context c, String key)
1464
+  {
1465
+      for(Property p : c.properties)
1466
+      {
1467
+          if(p.type == key)
1468
+          {
1469
+              return p.value;
1470
+          }
1471
+      }
1472
+      return null;
1473
+  }
1474
+
1475
+  //show label
1476
+  void drawDiff()
1477
+  {
1478
+      Context c = contexts[hitContext];
1479
+      Diff d = diffs[hitContext];
1480
+
1481
+      String available = getIntersection(c,d);
1482
+      String missing = getMissing(d);
1483
+      String diffMessage = "RELEASE TO ENTITLE: \n" + available + "\nSTILL MISSING: \n" + missing;
1484
+      fill(0);
1485
+      textAlign(CENTER,CENTER);
1486
+      text(diffMessage, centerX, centerY);
1487
+  }
1488
+
1489
+  void draw()
1490
+  {
1491
+    //clear bg
1492
+    background(200);
1493
+
1494
+    //draw hitbox
1495
+    float originX = requestX - requestSize/2;
1496
+    float originY = requestY - requestSize/2;
1497
+    //rect(originX,originY, requestSize, requestSize);
1498
+
1499
+      //test if cursor is over the hitbox
1500
+    hitRequest = (mouseX > originX && mouseX < (originX + requestSize) &&
1501
+                  mouseY > originY && mouseY < (originY + requestSize));
1502
+  
1503
+    drawContexts();
1504
+    drawRequest();//on top
1505
+
1506
+    //String debug_info = "mx: " + mouseX + ", my: " + mouseY + ", ox: " + originX + ", oy: " + originY;
1507
+    //text(debug_info, mouseX, mouseY);
1508
+
1509
+    if(hitContext > -1)
1510
+    {
1511
+      //show diff information
1512
+      drawDiff();
1513
+    }
1514
+  }
1515
+  
1516
+  void mousePressed() {
1517
+      dragging = hitRequest;
1518
+      xOffset = mouseX - requestX; 
1519
+      yOffset = mouseY - requestY; 
1520
+  }
1521
+
1522
+  void mouseDragged()
1523
+  {
1524
+    if(dragging)
1525
+    {
1526
+      requestX = mouseX - xOffset;
1527
+      requestY = mouseY - yOffset;
1528
+    
1529
+      int contextWasHit = -1;
1530
+    
1531
+      for(int i = 0; i < contexts.length; i++)
1532
+      {
1533
+        float angle = (i * eqd_angle) - (PI/2);
1534
+        float x = centerX + contextDistance * cos(angle);
1535
+        float y = centerY + contextDistance * sin(angle);
1536
+      
1537
+        boolean hit = (mouseX > x - contextSize/2 && mouseX < x + contextSize/2 
1538
+                                && mouseY > y - contextSize/2 && mouseY < y + contextSize/2);
1539
+      
1540
+        if(hit) contextWasHit = i;
1541
+      }
1542
+    
1543
+      hitContext = contextWasHit;
1544
+    }
1545
+  }
1546
+
1547
+  void mouseReleased()
1548
+  {
1549
+    dragging = false;
1550
+    hitContext = -1;
1551
+    requestX = centerX;
1552
+    requestY = centerY;
1553
+  }
1554
+#+END_SRC
1555
+
1556
+#+name: diff_interaction
1557
+#+BEGIN_SRC processing :noweb yes
1558
+<<colors>>
1559
+<<glue>>
1560
+<<diff_interaction_src>>
1561
+#+END_SRC
1562
+
1563
+#+RESULTS:
1564
+#+BEGIN_EXPORT html
1565
+<script src="processing.js"></script>
1566
+ <script type="text/processing" data-processing-target="ob-6bc863022fc27d931ab179e8a556a1cda07821fc">
1567
+//color definitions
1568
+color a3 = #3A3B58;
1569
+color b3 = #734246;
1570
+color d3 = #B4561F;
1571
+color c3 = #336F60;
1572
+color f3 = #7A3E2A;
1573
+color g3 = #A48137;
1574
+color e2 = #97BBCB;
1575
+color a4 = #3B4257;
1576
+color b4 = #6A4345;
1577
+color d4 = #86451F;
1578
+color c4 = #345A48;
1579
+color f4 = #A92F21;
1580
+color g4 = #BC983B;
1581
+color a5 = #3D4358;
1582
+color b5 = #402623;
1583
+color d5 = #85442D;
1584
+color c5 = #3B403A;
1585
+color f5 = #7A150B;
1586
+color g5 = #252F2B;
1587
+color a1 = #597099;
1588
+color e4 = #0A3878;
1589
+color b1 = #D16365;
1590
+color d1 = #FFD43B;
1591
+color c1 = #B7BF98;
1592
+color e1 = #CAD2C8;
1593
+color e0 = #F5EDE5;
1594
+color f1 = #D17978;
1595
+color g1 = #FDD23E;
1596
+color a0 = #C5C3CC;
1597
+color e3 = #0485B1;
1598
+color b0 = #FFDCD6;
1599
+color d0 = #FFE9BE;
1600
+color c0 = #F0E9D5;
1601
+color f0 = #E4C8BF;
1602
+color g0 = #FBE6BA;
1603
+color a2 = #3D4B79;
1604
+color e5 = #084064;
1605
+color b2 = #974244;
1606
+color d2 = #F8AA08;
1607
+color c2 = #4E937F;
1608
+color f2 = #8F4330;
1609
+color g2 = #FFDB03;
1610
+
1611
+color colors[][] = {
1612
+  {b0,b1,b2,b3,b4,b5},
1613
+  {c0,c1,c2,c3,c4,c5},
1614
+  {a0,a1,a2,a3,a4,a5},
1615
+  {d0,d1,d2,d3,d4,d5},
1616
+  {e0,e1,e2,e3,e4,e5},
1617
+  {f0,f1,f2,f3,f4,f5},
1618
+  {g0,g1,g2,g3,g4,g5}
1619
+};
1620
+
1621
+class PrivacyLevel {
1622
+  public static int SECRET = 5;
1623
+  public static int PRIVATE = 4;
1624
+  public static int INTIMATE = 3;
1625
+  public static int AFFILIATE = 2;
1626
+  public static int PUBLIC = 1;
1627
+  public static int COMMONS = 0;
1628
+}
1629
+
1630
+class ContextType {
1631
+  public static int FINANCIAL = 6;
1632
+  public static int PERSONAL = 5; 
1633
+  public static int HEALTH = 4;
1634
+  public static int EDUCATION = 3;
1635
+  public static int WORK = 2;
1636
+  public static int HOBBY = 1;
1637
+  public static int OTHER = 0;
1638
+}
1639
+
1640
+public int getColor(int privacy_level, int context_type)
1641
+{
1642
+  return colors[context_type][privacy_level];
1643
+}
1644
+class Request
1645
+{
1646
+  public String application;
1647
+  public int contextType;
1648
+  public String[] required_properties;
1649
+  public String[] optional_properties;
1650
+
1651
+  public Request(String app, int contextType, String[] req, String[] opt)
1652
+  {
1653
+    this.application = app;
1654
+    this.contextType = contextType;
1655
+    this.required_properties = req;
1656
+    this.optional_properties = opt;
1657
+  }
1658
+}
1659
+
1660
+class Diff
1661
+{
1662
+  public String context;
1663
+  public String[] intersect;
1664
+  public String[] except;
1665
+
1666
+  public Diff(String ctx, String[] intersect, String[] except)
1667
+  {
1668
+    this.context = ctx;
1669
+    this.intersect = intersect;
1670
+    this.except = except;
1671
+  } 
1672
+}
1673
+
1674
+class Property
1675
+{
1676
+  public String type;
1677
+  public String value;
1678
+  public int pl;//privacy level
1679
+
1680
+  public Property(String type, String value, int pl)
1681
+  {
1682
+    this.type = type;
1683
+    this.value = value;
1684
+    this.pl = pl;
1685
+  }
1686
+}
1687
+
1688
+class Context
1689
+{
1690
+  public String title;
1691
+  public int plSum;
1692
+  public int contextType;
1693
+  public Property[] properties;
1694
+
1695
+  public Context(String title, int plSum, int contextType, Property[] properties)
1696
+  {
1697
+    this.title = title;
1698
+    this.plSum = plSum;
1699
+    this.properties = properties;
1700
+    this.contextType = contextType;
1701
+  }
1702
+}
1703
+
1704
+XMLElement doc = new XMLElement(this, 'diff.xml');
1705
+
1706
+//create typed versions because this is java :-(
1707
+Request parseRequest(XMLElement xml)
1708
+{
1709
+  XMLElement req = xml.getChild(0);
1710
+  String name = req.getChild(0).getContent();
1711
+  int contextType = req.getChild(1).getContent();
1712
+  String[] required = new String[req.getChild(2).getChildCount()];
1713
+  String[] optional = new String[req.getChild(3).getChildCount()];
1714
+  
1715
+  for (int i = 0; i < required.length; i++) {
1716
+    required[i] = req.getChild(2).getChild(i).getContent();
1717
+  }
1718
+
1719
+  for (int i = 0; i < optional.length; i++) {
1720
+    optional[i] = req.getChild(3).getChild(i).getContent();
1721
+  }
1722
+
1723
+  Request r = new Request(name,contextType,required,optional);
1724
+  return r;
1725
+}
1726
+
1727
+Context[] parseProfile(XMLElement xml)
1728
+{
1729
+  XMLElement profile = xml.getChild(2);
1730
+  Context[] contexts = new Context[profile.getChildCount()];
1731
+
1732
+  for(int i = 0; i < contexts.length; i++)
1733
+  {
1734
+    String contextName = profile.getChild(i).getChild(0).getContent();
1735
+    int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
1736
+    int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
1737
+
1738
+    XMLElement propertiesEl = profile.getChild(i).getChild(3);
1739
+    Property[] properties = new Property[propertiesEl.getChildCount()];
1740
+    for(int j = 0; j < properties.length; j++)
1741
+    {
1742
+      Property prop = parseProperty(propertiesEl.getChild(j));
1743
+      properties[j] = prop;
1744
+    }
1745
+
1746
+    Context context = new Context(contextName, plSum, contextType, properties);
1747
+    contexts[i] = context;
1748
+  }
1749
+  return contexts;
1750
+}
1751
+
1752
+Property parseProperty(XMLElement propertyEl)
1753
+{
1754
+  String propertyType = propertyEl.getChild(0).getContent();
1755
+  String value = propertyEl.getChild(1).getContent();
1756
+  int pl = parseInt(propertyEl.getChild(2).getContent());
1757
+  return new Property(propertyType, value, pl);
1758
+}
1759
+
1760
+//create typed versions because this is java :-(
1761
+Diff[] parseDiffs(xml)
1762
+{
1763
+  XMLElement diffsEl = xml.getChild(1);
1764
+  Diff[] diffs = new Diff[diffsEl.getChildCount()];
1765
+  for(int i = 0; i < diffs.length; i++)
1766
+  {
1767
+    String contextName = diffsEl.getChild(i).getChild(0).getContent();
1768
+    String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
1769
+    String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
1770
+    
1771
+    for(int j = 0; j < intersects.length; j++)
1772
+    {
1773
+      intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
1774
+    }
1775
+
1776
+    for(int j = 0; j < except.length; j++)
1777
+    {
1778
+      except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
1779
+    }
1780
+
1781
+    Diff diff = new Diff(contextName,intersects,except);
1782
+    diffs[i] = diff;
1783
+  }
1784
+  return diffs;
1785
+}
1786
+
1787
+Request request = parseRequest(doc);
1788
+Diff[] diffs = parseDiffs(doc);
1789
+Context[] contexts = parseProfile(doc);
1790
+//divide the circle by the amount of contexts 
1791
+//to get the angle between the lines that indicate the center of each context
1792
+float eqd_angle = TWO_PI / contexts.length;
1793
+
1794
+//draw request circle in the center of the screen
1795
+float centerX, centerY;
1796
+float xOffset, yOffset;
1797
+
1798
+float requestSize = 50;
1799
+
1800
+//context parameters
1801
+float contextDistance = 200;//random(100,300);//random between 50 and 300
1802
+float contextSize = 100;//random(50,100); //random between 50 and 100
1803
+
1804
+float requestX, requestY;//request coordinates, they can move
1805
+
1806
+boolean hitRequest = false;
1807
+boolean dragging = false;
1808
+int hitContext = -1;//-1 if no context is hit, otherwise indicates the index of the hit context
1809
+
1810
+void setup(){
1811
+  size(800,800);
1812
+  smooth();
1813
+
1814
+  //initialize screen when it is appropriate, 
1815
+  //before this it will display the wrong size
1816
+  centerX = width/2;
1817
+  centerY = height/2;
1818
+
1819
+  //request starts in the middle
1820
+  requestX = centerX;
1821
+  requestY = centerY;
1822
+}
1823
+
1824
+//draw the request and label
1825
+void drawRequest()
1826
+{
1827
+  color strokeColor = hitRequest? 255 : 153;
1828
+  stroke(strokeColor);
1829
+
1830
+  color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
1831
+  fill(reqColor);
1832
+  ellipse(requestX,requestY, requestSize,requestSize);
1833
+  fill(0);
1834
+  textAlign(CENTER,CENTER);
1835
+  text(request.application, requestX, requestY + 50/1.5);
1836
+
1837
+  //TODO: show weight of request
1838
+  //text("" + weights[0], requestX, requestY);
1839
+}
1840
+
1841
+//darken the given color, expects hsb color mode 
1842
+int darken(int c)
1843
+{
1844
+  float h = hue(c);
1845
+  float s = saturation(c);
1846
+  float v = brightness(c);
1847
+
1848
+  return color(h,s,v * 0.6);
1849
+}
1850
+
1851
+void drawContexts()
1852
+{
1853
+  //draw the contexts equidistant around the center where the request is
1854
+  int count = 0;
1855
+  for(String context : contexts)
1856
+  {
1857
+    float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
1858
+    float x = centerX + contextDistance * cos(angle); //calculate xPos
1859
+    float y = centerY + contextDistance * sin(angle); //calculate yPos
1860
+
1861
+    color strokeColor = (hitContext == count) ? 255 : 153;
1862
+    stroke(strokeColor);
1863
+
1864
+    color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
1865
+    fill(contextColor);
1866
+    ellipse(x, y, contextSize,contextSize);//fixed sizes and distances for now.
1867
+
1868
+    //show label
1869
+    fill(0);
1870
+    textAlign(CENTER,CENTER);
1871
+    text(context.title, x, y + contextSize/1.5);
1872
+
1873
+    colorMode(HSB);
1874
+    fill(darken(contextColor));
1875
+    text("" + context.plSum, x, y); 
1876
+    colorMode(RGB);
1877
+    count++;
1878
+  }
1879
+}
1880
+
1881
+//show label
1882
+void drawDiff()
1883
+{
1884
+    fill(0);
1885
+    textAlign(CENTER,CENTER);
1886
+    text("RELEASE TO ENTITLE:\nname (Taco van Dijk)\n email(taco@waag.org)\n address(spaarndammerdijk 194)\n\n STILL MISSING:\n phone", centerX, centerY);
1887
+}
1888
+
1889
+void draw()
1890
+{
1891
+  //clear bg
1892
+  background(200);
1893
+
1894
+  //draw hitbox
1895
+  float originX = requestX - requestSize/2;
1896
+  float originY = requestY - requestSize/2;
1897
+  rect(originX,originY, requestSize, requestSize);
1898
+
1899
+  //draw debug info
1900
+  String debug_info = "mouseX: " + mouseX + "mouseY: " + mouseY;
1901
+  text(debug_info, mouseX, mouseY);
1902
+
1903
+  //test if cursor is over the hitbox
1904
+  hitRequest = (mouseX > originX && mouseX < (originX + requestSize) &&
1905
+                mouseY > originY && mouseY < (originY + requestSize));
1906
+
1907
+  drawContexts();
1908
+  drawRequest();//on top
1909
+
1910
+  if(hitContext > -1)
1911
+  {
1912
+    //show diff information
1913
+    drawDiff();
1914
+  }
1915
+}
1916
+
1917
+void mousePressed() {
1918
+    dragging = hitRequest;
1919
+    xOffset = mouseX - requestX; 
1920
+    yOffset = mouseY - requestY; 
1921
+}
1922
+
1923
+void mouseDragged()
1924
+{
1925
+  if(dragging)
1926
+  {
1927
+    requestX = mouseX - xOffset;
1928
+    requestY = mouseY - yOffset;
1929
+
1930
+    int contextWasHit = -1;
1931
+
1932
+    for(int i = 0; i < contexts.length; i++)
1933
+    {
1934
+      float angle = (i * eqd_angle) - (PI/2);
1935
+      float x = centerX + contextDistance * cos(angle);
1936
+      float y = centerY + contextDistance * sin(angle);
1937
+
1938
+      boolean hit = (mouseX > x - contextSize/2 && mouseX < x + contextSize/2 
1939
+                              && mouseY > y - contextSize/2 && mouseY < y + contextSize/2);
1940
+
1941
+      if(hit) contextWasHit = i;
1942
+    }
1943
+
1944
+    hitContext = contextWasHit;
1945
+  }
1946
+}
1947
+
1948
+void mouseReleased()
1949
+{
1950
+  dragging = false;
1951
+  hitContext = -1;
1952
+  requestX = centerX;
1953
+  requestY = centerY;
1954
+}
1955
+</script> <canvas id="ob-6bc863022fc27d931ab179e8a556a1cda07821fc"></canvas>
1956
+#+END_EXPORT
1957
+
1348 1958
 *** Things to further investigate
1349 1959
     - How does the end user actually accept the request? Is it by dragging the request onto the context?
1350 1960
     - How does the end user decline the request?