Taco 1 year ago
parent
commit
e5b43529b5
2 changed files with 173 additions and 581 deletions
  1. 98 305
      entitlements.html
  2. 75 276
      entitlements.org

+ 98 - 305
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-13 Fri 15:42 -->
6
+<!-- 2018-04-13 Fri 16:36 -->
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>
@@ -233,41 +233,34 @@ for the JavaScript code in this tag.
233 233
 <h2>Table of Contents</h2>
234 234
 <div id="text-table-of-contents">
235 235
 <ul>
236
-<li><a href="#orga5beecb">1. Introduction</a>
236
+<li><a href="#orgfe3969c">1. Introduction</a>
237 237
 <ul>
238 238
 <li>
239 239
 <ul>
240
-<li><a href="#org0319cc8">1.0.1. <span class="todo TODO">TODO</span> Increase list of property types (at least properties that are used in Gebied Online)</a></li>
240
+<li><a href="#orgab6a73b">1.0.1. <span class="todo TODO">TODO</span> Increase list of property types (at least properties that are used in Gebied Online)</a></li>
241 241
 </ul>
242 242
 </li>
243 243
 </ul>
244 244
 </li>
245
-<li><a href="#orgd58626c">2. Data Model</a>
245
+<li><a href="#orgf8ab860">2. Data Model</a>
246 246
 <ul>
247
-<li><a href="#orga70385f">2.1. Example wallet profile</a></li>
248
-<li><a href="#orgd3c8bdd">2.2. Example request</a></li>
247
+<li><a href="#orge2dcb8f">2.1. Example wallet profile</a></li>
248
+<li><a href="#orge60b850">2.2. Example request</a></li>
249 249
 </ul>
250 250
 </li>
251
-<li><a href="#org8d21edc">3. Data Comparison</a></li>
252
-<li><a href="#org6457814">4. Visualization</a>
251
+<li><a href="#org49f4ad7">3. Data Comparison</a></li>
252
+<li><a href="#orgdba6cea">4. Visualization</a>
253 253
 <ul>
254
-<li><a href="#org28633ae">4.1. Request</a></li>
255
-<li><a href="#org021333a">4.2. Contexts</a>
256
-<ul>
257
-<li><a href="#orgeb26db5">4.2.1. <span class="todo TODO">TODO</span> : Can we use distance as well as color to indicate the relation?</a></li>
258
-<li><a href="#org630a749">4.2.2. <span class="todo TODO">TODO</span> : Can we use size of the circle to indicate the weight, or use badges?</a></li>
259
-</ul>
260
-</li>
254
+<li><a href="#org2b00a31">4.1. Request</a></li>
255
+<li><a href="#org79e296c">4.2. Contexts</a></li>
261 256
 </ul>
262 257
 </li>
263
-<li><a href="#org7511f6e">5. Interaction</a>
258
+<li><a href="#orgbab2671">5. Interaction</a>
264 259
 <ul>
265 260
 <li>
266 261
 <ul>
267
-<li><a href="#orgc7933ee">5.0.1. <span class="todo TODO">TODO</span> : Show context<sub>type</sub></a></li>
268
-<li><a href="#org0e5632e">5.0.2. <span class="todo TODO">TODO</span> : use pl<sub>mean</sub> for color level</a></li>
269
-<li><a href="#org85610dd">5.0.3. <span class="todo TODO">TODO</span> : How does the end user actually accept the request? Is it by dragging the request onto the context?</a></li>
270
-<li><a href="#org291e8d7">5.0.4. <span class="todo TODO">TODO</span> : How does the end user decline the request?</a></li>
262
+<li><a href="#orgeb3f295">5.0.1. <span class="todo TODO">TODO</span> : How does the end user actually accept the request? Is it by dragging the request onto the context?</a></li>
263
+<li><a href="#org9bfe3fe">5.0.2. <span class="todo TODO">TODO</span> : How does the end user decline the request?</a></li>
271 264
 </ul>
272 265
 </li>
273 266
 </ul>
@@ -275,8 +268,8 @@ for the JavaScript code in this tag.
275 268
 </ul>
276 269
 </div>
277 270
 </div>
278
-<div id="outline-container-orga5beecb" class="outline-2">
279
-<h2 id="orga5beecb"><span class="section-number-2">1</span> Introduction</h2>
271
+<div id="outline-container-orgfe3969c" class="outline-2">
272
+<h2 id="orgfe3969c"><span class="section-number-2">1</span> Introduction</h2>
280 273
 <div class="outline-text-2" id="text-1">
281 274
 <p>
282 275
 The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
@@ -286,7 +279,7 @@ More specifically the focus is on investigating how the user of a decode wallet
286 279
 <p>
287 280
 A prelimary definition of six privacy levels (ordered from most private to least private):
288 281
 </p>
289
-<table id="org84e74a5" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
282
+<table id="orgeaa281a" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
290 283
 
291 284
 
292 285
 <colgroup>
@@ -296,40 +289,47 @@ A prelimary definition of six privacy levels (ordered from most private to least
296 289
 
297 290
 <col  class="org-left" />
298 291
 </colgroup>
292
+<thead>
293
+<tr>
294
+<th scope="col" class="org-right">id</th>
295
+<th scope="col" class="org-left">title</th>
296
+<th scope="col" class="org-left">description</th>
297
+</tr>
298
+</thead>
299 299
 <tbody>
300 300
 <tr>
301 301
 <td class="org-right">5</td>
302
-<td class="org-left">SECRET</td>
302
+<td class="org-left">secret</td>
303 303
 <td class="org-left">passwords, keys etc.</td>
304 304
 </tr>
305 305
 
306 306
 <tr>
307 307
 <td class="org-right">4</td>
308
-<td class="org-left">PRIVATE</td>
308
+<td class="org-left">private</td>
309 309
 <td class="org-left">ssn etc, strict need to know basis stuff</td>
310 310
 </tr>
311 311
 
312 312
 <tr>
313 313
 <td class="org-right">3</td>
314
-<td class="org-left">INTIMATE</td>
314
+<td class="org-left">intimate</td>
315 315
 <td class="org-left">e.g. stuff you share with family</td>
316 316
 </tr>
317 317
 
318 318
 <tr>
319 319
 <td class="org-right">2</td>
320
-<td class="org-left">AFFILIATE</td>
320
+<td class="org-left">affiliate</td>
321 321
 <td class="org-left">e.g. stuff you share with work, project etc</td>
322 322
 </tr>
323 323
 
324 324
 <tr>
325 325
 <td class="org-right">1</td>
326
-<td class="org-left">PUBLIC</td>
326
+<td class="org-left">public</td>
327 327
 <td class="org-left">e.g. stuff that everybody may know, your e.g. twitter handle</td>
328 328
 </tr>
329 329
 
330 330
 <tr>
331 331
 <td class="org-right">0</td>
332
-<td class="org-left">COMMONS</td>
332
+<td class="org-left">commons</td>
333 333
 <td class="org-left">stuff that is intended for the public good / commons, e.g. anonimized IoT stuff</td>
334 334
 </tr>
335 335
 </tbody>
@@ -338,7 +338,7 @@ A prelimary definition of six privacy levels (ordered from most private to least
338 338
 <p>
339 339
 A preliminary definition of context types
340 340
 </p>
341
-<table id="orgba7d9c4" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
341
+<table id="org9897529" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
342 342
 
343 343
 
344 344
 <colgroup>
@@ -413,7 +413,7 @@ A preliminary definition of context types
413 413
 <p>
414 414
 A list of properties with code to eval for fake instances
415 415
 </p>
416
-<table id="org7675b98" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
416
+<table id="orgaf3cadf" border="2" cellspacing="0" cellpadding="6" rules="groups" frame="hsides">
417 417
 
418 418
 
419 419
 <colgroup>
@@ -472,17 +472,17 @@ A list of properties with code to eval for fake instances
472 472
 </table>
473 473
 </div>
474 474
 
475
-<div id="outline-container-org0319cc8" class="outline-4">
476
-<h4 id="org0319cc8"><span class="section-number-4">1.0.1</span> <span class="todo TODO">TODO</span> Increase list of property types (at least properties that are used in Gebied Online)</h4>
475
+<div id="outline-container-orgab6a73b" class="outline-4">
476
+<h4 id="orgab6a73b"><span class="section-number-4">1.0.1</span> <span class="todo TODO">TODO</span> Increase list of property types (at least properties that are used in Gebied Online)</h4>
477 477
 </div>
478 478
 </div>
479 479
 
480
-<div id="outline-container-orgd58626c" class="outline-2">
481
-<h2 id="orgd58626c"><span class="section-number-2">2</span> Data Model</h2>
480
+<div id="outline-container-orgf8ab860" class="outline-2">
481
+<h2 id="orgf8ab860"><span class="section-number-2">2</span> Data Model</h2>
482 482
 <div class="outline-text-2" id="text-2">
483 483
 </div>
484
-<div id="outline-container-orga70385f" class="outline-3">
485
-<h3 id="orga70385f"><span class="section-number-3">2.1</span> Example wallet profile</h3>
484
+<div id="outline-container-orge2dcb8f" class="outline-3">
485
+<h3 id="orge2dcb8f"><span class="section-number-3">2.1</span> Example wallet profile</h3>
486 486
 <div class="outline-text-3" id="text-2-1">
487 487
 <p>
488 488
 This sample wallet profile datastructure consists of multiple contexts.
@@ -501,7 +501,7 @@ It overrides the default privacy level specified by the property type.
501 501
 </p>
502 502
 
503 503
 <div class="org-src-container">
504
-<pre class="src src-js" id="org82be19b"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
504
+<pre class="src src-js" id="org1495777"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
505 505
     contexts : 
506 506
     <span style="color: #bc6ec5;">[</span>
507 507
         <span style="color: #2d9574;">{</span>
@@ -578,7 +578,7 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
578 578
 </div>
579 579
 
580 580
 <div class="org-src-container">
581
-<pre class="src src-ruby" id="orge9fd98a"> <span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'faker'</span>
581
+<pre class="src src-ruby" id="org0abbf3f"> <span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'faker'</span>
582 582
  <span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
583 583
 
584 584
  profile = <span style="color: #4f97d7;">{}</span>
@@ -612,8 +612,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
612 612
 </div>
613 613
 </div>
614 614
 
615
-<div id="outline-container-orgd3c8bdd" class="outline-3">
616
-<h3 id="orgd3c8bdd"><span class="section-number-3">2.2</span> Example request</h3>
615
+<div id="outline-container-orge60b850" class="outline-3">
616
+<h3 id="orge60b850"><span class="section-number-3">2.2</span> Example request</h3>
617 617
 <div class="outline-text-3" id="text-2-2">
618 618
 <p>
619 619
 This sample application request consists of an application name, a set of required property types and a set of optional property types.
@@ -623,7 +623,7 @@ and the cumulative privacy weight by adding the privacy levels of each property
623 623
 </p>
624 624
 
625 625
 <div class="org-src-container">
626
-<pre class="src src-js" id="orgd97d1e6"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
626
+<pre class="src src-js" id="orgfa9e1d2"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
627 627
     application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
628 628
     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>
629 629
     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>,
@@ -635,7 +635,7 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
635 635
 </div>
636 636
 
637 637
 <div class="org-src-container">
638
-<pre class="src src-ruby" id="org1b5bd92"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'faker'</span>
638
+<pre class="src src-ruby" id="org80af8ce"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'faker'</span>
639 639
 <span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
640 640
 
641 641
 request = <span style="color: #4f97d7;">{}</span>
@@ -659,8 +659,8 @@ request<span style="color: #4f97d7;">[</span><span style="color: #a45bad;">:pl_m
659 659
 </div>
660 660
 </div>
661 661
 
662
-<div id="outline-container-org8d21edc" class="outline-2">
663
-<h2 id="org8d21edc"><span class="section-number-2">3</span> Data Comparison</h2>
662
+<div id="outline-container-org49f4ad7" class="outline-2">
663
+<h2 id="org49f4ad7"><span class="section-number-2">3</span> Data Comparison</h2>
664 664
 <div class="outline-text-2" id="text-3">
665 665
 <p>
666 666
 During the interaction we want to give the user insight into a couple of things;
@@ -676,7 +676,7 @@ In below ruby code a comparison is made by on creating the intersection and its
676 676
 </p>
677 677
 
678 678
 <div class="org-src-container">
679
-<pre class="src src-ruby" id="org611649c"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
679
+<pre class="src src-ruby" id="org16ac0f8"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
680 680
   <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>
681 681
 
682 682
   request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
@@ -702,8 +702,8 @@ NOTE: We export to file diff.xml here for easy parsing in processing.js below.
702 702
 </div>
703 703
 </div>
704 704
 
705
-<div id="outline-container-org6457814" class="outline-2">
706
-<h2 id="org6457814"><span class="section-number-2">4</span> Visualization</h2>
705
+<div id="outline-container-orgdba6cea" class="outline-2">
706
+<h2 id="orgdba6cea"><span class="section-number-2">4</span> Visualization</h2>
707 707
 <div class="outline-text-2" id="text-4">
708 708
 <p>
709 709
 We want to visualize the following things;
@@ -722,226 +722,12 @@ Different tones within the hue can be mapped to each privacy level.
722 722
 </p>
723 723
 
724 724
 <p>
725
-Below snippet exemplifies a color for the SELF context with a privacy level SECRET, and should be a dark red color.
726
-</p>
727
-
728
-<div class="org-src-container">
729
-<pre class="src src-java" id="org1499412"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
730
-  size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
731
-  background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
732
-  noStroke<span style="color: #bc6ec5;">()</span>;
733
-  <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.SECRET;
734
-  <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.PERSONAL;
735
-  <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">secret_self</span> = getColor<span style="color: #bc6ec5;">(</span>level, contextType<span style="color: #bc6ec5;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">expect dark red</span>
736
-  fill<span style="color: #bc6ec5;">(</span>secret_self<span style="color: #bc6ec5;">)</span>;
737
-  ellipse<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span><span style="color: #bc6ec5;">)</span>;
738
-<span style="color: #4f97d7;">}</span>
739
-</pre>
740
-</div>
741
-
742
-<script src="processing.js"></script>
743
- <script type="text/processing" data-processing-target="ob-37734a52fb8da76b7bf2dfab3f70281d2061bbb7">
744
-//color definitions
745
-color a3 = #3A3B58;
746
-color b3 = #734246;
747
-color d3 = #B4561F;
748
-color c3 = #336F60;
749
-color f3 = #7A3E2A;
750
-color g3 = #A48137;
751
-color e2 = #97BBCB;
752
-color a4 = #3B4257;
753
-color b4 = #6A4345;
754
-color d4 = #86451F;
755
-color c4 = #345A48;
756
-color f4 = #A92F21;
757
-color g4 = #BC983B;
758
-color a5 = #3D4358;
759
-color b5 = #402623;
760
-color d5 = #85442D;
761
-color c5 = #3B403A;
762
-color f5 = #7A150B;
763
-color g5 = #252F2B;
764
-color a1 = #597099;
765
-color e4 = #0A3878;
766
-color b1 = #D16365;
767
-color d1 = #FFD43B;
768
-color c1 = #B7BF98;
769
-color e1 = #CAD2C8;
770
-color e0 = #F5EDE5;
771
-color f1 = #D17978;
772
-color g1 = #FDD23E;
773
-color a0 = #C5C3CC;
774
-color e3 = #0485B1;
775
-color b0 = #FFDCD6;
776
-color d0 = #FFE9BE;
777
-color c0 = #F0E9D5;
778
-color f0 = #E4C8BF;
779
-color g0 = #FBE6BA;
780
-color a2 = #3D4B79;
781
-color e5 = #084064;
782
-color b2 = #974244;
783
-color d2 = #F8AA08;
784
-color c2 = #4E937F;
785
-color f2 = #8F4330;
786
-color g2 = #FFDB03;
787
-
788
-color colors[][] = {
789
-  {b0,b1,b2,b3,b4,b5},
790
-  {c0,c1,c2,c3,c4,c5},
791
-  {a0,a1,a2,a3,a4,a5},
792
-  {d0,d1,d2,d3,d4,d5},
793
-  {e0,e1,e2,e3,e4,e5},
794
-  {f0,f1,f2,f3,f4,f5},
795
-  {g0,g1,g2,g3,g4,g5}
796
-};
797
-
798
-static class PrivacyLevel {
799
-  public static int SECRET = 5;
800
-  public static int PRIVATE = 4;
801
-  public static int INTIMATE = 3;
802
-  public static int AFFILIATE = 2;
803
-  public static int PUBLIC = 1;
804
-  public static int COMMONS = 0;
805
-}
806
-
807
-static class ContextType {
808
-  public static int PERSONAL = 0; 
809
-  public static int HEALTH = 1;
810
-  public static int EDUCATION = 2;
811
-  public static int WORK = 3;
812
-  public static int HOBBY = 4;
813
-  public static int FINANCIAL = 5;
814
-  public static int OTHER = 6;
815
-}
816
-
817
-public int getColor(int privacy_level, int context_type)
818
-{
819
-  return colors[context_type][privacy_level];
820
-}
821
-void draw(){
822
-  size(100,100);
823
-  background(0);
824
-  noStroke();
825
-  int level = PrivacyLevel.SECRET;
826
-  int contextType = ContextType.PERSONAL;
827
-  color secret_self = getColor(level, contextType);//expect dark red
828
-  fill(secret_self);
829
-  ellipse(50,50,50,50);
830
-}
831
-</script> <canvas id="ob-37734a52fb8da76b7bf2dfab3f70281d2061bbb7"></canvas>
832
-
833
-<div class="org-src-container">
834
-<pre class="src src-java" id="org1888eb9"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
835
-  size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
836
-  background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
837
-  noStroke<span style="color: #bc6ec5;">()</span>;
838
-  <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC;
839
-  <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.WORK;
840
-  <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">work_public</span> = getColor<span style="color: #bc6ec5;">(</span>level, contextType<span style="color: #bc6ec5;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">expect light blueish</span>
841
-  fill<span style="color: #bc6ec5;">(</span>work_public<span style="color: #bc6ec5;">)</span>;
842
-  ellipse<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span>,<span style="color: #a45bad;">50</span><span style="color: #bc6ec5;">)</span>;
843
-<span style="color: #4f97d7;">}</span>
844
-</pre>
845
-</div>
846
-
847
-<script src="processing.js"></script>
848
- <script type="text/processing" data-processing-target="ob-615c22cc04b927036378dd8bfb8b74e10964852e">
849
-//color definitions
850
-color a3 = #3A3B58;
851
-color b3 = #734246;
852
-color d3 = #B4561F;
853
-color c3 = #336F60;
854
-color f3 = #7A3E2A;
855
-color g3 = #A48137;
856
-color e2 = #97BBCB;
857
-color a4 = #3B4257;
858
-color b4 = #6A4345;
859
-color d4 = #86451F;
860
-color c4 = #345A48;
861
-color f4 = #A92F21;
862
-color g4 = #BC983B;
863
-color a5 = #3D4358;
864
-color b5 = #402623;
865
-color d5 = #85442D;
866
-color c5 = #3B403A;
867
-color f5 = #7A150B;
868
-color g5 = #252F2B;
869
-color a1 = #597099;
870
-color e4 = #0A3878;
871
-color b1 = #D16365;
872
-color d1 = #FFD43B;
873
-color c1 = #B7BF98;
874
-color e1 = #CAD2C8;
875
-color e0 = #F5EDE5;
876
-color f1 = #D17978;
877
-color g1 = #FDD23E;
878
-color a0 = #C5C3CC;
879
-color e3 = #0485B1;
880
-color b0 = #FFDCD6;
881
-color d0 = #FFE9BE;
882
-color c0 = #F0E9D5;
883
-color f0 = #E4C8BF;
884
-color g0 = #FBE6BA;
885
-color a2 = #3D4B79;
886
-color e5 = #084064;
887
-color b2 = #974244;
888
-color d2 = #F8AA08;
889
-color c2 = #4E937F;
890
-color f2 = #8F4330;
891
-color g2 = #FFDB03;
892
-
893
-color colors[][] = {
894
-  {b0,b1,b2,b3,b4,b5},
895
-  {c0,c1,c2,c3,c4,c5},
896
-  {a0,a1,a2,a3,a4,a5},
897
-  {d0,d1,d2,d3,d4,d5},
898
-  {e0,e1,e2,e3,e4,e5},
899
-  {f0,f1,f2,f3,f4,f5},
900
-  {g0,g1,g2,g3,g4,g5}
901
-};
902
-
903
-static class PrivacyLevel {
904
-  public static int SECRET = 5;
905
-  public static int PRIVATE = 4;
906
-  public static int INTIMATE = 3;
907
-  public static int AFFILIATE = 2;
908
-  public static int PUBLIC = 1;
909
-  public static int COMMONS = 0;
910
-}
911
-
912
-static class ContextType {
913
-  public static int PERSONAL = 0; 
914
-  public static int HEALTH = 1;
915
-  public static int EDUCATION = 2;
916
-  public static int WORK = 3;
917
-  public static int HOBBY = 4;
918
-  public static int FINANCIAL = 5;
919
-  public static int OTHER = 6;
920
-}
921
-
922
-public int getColor(int privacy_level, int context_type)
923
-{
924
-  return colors[context_type][privacy_level];
925
-}
926
-void draw(){
927
-  size(100,100);
928
-  background(0);
929
-  noStroke();
930
-  int level = PrivacyLevel.PUBLIC;
931
-  int contextType = ContextType.WORK;
932
-  color work_public = getColor(level, contextType);//expect light blueish
933
-  fill(work_public);
934
-  ellipse(50,50,50,50);
935
-}
936
-</script> <canvas id="ob-615c22cc04b927036378dd8bfb8b74e10964852e"></canvas>
937
-
938
-<p>
939 725
 This table shows all colors for each context / privacy level combination.
940
-Click on the diagram to compare alternative generated colors for increased contrast between levels and contexts.
726
+Click on the diagram to compare colors sets.
941 727
 </p>
942 728
 
943 729
 <script src="processing.js"></script>
944
- <script type="text/processing" data-processing-target="ob-7b22e85f97196387c3f94a62190ee95651d58489">
730
+ <script type="text/processing" data-processing-target="ob-44f6f21ab5755a24cd02bc9679d06787f37dfeb6">
945 731
 //color definitions
946 732
 color a3 = #3A3B58;
947 733
 color b3 = #734246;
@@ -996,7 +782,7 @@ color colors[][] = {
996 782
   {g0,g1,g2,g3,g4,g5}
997 783
 };
998 784
 
999
-boolean procedural = false;
785
+boolean procedural = true;
1000 786
 String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
1001 787
 String[] contextTypes = {"personal", "health", "education", "work", "hobby", "financial", "other"};
1002 788
 static class PrivacyLevel {
@@ -1106,11 +892,11 @@ void draw()
1106 892
     }
1107 893
   }
1108 894
 }
1109
-</script> <canvas id="ob-7b22e85f97196387c3f94a62190ee95651d58489"></canvas>
895
+</script> <canvas id="ob-44f6f21ab5755a24cd02bc9679d06787f37dfeb6"></canvas>
1110 896
 </div>
1111 897
 
1112
-<div id="outline-container-org28633ae" class="outline-3">
1113
-<h3 id="org28633ae"><span class="section-number-3">4.1</span> Request</h3>
898
+<div id="outline-container-org2b00a31" class="outline-3">
899
+<h3 id="org2b00a31"><span class="section-number-3">4.1</span> Request</h3>
1114 900
 <div class="outline-text-3" id="text-4-1">
1115 901
 <script src="processing.js"></script>
1116 902
  <script type="text/processing" data-processing-target="ob-d1a83be2c44d00455adace357b093d445e4966ea">
@@ -1355,16 +1141,17 @@ text(request.application, centerX, centerY + rsize/1.5);
1355 1141
 </div>
1356 1142
 </div>
1357 1143
 
1358
-<div id="outline-container-org021333a" class="outline-3">
1359
-<h3 id="org021333a"><span class="section-number-3">4.2</span> Contexts</h3>
1144
+<div id="outline-container-org79e296c" class="outline-3">
1145
+<h3 id="org79e296c"><span class="section-number-3">4.2</span> Contexts</h3>
1360 1146
 <div class="outline-text-3" id="text-4-2">
1361 1147
 <p>
1362 1148
 We want to draw each context in relation to the request, 
1363 1149
 so we place each context equidistant from the request in the center.
1150
+Click on the picture to toggle preview of different (random) sizes and distances for the contexts.
1364 1151
 </p>
1365 1152
 
1366 1153
 <script src="processing.js"></script>
1367
- <script type="text/processing" data-processing-target="ob-1645e066fdd47fcbff417fc9f036414f49eeebb6">
1154
+ <script type="text/processing" data-processing-target="ob-a0d330ffcf77c1bd4b7462f8512e5cd9310ecf3f">
1368 1155
 String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
1369 1156
 String[] contextTypes = {"personal", "health", "education", "work", "hobby", "financial", "other"};
1370 1157
 
@@ -1593,20 +1380,34 @@ void setup(){
1593 1380
 //divide the circle by the amount of contexts 
1594 1381
 //to get the angle between the lines that indicate the center of each context
1595 1382
 float eqd_angle = TWO_PI / contexts.length;
1596
-  
1383
+int varyDistance = 0;
1384
+
1385
+//press any key to use random size and distance
1386
+void mousePressed()
1387
+{
1388
+  if(varyDistance ==  0){
1389
+    varyDistance = 1;
1390
+  }
1391
+  else{
1392
+    varyDistance = 0;
1393
+  }
1394
+  draw();
1395
+}
1396
+
1597 1397
 void draw()
1598 1398
 {
1599
-  //TODO move draw request to a function
1399
+  background(200);
1400
+
1600 1401
   //the size of request is fixed for now
1601 1402
   float centerX = width/2;
1602 1403
   float centerY = height/2;
1603 1404
   float rsize = 55;
1604
-  
1405
+
1605 1406
   //color of request is mapped to the privacy type of the request, each request has one.
1606 1407
   color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
1607 1408
   fill(reqColor); 
1608 1409
   ellipse(centerX, centerY, rsize, rsize);
1609
-  
1410
+
1610 1411
   //show the name of the application that makes the request, centered below the circle
1611 1412
   fill(0);
1612 1413
   textAlign(CENTER,CENTER);
@@ -1616,17 +1417,22 @@ void draw()
1616 1417
   for(Context context : contexts)
1617 1418
   {
1618 1419
     float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
1619
-    
1620
-    float distance = 200;//random(100,300);//random between 50 and 300
1621
-    float csize = 100;//random(50,100); //random between 50 and 100
1420
+
1421
+    float distance = 200;
1422
+    float csize = 100;
1423
+    if(varyDistance == 1)
1424
+    {
1425
+      distance = random(100,300);
1426
+      csize = random(50,100);
1427
+    }
1622 1428
     float x = centerX + distance * cos(angle); //calculate xPos
1623 1429
     float y = centerY + distance * sin(angle); //calculate yPos
1624
-    
1430
+
1625 1431
     //each context should have a contextType too, in order to base the color on it.
1626 1432
     color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
1627 1433
     fill(contextColor);
1628 1434
     ellipse(x, y, csize, csize);//fixed sizes and distances for now.
1629
-    
1435
+
1630 1436
     //show context label
1631 1437
     fill(0);
1632 1438
     textAlign(CENTER,CENTER);
@@ -1634,27 +1440,20 @@ void draw()
1634 1440
     count++;
1635 1441
   }
1636 1442
 }
1637
-</script> <canvas id="ob-1645e066fdd47fcbff417fc9f036414f49eeebb6"></canvas>
1638
-</div>
1639
-
1640
-<div id="outline-container-orgeb26db5" class="outline-4">
1641
-<h4 id="orgeb26db5"><span class="section-number-4">4.2.1</span> <span class="todo TODO">TODO</span> : Can we use distance as well as color to indicate the relation?</h4>
1642
-</div>
1643
-<div id="outline-container-org630a749" class="outline-4">
1644
-<h4 id="org630a749"><span class="section-number-4">4.2.2</span> <span class="todo TODO">TODO</span> : Can we use size of the circle to indicate the weight, or use badges?</h4>
1443
+</script> <canvas id="ob-a0d330ffcf77c1bd4b7462f8512e5cd9310ecf3f"></canvas>
1645 1444
 </div>
1646 1445
 </div>
1647 1446
 </div>
1648 1447
 
1649
-<div id="outline-container-org7511f6e" class="outline-2">
1650
-<h2 id="org7511f6e"><span class="section-number-2">5</span> Interaction</h2>
1448
+<div id="outline-container-orgbab2671" class="outline-2">
1449
+<h2 id="orgbab2671"><span class="section-number-2">5</span> Interaction</h2>
1651 1450
 <div class="outline-text-2" id="text-5">
1652 1451
 <p>
1653
-We intend to investigate this in Processing as well.
1452
+Drag the request from the center onto one of the contexts to see the calculated difference.
1654 1453
 </p>
1655 1454
 
1656 1455
 <script src="processing.js"></script>
1657
- <script type="text/processing" data-processing-target="ob-941e419dd4ba83cc73e2bd6c083f2aa6bac4ca64">
1456
+ <script type="text/processing" data-processing-target="ob-761c78c771dcfd0aba53e460a655c1a31de6d151">
1658 1457
 String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
1659 1458
 String[] contextTypes = {"personal", "health", "education", "work", "hobby", "financial", "other"};
1660 1459
 
@@ -1915,7 +1714,7 @@ void drawRequest()
1915 1714
   stroke(strokeColor);
1916 1715
 
1917 1716
   color reqColor = getColor(request.plMean, request.contextType);
1918
-  fill(reqColor);
1717
+  fill(reqColor,127);
1919 1718
   ellipse(requestX,requestY, requestSize,requestSize);
1920 1719
 
1921 1720
   colorMode(HSB);
@@ -2078,26 +1877,20 @@ void mouseReleased()
2078 1877
   requestX = centerX;
2079 1878
   requestY = centerY;
2080 1879
 }
2081
-</script> <canvas id="ob-941e419dd4ba83cc73e2bd6c083f2aa6bac4ca64"></canvas>
1880
+</script> <canvas id="ob-761c78c771dcfd0aba53e460a655c1a31de6d151"></canvas>
2082 1881
 </div>
2083 1882
 
2084
-<div id="outline-container-orgc7933ee" class="outline-4">
2085
-<h4 id="orgc7933ee"><span class="section-number-4">5.0.1</span> <span class="todo TODO">TODO</span> : Show context<sub>type</sub></h4>
2086
-</div>
2087
-<div id="outline-container-org0e5632e" class="outline-4">
2088
-<h4 id="org0e5632e"><span class="section-number-4">5.0.2</span> <span class="todo TODO">TODO</span> : use pl<sub>mean</sub> for color level</h4>
2089
-</div>
2090
-<div id="outline-container-org85610dd" class="outline-4">
2091
-<h4 id="org85610dd"><span class="section-number-4">5.0.3</span> <span class="todo TODO">TODO</span> : How does the end user actually accept the request? Is it by dragging the request onto the context?</h4>
1883
+<div id="outline-container-orgeb3f295" class="outline-4">
1884
+<h4 id="orgeb3f295"><span class="section-number-4">5.0.1</span> <span class="todo TODO">TODO</span> : How does the end user actually accept the request? Is it by dragging the request onto the context?</h4>
2092 1885
 </div>
2093
-<div id="outline-container-org291e8d7" class="outline-4">
2094
-<h4 id="org291e8d7"><span class="section-number-4">5.0.4</span> <span class="todo TODO">TODO</span> : How does the end user decline the request?</h4>
1886
+<div id="outline-container-org9bfe3fe" class="outline-4">
1887
+<h4 id="org9bfe3fe"><span class="section-number-4">5.0.2</span> <span class="todo TODO">TODO</span> : How does the end user decline the request?</h4>
2095 1888
 </div>
2096 1889
 </div>
2097 1890
 </div>
2098 1891
 <div id="postamble" class="status">
2099 1892
 <p class="author">Author: Taco</p>
2100
-<p class="date">Created: 2018-04-13 Fri 15:42</p>
1893
+<p class="date">Created: 2018-04-13 Fri 16:36</p>
2101 1894
 <p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
2102 1895
 </div>
2103 1896
 </body>

+ 75 - 276
entitlements.org

@@ -4,12 +4,14 @@ More specifically the focus is on investigating how the user of a decode wallet
4 4
 
5 5
 A prelimary definition of six privacy levels (ordered from most private to least private):
6 6
 #+name: privacy_levels
7
-|5|SECRET|passwords, keys etc.  
8
-|4|PRIVATE|ssn etc, strict need to know basis stuff 
9
-|3|INTIMATE|e.g. stuff you share with family 
10
-|2|AFFILIATE|e.g. stuff you share with work, project etc 
11
-|1|PUBLIC|e.g. stuff that everybody may know, your e.g. twitter handle 
12
-|0|COMMONS|stuff that is intended for the public good / commons, e.g. anonimized IoT stuff
7
+| id | title     | description                                                                     |
8
+|----+-----------+---------------------------------------------------------------------------------|
9
+|  5 | secret    | passwords, keys etc.                                                            |
10
+|  4 | private   | ssn etc, strict need to know basis stuff                                        |
11
+|  3 | intimate  | e.g. stuff you share with family                                                |
12
+|  2 | affiliate | e.g. stuff you share with work, project etc                                     |
13
+|  1 | public    | e.g. stuff that everybody may know, your e.g. twitter handle                    |
14
+|  0 | commons   | stuff that is intended for the public good / commons, e.g. anonimized IoT stuff |
13 15
 
14 16
 A preliminary definition of context types
15 17
 #+name: context_types
@@ -466,226 +468,8 @@ public int getColor(int privacy_level, int context_type)
466 468
     return colors[context_type][privacy_level];
467 469
 }
468 470
 #+END_SRC
469
-
470
-Below snippet exemplifies a color for the SELF context with a privacy level SECRET, and should be a dark red color.
471
-
472
-#+name: color_example_src_1
473
-#+BEGIN_SRC java
474
-void draw(){
475
-  size(100,100);
476
-  background(0);
477
-  noStroke();
478
-  int level = PrivacyLevel.SECRET;
479
-  int contextType = ContextType.PERSONAL;
480
-  color secret_self = getColor(level, contextType);//expect dark red
481
-  fill(secret_self);
482
-  ellipse(50,50,50,50);
483
-}
484
-#+END_SRC
485
-
486
-#+name: color_example_1
487
-#+BEGIN_SRC processing :noweb yes
488
-<<colors>>
489
-<<color_example_src_1>>
490
-#+END_SRC 
491
-
492
-#+RESULTS: color_example_1
493
-#+BEGIN_EXPORT html
494
-<script src="processing.js"></script>
495
- <script type="text/processing" data-processing-target="ob-bbc53a7d7981a43f6c2591ba78fa4ca3de9fd1fe">
496
-String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
497
-String[] contexts = {"other", "hobby", "work", "education", "health", "personal", "financial"};
498
-
499
-static class PrivacyLevel {
500
-  public static int SECRET = 5;
501
-  public static int PRIVATE = 4;
502
-  public static int INTIMATE = 3;
503
-  public static int AFFILIATE = 2;
504
-  public static int PUBLIC = 1;
505
-  public static int COMMONS = 0;
506
-}
507
-
508
-static class ContextType {
509
-  public static int FINANCIAL = 6;
510
-  public static int PERSONAL = 5; 
511
-  public static int HEALTH = 4;
512
-  public static int EDUCATION = 3;
513
-  public static int WORK = 2;
514
-  public static int HOBBY = 1;
515
-  public static int OTHER = 0;
516
-}
517
-
518
-int[][] colors = generateColors();
519
-
520
-//generate colors to maximize contrast
521
-int[][] generateColors()
522
-{
523
-  int[][] pcolors = new int[contexts.length][levels.length];
524
-  
525
-//we start with d0 as a seed color
526
-  color seed = #FFE9BE;//seed color
527
-  
528
-  colorMode(HSB);
529
-  
530
-  float h_seed = hue(seed);
531
-  float s_seed = saturation(seed);
532
-  float v_seed = brightness(seed);
533
-
534
-  float levelshift = 255/levels.length;
535
-  float contextshift = 255/contexts.length + 1;
536
-  
537
-  //cycle hue for each level
538
-  for (int i = 0; i < contexts.length; i++){
539
-    float h = h_seed + i * contextshift;
540
-    if(h > 255){h = h - 255;}
541
-    
542
-    //cycle brightness for each context
543
-    for(int j = 0; j < levels.length; j++)
544
-    {
545
-      float v = v_seed - (j * levelshift);
546
-      float s = s_seed + (j * levelshift); 
547
-      
548
-      color c = color(h,s,v);
549
-      pcolors[i][j] = c;
550
-    }
551
-  }
552
-  colorMode(RGB);
553
-
554
-  return pcolors;
555
-}
556
-
557
-public int getColor(int privacy_level, int context_type)
558
-{
559
-    return colors[context_type][privacy_level];
560
-}
561
-void draw(){
562
-  size(100,100);
563
-  background(0);
564
-  noStroke();
565
-  int level = PrivacyLevel.SECRET;
566
-  int contextType = ContextType.PERSONAL;
567
-  color secret_self = getColor(level, contextType);//expect dark red
568
-  fill(secret_self);
569
-  ellipse(50,50,50,50);
570
-}
571
-</script> <canvas id="ob-bbc53a7d7981a43f6c2591ba78fa4ca3de9fd1fe"></canvas>
572
-#+END_EXPORT
573
-
574
-#+name: color_example_src_2
575
-#+BEGIN_SRC java
576
-void draw(){
577
-  size(100,100);
578
-  background(0);
579
-  noStroke();
580
-  int level = PrivacyLevel.PUBLIC;
581
-  int contextType = ContextType.WORK;
582
-  color work_public = getColor(level, contextType);//expect light blueish
583
-  fill(work_public);
584
-  ellipse(50,50,50,50);
585
-}
586
-#+END_SRC
587
-
588
-#+name: color_example_2
589
-#+BEGIN_SRC processing :noweb yes
590
-<<colors>>
591
-<<color_example_src_2>>
592
-#+END_SRC 
593
-
594
-#+RESULTS: color_example_2
595
-#+BEGIN_EXPORT html
596
-<script src="processing.js"></script>
597
- <script type="text/processing" data-processing-target="ob-760b680df1e803a95f5ec520fa92b091eca605c2">
598
-//color definitions
599
-color a3 = #3A3B58;
600
-color b3 = #734246;
601
-color d3 = #B4561F;
602
-color c3 = #336F60;
603
-color f3 = #7A3E2A;
604
-color g3 = #A48137;
605
-color e2 = #97BBCB;
606
-color a4 = #3B4257;
607
-color b4 = #6A4345;
608
-color d4 = #86451F;
609
-color c4 = #345A48;
610
-color f4 = #A92F21;
611
-color g4 = #BC983B;
612
-color a5 = #3D4358;
613
-color b5 = #402623;
614
-color d5 = #85442D;
615
-color c5 = #3B403A;
616
-color f5 = #7A150B;
617
-color g5 = #252F2B;
618
-color a1 = #597099;
619
-color e4 = #0A3878;
620
-color b1 = #D16365;
621
-color d1 = #FFD43B;
622
-color c1 = #B7BF98;
623
-color e1 = #CAD2C8;
624
-color e0 = #F5EDE5;
625
-color f1 = #D17978;
626
-color g1 = #FDD23E;
627
-color a0 = #C5C3CC;
628
-color e3 = #0485B1;
629
-color b0 = #FFDCD6;
630
-color d0 = #FFE9BE;
631
-color c0 = #F0E9D5;
632
-color f0 = #E4C8BF;
633
-color g0 = #FBE6BA;
634
-color a2 = #3D4B79;
635
-color e5 = #084064;
636
-color b2 = #974244;
637
-color d2 = #F8AA08;
638
-color c2 = #4E937F;
639
-color f2 = #8F4330;
640
-color g2 = #FFDB03;
641
-
642
-color colors[][] = {
643
-  {a0,a1,a2,a3,a4,a5},
644
-  {b0,b1,b2,b3,b4,b5},
645
-  {c0,c1,c2,c3,c4,c5},
646
-  {d0,d1,d2,d3,d4,d5},
647
-  {e0,e1,e2,e3,e4,e5},
648
-  {f0,f1,f2,f3,f4,f5},
649
-  {g0,g1,g2,g3,g4,g5}
650
-};
651
-
652
-class PrivacyLevel {
653
-  public static int SECRET = 5; //passwords, keys etc. 
654
-  public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff 
655
-  public static int INTIMATE = 3;//e.g. stuff you share with family 
656
-  public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc 
657
-  public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle 
658
-  public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff 
659
-}
660
-
661
-class ContextType {
662
-  public static int SELF = 5; //stuff that applies strictly to yourself 
663
-  public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
664
-  public static int FRIENDS = 3;//stuff you share with friends 
665
-  public static int WORK = 2;//stuff you share in a professional context
666
-  public static int HOBBY = 1;//stuff you share in the context of a pastime
667
-  public static int OTHER = 0;//stuff that doesn't fit in any of the other types 
668
-}
669
-
670
-public int getColor(int privacy_level, int context_type)
671
-{
672
-  return colors[context_type][privacy_level];
673
-}
674
-void draw(){
675
-  size(100,100);
676
-  background(0);
677
-  noStroke();
678
-  int level = PrivacyLevel.PUBLIC;
679
-  int contextType = ContextType.WORK;
680
-  color secret_self = getColor(level, contextType);//should be light blueish
681
-  fill(secret_self);
682
-  ellipse(50,50,50,50);
683
-}
684
-</script> <canvas id="ob-760b680df1e803a95f5ec520fa92b091eca605c2"></canvas>
685
-#+END_EXPORT
686
-
687 471
 This table shows all colors for each context / privacy level combination.
688
-Click on the diagram to compare alternative generated colors for increased contrast between levels and contexts.
472
+Click on the diagram to compare colors sets.
689 473
 
690 474
 #+name: color_table
691 475
 #+BEGIN_SRC processing 
@@ -743,7 +527,7 @@ color colors[][] = {
743 527
   {g0,g1,g2,g3,g4,g5}
744 528
 };
745 529
 
746
-boolean procedural = false;
530
+boolean procedural = true;
747 531
 String[] levels = {"commons", "public", "affiliate", "intimate", "private", "secret"};
748 532
 String[] contextTypes = {"personal", "health", "education", "work", "hobby", "financial", "other"};
749 533
 static class PrivacyLevel {
@@ -1455,59 +1239,79 @@ text(request.application, centerX, centerY + rsize/1.5);
1455 1239
 ** Contexts
1456 1240
 We want to draw each context in relation to the request, 
1457 1241
 so we place each context equidistant from the request in the center.
1242
+Click on the picture to toggle preview of different (random) sizes and distances for the contexts.
1458 1243
 
1459 1244
 #+name: draw_context_src
1460 1245
 #+BEGIN_SRC java :exports none
1461
-void setup(){
1462
-  size(800,800);
1463
-  smooth();
1464
-  noLoop();
1465
-}
1246
+  void setup(){
1247
+    size(800,800);
1248
+    smooth();
1249
+    noLoop();
1250
+  }
1466 1251
 
1467
-//divide the circle by the amount of contexts 
1468
-//to get the angle between the lines that indicate the center of each context
1469
-float eqd_angle = TWO_PI / contexts.length;
1470
-  
1471
-void draw()
1472
-{
1473
-  //TODO move draw request to a function
1474
-  //the size of request is fixed for now
1475
-  float centerX = width/2;
1476
-  float centerY = height/2;
1477
-  float rsize = 55;
1252
+  //divide the circle by the amount of contexts 
1253
+  //to get the angle between the lines that indicate the center of each context
1254
+  float eqd_angle = TWO_PI / contexts.length;
1255
+  int varyDistance = 0;
1256
+
1257
+  //press any key to use random size and distance
1258
+  void mousePressed()
1259
+  {
1260
+    if(varyDistance ==  0){
1261
+      varyDistance = 1;
1262
+    }
1263
+    else{
1264
+      varyDistance = 0;
1265
+    }
1266
+    draw();
1267
+  }
1268
+
1269
+  void draw()
1270
+  {
1271
+    background(200);
1272
+
1273
+    //the size of request is fixed for now
1274
+    float centerX = width/2;
1275
+    float centerY = height/2;
1276
+    float rsize = 55;
1478 1277
   
1479
-  //color of request is mapped to the privacy type of the request, each request has one.
1480
-  color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
1481
-  fill(reqColor); 
1482
-  ellipse(centerX, centerY, rsize, rsize);
1278
+    //color of request is mapped to the privacy type of the request, each request has one.
1279
+    color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
1280
+    fill(reqColor); 
1281
+    ellipse(centerX, centerY, rsize, rsize);
1483 1282
   
1484
-  //show the name of the application that makes the request, centered below the circle
1485
-  fill(0);
1486
-  textAlign(CENTER,CENTER);
1487
-  text(request.application, centerX, centerY + rsize/1.5);
1283
+    //show the name of the application that makes the request, centered below the circle
1284
+    fill(0);
1285
+    textAlign(CENTER,CENTER);
1286
+    text(request.application, centerX, centerY + rsize/1.5);
1488 1287
 
1489
-  int count = 0;
1490
-  for(Context context : contexts)
1491
-  {
1492
-    float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
1493
-    
1494
-    float distance = 200;//random(100,300);//random between 50 and 300
1495
-    float csize = 100;//random(50,100); //random between 50 and 100
1496
-    float x = centerX + distance * cos(angle); //calculate xPos
1497
-    float y = centerY + distance * sin(angle); //calculate yPos
1288
+    int count = 0;
1289
+    for(Context context : contexts)
1290
+    {
1291
+      float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
1292
+     
1293
+      float distance = 200;
1294
+      float csize = 100;
1295
+      if(varyDistance == 1)
1296
+      {
1297
+        distance = random(100,300);
1298
+        csize = random(50,100);
1299
+      }
1300
+      float x = centerX + distance * cos(angle); //calculate xPos
1301
+      float y = centerY + distance * sin(angle); //calculate yPos
1498 1302
     
1499
-    //each context should have a contextType too, in order to base the color on it.
1500
-    color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
1501
-    fill(contextColor);
1502
-    ellipse(x, y, csize, csize);//fixed sizes and distances for now.
1303
+      //each context should have a contextType too, in order to base the color on it.
1304
+      color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
1305
+      fill(contextColor);
1306
+      ellipse(x, y, csize, csize);//fixed sizes and distances for now.
1503 1307
     
1504
-    //show context label
1505
-    fill(0);
1506
-    textAlign(CENTER,CENTER);
1507
-    text(context.title, x, y + csize/1.5);
1508
-    count++;
1308
+      //show context label
1309
+      fill(0);
1310
+      textAlign(CENTER,CENTER);
1311
+      text(context.title, x, y + csize/1.5);
1312
+      count++;
1313
+    }
1509 1314
   }
1510
-}
1511 1315
 #+END_SRC
1512 1316
 
1513 1317
 #+name: draw_context
@@ -1785,11 +1589,8 @@ void draw()
1785 1589
 </script> <canvas id="ob-9132253395f473daea034a69e849cbcaa3778561"></canvas>
1786 1590
 #+END_EXPORT
1787 1591
 
1788
-*** TODO: Can we use distance as well as color to indicate the relation?
1789
-*** TODO: Can we use size of the circle to indicate the weight, or use badges?
1790
-
1791 1592
 * Interaction
1792
-We intend to investigate this in Processing as well.
1593
+Drag the request from the center onto one of the contexts to see the calculated difference.
1793 1594
 
1794 1595
 #+name: diff_interaction_src
1795 1596
 #+BEGIN_SRC java :exports none
@@ -1834,7 +1635,7 @@ We intend to investigate this in Processing as well.
1834 1635
     stroke(strokeColor);
1835 1636
 
1836 1637
     color reqColor = getColor(request.plMean, request.contextType);
1837
-    fill(reqColor);
1638
+    fill(reqColor,127);
1838 1639
     ellipse(requestX,requestY, requestSize,requestSize);
1839 1640
    
1840 1641
     colorMode(HSB);
@@ -2430,7 +2231,5 @@ void mouseReleased()
2430 2231
 </script> <canvas id="ob-95c93303456868d70e9bd12946e4defd3dfd1425"></canvas>
2431 2232
 #+END_EXPORT
2432 2233
 
2433
-*** TODO: Show context_type 
2434
-*** TODO: use pl_mean for color level
2435 2234
 *** TODO: How does the end user actually accept the request? Is it by dragging the request onto the context?
2436 2235
 *** TODO: How does the end user decline the request?