Entitlements user interaction designs and proof of concept

entitlements.html 107KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257
  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-10 Tue 16:47 -->
  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. <script type="text/javascript">
  183. /*
  184. @licstart The following is the entire license notice for the
  185. JavaScript code in this tag.
  186. Copyright (C) 2012-2018 Free Software Foundation, Inc.
  187. The JavaScript code in this tag is free software: you can
  188. redistribute it and/or modify it under the terms of the GNU
  189. General Public License (GNU GPL) as published by the Free Software
  190. Foundation, either version 3 of the License, or (at your option)
  191. any later version. The code is distributed WITHOUT ANY WARRANTY;
  192. without even the implied warranty of MERCHANTABILITY or FITNESS
  193. FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
  194. As additional permission under GNU GPL version 3 section 7, you
  195. may distribute non-source (e.g., minimized or compacted) forms of
  196. that code without the copy of the GNU GPL normally required by
  197. section 4, provided you include this license notice and a URL
  198. through which recipients can access the Corresponding Source.
  199. @licend The above is the entire license notice
  200. for the JavaScript code in this tag.
  201. */
  202. <!--/*--><![CDATA[/*><!--*/
  203. function CodeHighlightOn(elem, id)
  204. {
  205. var target = document.getElementById(id);
  206. if(null != target) {
  207. elem.cacheClassElem = elem.className;
  208. elem.cacheClassTarget = target.className;
  209. target.className = "code-highlighted";
  210. elem.className = "code-highlighted";
  211. }
  212. }
  213. function CodeHighlightOff(elem, id)
  214. {
  215. var target = document.getElementById(id);
  216. if(elem.cacheClassElem)
  217. elem.className = elem.cacheClassElem;
  218. if(elem.cacheClassTarget)
  219. target.className = elem.cacheClassTarget;
  220. }
  221. /*]]>*///-->
  222. </script>
  223. </head>
  224. <body>
  225. <div id="content">
  226. <div id="table-of-contents">
  227. <h2>Table of Contents</h2>
  228. <div id="text-table-of-contents">
  229. <ul>
  230. <li><a href="#org83bb610">1. Introduction</a></li>
  231. <li><a href="#org8c11c03">2. Data Model</a>
  232. <ul>
  233. <li><a href="#org44dc597">2.1. Example wallet profile</a>
  234. <ul>
  235. <li><a href="#org617bd22">2.1.1. Things to further investigate</a></li>
  236. </ul>
  237. </li>
  238. <li><a href="#orgda05e27">2.2. Example request</a>
  239. <ul>
  240. <li><a href="#orgce8ccac">2.2.1. Things to further investigate</a></li>
  241. </ul>
  242. </li>
  243. </ul>
  244. </li>
  245. <li><a href="#org15a1811">3. Data Comparison</a>
  246. <ul>
  247. <li>
  248. <ul>
  249. <li><a href="#orgd1e0da1">3.0.1. Things to further investigate</a></li>
  250. </ul>
  251. </li>
  252. </ul>
  253. </li>
  254. <li><a href="#org4d0f5f5">4. Visualization</a>
  255. <ul>
  256. <li><a href="#orgcc3201f">4.1. Request</a></li>
  257. <li><a href="#orgb020a5b">4.2. Contexts</a>
  258. <ul>
  259. <li><a href="#org240a507">4.2.1. Things to further investigate</a></li>
  260. </ul>
  261. </li>
  262. </ul>
  263. </li>
  264. <li><a href="#org0f0994b">5. Interaction</a>
  265. <ul>
  266. <li>
  267. <ul>
  268. <li><a href="#org8875081">5.0.1. Things to further investigate</a></li>
  269. </ul>
  270. </li>
  271. </ul>
  272. </li>
  273. </ul>
  274. </div>
  275. </div>
  276. <div id="outline-container-org83bb610" class="outline-2">
  277. <h2 id="org83bb610"><span class="section-number-2">1</span> Introduction</h2>
  278. <div class="outline-text-2" id="text-1">
  279. <p>
  280. The purpose of this document is to investigate possible User Interaction designs for Decode task 4.4.
  281. 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.
  282. </p>
  283. <p>
  284. A prelimary definition of six privacy levels (ordered from most private to least private):
  285. </p>
  286. <ul class="org-ul">
  287. <li>SECRET: passwords, keys etc.</li>
  288. <li>PRIVATE: ssn etc, strict need to know basis stuff</li>
  289. <li>INTIMATE: e.g. stuff you share with family</li>
  290. <li>AFFILIATE: e.g. stuff you share with work, project etc</li>
  291. <li>PUBLIC: e.g. stuff that everybody may know, your e.g. twitter handle</li>
  292. <li>COMMONS: stuff that is intended for the public good / commons, e.g. anonimized IoT stuff</li>
  293. </ul>
  294. <p>
  295. A preliminary definition of context types
  296. </p>
  297. <ul class="org-ul">
  298. <li>PERSONAL: data that relates to your personal life, you can have different instances, for example friends, family etc.</li>
  299. <li>HEALTH: health data, you can define different instances (biosignals, stuff to share with dentist, gp, hospital etc)</li>
  300. <li>EDUCATION: school / educational data (grades, certificates etc)</li>
  301. <li>WORK: stuff you share in a professional context</li>
  302. <li>HOBBY: stuff you share in the context of a pastime</li>
  303. <li>FINANCIAL: for data about mortgages, insurance, taxes etc.</li>
  304. <li>OTHER: for everything that doesn't fit the above</li>
  305. </ul>
  306. </div>
  307. </div>
  308. <div id="outline-container-org8c11c03" class="outline-2">
  309. <h2 id="org8c11c03"><span class="section-number-2">2</span> Data Model</h2>
  310. <div class="outline-text-2" id="text-2">
  311. </div>
  312. <div id="outline-container-org44dc597" class="outline-3">
  313. <h3 id="org44dc597"><span class="section-number-3">2.1</span> Example wallet profile</h3>
  314. <div class="outline-text-3" id="text-2-1">
  315. <p>
  316. This sample wallet profile datastructure consists of multiple contexts.
  317. No assumptions are made about ontology for now so mention of existing e.g. skos/foaf,
  318. everything is in the decode namespace which is well known across applications.
  319. </p>
  320. <p>
  321. Each context has a name and groups on or more properties that consist of a well known type and a value.
  322. A type can be part of more than one context.
  323. </p>
  324. <p>
  325. Every property instance has a privacy level attached to it, so we can calculate the weight of requests and profiles.
  326. It overrides the default privacy level specified by the property type.
  327. </p>
  328. <div class="org-src-container">
  329. <pre class="src src-js" id="org89e5ad7"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">profile</span> = <span style="color: #4f97d7;">{</span>
  330. contexts :
  331. <span style="color: #bc6ec5;">[</span>
  332. <span style="color: #2d9574;">{</span>
  333. title : <span style="color: #2d9574;">"personal"</span>,
  334. context_type : <span style="color: #a45bad;">5</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">PERSONAL</span>
  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;">"Waag society"</span>,
  362. context_type: <span style="color: #a45bad;">2</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">WORK</span>
  363. properties :
  364. <span style="color: #67b11d;">[</span>
  365. <span style="color: #b1951d;">{</span>
  366. type : <span style="color: #2d9574;">"decode:name"</span>,
  367. value : <span style="color: #2d9574;">"Taco van Dijk"</span>,
  368. pl: <span style="color: #a45bad;">1</span>
  369. <span style="color: #b1951d;">}</span>,
  370. <span style="color: #b1951d;">{</span>
  371. type : <span style="color: #2d9574;">"decode:email"</span>,
  372. value : <span style="color: #2d9574;">"taco@waag.org"</span>,
  373. pl: <span style="color: #a45bad;">2</span>
  374. <span style="color: #b1951d;">}</span>,
  375. <span style="color: #b1951d;">{</span>
  376. type : <span style="color: #2d9574;">"decode:address"</span>,
  377. value : <span style="color: #2d9574;">"St. Antoniesbreestraat 69"</span>,
  378. 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>
  379. <span style="color: #b1951d;">}</span>
  380. <span style="color: #67b11d;">]</span>,
  381. pl_sum: <span style="color: #a45bad;">4</span>
  382. <span style="color: #2d9574;">}</span>,
  383. <span style="color: #2d9574;">{</span>
  384. title: <span style="color: #2d9574;">"Dyne"</span>,
  385. context_type: <span style="color: #a45bad;">2</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">WORK</span>
  386. properties :<span style="color: #67b11d;">[</span><span style="color: #b1951d;">{</span>
  387. type : <span style="color: #2d9574;">"decode:name"</span>,
  388. value : <span style="color: #2d9574;">"Ocat"</span>,
  389. pl: <span style="color: #a45bad;">1</span>
  390. <span style="color: #b1951d;">}</span>,
  391. <span style="color: #b1951d;">{</span>
  392. type : <span style="color: #2d9574;">"decode:email"</span>,
  393. value: <span style="color: #2d9574;">"taco@gogs.dyne.org"</span>,
  394. pl: <span style="color: #a45bad;">2</span>
  395. <span style="color: #b1951d;">}</span>
  396. <span style="color: #67b11d;">]</span>,
  397. pl_sum: <span style="color: #a45bad;">3</span>
  398. <span style="color: #2d9574;">}</span>
  399. <span style="color: #bc6ec5;">]</span>
  400. <span style="color: #4f97d7;">}</span>;
  401. 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>;
  402. </pre>
  403. </div>
  404. </div>
  405. <div id="outline-container-org617bd22" class="outline-4">
  406. <h4 id="org617bd22"><span class="section-number-4">2.1.1</span> Things to further investigate</h4>
  407. <div class="outline-text-4" id="text-2-1-1">
  408. <ul class="org-ul">
  409. <li>Apply default weights to each property type, these can be overridden by attributing a privacy level to the property</li>
  410. <li>Make a big list of possible property types (at least properties that are used in Gebied Online)</li>
  411. <li>Make a big list of possible context names</li>
  412. <li>Create a generator that seeds profiles with random contexts from the aforementioned lists.</li>
  413. </ul>
  414. </div>
  415. </div>
  416. </div>
  417. <div id="outline-container-orgda05e27" class="outline-3">
  418. <h3 id="orgda05e27"><span class="section-number-3">2.2</span> Example request</h3>
  419. <div class="outline-text-3" id="text-2-2">
  420. <p>
  421. This sample application request consists of an application name, a set of required property types and a set of optional property types.
  422. Each application has a default context type attached to it, (so we can assign it a hue).
  423. For each request we can calculate the average privacy level,
  424. and the cumulative privacy weight by adding the privacy levels of each property in the request.
  425. </p>
  426. <div class="org-src-container">
  427. <pre class="src src-js" id="org6385e5f"><span style="color: #4f97d7; font-weight: bold;">var</span> <span style="color: #7590db;">request</span> = <span style="color: #4f97d7;">{</span>
  428. application : <span style="color: #2d9574;">"decodeapp:facebook"</span>,
  429. context_type : <span style="color: #a45bad;">5</span>,<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">personal</span>
  430. 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>,
  431. optional : <span style="color: #bc6ec5;">[</span><span style="color: #2d9574;">"decode:phone"</span><span style="color: #bc6ec5;">]</span>
  432. <span style="color: #4f97d7;">}</span>
  433. <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>;
  434. process.stdout.write<span style="color: #4f97d7;">(</span>data<span style="color: #4f97d7;">)</span>;
  435. </pre>
  436. </div>
  437. </div>
  438. <div id="outline-container-orgce8ccac" class="outline-4">
  439. <h4 id="orgce8ccac"><span class="section-number-4">2.2.1</span> Things to further investigate</h4>
  440. <div class="outline-text-4" id="text-2-2-1">
  441. <ul class="org-ul">
  442. <li>Create a generator that seeds a request with random required and optional property types</li>
  443. <li>Calculate the weight of the request</li>
  444. </ul>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. <div id="outline-container-org15a1811" class="outline-2">
  450. <h2 id="org15a1811"><span class="section-number-2">3</span> Data Comparison</h2>
  451. <div class="outline-text-2" id="text-3">
  452. <p>
  453. During the interaction we want to give the user insight into a couple of things;
  454. </p>
  455. <ul class="org-ul">
  456. <li>How does the requested set of properties relate to the different contexts? How well does a context match to the request?</li>
  457. <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>
  458. <li>What would it mean for the cumulative weight of the context?</li>
  459. </ul>
  460. <p>
  461. In below ruby code a comparison is made by on creating the intersection and its inverse between the request and each context.
  462. </p>
  463. <div class="org-src-container">
  464. <pre class="src src-ruby" id="org0f4510f"><span style="color: #4f97d7;">require</span> <span style="color: #2d9574;">'json'</span>
  465. <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>
  466. request = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>request_data<span style="color: #4f97d7;">)</span>
  467. profile = <span style="color: #ce537a; font-weight: bold;">JSON</span>.parse<span style="color: #4f97d7;">(</span>profile_data<span style="color: #4f97d7;">)</span>
  468. context_diffs = <span style="color: #4f97d7;">[]</span>
  469. 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 |
  470. 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>
  471. 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>
  472. intersect = available &amp; requested
  473. except = requested - available
  474. 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>
  475. context_diffs &lt;&lt; diff
  476. <span style="color: #4f97d7; font-weight: bold;">end</span>
  477. </pre>
  478. </div>
  479. </div>
  480. <div id="outline-container-orgd1e0da1" class="outline-4">
  481. <h4 id="orgd1e0da1"><span class="section-number-4">3.0.1</span> Things to further investigate</h4>
  482. <div class="outline-text-4" id="text-3-0-1">
  483. <ul class="org-ul">
  484. <li>Calculate the weight (sum of privacy levels of the properties it contains) of each context before and after giving permission</li>
  485. </ul>
  486. <p>
  487. NOTE: We export to file diff.xml here for easy parsing in processing.js below.
  488. </p>
  489. <p>
  490. /de relatieve grootte van de cirkel kan zijn op basis van hoeveel data je erin hebt.
  491. personal is size 4, professional size 3
  492. request is size 3
  493. </p>
  494. </div>
  495. </div>
  496. </div>
  497. <div id="outline-container-org4d0f5f5" class="outline-2">
  498. <h2 id="org4d0f5f5"><span class="section-number-2">4</span> Visualization</h2>
  499. <div class="outline-text-2" id="text-4">
  500. <p>
  501. We want to visualize the following things;
  502. </p>
  503. <ul class="org-ul">
  504. <li>The request with the application name and it's size / quality (Who's asking what)</li>
  505. <li>The different contexts with it's name and size / quality relative to the request. (What would it mean to accept?)</li>
  506. </ul>
  507. <p>
  508. Per the design of Dyne, we want to use color to indicate the relation between the request and each context.
  509. A color should indicate something about privacy level and context type.
  510. For now the mapping is as follows;
  511. Different hues can be mapped to each context type.
  512. Different tones within the hue can be mapped to each privacy level.
  513. </p>
  514. <div class="org-src-container">
  515. <pre class="src src-java" id="org40bdc54"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">color definitions</span>
  516. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a3</span> = #<span style="color: #a45bad;">3A3B58</span>;
  517. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b3</span> = #<span style="color: #a45bad;">734246</span>;
  518. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d3</span> = #B4561F;
  519. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c3</span> = #<span style="color: #a45bad;">336F60</span>;
  520. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f3</span> = #<span style="color: #a45bad;">7A3E2A</span>;
  521. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g3</span> = #A48137;
  522. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e2</span> = #<span style="color: #a45bad;">97BBCB</span>;
  523. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a4</span> = #<span style="color: #a45bad;">3B4257</span>;
  524. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b4</span> = #<span style="color: #a45bad;">6A4345</span>;
  525. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d4</span> = #<span style="color: #a45bad;">86451F</span>;
  526. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c4</span> = #<span style="color: #a45bad;">345A48</span>;
  527. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f4</span> = #A92F21;
  528. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g4</span> = #BC983B;
  529. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a5</span> = #<span style="color: #a45bad;">3D4358</span>;
  530. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b5</span> = #<span style="color: #a45bad;">402623</span>;
  531. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d5</span> = #<span style="color: #a45bad;">85442D</span>;
  532. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c5</span> = #<span style="color: #a45bad;">3B403A</span>;
  533. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f5</span> = #<span style="color: #a45bad;">7A150B</span>;
  534. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g5</span> = #<span style="color: #a45bad;">252F2B</span>;
  535. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a1</span> = #<span style="color: #a45bad;">597099</span>;
  536. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e4</span> = #<span style="color: #a45bad;">0A3878</span>;
  537. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b1</span> = #D16365;
  538. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d1</span> = #FFD43B;
  539. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c1</span> = #B7BF98;
  540. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e1</span> = #CAD2C8;
  541. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e0</span> = #F5EDE5;
  542. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f1</span> = #D17978;
  543. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g1</span> = #FDD23E;
  544. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a0</span> = #C5C3CC;
  545. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e3</span> = #<span style="color: #a45bad;">0485B1</span>;
  546. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b0</span> = #FFDCD6;
  547. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d0</span> = #FFE9BE;
  548. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c0</span> = #F0E9D5;
  549. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f0</span> = #E4C8BF;
  550. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g0</span> = #FBE6BA;
  551. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">a2</span> = #<span style="color: #a45bad;">3D4B79</span>;
  552. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">e5</span> = #<span style="color: #a45bad;">084064</span>;
  553. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">b2</span> = #<span style="color: #a45bad;">974244</span>;
  554. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">d2</span> = #F8AA08;
  555. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">c2</span> = #<span style="color: #a45bad;">4E937F</span>;
  556. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">f2</span> = #<span style="color: #a45bad;">8F4330</span>;
  557. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">g2</span> = #FFDB03;
  558. <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>
  559. <span style="color: #bc6ec5;">{</span>b0,b1,b2,b3,b4,b5<span style="color: #bc6ec5;">}</span>,
  560. <span style="color: #bc6ec5;">{</span>c0,c1,c2,c3,c4,c5<span style="color: #bc6ec5;">}</span>,
  561. <span style="color: #bc6ec5;">{</span>a0,a1,a2,a3,a4,a5<span style="color: #bc6ec5;">}</span>,
  562. <span style="color: #bc6ec5;">{</span>d0,d1,d2,d3,d4,d5<span style="color: #bc6ec5;">}</span>,
  563. <span style="color: #bc6ec5;">{</span>e0,e1,e2,e3,e4,e5<span style="color: #bc6ec5;">}</span>,
  564. <span style="color: #bc6ec5;">{</span>f0,f1,f2,f3,f4,f5<span style="color: #bc6ec5;">}</span>,
  565. <span style="color: #bc6ec5;">{</span>g0,g1,g2,g3,g4,g5<span style="color: #bc6ec5;">}</span>
  566. <span style="color: #4f97d7;">}</span>;
  567. <span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">PrivacyLevel</span> <span style="color: #4f97d7;">{</span>
  568. <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>;
  569. <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>;
  570. <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>;
  571. <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>;
  572. <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>;
  573. <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>;
  574. <span style="color: #4f97d7;">}</span>
  575. <span style="color: #4f97d7; font-weight: bold;">class</span> <span style="color: #ce537a; font-weight: bold;">ContextType</span> <span style="color: #4f97d7;">{</span>
  576. <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>;
  577. <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>;
  578. <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>;
  579. <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>;
  580. <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>;
  581. <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>;
  582. <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>;
  583. <span style="color: #4f97d7;">}</span>
  584. <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>
  585. <span style="color: #4f97d7;">{</span>
  586. <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>;
  587. <span style="color: #4f97d7;">}</span>
  588. </pre>
  589. </div>
  590. <p>
  591. Below snippet exemplifies a color for the SELF context with a privacy level SECRET, and should be a dark red color.
  592. </p>
  593. <div class="org-src-container">
  594. <pre class="src src-java" id="org46780dd"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
  595. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
  596. background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  597. noStroke<span style="color: #bc6ec5;">()</span>;
  598. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.SECRET;
  599. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.PERSONAL;
  600. <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>
  601. fill<span style="color: #bc6ec5;">(</span>secret_self<span style="color: #bc6ec5;">)</span>;
  602. 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>;
  603. <span style="color: #4f97d7;">}</span>
  604. </pre>
  605. </div>
  606. <script src="processing.js"></script>
  607. <script type="text/processing" data-processing-target="ob-493b0e9920a023276fc640f0a2b7a91f2af5a827">
  608. //color definitions
  609. color a3 = #3A3B58;
  610. color b3 = #734246;
  611. color d3 = #B4561F;
  612. color c3 = #336F60;
  613. color f3 = #7A3E2A;
  614. color g3 = #A48137;
  615. color e2 = #97BBCB;
  616. color a4 = #3B4257;
  617. color b4 = #6A4345;
  618. color d4 = #86451F;
  619. color c4 = #345A48;
  620. color f4 = #A92F21;
  621. color g4 = #BC983B;
  622. color a5 = #3D4358;
  623. color b5 = #402623;
  624. color d5 = #85442D;
  625. color c5 = #3B403A;
  626. color f5 = #7A150B;
  627. color g5 = #252F2B;
  628. color a1 = #597099;
  629. color e4 = #0A3878;
  630. color b1 = #D16365;
  631. color d1 = #FFD43B;
  632. color c1 = #B7BF98;
  633. color e1 = #CAD2C8;
  634. color e0 = #F5EDE5;
  635. color f1 = #D17978;
  636. color g1 = #FDD23E;
  637. color a0 = #C5C3CC;
  638. color e3 = #0485B1;
  639. color b0 = #FFDCD6;
  640. color d0 = #FFE9BE;
  641. color c0 = #F0E9D5;
  642. color f0 = #E4C8BF;
  643. color g0 = #FBE6BA;
  644. color a2 = #3D4B79;
  645. color e5 = #084064;
  646. color b2 = #974244;
  647. color d2 = #F8AA08;
  648. color c2 = #4E937F;
  649. color f2 = #8F4330;
  650. color g2 = #FFDB03;
  651. color colors[][] = {
  652. {b0,b1,b2,b3,b4,b5},
  653. {c0,c1,c2,c3,c4,c5},
  654. {a0,a1,a2,a3,a4,a5},
  655. {d0,d1,d2,d3,d4,d5},
  656. {e0,e1,e2,e3,e4,e5},
  657. {f0,f1,f2,f3,f4,f5},
  658. {g0,g1,g2,g3,g4,g5}
  659. };
  660. class PrivacyLevel {
  661. public static int SECRET = 5;
  662. public static int PRIVATE = 4;
  663. public static int INTIMATE = 3;
  664. public static int AFFILIATE = 2;
  665. public static int PUBLIC = 1;
  666. public static int COMMONS = 0;
  667. }
  668. class ContextType {
  669. public static int FINANCIAL = 6;
  670. public static int PERSONAL = 5;
  671. public static int HEALTH = 4;
  672. public static int EDUCATION = 3;
  673. public static int WORK = 2;
  674. public static int HOBBY = 1;
  675. public static int OTHER = 0;
  676. }
  677. public int getColor(int privacy_level, int context_type)
  678. {
  679. return colors[context_type][privacy_level];
  680. }
  681. void draw(){
  682. size(100,100);
  683. background(0);
  684. noStroke();
  685. int level = PrivacyLevel.SECRET;
  686. int contextType = ContextType.PERSONAL;
  687. color secret_self = getColor(level, contextType);//expect dark red
  688. fill(secret_self);
  689. ellipse(50,50,50,50);
  690. }
  691. </script> <canvas id="ob-493b0e9920a023276fc640f0a2b7a91f2af5a827"></canvas>
  692. <div class="org-src-container">
  693. <pre class="src src-java" id="orgf6afc6b"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">(){</span>
  694. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">100</span>,<span style="color: #a45bad;">100</span><span style="color: #bc6ec5;">)</span>;
  695. background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  696. noStroke<span style="color: #bc6ec5;">()</span>;
  697. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">level</span> = <span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC;
  698. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextType</span> = <span style="color: #a45bad;">ContextType</span>.WORK;
  699. <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>
  700. fill<span style="color: #bc6ec5;">(</span>work_public<span style="color: #bc6ec5;">)</span>;
  701. 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>;
  702. <span style="color: #4f97d7;">}</span>
  703. </pre>
  704. </div>
  705. <script src="processing.js"></script>
  706. <script type="text/processing" data-processing-target="ob-564950e7ca843d28965ee08608eff2b10fc39e1d">
  707. //color definitions
  708. color a3 = #3A3B58;
  709. color b3 = #734246;
  710. color d3 = #B4561F;
  711. color c3 = #336F60;
  712. color f3 = #7A3E2A;
  713. color g3 = #A48137;
  714. color e2 = #97BBCB;
  715. color a4 = #3B4257;
  716. color b4 = #6A4345;
  717. color d4 = #86451F;
  718. color c4 = #345A48;
  719. color f4 = #A92F21;
  720. color g4 = #BC983B;
  721. color a5 = #3D4358;
  722. color b5 = #402623;
  723. color d5 = #85442D;
  724. color c5 = #3B403A;
  725. color f5 = #7A150B;
  726. color g5 = #252F2B;
  727. color a1 = #597099;
  728. color e4 = #0A3878;
  729. color b1 = #D16365;
  730. color d1 = #FFD43B;
  731. color c1 = #B7BF98;
  732. color e1 = #CAD2C8;
  733. color e0 = #F5EDE5;
  734. color f1 = #D17978;
  735. color g1 = #FDD23E;
  736. color a0 = #C5C3CC;
  737. color e3 = #0485B1;
  738. color b0 = #FFDCD6;
  739. color d0 = #FFE9BE;
  740. color c0 = #F0E9D5;
  741. color f0 = #E4C8BF;
  742. color g0 = #FBE6BA;
  743. color a2 = #3D4B79;
  744. color e5 = #084064;
  745. color b2 = #974244;
  746. color d2 = #F8AA08;
  747. color c2 = #4E937F;
  748. color f2 = #8F4330;
  749. color g2 = #FFDB03;
  750. color colors[][] = {
  751. {b0,b1,b2,b3,b4,b5},
  752. {c0,c1,c2,c3,c4,c5},
  753. {a0,a1,a2,a3,a4,a5},
  754. {d0,d1,d2,d3,d4,d5},
  755. {e0,e1,e2,e3,e4,e5},
  756. {f0,f1,f2,f3,f4,f5},
  757. {g0,g1,g2,g3,g4,g5}
  758. };
  759. class PrivacyLevel {
  760. public static int SECRET = 5;
  761. public static int PRIVATE = 4;
  762. public static int INTIMATE = 3;
  763. public static int AFFILIATE = 2;
  764. public static int PUBLIC = 1;
  765. public static int COMMONS = 0;
  766. }
  767. class ContextType {
  768. public static int FINANCIAL = 6;
  769. public static int PERSONAL = 5;
  770. public static int HEALTH = 4;
  771. public static int EDUCATION = 3;
  772. public static int WORK = 2;
  773. public static int HOBBY = 1;
  774. public static int OTHER = 0;
  775. }
  776. public int getColor(int privacy_level, int context_type)
  777. {
  778. return colors[context_type][privacy_level];
  779. }
  780. void draw(){
  781. size(100,100);
  782. background(0);
  783. noStroke();
  784. int level = PrivacyLevel.PUBLIC;
  785. int contextType = ContextType.WORK;
  786. color work_public = getColor(level, contextType);//expect light blueish
  787. fill(work_public);
  788. ellipse(50,50,50,50);
  789. }
  790. </script> <canvas id="ob-564950e7ca843d28965ee08608eff2b10fc39e1d"></canvas>
  791. <p>
  792. This table shows all colors for each context / privacy level combination.
  793. Find out does this make sense?
  794. </p>
  795. <script src="processing.js"></script>
  796. <script type="text/processing" data-processing-target="ob-58d472c29ceb0133107f5e516348e8a7cb30af81">
  797. //color definitions
  798. color a3 = #3A3B58;
  799. color b3 = #734246;
  800. color d3 = #B4561F;
  801. color c3 = #336F60;
  802. color f3 = #7A3E2A;
  803. color g3 = #A48137;
  804. color e2 = #97BBCB;
  805. color a4 = #3B4257;
  806. color b4 = #6A4345;
  807. color d4 = #86451F;
  808. color c4 = #345A48;
  809. color f4 = #A92F21;
  810. color g4 = #BC983B;
  811. color a5 = #3D4358;
  812. color b5 = #402623;
  813. color d5 = #85442D;
  814. color c5 = #3B403A;
  815. color f5 = #7A150B;
  816. color g5 = #252F2B;
  817. color a1 = #597099;
  818. color e4 = #0A3878;
  819. color b1 = #D16365;
  820. color d1 = #FFD43B;
  821. color c1 = #B7BF98;
  822. color e1 = #CAD2C8;
  823. color e0 = #F5EDE5;
  824. color f1 = #D17978;
  825. color g1 = #FDD23E;
  826. color a0 = #C5C3CC;
  827. color e3 = #0485B1;
  828. color b0 = #FFDCD6;
  829. color d0 = #FFE9BE;
  830. color c0 = #F0E9D5;
  831. color f0 = #E4C8BF;
  832. color g0 = #FBE6BA;
  833. color a2 = #3D4B79;
  834. color e5 = #084064;
  835. color b2 = #974244;
  836. color d2 = #F8AA08;
  837. color c2 = #4E937F;
  838. color f2 = #8F4330;
  839. color g2 = #FFDB03;
  840. color colors[][] = {
  841. {b0,b1,b2,b3,b4,b5},
  842. {c0,c1,c2,c3,c4,c5},
  843. {a0,a1,a2,a3,a4,a5},
  844. {d0,d1,d2,d3,d4,d5},
  845. {e0,e1,e2,e3,e4,e5},
  846. {f0,f1,f2,f3,f4,f5},
  847. {g0,g1,g2,g3,g4,g5}
  848. };
  849. class PrivacyLevel {
  850. public static int SECRET = 5;
  851. public static int PRIVATE = 4;
  852. public static int INTIMATE = 3;
  853. public static int AFFILIATE = 2;
  854. public static int PUBLIC = 1;
  855. public static int COMMONS = 0;
  856. }
  857. class ContextType {
  858. public static int FINANCIAL = 6;
  859. public static int PERSONAL = 5;
  860. public static int HEALTH = 4;
  861. public static int EDUCATION = 3;
  862. public static int WORK = 2;
  863. public static int HOBBY = 1;
  864. public static int OTHER = 0;
  865. }
  866. public int getColor(int privacy_level, int context_type)
  867. {
  868. return colors[context_type][privacy_level];
  869. }
  870. String[] levels = ["commons", "public", "affiliate", "intimate", "private", "secret"];
  871. String[] contexts = ["other", "hobby", "work", "education", "health", "personal", "financial"];
  872. void draw()
  873. {
  874. size(600,480);
  875. float row_height = 50;
  876. float column_width = 80;
  877. fill(0);
  878. //draw privacy level headers
  879. for (int i = 0; i < levels.length; i++ ){
  880. text(levels[i], (i + 1) * column_width, row_height );
  881. }
  882. //draw context headers
  883. for (int j = 0; j < contexts.length; j++)
  884. {
  885. text(contexts[j], 20, (j+2) * row_height);
  886. }
  887. //draw colors
  888. for(int i = 0; i < levels.length; i++)
  889. {
  890. float x = 20 + (i + 1) * column_width;
  891. for(int j = 0; j < contexts.length; j++)
  892. {
  893. float y = (j + 2) * row_height;
  894. color c = getColor(i,j);
  895. fill(c);
  896. ellipse(x,y, 20, 20);
  897. }
  898. }
  899. }
  900. </script> <canvas id="ob-58d472c29ceb0133107f5e516348e8a7cb30af81"></canvas>
  901. </div>
  902. <div id="outline-container-orgcc3201f" class="outline-3">
  903. <h3 id="orgcc3201f"><span class="section-number-3">4.1</span> Request</h3>
  904. <div class="outline-text-3" id="text-4-1">
  905. <div class="org-src-container">
  906. <pre class="src src-java" id="org6654b2b">size<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">200</span>,<span style="color: #a45bad;">200</span><span style="color: #4f97d7;">)</span>;
  907. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">background(0);</span>
  908. noFill<span style="color: #4f97d7;">()</span>;
  909. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">the size of request is fixed for now</span>
  910. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerX</span> = width/<span style="color: #a45bad;">2</span>;
  911. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerY</span> = height/<span style="color: #a45bad;">2</span>;
  912. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">rsize</span> = <span style="color: #a45bad;">55</span>;
  913. <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>
  914. <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>.PUBLIC, request.contextType<span style="color: #4f97d7;">)</span>;
  915. fill<span style="color: #4f97d7;">(</span>reqColor<span style="color: #4f97d7;">)</span>;
  916. ellipse<span style="color: #4f97d7;">(</span>centerX, centerY, rsize, rsize<span style="color: #4f97d7;">)</span>;
  917. <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>
  918. fill<span style="color: #4f97d7;">(</span><span style="color: #a45bad;">0</span><span style="color: #4f97d7;">)</span>;
  919. textAlign<span style="color: #4f97d7;">(</span>CENTER,CENTER<span style="color: #4f97d7;">)</span>;
  920. 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>;
  921. </pre>
  922. </div>
  923. <script src="processing.js"></script>
  924. <script type="text/processing" data-processing-target="ob-dffb4f15e39f84663e954fb9ee6af88f16dd15fa">
  925. //color definitions
  926. color a3 = #3A3B58;
  927. color b3 = #734246;
  928. color d3 = #B4561F;
  929. color c3 = #336F60;
  930. color f3 = #7A3E2A;
  931. color g3 = #A48137;
  932. color e2 = #97BBCB;
  933. color a4 = #3B4257;
  934. color b4 = #6A4345;
  935. color d4 = #86451F;
  936. color c4 = #345A48;
  937. color f4 = #A92F21;
  938. color g4 = #BC983B;
  939. color a5 = #3D4358;
  940. color b5 = #402623;
  941. color d5 = #85442D;
  942. color c5 = #3B403A;
  943. color f5 = #7A150B;
  944. color g5 = #252F2B;
  945. color a1 = #597099;
  946. color e4 = #0A3878;
  947. color b1 = #D16365;
  948. color d1 = #FFD43B;
  949. color c1 = #B7BF98;
  950. color e1 = #CAD2C8;
  951. color e0 = #F5EDE5;
  952. color f1 = #D17978;
  953. color g1 = #FDD23E;
  954. color a0 = #C5C3CC;
  955. color e3 = #0485B1;
  956. color b0 = #FFDCD6;
  957. color d0 = #FFE9BE;
  958. color c0 = #F0E9D5;
  959. color f0 = #E4C8BF;
  960. color g0 = #FBE6BA;
  961. color a2 = #3D4B79;
  962. color e5 = #084064;
  963. color b2 = #974244;
  964. color d2 = #F8AA08;
  965. color c2 = #4E937F;
  966. color f2 = #8F4330;
  967. color g2 = #FFDB03;
  968. color colors[][] = {
  969. {b0,b1,b2,b3,b4,b5},
  970. {c0,c1,c2,c3,c4,c5},
  971. {a0,a1,a2,a3,a4,a5},
  972. {d0,d1,d2,d3,d4,d5},
  973. {e0,e1,e2,e3,e4,e5},
  974. {f0,f1,f2,f3,f4,f5},
  975. {g0,g1,g2,g3,g4,g5}
  976. };
  977. class PrivacyLevel {
  978. public static int SECRET = 5;
  979. public static int PRIVATE = 4;
  980. public static int INTIMATE = 3;
  981. public static int AFFILIATE = 2;
  982. public static int PUBLIC = 1;
  983. public static int COMMONS = 0;
  984. }
  985. class ContextType {
  986. public static int FINANCIAL = 6;
  987. public static int PERSONAL = 5;
  988. public static int HEALTH = 4;
  989. public static int EDUCATION = 3;
  990. public static int WORK = 2;
  991. public static int HOBBY = 1;
  992. public static int OTHER = 0;
  993. }
  994. public int getColor(int privacy_level, int context_type)
  995. {
  996. return colors[context_type][privacy_level];
  997. }
  998. class Request
  999. {
  1000. public String application;
  1001. public int contextType;
  1002. public String[] required_properties;
  1003. public String[] optional_properties;
  1004. public Request(String app, int contextType, String[] req, String[] opt)
  1005. {
  1006. this.application = app;
  1007. this.contextType = contextType;
  1008. this.required_properties = req;
  1009. this.optional_properties = opt;
  1010. }
  1011. }
  1012. class Diff
  1013. {
  1014. public String context;
  1015. public String[] intersect;
  1016. public String[] except;
  1017. public Diff(String ctx, String[] intersect, String[] except)
  1018. {
  1019. this.context = ctx;
  1020. this.intersect = intersect;
  1021. this.except = except;
  1022. }
  1023. }
  1024. class Property
  1025. {
  1026. public String type;
  1027. public String value;
  1028. public int pl;//privacy level
  1029. public Property(String type, String value, int pl)
  1030. {
  1031. this.type = type;
  1032. this.value = value;
  1033. this.pl = pl;
  1034. }
  1035. }
  1036. class Context
  1037. {
  1038. public String title;
  1039. public int plSum;
  1040. public int contextType;
  1041. public Property[] properties;
  1042. public Context(String title, int plSum, int contextType, Property[] properties)
  1043. {
  1044. this.title = title;
  1045. this.plSum = plSum;
  1046. this.properties = properties;
  1047. this.contextType = contextType;
  1048. }
  1049. }
  1050. XMLElement doc = new XMLElement(this, 'diff.xml');
  1051. //create typed versions because this is java :-(
  1052. Request parseRequest(XMLElement xml)
  1053. {
  1054. XMLElement req = xml.getChild(0);
  1055. String name = req.getChild(0).getContent();
  1056. int contextType = req.getChild(1).getContent();
  1057. String[] required = new String[req.getChild(2).getChildCount()];
  1058. String[] optional = new String[req.getChild(3).getChildCount()];
  1059. for (int i = 0; i < required.length; i++) {
  1060. required[i] = req.getChild(2).getChild(i).getContent();
  1061. }
  1062. for (int i = 0; i < optional.length; i++) {
  1063. optional[i] = req.getChild(3).getChild(i).getContent();
  1064. }
  1065. Request r = new Request(name,contextType,required,optional);
  1066. return r;
  1067. }
  1068. Context[] parseProfile(XMLElement xml)
  1069. {
  1070. XMLElement profile = xml.getChild(2);
  1071. Context[] contexts = new Context[profile.getChildCount()];
  1072. for(int i = 0; i < contexts.length; i++)
  1073. {
  1074. String contextName = profile.getChild(i).getChild(0).getContent();
  1075. int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
  1076. int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
  1077. XMLElement propertiesEl = profile.getChild(i).getChild(3);
  1078. Property[] properties = new Property[propertiesEl.getChildCount()];
  1079. for(int j = 0; j < properties.length; j++)
  1080. {
  1081. Property prop = parseProperty(propertiesEl.getChild(j));
  1082. properties[j] = prop;
  1083. }
  1084. Context context = new Context(contextName, plSum, contextType, properties);
  1085. contexts[i] = context;
  1086. }
  1087. return contexts;
  1088. }
  1089. Property parseProperty(XMLElement propertyEl)
  1090. {
  1091. String propertyType = propertyEl.getChild(0).getContent();
  1092. String value = propertyEl.getChild(1).getContent();
  1093. int pl = parseInt(propertyEl.getChild(2).getContent());
  1094. return new Property(propertyType, value, pl);
  1095. }
  1096. //create typed versions because this is java :-(
  1097. Diff[] parseDiffs(xml)
  1098. {
  1099. XMLElement diffsEl = xml.getChild(1);
  1100. Diff[] diffs = new Diff[diffsEl.getChildCount()];
  1101. for(int i = 0; i < diffs.length; i++)
  1102. {
  1103. String contextName = diffsEl.getChild(i).getChild(0).getContent();
  1104. String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
  1105. String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
  1106. for(int j = 0; j < intersects.length; j++)
  1107. {
  1108. intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
  1109. }
  1110. for(int j = 0; j < except.length; j++)
  1111. {
  1112. except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
  1113. }
  1114. Diff diff = new Diff(contextName,intersects,except);
  1115. diffs[i] = diff;
  1116. }
  1117. return diffs;
  1118. }
  1119. Request request = parseRequest(doc);
  1120. Diff[] diffs = parseDiffs(doc);
  1121. Context[] contexts = parseProfile(doc);
  1122. size(200,200);
  1123. //background(0);
  1124. noFill();
  1125. //the size of request is fixed for now
  1126. float centerX = width/2;
  1127. float centerY = height/2;
  1128. float rsize = 55;
  1129. //color of request is mapped to the privacy type of the request, each request has one.
  1130. color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
  1131. fill(reqColor);
  1132. ellipse(centerX, centerY, rsize, rsize);
  1133. //show the name of the application that makes the request, centered below the circle
  1134. fill(0);
  1135. textAlign(CENTER,CENTER);
  1136. text(request.application, centerX, centerY + rsize/1.5);
  1137. </script> <canvas id="ob-dffb4f15e39f84663e954fb9ee6af88f16dd15fa"></canvas>
  1138. </div>
  1139. </div>
  1140. <div id="outline-container-orgb020a5b" class="outline-3">
  1141. <h3 id="orgb020a5b"><span class="section-number-3">4.2</span> Contexts</h3>
  1142. <div class="outline-text-3" id="text-4-2">
  1143. <p>
  1144. We want to draw each context in relation to the request,
  1145. so we place each context equidistant from the request in the center.
  1146. </p>
  1147. <div class="org-src-container">
  1148. <pre class="src src-java" id="orgc9801f0"><span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">setup</span><span style="color: #4f97d7;">(){</span>
  1149. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">800</span>,<span style="color: #a45bad;">800</span><span style="color: #bc6ec5;">)</span>;
  1150. smooth<span style="color: #bc6ec5;">()</span>;
  1151. noLoop<span style="color: #bc6ec5;">()</span>;
  1152. <span style="color: #4f97d7;">}</span>
  1153. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">divide the circle by the amount of contexts </span>
  1154. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">to get the angle between the lines that indicate the center of each context</span>
  1155. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">eqd_angle</span> = TWO_PI / contexts.length;
  1156. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">()</span>
  1157. <span style="color: #4f97d7;">{</span>
  1158. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #cc9393;">TODO</span><span style="color: #2aa1ae; background-color: #292e34;"> move draw request to a function</span>
  1159. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">the size of request is fixed for now</span>
  1160. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerX</span> = width/<span style="color: #a45bad;">2</span>;
  1161. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerY</span> = height/<span style="color: #a45bad;">2</span>;
  1162. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">rsize</span> = <span style="color: #a45bad;">55</span>;
  1163. <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>
  1164. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">reqColor</span> = getColor<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, request.contextType<span style="color: #bc6ec5;">)</span>;
  1165. fill<span style="color: #bc6ec5;">(</span>reqColor<span style="color: #bc6ec5;">)</span>;
  1166. ellipse<span style="color: #bc6ec5;">(</span>centerX, centerY, rsize, rsize<span style="color: #bc6ec5;">)</span>;
  1167. <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>
  1168. fill<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  1169. textAlign<span style="color: #bc6ec5;">(</span>CENTER,CENTER<span style="color: #bc6ec5;">)</span>;
  1170. text<span style="color: #bc6ec5;">(</span>request.application, centerX, centerY + rsize/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #bc6ec5;">)</span>;
  1171. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">count</span> = <span style="color: #a45bad;">0</span>;
  1172. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">context</span> : contexts<span style="color: #bc6ec5;">)</span>
  1173. <span style="color: #bc6ec5;">{</span>
  1174. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">angle</span> = <span style="color: #2d9574;">(</span>count * eqd_angle<span style="color: #2d9574;">)</span> - <span style="color: #2d9574;">(</span>PI/<span style="color: #a45bad;">2</span><span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">start drawing at the top</span>
  1175. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">distance</span> = <span style="color: #a45bad;">200</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(100,300);//random between 50 and 300</span>
  1176. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">csize</span> = <span style="color: #a45bad;">100</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(50,100); //random between 50 and 100</span>
  1177. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">x</span> = centerX + distance * cos<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate xPos</span>
  1178. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">y</span> = centerY + distance * sin<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate yPos</span>
  1179. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">each context should have a contextType too, in order to base the color on it.</span>
  1180. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">contextColor</span> = getColor<span style="color: #2d9574;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, context.contextType<span style="color: #2d9574;">)</span>;
  1181. fill<span style="color: #2d9574;">(</span>contextColor<span style="color: #2d9574;">)</span>;
  1182. ellipse<span style="color: #2d9574;">(</span>x, y, csize, csize<span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">fixed sizes and distances for now.</span>
  1183. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show context label</span>
  1184. fill<span style="color: #2d9574;">(</span><span style="color: #a45bad;">0</span><span style="color: #2d9574;">)</span>;
  1185. textAlign<span style="color: #2d9574;">(</span>CENTER,CENTER<span style="color: #2d9574;">)</span>;
  1186. text<span style="color: #2d9574;">(</span>context.title, x, y + csize/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #2d9574;">)</span>;
  1187. count++;
  1188. <span style="color: #bc6ec5;">}</span>
  1189. <span style="color: #4f97d7;">}</span>
  1190. </pre>
  1191. </div>
  1192. <script src="processing.js"></script>
  1193. <script type="text/processing" data-processing-target="ob-229253fd493ee5516fed8b7699685319f5c7f734">
  1194. //color definitions
  1195. color a3 = #3A3B58;
  1196. color b3 = #734246;
  1197. color d3 = #B4561F;
  1198. color c3 = #336F60;
  1199. color f3 = #7A3E2A;
  1200. color g3 = #A48137;
  1201. color e2 = #97BBCB;
  1202. color a4 = #3B4257;
  1203. color b4 = #6A4345;
  1204. color d4 = #86451F;
  1205. color c4 = #345A48;
  1206. color f4 = #A92F21;
  1207. color g4 = #BC983B;
  1208. color a5 = #3D4358;
  1209. color b5 = #402623;
  1210. color d5 = #85442D;
  1211. color c5 = #3B403A;
  1212. color f5 = #7A150B;
  1213. color g5 = #252F2B;
  1214. color a1 = #597099;
  1215. color e4 = #0A3878;
  1216. color b1 = #D16365;
  1217. color d1 = #FFD43B;
  1218. color c1 = #B7BF98;
  1219. color e1 = #CAD2C8;
  1220. color e0 = #F5EDE5;
  1221. color f1 = #D17978;
  1222. color g1 = #FDD23E;
  1223. color a0 = #C5C3CC;
  1224. color e3 = #0485B1;
  1225. color b0 = #FFDCD6;
  1226. color d0 = #FFE9BE;
  1227. color c0 = #F0E9D5;
  1228. color f0 = #E4C8BF;
  1229. color g0 = #FBE6BA;
  1230. color a2 = #3D4B79;
  1231. color e5 = #084064;
  1232. color b2 = #974244;
  1233. color d2 = #F8AA08;
  1234. color c2 = #4E937F;
  1235. color f2 = #8F4330;
  1236. color g2 = #FFDB03;
  1237. color colors[][] = {
  1238. {b0,b1,b2,b3,b4,b5},
  1239. {c0,c1,c2,c3,c4,c5},
  1240. {a0,a1,a2,a3,a4,a5},
  1241. {d0,d1,d2,d3,d4,d5},
  1242. {e0,e1,e2,e3,e4,e5},
  1243. {f0,f1,f2,f3,f4,f5},
  1244. {g0,g1,g2,g3,g4,g5}
  1245. };
  1246. class PrivacyLevel {
  1247. public static int SECRET = 5;
  1248. public static int PRIVATE = 4;
  1249. public static int INTIMATE = 3;
  1250. public static int AFFILIATE = 2;
  1251. public static int PUBLIC = 1;
  1252. public static int COMMONS = 0;
  1253. }
  1254. class ContextType {
  1255. public static int FINANCIAL = 6;
  1256. public static int PERSONAL = 5;
  1257. public static int HEALTH = 4;
  1258. public static int EDUCATION = 3;
  1259. public static int WORK = 2;
  1260. public static int HOBBY = 1;
  1261. public static int OTHER = 0;
  1262. }
  1263. public int getColor(int privacy_level, int context_type)
  1264. {
  1265. return colors[context_type][privacy_level];
  1266. }
  1267. class Request
  1268. {
  1269. public String application;
  1270. public int contextType;
  1271. public String[] required_properties;
  1272. public String[] optional_properties;
  1273. public Request(String app, int contextType, String[] req, String[] opt)
  1274. {
  1275. this.application = app;
  1276. this.contextType = contextType;
  1277. this.required_properties = req;
  1278. this.optional_properties = opt;
  1279. }
  1280. }
  1281. class Diff
  1282. {
  1283. public String context;
  1284. public String[] intersect;
  1285. public String[] except;
  1286. public Diff(String ctx, String[] intersect, String[] except)
  1287. {
  1288. this.context = ctx;
  1289. this.intersect = intersect;
  1290. this.except = except;
  1291. }
  1292. }
  1293. class Property
  1294. {
  1295. public String type;
  1296. public String value;
  1297. public int pl;//privacy level
  1298. public Property(String type, String value, int pl)
  1299. {
  1300. this.type = type;
  1301. this.value = value;
  1302. this.pl = pl;
  1303. }
  1304. }
  1305. class Context
  1306. {
  1307. public String title;
  1308. public int plSum;
  1309. public int contextType;
  1310. public Property[] properties;
  1311. public Context(String title, int plSum, int contextType, Property[] properties)
  1312. {
  1313. this.title = title;
  1314. this.plSum = plSum;
  1315. this.properties = properties;
  1316. this.contextType = contextType;
  1317. }
  1318. }
  1319. XMLElement doc = new XMLElement(this, 'diff.xml');
  1320. //create typed versions because this is java :-(
  1321. Request parseRequest(XMLElement xml)
  1322. {
  1323. XMLElement req = xml.getChild(0);
  1324. String name = req.getChild(0).getContent();
  1325. int contextType = req.getChild(1).getContent();
  1326. String[] required = new String[req.getChild(2).getChildCount()];
  1327. String[] optional = new String[req.getChild(3).getChildCount()];
  1328. for (int i = 0; i < required.length; i++) {
  1329. required[i] = req.getChild(2).getChild(i).getContent();
  1330. }
  1331. for (int i = 0; i < optional.length; i++) {
  1332. optional[i] = req.getChild(3).getChild(i).getContent();
  1333. }
  1334. Request r = new Request(name,contextType,required,optional);
  1335. return r;
  1336. }
  1337. Context[] parseProfile(XMLElement xml)
  1338. {
  1339. XMLElement profile = xml.getChild(2);
  1340. Context[] contexts = new Context[profile.getChildCount()];
  1341. for(int i = 0; i < contexts.length; i++)
  1342. {
  1343. String contextName = profile.getChild(i).getChild(0).getContent();
  1344. int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
  1345. int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
  1346. XMLElement propertiesEl = profile.getChild(i).getChild(3);
  1347. Property[] properties = new Property[propertiesEl.getChildCount()];
  1348. for(int j = 0; j < properties.length; j++)
  1349. {
  1350. Property prop = parseProperty(propertiesEl.getChild(j));
  1351. properties[j] = prop;
  1352. }
  1353. Context context = new Context(contextName, plSum, contextType, properties);
  1354. contexts[i] = context;
  1355. }
  1356. return contexts;
  1357. }
  1358. Property parseProperty(XMLElement propertyEl)
  1359. {
  1360. String propertyType = propertyEl.getChild(0).getContent();
  1361. String value = propertyEl.getChild(1).getContent();
  1362. int pl = parseInt(propertyEl.getChild(2).getContent());
  1363. return new Property(propertyType, value, pl);
  1364. }
  1365. //create typed versions because this is java :-(
  1366. Diff[] parseDiffs(xml)
  1367. {
  1368. XMLElement diffsEl = xml.getChild(1);
  1369. Diff[] diffs = new Diff[diffsEl.getChildCount()];
  1370. for(int i = 0; i < diffs.length; i++)
  1371. {
  1372. String contextName = diffsEl.getChild(i).getChild(0).getContent();
  1373. String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
  1374. String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
  1375. for(int j = 0; j < intersects.length; j++)
  1376. {
  1377. intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
  1378. }
  1379. for(int j = 0; j < except.length; j++)
  1380. {
  1381. except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
  1382. }
  1383. Diff diff = new Diff(contextName,intersects,except);
  1384. diffs[i] = diff;
  1385. }
  1386. return diffs;
  1387. }
  1388. Request request = parseRequest(doc);
  1389. Diff[] diffs = parseDiffs(doc);
  1390. Context[] contexts = parseProfile(doc);
  1391. void setup(){
  1392. size(800,800);
  1393. smooth();
  1394. noLoop();
  1395. }
  1396. //divide the circle by the amount of contexts
  1397. //to get the angle between the lines that indicate the center of each context
  1398. float eqd_angle = TWO_PI / contexts.length;
  1399. void draw()
  1400. {
  1401. //TODO move draw request to a function
  1402. //the size of request is fixed for now
  1403. float centerX = width/2;
  1404. float centerY = height/2;
  1405. float rsize = 55;
  1406. //color of request is mapped to the privacy type of the request, each request has one.
  1407. color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
  1408. fill(reqColor);
  1409. ellipse(centerX, centerY, rsize, rsize);
  1410. //show the name of the application that makes the request, centered below the circle
  1411. fill(0);
  1412. textAlign(CENTER,CENTER);
  1413. text(request.application, centerX, centerY + rsize/1.5);
  1414. int count = 0;
  1415. for(Context context : contexts)
  1416. {
  1417. float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
  1418. float distance = 200;//random(100,300);//random between 50 and 300
  1419. float csize = 100;//random(50,100); //random between 50 and 100
  1420. float x = centerX + distance * cos(angle); //calculate xPos
  1421. float y = centerY + distance * sin(angle); //calculate yPos
  1422. //each context should have a contextType too, in order to base the color on it.
  1423. color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
  1424. fill(contextColor);
  1425. ellipse(x, y, csize, csize);//fixed sizes and distances for now.
  1426. //show context label
  1427. fill(0);
  1428. textAlign(CENTER,CENTER);
  1429. text(context.title, x, y + csize/1.5);
  1430. count++;
  1431. }
  1432. }
  1433. </script> <canvas id="ob-229253fd493ee5516fed8b7699685319f5c7f734"></canvas>
  1434. </div>
  1435. <div id="outline-container-org240a507" class="outline-4">
  1436. <h4 id="org240a507"><span class="section-number-4">4.2.1</span> Things to further investigate</h4>
  1437. <div class="outline-text-4" id="text-4-2-1">
  1438. <ul class="org-ul">
  1439. <li>How do we show relation between request and each context with color?</li>
  1440. <li>Can we use distance as well as color to indicate the relation?</li>
  1441. <li>Can we use size of the circle to indicate the weight, or use badges?</li>
  1442. </ul>
  1443. </div>
  1444. </div>
  1445. </div>
  1446. </div>
  1447. <div id="outline-container-org0f0994b" class="outline-2">
  1448. <h2 id="org0f0994b"><span class="section-number-2">5</span> Interaction</h2>
  1449. <div class="outline-text-2" id="text-5">
  1450. <p>
  1451. We intend to investigate this in Processing as well.
  1452. </p>
  1453. <div class="org-src-container">
  1454. <pre class="src src-java" id="orgee03cfb"><span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">divide the circle by the amount of contexts </span>
  1455. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">to get the angle between the lines that indicate the center of each context</span>
  1456. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">eqd_angle</span> = TWO_PI / contexts.length;
  1457. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw request circle in the center of the screen</span>
  1458. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">centerX</span>, <span style="color: #7590db;">centerY</span>;
  1459. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">xOffset</span>, <span style="color: #7590db;">yOffset</span>;
  1460. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">requestSize</span> = <span style="color: #a45bad;">50</span>;
  1461. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">context parameters</span>
  1462. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">contextDistance</span> = <span style="color: #a45bad;">200</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(100,300);//random between 50 and 300</span>
  1463. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">contextSize</span> = <span style="color: #a45bad;">100</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">random(50,100); //random between 50 and 100</span>
  1464. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">requestX</span>, <span style="color: #7590db;">requestY</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">request coordinates, they can move</span>
  1465. <span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">hitRequest</span> = <span style="color: #a45bad;">false</span>;
  1466. <span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">dragging</span> = <span style="color: #a45bad;">false</span>;
  1467. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">hitContext</span> = -<span style="color: #a45bad;">1</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">-1 if no context is hit, otherwise indicates the index of the hit context</span>
  1468. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">setup</span><span style="color: #4f97d7;">(){</span>
  1469. size<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">800</span>,<span style="color: #a45bad;">800</span><span style="color: #bc6ec5;">)</span>;
  1470. smooth<span style="color: #bc6ec5;">()</span>;
  1471. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">initialize screen when it is appropriate, </span>
  1472. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">before this it will display the wrong size</span>
  1473. centerX = width/<span style="color: #a45bad;">2</span>;
  1474. centerY = height/<span style="color: #a45bad;">2</span>;
  1475. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">request starts in the middle</span>
  1476. requestX = centerX;
  1477. requestY = centerY;
  1478. <span style="color: #4f97d7;">}</span>
  1479. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the request and label</span>
  1480. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawRequest</span><span style="color: #4f97d7;">()</span>
  1481. <span style="color: #4f97d7;">{</span>
  1482. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">strokeColor</span> = hitRequest? <span style="color: #a45bad;">255</span> : <span style="color: #a45bad;">153</span>;
  1483. stroke<span style="color: #bc6ec5;">(</span>strokeColor<span style="color: #bc6ec5;">)</span>;
  1484. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">reqColor</span> = getColor<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, request.contextType<span style="color: #bc6ec5;">)</span>;
  1485. fill<span style="color: #bc6ec5;">(</span>reqColor<span style="color: #bc6ec5;">)</span>;
  1486. ellipse<span style="color: #bc6ec5;">(</span>requestX,requestY, requestSize,requestSize<span style="color: #bc6ec5;">)</span>;
  1487. fill<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  1488. textAlign<span style="color: #bc6ec5;">(</span>CENTER,CENTER<span style="color: #bc6ec5;">)</span>;
  1489. text<span style="color: #bc6ec5;">(</span>request.application, requestX, requestY + <span style="color: #a45bad;">50</span>/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #bc6ec5;">)</span>;
  1490. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #cc9393;">TODO</span><span style="color: #2aa1ae; background-color: #292e34;">: show weight of request</span>
  1491. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">text("" + weights[0], requestX, requestY);</span>
  1492. <span style="color: #4f97d7;">}</span>
  1493. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">darken the given color, expects hsb color mode </span>
  1494. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #bc6ec5; font-weight: bold;">darken</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">c</span><span style="color: #4f97d7;">)</span>
  1495. <span style="color: #4f97d7;">{</span>
  1496. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">h</span> = hue<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
  1497. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">s</span> = saturation<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
  1498. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">v</span> = brightness<span style="color: #bc6ec5;">(</span>c<span style="color: #bc6ec5;">)</span>;
  1499. <span style="color: #4f97d7; font-weight: bold;">return</span> color<span style="color: #bc6ec5;">(</span>h,s,v * <span style="color: #a45bad;">0</span>.<span style="color: #a45bad;">6</span><span style="color: #bc6ec5;">)</span>;
  1500. <span style="color: #4f97d7;">}</span>
  1501. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawContexts</span><span style="color: #4f97d7;">()</span>
  1502. <span style="color: #4f97d7;">{</span>
  1503. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw the contexts equidistant around the center where the request is</span>
  1504. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">count</span> = <span style="color: #a45bad;">0</span>;
  1505. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">context</span> : contexts<span style="color: #bc6ec5;">)</span>
  1506. <span style="color: #bc6ec5;">{</span>
  1507. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">angle</span> = <span style="color: #2d9574;">(</span>count * eqd_angle<span style="color: #2d9574;">)</span> - <span style="color: #2d9574;">(</span>PI/<span style="color: #a45bad;">2</span><span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">start drawing at the top</span>
  1508. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">x</span> = centerX + contextDistance * cos<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate xPos</span>
  1509. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">y</span> = centerY + contextDistance * sin<span style="color: #2d9574;">(</span>angle<span style="color: #2d9574;">)</span>; <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">calculate yPos</span>
  1510. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">strokeColor</span> = <span style="color: #2d9574;">(</span>hitContext == count<span style="color: #2d9574;">)</span> ? <span style="color: #a45bad;">255</span> : <span style="color: #a45bad;">153</span>;
  1511. stroke<span style="color: #2d9574;">(</span>strokeColor<span style="color: #2d9574;">)</span>;
  1512. <span style="color: #ce537a; font-weight: bold;">color</span> <span style="color: #7590db;">contextColor</span> = getColor<span style="color: #2d9574;">(</span><span style="color: #a45bad;">PrivacyLevel</span>.PUBLIC, context.contextType<span style="color: #2d9574;">)</span>;
  1513. fill<span style="color: #2d9574;">(</span>contextColor<span style="color: #2d9574;">)</span>;
  1514. ellipse<span style="color: #2d9574;">(</span>x, y, contextSize,contextSize<span style="color: #2d9574;">)</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">fixed sizes and distances for now.</span>
  1515. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show label</span>
  1516. fill<span style="color: #2d9574;">(</span><span style="color: #a45bad;">0</span><span style="color: #2d9574;">)</span>;
  1517. textAlign<span style="color: #2d9574;">(</span>CENTER,CENTER<span style="color: #2d9574;">)</span>;
  1518. text<span style="color: #2d9574;">(</span>context.title, x, y + contextSize/<span style="color: #a45bad;">1</span>.<span style="color: #a45bad;">5</span><span style="color: #2d9574;">)</span>;
  1519. colorMode<span style="color: #2d9574;">(</span>HSB<span style="color: #2d9574;">)</span>;
  1520. fill<span style="color: #2d9574;">(</span>darken<span style="color: #67b11d;">(</span>contextColor<span style="color: #67b11d;">)</span><span style="color: #2d9574;">)</span>;
  1521. text<span style="color: #2d9574;">(</span><span style="color: #2d9574;">""</span> + context.plSum, x, y<span style="color: #2d9574;">)</span>;
  1522. colorMode<span style="color: #2d9574;">(</span>RGB<span style="color: #2d9574;">)</span>;
  1523. count++;
  1524. <span style="color: #bc6ec5;">}</span>
  1525. <span style="color: #4f97d7;">}</span>
  1526. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">create a string that lists the values of the intersection in d, with the values in c</span>
  1527. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getIntersection</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span>, <span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span><span style="color: #4f97d7;">)</span>
  1528. <span style="color: #4f97d7;">{</span>
  1529. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">result</span> = <span style="color: #2d9574;">""</span>;
  1530. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span> : d.intersect<span style="color: #bc6ec5;">)</span>
  1531. <span style="color: #bc6ec5;">{</span>
  1532. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">value</span> = getPropertyValue<span style="color: #2d9574;">(</span>c, key<span style="color: #2d9574;">)</span>;
  1533. <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #2d9574;">(</span>value != <span style="color: #a45bad;">null</span><span style="color: #2d9574;">)</span> result += key + <span style="color: #2d9574;">" ("</span> + value + <span style="color: #2d9574;">")\n"</span>;
  1534. <span style="color: #bc6ec5;">}</span>
  1535. <span style="color: #4f97d7; font-weight: bold;">return</span> result;
  1536. <span style="color: #4f97d7;">}</span>
  1537. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">create a string that lists the missing keys in the intersection d</span>
  1538. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getMissing</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span><span style="color: #4f97d7;">)</span>
  1539. <span style="color: #4f97d7;">{</span>
  1540. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">result</span> = <span style="color: #2d9574;">""</span>;
  1541. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span> : d.except<span style="color: #bc6ec5;">)</span>
  1542. <span style="color: #bc6ec5;">{</span>
  1543. result += key + <span style="color: #2d9574;">"\n"</span>;
  1544. <span style="color: #bc6ec5;">}</span>
  1545. <span style="color: #4f97d7; font-weight: bold;">return</span> result;
  1546. <span style="color: #4f97d7;">}</span>
  1547. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">get the value of a property value in c designated by key</span>
  1548. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #bc6ec5; font-weight: bold;">getPropertyValue</span><span style="color: #4f97d7;">(</span><span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span>, <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">key</span><span style="color: #4f97d7;">)</span>
  1549. <span style="color: #4f97d7;">{</span>
  1550. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #bc6ec5;">(</span><span style="color: #ce537a; font-weight: bold;">Property</span> <span style="color: #7590db;">p</span> : c.properties<span style="color: #bc6ec5;">)</span>
  1551. <span style="color: #bc6ec5;">{</span>
  1552. <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #2d9574;">(</span>p.type == key<span style="color: #2d9574;">)</span>
  1553. <span style="color: #2d9574;">{</span>
  1554. <span style="color: #4f97d7; font-weight: bold;">return</span> p.value;
  1555. <span style="color: #2d9574;">}</span>
  1556. <span style="color: #bc6ec5;">}</span>
  1557. <span style="color: #4f97d7; font-weight: bold;">return</span> <span style="color: #a45bad;">null</span>;
  1558. <span style="color: #4f97d7;">}</span>
  1559. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show label</span>
  1560. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">drawDiff</span><span style="color: #4f97d7;">()</span>
  1561. <span style="color: #4f97d7;">{</span>
  1562. <span style="color: #ce537a; font-weight: bold;">Context</span> <span style="color: #7590db;">c</span> = contexts<span style="color: #bc6ec5;">[</span>hitContext<span style="color: #bc6ec5;">]</span>;
  1563. <span style="color: #ce537a; font-weight: bold;">Diff</span> <span style="color: #7590db;">d</span> = diffs<span style="color: #bc6ec5;">[</span>hitContext<span style="color: #bc6ec5;">]</span>;
  1564. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">available</span> = getIntersection<span style="color: #bc6ec5;">(</span>c,d<span style="color: #bc6ec5;">)</span>;
  1565. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">missing</span> = getMissing<span style="color: #bc6ec5;">(</span>d<span style="color: #bc6ec5;">)</span>;
  1566. <span style="color: #ce537a; font-weight: bold;">String</span> <span style="color: #7590db;">diffMessage</span> = <span style="color: #2d9574;">"RELEASE TO ENTITLE: \n"</span> + available + <span style="color: #2d9574;">"\nSTILL MISSING: \n"</span> + missing;
  1567. fill<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">0</span><span style="color: #bc6ec5;">)</span>;
  1568. textAlign<span style="color: #bc6ec5;">(</span>CENTER,CENTER<span style="color: #bc6ec5;">)</span>;
  1569. text<span style="color: #bc6ec5;">(</span>diffMessage, centerX, centerY<span style="color: #bc6ec5;">)</span>;
  1570. <span style="color: #4f97d7;">}</span>
  1571. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">draw</span><span style="color: #4f97d7;">()</span>
  1572. <span style="color: #4f97d7;">{</span>
  1573. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">clear bg</span>
  1574. background<span style="color: #bc6ec5;">(</span><span style="color: #a45bad;">200</span><span style="color: #bc6ec5;">)</span>;
  1575. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">draw hitbox</span>
  1576. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">originX</span> = requestX - requestSize/<span style="color: #a45bad;">2</span>;
  1577. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">originY</span> = requestY - requestSize/<span style="color: #a45bad;">2</span>;
  1578. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">rect(originX,originY, requestSize, requestSize);</span>
  1579. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">test if cursor is over the hitbox</span>
  1580. hitRequest = <span style="color: #bc6ec5;">(</span>mouseX &gt; originX &amp;&amp; mouseX &lt; <span style="color: #2d9574;">(</span>originX + requestSize<span style="color: #2d9574;">)</span> &amp;&amp;
  1581. mouseY &gt; originY &amp;&amp; mouseY &lt; <span style="color: #2d9574;">(</span>originY + requestSize<span style="color: #2d9574;">)</span><span style="color: #bc6ec5;">)</span>;
  1582. drawContexts<span style="color: #bc6ec5;">()</span>;
  1583. drawRequest<span style="color: #bc6ec5;">()</span>;<span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">on top</span>
  1584. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">String debug_info = "mx: " + mouseX + ", my: " + mouseY + ", ox: " + originX + ", oy: " + originY;</span>
  1585. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">text(debug_info, mouseX, mouseY);</span>
  1586. <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #bc6ec5;">(</span>hitContext &gt; -<span style="color: #a45bad;">1</span><span style="color: #bc6ec5;">)</span>
  1587. <span style="color: #bc6ec5;">{</span>
  1588. <span style="color: #2aa1ae; background-color: #292e34;">//</span><span style="color: #2aa1ae; background-color: #292e34;">show diff information</span>
  1589. drawDiff<span style="color: #2d9574;">()</span>;
  1590. <span style="color: #bc6ec5;">}</span>
  1591. <span style="color: #4f97d7;">}</span>
  1592. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mousePressed</span><span style="color: #4f97d7;">()</span> <span style="color: #4f97d7;">{</span>
  1593. dragging = hitRequest;
  1594. xOffset = mouseX - requestX;
  1595. yOffset = mouseY - requestY;
  1596. <span style="color: #4f97d7;">}</span>
  1597. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mouseDragged</span><span style="color: #4f97d7;">()</span>
  1598. <span style="color: #4f97d7;">{</span>
  1599. <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #bc6ec5;">(</span>dragging<span style="color: #bc6ec5;">)</span>
  1600. <span style="color: #bc6ec5;">{</span>
  1601. requestX = mouseX - xOffset;
  1602. requestY = mouseY - yOffset;
  1603. <span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">contextWasHit</span> = -<span style="color: #a45bad;">1</span>;
  1604. <span style="color: #4f97d7; font-weight: bold;">for</span><span style="color: #2d9574;">(</span><span style="color: #ce537a; font-weight: bold;">int</span> <span style="color: #7590db;">i</span> = <span style="color: #a45bad;">0</span>; i &lt; contexts.<span style="color: #ce537a; font-weight: bold;">length</span>; i++<span style="color: #2d9574;">)</span>
  1605. <span style="color: #2d9574;">{</span>
  1606. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">angle</span> = <span style="color: #67b11d;">(</span>i * eqd_angle<span style="color: #67b11d;">)</span> - <span style="color: #67b11d;">(</span>PI/<span style="color: #a45bad;">2</span><span style="color: #67b11d;">)</span>;
  1607. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">x</span> = centerX + contextDistance * cos<span style="color: #67b11d;">(</span>angle<span style="color: #67b11d;">)</span>;
  1608. <span style="color: #ce537a; font-weight: bold;">float</span> <span style="color: #7590db;">y</span> = centerY + contextDistance * sin<span style="color: #67b11d;">(</span>angle<span style="color: #67b11d;">)</span>;
  1609. <span style="color: #ce537a; font-weight: bold;">boolean</span> <span style="color: #7590db;">hit</span> = <span style="color: #67b11d;">(</span>mouseX &gt; x - contextSize/<span style="color: #a45bad;">2</span> &amp;&amp; mouseX &lt; <span style="color: #ce537a; font-weight: bold;">x</span> + contextSize/<span style="color: #a45bad;">2</span>
  1610. &amp;&amp; mouseY &gt; y - contextSize/<span style="color: #a45bad;">2</span> &amp;&amp; mouseY &lt; <span style="color: #ce537a; font-weight: bold;">y</span> + contextSize/<span style="color: #a45bad;">2</span><span style="color: #67b11d;">)</span>;
  1611. <span style="color: #4f97d7; font-weight: bold;">if</span><span style="color: #67b11d;">(</span>hit<span style="color: #67b11d;">)</span> contextWasHit = i;
  1612. <span style="color: #2d9574;">}</span>
  1613. hitContext = contextWasHit;
  1614. <span style="color: #bc6ec5;">}</span>
  1615. <span style="color: #4f97d7;">}</span>
  1616. <span style="color: #ce537a; font-weight: bold;">void</span> <span style="color: #bc6ec5; font-weight: bold;">mouseReleased</span><span style="color: #4f97d7;">()</span>
  1617. <span style="color: #4f97d7;">{</span>
  1618. dragging = <span style="color: #a45bad;">false</span>;
  1619. hitContext = -<span style="color: #a45bad;">1</span>;
  1620. requestX = centerX;
  1621. requestY = centerY;
  1622. <span style="color: #4f97d7;">}</span>
  1623. </pre>
  1624. </div>
  1625. <script src="processing.js"></script>
  1626. <script type="text/processing" data-processing-target="ob-013d1595486cf6d0070d352a941e7fecc8038933">
  1627. //color definitions
  1628. color a3 = #3A3B58;
  1629. color b3 = #734246;
  1630. color d3 = #B4561F;
  1631. color c3 = #336F60;
  1632. color f3 = #7A3E2A;
  1633. color g3 = #A48137;
  1634. color e2 = #97BBCB;
  1635. color a4 = #3B4257;
  1636. color b4 = #6A4345;
  1637. color d4 = #86451F;
  1638. color c4 = #345A48;
  1639. color f4 = #A92F21;
  1640. color g4 = #BC983B;
  1641. color a5 = #3D4358;
  1642. color b5 = #402623;
  1643. color d5 = #85442D;
  1644. color c5 = #3B403A;
  1645. color f5 = #7A150B;
  1646. color g5 = #252F2B;
  1647. color a1 = #597099;
  1648. color e4 = #0A3878;
  1649. color b1 = #D16365;
  1650. color d1 = #FFD43B;
  1651. color c1 = #B7BF98;
  1652. color e1 = #CAD2C8;
  1653. color e0 = #F5EDE5;
  1654. color f1 = #D17978;
  1655. color g1 = #FDD23E;
  1656. color a0 = #C5C3CC;
  1657. color e3 = #0485B1;
  1658. color b0 = #FFDCD6;
  1659. color d0 = #FFE9BE;
  1660. color c0 = #F0E9D5;
  1661. color f0 = #E4C8BF;
  1662. color g0 = #FBE6BA;
  1663. color a2 = #3D4B79;
  1664. color e5 = #084064;
  1665. color b2 = #974244;
  1666. color d2 = #F8AA08;
  1667. color c2 = #4E937F;
  1668. color f2 = #8F4330;
  1669. color g2 = #FFDB03;
  1670. color colors[][] = {
  1671. {b0,b1,b2,b3,b4,b5},
  1672. {c0,c1,c2,c3,c4,c5},
  1673. {a0,a1,a2,a3,a4,a5},
  1674. {d0,d1,d2,d3,d4,d5},
  1675. {e0,e1,e2,e3,e4,e5},
  1676. {f0,f1,f2,f3,f4,f5},
  1677. {g0,g1,g2,g3,g4,g5}
  1678. };
  1679. class PrivacyLevel {
  1680. public static int SECRET = 5;
  1681. public static int PRIVATE = 4;
  1682. public static int INTIMATE = 3;
  1683. public static int AFFILIATE = 2;
  1684. public static int PUBLIC = 1;
  1685. public static int COMMONS = 0;
  1686. }
  1687. class ContextType {
  1688. public static int FINANCIAL = 6;
  1689. public static int PERSONAL = 5;
  1690. public static int HEALTH = 4;
  1691. public static int EDUCATION = 3;
  1692. public static int WORK = 2;
  1693. public static int HOBBY = 1;
  1694. public static int OTHER = 0;
  1695. }
  1696. public int getColor(int privacy_level, int context_type)
  1697. {
  1698. return colors[context_type][privacy_level];
  1699. }
  1700. class Request
  1701. {
  1702. public String application;
  1703. public int contextType;
  1704. public String[] required_properties;
  1705. public String[] optional_properties;
  1706. public Request(String app, int contextType, String[] req, String[] opt)
  1707. {
  1708. this.application = app;
  1709. this.contextType = contextType;
  1710. this.required_properties = req;
  1711. this.optional_properties = opt;
  1712. }
  1713. }
  1714. class Diff
  1715. {
  1716. public String context;
  1717. public String[] intersect;
  1718. public String[] except;
  1719. public Diff(String ctx, String[] intersect, String[] except)
  1720. {
  1721. this.context = ctx;
  1722. this.intersect = intersect;
  1723. this.except = except;
  1724. }
  1725. }
  1726. class Property
  1727. {
  1728. public String type;
  1729. public String value;
  1730. public int pl;//privacy level
  1731. public Property(String type, String value, int pl)
  1732. {
  1733. this.type = type;
  1734. this.value = value;
  1735. this.pl = pl;
  1736. }
  1737. }
  1738. class Context
  1739. {
  1740. public String title;
  1741. public int plSum;
  1742. public int contextType;
  1743. public Property[] properties;
  1744. public Context(String title, int plSum, int contextType, Property[] properties)
  1745. {
  1746. this.title = title;
  1747. this.plSum = plSum;
  1748. this.properties = properties;
  1749. this.contextType = contextType;
  1750. }
  1751. }
  1752. XMLElement doc = new XMLElement(this, 'diff.xml');
  1753. //create typed versions because this is java :-(
  1754. Request parseRequest(XMLElement xml)
  1755. {
  1756. XMLElement req = xml.getChild(0);
  1757. String name = req.getChild(0).getContent();
  1758. int contextType = req.getChild(1).getContent();
  1759. String[] required = new String[req.getChild(2).getChildCount()];
  1760. String[] optional = new String[req.getChild(3).getChildCount()];
  1761. for (int i = 0; i < required.length; i++) {
  1762. required[i] = req.getChild(2).getChild(i).getContent();
  1763. }
  1764. for (int i = 0; i < optional.length; i++) {
  1765. optional[i] = req.getChild(3).getChild(i).getContent();
  1766. }
  1767. Request r = new Request(name,contextType,required,optional);
  1768. return r;
  1769. }
  1770. Context[] parseProfile(XMLElement xml)
  1771. {
  1772. XMLElement profile = xml.getChild(2);
  1773. Context[] contexts = new Context[profile.getChildCount()];
  1774. for(int i = 0; i < contexts.length; i++)
  1775. {
  1776. String contextName = profile.getChild(i).getChild(0).getContent();
  1777. int contextType = parseInt(profile.getChild(i).getChild(1).getContent());
  1778. int plSum = parseInt(profile.getChild(i).getChild(2).getContent());
  1779. XMLElement propertiesEl = profile.getChild(i).getChild(3);
  1780. Property[] properties = new Property[propertiesEl.getChildCount()];
  1781. for(int j = 0; j < properties.length; j++)
  1782. {
  1783. Property prop = parseProperty(propertiesEl.getChild(j));
  1784. properties[j] = prop;
  1785. }
  1786. Context context = new Context(contextName, plSum, contextType, properties);
  1787. contexts[i] = context;
  1788. }
  1789. return contexts;
  1790. }
  1791. Property parseProperty(XMLElement propertyEl)
  1792. {
  1793. String propertyType = propertyEl.getChild(0).getContent();
  1794. String value = propertyEl.getChild(1).getContent();
  1795. int pl = parseInt(propertyEl.getChild(2).getContent());
  1796. return new Property(propertyType, value, pl);
  1797. }
  1798. //create typed versions because this is java :-(
  1799. Diff[] parseDiffs(xml)
  1800. {
  1801. XMLElement diffsEl = xml.getChild(1);
  1802. Diff[] diffs = new Diff[diffsEl.getChildCount()];
  1803. for(int i = 0; i < diffs.length; i++)
  1804. {
  1805. String contextName = diffsEl.getChild(i).getChild(0).getContent();
  1806. String[] intersects = new String[diffsEl.getChild(i).getChild(1).getChildCount()];
  1807. String[] except = new String[diffsEl.getChild(i).getChild(2).getChildCount()];
  1808. for(int j = 0; j < intersects.length; j++)
  1809. {
  1810. intersects[j] = diffsEl.getChild(i).getChild(1).getChild(j).getContent();
  1811. }
  1812. for(int j = 0; j < except.length; j++)
  1813. {
  1814. except[j] = diffsEl.getChild(i).getChild(2).getChild(j).getContent();
  1815. }
  1816. Diff diff = new Diff(contextName,intersects,except);
  1817. diffs[i] = diff;
  1818. }
  1819. return diffs;
  1820. }
  1821. Request request = parseRequest(doc);
  1822. Diff[] diffs = parseDiffs(doc);
  1823. Context[] contexts = parseProfile(doc);
  1824. //divide the circle by the amount of contexts
  1825. //to get the angle between the lines that indicate the center of each context
  1826. float eqd_angle = TWO_PI / contexts.length;
  1827. //draw request circle in the center of the screen
  1828. float centerX, centerY;
  1829. float xOffset, yOffset;
  1830. float requestSize = 50;
  1831. //context parameters
  1832. float contextDistance = 200;//random(100,300);//random between 50 and 300
  1833. float contextSize = 100;//random(50,100); //random between 50 and 100
  1834. float requestX, requestY;//request coordinates, they can move
  1835. boolean hitRequest = false;
  1836. boolean dragging = false;
  1837. int hitContext = -1;//-1 if no context is hit, otherwise indicates the index of the hit context
  1838. void setup(){
  1839. size(800,800);
  1840. smooth();
  1841. //initialize screen when it is appropriate,
  1842. //before this it will display the wrong size
  1843. centerX = width/2;
  1844. centerY = height/2;
  1845. //request starts in the middle
  1846. requestX = centerX;
  1847. requestY = centerY;
  1848. }
  1849. //draw the request and label
  1850. void drawRequest()
  1851. {
  1852. color strokeColor = hitRequest? 255 : 153;
  1853. stroke(strokeColor);
  1854. color reqColor = getColor(PrivacyLevel.PUBLIC, request.contextType);
  1855. fill(reqColor);
  1856. ellipse(requestX,requestY, requestSize,requestSize);
  1857. fill(0);
  1858. textAlign(CENTER,CENTER);
  1859. text(request.application, requestX, requestY + 50/1.5);
  1860. //TODO: show weight of request
  1861. //text("" + weights[0], requestX, requestY);
  1862. }
  1863. //darken the given color, expects hsb color mode
  1864. int darken(int c)
  1865. {
  1866. float h = hue(c);
  1867. float s = saturation(c);
  1868. float v = brightness(c);
  1869. return color(h,s,v * 0.6);
  1870. }
  1871. void drawContexts()
  1872. {
  1873. //draw the contexts equidistant around the center where the request is
  1874. int count = 0;
  1875. for(String context : contexts)
  1876. {
  1877. float angle = (count * eqd_angle) - (PI/2);//start drawing at the top
  1878. float x = centerX + contextDistance * cos(angle); //calculate xPos
  1879. float y = centerY + contextDistance * sin(angle); //calculate yPos
  1880. color strokeColor = (hitContext == count) ? 255 : 153;
  1881. stroke(strokeColor);
  1882. color contextColor = getColor(PrivacyLevel.PUBLIC, context.contextType);
  1883. fill(contextColor);
  1884. ellipse(x, y, contextSize,contextSize);//fixed sizes and distances for now.
  1885. //show label
  1886. fill(0);
  1887. textAlign(CENTER,CENTER);
  1888. text(context.title, x, y + contextSize/1.5);
  1889. colorMode(HSB);
  1890. fill(darken(contextColor));
  1891. text("" + context.plSum, x, y);
  1892. colorMode(RGB);
  1893. count++;
  1894. }
  1895. }
  1896. //create a string that lists the values of the intersection in d, with the values in c
  1897. String getIntersection(Context c, Diff d)
  1898. {
  1899. String result = "";
  1900. for(String key : d.intersect)
  1901. {
  1902. String value = getPropertyValue(c, key);
  1903. if(value != null) result += key + " (" + value + ")\n";
  1904. }
  1905. return result;
  1906. }
  1907. //create a string that lists the missing keys in the intersection d
  1908. String getMissing(Diff d)
  1909. {
  1910. String result = "";
  1911. for(String key : d.except)
  1912. {
  1913. result += key + "\n";
  1914. }
  1915. return result;
  1916. }
  1917. //get the value of a property value in c designated by key
  1918. String getPropertyValue(Context c, String key)
  1919. {
  1920. for(Property p : c.properties)
  1921. {
  1922. if(p.type == key)
  1923. {
  1924. return p.value;
  1925. }
  1926. }
  1927. return null;
  1928. }
  1929. //show label
  1930. void drawDiff()
  1931. {
  1932. Context c = contexts[hitContext];
  1933. Diff d = diffs[hitContext];
  1934. String available = getIntersection(c,d);
  1935. String missing = getMissing(d);
  1936. String diffMessage = "RELEASE TO ENTITLE: \n" + available + "\nSTILL MISSING: \n" + missing;
  1937. fill(0);
  1938. textAlign(CENTER,CENTER);
  1939. text(diffMessage, centerX, centerY);
  1940. }
  1941. void draw()
  1942. {
  1943. //clear bg
  1944. background(200);
  1945. //draw hitbox
  1946. float originX = requestX - requestSize/2;
  1947. float originY = requestY - requestSize/2;
  1948. //rect(originX,originY, requestSize, requestSize);
  1949. //test if cursor is over the hitbox
  1950. hitRequest = (mouseX > originX && mouseX < (originX + requestSize) &&
  1951. mouseY > originY && mouseY < (originY + requestSize));
  1952. drawContexts();
  1953. drawRequest();//on top
  1954. //String debug_info = "mx: " + mouseX + ", my: " + mouseY + ", ox: " + originX + ", oy: " + originY;
  1955. //text(debug_info, mouseX, mouseY);
  1956. if(hitContext > -1)
  1957. {
  1958. //show diff information
  1959. drawDiff();
  1960. }
  1961. }
  1962. void mousePressed() {
  1963. dragging = hitRequest;
  1964. xOffset = mouseX - requestX;
  1965. yOffset = mouseY - requestY;
  1966. }
  1967. void mouseDragged()
  1968. {
  1969. if(dragging)
  1970. {
  1971. requestX = mouseX - xOffset;
  1972. requestY = mouseY - yOffset;
  1973. int contextWasHit = -1;
  1974. for(int i = 0; i < contexts.length; i++)
  1975. {
  1976. float angle = (i * eqd_angle) - (PI/2);
  1977. float x = centerX + contextDistance * cos(angle);
  1978. float y = centerY + contextDistance * sin(angle);
  1979. boolean hit = (mouseX > x - contextSize/2 && mouseX < x + contextSize/2
  1980. && mouseY > y - contextSize/2 && mouseY < y + contextSize/2);
  1981. if(hit) contextWasHit = i;
  1982. }
  1983. hitContext = contextWasHit;
  1984. }
  1985. }
  1986. void mouseReleased()
  1987. {
  1988. dragging = false;
  1989. hitContext = -1;
  1990. requestX = centerX;
  1991. requestY = centerY;
  1992. }
  1993. </script> <canvas id="ob-013d1595486cf6d0070d352a941e7fecc8038933"></canvas>
  1994. </div>
  1995. <div id="outline-container-org8875081" class="outline-4">
  1996. <h4 id="org8875081"><span class="section-number-4">5.0.1</span> Things to further investigate</h4>
  1997. <div class="outline-text-4" id="text-5-0-1">
  1998. <ul class="org-ul">
  1999. <li>How does the end user actually accept the request? Is it by dragging the request onto the context?</li>
  2000. <li>How does the end user decline the request?</li>
  2001. </ul>
  2002. </div>
  2003. </div>
  2004. </div>
  2005. </div>
  2006. <div id="postamble" class="status">
  2007. <p class="author">Author: Taco</p>
  2008. <p class="date">Created: 2018-04-10 Tue 16:47</p>
  2009. <p class="validation"><a href="http://validator.w3.org/check?uri=referer">Validate</a></p>
  2010. </div>
  2011. </body>
  2012. </html>