Entitlements user interaction designs and proof of concept

entitlements.html 63KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  5. <head>
  6. <!-- 2018-04-06 Fri 15:41 -->
  7. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1" />
  9. <title>&lrm;</title>
  10. <meta name="generator" content="Org mode" />
  11. <meta name="author" content="Taco" />
  12. <style type="text/css">
  13. <!--/*--><![CDATA[/*><!--*/
  14. .title { text-align: center;
  15. margin-bottom: .2em; }
  16. .subtitle { text-align: center;
  17. font-size: medium;
  18. font-weight: bold;
  19. margin-top:0; }
  20. .todo { font-family: monospace; color: red; }
  21. .done { font-family: monospace; color: green; }
  22. .priority { font-family: monospace; color: orange; }
  23. .tag { background-color: #eee; font-family: monospace;
  24. padding: 2px; font-size: 80%; font-weight: normal; }
  25. .timestamp { color: #bebebe; }
  26. .timestamp-kwd { color: #5f9ea0; }
  27. .org-right { margin-left: auto; margin-right: 0px; text-align: right; }
  28. .org-left { margin-left: 0px; margin-right: auto; text-align: left; }
  29. .org-center { margin-left: auto; margin-right: auto; text-align: center; }
  30. .underline { text-decoration: underline; }
  31. #postamble p, #preamble p { font-size: 90%; margin: .2em; }
  32. p.verse { margin-left: 3%; }
  33. pre {
  34. border: 1px solid #ccc;
  35. box-shadow: 3px 3px 3px #eee;
  36. padding: 8pt;
  37. font-family: monospace;
  38. overflow: auto;
  39. margin: 1.2em;
  40. }
  41. pre.src {
  42. position: relative;
  43. overflow: visible;
  44. padding-top: 1.2em;
  45. }
  46. pre.src:before {
  47. display: none;
  48. position: absolute;
  49. background-color: white;
  50. top: -10px;
  51. right: 10px;
  52. padding: 3px;
  53. border: 1px solid black;
  54. }
  55. pre.src:hover:before { display: inline;}
  56. /* Languages per Org manual */
  57. pre.src-asymptote:before { content: 'Asymptote'; }
  58. pre.src-awk:before { content: 'Awk'; }
  59. pre.src-C:before { content: 'C'; }
  60. /* pre.src-C++ doesn't work in CSS */
  61. pre.src-clojure:before { content: 'Clojure'; }
  62. pre.src-css:before { content: 'CSS'; }
  63. pre.src-D:before { content: 'D'; }
  64. pre.src-ditaa:before { content: 'ditaa'; }
  65. pre.src-dot:before { content: 'Graphviz'; }
  66. pre.src-calc:before { content: 'Emacs Calc'; }
  67. pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
  68. pre.src-fortran:before { content: 'Fortran'; }
  69. pre.src-gnuplot:before { content: 'gnuplot'; }
  70. pre.src-haskell:before { content: 'Haskell'; }
  71. pre.src-hledger:before { content: 'hledger'; }
  72. pre.src-java:before { content: 'Java'; }
  73. pre.src-js:before { content: 'Javascript'; }
  74. pre.src-latex:before { content: 'LaTeX'; }
  75. pre.src-ledger:before { content: 'Ledger'; }
  76. pre.src-lisp:before { content: 'Lisp'; }
  77. pre.src-lilypond:before { content: 'Lilypond'; }
  78. pre.src-lua:before { content: 'Lua'; }
  79. pre.src-matlab:before { content: 'MATLAB'; }
  80. pre.src-mscgen:before { content: 'Mscgen'; }
  81. pre.src-ocaml:before { content: 'Objective Caml'; }
  82. pre.src-octave:before { content: 'Octave'; }
  83. pre.src-org:before { content: 'Org mode'; }
  84. pre.src-oz:before { content: 'OZ'; }
  85. pre.src-plantuml:before { content: 'Plantuml'; }
  86. pre.src-processing:before { content: 'Processing.js'; }
  87. pre.src-python:before { content: 'Python'; }
  88. pre.src-R:before { content: 'R'; }
  89. pre.src-ruby:before { content: 'Ruby'; }
  90. pre.src-sass:before { content: 'Sass'; }
  91. pre.src-scheme:before { content: 'Scheme'; }
  92. pre.src-screen:before { content: 'Gnu Screen'; }
  93. pre.src-sed:before { content: 'Sed'; }
  94. pre.src-sh:before { content: 'shell'; }
  95. pre.src-sql:before { content: 'SQL'; }
  96. pre.src-sqlite:before { content: 'SQLite'; }
  97. /* additional languages in org.el's org-babel-load-languages alist */
  98. pre.src-forth:before { content: 'Forth'; }
  99. pre.src-io:before { content: 'IO'; }
  100. pre.src-J:before { content: 'J'; }
  101. pre.src-makefile:before { content: 'Makefile'; }
  102. pre.src-maxima:before { content: 'Maxima'; }
  103. pre.src-perl:before { content: 'Perl'; }
  104. pre.src-picolisp:before { content: 'Pico Lisp'; }
  105. pre.src-scala:before { content: 'Scala'; }
  106. pre.src-shell:before { content: 'Shell Script'; }
  107. pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
  108. /* additional language identifiers per "defun org-babel-execute"
  109. in ob-*.el */
  110. pre.src-cpp:before { content: 'C++'; }
  111. pre.src-abc:before { content: 'ABC'; }
  112. pre.src-coq:before { content: 'Coq'; }
  113. pre.src-groovy:before { content: 'Groovy'; }
  114. /* additional language identifiers from org-babel-shell-names in
  115. ob-shell.el: ob-shell is the only babel language using a lambda to put
  116. the execution function name together. */
  117. pre.src-bash:before { content: 'bash'; }
  118. pre.src-csh:before { content: 'csh'; }
  119. pre.src-ash:before { content: 'ash'; }
  120. pre.src-dash:before { content: 'dash'; }
  121. pre.src-ksh:before { content: 'ksh'; }
  122. pre.src-mksh:before { content: 'mksh'; }
  123. pre.src-posh:before { content: 'posh'; }
  124. /* Additional Emacs modes also supported by the LaTeX listings package */
  125. pre.src-ada:before { content: 'Ada'; }
  126. pre.src-asm:before { content: 'Assembler'; }
  127. pre.src-caml:before { content: 'Caml'; }
  128. pre.src-delphi:before { content: 'Delphi'; }
  129. pre.src-html:before { content: 'HTML'; }
  130. pre.src-idl:before { content: 'IDL'; }
  131. pre.src-mercury:before { content: 'Mercury'; }
  132. pre.src-metapost:before { content: 'MetaPost'; }
  133. pre.src-modula-2:before { content: 'Modula-2'; }
  134. pre.src-pascal:before { content: 'Pascal'; }
  135. pre.src-ps:before { content: 'PostScript'; }
  136. pre.src-prolog:before { content: 'Prolog'; }
  137. pre.src-simula:before { content: 'Simula'; }
  138. pre.src-tcl:before { content: 'tcl'; }
  139. pre.src-tex:before { content: 'TeX'; }
  140. pre.src-plain-tex:before { content: 'Plain TeX'; }
  141. pre.src-verilog:before { content: 'Verilog'; }
  142. pre.src-vhdl:before { content: 'VHDL'; }
  143. pre.src-xml:before { content: 'XML'; }
  144. pre.src-nxml:before { content: 'XML'; }
  145. /* add a generic configuration mode; LaTeX export needs an additional
  146. (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
  147. pre.src-conf:before { content: 'Configuration File'; }
  148. table { border-collapse:collapse; }
  149. caption.t-above { caption-side: top; }
  150. caption.t-bottom { caption-side: bottom; }
  151. td, th { vertical-align:top; }
  152. th.org-right { text-align: center; }
  153. th.org-left { text-align: center; }
  154. th.org-center { text-align: center; }
  155. td.org-right { text-align: right; }
  156. td.org-left { text-align: left; }
  157. td.org-center { text-align: center; }
  158. dt { font-weight: bold; }
  159. .footpara { display: inline; }
  160. .footdef { margin-bottom: 1em; }
  161. .figure { padding: 1em; }
  162. .figure p { text-align: center; }
  163. .inlinetask {
  164. padding: 10px;
  165. border: 2px solid gray;
  166. margin: 10px;
  167. background: #ffffcc;
  168. }
  169. #org-div-home-and-up
  170. { text-align: right; font-size: 70%; white-space: nowrap; }
  171. textarea { overflow-x: auto; }
  172. .linenr { font-size: smaller }
  173. .code-highlighted { background-color: #ffff00; }
  174. .org-info-js_info-navigation { border-style: none; }
  175. #org-info-js_console-label
  176. { font-size: 10px; font-weight: bold; white-space: nowrap; }
  177. .org-info-js_search-highlight
  178. { background-color: #ffff00; color: #000000; font-weight: bold; }
  179. .org-svg { width: 90%; }
  180. /*]]>*/-->
  181. </style>
  182. <link rel="stylesheet" type="text/css" href="http://thomasf.github.io/solarized-css/solarized-light.min.css" />
  183. <script type="text/javascript">
  184. /*
  185. @licstart The following is the entire license notice for the
  186. JavaScript code in this tag.
  187. Copyright (C) 2012-2018 Free Software Foundation, Inc.
  188. The JavaScript code in this tag is free software: you can
  189. redistribute it and/or modify it under the terms of the GNU
  190. General Public License (GNU GPL) as published by the Free Software
  191. Foundation, either version 3 of the License, or (at your option)
  192. any later version. The code is distributed WITHOUT ANY WARRANTY;
  193. without even the implied warranty of MERCHANTABILITY or FITNESS
  194. FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
  195. As additional permission under GNU GPL version 3 section 7, you
  196. may distribute non-source (e.g., minimized or compacted) forms of
  197. that code without the copy of the GNU GPL normally required by
  198. section 4, provided you include this license notice and a URL
  199. through which recipients can access the Corresponding Source.
  200. @licend The above is the entire license notice
  201. for the JavaScript code in this tag.
  202. */
  203. <!--/*--><![CDATA[/*><!--*/
  204. function CodeHighlightOn(elem, id)
  205. {
  206. var target = document.getElementById(id);
  207. if(null != target) {
  208. elem.cacheClassElem = elem.className;
  209. elem.cacheClassTarget = target.className;
  210. target.className = "code-highlighted";
  211. elem.className = "code-highlighted";
  212. }
  213. }
  214. function CodeHighlightOff(elem, id)
  215. {
  216. var target = document.getElementById(id);
  217. if(elem.cacheClassElem)
  218. elem.className = elem.cacheClassElem;
  219. if(elem.cacheClassTarget)
  220. target.className = elem.cacheClassTarget;
  221. }
  222. /*]]>*///-->
  223. </script>
  224. </head>
  225. <body>
  226. <div id="content">
  227. <div id="table-of-contents">
  228. <h2>Table of Contents</h2>
  229. <div id="text-table-of-contents">
  230. <ul>
  231. <li><a href="#org32b456b">1. Introduction</a></li>
  232. <li><a href="#orgd03ff6b">2. Data Model</a>
  233. <ul>
  234. <li><a href="#org3a05a7c">2.1. Example wallet profile</a>
  235. <ul>
  236. <li><a href="#org5960c1d">2.1.1. Things to further investigate</a></li>
  237. </ul>
  238. </li>
  239. <li><a href="#org2396396">2.2. Example request</a>
  240. <ul>
  241. <li><a href="#org8a47427">2.2.1. Things to further investigate</a></li>
  242. </ul>
  243. </li>
  244. </ul>
  245. </li>
  246. <li><a href="#org4d72153">3. Data Comparison</a>
  247. <ul>
  248. <li>
  249. <ul>
  250. <li><a href="#org50b710d">3.0.1. Things to further investigate</a></li>
  251. </ul>
  252. </li>
  253. </ul>
  254. </li>
  255. <li><a href="#org1332fc3">4. Visualization</a>
  256. <ul>
  257. <li><a href="#org9f97176">4.1. Request</a></li>
  258. <li><a href="#orgc83b740">4.2. Contexts</a>
  259. <ul>
  260. <li><a href="#org2668e3e">4.2.1. Things to further investigate</a></li>
  261. </ul>
  262. </li>
  263. </ul>
  264. </li>
  265. <li><a href="#org084ab12">5. Interaction</a>
  266. <ul>
  267. <li>
  268. <ul>
  269. <li><a href="#org8d8a728">5.0.1. Things to further investigate</a></li>
  270. </ul>
  271. </li>
  272. </ul>
  273. </li>
  274. </ul>
  275. </div>
  276. </div>
  277. <div id="outline-container-org32b456b" class="outline-2">
  278. <h2 id="org32b456b"><span class="section-number-2">1</span> Introduction</h2>
  279. <div class="outline-text-2" id="text-1">
  280. <p>
  281. The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
  282. More specifically the focus is on investigating how the user of a decode wallet grants permission to decode application for a specific set of personal data.
  283. </p>
  284. <p>
  285. A prelimary definition of six privacy levels (ordered from most private to least private):
  286. </p>
  287. <ul class="org-ul">
  288. <li>SECRET: passwords, keys etc.</li>
  289. <li>PRIVATE: ssn etc, strict need to know basis stuff</li>
  290. <li>INTIMATE: e.g. stuff you share with family</li>
  291. <li>AFFILIATE: e.g. stuff you share with work, project etc</li>
  292. <li>PUBLIC: e.g. stuff that everybody may know, your e.g. twitter handle</li>
  293. <li>COMMONS: stuff that is intended for the public good / commons, e.g. anonimized IoT stuff</li>
  294. </ul>
  295. <p>
  296. A preliminary definition of context types
  297. </p>
  298. <ul class="org-ul">
  299. <li>PERSONAL: data that relates to your personal life, you can have different instances, for example friends, family etc.</li>
  300. <li>HEALTH: health data, you can define different instances (biosignals, stuff to share with dentist, gp, hospital etc)</li>
  301. <li>EDUCATION: school / educational data (grades, certificates etc)</li>
  302. <li>WORK: stuff you share in a professional context</li>
  303. <li>HOBBY: stuff you share in the context of a pastime</li>
  304. <li>FINANCIAL: for data about mortgages, insurance, taxes etc.</li>
  305. <li>OTHER: for everything that doesn't fit the above</li>
  306. </ul>
  307. </div>
  308. </div>
  309. <div id="outline-container-orgd03ff6b" class="outline-2">
  310. <h2 id="orgd03ff6b"><span class="section-number-2">2</span> Data Model</h2>
  311. <div class="outline-text-2" id="text-2">
  312. </div>
  313. <div id="outline-container-org3a05a7c" class="outline-3">
  314. <h3 id="org3a05a7c"><span class="section-number-3">2.1</span> Example wallet profile</h3>
  315. <div class="outline-text-3" id="text-2-1">
  316. <p>
  317. This sample wallet profile datastructure consists of multiple contexts.
  318. No assumptions are made about ontology for now so mention of existing e.g. skos/foaf,
  319. everything is in the decode namespace which is well known across applications.
  320. </p>
  321. <p>
  322. Each context has a name and groups on or more properties that consist of a well known type and a value.
  323. A type can be part of more than one context.
  324. </p>
  325. <p>
  326. Every property instance has a privacy level attached to it, so we can calculate the weight of requests and profiles.
  327. It overrides the default privacy level specified by the property type.
  328. </p>
  329. <div class="org-src-container">
  330. <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>
  331. contexts :
  332. <span style="color: #bc6ec5;">[</span>
  333. <span style="color: #2d9574;">{</span>
  334. title : <span style="color: #2d9574;">"personal"</span>,
  335. properties :
  336. <span style="color: #67b11d;">[</span>
  337. <span style="color: #b1951d;">{</span>
  338. type : <span style="color: #2d9574;">"decode:name"</span>,
  339. value: <span style="color: #2d9574;">"Taco van Dijk"</span>,
  340. pl: <span style="color: #a45bad;">1</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">public, everyone may know my name</span>
  341. <span style="color: #b1951d;">}</span>,
  342. <span style="color: #b1951d;">{</span>
  343. type : <span style="color: #2d9574;">"decode:email"</span>,
  344. value : <span style="color: #2d9574;">"[REDACTED]"</span>,
  345. pl: <span style="color: #a45bad;">2</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">affiliate, parties i have personal business with may know</span>
  346. <span style="color: #b1951d;">}</span>,
  347. <span style="color: #b1951d;">{</span>
  348. type: <span style="color: #2d9574;">"decode:address"</span>,
  349. value: <span style="color: #2d9574;">"[REDACTED]"</span>,
  350. pl: <span style="color: #a45bad;">2</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">affiliate, parties i have personal business with may know</span>
  351. <span style="color: #b1951d;">}</span>,
  352. <span style="color: #b1951d;">{</span>
  353. type: <span style="color: #2d9574;">"decode:phone"</span>,
  354. value : <span style="color: #2d9574;">"[REDACTED]"</span>,
  355. pl: <span style="color: #a45bad;">2</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">affiliate, parties i have personal business with may know</span>
  356. <span style="color: #b1951d;">}</span>
  357. <span style="color: #67b11d;">]</span>,
  358. pl_sum: <span style="color: #a45bad;">7</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">this is a calculated value based on the attributed pl values or default if they were not user specified</span>
  359. <span style="color: #2d9574;">}</span>,
  360. <span style="color: #2d9574;">{</span>
  361. title: <span style="color: #2d9574;">"professional"</span>,
  362. properties :
  363. <span style="color: #67b11d;">[</span>
  364. <span style="color: #b1951d;">{</span>
  365. type : <span style="color: #2d9574;">"decode:name"</span>,
  366. value : <span style="color: #2d9574;">"Taco van Dijk"</span>,
  367. pl: <span style="color: #a45bad;">1</span>
  368. <span style="color: #b1951d;">}</span>,
  369. <span style="color: #b1951d;">{</span>
  370. type : <span style="color: #2d9574;">"decode:email"</span>,
  371. value : <span style="color: #2d9574;">"taco@waag.org"</span>,
  372. pl: <span style="color: #a45bad;">2</span>
  373. <span style="color: #b1951d;">}</span>,
  374. <span style="color: #b1951d;">{</span>
  375. type : <span style="color: #2d9574;">"decode:address"</span>,
  376. value : <span style="color: #2d9574;">"St. Antoniesbreestraat 69"</span>,
  377. pl: <span style="color: #a45bad;">1</span> <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">since this is shared with all my colleagues i find this public</span>
  378. <span style="color: #b1951d;">}</span>
  379. <span style="color: #67b11d;">]</span>,
  380. pl_sum: <span style="color: #a45bad;">4</span>
  381. <span style="color: #2d9574;">}</span>
  382. <span style="color: #bc6ec5;">]</span>
  383. <span style="color: #4f97d7;">}</span>;
  384. process.stdout.write<span style="color: #4f97d7;">(</span>JSON.stringify<span style="color: #bc6ec5;">(</span>profile<span style="color: #bc6ec5;">)</span><span style="color: #4f97d7;">)</span>;
  385. </pre>
  386. </div>
  387. </div>
  388. <div id="outline-container-org5960c1d" class="outline-4">
  389. <h4 id="org5960c1d"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
  390. <div class="outline-text-4" id="text-2-1-1">
  391. <ul class="org-ul">
  392. <li>Apply default weights to each property type, these can be overridden by attributing a privacy level to the property</li>
  393. <li>Make a big list of possible property types (at least properties that are used in Gebied Online)</li>
  394. <li>Make a big list of possible context names</li>
  395. <li>Create a generator that seeds profiles with random contexts from the aforementioned lists.</li>
  396. </ul>
  397. </div>
  398. </div>
  399. </div>
  400. <div id="outline-container-org2396396" class="outline-3">
  401. <h3 id="org2396396"><span class="section-number-3">2.2</span> Example request</h3>
  402. <div class="outline-text-3" id="text-2-2">
  403. <p>
  404. This sample application request consists of an application name, a set of required property types and a set of optional property types.
  405. Each application has a default context type attached to it, (so we can assign it a hue).
  406. For each request we can calculate the average privacy level,
  407. and the cumulative privacy weight by adding the privacy levels of each property in the request.
  408. </p>
  409. <div class="org-src-container">
  410. <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>
  411. application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
  412. 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>
  413. 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>,
  414. optional : <span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"decode:phone"</span><span style="color: #bc6ec5;">]</span>
  415. <span style="color: #4f97d7;">}</span>
  416. <span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">data</span> = JSON.stringify<span style="color: #4f97d7;">(</span>request<span style="color: #4f97d7;">)</span> + <span style="color: #2d9574;">"\n"</span>;
  417. process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color: #4f97d7;">)</span>;
  418. </pre>
  419. </div>
  420. </div>
  421. <div id="outline-container-org8a47427" class="outline-4">
  422. <h4 id="org8a47427"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
  423. <div class="outline-text-4" id="text-2-2-1">
  424. <ul class="org-ul">
  425. <li>Create a generator that seeds a request with random required and optional property types</li>
  426. <li>Attribute a default context type to the application</li>
  427. </ul>
  428. </div>
  429. </div>
  430. </div>
  431. </div>
  432. <div id="outline-container-org4d72153" class="outline-2">
  433. <h2 id="org4d72153"><span class="section-number-2">3</span> Data Comparison</h2>
  434. <div class="outline-text-2" id="text-3">
  435. <p>
  436. During the interaction we want to give the user insight into a couple of things;
  437. </p>
  438. <ul class="org-ul">
  439. <li>How does the requested set of properties relate to the different contexts? How well does a context match to the request?</li>
  440. <li>What would it mean for the context if the request was accepted? How many / which properties would have to be added to the context in order to fulfill the request?</li>
  441. <li>What would it mean for the cumulative weight of the context?</li>
  442. </ul>
  443. <p>
  444. In below ruby code a comparison is made by on creating the intersection and its inverse between the request and each context.
  445. </p>
  446. <div class="org-src-container">
  447. <pre class="src src-ruby" id="org9724946"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
  448. <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>
  449. request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
  450. profile = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>profile_data<span style="color: #4f97d7;">)</span>
  451. context_diffs = <span style="color: #4f97d7;">[]</span>
  452. profile<span style="color: #4f97d7;">[</span><span style="color: #2d9574;">"contexts"</span><span style="color: #4f97d7;">]</span>.each <span style="color: #4f97d7; font-weight: bold;">do</span> | context |
  453. requested = request<span style="color: #4f97d7;">[</span><span style="color: #2d9574;">"required"</span><span style="color: #4f97d7;">]</span> + request<span style="color: #4f97d7;">[</span><span style="color: #2d9574;">"optional"</span><span style="color: #4f97d7;">]</span>
  454. available = context<span style="color: #4f97d7;">[</span><span style="color: #2d9574;">"properties"</span><span style="color: #4f97d7;">]</span>.map <span style="color: #4f97d7;">{</span>|p| <span style="color: #4f97d7;">p</span><span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"type"</span><span style="color: #bc6ec5;">]</span><span style="color: #4f97d7;">}</span>
  455. intersect = available &amp; requested
  456. except = requested - available
  457. diff = <span style="color: #4f97d7;">{</span><span style="color: #a45bad;">:context</span> =&gt; context<span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"title"</span><span style="color: #bc6ec5;">]</span>, <span style="color: #a45bad;">:intersect</span> =&gt; intersect, <span style="color: #a45bad;">:except</span> =&gt; except<span style="color: #4f97d7;">}</span>
  458. context_diffs &lt;&lt; diff
  459. <span style="color: #4f97d7; font-weight: bold;">end</span>
  460. </pre>
  461. </div>
  462. </div>
  463. <div id="outline-container-org50b710d" class="outline-4">
  464. <h4 id="org50b710d"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
  465. <div class="outline-text-4" id="text-3-0-1">
  466. <ul class="org-ul">
  467. <li>Calculate the weight (sum of privacy levels of the properties it contains) of each context before and after giving permission</li>
  468. </ul>
  469. <p>
  470. NOTE: We export to file diff.xml here for easy parsing in processing.js below.
  471. </p>
  472. <p>
  473. /de relatieve grootte van de cirkel kan zijn op basis van hoeveel data je erin hebt.
  474. personal is size 4, professional size 3
  475. request is size 3
  476. </p>
  477. </div>
  478. </div>
  479. </div>
  480. <div id="outline-container-org1332fc3" class="outline-2">
  481. <h2 id="org1332fc3"><span class="section-number-2">4</span> Visualization</h2>
  482. <div class="outline-text-2" id="text-4">
  483. <p>
  484. We want to visualize the following things;
  485. </p>
  486. <ul class="org-ul">
  487. <li>The request with the application name and it's size / quality (Who's asking what)</li>
  488. <li>The different contexts with it's name and size / quality relative to the request. (What would it mean to accept?)</li>
  489. </ul>
  490. <p>
  491. Per the design of Dyne, we want to use color to indicate the relation between the request and each context.
  492. A color should indicate something about privacy level and context type.
  493. For now the mapping is as follows;
  494. Different hues can be mapped to each context type.
  495. Different tones within the hue can be mapped to each privacy level.
  496. </p>
  497. <div class="org-src-container">
  498. <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>
  499. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a3</span> = #<span style="color: #a45bad;">3A3B58</span>;
  500. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b3</span> = #<span style="color: #a45bad;">734246</span>;
  501. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d3</span> = #B4561F;
  502. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c3</span> = #<span style="color: #a45bad;">336F60</span>;
  503. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f3</span> = #<span style="color: #a45bad;">7A3E2A</span>;
  504. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g3</span> = #A48137;
  505. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e2</span> = #<span style="color: #a45bad;">97BBCB</span>;
  506. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a4</span> = #<span style="color: #a45bad;">3B4257</span>;
  507. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b4</span> = #<span style="color: #a45bad;">6A4345</span>;
  508. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d4</span> = #<span style="color: #a45bad;">86451F</span>;
  509. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c4</span> = #<span style="color: #a45bad;">345A48</span>;
  510. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f4</span> = #A92F21;
  511. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g4</span> = #BC983B;
  512. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a5</span> = #<span style="color: #a45bad;">3D4358</span>;
  513. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b5</span> = #<span style="color: #a45bad;">402623</span>;
  514. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d5</span> = #<span style="color: #a45bad;">85442D</span>;
  515. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c5</span> = #<span style="color: #a45bad;">3B403A</span>;
  516. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f5</span> = #<span style="color: #a45bad;">7A150B</span>;
  517. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g5</span> = #<span style="color: #a45bad;">252F2B</span>;
  518. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a1</span> = #<span style="color: #a45bad;">597099</span>;
  519. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e4</span> = #<span style="color: #a45bad;">0A3878</span>;
  520. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b1</span> = #D16365;
  521. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d1</span> = #FFD43B;
  522. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c1</span> = #B7BF98;
  523. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e1</span> = #CAD2C8;
  524. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e0</span> = #F5EDE5;
  525. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f1</span> = #D17978;
  526. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g1</span> = #FDD23E;
  527. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a0</span> = #C5C3CC;
  528. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e3</span> = #<span style="color: #a45bad;">0485B1</span>;
  529. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b0</span> = #FFDCD6;
  530. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d0</span> = #FFE9BE;
  531. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c0</span> = #F0E9D5;
  532. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f0</span> = #E4C8BF;
  533. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g0</span> = #FBE6BA;
  534. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a2</span> = #<span style="color: #a45bad;">3D4B79</span>;
  535. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e5</span> = #<span style="color: #a45bad;">084064</span>;
  536. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b2</span> = #<span style="color: #a45bad;">974244</span>;
  537. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d2</span> = #F8AA08;
  538. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c2</span> = #<span style="color: #a45bad;">4E937F</span>;
  539. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f2</span> = #<span style="color: #a45bad;">8F4330</span>;
  540. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g2</span> = #FFDB03;
  541. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">colors</span><span style="color: #4f97d7;">[][]</span> = <span style="color: #4f97d7;">{</span>
  542. <span style="color: #bc6ec5;">{</span>b0,b1,b2,b3,b4,b5<span style="color: #bc6ec5;">}</span>,
  543. <span style="color: #bc6ec5;">{</span>c0,c1,c2,c3,c4,c5<span style="color: #bc6ec5;">}</span>,
  544. <span style="color: #bc6ec5;">{</span>a0,a1,a2,a3,a4,a5<span style="color: #bc6ec5;">}</span>,
  545. <span style="color: #bc6ec5;">{</span>d0,d1,d2,d3,d4,d5<span style="color: #bc6ec5;">}</span>,
  546. <span style="color: #bc6ec5;">{</span>e0,e1,e2,e3,e4,e5<span style="color: #bc6ec5;">}</span>,
  547. <span style="color: #bc6ec5;">{</span>f0,f1,f2,f3,f4,f5<span style="color: #bc6ec5;">}</span>,
  548. <span style="color: #bc6ec5;">{</span>g0,g1,g2,g3,g4,g5<span style="color: #bc6ec5;">}</span>
  549. <span style="color: #4f97d7;">}</span>;
  550. <span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">PrivacyLevel</span> <span style="color: #4f97d7;">{</span>
  551. <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>
  552. <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>
  553. <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>
  554. <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>
  555. <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>
  556. <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>
  557. <span style="color: #4f97d7;">}</span>
  558. <span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">ContextType</span> <span style="color: #4f97d7;">{</span>
  559. <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>
  560. <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>
  561. <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>
  562. <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>
  563. <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>
  564. <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>
  565. <span style="color: #4f97d7;">}</span>
  566. <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>
  567. <span style="color: #4f97d7;">{</span>
  568. <span style="color: #4f97d7; font-weight: bold;">return</span> colors<span style="color: #bc6ec5;">[</span>context_type<span style="color: #bc6ec5;">][</span>privacy_level<span style="color: #bc6ec5;">]</span>;
  569. <span style="color: #4f97d7;">}</span>
  570. </pre>
  571. </div>
  572. <p>
  573. Below snippet exemplifies a color for the SELF context with a privacy level SECRET, and should be a dark red color.
  574. </p>
  575. <div class="org-src-container">
  576. <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>
  577. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
  578. background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  579. noStroke<span style="color: #bc6ec5;">()</span>;
  580. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.SECRET;
  581. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.SELF;
  582. <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>
  583. fill<span style="color: #bc6ec5;">(</span>secret_self<span style="color: #bc6ec5;">)</span>;
  584. 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>;
  585. <span style="color: #4f97d7;">}</span>
  586. </pre>
  587. </div>
  588. <script src="processing.js"></script>
  589. <script type="text/processing" data-processing-target="ob-16a3bfeaae0796f9c0bb86df72e7c664178dbee9">
  590. //color definitions
  591. color a3 = #3A3B58;
  592. color b3 = #734246;
  593. color d3 = #B4561F;
  594. color c3 = #336F60;
  595. color f3 = #7A3E2A;
  596. color g3 = #A48137;
  597. color e2 = #97BBCB;
  598. color a4 = #3B4257;
  599. color b4 = #6A4345;
  600. color d4 = #86451F;
  601. color c4 = #345A48;
  602. color f4 = #A92F21;
  603. color g4 = #BC983B;
  604. color a5 = #3D4358;
  605. color b5 = #402623;
  606. color d5 = #85442D;
  607. color c5 = #3B403A;
  608. color f5 = #7A150B;
  609. color g5 = #252F2B;
  610. color a1 = #597099;
  611. color e4 = #0A3878;
  612. color b1 = #D16365;
  613. color d1 = #FFD43B;
  614. color c1 = #B7BF98;
  615. color e1 = #CAD2C8;
  616. color e0 = #F5EDE5;
  617. color f1 = #D17978;
  618. color g1 = #FDD23E;
  619. color a0 = #C5C3CC;
  620. color e3 = #0485B1;
  621. color b0 = #FFDCD6;
  622. color d0 = #FFE9BE;
  623. color c0 = #F0E9D5;
  624. color f0 = #E4C8BF;
  625. color g0 = #FBE6BA;
  626. color a2 = #3D4B79;
  627. color e5 = #084064;
  628. color b2 = #974244;
  629. color d2 = #F8AA08;
  630. color c2 = #4E937F;
  631. color f2 = #8F4330;
  632. color g2 = #FFDB03;
  633. color colors[][] = {
  634. {b0,b1,b2,b3,b4,b5},
  635. {c0,c1,c2,c3,c4,c5},
  636. {a0,a1,a2,a3,a4,a5},
  637. {d0,d1,d2,d3,d4,d5},
  638. {e0,e1,e2,e3,e4,e5},
  639. {f0,f1,f2,f3,f4,f5},
  640. {g0,g1,g2,g3,g4,g5}
  641. };
  642. class PrivacyLevel {
  643. public static int SECRET = 5; //passwords, keys etc.
  644. public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff
  645. public static int INTIMATE = 3;//e.g. stuff you share with family
  646. public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc
  647. public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle
  648. public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff
  649. }
  650. class ContextType {
  651. public static int SELF = 5; //stuff that applies strictly to yourself
  652. public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
  653. public static int FRIENDS = 3;//stuff you share with friends
  654. public static int WORK = 2;//stuff you share in a professional context
  655. public static int HOBBY = 1;//stuff you share in the context of a pastime
  656. public static int OTHER = 0;//stuff that doesn't fit in any of the other types
  657. }
  658. public int getColor(int privacy_level, int context_type)
  659. {
  660. return colors[context_type][privacy_level];
  661. }
  662. void draw(){
  663. size(100,100);
  664. background(0);
  665. noStroke();
  666. int level = PrivacyLevel.SECRET;
  667. int contextType = ContextType.SELF;
  668. color secret_self = getColor(level, contextType);//expect dark red
  669. fill(secret_self);
  670. ellipse(50,50,50,50);
  671. }
  672. </script> <canvas id="ob-16a3bfeaae0796f9c0bb86df72e7c664178dbee9"></canvas>
  673. <div class="org-src-container">
  674. <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>
  675. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
  676. background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  677. noStroke<span style="color: #bc6ec5;">()</span>;
  678. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC;
  679. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.WORK;
  680. <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>
  681. fill<span style="color: #bc6ec5;">(</span>work_public<span style="color: #bc6ec5;">)</span>;
  682. 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>;
  683. <span style="color: #4f97d7;">}</span>
  684. </pre>
  685. </div>
  686. <script src="processing.js"></script>
  687. <script type="text/processing" data-processing-target="ob-aa9a4cb8275feb0ce1c5423b4f8d6a81fa9e4a49">
  688. //color definitions
  689. color a3 = #3A3B58;
  690. color b3 = #734246;
  691. color d3 = #B4561F;
  692. color c3 = #336F60;
  693. color f3 = #7A3E2A;
  694. color g3 = #A48137;
  695. color e2 = #97BBCB;
  696. color a4 = #3B4257;
  697. color b4 = #6A4345;
  698. color d4 = #86451F;
  699. color c4 = #345A48;
  700. color f4 = #A92F21;
  701. color g4 = #BC983B;
  702. color a5 = #3D4358;
  703. color b5 = #402623;
  704. color d5 = #85442D;
  705. color c5 = #3B403A;
  706. color f5 = #7A150B;
  707. color g5 = #252F2B;
  708. color a1 = #597099;
  709. color e4 = #0A3878;
  710. color b1 = #D16365;
  711. color d1 = #FFD43B;
  712. color c1 = #B7BF98;
  713. color e1 = #CAD2C8;
  714. color e0 = #F5EDE5;
  715. color f1 = #D17978;
  716. color g1 = #FDD23E;
  717. color a0 = #C5C3CC;
  718. color e3 = #0485B1;
  719. color b0 = #FFDCD6;
  720. color d0 = #FFE9BE;
  721. color c0 = #F0E9D5;
  722. color f0 = #E4C8BF;
  723. color g0 = #FBE6BA;
  724. color a2 = #3D4B79;
  725. color e5 = #084064;
  726. color b2 = #974244;
  727. color d2 = #F8AA08;
  728. color c2 = #4E937F;
  729. color f2 = #8F4330;
  730. color g2 = #FFDB03;
  731. color colors[][] = {
  732. {b0,b1,b2,b3,b4,b5},
  733. {c0,c1,c2,c3,c4,c5},
  734. {a0,a1,a2,a3,a4,a5},
  735. {d0,d1,d2,d3,d4,d5},
  736. {e0,e1,e2,e3,e4,e5},
  737. {f0,f1,f2,f3,f4,f5},
  738. {g0,g1,g2,g3,g4,g5}
  739. };
  740. class PrivacyLevel {
  741. public static int SECRET = 5; //passwords, keys etc.
  742. public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff
  743. public static int INTIMATE = 3;//e.g. stuff you share with family
  744. public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc
  745. public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle
  746. public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff
  747. }
  748. class ContextType {
  749. public static int SELF = 5; //stuff that applies strictly to yourself
  750. public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
  751. public static int FRIENDS = 3;//stuff you share with friends
  752. public static int WORK = 2;//stuff you share in a professional context
  753. public static int HOBBY = 1;//stuff you share in the context of a pastime
  754. public static int OTHER = 0;//stuff that doesn't fit in any of the other types
  755. }
  756. public int getColor(int privacy_level, int context_type)
  757. {
  758. return colors[context_type][privacy_level];
  759. }
  760. void draw(){
  761. size(100,100);
  762. background(0);
  763. noStroke();
  764. int level = PrivacyLevel.PUBLIC;
  765. int contextType = ContextType.WORK;
  766. color work_public = getColor(level, contextType);//expect light blueish
  767. fill(work_public);
  768. ellipse(50,50,50,50);
  769. }
  770. </script> <canvas id="ob-aa9a4cb8275feb0ce1c5423b4f8d6a81fa9e4a49"></canvas>
  771. </div>
  772. <div id="outline-container-org9f97176" class="outline-3">
  773. <h3 id="org9f97176"><span class="section-number-3">4.1</span> Request</h3>
  774. <div class="outline-text-3" id="text-4-1">
  775. <div class="org-src-container">
  776. <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>;
  777. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">background(0);</span>
  778. noFill<span style="color: #4f97d7;">()</span>;
  779. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">the size of request is fixed for now</span>
  780. <span style="color: #ce537a; font-weight: bold;">ffloat</span> <span style="color: #7590db;">centerX</span> = width/<span style="color: #a45bad;">2</span>;
  781. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerY</span> = height/<span style="color: #a45bad;">2</span>;
  782. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">rsize</span> = <span style="color: #a45bad;">55</span>;
  783. <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>
  784. <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>
  785. <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>;
  786. fill<span style="color: #4f97d7;">(</span>reqColor<span style="color: #4f97d7;">)</span>;
  787. ellipse<span style="color: #4f97d7;">(</span>centerX, centerY, rsize, rsize<span style="color: #4f97d7;">)</span>;
  788. <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>
  789. fill<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
  790. textAlign<span style="color: #4f97d7;">(</span>CENTER,CENTER<span style="color: #4f97d7;">)</span>;
  791. 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>;
  792. </pre>
  793. </div>
  794. <script src="processing.js"></script>
  795. <script type="text/processing" data-processing-target="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a">
  796. //color definitions
  797. color a3 = #3A3B58;
  798. color b3 = #734246;
  799. color d3 = #B4561F;
  800. color c3 = #336F60;
  801. color f3 = #7A3E2A;
  802. color g3 = #A48137;
  803. color e2 = #97BBCB;
  804. color a4 = #3B4257;
  805. color b4 = #6A4345;
  806. color d4 = #86451F;
  807. color c4 = #345A48;
  808. color f4 = #A92F21;
  809. color g4 = #BC983B;
  810. color a5 = #3D4358;
  811. color b5 = #402623;
  812. color d5 = #85442D;
  813. color c5 = #3B403A;
  814. color f5 = #7A150B;
  815. color g5 = #252F2B;
  816. color a1 = #597099;
  817. color e4 = #0A3878;
  818. color b1 = #D16365;
  819. color d1 = #FFD43B;
  820. color c1 = #B7BF98;
  821. color e1 = #CAD2C8;
  822. color e0 = #F5EDE5;
  823. color f1 = #D17978;
  824. color g1 = #FDD23E;
  825. color a0 = #C5C3CC;
  826. color e3 = #0485B1;
  827. color b0 = #FFDCD6;
  828. color d0 = #FFE9BE;
  829. color c0 = #F0E9D5;
  830. color f0 = #E4C8BF;
  831. color g0 = #FBE6BA;
  832. color a2 = #3D4B79;
  833. color e5 = #084064;
  834. color b2 = #974244;
  835. color d2 = #F8AA08;
  836. color c2 = #4E937F;
  837. color f2 = #8F4330;
  838. color g2 = #FFDB03;
  839. color colors[][] = {
  840. {b0,b1,b2,b3,b4,b5},
  841. {c0,c1,c2,c3,c4,c5},
  842. {a0,a1,a2,a3,a4,a5},
  843. {d0,d1,d2,d3,d4,d5},
  844. {e0,e1,e2,e3,e4,e5},
  845. {f0,f1,f2,f3,f4,f5},
  846. {g0,g1,g2,g3,g4,g5}
  847. };
  848. class PrivacyLevel {
  849. public static int SECRET = 5; //passwords, keys etc.
  850. public static int PRIVATE = 4;//ssn etc, strict need to know basis stuff
  851. public static int INTIMATE = 3;//e.g. stuff you share with family
  852. public static int AFFILIATE = 2;//e.g. stuff you share with work, project etc
  853. public static int PUBLIC = 1;//e.g. stuff that everybody may know, your e.g. twitter handle
  854. public static int COMMONS = 0;//stuff that is intended for the public good / commons, anonimized IoT stuff
  855. }
  856. class ContextType {
  857. public static int SELF = 5; //stuff that applies strictly to yourself
  858. public static int FAMILY = 4;//stuff that applies to you and your family (hopefully not facebook pics)
  859. public static int FRIENDS = 3;//stuff you share with friends
  860. public static int WORK = 2;//stuff you share in a professional context
  861. public static int HOBBY = 1;//stuff you share in the context of a pastime
  862. public static int OTHER = 0;//stuff that doesn't fit in any of the other types
  863. }
  864. public int getColor(int privacy_level, int context_type)
  865. {
  866. return colors[context_type][privacy_level];
  867. }
  868. class Request
  869. {
  870. public String application;
  871. public int contextType;
  872. public String[] required_properties;
  873. public String[] optional_properties;
  874. public Request(String app, int contextType, String[] req, String[] opt)
  875. {
  876. this.application = app;
  877. this.contextType = contextType;
  878. this.required_properties = req;
  879. this.optional_properties = opt;
  880. }
  881. }
  882. class Diff
  883. {
  884. public String context;
  885. public String[] intersect;
  886. public String[] except;
  887. public Diff(String ctx, String[] intersect, String[] except)
  888. {
  889. this.context = ctx;
  890. this.intersect = intersect;
  891. this.except = except;
  892. }
  893. }
  894. class Property
  895. {
  896. public String type;
  897. public String value;
  898. public int pl;//privacy level
  899. public Property(String type, String value, int pl)
  900. {
  901. this.type = type;
  902. this.value = value;
  903. this.pl = pl;
  904. }
  905. }
  906. class Context
  907. {
  908. public String title;
  909. public int plSum;
  910. public Property[] properties;
  911. public Context(String title, int plSum, Property[] properties)
  912. {
  913. this.title = title;
  914. this.plSum = plSum;
  915. this.properties = properties;
  916. }
  917. }
  918. XMLElement doc = new XMLElement(this, 'diff.xml');
  919. //create typed versions because this is java :-(
  920. Request parseRequest(XMLElement xml)
  921. {
  922. XMLElement req = xml.getChild(0);
  923. String name = req.getChild(0).getContent();
  924. int contextType = req.getChild(1).getContent();
  925. String[] required = new String[req.getChild(2).getChildCount()];
  926. String[] optional = new String[req.getChild(3).getChildCount()];
  927. for (int i = 0; i < required.length; i++) {
  928. required[i] = req.getChild(2).getChild(i).getContent();
  929. }
  930. for (int i = 0; i < optional.length; i++) {
  931. optional[i] = req.getChild(3).getChild(i).getContent();
  932. }
  933. Request r = new Request(name,contextType,required,optional);
  934. return r;
  935. }
  936. Context[] parseProfile(XMLElement xml)
  937. {
  938. XMLElement profile = xml.getChild(2);
  939. Context[] contexts = new Context[profile.getChildCount()];
  940. for(int i = 0; i < contexts.length; i++)
  941. {
  942. String contextName = profile.getChild(i).getChild(0).getContent();
  943. int plSum = parseInt(profile.getChild(i).getChild(1).getContent());
  944. XMLElement propertiesEl = profile.getChild(i).getChild(2);
  945. Property[] properties = new Property[propertiesEl.getChildCount()];
  946. for(int j = 0; j < properties.length; j++)
  947. {
  948. Property prop = parseProperty(propertiesEl.getChild(j));
  949. properties[j] = prop;
  950. }
  951. Context context = new Context(contextName, plSum, properties);
  952. contexts[i] = context;
  953. }
  954. return contexts;
  955. }
  956. Property parseProperty(XMLElement propertyEl)
  957. {
  958. String propertyType = propertyEl.getChild(0).getContent();
  959. String value = propertyEl.getChild(1).getContent();
  960. int pl = parseInt(propertyEl.getChild(2).getContent());
  961. return new Property(propertyType, value, pl);
  962. }
  963. //create typed versions because this is java :-(
  964. Diff[] parseDiffs(xml)
  965. {
  966. XMLElement diffsEl = xml.getChild(1);
  967. Diff[] diffs = new Diff[diffsEl.getChildCount()];
  968. for(int i = 0; i < diffs.length; i++)
  969. {
  970. String contextName = diffsEl.getChild(i).getChild(0).getContent();
  971. String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
  972. String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
  973. for(int j = 0; j < intersects.length; j++)
  974. {
  975. intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
  976. }
  977. for(int j = 0; j < except.length; j++)
  978. {
  979. except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
  980. }
  981. Diff diff = new Diff(contextName,intersects,except);
  982. diffs[i] = diff;
  983. }
  984. return diffs;
  985. }
  986. Request request = parseRequest(doc);
  987. Diff[] diffs = parseDiffs(doc);
  988. Context[] contexts = parseProfile(doc);
  989. size(200,200);
  990. //background(0);
  991. noFill();
  992. //the size of request is fixed for now
  993. ffloat centerX = width/2;
  994. float centerY = height/2;
  995. float rsize = 55;
  996. //color of request is mapped to the privacy type of the request, each request has one.
  997. //INTIMATE because it's in the middle of the privacy level continuum
  998. color reqColor = getColor(PrivacyLevel.INTIMATE, request.contextType);
  999. fill(reqColor);
  1000. ellipse(centerX, centerY, rsize, rsize);
  1001. //show the name of the application that makes the request, centered below the circle
  1002. fill(0);
  1003. textAlign(CENTER,CENTER);
  1004. text(request.application, centerX, centerY + rsize/1.5);
  1005. </script> <canvas id="ob-f9f66b9e5706c261fe6a8e83b2c21b85d94e102a"></canvas>
  1006. </div>
  1007. </div>
  1008. <div id="outline-container-orgc83b740" class="outline-3">
  1009. <h3 id="orgc83b740"><span class="section-number-3">4.2</span> Contexts</h3>
  1010. <div class="outline-text-3" id="text-4-2">
  1011. <p>
  1012. How do we visulize each context? Intend to do this in processing too.
  1013. </p>
  1014. <div class="org-src-container">
  1015. <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>
  1016. size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
  1017. background<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
  1018. noFill<span style="color: #4f97d7;">()</span>;
  1019. stroke<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">255</span><span style="color: #4f97d7;">)</span>;
  1020. 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>;
  1021. text<span style="color: #4f97d7;">(</span>diffs<span style="color: #bc6ec5;">[</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">]</span>.context, <span style="color: #a45bad;">10</span>, <span style="color: #a45bad;">10</span><span style="color: #4f97d7;">)</span>;
  1022. text<span style="color: #4f97d7;">(</span>contexts<span style="color: #bc6ec5;">[</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">]</span>.properties<span style="color: #bc6ec5;">[</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">]</span>.value, <span style="color: #a45bad;">10</span>, <span style="color: #a45bad;">50</span><span style="color: #4f97d7;">)</span>;
  1023. </pre>
  1024. </div>
  1025. <script src="processing.js"></script>
  1026. <script type="text/processing" data-processing-target="ob-74f1a6b8e72f844b929f5904bea850acb6918dbb">
  1027. class Request
  1028. {
  1029. public String application;
  1030. public int contextType;
  1031. public String[] required_properties;
  1032. public String[] optional_properties;
  1033. public Request(String app, int contextType, String[] req, String[] opt)
  1034. {
  1035. this.application = app;
  1036. this.contextType = contextType;
  1037. this.required_properties = req;
  1038. this.optional_properties = opt;
  1039. }
  1040. }
  1041. class Diff
  1042. {
  1043. public String context;
  1044. public String[] intersect;
  1045. public String[] except;
  1046. public Diff(String ctx, String[] intersect, String[] except)
  1047. {
  1048. this.context = ctx;
  1049. this.intersect = intersect;
  1050. this.except = except;
  1051. }
  1052. }
  1053. class Property
  1054. {
  1055. public String type;
  1056. public String value;
  1057. public int pl;//privacy level
  1058. public Property(String type, String value, int pl)
  1059. {
  1060. this.type = type;
  1061. this.value = value;
  1062. this.pl = pl;
  1063. }
  1064. }
  1065. class Context
  1066. {
  1067. public String title;
  1068. public int plSum;
  1069. public Property[] properties;
  1070. public Context(String title, int plSum, Property[] properties)
  1071. {
  1072. this.title = title;
  1073. this.plSum = plSum;
  1074. this.properties = properties;
  1075. }
  1076. }
  1077. XMLElement doc = new XMLElement(this, 'diff.xml');
  1078. //create typed versions because this is java :-(
  1079. Request parseRequest(XMLElement xml)
  1080. {
  1081. XMLElement req = xml.getChild(0);
  1082. String name = req.getChild(0).getContent();
  1083. int contextType = req.getChild(1).getContent();
  1084. String[] required = new String[req.getChild(2).getChildCount()];
  1085. String[] optional = new String[req.getChild(3).getChildCount()];
  1086. for (int i = 0; i < required.length; i++) {
  1087. required[i] = req.getChild(2).getChild(i).getContent();
  1088. }
  1089. for (int i = 0; i < optional.length; i++) {
  1090. optional[i] = req.getChild(3).getChild(i).getContent();
  1091. }
  1092. Request r = new Request(name,contextType,required,optional);
  1093. return r;
  1094. }
  1095. Context[] parseProfile(XMLElement xml)
  1096. {
  1097. XMLElement profile = xml.getChild(2);
  1098. Context[] contexts = new Context[profile.getChildCount()];
  1099. for(int i = 0; i < contexts.length; i++)
  1100. {
  1101. String contextName = profile.getChild(i).getChild(0).getContent();
  1102. int plSum = parseInt(profile.getChild(i).getChild(1).getContent());
  1103. XMLElement propertiesEl = profile.getChild(i).getChild(2);
  1104. Property[] properties = new Property[propertiesEl.getChildCount()];
  1105. for(int j = 0; j < properties.length; j++)
  1106. {
  1107. Property prop = parseProperty(propertiesEl.getChild(j));
  1108. properties[j] = prop;
  1109. }
  1110. Context context = new Context(contextName, plSum, properties);
  1111. contexts[i] = context;
  1112. }
  1113. return contexts;
  1114. }
  1115. Property parseProperty(XMLElement propertyEl)
  1116. {
  1117. String propertyType = propertyEl.getChild(0).getContent();
  1118. String value = propertyEl.getChild(1).getContent();
  1119. int pl = parseInt(propertyEl.getChild(2).getContent());
  1120. return new Property(propertyType, value, pl);
  1121. }
  1122. //create typed versions because this is java :-(
  1123. Diff[] parseDiffs(xml)
  1124. {
  1125. XMLElement diffsEl = xml.getChild(1);
  1126. Diff[] diffs = new Diff[diffsEl.getChildCount()];
  1127. for(int i = 0; i < diffs.length; i++)
  1128. {
  1129. String contextName = diffsEl.getChild(i).getChild(0).getContent();
  1130. String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
  1131. String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
  1132. for(int j = 0; j < intersects.length; j++)
  1133. {
  1134. intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
  1135. }
  1136. for(int j = 0; j < except.length; j++)
  1137. {
  1138. except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
  1139. }
  1140. Diff diff = new Diff(contextName,intersects,except);
  1141. diffs[i] = diff;
  1142. }
  1143. return diffs;
  1144. }
  1145. Request request = parseRequest(doc);
  1146. Diff[] diffs = parseDiffs(doc);
  1147. Context[] contexts = parseProfile(doc);
  1148. //draw the difference for each context with the request
  1149. size(200,200);
  1150. background(0);
  1151. noFill();
  1152. stroke(255);
  1153. ellipse(56, 46, 55, 55);
  1154. text(diffs[0].context, 10, 10);
  1155. text(contexts[0].properties[0].value, 10, 50);
  1156. </script> <canvas id="ob-74f1a6b8e72f844b929f5904bea850acb6918dbb"></canvas>
  1157. </div>
  1158. <div id="outline-container-org2668e3e" class="outline-4">
  1159. <h4 id="org2668e3e"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
  1160. <div class="outline-text-4" id="text-4-2-1">
  1161. <ul class="org-ul">
  1162. <li>How do we show relation between request and each context with color?</li>
  1163. <li>Can we use distance as well as color to indicate the relation?</li>
  1164. <li>Can we use size of the circle to indicate the weight, or use badges?</li>
  1165. </ul>
  1166. </div>
  1167. </div>
  1168. </div>
  1169. </div>
  1170. <div id="outline-container-org084ab12" class="outline-2">
  1171. <h2 id="org084ab12"><span class="section-number-2">5</span> Interaction</h2>
  1172. <div class="outline-text-2" id="text-5">
  1173. <p>
  1174. We intend to investigate this in Processing as well.
  1175. </p>
  1176. </div>
  1177. <div id="outline-container-org8d8a728" class="outline-4">
  1178. <h4 id="org8d8a728"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
  1179. <div class="outline-text-4" id="text-5-0-1">
  1180. <ul class="org-ul">
  1181. <li>How does the end user actually accept the request? Is it by dragging the request onto the context?</li>
  1182. <li>How does the end user decline the request?</li>
  1183. </ul>
  1184. </div>
  1185. </div>
  1186. </div>
  1187. </div>
  1188. <div id="postamble" class="status">
  1189. <p class="author">Author: Taco</p>
  1190. <p class="date">Created: 2018-04-06 Fri 15:41</p>
  1191. <p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
  1192. </div>
  1193. </body>
  1194. </html>