demonstrator_updated.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. CertainTrust Demonstrator in JavaScript
  5. Demonstrates some capabilities of the CertainTrust SDK
  6. using a Java applet that interactively calculates
  7. AND and OR of two CertainTrust data objects and
  8. visually displays both the input objects and the output.
  9. @author Florian Volk <florian.volk@cased.de>
  10. -->
  11. <head>
  12. <meta charset="utf-8" />
  13. <title>CertainTrust Demonstrator in JavaScript</title>
  14. <style type="text/css">
  15. h1, p, td:nth-child(2n) { text-align: center; }
  16. table { margin: 50px 0; }
  17. </style>
  18. <!-- include these two scripts and the CSS to enable both CertainTrust and the HTI -->
  19. <script type="text/javascript" src="CertainTrust.js"></script>
  20. <script type="text/javascript" src="certainTrustHTI.js"></script>
  21. <link rel="stylesheet" type="text/css" href="certainTrustHTI.css"/>
  22. </head>
  23. <body>
  24. <h1>Demonstrator for CertainTrust</h1>
  25. <p>CertainTrust provides a means for the evaluation of propositional logic terms under uncertainty.</p>
  26. <table>
  27. <tr>
  28. <th>Operand 1</th>
  29. <th>Operator</th>
  30. <th>Operand 2</th>
  31. <th>=</th>
  32. <th>Result</th>
  33. <th></th>
  34. </tr>
  35. <!-- Demonstrator for CertainTrust.AND -->
  36. <tr>
  37. <td id="and-operand1"></td>
  38. <td>AND</td>
  39. <td id="and-operand2"></td>
  40. <td>=</td>
  41. <td id="and-result"></td>
  42. <td></td>
  43. </tr>
  44. <!-- Demonstrator for CertainTrust.OR -->
  45. <tr>
  46. <td id="or-operand1"></td>
  47. <td>OR</td>
  48. <td id="or-operand2"></td>
  49. <td>=</td>
  50. <td id="or-result"></td>
  51. <td></td>
  52. </tr>
  53. <!-- Demonstrator for CertainTrust.cFusion -->
  54. <tr>
  55. <td id="cf-operand1"></td>
  56. <td>cFusion</td>
  57. <td id="cf-operand2"></td>
  58. <td>=</td>
  59. <td id="cf-result"></td>
  60. <td>DoC <input type="text" id="DoC" size="2"></td>
  61. </tr>
  62. <!-- Demonstrator for CertainTrust.wFusion -->
  63. <tr>
  64. <td id="wf-operand1"></td>
  65. <td>wFusion</td>
  66. <td id="wf-operand2"></td>
  67. <td>=</td>
  68. <td id="wf-result"></td>
  69. <td>Weight1 <select id = "weight1" onChange="selectW1(this.value);">
  70. <option value="0">0</option>
  71. <option value="1" selected="selected">1</option>
  72. <option value="2">2</option>
  73. <option value="3">3</option>
  74. <option value="4">4</option>
  75. <option value="5">5</option>
  76. </select><br><br>
  77. Weight2 <select id = "weight2" onChange="selectW2(this.value);">
  78. <option value="0">0</option>
  79. <option value="1" selected="selected">1</option>
  80. <option value="2">2</option>
  81. <option value="3">3</option>
  82. <option value="4">4</option>
  83. <option value="5">5</option>
  84. </select>
  85. </td>
  86. </tr>
  87. <!-- Demonstrator for CertainTrust.CONSENSUS -->
  88. <tr>
  89. <td id="con-operand1"></td>
  90. <td>CONSENSUS</td>
  91. <td id="con-operand2"></td>
  92. <td>=</td>
  93. <td id="con-result"></td>
  94. <td></td>
  95. </tr>
  96. <!-- Demonstrator for CertainTrust.DISCOUNTING -->
  97. <tr>
  98. <td id="dis-operand1"></td>
  99. <td>DIS-<br>-COUNTING</td>
  100. <td id="dis-operand2"></td>
  101. <td>=</td>
  102. <td id="dis-result"></td>
  103. <td></td>
  104. </tr>
  105. </table>
  106. <script type="text/javascript">
  107. // create an Array to hold the CertainTrust objects
  108. var CT_objects = [];
  109. var N = 10;
  110. var cweight = [1,1];
  111. var wweight = [1,1];
  112. var doc = 0.2;
  113. var CT_names = ['and-operand1', 'and-operand2', 'and-result',
  114. 'or-operand1', 'or-operand2', 'or-result',
  115. 'cf-operand1','cf-operand2','cf-result',
  116. 'wf-operand1','wf-operand2','wf-result',
  117. 'con-operand1','con-operand2','con-result',
  118. 'dis-operand1','dis-operand2','dis-result'];
  119. function selectW1(value){
  120. wweight[0] = parseInt(value);
  121. WFObserver.update();
  122. }
  123. function selectW2(value){
  124. wweight[1] = parseInt(value);
  125. WFObserver.update();
  126. }
  127. // ANDObserver is used for the AND calculation
  128. var ANDObserver = {
  129. update: function() {
  130. // calculate the CertainTrust.AND for both values
  131. var CT_result = CT_objects['and-operand1'].AND(CT_objects['and-operand2']);
  132. // update the HTI which displays the result
  133. CT_objects['and-result'].setF(CT_result.getF());
  134. CT_objects['and-result'].setTC(CT_result.getT(), CT_result.getC());
  135. }
  136. };
  137. // ORObserver is used for the OR calculation
  138. var ORObserver = {
  139. update: function() {
  140. // calculate the CertainTrust.OR for both values
  141. var CT_result = CT_objects['or-operand1'].OR(CT_objects['or-operand2']);
  142. // update the HTI which displays the result
  143. CT_objects['or-result'].setF(CT_result.getF());
  144. CT_objects['or-result'].setTC(CT_result.getT(), CT_result.getC());
  145. }
  146. };
  147. // CFObserver is used for the conflicted fusion (cFusion) calculation
  148. var CFObserver = {
  149. update: function() {
  150. var fusTmp = new CertainTrust(5);
  151. var fusArray = [];
  152. fusArray.push(CT_objects['cf-operand1']);
  153. fusArray.push(CT_objects['cf-operand2']);
  154. //cFusion operation
  155. var CT_result = fusTmp.cFusion(fusArray,cweight);
  156. doc = CT_result.getDoC();
  157. // update the HTI which displays the result
  158. CT_objects['cf-result'].setF(CT_result.getF());
  159. CT_objects['cf-result'].setTC(CT_result.getT(), CT_result.getC());
  160. document.getElementById("DoC").value = doc;
  161. }
  162. };
  163. // WFObserver is used for the weighted fusion (wFusion) calculation
  164. var WFObserver = {
  165. update: function() {
  166. var fusTmp = new CertainTrust(5);
  167. var fusArray = [];
  168. fusArray.push(CT_objects['wf-operand1']);
  169. fusArray.push(CT_objects['wf-operand2']);
  170. //cFusion operation
  171. var CT_result = fusTmp.wFusion(fusArray,wweight);
  172. // update the HTI which displays the result
  173. CT_objects['wf-result'].setF(CT_result.getF());
  174. CT_objects['wf-result'].setTC(CT_result.getT(), CT_result.getC());
  175. }
  176. };
  177. // CONObserver is used for the CONSENSUS calculation
  178. var CONObserver = {
  179. update: function() {
  180. // calculate the CertainTrust.AND for both values
  181. var CT_result = CT_objects['con-operand1'].CONSENSUS(CT_objects['con-operand2']);
  182. // update the HTI which displays the result
  183. CT_objects['con-result'].setF(CT_result.getF());
  184. CT_objects['con-result'].setTC(CT_result.getT(), CT_result.getC());
  185. }
  186. };
  187. // DISObserver is used for the DISCOUNTING calculation
  188. var DISObserver = {
  189. update: function() {
  190. // calculate the CertainTrust.DISCOUNTING for both values
  191. var CT_result = CT_objects['dis-operand1'].CONSENSUS(CT_objects['dis-operand2']);
  192. // update the HTI which displays the result
  193. CT_objects['dis-result'].setF(CT_result.getF());
  194. CT_objects['dis-result'].setTC(CT_result.getT(), CT_result.getC());
  195. }
  196. };
  197. // create the CertainTrust objects and the associated HTIs
  198. for (var i = 0, element; element = CT_names[i]; ++i) {
  199. var CT_object = new CertainTrust(N);
  200. // the result HTIs should be read-only
  201. var isResultHTI = (-1 !== element.indexOf('-result'));
  202. var HTI = new CertainTrustHTI(CT_object, {domParent: element, readonly: isResultHTI});
  203. // register our observers for the calculation
  204. if (!isResultHTI) {
  205. var isOR = (0 === element.indexOf('or-'));
  206. var isAND = (0 === element.indexOf('and-'));
  207. var isCF = (0 === element.indexOf('cf-'));
  208. var isWF = (0 === element.indexOf('wf-'));
  209. var isCON = (0 === element.indexOf('con-'));
  210. var isDIS = (0 === element.indexOf('dis-'));
  211. if(isOR){
  212. CT_object.addObserver(ORObserver);
  213. }
  214. else if(isAND){
  215. CT_object.addObserver(ANDObserver);
  216. }
  217. else if(isCON){
  218. CT_object.addObserver(CONObserver);
  219. }
  220. else if(isDIS){
  221. CT_object.addObserver(DISObserver);
  222. }
  223. else if(isCF){
  224. CT_object.addObserver(CFObserver);
  225. }
  226. else{
  227. CT_object.addObserver(WFObserver);
  228. }
  229. }
  230. // store the created objects for easy access in the Arrays
  231. CT_objects[element] = CT_object;
  232. }
  233. // trigger initial update to the result HTIs
  234. ANDObserver.update();
  235. ORObserver.update();
  236. CFObserver.update();
  237. WFObserver.update();
  238. CONObserver.update();
  239. DISObserver.update();
  240. </script>
  241. <p>
  242. <img src="logo_tudarmstadt.png" alt="Technische Universität Darmstadt" width="176" height="73" />
  243. <img src="logo_softwarecluster.png" alt="Software-Cluster" width="212" height="73" />
  244. </p>
  245. </body>
  246. </html>