Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
74 lines (67 sloc) 4.37 KB
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/fabric0.9.15.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Feature Usage Diagram</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!-- demo features-->
<div style="text-align:center;font-size:30px"> Demo Features</div>
<p>Bellow we provide a list of elements, which help to illustrate the functionality of Feature Usage Explorer.
First, you have to open the console of your browser. Then, you should see the list of features that were automatically identified by the tool:
<li> Path: html > body: div Feature name: double click div</li>
<li>Path: html > body: a Feature name: simple ancor</li>
<li>Path: html > body: a Feature name: ancor with title </li>
<li>Path: html > body > p: a Feature name: manual </li>
<li> Path: html > body > p: a Feature name: repository </li>
<li>Path: html > body > p: a Feature name: demo json file </li>
<p>Notice that button with no event attached "no onclick button" was not identified, because it does not change the state of the system when user clicks on it.
Furthermore, when you click or double click on the remaining elements then the event is registered and it is outputted to the console. </p>
<div ondblclick="return;">double click div</div>
<button>no onclick button</button> <br/>
<a href="#">simple ancor</a> <br/>
<a href="#" title="ancor with title">ancor with title</a>
<!-- end demo features-->
<p>The user of the Feature Usage Explorer library should decide, which information about the features is important for his/her purposes. Then, such information should be sent to the preferred data storage by substituting console output with ajax call to the selected server.
Finally, if the user is interested to visualise the collected information in Feature Usage Diagram, he should write a parser, which generates required json specified in the <a href="">manual</a>.
The demo parser is available in the <a href="">repository</a> of the Feature Usage Explorer.</p>
<!-- feature usage diagram canvas goes here. It must have id="canvas"-->
<p>Bellow the Feature Usage Diagram is automatically generated from a <a href="">demo json file</a>.</p>
<div style="text-align:center;font-size:30px"> Feature Usage Diagram</div>
<canvas id="canvas" width="2000" height="1000"></canvas>
<!-- feature usage explorer library goes after canvas -->
<script src="js/feature.usage.explorer.js"></script>
<!-- feature usage explorer usage demo-->
<script type="text/javascript">
/* Supported JavaSript events: */
/* click dblclick mousedown mousemove mouseover mouseout mouseup keydown */
/* keypress keyup abort error load resize scroll unload blur change focus */
/* reset select submit */
/* Feature Usage Explorer can be used only after DOM has been initialized */
/* explorer.getFeatures(e) gets obtains all features that have one of the standard
JavaScript events binded to them. User can sepcify the events of interest */
var features = explorer.getFeatures ("click dblclick");
for (var i=0;i<features.length;i++)
console.log("Path: "+ features[i].path+" Feature name: "+ features[i].name);
/* explorer.monitorFeatures(e) binded to the element of interest, monitors if
specified events were trigered on features. Finally, it returns feature details
and the event which was triggered */
$(window).bind("click dblclick", function(event){
if (explorer.monitorFeatures(event)) {
var feature = explorer.monitorFeatures(event);
console.log("Path: "+ feature.path+" Feature name: "+ " Event type: "+feature.eventType);
/* explorer.initDiagram(url) initializes the diagram on canvas with id="canvas"
and visualizes the diagram based on the data provided in the url */
You can’t perform that action at this time.