certainTrustTViz.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. /**
  2. * CertainTrust SDK
  3. *
  4. * Implements the computational trust model "CertainTrust"
  5. * in JavaScript.
  6. * See <http://www.tk.informatik.tu-darmstadt.de/de/research/smart-security-and-trust/> for further details.
  7. *
  8. *
  9. * Telecooperation Department, Technische Universität Darmstadt
  10. * <http://www.tk.informatik.tu-darmstadt.de/>
  11. *
  12. * Prof. Dr. Max Mühlhäuser <max@informatik.tu-darmstadt.de>
  13. * Florian Volk <florian.volk@cased.de>
  14. *
  15. *
  16. * @author Daniel Dieth
  17. * @author David Kalnischkies
  18. * @author Maria Pelevina
  19. * @version 1.0
  20. */
  21. /* This Source Code Form is subject to the terms of the Mozilla Public
  22. * License, v. 2.0. If a copy of the MPL was not distributed with this
  23. * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
  24. //##########################################################################################
  25. // CertainTrustTViz constructor
  26. //##########################################################################################
  27. var CertainTrustTViz = function(data, config) {
  28. this.NR = CertainTrustTVizElement.length();
  29. CertainTrustTVizElement.push(this);
  30. this.certainTrusts = [];
  31. this.add(data);
  32. // set sane defaults for config if nothing is set
  33. if (config === undefined) config = {};
  34. if (config.id === undefined) config.id = 'certaintrust-tviz-' + this.NR;
  35. // design your widget
  36. if (config.canvas === undefined) config.canvas = {};
  37. if (config.canvas.height === undefined) config.canvas.height = 440;
  38. if (config.canvas.width === undefined) config.canvas.width = 440;
  39. if (config.canvas.inner === undefined) config.canvas.inner = 30;
  40. if (config.middle === undefined) config.middle = 'AVERAGE';
  41. if (config.onClick === undefined) config.onClick = undefined;
  42. if (config.onMiddleClick === undefined) config.onMiddleClick = undefined;
  43. this.ID = config.id;
  44. this.config = config;
  45. var element = document.createElement('div');
  46. element.setAttribute('id', this.ID);
  47. element.setAttribute('class', "text-center");
  48. var dom = this.certainTrusts[0]._insertElement(config, element);
  49. this.update();
  50. if (dom !== undefined)
  51. return dom;
  52. };
  53. CertainTrustTViz.prototype.update = function() {
  54. var xmlns = 'http://www.w3.org/2000/svg';
  55. var dotx = this.config.canvas.height / 2;
  56. var doty = this.config.canvas.width / 2;
  57. var rotate = 360 - 45;
  58. var circle_y = this.config.canvas.inner;
  59. var circle_height = dotx - (2 * circle_y);
  60. var rotationstep = 360 / this.certainTrusts.length;
  61. var element = document.getElementById(this.ID);
  62. // see if we have to redraw thanks to an added/removed CertainTrust element
  63. if (element.hasChildNodes() === true) {
  64. var old_arcs = document.getElementById(this.ID + '-arcs');
  65. if (old_arcs.childNodes.length !== this.certainTrusts.length)
  66. element.removeChild(element.firstChild);
  67. }
  68. var arcs = document.createElementNS(xmlns, 'g');
  69. arcs.setAttribute('stroke', 'none');
  70. arcs.setAttribute('class', 'certaintrust-tviz-arcs');
  71. arcs.setAttribute('id', this.ID + '-arcs');
  72. // first time run or removed by the if above: full build
  73. if (element.hasChildNodes() === false)
  74. {
  75. // prepare the various elements we need
  76. var axes = document.createElementNS(xmlns, 'g');
  77. axes.setAttribute('fill', 'none');
  78. axes.setAttribute('stroke', 'grey');
  79. axes.setAttribute('class', 'certaintrust-tviz-axes');
  80. var desc = document.createElementNS(xmlns, 'g');
  81. for (var a = 0; a < this.certainTrusts.length; ++a) {
  82. var rotation = (rotate + (rotationstep * a)) % 360;
  83. // an axis for each arc to show of how big each arc could be
  84. var axis = this._generateAxis(xmlns, dotx, doty, circle_height, circle_y, rotation);
  85. axes.appendChild(axis);
  86. // the arc representing the CertainTrust element
  87. var arc = this._generateArc(xmlns, this.certainTrusts[a], dotx, doty, circle_height, circle_y, rotation, rotationstep);
  88. arcs.appendChild(arc);
  89. // label for each arc
  90. var label = this._generateArcLabel(xmlns, this.certainTrusts[a], dotx, doty, circle_height, circle_y, rotation, rotationstep);
  91. desc.appendChild(label);
  92. }
  93. if (this.config.middle !== 'NONE') {
  94. var total = this._generateTotalInTheMiddle(xmlns, dotx, doty);
  95. desc.appendChild(total);
  96. }
  97. // draw circles to indicate how large the arcs could be
  98. var circles = this._generateCircles(xmlns, circle_y, circle_height);
  99. // our new tviz
  100. var svg = document.createElementNS(xmlns, 'svg');
  101. svg.setAttribute('height', this.config.canvas.height);
  102. svg.setAttribute('width', this.config.canvas.width);
  103. svg.appendChild(circles);
  104. svg.appendChild(arcs);
  105. svg.appendChild(axes);
  106. svg.appendChild(desc);
  107. // finally, insert tviz
  108. element.appendChild(svg);
  109. } else {
  110. // we have most of the image, so just change what has changed
  111. element = element.firstChild;
  112. // get the new arcs set
  113. for (var a = 0; a < this.certainTrusts.length; ++a) {
  114. var rotation = (rotate + (rotationstep * a)) % 360;
  115. var arc = this._generateArc(xmlns, this.certainTrusts[a], dotx, doty, circle_height, circle_y, rotation, rotationstep);
  116. arcs.appendChild(arc);
  117. }
  118. // find the old arcs set and exchange it with the new set
  119. var old_arcs = document.getElementById(this.ID + '-arcs');
  120. element.insertBefore(arcs, old_arcs);
  121. element.removeChild(old_arcs);
  122. if (this.config.middle !== 'NONE') {
  123. // and now change the text of label in the middle
  124. var total = document.getElementById(this.ID + '-middle');
  125. total.firstChild.nodeValue = this._calcMiddleLabel(this.certainTrusts);
  126. }
  127. }
  128. };
  129. CertainTrustTViz.prototype.add = function() {
  130. for (var i = 0; i < arguments.length; ++i) {
  131. var ct = arguments[i];
  132. if (ct instanceof Array) {
  133. for (var j = 0; j < ct.length; ++j) {
  134. var c = ct[j];
  135. this.certainTrusts.push(c);
  136. c.addObserver(this);
  137. }
  138. } else {
  139. this.certainTrusts.push(ct);
  140. ct.addObserver(this);
  141. }
  142. }
  143. // don't trigger on first call from constructor
  144. if (this.ID !== undefined)
  145. this.update();
  146. };
  147. CertainTrustTViz.prototype.remove = function() {
  148. for (var i = 0; i < arguments.length; ++i) {
  149. var ct = arguments[i];
  150. if (ct instanceof CertainTrust) {
  151. for (var j = 0; j < ct.length; ++j) {
  152. for (var k = 0; k < this.certainTrusts.length; ++k) {
  153. if (this.certainTrusts[k] !== ct[j])
  154. continue;
  155. ct[j].deleteObserver(this);
  156. this.certainTrusts.splice(k, 1);
  157. break;
  158. }
  159. }
  160. } else {
  161. for (var k = 0; k < this.certainTrusts.length; ++k) {
  162. if (this.certainTrusts[k].getName() !== ct)
  163. continue;
  164. this.certainTrusts[k].deleteObserver(this);
  165. this.certainTrusts.splice(k, 1);
  166. break;
  167. }
  168. }
  169. }
  170. this.update();
  171. };
  172. CertainTrustTViz.prototype._generateAxis = function(xmlns, dotx, doty, circle_height, circle_y, rotation) {
  173. var point = this.certainTrusts[0]._pointOnCircle(dotx, doty, rotation, circle_y);
  174. var axis = document.createElementNS(xmlns, 'g');
  175. axis.setAttribute('fill', 'none');
  176. axis.setAttribute('stroke', 'grey');
  177. var placement;
  178. if (rotation >= 270 && rotation < 360 || rotation >= 0 && rotation < 90) {
  179. axis.setAttribute('transform', 'translate(' + point[1] + ',' + point[0] + ') rotate(' + (rotation) + ')');
  180. axis.setAttribute('class', 'certaintrust-tviz-axis-left');
  181. placement = -1;
  182. } else {
  183. axis.setAttribute('transform', 'translate(' + point[1] + ',' + point[0] + ') rotate(' + (rotation - 180) + ')');
  184. axis.setAttribute('class', 'certaintrust-tviz-axis-right');
  185. placement = 1;
  186. }
  187. var axis_line = document.createElementNS(xmlns, 'line');
  188. axis_line.setAttribute('fill', 'inherit');
  189. axis_line.setAttribute('stroke', 'inherit');
  190. axis_line.setAttribute('x1', 0);
  191. axis_line.setAttribute('y1', 0);
  192. axis_line.setAttribute('x2', 0);
  193. axis_line.setAttribute('y2', placement * circle_height);
  194. axis.appendChild(axis_line);
  195. for (var t = 0; t < 6; ++t) {
  196. var y = placement * (circle_height * (t / 5));
  197. var tick_line = document.createElementNS(xmlns, 'line');
  198. tick_line.setAttribute('fill', 'inherit');
  199. tick_line.setAttribute('stroke', 'inherit');
  200. tick_line.setAttribute('x1', 0);
  201. tick_line.setAttribute('y1', y);
  202. tick_line.setAttribute('x2', placement * 6);
  203. tick_line.setAttribute('y2', y);
  204. var tick_text = document.createElementNS(xmlns, 'text');
  205. tick_text.setAttribute('fill', 'grey');
  206. tick_text.setAttribute('x', placement * 9);
  207. tick_text.setAttribute('y', y);
  208. tick_text.setAttribute('dy', '.5em');
  209. tick_text.setAttribute('font-size', '.5em');
  210. var msg = document.createTextNode(t * 20);
  211. tick_text.appendChild(msg);
  212. var tick = document.createElementNS(xmlns, 'g');
  213. tick.setAttribute('fill', 'inherit');
  214. tick.setAttribute('stroke', 'inherit');
  215. tick.appendChild(tick_line);
  216. tick.appendChild(tick_text);
  217. axis.appendChild(tick);
  218. }
  219. return axis;
  220. };
  221. CertainTrustTViz.prototype._generateArc = function(xmlns, certainTrust, dotx, doty, circle_height, circle_y, rotation, rotationstep) {
  222. var arc_width = rotationstep * certainTrust.getC();
  223. var arc_free = (rotationstep - arc_width) / 2;
  224. var arc_low_left = certainTrust._pointOnCircle(dotx, doty, (rotation + arc_free), circle_y);
  225. var arc_low_right = certainTrust._pointOnCircle(dotx, doty, (rotation + rotationstep - arc_free), circle_y);
  226. var arc_height = (circle_height * certainTrust.getT()) + circle_y;
  227. var arc_high_left = certainTrust._pointOnCircle(dotx, doty, (rotation + arc_free), arc_height);
  228. var arc_high_right = certainTrust._pointOnCircle(dotx, doty, (rotation + rotationstep - arc_free), arc_height);
  229. var color = certainTrust._getColor(certainTrust.getC(), certainTrust.getT(), certainTrust.getF());
  230. var arc = document.createElementNS(xmlns, 'path');
  231. arc.setAttribute('fill', 'rgb(' + Math.round(color[0]) + ',' + Math.round(color[1]) + ',' + Math.round(color[2]) + ')');
  232. arc.setAttribute('stroke', 'inherit');
  233. arc.setAttribute('d', 'M' + arc_low_left[1] + ' ' + arc_low_left[0] +
  234. 'A' + circle_y + ',' + circle_y + ' 0 0,1 ' + arc_low_right[1] + ',' + arc_low_right[0] +
  235. 'L' + arc_high_right[1] + ' ' + arc_high_right[0] +
  236. 'A' + arc_height + ',' + arc_height + ' 0 0,0 ' + arc_high_left[1] + ',' + arc_high_left[0] +
  237. 'z');
  238. arc.setAttribute('title', 'Trust: ' + certainTrust.getT() + '\nCertainty: ' + certainTrust.getC());
  239. if (this.config.onClick !== undefined)
  240. {
  241. var onClick = this.config.onClick;
  242. arc.addEventListener("click", function(e) { onClick(certainTrust); }, false);
  243. }
  244. return arc;
  245. };
  246. CertainTrustTViz.prototype._generateArcLabel = function(xmlns, certainTrust, dotx, doty, circle_height, circle_y, rotation, rotationstep) {
  247. var label = document.createElementNS(xmlns, 'text');
  248. label.setAttribute('fill', 'black');
  249. var outerpoint = this.certainTrusts[0]._pointOnCircle(dotx, doty, (rotation + (rotationstep / 2)), (circle_height + circle_y));
  250. label.setAttribute('x', outerpoint[1]);
  251. label.setAttribute('y', outerpoint[0]);
  252. label.setAttribute('dy', '.5em');
  253. label.setAttribute('text-anchor', 'middle');
  254. var msg = document.createTextNode(certainTrust.getName());
  255. label.appendChild(msg);
  256. return label;
  257. };
  258. CertainTrustTViz.prototype._generateTotalInTheMiddle = function(xmlns, dotx, doty) {
  259. var total = document.createElementNS(xmlns, 'text');
  260. total.setAttribute('fill', 'grey');
  261. total.setAttribute('x', dotx);
  262. total.setAttribute('y', doty);
  263. total.setAttribute('dy', '.5em');
  264. total.setAttribute('text-anchor', 'middle');
  265. total.setAttribute('id', this.ID + '-middle');
  266. var msg = document.createTextNode(this._calcMiddleLabel(this.certainTrusts));
  267. total.appendChild(msg);
  268. if (this.config.onMiddleClick !== undefined)
  269. {
  270. var onMiddleClick = this.config.onMiddleClick;
  271. total.addEventListener("click", function(e) { onMiddleClick(); }, false);
  272. }
  273. return total;
  274. };
  275. CertainTrustTViz.prototype._generateCircles = function(xmlns, circle_y, circle_height) {
  276. var circles = document.createElementNS(xmlns, 'g');
  277. circles.setAttribute('fill', 'none');
  278. circles.setAttribute('stroke', 'lightgrey');
  279. circles.setAttribute('class', 'certaintrust-tviz-circles');
  280. for (var i = 0; i < 11; ++i) {
  281. var circle = document.createElementNS(xmlns, 'circle');
  282. circle.setAttribute('cx', '50%');
  283. circle.setAttribute('cy', '50%');
  284. var r = circle_y + (circle_height * (i / 10));
  285. circle.setAttribute('r', r);
  286. circle.setAttribute('fill', 'inherit');
  287. circle.setAttribute('stroke', 'inherit');
  288. circles.appendChild(circle);
  289. }
  290. return circles;
  291. };
  292. // Calculate the average over all included CertainTrusts
  293. CertainTrustTViz.prototype._calcMiddleLabel = function(indata) {
  294. if (this.config.middle === "NONE")
  295. return "";
  296. else if (this.config.middle === "AVERAGE") {
  297. var avg = 0.0;
  298. for (var i = 0; i < indata.length; i++) {
  299. avg += indata[i].getExpectation();
  300. }
  301. return (Math.round(avg/indata.length*1000)/10) + "%";
  302. } else if (this.config.middle === "AND") {
  303. var result = indata[0];
  304. for (var i = 1; i < indata.length; i++) {
  305. result = result.AND(indata[i]);
  306. }
  307. return (Math.round(result.getExpectation()*1000)/10) + "%";
  308. } else
  309. return this.config.middle(indata);
  310. };
  311. // global var for storing and accessing all the widgets
  312. var CertainTrustTVizElement = { _elements: [],
  313. ById: function(id) {
  314. for (var i = 0; i < CertainTrustTVizElement._elements.length; ++i) {
  315. if (CertainTrustTVizElement._elements[i].ID === id)
  316. return CertainTrustTVizElement._elements[i];
  317. }
  318. return null;
  319. },
  320. ByNr: function(nr) { return CertainTrustTVizElement._elements[nr]; },
  321. push: function(cte) { CertainTrustTVizElement._elements.push(cte); },
  322. length: function() { return CertainTrustTVizElement._elements.length; }
  323. };