|
@@ -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 15:41 -->
|
|
6
|
+<!-- 2018-04-06 Fri 16:25 -->
|
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>‎</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="#org32b456b">1. Introduction</a></li>
|
238
|
|
-<li><a href="#orgd03ff6b">2. Data Model</a>
|
|
237
|
+<li><a href="#orgdb176e6">1. Introduction</a></li>
|
|
238
|
+<li><a href="#org733e1aa">2. Data Model</a>
|
239
|
239
|
<ul>
|
240
|
|
-<li><a href="#org3a05a7c">2.1. Example wallet profile</a>
|
|
240
|
+<li><a href="#orgae8725d">2.1. Example wallet profile</a>
|
241
|
241
|
<ul>
|
242
|
|
-<li><a href="#org5960c1d">2.1.1. Things to further investigate</a></li>
|
|
242
|
+<li><a href="#org998aa04">2.1.1. Things to further investigate</a></li>
|
243
|
243
|
</ul>
|
244
|
244
|
</li>
|
245
|
|
-<li><a href="#org2396396">2.2. Example request</a>
|
|
245
|
+<li><a href="#org0f1aa15">2.2. Example request</a>
|
246
|
246
|
<ul>
|
247
|
|
-<li><a href="#org8a47427">2.2.1. Things to further investigate</a></li>
|
|
247
|
+<li><a href="#org5767244">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="#org4d72153">3. Data Comparison</a>
|
|
252
|
+<li><a href="#orgf88b6fa">3. Data Comparison</a>
|
253
|
253
|
<ul>
|
254
|
254
|
<li>
|
255
|
255
|
<ul>
|
256
|
|
-<li><a href="#org50b710d">3.0.1. Things to further investigate</a></li>
|
|
256
|
+<li><a href="#org1ea58b1">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="#org1332fc3">4. Visualization</a>
|
|
261
|
+<li><a href="#orgc346fdb">4. Visualization</a>
|
262
|
262
|
<ul>
|
263
|
|
-<li><a href="#org9f97176">4.1. Request</a></li>
|
264
|
|
-<li><a href="#orgc83b740">4.2. Contexts</a>
|
|
263
|
+<li><a href="#org428a791">4.1. Request</a></li>
|
|
264
|
+<li><a href="#org5e2cb1e">4.2. Contexts</a>
|
265
|
265
|
<ul>
|
266
|
|
-<li><a href="#org2668e3e">4.2.1. Things to further investigate</a></li>
|
|
266
|
+<li><a href="#orgd9d5835">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="#org084ab12">5. Interaction</a>
|
|
271
|
+<li><a href="#org7cb73b5">5. Interaction</a>
|
272
|
272
|
<ul>
|
273
|
273
|
<li>
|
274
|
274
|
<ul>
|
275
|
|
-<li><a href="#org8d8a728">5.0.1. Things to further investigate</a></li>
|
|
275
|
+<li><a href="#org2fae9f9">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-org32b456b" class="outline-2">
|
284
|
|
-<h2 id="org32b456b"><span class="section-number-2">1</span> Introduction</h2>
|
|
283
|
+<div id="outline-container-orgdb176e6" class="outline-2">
|
|
284
|
+<h2 id="orgdb176e6"><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.
|
|
@@ -315,12 +315,12 @@ A preliminary definition of context types
|
315
|
315
|
</div>
|
316
|
316
|
</div>
|
317
|
317
|
|
318
|
|
-<div id="outline-container-orgd03ff6b" class="outline-2">
|
319
|
|
-<h2 id="orgd03ff6b"><span class="section-number-2">2</span> Data Model</h2>
|
|
318
|
+<div id="outline-container-org733e1aa" class="outline-2">
|
|
319
|
+<h2 id="org733e1aa"><span class="section-number-2">2</span> Data Model</h2>
|
320
|
320
|
<div class="outline-text-2" id="text-2">
|
321
|
321
|
</div>
|
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>
|
|
322
|
+<div id="outline-container-orgae8725d" class="outline-3">
|
|
323
|
+<h3 id="orgae8725d"><span class="section-number-3">2.1</span> Example wallet profile</h3>
|
324
|
324
|
<div class="outline-text-3" id="text-2-1">
|
325
|
325
|
<p>
|
326
|
326
|
This sample wallet profile datastructure consists of multiple contexts.
|
|
@@ -339,7 +339,7 @@ It overrides the default privacy level specified by the property type.
|
339
|
339
|
</p>
|
340
|
340
|
|
341
|
341
|
<div class="org-src-container">
|
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
|
+<pre class="src src-js" id="orgccb09d3"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
|
343
|
343
|
contexts :
|
344
|
344
|
<span style="color: #bc6ec5;">[</span>
|
345
|
345
|
<span style="color: #2d9574;">{</span>
|
|
@@ -398,8 +398,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
|
398
|
398
|
</div>
|
399
|
399
|
</div>
|
400
|
400
|
|
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>
|
|
401
|
+<div id="outline-container-org998aa04" class="outline-4">
|
|
402
|
+<h4 id="org998aa04"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
|
403
|
403
|
<div class="outline-text-4" id="text-2-1-1">
|
404
|
404
|
<ul class="org-ul">
|
405
|
405
|
<li>Apply default weights to each property type, these can be overridden by attributing a privacy level to the property</li>
|
|
@@ -411,8 +411,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span st
|
411
|
411
|
</div>
|
412
|
412
|
</div>
|
413
|
413
|
|
414
|
|
-<div id="outline-container-org2396396" class="outline-3">
|
415
|
|
-<h3 id="org2396396"><span class="section-number-3">2.2</span> Example request</h3>
|
|
414
|
+<div id="outline-container-org0f1aa15" class="outline-3">
|
|
415
|
+<h3 id="org0f1aa15"><span class="section-number-3">2.2</span> Example request</h3>
|
416
|
416
|
<div class="outline-text-3" id="text-2-2">
|
417
|
417
|
<p>
|
418
|
418
|
This sample application request consists of an application name, a set of required property types and a set of optional property types.
|
|
@@ -422,7 +422,7 @@ and the cumulative privacy weight by adding the privacy levels of each property
|
422
|
422
|
</p>
|
423
|
423
|
|
424
|
424
|
<div class="org-src-container">
|
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
|
+<pre class="src src-js" id="org697a49e"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
|
426
|
426
|
application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
|
427
|
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>
|
428
|
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>,
|
|
@@ -434,8 +434,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
|
434
|
434
|
</div>
|
435
|
435
|
</div>
|
436
|
436
|
|
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>
|
|
437
|
+<div id="outline-container-org5767244" class="outline-4">
|
|
438
|
+<h4 id="org5767244"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
|
439
|
439
|
<div class="outline-text-4" id="text-2-2-1">
|
440
|
440
|
<ul class="org-ul">
|
441
|
441
|
<li>Create a generator that seeds a request with random required and optional property types</li>
|
|
@@ -447,8 +447,8 @@ process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color
|
447
|
447
|
</div>
|
448
|
448
|
|
449
|
449
|
|
450
|
|
-<div id="outline-container-org4d72153" class="outline-2">
|
451
|
|
-<h2 id="org4d72153"><span class="section-number-2">3</span> Data Comparison</h2>
|
|
450
|
+<div id="outline-container-orgf88b6fa" class="outline-2">
|
|
451
|
+<h2 id="orgf88b6fa"><span class="section-number-2">3</span> Data Comparison</h2>
|
452
|
452
|
<div class="outline-text-2" id="text-3">
|
453
|
453
|
<p>
|
454
|
454
|
During the interaction we want to give the user insight into a couple of things;
|
|
@@ -464,7 +464,7 @@ In below ruby code a comparison is made by on creating the intersection and its
|
464
|
464
|
</p>
|
465
|
465
|
|
466
|
466
|
<div class="org-src-container">
|
467
|
|
-<pre class="src src-ruby" id="org9724946"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
|
|
467
|
+<pre class="src src-ruby" id="org3a15b08"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
|
468
|
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>
|
469
|
469
|
|
470
|
470
|
request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
|
|
@@ -485,8 +485,8 @@ In below ruby code a comparison is made by on creating the intersection and its
|
485
|
485
|
</div>
|
486
|
486
|
</div>
|
487
|
487
|
|
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>
|
|
488
|
+<div id="outline-container-org1ea58b1" class="outline-4">
|
|
489
|
+<h4 id="org1ea58b1"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
|
490
|
490
|
<div class="outline-text-4" id="text-3-0-1">
|
491
|
491
|
<ul class="org-ul">
|
492
|
492
|
<li>Calculate the weight (sum of privacy levels of the properties it contains) of each context before and after giving permission</li>
|
|
@@ -505,8 +505,8 @@ request is size 3
|
505
|
505
|
</div>
|
506
|
506
|
</div>
|
507
|
507
|
|
508
|
|
-<div id="outline-container-org1332fc3" class="outline-2">
|
509
|
|
-<h2 id="org1332fc3"><span class="section-number-2">4</span> Visualization</h2>
|
|
508
|
+<div id="outline-container-orgc346fdb" class="outline-2">
|
|
509
|
+<h2 id="orgc346fdb"><span class="section-number-2">4</span> Visualization</h2>
|
510
|
510
|
<div class="outline-text-2" id="text-4">
|
511
|
511
|
<p>
|
512
|
512
|
We want to visualize the following things;
|
|
@@ -525,7 +525,7 @@ Different tones within the hue can be mapped to each privacy level.
|
525
|
525
|
</p>
|
526
|
526
|
|
527
|
527
|
<div class="org-src-container">
|
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
|
+<pre class="src src-java" id="orgf9dcee7"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
|
529
|
529
|
<span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a3</span> = #<span style="color: #a45bad;">3A3B58</span>;
|
530
|
530
|
<span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b3</span> = #<span style="color: #a45bad;">734246</span>;
|
531
|
531
|
<span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d3</span> = #B4561F;
|
|
@@ -580,21 +580,22 @@ Different tones within the hue can be mapped to each privacy level.
|
580
|
580
|
<span style="color: #4f97d7;">}</span>;
|
581
|
581
|
|
582
|
582
|
<span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">PrivacyLevel</span> <span style="color: #4f97d7;">{</span>
|
583
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">SECRET</span> = <span style="color: #a45bad;">5</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">passwords, keys etc. </span>
|
584
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">PRIVATE</span> = <span style="color: #a45bad;">4</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">ssn etc, strict need to know basis stuff </span>
|
585
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">INTIMATE</span> = <span style="color: #a45bad;">3</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">e.g. stuff you share with family </span>
|
586
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">AFFILIATE</span> = <span style="color: #a45bad;">2</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">e.g. stuff you share with work, project etc </span>
|
587
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">PUBLIC</span> = <span style="color: #a45bad;">1</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">e.g. stuff that everybody may know, your e.g. twitter handle </span>
|
588
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">COMMONS</span> = <span style="color: #a45bad;">0</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff that is intended for the public good / commons, anonimized IoT stuff </span>
|
|
583
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">SECRET</span> = <span style="color: #a45bad;">5</span>;
|
|
584
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">PRIVATE</span> = <span style="color: #a45bad;">4</span>;
|
|
585
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">INTIMATE</span> = <span style="color: #a45bad;">3</span>;
|
|
586
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">AFFILIATE</span> = <span style="color: #a45bad;">2</span>;
|
|
587
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">PUBLIC</span> = <span style="color: #a45bad;">1</span>;
|
|
588
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">COMMONS</span> = <span style="color: #a45bad;">0</span>;
|
589
|
589
|
<span style="color: #4f97d7;">}</span>
|
590
|
590
|
|
591
|
591
|
<span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">ContextType</span> <span style="color: #4f97d7;">{</span>
|
592
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">SELF</span> = <span style="color: #a45bad;">5</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff that applies strictly to yourself </span>
|
593
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">FAMILY</span> = <span style="color: #a45bad;">4</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff that applies to you and your family (hopefully not facebook pics)</span>
|
594
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">FRIENDS</span> = <span style="color: #a45bad;">3</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff you share with friends </span>
|
595
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">WORK</span> = <span style="color: #a45bad;">2</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff you share in a professional context</span>
|
596
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">HOBBY</span> = <span style="color: #a45bad;">1</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff you share in the context of a pastime</span>
|
597
|
|
- <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">OTHER</span> = <span style="color: #a45bad;">0</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">stuff that doesn't fit in any of the other types </span>
|
|
592
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">FINANCIAL</span> = <span style="color: #a45bad;">6</span>;
|
|
593
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">PERSONAL</span> = <span style="color: #a45bad;">5</span>;
|
|
594
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">HEALTH</span> = <span style="color: #a45bad;">4</span>;
|
|
595
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">EDUCATION</span> = <span style="color: #a45bad;">3</span>;
|
|
596
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">WORK</span> = <span style="color: #a45bad;">2</span>;
|
|
597
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">HOBBY</span> = <span style="color: #a45bad;">1</span>;
|
|
598
|
+ <span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #4f97d7; font-weight: bold;">static</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">OTHER</span> = <span style="color: #a45bad;">0</span>;
|
598
|
599
|
<span style="color: #4f97d7;">}</span>
|
599
|
600
|
|
600
|
601
|
<span style="color: #4f97d7; font-weight: bold;">public</span> <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #bc6ec5; font-weight: bold;">getColor</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">privacy_level</span>, <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">context_type</span><span style="color: #4f97d7;">)</span>
|
|
@@ -609,12 +610,12 @@ Below snippet exemplifies a color for the SELF context with a privacy level SECR
|
609
|
610
|
</p>
|
610
|
611
|
|
611
|
612
|
<div class="org-src-container">
|
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>
|
|
613
|
+<pre class="src src-java" id="org103bb47"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
|
613
|
614
|
size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
|
614
|
615
|
background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
|
615
|
616
|
noStroke<span style="color: #bc6ec5;">()</span>;
|
616
|
617
|
<span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.SECRET;
|
617
|
|
- <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.SELF;
|
|
618
|
+ <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.PERSONAL;
|
618
|
619
|
<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>
|
619
|
620
|
fill<span style="color: #bc6ec5;">(</span>secret_self<span style="color: #bc6ec5;">)</span>;
|
620
|
621
|
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>;
|
|
@@ -623,7 +624,7 @@ Below snippet exemplifies a color for the SELF context with a privacy level SECR
|
623
|
624
|
</div>
|
624
|
625
|
|
625
|
626
|
<script src="processing.js"></script>
|
626
|
|
- <script type="text/processing" data-processing-target="ob-16a3bfeaae0796f9c0bb86df72e7c664178dbee9">
|
|
627
|
+ <script type="text/processing" data-processing-target="ob-493b0e9920a023276fc640f0a2b7a91f2af5a827">
|
627
|
628
|
//color definitions
|
628
|
629
|
color a3 = #3A3B58;
|
629
|
630
|
color b3 = #734246;
|
|
@@ -679,21 +680,22 @@ color colors[][] = {
|
679
|
680
|
};
|
680
|
681
|
|
681
|
682
|
class PrivacyLevel {
|
682
|
|
- public static int SECRET = 5; //passwords, keys etc.
|
683
|
|
- public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff
|
684
|
|
- public static int INTIMATE = 3;//e.g. stuff you share with family
|
685
|
|
- public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc
|
686
|
|
- public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle
|
687
|
|
- public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff
|
|
683
|
+ public static int SECRET = 5;
|
|
684
|
+ public static int PRIVATE = 4;
|
|
685
|
+ public static int INTIMATE = 3;
|
|
686
|
+ public static int AFFILIATE = 2;
|
|
687
|
+ public static int PUBLIC = 1;
|
|
688
|
+ public static int COMMONS = 0;
|
688
|
689
|
}
|
689
|
690
|
|
690
|
691
|
class ContextType {
|
691
|
|
- public static int SELF = 5; //stuff that applies strictly to yourself
|
692
|
|
- public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
|
693
|
|
- public static int FRIENDS = 3;//stuff you share with friends
|
694
|
|
- public static int WORK = 2;//stuff you share in a professional context
|
695
|
|
- public static int HOBBY = 1;//stuff you share in the context of a pastime
|
696
|
|
- public static int OTHER = 0;//stuff that doesn't fit in any of the other types
|
|
692
|
+ public static int FINANCIAL = 6;
|
|
693
|
+ public static int PERSONAL = 5;
|
|
694
|
+ public static int HEALTH = 4;
|
|
695
|
+ public static int EDUCATION = 3;
|
|
696
|
+ public static int WORK = 2;
|
|
697
|
+ public static int HOBBY = 1;
|
|
698
|
+ public static int OTHER = 0;
|
697
|
699
|
}
|
698
|
700
|
|
699
|
701
|
public int getColor(int privacy_level, int context_type)
|
|
@@ -705,15 +707,15 @@ void draw(){
|
705
|
707
|
background(0);
|
706
|
708
|
noStroke();
|
707
|
709
|
int level = PrivacyLevel.SECRET;
|
708
|
|
- int contextType = ContextType.SELF;
|
|
710
|
+ int contextType = ContextType.PERSONAL;
|
709
|
711
|
color secret_self = getColor(level, contextType);//expect dark red
|
710
|
712
|
fill(secret_self);
|
711
|
713
|
ellipse(50,50,50,50);
|
712
|
714
|
}
|
713
|
|
-</script> <canvas id="ob-16a3bfeaae0796f9c0bb86df72e7c664178dbee9"></canvas>
|
|
715
|
+</script> <canvas id="ob-493b0e9920a023276fc640f0a2b7a91f2af5a827"></canvas>
|
714
|
716
|
|
715
|
717
|
<div class="org-src-container">
|
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>
|
|
718
|
+<pre class="src src-java" id="orgf9b56bd"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
|
717
|
719
|
size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
|
718
|
720
|
background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
|
719
|
721
|
noStroke<span style="color: #bc6ec5;">()</span>;
|
|
@@ -727,7 +729,7 @@ void draw(){
|
727
|
729
|
</div>
|
728
|
730
|
|
729
|
731
|
<script src="processing.js"></script>
|
730
|
|
- <script type="text/processing" data-processing-target="ob-aa9a4cb8275feb0ce1c5423b4f8d6a81fa9e4a49">
|
|
732
|
+ <script type="text/processing" data-processing-target="ob-564950e7ca843d28965ee08608eff2b10fc39e1d">
|
731
|
733
|
//color definitions
|
732
|
734
|
color a3 = #3A3B58;
|
733
|
735
|
color b3 = #734246;
|
|
@@ -783,21 +785,22 @@ color colors[][] = {
|
783
|
785
|
};
|
784
|
786
|
|
785
|
787
|
class PrivacyLevel {
|
786
|
|
- public static int SECRET = 5; //passwords, keys etc.
|
787
|
|
- public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff
|
788
|
|
- public static int INTIMATE = 3;//e.g. stuff you share with family
|
789
|
|
- public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc
|
790
|
|
- public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle
|
791
|
|
- public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff
|
|
788
|
+ public static int SECRET = 5;
|
|
789
|
+ public static int PRIVATE = 4;
|
|
790
|
+ public static int INTIMATE = 3;
|
|
791
|
+ public static int AFFILIATE = 2;
|
|
792
|
+ public static int PUBLIC = 1;
|
|
793
|
+ public static int COMMONS = 0;
|
792
|
794
|
}
|
793
|
795
|
|
794
|
796
|
class ContextType {
|
795
|
|
- public static int SELF = 5; //stuff that applies strictly to yourself
|
796
|
|
- public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
|
797
|
|
- public static int FRIENDS = 3;//stuff you share with friends
|
798
|
|
- public static int WORK = 2;//stuff you share in a professional context
|
799
|
|
- public static int HOBBY = 1;//stuff you share in the context of a pastime
|
800
|
|
- public static int OTHER = 0;//stuff that doesn't fit in any of the other types
|
|
797
|
+ public static int FINANCIAL = 6;
|
|
798
|
+ public static int PERSONAL = 5;
|
|
799
|
+ public static int HEALTH = 4;
|
|
800
|
+ public static int EDUCATION = 3;
|
|
801
|
+ public static int WORK = 2;
|
|
802
|
+ public static int HOBBY = 1;
|
|
803
|
+ public static int OTHER = 0;
|
801
|
804
|
}
|
802
|
805
|
|
803
|
806
|
public int getColor(int privacy_level, int context_type)
|
|
@@ -814,14 +817,138 @@ void draw(){
|
814
|
817
|
fill(work_public);
|
815
|
818
|
ellipse(50,50,50,50);
|
816
|
819
|
}
|
817
|
|
-</script> <canvas id="ob-aa9a4cb8275feb0ce1c5423b4f8d6a81fa9e4a49"></canvas>
|
|
820
|
+</script> <canvas id="ob-564950e7ca843d28965ee08608eff2b10fc39e1d"></canvas>
|
|
821
|
+
|
|
822
|
+<p>
|
|
823
|
+This table shows all colors for each context / privacy level combination.
|
|
824
|
+Find out does this make sense?
|
|
825
|
+</p>
|
|
826
|
+<script src="processing.js"></script>
|
|
827
|
+ <script type="text/processing" data-processing-target="ob-3265860db5d715da2187d13bc5ac96386a2d517a">
|
|
828
|
+//color definitions
|
|
829
|
+color a3 = #3A3B58;
|
|
830
|
+color b3 = #734246;
|
|
831
|
+color d3 = #B4561F;
|
|
832
|
+color c3 = #336F60;
|
|
833
|
+color f3 = #7A3E2A;
|
|
834
|
+color g3 = #A48137;
|
|
835
|
+color e2 = #97BBCB;
|
|
836
|
+color a4 = #3B4257;
|
|
837
|
+color b4 = #6A4345;
|
|
838
|
+color d4 = #86451F;
|
|
839
|
+color c4 = #345A48;
|
|
840
|
+color f4 = #A92F21;
|
|
841
|
+color g4 = #BC983B;
|
|
842
|
+color a5 = #3D4358;
|
|
843
|
+color b5 = #402623;
|
|
844
|
+color d5 = #85442D;
|
|
845
|
+color c5 = #3B403A;
|
|
846
|
+color f5 = #7A150B;
|
|
847
|
+color g5 = #252F2B;
|
|
848
|
+color a1 = #597099;
|
|
849
|
+color e4 = #0A3878;
|
|
850
|
+color b1 = #D16365;
|
|
851
|
+color d1 = #FFD43B;
|
|
852
|
+color c1 = #B7BF98;
|
|
853
|
+color e1 = #CAD2C8;
|
|
854
|
+color e0 = #F5EDE5;
|
|
855
|
+color f1 = #D17978;
|
|
856
|
+color g1 = #FDD23E;
|
|
857
|
+color a0 = #C5C3CC;
|
|
858
|
+color e3 = #0485B1;
|
|
859
|
+color b0 = #FFDCD6;
|
|
860
|
+color d0 = #FFE9BE;
|
|
861
|
+color c0 = #F0E9D5;
|
|
862
|
+color f0 = #E4C8BF;
|
|
863
|
+color g0 = #FBE6BA;
|
|
864
|
+color a2 = #3D4B79;
|
|
865
|
+color e5 = #084064;
|
|
866
|
+color b2 = #974244;
|
|
867
|
+color d2 = #F8AA08;
|
|
868
|
+color c2 = #4E937F;
|
|
869
|
+color f2 = #8F4330;
|
|
870
|
+color g2 = #FFDB03;
|
|
871
|
+
|
|
872
|
+color colors[][] = {
|
|
873
|
+ {b0,b1,b2,b3,b4,b5},
|
|
874
|
+ {c0,c1,c2,c3,c4,c5},
|
|
875
|
+ {a0,a1,a2,a3,a4,a5},
|
|
876
|
+ {d0,d1,d2,d3,d4,d5},
|
|
877
|
+ {e0,e1,e2,e3,e4,e5},
|
|
878
|
+ {f0,f1,f2,f3,f4,f5},
|
|
879
|
+ {g0,g1,g2,g3,g4,g5}
|
|
880
|
+};
|
|
881
|
+
|
|
882
|
+class PrivacyLevel {
|
|
883
|
+ public static int SECRET = 5;
|
|
884
|
+ public static int PRIVATE = 4;
|
|
885
|
+ public static int INTIMATE = 3;
|
|
886
|
+ public static int AFFILIATE = 2;
|
|
887
|
+ public static int PUBLIC = 1;
|
|
888
|
+ public static int COMMONS = 0;
|
|
889
|
+}
|
|
890
|
+
|
|
891
|
+class ContextType {
|
|
892
|
+ public static int FINANCIAL = 6;
|
|
893
|
+ public static int PERSONAL = 5;
|
|
894
|
+ public static int HEALTH = 4;
|
|
895
|
+ public static int EDUCATION = 3;
|
|
896
|
+ public static int WORK = 2;
|
|
897
|
+ public static int HOBBY = 1;
|
|
898
|
+ public static int OTHER = 0;
|
|
899
|
+}
|
|
900
|
+
|
|
901
|
+public int getColor(int privacy_level, int context_type)
|
|
902
|
+{
|
|
903
|
+ return colors[context_type][privacy_level];
|
|
904
|
+}
|
|
905
|
+String[] levels = ["commons", "public", "affiliate", "intimate", "private", "secret"];
|
|
906
|
+String[] contexts = ["other", "hobby", "work", "education", "health", "personal", "financial"];
|
|
907
|
+
|
|
908
|
+void draw()
|
|
909
|
+{
|
|
910
|
+ size(600,480);
|
|
911
|
+
|
|
912
|
+ float row_height = 50;
|
|
913
|
+ float column_width = 80;
|
|
914
|
+
|
|
915
|
+ fill(0);
|
|
916
|
+
|
|
917
|
+ //draw privacy level headers
|
|
918
|
+ for (int i = 0; i < levels.length; i++ ){
|
|
919
|
+ text(levels[i], (i + 1) * column_width, row_height );
|
|
920
|
+ }
|
|
921
|
+
|
|
922
|
+ //draw context headers
|
|
923
|
+ for (int j = 0; j < contexts.length; j++)
|
|
924
|
+ {
|
|
925
|
+ text(contexts[j], 20, (j+2) * row_height);
|
|
926
|
+ }
|
|
927
|
+
|
|
928
|
+ //draw colors
|
|
929
|
+ for(int i = 0; i < levels.length; i++)
|
|
930
|
+ {
|
|
931
|
+ float x = 20 + (i + 1) * column_width;
|
|
932
|
+
|
|
933
|
+ for(int j = 0; j < contexts.length; j++)
|
|
934
|
+ {
|
|
935
|
+ float y = (j + 2) * row_height;
|
|
936
|
+
|
|
937
|
+ color c = getColor(i,j);
|
|
938
|
+ fill(c);
|
|
939
|
+ ellipse(x,y, 20, 20);
|
|
940
|
+ }
|
|
941
|
+ }
|
|
942
|
+
|
|
943
|
+}
|
|
944
|
+</script> <canvas id="ob-3265860db5d715da2187d13bc5ac96386a2d517a"></canvas>
|
818
|
945
|
</div>
|
819
|
946
|
|
820
|
|
-<div id="outline-container-org9f97176" class="outline-3">
|
821
|
|
-<h3 id="org9f97176"><span class="section-number-3">4.1</span> Request</h3>
|
|
947
|
+<div id="outline-container-org428a791" class="outline-3">
|
|
948
|
+<h3 id="org428a791"><span class="section-number-3">4.1</span> Request</h3>
|
822
|
949
|
<div class="outline-text-3" id="text-4-1">
|
823
|
950
|
<div class="org-src-container">
|
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>;
|
|
951
|
+<pre class="src src-java" id="org939bc44">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
|
825
|
952
|
<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">background(0);</span>
|
826
|
953
|
noFill<span style="color: #4f97d7;">()</span>;
|
827
|
954
|
|
|
@@ -844,7 +971,7 @@ text<span style="color: #4f97d7;">(</span>request.application, centerX, centerY
|
844
|
971
|
</div>
|
845
|
972
|
|
846
|
973
|
<script src="processing.js"></script>
|
847
|
|
- <script type="text/processing" data-processing-target="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a">
|
|
974
|
+ <script type="text/processing" data-processing-target="ob-b9c6fc9143eec1b3105c4ed7c212a01679fd1bf0">
|
848
|
975
|
//color definitions
|
849
|
976
|
color a3 = #3A3B58;
|
850
|
977
|
color b3 = #734246;
|
|
@@ -900,21 +1027,22 @@ color colors[][] = {
|
900
|
1027
|
};
|
901
|
1028
|
|
902
|
1029
|
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
|
|
1030
|
+ public static int SECRET = 5;
|
|
1031
|
+ public static int PRIVATE = 4;
|
|
1032
|
+ public static int INTIMATE = 3;
|
|
1033
|
+ public static int AFFILIATE = 2;
|
|
1034
|
+ public static int PUBLIC = 1;
|
|
1035
|
+ public static int COMMONS = 0;
|
909
|
1036
|
}
|
910
|
1037
|
|
911
|
1038
|
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
|
|
1039
|
+ public static int FINANCIAL = 6;
|
|
1040
|
+ public static int PERSONAL = 5;
|
|
1041
|
+ public static int HEALTH = 4;
|
|
1042
|
+ public static int EDUCATION = 3;
|
|
1043
|
+ public static int WORK = 2;
|
|
1044
|
+ public static int HOBBY = 1;
|
|
1045
|
+ public static int OTHER = 0;
|
918
|
1046
|
}
|
919
|
1047
|
|
920
|
1048
|
public int getColor(int privacy_level, int context_type)
|
|
@@ -1083,19 +1211,19 @@ ellipse(centerX, centerY, rsize, rsize);
|
1083
|
1211
|
fill(0);
|
1084
|
1212
|
textAlign(CENTER,CENTER);
|
1085
|
1213
|
text(request.application, centerX, centerY + rsize/1.5);
|
1086
|
|
-</script> <canvas id="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a"></canvas>
|
|
1214
|
+</script> <canvas id="ob-b9c6fc9143eec1b3105c4ed7c212a01679fd1bf0"></canvas>
|
1087
|
1215
|
</div>
|
1088
|
1216
|
</div>
|
1089
|
1217
|
|
1090
|
|
-<div id="outline-container-orgc83b740" class="outline-3">
|
1091
|
|
-<h3 id="orgc83b740"><span class="section-number-3">4.2</span> Contexts</h3>
|
|
1218
|
+<div id="outline-container-org5e2cb1e" class="outline-3">
|
|
1219
|
+<h3 id="org5e2cb1e"><span class="section-number-3">4.2</span> Contexts</h3>
|
1092
|
1220
|
<div class="outline-text-3" id="text-4-2">
|
1093
|
1221
|
<p>
|
1094
|
1222
|
How do we visulize each context? Intend to do this in processing too.
|
1095
|
1223
|
</p>
|
1096
|
1224
|
|
1097
|
1225
|
<div class="org-src-container">
|
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>
|
|
1226
|
+<pre class="src src-java" id="org21eedc8"><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>
|
1099
|
1227
|
size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
|
1100
|
1228
|
background<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
|
1101
|
1229
|
noFill<span style="color: #4f97d7;">()</span>;
|
|
@@ -1262,8 +1390,8 @@ text(contexts[0].properties[0].value, 10, 50);
|
1262
|
1390
|
</script> <canvas id="ob-74f1a6b8e72f844b929f5904bea850acb6918dbb"></canvas>
|
1263
|
1391
|
</div>
|
1264
|
1392
|
|
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>
|
|
1393
|
+<div id="outline-container-orgd9d5835" class="outline-4">
|
|
1394
|
+<h4 id="orgd9d5835"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
|
1267
|
1395
|
<div class="outline-text-4" id="text-4-2-1">
|
1268
|
1396
|
<ul class="org-ul">
|
1269
|
1397
|
<li>How do we show relation between request and each context with color?</li>
|
|
@@ -1275,16 +1403,16 @@ text(contexts[0].properties[0].value, 10, 50);
|
1275
|
1403
|
</div>
|
1276
|
1404
|
</div>
|
1277
|
1405
|
|
1278
|
|
-<div id="outline-container-org084ab12" class="outline-2">
|
1279
|
|
-<h2 id="org084ab12"><span class="section-number-2">5</span> Interaction</h2>
|
|
1406
|
+<div id="outline-container-org7cb73b5" class="outline-2">
|
|
1407
|
+<h2 id="org7cb73b5"><span class="section-number-2">5</span> Interaction</h2>
|
1280
|
1408
|
<div class="outline-text-2" id="text-5">
|
1281
|
1409
|
<p>
|
1282
|
1410
|
We intend to investigate this in Processing as well.
|
1283
|
1411
|
</p>
|
1284
|
1412
|
</div>
|
1285
|
1413
|
|
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>
|
|
1414
|
+<div id="outline-container-org2fae9f9" class="outline-4">
|
|
1415
|
+<h4 id="org2fae9f9"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
|
1288
|
1416
|
<div class="outline-text-4" id="text-5-0-1">
|
1289
|
1417
|
<ul class="org-ul">
|
1290
|
1418
|
<li>How does the end user actually accept the request? Is it by dragging the request onto the context?</li>
|
|
@@ -1296,7 +1424,7 @@ We intend to investigate this in Processing as well.
|
1296
|
1424
|
</div>
|
1297
|
1425
|
<div id="postamble" class="status">
|
1298
|
1426
|
<p class="author">Author: Taco</p>
|
1299
|
|
-<p class="date">Created: 2018-04-06 Fri 15:41</p>
|
|
1427
|
+<p class="date">Created: 2018-04-06 Fri 16:25</p>
|
1300
|
1428
|
<p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
|
1301
|
1429
|
</div>
|
1302
|
1430
|
</body>
|