Browse Source

updated request visualization

Taco 1 year ago
parent
commit
0e7030ae04
3 changed files with 371 additions and 119 deletions
  1. 1 0
      diff.xml
  2. 191 82
      entitlements.html
  3. 179 37
      entitlements.org

+ 1 - 0
diff.xml

@@ -2,6 +2,7 @@
2 2
 <result>
3 3
   <request>
4 4
     <application>decodeapp:facebook</application>
5
+    <contextType>0</contextType>
5 6
     <required>
6 7
       <property>decode:name</property>
7 8
       <property>decode:email</property>

+ 191 - 82
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 14:48 -->
6
+<!-- 2018-04-06 Fri 15:41 -->
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>
@@ -234,45 +234,45 @@ for the JavaScript code in this tag.
234 234
 <h2>Table of Contents</h2>
235 235
 <div id="text-table-of-contents">
236 236
 <ul>
237
-<li><a href="#org1f7ea23">1. Introduction</a></li>
238
-<li><a href="#org90c1308">2. Data Model</a>
237
+<li><a href="#org32b456b">1. Introduction</a></li>
238
+<li><a href="#orgd03ff6b">2. Data Model</a>
239 239
 <ul>
240
-<li><a href="#org07a93b4">2.1. Example wallet profile</a>
240
+<li><a href="#org3a05a7c">2.1. Example wallet profile</a>
241 241
 <ul>
242
-<li><a href="#org0f80798">2.1.1. Things to further investigate</a></li>
242
+<li><a href="#org5960c1d">2.1.1. Things to further investigate</a></li>
243 243
 </ul>
244 244
 </li>
245
-<li><a href="#orgedffc2e">2.2. Example request</a>
245
+<li><a href="#org2396396">2.2. Example request</a>
246 246
 <ul>
247
-<li><a href="#org6e6c14e">2.2.1. Things to further investigate</a></li>
247
+<li><a href="#org8a47427">2.2.1. Things to further investigate</a></li>
248 248
 </ul>
249 249
 </li>
250 250
 </ul>
251 251
 </li>
252
-<li><a href="#orgc2accfe">3. Data Comparison</a>
252
+<li><a href="#org4d72153">3. Data Comparison</a>
253 253
 <ul>
254 254
 <li>
255 255
 <ul>
256
-<li><a href="#org911d641">3.0.1. Things to further investigate</a></li>
256
+<li><a href="#org50b710d">3.0.1. Things to further investigate</a></li>
257 257
 </ul>
258 258
 </li>
259 259
 </ul>
260 260
 </li>
261
-<li><a href="#orgcf6cba0">4. Visualization</a>
261
+<li><a href="#org1332fc3">4. Visualization</a>
262 262
 <ul>
263
-<li><a href="#org89701f3">4.1. Request</a></li>
264
-<li><a href="#org1db413c">4.2. Contexts</a>
263
+<li><a href="#org9f97176">4.1. Request</a></li>
264
+<li><a href="#orgc83b740">4.2. Contexts</a>
265 265
 <ul>
266
-<li><a href="#orgd3563e0">4.2.1. Things to further investigate</a></li>
266
+<li><a href="#org2668e3e">4.2.1. Things to further investigate</a></li>
267 267
 </ul>
268 268
 </li>
269 269
 </ul>
270 270
 </li>
271
-<li><a href="#orgbb8d8f0">5. Interaction</a>
271
+<li><a href="#org084ab12">5. Interaction</a>
272 272
 <ul>
273 273
 <li>
274 274
 <ul>
275
-<li><a href="#org0d0d22b">5.0.1. Things to further investigate</a></li>
275
+<li><a href="#org8d8a728">5.0.1. Things to further investigate</a></li>
276 276
 </ul>
277 277
 </li>
278 278
 </ul>
@@ -280,8 +280,8 @@ for the JavaScript code in this tag.
280 280
 </ul>
281 281
 </div>
282 282
 </div>
283
-<div id="outline-container-org1f7ea23" class="outline-2">
284
-<h2 id="org1f7ea23"><span class="section-number-2">1</span> Introduction</h2>
283
+<div id="outline-container-org32b456b" class="outline-2">
284
+<h2 id="org32b456b"><span class="section-number-2">1</span> Introduction</h2>
285 285
 <div class="outline-text-2" id="text-1">
286 286
 <p>
287 287
 The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
@@ -301,25 +301,26 @@ A prelimary definition of six privacy levels (ordered from most private to least
301 301
 </ul>
302 302
 
303 303
 <p>
304
-A preliminary definition of 6 context types (ordered from the self outwards, but order is much less important here)
304
+A preliminary definition of context types
305 305
 </p>
306 306
 <ul class="org-ul">
307
-<li>SELF: stuff about your identity</li>
308
-<li>FAMILY: stuff that applies to you and your family (hopefully not facebook pics)</li>
309
-<li>FRIENDS: stuff you share with friends</li>
307
+<li>PERSONAL: data that relates to your personal life, you can have different instances, for example friends, family etc.</li>
308
+<li>HEALTH: health data, you can define different instances (biosignals, stuff to share with dentist, gp, hospital etc)</li>
309
+<li>EDUCATION: school / educational data (grades, certificates etc)</li>
310 310
 <li>WORK: stuff you share in a professional context</li>
311 311
 <li>HOBBY: stuff you share in the context of a pastime</li>
312
-<li>OTHER: for contexts that do not fit in one of the above</li>
312
+<li>FINANCIAL: for data about mortgages, insurance, taxes etc.</li>
313
+<li>OTHER: for everything that doesn't fit the above</li>
313 314
 </ul>
314 315
 </div>
315 316
 </div>
316 317
 
317
-<div id="outline-container-org90c1308" class="outline-2">
318
-<h2 id="org90c1308"><span class="section-number-2">2</span> Data Model</h2>
318
+<div id="outline-container-orgd03ff6b" class="outline-2">
319
+<h2 id="orgd03ff6b"><span class="section-number-2">2</span> Data Model</h2>
319 320
 <div class="outline-text-2" id="text-2">
320 321
 </div>
321
-<div id="outline-container-org07a93b4" class="outline-3">
322
-<h3 id="org07a93b4"><span class="section-number-3">2.1</span> Example wallet profile</h3>
322
+<div id="outline-container-org3a05a7c" class="outline-3">
323
+<h3 id="org3a05a7c"><span class="section-number-3">2.1</span> Example wallet profile</h3>
323 324
 <div class="outline-text-3" id="text-2-1">
324 325
 <p>
325 326
 This sample wallet profile datastructure consists of multiple contexts.
@@ -338,7 +339,7 @@ It overrides the default privacy level specified by the property type.
338 339
 </p>
339 340
 
340 341
 <div class="org-src-container">
341
-<pre class="src src-js" id="org70c7367"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
342
+<pre class="src src-js" id="orgea0e2d1"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
342 343
     contexts : 
343 344
     <span style="color: #bc6ec5;">[</span>
344 345
         <span style="color: #2d9574;">{</span>
@@ -397,8 +398,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
397 398
 </div>
398 399
 </div>
399 400
 
400
-<div id="outline-container-org0f80798" class="outline-4">
401
-<h4 id="org0f80798"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
401
+<div id="outline-container-org5960c1d" class="outline-4">
402
+<h4 id="org5960c1d"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
402 403
 <div class="outline-text-4" id="text-2-1-1">
403 404
 <ul class="org-ul">
404 405
 <li>Apply default weights to each property type, these can be overridden by attributing a privacy level to the property</li>
@@ -410,8 +411,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
410 411
 </div>
411 412
 </div>
412 413
 
413
-<div id="outline-container-orgedffc2e" class="outline-3">
414
-<h3 id="orgedffc2e"><span class="section-number-3">2.2</span> Example request</h3>
414
+<div id="outline-container-org2396396" class="outline-3">
415
+<h3 id="org2396396"><span class="section-number-3">2.2</span> Example request</h3>
415 416
 <div class="outline-text-3" id="text-2-2">
416 417
 <p>
417 418
 This sample application request consists of an application name, a set of required property types and a set of optional property types.
@@ -421,9 +422,9 @@ and the cumulative privacy weight by adding the privacy levels of each property
421 422
 </p>
422 423
 
423 424
 <div class="org-src-container">
424
-<pre class="src src-js" id="org5a023e5"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
425
+<pre class="src src-js" id="org156dd9d"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
425 426
     application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
426
-    preferred_context_type : <span style="color: #bc6ec5;">[</span><span style="color: #a45bad;">3</span>,<span style="color: #a45bad;">4</span>,<span style="color: #a45bad;">5</span><span style="color: #bc6ec5;">]</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">i think facebook would think they apply to these three contexts (self,family and friends)</span>
427
+    context_type : <span style="color: #a45bad;">0</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">personal</span>
427 428
     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>,
428 429
     optional : <span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"decode:phone"</span><span style="color: #bc6ec5;">]</span>
429 430
 <span style="color: #4f97d7;">}</span>
@@ -433,8 +434,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
433 434
 </div>
434 435
 </div>
435 436
 
436
-<div id="outline-container-org6e6c14e" class="outline-4">
437
-<h4 id="org6e6c14e"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
437
+<div id="outline-container-org8a47427" class="outline-4">
438
+<h4 id="org8a47427"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
438 439
 <div class="outline-text-4" id="text-2-2-1">
439 440
 <ul class="org-ul">
440 441
 <li>Create a generator that seeds a request with random required and optional property types</li>
@@ -446,8 +447,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
446 447
 </div>
447 448
 
448 449
 
449
-<div id="outline-container-orgc2accfe" class="outline-2">
450
-<h2 id="orgc2accfe"><span class="section-number-2">3</span> Data Comparison</h2>
450
+<div id="outline-container-org4d72153" class="outline-2">
451
+<h2 id="org4d72153"><span class="section-number-2">3</span> Data Comparison</h2>
451 452
 <div class="outline-text-2" id="text-3">
452 453
 <p>
453 454
 During the interaction we want to give the user insight into a couple of things;
@@ -463,7 +464,7 @@ In below ruby code a comparison is made by on creating the intersection and its
463 464
 </p>
464 465
 
465 466
 <div class="org-src-container">
466
-<pre class="src src-ruby" id="org0f1d714"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
467
+<pre class="src src-ruby" id="org9724946"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
467 468
   <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>
468 469
 
469 470
   request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
@@ -484,8 +485,8 @@ In below ruby code a comparison is made by on creating the intersection and its
484 485
 </div>
485 486
 </div>
486 487
 
487
-<div id="outline-container-org911d641" class="outline-4">
488
-<h4 id="org911d641"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
488
+<div id="outline-container-org50b710d" class="outline-4">
489
+<h4 id="org50b710d"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
489 490
 <div class="outline-text-4" id="text-3-0-1">
490 491
 <ul class="org-ul">
491 492
 <li>Calculate the weight (sum of privacy levels of the properties it contains) of each context before and after giving permission</li>
@@ -504,8 +505,8 @@ request is size 3
504 505
 </div>
505 506
 </div>
506 507
 
507
-<div id="outline-container-orgcf6cba0" class="outline-2">
508
-<h2 id="orgcf6cba0"><span class="section-number-2">4</span> Visualization</h2>
508
+<div id="outline-container-org1332fc3" class="outline-2">
509
+<h2 id="org1332fc3"><span class="section-number-2">4</span> Visualization</h2>
509 510
 <div class="outline-text-2" id="text-4">
510 511
 <p>
511 512
 We want to visualize the following things;
@@ -524,7 +525,7 @@ Different tones within the hue can be mapped to each privacy level.
524 525
 </p>
525 526
 
526 527
 <div class="org-src-container">
527
-<pre class="src src-java" id="org3eae36f"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
528
+<pre class="src src-java" id="org4916e0a"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
528 529
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a3</span> = #<span style="color: #a45bad;">3A3B58</span>;
529 530
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b3</span> = #<span style="color: #a45bad;">734246</span>;
530 531
 <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d3</span> = #B4561F;
@@ -608,7 +609,7 @@ Below snippet exemplifies a color for the SELF context with a privacy level SECR
608 609
 </p>
609 610
 
610 611
 <div class="org-src-container">
611
-<pre class="src src-java" id="orgd8bd243"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
612
+<pre class="src src-java" id="org9203d80"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
612 613
   size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
613 614
   background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
614 615
   noStroke<span style="color: #bc6ec5;">()</span>;
@@ -712,7 +713,7 @@ void draw(){
712 713
 </script> <canvas id="ob-16a3bfeaae0796f9c0bb86df72e7c664178dbee9"></canvas>
713 714
 
714 715
 <div class="org-src-container">
715
-<pre class="src src-java" id="orgd450db5"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
716
+<pre class="src src-java" id="org707887d"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
716 717
   size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
717 718
   background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
718 719
   noStroke<span style="color: #bc6ec5;">()</span>;
@@ -816,30 +817,121 @@ void draw(){
816 817
 </script> <canvas id="ob-aa9a4cb8275feb0ce1c5423b4f8d6a81fa9e4a49"></canvas>
817 818
 </div>
818 819
 
819
-<div id="outline-container-org89701f3" class="outline-3">
820
-<h3 id="org89701f3"><span class="section-number-3">4.1</span> Request</h3>
820
+<div id="outline-container-org9f97176" class="outline-3">
821
+<h3 id="org9f97176"><span class="section-number-3">4.1</span> Request</h3>
821 822
 <div class="outline-text-3" id="text-4-1">
822 823
 <div class="org-src-container">
823
-<pre class="src src-java" id="orgba23a8a">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
824
-background<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
824
+<pre class="src src-java" id="orge2a9699">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
825
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">background(0);</span>
825 826
 noFill<span style="color: #4f97d7;">()</span>;
826
-stroke<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">255</span><span style="color: #4f97d7;">)</span>;
827
-ellipse<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">56</span>, <span style="color: #a45bad;">46</span>, <span style="color: #a45bad;">55</span>, <span style="color: #a45bad;">55</span><span style="color: #4f97d7;">)</span>;
828
-text<span style="color: #4f97d7;">(</span>request.application, <span style="color: #a45bad;">10</span>, <span style="color: #a45bad;">10</span><span style="color: #4f97d7;">)</span>;
827
+
828
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">the size of request is fixed for now</span>
829
+<span style="color: #ce537a; font-weight: bold;">ffloat</span> <span style="color: #7590db;">centerX</span> = width/<span style="color: #a45bad;">2</span>;
830
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerY</span> = height/<span style="color: #a45bad;">2</span>;
831
+<span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">rsize</span> = <span style="color: #a45bad;">55</span>;
832
+
833
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color of request is mapped to the privacy type of the request, each request has one.</span>
834
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">INTIMATE because it's in the middle of the privacy level continuum</span>
835
+<span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">reqColor</span> = getColor<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.INTIMATE, request.contextType<span style="color: #4f97d7;">)</span>;
836
+fill<span style="color: #4f97d7;">(</span>reqColor<span style="color: #4f97d7;">)</span>; 
837
+ellipse<span style="color: #4f97d7;">(</span>centerX, centerY, rsize, rsize<span style="color: #4f97d7;">)</span>;
838
+
839
+<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show the name of the application that makes the request, centered below the circle</span>
840
+fill<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
841
+textAlign<span style="color: #4f97d7;">(</span>CENTER,CENTER<span style="color: #4f97d7;">)</span>;
842
+text<span style="color: #4f97d7;">(</span>request.application, centerX, centerY + rsize/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #4f97d7;">)</span>;
829 843
 </pre>
830 844
 </div>
831 845
 
832 846
 <script src="processing.js"></script>
833
- <script type="text/processing" data-processing-target="ob-1d9a0699e09552d1b193ca638825c0e13ad78a91">
847
+ <script type="text/processing" data-processing-target="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a">
848
+//color definitions
849
+color a3 = #3A3B58;
850
+color b3 = #734246;
851
+color d3 = #B4561F;
852
+color c3 = #336F60;
853
+color f3 = #7A3E2A;
854
+color g3 = #A48137;
855
+color e2 = #97BBCB;
856
+color a4 = #3B4257;
857
+color b4 = #6A4345;
858
+color d4 = #86451F;
859
+color c4 = #345A48;
860
+color f4 = #A92F21;
861
+color g4 = #BC983B;
862
+color a5 = #3D4358;
863
+color b5 = #402623;
864
+color d5 = #85442D;
865
+color c5 = #3B403A;
866
+color f5 = #7A150B;
867
+color g5 = #252F2B;
868
+color a1 = #597099;
869
+color e4 = #0A3878;
870
+color b1 = #D16365;
871
+color d1 = #FFD43B;
872
+color c1 = #B7BF98;
873
+color e1 = #CAD2C8;
874
+color e0 = #F5EDE5;
875
+color f1 = #D17978;
876
+color g1 = #FDD23E;
877
+color a0 = #C5C3CC;
878
+color e3 = #0485B1;
879
+color b0 = #FFDCD6;
880
+color d0 = #FFE9BE;
881
+color c0 = #F0E9D5;
882
+color f0 = #E4C8BF;
883
+color g0 = #FBE6BA;
884
+color a2 = #3D4B79;
885
+color e5 = #084064;
886
+color b2 = #974244;
887
+color d2 = #F8AA08;
888
+color c2 = #4E937F;
889
+color f2 = #8F4330;
890
+color g2 = #FFDB03;
891
+
892
+color colors[][] = {
893
+  {b0,b1,b2,b3,b4,b5},
894
+  {c0,c1,c2,c3,c4,c5},
895
+  {a0,a1,a2,a3,a4,a5},
896
+  {d0,d1,d2,d3,d4,d5},
897
+  {e0,e1,e2,e3,e4,e5},
898
+  {f0,f1,f2,f3,f4,f5},
899
+  {g0,g1,g2,g3,g4,g5}
900
+};
901
+
902
+class PrivacyLevel {
903
+  public static int SECRET = 5; //passwords, keys etc. 
904
+  public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff 
905
+  public static int INTIMATE = 3;//e.g. stuff you share with family 
906
+  public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc 
907
+  public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle 
908
+  public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff 
909
+}
910
+
911
+class ContextType {
912
+  public static int SELF = 5; //stuff that applies strictly to yourself 
913
+  public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
914
+  public static int FRIENDS = 3;//stuff you share with friends 
915
+  public static int WORK = 2;//stuff you share in a professional context
916
+  public static int HOBBY = 1;//stuff you share in the context of a pastime
917
+  public static int OTHER = 0;//stuff that doesn't fit in any of the other types 
918
+}
919
+
920
+public int getColor(int privacy_level, int context_type)
921
+{
922
+  return colors[context_type][privacy_level];
923
+}
834 924
 class Request
835 925
 {
836 926
   public String application;
927
+  public int contextType;
837 928
   public String[] required_properties;
838 929
   public String[] optional_properties;
839 930
 
840
-  public Request(String app, String[] req, String[] opt)
931
+  public Request(String app, int contextType, String[] req, String[] opt)
841 932
   {
842 933
     this.application = app;
934
+    this.contextType = contextType;
843 935
     this.required_properties = req;
844 936
     this.optional_properties = opt;
845 937
   }
@@ -894,18 +986,19 @@ Request parseRequest(XMLElement xml)
894 986
 {
895 987
   XMLElement req = xml.getChild(0);
896 988
   String name = req.getChild(0).getContent();
897
-  String[] required = new String[req.getChild(1).getChildCount()];
898
-  String[] optional = new String[req.getChild(2).getChildCount()];
989
+  int contextType = req.getChild(1).getContent();
990
+  String[] required = new String[req.getChild(2).getChildCount()];
991
+  String[] optional = new String[req.getChild(3).getChildCount()];
899 992
   
900 993
   for (int i = 0; i < required.length; i++) {
901
-    required[i] = req.getChild(1).getChild(i).getContent();
994
+    required[i] = req.getChild(2).getChild(i).getContent();
902 995
   }
903 996
 
904 997
   for (int i = 0; i < optional.length; i++) {
905
-    optional[i] = req.getChild(2).getChild(i).getContent();
998
+    optional[i] = req.getChild(3).getChild(i).getContent();
906 999
   }
907 1000
 
908
-  Request r = new Request(name,required,optional);
1001
+  Request r = new Request(name,contextType,required,optional);
909 1002
   return r;
910 1003
 }
911 1004
 
@@ -972,24 +1065,37 @@ Request request = parseRequest(doc);
972 1065
 Diff[] diffs = parseDiffs(doc);
973 1066
 Context[] contexts = parseProfile(doc);
974 1067
 size(200,200);
975
-background(0);
1068
+//background(0);
976 1069
 noFill();
977
-stroke(255);
978
-ellipse(56, 46, 55, 55);
979
-text(request.application, 10, 10);
980
-</script> <canvas id="ob-1d9a0699e09552d1b193ca638825c0e13ad78a91"></canvas>
1070
+
1071
+//the size of request is fixed for now
1072
+ffloat centerX = width/2;
1073
+float centerY = height/2;
1074
+float rsize = 55;
1075
+
1076
+//color of request is mapped to the privacy type of the request, each request has one.
1077
+//INTIMATE because it's in the middle of the privacy level continuum
1078
+color reqColor = getColor(PrivacyLevel.INTIMATE, request.contextType);
1079
+fill(reqColor); 
1080
+ellipse(centerX, centerY, rsize, rsize);
1081
+
1082
+//show the name of the application that makes the request, centered below the circle
1083
+fill(0);
1084
+textAlign(CENTER,CENTER);
1085
+text(request.application, centerX, centerY + rsize/1.5);
1086
+</script> <canvas id="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a"></canvas>
981 1087
 </div>
982 1088
 </div>
983 1089
 
984
-<div id="outline-container-org1db413c" class="outline-3">
985
-<h3 id="org1db413c"><span class="section-number-3">4.2</span> Contexts</h3>
1090
+<div id="outline-container-orgc83b740" class="outline-3">
1091
+<h3 id="orgc83b740"><span class="section-number-3">4.2</span> Contexts</h3>
986 1092
 <div class="outline-text-3" id="text-4-2">
987 1093
 <p>
988 1094
 How do we visulize each context? Intend to do this in processing too.
989 1095
 </p>
990 1096
 
991 1097
 <div class="org-src-container">
992
-<pre class="src src-java" id="orgfa7ec11"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the difference for each context with the request</span>
1098
+<pre class="src src-java" id="org2ad8534"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the difference for each context with the request</span>
993 1099
 size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
994 1100
 background<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
995 1101
 noFill<span style="color: #4f97d7;">()</span>;
@@ -1001,16 +1107,18 @@ text<span style="color: #4f97d7;">(</span>contexts<span style="color: #bc6ec5;">
1001 1107
 </div>
1002 1108
 
1003 1109
 <script src="processing.js"></script>
1004
- <script type="text/processing" data-processing-target="ob-07ccb7088b2ee119415adddbb05248cf0ef709d9">
1110
+ <script type="text/processing" data-processing-target="ob-74f1a6b8e72f844b929f5904bea850acb6918dbb">
1005 1111
 class Request
1006 1112
 {
1007 1113
   public String application;
1114
+  public int contextType;
1008 1115
   public String[] required_properties;
1009 1116
   public String[] optional_properties;
1010 1117
 
1011
-  public Request(String app, String[] req, String[] opt)
1118
+  public Request(String app, int contextType, String[] req, String[] opt)
1012 1119
   {
1013 1120
     this.application = app;
1121
+    this.contextType = contextType;
1014 1122
     this.required_properties = req;
1015 1123
     this.optional_properties = opt;
1016 1124
   }
@@ -1065,18 +1173,19 @@ Request parseRequest(XMLElement xml)
1065 1173
 {
1066 1174
   XMLElement req = xml.getChild(0);
1067 1175
   String name = req.getChild(0).getContent();
1068
-  String[] required = new String[req.getChild(1).getChildCount()];
1069
-  String[] optional = new String[req.getChild(2).getChildCount()];
1176
+  int contextType = req.getChild(1).getContent();
1177
+  String[] required = new String[req.getChild(2).getChildCount()];
1178
+  String[] optional = new String[req.getChild(3).getChildCount()];
1070 1179
   
1071 1180
   for (int i = 0; i < required.length; i++) {
1072
-    required[i] = req.getChild(1).getChild(i).getContent();
1181
+    required[i] = req.getChild(2).getChild(i).getContent();
1073 1182
   }
1074 1183
 
1075 1184
   for (int i = 0; i < optional.length; i++) {
1076
-    optional[i] = req.getChild(2).getChild(i).getContent();
1185
+    optional[i] = req.getChild(3).getChild(i).getContent();
1077 1186
   }
1078 1187
 
1079
-  Request r = new Request(name,required,optional);
1188
+  Request r = new Request(name,contextType,required,optional);
1080 1189
   return r;
1081 1190
 }
1082 1191
 
@@ -1150,11 +1259,11 @@ stroke(255);
1150 1259
 ellipse(56, 46, 55, 55);
1151 1260
 text(diffs[0].context, 10, 10);
1152 1261
 text(contexts[0].properties[0].value, 10, 50);
1153
-</script> <canvas id="ob-07ccb7088b2ee119415adddbb05248cf0ef709d9"></canvas>
1262
+</script> <canvas id="ob-74f1a6b8e72f844b929f5904bea850acb6918dbb"></canvas>
1154 1263
 </div>
1155 1264
 
1156
-<div id="outline-container-orgd3563e0" class="outline-4">
1157
-<h4 id="orgd3563e0"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
1265
+<div id="outline-container-org2668e3e" class="outline-4">
1266
+<h4 id="org2668e3e"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
1158 1267
 <div class="outline-text-4" id="text-4-2-1">
1159 1268
 <ul class="org-ul">
1160 1269
 <li>How do we show relation between request and each context with color?</li>
@@ -1166,16 +1275,16 @@ text(contexts[0].properties[0].value, 10, 50);
1166 1275
 </div>
1167 1276
 </div>
1168 1277
 
1169
-<div id="outline-container-orgbb8d8f0" class="outline-2">
1170
-<h2 id="orgbb8d8f0"><span class="section-number-2">5</span> Interaction</h2>
1278
+<div id="outline-container-org084ab12" class="outline-2">
1279
+<h2 id="org084ab12"><span class="section-number-2">5</span> Interaction</h2>
1171 1280
 <div class="outline-text-2" id="text-5">
1172 1281
 <p>
1173 1282
 We intend to investigate this in Processing as well.
1174 1283
 </p>
1175 1284
 </div>
1176 1285
 
1177
-<div id="outline-container-org0d0d22b" class="outline-4">
1178
-<h4 id="org0d0d22b"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
1286
+<div id="outline-container-org8d8a728" class="outline-4">
1287
+<h4 id="org8d8a728"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
1179 1288
 <div class="outline-text-4" id="text-5-0-1">
1180 1289
 <ul class="org-ul">
1181 1290
 <li>How does the end user actually accept the request? Is it by dragging the request onto the context?</li>
@@ -1187,7 +1296,7 @@ We intend to investigate this in Processing as well.
1187 1296
 </div>
1188 1297
 <div id="postamble" class="status">
1189 1298
 <p class="author">Author: Taco</p>
1190
-<p class="date">Created: 2018-04-06 Fri 14:48</p>
1299
+<p class="date">Created: 2018-04-06 Fri 15:41</p>
1191 1300
 <p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
1192 1301
 </div>
1193 1302
 </body>

+ 179 - 37
entitlements.org

@@ -11,13 +11,14 @@ A prelimary definition of six privacy levels (ordered from most private to least
11 11
 - PUBLIC: e.g. stuff that everybody may know, your e.g. twitter handle 
12 12
 - COMMONS: stuff that is intended for the public good / commons, e.g. anonimized IoT stuff
13 13
 
14
-A preliminary definition of 6 context types (ordered from the self outwards, but order is much less important here)
15
-- SELF: stuff about your identity 
16
-- FAMILY: stuff that applies to you and your family (hopefully not facebook pics) 
17
-- FRIENDS: stuff you share with friends
14
+A preliminary definition of context types
15
+- PERSONAL: data that relates to your personal life, you can have different instances, for example friends, family etc. 
16
+- HEALTH: health data, you can define different instances (biosignals, stuff to share with dentist, gp, hospital etc) 
17
+- EDUCATION: school / educational data (grades, certificates etc)
18 18
 - WORK: stuff you share in a professional context
19 19
 - HOBBY: stuff you share in the context of a pastime  
20
-- OTHER: for contexts that do not fit in one of the above
20
+- FINANCIAL: for data about mortgages, insurance, taxes etc.
21
+- OTHER: for everything that doesn't fit the above
21 22
   
22 23
 * Data Model
23 24
 ** Example wallet profile
@@ -111,7 +112,7 @@ and the cumulative privacy weight by adding the privacy levels of each property
111 112
 #+BEGIN_SRC js :results output
112 113
   var request = {
113 114
       application : "decodeapp:facebook",
114
-      preferred_context_type : [3,4,5],//i think facebook would think they apply to these three contexts (self,family and friends)
115
+      context_type : 0,//personal
115 116
       required : ["decode:name", "decode:email", "decode:address"],
116 117
       optional : ["decode:phone"]
117 118
   }
@@ -120,13 +121,13 @@ and the cumulative privacy weight by adding the privacy levels of each property
120 121
 #+END_SRC
121 122
 
122 123
 #+RESULTS: request
123
-: {"application":"decodeapp:facebook","preferred_context_type":[3,4,5],"required":["decode:name","decode:email","decode:address"],"optional":["decode:phone"]}
124
+: {"application":"decodeapp:facebook","context_type":0,"required":["decode:name","decode:email","decode:address"],"optional":["decode:phone"]}
124 125
 
125 126
 *** Things to further investigate
126 127
     - Create a generator that seeds a request with random required and optional property types
127 128
     - Attribute a default context type to the application  
128 129
 
129
-
130
+      
130 131
 * Data Comparison
131 132
 During the interaction we want to give the user insight into a couple of things;
132 133
 - How does the requested set of properties relate to the different contexts? How well does a context match to the request?
@@ -162,7 +163,8 @@ In below ruby code a comparison is made by on creating the intersection and its
162 163
   doc = Nokogiri::XML::Builder.new do |xml|
163 164
   xml.result {
164 165
     xml.request { 
165
-      xml.application request["application"] 
166
+      xml.application request["application"]
167
+      xml.contextType request["context_type"]
166 168
       xml.required {
167 169
         request["required"].each do |p| xml.property p end
168 170
       } 
@@ -550,12 +552,14 @@ void draw(){
550 552
 class Request
551 553
 {
552 554
   public String application;
555
+  public int contextType;
553 556
   public String[] required_properties;
554 557
   public String[] optional_properties;
555 558
 
556
-  public Request(String app, String[] req, String[] opt)
559
+  public Request(String app, int contextType, String[] req, String[] opt)
557 560
   {
558 561
     this.application = app;
562
+    this.contextType = contextType;
559 563
     this.required_properties = req;
560 564
     this.optional_properties = opt;
561 565
   }
@@ -610,18 +614,19 @@ Request parseRequest(XMLElement xml)
610 614
 {
611 615
   XMLElement req = xml.getChild(0);
612 616
   String name = req.getChild(0).getContent();
613
-  String[] required = new String[req.getChild(1).getChildCount()];
614
-  String[] optional = new String[req.getChild(2).getChildCount()];
617
+  int contextType = req.getChild(1).getContent();
618
+  String[] required = new String[req.getChild(2).getChildCount()];
619
+  String[] optional = new String[req.getChild(3).getChildCount()];
615 620
   
616 621
   for (int i = 0; i < required.length; i++) {
617
-    required[i] = req.getChild(1).getChild(i).getContent();
622
+    required[i] = req.getChild(2).getChild(i).getContent();
618 623
   }
619 624
 
620 625
   for (int i = 0; i < optional.length; i++) {
621
-    optional[i] = req.getChild(2).getChild(i).getContent();
626
+    optional[i] = req.getChild(3).getChild(i).getContent();
622 627
   }
623 628
 
624
-  Request r = new Request(name,required,optional);
629
+  Request r = new Request(name,contextType,required,optional);
625 630
   return r;
626 631
 }
627 632
 
@@ -693,15 +698,29 @@ Context[] contexts = parseProfile(doc);
693 698
 #+name: draw_request_src
694 699
 #+BEGIN_SRC java
695 700
 size(200,200);
696
-background(0);
701
+//background(0);
697 702
 noFill();
698
-stroke(255);
699
-ellipse(56, 46, 55, 55);
700
-text(request.application, 10, 10);
703
+
704
+//the size of request is fixed for now
705
+ffloat centerX = width/2;
706
+float centerY = height/2;
707
+float rsize = 55;
708
+
709
+//color of request is mapped to the privacy type of the request, each request has one.
710
+//INTIMATE because it's in the middle of the privacy level continuum
711
+color reqColor = getColor(PrivacyLevel.INTIMATE, request.contextType);
712
+fill(reqColor); 
713
+ellipse(centerX, centerY, rsize, rsize);
714
+
715
+//show the name of the application that makes the request, centered below the circle
716
+fill(0);
717
+textAlign(CENTER,CENTER);
718
+text(request.application, centerX, centerY + rsize/1.5);
701 719
 #+END_SRC
702 720
 
703 721
 #+name: draw_request
704 722
 #+BEGIN_SRC processing :noweb yes
723
+<<colors>>
705 724
 <<glue>>
706 725
 <<draw_request_src>>
707 726
 #+END_SRC
@@ -709,16 +728,94 @@ text(request.application, 10, 10);
709 728
 #+RESULTS: draw_request
710 729
 #+BEGIN_EXPORT html
711 730
 <script src="processing.js"></script>
712
- <script type="text/processing" data-processing-target="ob-45703f82a800b7bb16cef7d12c47ae59501bcf3c">
731
+ <script type="text/processing" data-processing-target="ob-7bacb312f1e57618d3a25d1d7df81deb408229ff">
732
+//color definitions
733
+color a3 = #3A3B58;
734
+color b3 = #734246;
735
+color d3 = #B4561F;
736
+color c3 = #336F60;
737
+color f3 = #7A3E2A;
738
+color g3 = #A48137;
739
+color e2 = #97BBCB;
740
+color a4 = #3B4257;
741
+color b4 = #6A4345;
742
+color d4 = #86451F;
743
+color c4 = #345A48;
744
+color f4 = #A92F21;
745
+color g4 = #BC983B;
746
+color a5 = #3D4358;
747
+color b5 = #402623;
748
+color d5 = #85442D;
749
+color c5 = #3B403A;
750
+color f5 = #7A150B;
751
+color g5 = #252F2B;
752
+color a1 = #597099;
753
+color e4 = #0A3878;
754
+color b1 = #D16365;
755
+color d1 = #FFD43B;
756
+color c1 = #B7BF98;
757
+color e1 = #CAD2C8;
758
+color e0 = #F5EDE5;
759
+color f1 = #D17978;
760
+color g1 = #FDD23E;
761
+color a0 = #C5C3CC;
762
+color e3 = #0485B1;
763
+color b0 = #FFDCD6;
764
+color d0 = #FFE9BE;
765
+color c0 = #F0E9D5;
766
+color f0 = #E4C8BF;
767
+color g0 = #FBE6BA;
768
+color a2 = #3D4B79;
769
+color e5 = #084064;
770
+color b2 = #974244;
771
+color d2 = #F8AA08;
772
+color c2 = #4E937F;
773
+color f2 = #8F4330;
774
+color g2 = #FFDB03;
775
+
776
+color colors[][] = {
777
+  {b0,b1,b2,b3,b4,b5},
778
+  {c0,c1,c2,c3,c4,c5},
779
+  {a0,a1,a2,a3,a4,a5},
780
+  {d0,d1,d2,d3,d4,d5},
781
+  {e0,e1,e2,e3,e4,e5},
782
+  {f0,f1,f2,f3,f4,f5},
783
+  {g0,g1,g2,g3,g4,g5}
784
+};
785
+
786
+class PrivacyLevel {
787
+  public static int SECRET = 5; //passwords, keys etc. 
788
+  public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff 
789
+  public static int INTIMATE = 3;//e.g. stuff you share with family 
790
+  public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc 
791
+  public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle 
792
+  public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff 
793
+}
794
+
795
+class ContextType {
796
+  public static int SELF = 5; //stuff that applies strictly to yourself 
797
+  public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
798
+  public static int FRIENDS = 3;//stuff you share with friends 
799
+  public static int WORK = 2;//stuff you share in a professional context
800
+  public static int HOBBY = 1;//stuff you share in the context of a pastime
801
+  public static int OTHER = 0;//stuff that doesn't fit in any of the other types 
802
+}
803
+
804
+public int getColor(int privacy_level, int context_type)
805
+{
806
+  return colors[context_type][privacy_level];
807
+}
713 808
 class Request
714 809
 {
715 810
   public String application;
811
+  public int contextType;
716 812
   public String[] required_properties;
717 813
   public String[] optional_properties;
718 814
 
719
-  public Request(String app, String[] req, String[] opt)
815
+  public Request(String app, int contextType, String[] req, String[] opt)
720 816
   {
721 817
     this.application = app;
818
+    this.contextType = contextType;
722 819
     this.required_properties = req;
723 820
     this.optional_properties = opt;
724 821
   }
@@ -738,58 +835,89 @@ class Diff
738 835
   } 
739 836
 }
740 837
 
741
-//TODO: add Profile / Context / Property classes here
838
+class Property
839
+{
840
+  public String type;
841
+  public String value;
842
+  public int pl;//privacy level
843
+
844
+  public Property(String type, String value, int pl)
845
+  {
846
+    this.type = type;
847
+    this.value = value;
848
+    this.pl = pl;
849
+  }
850
+}
851
+
742 852
 class Context
743 853
 {
744 854
   public String title;
745 855
   public int plSum;
856
+  public Property[] properties;
746 857
 
747
-  public Context(String title, int plSum)
858
+  public Context(String title, int plSum, Property[] properties)
748 859
   {
749 860
     this.title = title;
750 861
     this.plSum = plSum;
862
+    this.properties = properties;
751 863
   }
752 864
 }
753 865
 
754 866
 XMLElement doc = new XMLElement(this, 'diff.xml');
755 867
 
756 868
 //create typed versions because this is java :-(
757
-Request parseRequest(xml)
869
+Request parseRequest(XMLElement xml)
758 870
 {
759 871
   XMLElement req = xml.getChild(0);
760 872
   String name = req.getChild(0).getContent();
761
-  String[] required = new String[req.getChild(1).getChildCount()];
762
-  String[] optional = new String[req.getChild(2).getChildCount()];
873
+  int contextType = req.getChild(1).getContent();
874
+  String[] required = new String[req.getChild(2).getChildCount()];
875
+  String[] optional = new String[req.getChild(3).getChildCount()];
763 876
   
764 877
   for (int i = 0; i < required.length; i++) {
765
-    required[i] = req.getChild(1).getChild(i).getContent();
878
+    required[i] = req.getChild(2).getChild(i).getContent();
766 879
   }
767 880
 
768 881
   for (int i = 0; i < optional.length; i++) {
769
-    optional[i] = req.getChild(2).getChild(i).getContent();
882
+    optional[i] = req.getChild(3).getChild(i).getContent();
770 883
   }
771 884
 
772
-  Request r = new Request(name,required,optional);
885
+  Request r = new Request(name,contextType,required,optional);
773 886
   return r;
774 887
 }
775 888
 
776
-Context[] parseProfile(xml)
889
+Context[] parseProfile(XMLElement xml)
777 890
 {
778
-  //TODO: implement this! so that we can finally start on the real visualization
779 891
   XMLElement profile = xml.getChild(2);
780 892
   Context[] contexts = new Context[profile.getChildCount()];
781 893
 
782 894
   for(int i = 0; i < contexts.length; i++)
783 895
   {
784 896
     String contextName = profile.getChild(i).getChild(0).getContent();
785
-    int plSum = profile.getChild(i).getChild(0).getContent();
897
+    int plSum = parseInt(profile.getChild(i).getChild(1).getContent());
786 898
 
787
-    Context context = new Context(contextName, plSum);
899
+    XMLElement propertiesEl = profile.getChild(i).getChild(2);
900
+    Property[] properties = new Property[propertiesEl.getChildCount()];
901
+    for(int j = 0; j < properties.length; j++)
902
+    {
903
+      Property prop = parseProperty(propertiesEl.getChild(j));
904
+      properties[j] = prop;
905
+    }
906
+
907
+    Context context = new Context(contextName, plSum, properties);
788 908
     contexts[i] = context;
789 909
   }
790 910
   return contexts;
791 911
 }
792 912
 
913
+Property parseProperty(XMLElement propertyEl)
914
+{
915
+  String propertyType = propertyEl.getChild(0).getContent();
916
+  String value = propertyEl.getChild(1).getContent();
917
+  int pl = parseInt(propertyEl.getChild(2).getContent());
918
+  return new Property(propertyType, value, pl);
919
+}
920
+
793 921
 //create typed versions because this is java :-(
794 922
 Diff[] parseDiffs(xml)
795 923
 {
@@ -821,12 +949,26 @@ Request request = parseRequest(doc);
821 949
 Diff[] diffs = parseDiffs(doc);
822 950
 Context[] contexts = parseProfile(doc);
823 951
 size(200,200);
824
-background(0);
952
+//background(0);
825 953
 noFill();
826 954
 stroke(255);
827
-ellipse(56, 46, 55, 55);
828
-text(request.application, 10, 10);
829
-</script> <canvas id="ob-45703f82a800b7bb16cef7d12c47ae59501bcf3c"></canvas>
955
+
956
+//the size of request is fixed for now
957
+ffloat centerX = width/2;
958
+float centerY = height/2;
959
+float rsize = 55;
960
+
961
+//color of request is mapped to the privacy type of the request, each request has one.
962
+//INTIMATE because it's in the middle of the privacy level continuum
963
+color reqColor = getColor(PrivacyLevel.INTIMATE, request.contextType);
964
+fill(reqColor); 
965
+ellipse(centerX, centerY, rsize, rsize);
966
+
967
+//show the name of the application that makes the request, centered below the circle
968
+fill(0);
969
+textAlign(CENTER,CENTER);
970
+text("hoezo", centerX, centerY + rsize/1.5);
971
+</script> <canvas id="ob-7bacb312f1e57618d3a25d1d7df81deb408229ff"></canvas>
830 972
 #+END_EXPORT
831 973
 
832 974
 ** Contexts